diff --git a/.changeset/twelve-yaks-study.md b/.changeset/twelve-yaks-study.md new file mode 100644 index 0000000000..0a2950bbcf --- /dev/null +++ b/.changeset/twelve-yaks-study.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/fuselage": minor +--- + +feat(fuselage): Add `renderItem` prop to the `PaginatedMultiSelect` component diff --git a/packages/fuselage/src/components/PaginatedSelect/PaginatedMultiSelect.tsx b/packages/fuselage/src/components/PaginatedSelect/PaginatedMultiSelect.tsx index 28102febae..642f7f52f8 100644 --- a/packages/fuselage/src/components/PaginatedSelect/PaginatedMultiSelect.tsx +++ b/packages/fuselage/src/components/PaginatedSelect/PaginatedMultiSelect.tsx @@ -16,6 +16,7 @@ import Chip from '../Chip'; import Flex from '../Flex'; import { Icon } from '../Icon'; import Margins from '../Margins'; +import Option from '../Option'; import { useVisible } from '../Options/useVisible'; import { OptionsPaginated } from '../OptionsPaginated'; import Position from '../Position'; @@ -41,6 +42,7 @@ type PaginatedMultiSelectProps = Omit< renderOptions?: ( props: ComponentProps ) => ReactElement | null; + renderItem?: (props: ComponentProps) => ReactElement | null; anchor?: any; }; @@ -55,6 +57,7 @@ const PaginatedMultiSelect = ({ onChange = () => {}, placeholder, renderOptions: OptionsComponent = OptionsPaginated, + renderItem = Option, endReached, ...props }: PaginatedMultiSelectProps) => { @@ -191,6 +194,7 @@ const PaginatedMultiSelect = ({ options={options} cursor={-1} endReached={endReached} + renderItem={renderItem} onSelect={([value]) => { toggleOption(value); }}