feat(fuselage): Remove deprecated InputBox.* component namespace

.changeset/some-seas-prove.md

@@ -0,0 +1,7 @@
+---
+'@rocket.chat/onboarding-ui': minor
+'@rocket.chat/fuselage': minor
+'@rocket.chat/layout': minor
+---
+
+feat(fuselage): Remove deprecated `InputBox.*` component namespace

packages/fuselage/src/components/AutoComplete/AutoComplete.tsx

@@ -15,7 +15,7 @@ import AnimatedVisibility from '../AnimatedVisibility';
 import Box from '../Box';
 import Chip from '../Chip';
 import { Icon } from '../Icon';
-import { InputBox } from '../InputBox';
+import { Input } from '../InputBox';
 import Margins from '../Margins';
 import type { OptionType } from '../Options';
 import { useCursor, Options } from '../Options';
@@ -91,7 +91,7 @@ export function AutoComplete({
   onBlur: onBlurAction = () => {},
   ...props
 }: AutoCompleteProps): ReactElement {
-  const ref = useRef<HTMLInputElement>();
+  const ref = useRef<HTMLInputElement>(null);
   const { ref: containerRef, borderBoxSize } = useResizeObserver();
 
   const [selected, setSelected] = useState(
@@ -185,7 +185,7 @@ export function AutoComplete({
         role='group'
       >
         <Margins all='x4'>
-          <InputBox.Input
+          <Input
             ref={ref}
             onChange={useEffectEvent((e: ChangeEvent<HTMLInputElement>) =>
               setFilter?.(e.currentTarget.value),

packages/fuselage/src/components/Contextualbar/Contextualbar.stories.tsx

@@ -6,7 +6,7 @@ import Box from '../Box';
 import Button, { IconButton } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
 import { Icon } from '../Icon';
-import InputBox from '../InputBox';
+import { InputBox } from '../InputBox';
 
 import Contextualbar from './Contextualbar';
 import ContextualbarAction from './ContextualbarAction';

packages/fuselage/src/components/ContextualbarV2/Contextualbar.stories.tsx

@@ -6,7 +6,7 @@ import Box from '../Box';
 import Button, { IconButton } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
 import { Icon } from '../Icon';
-import InputBox from '../InputBox';
+import { InputBox } from '../InputBox';
 
 import {
   ContextualbarV2,

packages/fuselage/src/components/EmailInput/EmailInput.tsx

@@ -1,9 +1,9 @@
-import type { ComponentProps, ReactNode, Ref } from 'react';
+import type { ReactNode, Ref } from 'react';
 import { forwardRef } from 'react';
 
-import { InputBox } from '../InputBox';
+import { InputBox, type InputBoxProps } from '../InputBox';
 
-type EmailInputProps = Omit<ComponentProps<typeof InputBox>, 'type'> & {
+type EmailInputProps = Omit<InputBoxProps, 'type'> & {
   addon?: ReactNode;
   error?: string;
 };

packages/fuselage/src/components/FieldGroup/FieldGroup.stories.tsx

@@ -1,7 +1,7 @@
 import type { StoryFn, Meta } from '@storybook/react-webpack5';
 
 import { Field, FieldHint, FieldLabel, FieldRow } from '../Field';
-import InputBox from '../InputBox';
+import { InputBoxSkeleton } from '../InputBox';
 
 import { FieldGroup } from './FieldGroup';
 
@@ -15,20 +15,20 @@ export const Default: StoryFn<typeof FieldGroup> = () => (
     <Field>
       <FieldLabel>Field #1</FieldLabel>
       <FieldRow>
-        <InputBox.Skeleton />
+        <InputBoxSkeleton />
       </FieldRow>
     </Field>
     <Field>
       <FieldLabel>Field #2</FieldLabel>
       <FieldRow>
-        <InputBox.Skeleton />
+        <InputBoxSkeleton />
       </FieldRow>
       <FieldHint>Help text</FieldHint>
     </Field>
     <Field>
       <FieldLabel>Field #3</FieldLabel>
       <FieldRow>
-        <InputBox.Skeleton />
+        <InputBoxSkeleton />
       </FieldRow>
     </Field>
   </FieldGroup>

packages/fuselage/src/components/Icon/Icon.stories.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 
 import Box from '../Box';
 import { Divider } from '../Divider';
-import InputBox from '../InputBox';
+import { InputBox } from '../InputBox';
 
 import { Icon } from './Icon';
 

packages/fuselage/src/components/InputBox/Input.tsx

@@ -1,13 +1,15 @@
-import type { ComponentProps, Ref } from 'react';
+import type { Ref } from 'react';
 import { forwardRef } from 'react';
 
-import Box from '../Box';
+import Box, { type BoxProps } from '../Box';
 
-type InputProps = ComponentProps<typeof Box>;
+export type InputProps = BoxProps;
 
-export const Input = forwardRef(function Input(
+const Input = forwardRef(function Input(
   props: InputProps,
   ref: Ref<HTMLInputElement>,
 ) {
   return <Box is='input' animated rcx-input-box ref={ref} {...props} />;
 });
+
+export default Input;

packages/fuselage/src/components/InputBox/InputBox.stories.tsx

@@ -4,11 +4,15 @@ import { action } from 'storybook/actions';
 import Box from '../Box';
 import { Icon } from '../Icon';
 
-import { InputBox } from './InputBox';
+import { Input, InputBox, InputBoxSkeleton } from '.';
 
 export default {
   title: 'Inputs/InputBox',
   component: InputBox,
+  subcomponents: {
+    InputBoxSkeleton,
+    Input,
+  },
 } satisfies Meta<typeof InputBox>;
 
 const Template: StoryFn<typeof InputBox> = (args) => (
@@ -59,8 +63,8 @@ WithPlaceholder.args = {
   placeholder: 'Placeholder',
   onChange: action('change'),
 };
-export const Skeleton: StoryFn<typeof InputBox> = () => <InputBox.Skeleton />;
-Skeleton.storyName = 'InputBox.Skeleton';
+export const Skeleton: StoryFn<typeof InputBox> = () => <InputBoxSkeleton />;
+Skeleton.storyName = 'InputBoxSkeleton';
 
 export const SmallVariants: StoryFn<typeof InputBox> = () => (
   <Box

packages/fuselage/src/components/InputBox/InputBox.tsx

@@ -1,24 +1,15 @@
 import { useMergedRefs } from '@rocket.chat/fuselage-hooks';
-import type {
-  ComponentProps,
-  FormEvent,
-  ForwardRefExoticComponent,
-  ReactNode,
-  Ref,
-} from 'react';
+import type { FormEvent, ReactNode, Ref } from 'react';
 import { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';
 
-import type Box from '../Box';
+import type { BoxProps } from '../Box';
 import { Icon } from '../Icon';
 
-import { Addon } from './Addon';
-import { Input } from './Input';
-import type { InputBoxSkeleton } from './InputBoxSkeleton';
-import type { Option } from './Option';
-import type { Placeholder } from './Placeholder';
-import { Wrapper } from './Wrapper';
+import Input from './Input';
+import InputBoxAddon from './InputBoxAddon';
+import InputBoxWrapper from './InputBoxWrapper';
 
-type InputBoxProps = ComponentProps<typeof Box> & {
+export type InputBoxProps = BoxProps & {
   addon?: ReactNode;
   input?: ReactNode;
   multiple?: boolean;
@@ -61,7 +52,7 @@
  * components over this one because it works as a construction block for them.
  */
 // eslint-disable-next-line complexity
-export const InputBox = forwardRef(function InputBox(
+const InputBox = forwardRef(function InputBox(
   {
     className,
     addon,
@@ -75,7 +66,7 @@
     onChange,
     ...props
   }: InputBoxProps,
-  ref: Ref<any> | null,
+  ref: Ref<any>,
 ) {
   const innerRef = useRef<
     HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
@@ -95,7 +86,7 @@
         !innerRef.current.checkValidity(),
       );
     }
   }, []);
 
   const handleChange = useCallback(
     (event: FormEvent<HTMLElement>) => {
@@ -150,7 +141,7 @@
   }
 
   return (
-    <Wrapper
+    <InputBoxWrapper
       className={[
         props.disabled && 'disabled',
         ...(Array.isArray(className) ? className : [className]),
@@ -180,12 +171,9 @@
         rcx-input-box--small={small}
         {...props}
       />
-      <Addon children={addon} />
-    </Wrapper>
+      <InputBoxAddon children={addon} />
+    </InputBoxWrapper>
   );
-}) as unknown as ForwardRefExoticComponent<InputBoxProps> & {
-  Input: ForwardRefExoticComponent<ComponentProps<typeof Box>>;
-  Skeleton: ForwardRefExoticComponent<ComponentProps<typeof InputBoxSkeleton>>;
-  Option: ForwardRefExoticComponent<ComponentProps<typeof Option>>;
-  Placeholder: ForwardRefExoticComponent<ComponentProps<typeof Placeholder>>;
-};
+});
+
+export default InputBox;

packages/fuselage/src/components/InputBox/InputBoxAddon.tsx

@@ -0,0 +1,15 @@
+import type { Ref } from 'react';
+import { forwardRef } from 'react';
+
+import Box, { type BoxProps } from '../Box';
+
+export type InputBoxAddonProps = BoxProps;
+
+const InputBoxAddon = forwardRef(function InputBoxAddon(
+  props: InputBoxAddonProps,
+  ref: Ref<HTMLSpanElement>,
+) {
+  return <Box is='span' rcx-input-box__addon ref={ref} {...props} />;
+});
+
+export default InputBoxAddon;

packages/fuselage/src/components/InputBox/InputBoxSkeleton.tsx

@@ -1,12 +1,12 @@
-import type { ComponentProps } from 'react';
-
-import Box from '../Box';
+import Box, { type BoxProps } from '../Box';
 import { Skeleton } from '../Skeleton';
 
-type InputBoxSkeletonProps = ComponentProps<typeof Box>;
+export type InputBoxSkeletonProps = BoxProps;
 
-export const InputBoxSkeleton = (props: InputBoxSkeletonProps) => (
+const InputBoxSkeleton = (props: InputBoxSkeletonProps) => (
   <Box rcx-skeleton__input {...props}>
     <Skeleton width='100%' />
   </Box>
 );
+
+export default InputBoxSkeleton;

packages/fuselage/src/components/InputBox/InputBoxWrapper.tsx

@@ -0,0 +1,10 @@
+import Box, { type BoxProps } from '../Box';
+import { Label } from '../Label';
+
+export type InputBoxWrapperProps = BoxProps;
+
+const InputBoxWrapper = (props: InputBoxWrapperProps) => (
+  <Box animated is={Label} rcx-input-box__wrapper {...props} />
+);
+
+export default InputBoxWrapper;

packages/fuselage/src/components/InputBox/index.ts

@@ -1,21 +1,6 @@
-import { Addon } from './Addon';
-import { Input } from './Input';
-import { InputBox } from './InputBox';
-import { InputBoxSkeleton } from './InputBoxSkeleton';
-import { Option } from './Option';
-import { Placeholder } from './Placeholder';
-import { Wrapper } from './Wrapper';
-
-export * from './Input';
-export * from './InputBox';
-export * from './InputBoxSkeleton';
-export * from './Wrapper';
-
-export default Object.assign(InputBox, {
-  Input,
-  Skeleton: InputBoxSkeleton,
-  Wrapper,
-  Addon,
-  Placeholder,
-  Option,
-});
+export { default as Input, type InputProps } from './Input';
+export { default as InputBox, type InputBoxProps } from './InputBox';
+export {
+  default as InputBoxSkeleton,
+  type InputBoxSkeletonProps,
+} from './InputBoxSkeleton';

packages/fuselage/src/components/MultiSelect/MultiSelectAnchorParams.ts

@@ -7,7 +7,7 @@ import type {
 } from 'react';
 
 export type MultiSelectAnchorParams = {
-  ref: Ref<Element>;
+  ref: Ref<HTMLInputElement>;
   children: ReactNode;
   disabled: boolean;
   onClick: MouseEventHandler;

packages/fuselage/src/components/MultiSelect/MultiSelectFilteredAnchor.tsx

@@ -9,7 +9,7 @@ import type {
 import { forwardRef } from 'react';
 
 import Flex from '../Flex';
-import { InputBox } from '../InputBox';
+import { Input } from '../InputBox';
 
 type MultiSelectFilteredAnchorProps = {
   children: ReactNode;
@@ -31,11 +31,11 @@ const MultiSelectFilteredAnchor = forwardRef(function MultiSelectFilteredAnchor(
     placeholder,
     ...props
   }: MultiSelectFilteredAnchorProps,
-  ref: Ref<Element>,
+  ref: Ref<HTMLInputElement>,
 ) {
   return (
     <Flex.Item grow={1}>
-      <InputBox.Input
+      <Input
         ref={ref}
         placeholder={placeholder}
         value={filter}