feat(fuselage): Remove deprecated Option.* component namespace (#1770)

Author: tassoevan

.changeset/better-lines-clap.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/fuselage': minor
+---
+
+feat(fuselage): Remove deprecated `Option.*` component namespace

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

@@ -5,7 +5,7 @@ import { exampleAvatar, DECORATOR_LABEL } from '../../../.storybook/helpers';
 import { Avatar } from '../Avatar';
 import Box from '../Box';
 import Chip from '../Chip';
-import Option from '../Option';
+import { Option } from '../Option';
 
 import { AutoComplete } from './AutoComplete';
 

packages/fuselage/src/components/Divider/Divider.tsx

@@ -1,8 +1,8 @@
-import type { ComponentProps, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
-import Box from '../Box';
+import Box, { type BoxProps } from '../Box';
 
-type DividerProps = ComponentProps<typeof Box> & {
+export type DividerProps = BoxProps & {
   variation?: 'danger';
   children?: ReactNode;
   vertical?: boolean;

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

@@ -3,7 +3,7 @@ import { useRef } from 'react';
 
 import Box from '../Box';
 import { IconButton } from '../Button';
-import Option from '../Option';
+import { Option } from '../Option';
 
 import { Dropdown } from './Dropdown';
 

packages/fuselage/src/components/Option/CheckOption.tsx

@@ -1,20 +1,21 @@
-import type { ComponentProps } from 'react';
 import { memo } from 'react';
 
 import { CheckBox } from '../CheckBox';
 
-import Option from './Option';
+import Option, { type OptionProps } from './Option';
 
-type CheckOptionProps = ComponentProps<typeof Option>;
+export type CheckOptionProps = OptionProps;
 
-export const CheckOption = memo(function CheckOption({
+const CheckOption = ({
   selected,
   children: label,
   ...options
-}: CheckOptionProps) {
+}: CheckOptionProps) => {
   return (
     <Option label={label as string} selected={selected} {...options}>
       <CheckBox checked={selected} />
     </Option>
   );
-});
+};
+
+export default memo(CheckOption);

packages/fuselage/src/components/Option/Option.spec.tsx

@@ -1,7 +1,8 @@
 import { prevent } from '../../helpers/prevent';
 import { render } from '../../testing';
 
-import Option, { OptionContent } from '.';
+import Option from './Option';
+import OptionContent from './OptionContent';
 
 jest.mock('../../helpers/prevent');
 

packages/fuselage/src/components/Option/Option.tsx

@@ -1,31 +1,25 @@
-import type {
-  Ref,
-  ComponentProps,
-  ReactNode,
-  MouseEvent,
-  AllHTMLAttributes,
-} from 'react';
+import type { Ref, ReactNode, MouseEvent, AllHTMLAttributes } from 'react';
 import { forwardRef, memo } from 'react';
 
-import type { Icon } from '../..';
-import { OptionColumn } from '../..';
 import { prevent } from '../../helpers/prevent';
-import type Box from '../Box';
+import type { BoxProps } from '../Box';
+import type { IconProps } from '../Icon';
 
 import OptionAvatar from './OptionAvatar';
+import OptionColumn from './OptionColumn';
 import OptionContent from './OptionContent';
 import OptionIcon from './OptionIcon';
 
-type OptionProps = {
-  is?: ComponentProps<typeof Box>['is'];
+export type OptionProps = {
+  is?: BoxProps['is'];
   id?: string;
   children?: ReactNode;
   label?: ReactNode;
   focus?: boolean;
   selected?: boolean;
-  className?: ComponentProps<typeof Box>['className'];
+  className?: BoxProps['className'];
   ref?: Ref<Element>;
-  icon?: ComponentProps<typeof Icon>['name'];
+  icon?: IconProps['name'];
   gap?: boolean;
   avatar?: ReactNode;
   title?: string;
@@ -39,72 +33,70 @@ type OptionProps = {
 /**
  * The generic `Option` item of options. Can be freely used or inside the `Options` as well.
  */
-const Option = memo(
-  forwardRef(
-    (
-      {
-        is: Tag = 'li',
-        id,
-        children,
-        label,
-        focus,
-        selected,
+const Option = forwardRef(function Option(
+  {
+    is: Tag = 'li',
+    id,
+    children,
+    label,
+    focus,
+    selected,
+    className,
+    icon,
+    gap,
+    avatar,
+    title,
+    disabled,
+    variant,
+    onClick,
+    description,
+    ...props
+  }: OptionProps,
+  ref,
+) {
+  return (
+    <Tag
+      {...props}
+      key={id}
+      id={id}
+      ref={ref}
+      aria-selected={!!selected}
+      aria-disabled={!!disabled}
+      title={title}
+      onClick={(e: MouseEvent<HTMLDivElement>) => {
+        if (disabled) {
+          prevent(e);
+          return;
+        }
+        onClick?.(e);
+      }}
+      className={[
+        'rcx-option',
         className,
-        icon,
-        gap,
-        avatar,
-        title,
-        disabled,
-        variant,
-        onClick,
-        description,
-        ...props
-      }: OptionProps,
-      ref,
-    ) => (
-      <Tag
-        {...props}
-        key={id}
-        id={id}
-        ref={ref}
-        aria-selected={!!selected}
-        aria-disabled={!!disabled}
-        title={title}
-        onClick={(e: MouseEvent<HTMLDivElement>) => {
-          if (disabled) {
-            prevent(e);
-            return;
-          }
-          onClick?.(e);
-        }}
+        focus && 'rcx-option--focus',
+        selected && 'rcx-option--selected',
+        disabled && 'rcx-option--disabled',
+        variant && `rcx-option--${variant}`,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <div
         className={[
-          'rcx-option',
-          className,
-          focus && 'rcx-option--focus',
-          selected && 'rcx-option--selected',
-          disabled && 'rcx-option--disabled',
-          variant && `rcx-option--${variant}`,
+          'rcx-option__wrapper',
+          !!description && 'rcx-option__wrapper--align-top',
         ]
           .filter(Boolean)
           .join(' ')}
       >
-        <div
-          className={[
-            'rcx-option__wrapper',
-            !!description && 'rcx-option__wrapper--align-top',
-          ]
-            .filter(Boolean)
-            .join(' ')}
-        >
-          {avatar && <OptionAvatar>{avatar}</OptionAvatar>}
-          {icon && <OptionIcon name={icon} />}
-          {gap && <OptionColumn />}
-          {label && <OptionContent>{label}</OptionContent>}
-          {label !== children && children}
-        </div>
-      </Tag>
-    ),
-  ),
-);
+        {avatar && <OptionAvatar>{avatar}</OptionAvatar>}
+        {icon && <OptionIcon name={icon} />}
+        {gap && <OptionColumn />}
+        {label && <OptionContent>{label}</OptionContent>}
+        {label !== children && children}
+      </div>
+    </Tag>
+  );
+});
 
-export default Option;
+export default memo(Option);

packages/fuselage/src/components/Option/OptionAvatar.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 
-type OptionAvatarProps = {
+export type OptionAvatarProps = {
   children?: ReactNode;
 };
 

packages/fuselage/src/components/Option/OptionColumn.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 
-type OptionColumnProps = {
+export type OptionColumnProps = {
   children?: ReactNode;
 };
 

packages/fuselage/src/components/Option/OptionContent.tsx

@@ -1,6 +1,8 @@
 import type { HTMLAttributes } from 'react';
 
-const OptionContent = (props: HTMLAttributes<HTMLDivElement>) => (
+export type OptionContentProps = HTMLAttributes<HTMLDivElement>;
+
+const OptionContent = (props: OptionContentProps) => (
   <div className='rcx-option__content' {...props} />
 );