fix(fuselage): PaginatedSelectFiltered filter state (#661)

* fix

* Simplify stories

* Split into subcomponents

* Rename directory

Co-authored-by: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>

packages/fuselage/package.json

@@ -73,6 +73,7 @@
     "@storybook/addon-links": "~6.4.18",
     "@storybook/addons": "~6.4.18",
     "@storybook/builder-webpack5": "~6.4.18",
+    "@storybook/client-api": "~6.4.19",
     "@storybook/manager-webpack5": "~6.4.18",
     "@storybook/react": "~6.4.18",
     "@storybook/source-loader": "~6.4.18",

packages/fuselage/src/components/PaginatedSelect/PaginatedMultiSelectFiltered.stories.tsx

@@ -0,0 +1,48 @@
+import { useArgs } from '@storybook/client-api';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
+
+import { PaginatedMultiSelectFiltered } from '.';
+
+export default {
+  title: 'Inputs/PaginatedMultiSelectFiltered',
+  component: PaginatedMultiSelectFiltered,
+  args: {
+    placeholder: 'Placeholder here...',
+    options: Array.from({ length: 1000 }, (_, i) => ({
+      value: i,
+      label: `Item #${i}`,
+    })),
+  },
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+    layout: 'centered',
+  },
+} as ComponentMeta<typeof PaginatedMultiSelectFiltered>;
+
+export const Normal: ComponentStory<typeof PaginatedMultiSelectFiltered> = (
+  args
+) => {
+  const [, updateArgs] = useArgs();
+
+  return (
+    <PaginatedMultiSelectFiltered
+      setFilter={(filter) => updateArgs({ filter })}
+      {...args}
+    />
+  );
+};
+
+export const Errored: ComponentStory<typeof PaginatedMultiSelectFiltered> = (
+  args
+) => <PaginatedMultiSelectFiltered {...args} />;
+Errored.args = {
+  error: true,
+};
+
+export const Disabled: ComponentStory<typeof PaginatedMultiSelectFiltered> = (
+  args
+) => <PaginatedMultiSelectFiltered {...args} />;
+Disabled.args = {
+  disabled: true,
+};

packages/fuselage/src/components/SelectPaginated/PaginatedSelect.tsx → packages/fuselage/src/components/PaginatedSelect/PaginatedSelect.tsx

@@ -3,8 +3,8 @@ import {
   useMutableCallback,
   useResizeObserver,
 } from '@rocket.chat/fuselage-hooks';
-import type { SyntheticEvent, ComponentProps, Ref, ElementType } from 'react';
-import React, { useState, useRef, forwardRef, useMemo, useEffect } from 'react';
+import type { SyntheticEvent, ElementType } from 'react';
+import React, { useState, useRef, useMemo, useEffect } from 'react';
 
 import type { SelectProps } from '..';
 import AnimatedVisibility from '../AnimatedVisibility';
@@ -13,6 +13,9 @@ import { Icon } from '../Icon';
 import { useVisible } from '../Options/useVisible';
 import { OptionsPaginated } from '../OptionsPaginated';
 import PositionAnimated from '../PositionAnimated';
