diff --git a/.changeset/fuzzy-bars-matter.md b/.changeset/fuzzy-bars-matter.md new file mode 100644 index 0000000000..36e91bf9d7 --- /dev/null +++ b/.changeset/fuzzy-bars-matter.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/fuselage': minor +--- + +feat(fuselage): Remove deprecated `Options.*` component namespace diff --git a/packages/fuselage/src/components/Menu/Menu.tsx b/packages/fuselage/src/components/Menu/Menu.tsx index 060c2e0574..40750fdfc7 100644 --- a/packages/fuselage/src/components/Menu/Menu.tsx +++ b/packages/fuselage/src/components/Menu/Menu.tsx @@ -4,7 +4,7 @@ import { useRef, useCallback, useEffect } from 'react'; import type Box from '../Box'; import { IconButton } from '../Button'; -import Options, { useCursor, type OptionType } from '../Options'; +import { Options, useCursor, type OptionType } from '../Options'; import PositionAnimated from '../PositionAnimated'; type MenuProps = Omit, 'icon'> & { diff --git a/packages/fuselage/src/components/Options/OptionContainer.tsx b/packages/fuselage/src/components/Options/OptionContainer.tsx new file mode 100644 index 0000000000..f3700548b5 --- /dev/null +++ b/packages/fuselage/src/components/Options/OptionContainer.tsx @@ -0,0 +1,31 @@ +import { forwardRef } from 'react'; + +import Box, { type BoxProps } from '../Box'; +import Scrollable from '../Scrollable'; +import Tile from '../Tile'; + +export type OptionContainerProps = BoxProps; + +const OptionContainer = forwardRef( + function OptionContainer({ children, ...props }, ref) { + return ( + + + + + {children} + + + + + ); + }, +); + +export default OptionContainer; diff --git a/packages/fuselage/src/components/Options/OptionType.tsx b/packages/fuselage/src/components/Options/OptionType.tsx new file mode 100644 index 0000000000..b96b765993 --- /dev/null +++ b/packages/fuselage/src/components/Options/OptionType.tsx @@ -0,0 +1,10 @@ +import type { ReactNode } from 'react'; + +export type OptionType = [ + value: string | number, + label: ReactNode, + selected?: boolean, + disabled?: boolean, + type?: 'heading' | 'divider' | 'option', + url?: string, +]; diff --git a/packages/fuselage/src/components/Options/Options.stories.tsx b/packages/fuselage/src/components/Options/Options.stories.tsx index 01305d45fc..e68d7ca7e1 100644 --- a/packages/fuselage/src/components/Options/Options.stories.tsx +++ b/packages/fuselage/src/components/Options/Options.stories.tsx @@ -4,8 +4,7 @@ import { createRef } from 'react'; import Box from '../Box'; import { Option, CheckOption } from '../Option'; -import type { OptionType } from './Options'; -import { Options } from './Options'; +import { Options, type OptionType } from '.'; export default { title: 'Navigation/Options', diff --git a/packages/fuselage/src/components/Options/Options.tsx b/packages/fuselage/src/components/Options/Options.tsx index 3d4ae7c3f9..286276e53c 100644 --- a/packages/fuselage/src/components/Options/Options.tsx +++ b/packages/fuselage/src/components/Options/Options.tsx @@ -1,32 +1,16 @@ -import type { - ComponentProps, - ElementType, - ReactNode, - Ref, - SyntheticEvent, -} from 'react'; -import { forwardRef, memo, useLayoutEffect, useMemo, useRef } from 'react'; +import type { ElementType, SyntheticEvent } from 'react'; +import { forwardRef, useLayoutEffect, useMemo, useRef } from 'react'; import { prevent } from '../../helpers/prevent'; -import Box from '../Box'; +import Box, { type BoxProps } from '../Box'; import { Option, OptionHeader, OptionDivider } from '../Option'; import Scrollable from '../Scrollable'; import Tile from '../Tile'; -import { useCursor } from './useCursor'; +import type { OptionType } from './OptionType'; +import OptionsEmpty from './OptionsEmpty'; -export { useCursor }; - -export type OptionType = [ - value: string | number, - label: ReactNode, - selected?: boolean, - disabled?: boolean, - type?: 'heading' | 'divider' | 'option', - url?: string, -]; - -type OptionsProps = Omit, 'onSelect'> & { +export type OptionsProps = Omit & { multiple?: boolean; options: OptionType[]; cursor: number; @@ -36,132 +20,103 @@ type OptionsProps = Omit, 'onSelect'> & { customEmpty?: string; }; -export const Empty = memo(({ customEmpty }: { customEmpty: string }) => ( -