+import PaginatedSelectAddon from './PaginatedSelectAddon';
+import PaginatedSelectFocus from './PaginatedSelectFocus';
+import PaginatedSelectWrapper from './PaginatedSelectWrapper';
 
 type PaginatedOptionType = {
   value: string | number;
@@ -23,35 +26,9 @@ export type PaginatedSelectProps = Omit<SelectProps, 'options'> & {
   options: PaginatedOptionType[];
   withTitle?: boolean;
   endReached: (index: number) => void;
-  setFilter: (value: string | undefined | number) => void;
+  setFilter?: (value: string | undefined | number) => void;
 };
 
-type AddonProps = ComponentProps<typeof Box>;
-
-const Addon = forwardRef((props: AddonProps, ref: Ref<HTMLDivElement>) => (
-  <Box is='div' rcx-select__addon ref={ref} {...props} />
-));
-
-type WrapperProps = ComponentProps<typeof Box>;
-
-const Wrapper = forwardRef((props: WrapperProps, ref: Ref<HTMLDivElement>) => (
-  <Box is='div' rcx-select__wrapper ref={ref} {...props} />
-));
-
-type FocusProps = ComponentProps<typeof Box>;
-
-const Focus = forwardRef((props: FocusProps, ref: Ref<HTMLButtonElement>) => (
-  <Box
-    ref={ref}
-    fontScale='p2m'
-    color='hint'
-    rcx-select__focus
-    is='button'
-    type='button'
-    {...props}
-  />
-));
-
 const prevent = (e: SyntheticEvent) => {
   e.preventDefault();
   e.stopPropagation();
@@ -78,7 +55,7 @@ export const PaginatedSelect = ({
   error,
   disabled,
   options = [],
-  anchor: Anchor = Focus,
+  anchor: Anchor = PaginatedSelectFocus,
   onChange = () => {},
   placeholder = '',
   renderOptions: _Options = OptionsPaginated,
@@ -133,7 +110,7 @@ export const PaginatedSelect = ({
       )}
       {...props}
     >
-      <Wrapper
+      <PaginatedSelectWrapper
         display='flex'
         mi='neg-x4'
         rcx-select__wrapper--hidden={!!visibleText}
@@ -159,20 +136,15 @@ export const PaginatedSelect = ({
           onClick={show}
           onBlur={hide}
         />
-        <Addon
-          mi='x4'
-          children={
-            <Icon
-              name={
-                visible === AnimatedVisibility.VISIBLE
-                  ? 'cross'
-                  : 'chevron-down'
-              }
-              size='x20'
-            />
-          }
-        />
-      </Wrapper>
+        <PaginatedSelectAddon mi='x4'>
+          <Icon
+            name={
+              visible === AnimatedVisibility.VISIBLE ? 'cross' : 'chevron-down'
+            }
+            size='x20'
+          />
+        </PaginatedSelectAddon>
+      </PaginatedSelectWrapper>
       <PositionAnimated visible={visible} anchor={containerRef}>
         <_Options
           {...(withTitle && { title: withTitle })}

packages/fuselage/src/components/PaginatedSelect/PaginatedSelectAddon.tsx

@@ -0,0 +1,15 @@
+import type { ComponentProps, Ref } from 'react';
+import React, { forwardRef } from 'react';
+
+import { Box } from '../Box';
+
+type PaginatedSelectAddonProps = ComponentProps<typeof Box>;
+
+const PaginatedSelectAddon = forwardRef(function PaginatedSelectAddon(
+  props: PaginatedSelectAddonProps,
+  ref: Ref<HTMLDivElement>
+) {
+  return <Box is='div' rcx-select__addon ref={ref} {...props} />;
+});
+
+export default PaginatedSelectAddon;

packages/fuselage/src/components/PaginatedSelect/PaginatedSelectFiltered.stories.tsx

@@ -0,0 +1,37 @@
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
+
+import { PaginatedSelectFiltered } from '.';
+
+export default {
+  title: 'Inputs/PaginatedSelectFiltered',
+  component: PaginatedSelectFiltered,
+  args: {
+    placeholder: 'Placeholder here...',
+    options: Array.from({ length: 1000 }, (_, i) => ({
+      value: i,
+      label: `Item #${i}`,
+    })),
+    width: '250px',
+  },
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+    layout: 'centered',
+  },
+} as ComponentMeta<typeof PaginatedSelectFiltered>;
+
+const Template: ComponentStory<typeof PaginatedSelectFiltered> = (args) => (
+  <PaginatedSelectFiltered {...args} />
+);
+
+export const normal = Template.bind({});
+
+export const errored = Template.bind({});
+errored.args = {
+  error: 'Error',
+};
+
+export const disabled = Template.bind({});
+disabled.args = {
+  disabled: true,
+};

packages/fuselage/src/components/PaginatedSelect/PaginatedSelectFiltered.tsx

@@ -0,0 +1,58 @@
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import type { FormEvent, Ref } from 'react';
+import React, { useMemo, forwardRef } from 'react';
+
+import { InputBox } from '../InputBox';
+import type { PaginatedSelectProps } from './PaginatedSelect';
+import { PaginatedSelect } from './PaginatedSelect';
+
+type PaginatedSelectFilteredProps = Omit<PaginatedSelectProps, 'setFilter'> & {
+  setFilter: (value: string | undefined | number) => void;
+};
+
+export const PaginatedSelectFiltered = ({
+  filter,
+  setFilter,
+  options,
+  placeholder,
+  ...props
+}: PaginatedSelectFilteredProps) => {
+  const anchor = useMemo(
+    () =>
+      forwardRef(
+        (
+          {
+            filter,
+            onChange: _onChange,
+            ...props
+          }: PaginatedSelectFilteredProps,
+          ref: Ref<HTMLInputElement>
+        ) => (
+          <InputBox.Input
+            mi='x4'
+            flexGrow={1}
+            className='rcx-select__focus'
+            ref={ref}
+            placeholder={placeholder}
+            value={filter}
+            onChange={useMutableCallback((e: FormEvent<HTMLInputElement>) => {
+              setFilter(e.currentTarget.value);
+            })}
+            {...props}
+            rcx-input-box--undecorated
+          />
+        )
+      ),
+    [placeholder, setFilter]
+  );
+
+  return (
+    <PaginatedSelect
+      placeholder={undefined}
+      filter={filter}
+      options={options}
+      {...props}
+      anchor={anchor}
+    />
+  );
+};

packages/fuselage/src/components/PaginatedSelect/PaginatedSelectFocus.tsx

@@ -0,0 +1,25 @@
+import type { ComponentProps, Ref } from 'react';
+import React, { forwardRef } from 'react';
+
+import { Box } from '../Box';
+
+type PaginatedSelectFocusProps = ComponentProps<typeof Box>;
+
+const PaginatedSelectFocus = forwardRef(function PaginatedSelectFocus(
+  props: PaginatedSelectFocusProps,
+  ref: Ref<HTMLButtonElement>
+) {
+  return (
+    <Box
+      ref={ref}
+      fontScale='p2m'
+      color='hint'
+      rcx-select__focus
+      is='button'
+      type='button'
+      {...props}
+    />
+  );
+});
+
+export default PaginatedSelectFocus;

packages/fuselage/src/components/PaginatedSelect/PaginatedSelectWrapper.tsx

@@ -0,0 +1,15 @@
+import type { ComponentProps, Ref } from 'react';
+import React, { forwardRef } from 'react';
+
+import { Box } from '../Box';
+
+type PaginatedSelectWrapperProps = ComponentProps<typeof Box>;
+
+const PaginatedSelectWrapper = forwardRef(function PaginatedSelectWrapper(
+  props: PaginatedSelectWrapperProps,
+  ref: Ref<HTMLDivElement>
+) {
+  return <Box is='div' rcx-select__wrapper ref={ref} {...props} />;
+});
+
+export default PaginatedSelectWrapper;

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

@@ -0,0 +1,2 @@
+export { PaginatedSelectFiltered } from './PaginatedSelectFiltered';
+export { PaginatedMultiSelectFiltered } from './PaginatedMultiSelect';