feat(fuselage-forms): Add MultiSelectFiltered component (#1942)

Author: juliajforesti

.changeset/moody-baths-wear.md

@@ -0,0 +1,6 @@
+---
+'@rocket.chat/fuselage-forms': minor
+'@rocket.chat/fuselage': minor
+---
+
+feat(fuselage-forms): Add `MultiSelectFiltered` component

packages/fuselage-forms/src/Field/FieldContext.ts

@@ -156,6 +156,25 @@ export const useFieldReferencedByLabel = () => {
   );
 };
 
+// label has id and input is aria-labelledby + has id for aria-controls
+export const useFieldReferencedByLabelWithId = () => {
+  const { id, descriptors, setFieldType } = useContext(FieldContext);
+
+  useEffect(() => {
+    setFieldType('referencedByLabel');
+  }, [setFieldType]);
+
+  return useMemo(
+    () => ({
+      id,
+      'aria-labelledby': getInputId(id, descriptors),
+      'aria-describedby': getDescribedBy(descriptors, id),
+      ...getAriaInvalid(descriptors),
+    }),
+    [descriptors, id],
+  );
+};
+
 // label is rendered visually hidden inside the inputs wrapper label
 export const useFieldWrappedByInputLabel = (): [
   ReactNode,

packages/fuselage-forms/src/Inputs/WrappedInputComponents.ts

@@ -12,12 +12,14 @@ import {
   TelephoneInput as TelephoneInputComponent,
   UrlInput as UrlInputComponent,
   MultiSelect as MultiSelectComponent,
+  MultiSelectFiltered as MultiSelectFilteredComponent,
   Slider as SliderComponent,
 } from '@rocket.chat/fuselage';
 
 import {
   withLabelId,
   withAriaLabelledBy,
+  withAriaLabelledByAndId,
   withVisuallyHiddenLabel,
 } from './withLabelHelpers';
 
@@ -35,7 +37,12 @@ export const UrlInput = withLabelId(UrlInputComponent);
 
 // with aria-labelledby
 export const Select = withAriaLabelledBy(SelectComponent);
-export const MultiSelect = withAriaLabelledBy(MultiSelectComponent);
+
+// with aria-labelledby + id for aria-controls
+export const MultiSelect = withAriaLabelledByAndId(MultiSelectComponent);
+export const MultiSelectFiltered = withAriaLabelledByAndId(
+  MultiSelectFilteredComponent,
+);
 export const Slider = withAriaLabelledBy(
   SliderComponent,
 ) as typeof SliderComponent;

packages/fuselage-forms/src/Inputs/withLabelHelpers.tsx

@@ -13,6 +13,7 @@ import { VisuallyHidden } from 'react-aria';
 import {
   useFieldReferencedByInput,
   useFieldReferencedByLabel,
+  useFieldReferencedByLabelWithId,
   useFieldWrappedByInputLabel,
 } from '../Field/FieldContext';
 
@@ -62,6 +63,29 @@ function withAriaLabelledBy<TProps, TRef>(
   return WrappedComponent;
 }
 
+type WithLabelledByAndId = { 'aria-labelledby'?: string; 'id'?: string };
+
+function withAriaLabelledByAndId<TProps, TRef>(
+  Component: ForwardRefExoticComponent<
+    TProps & WithLabelledByAndId & RefAttributes<TRef>
+  >,
+) {
+  const WrappedComponent = forwardRef<TRef, TProps>(function (props, ref) {
+    const labelProps = useFieldReferencedByLabelWithId();
+    return (
+      <Component
+        {...(props as TProps & WithLabelledByAndId)}
+        {...labelProps}
+        ref={ref}
+      />
+    );
+  });
+
+  WrappedComponent.displayName = `withAriaLabelledByAndId(${Component.displayName ?? Component.name ?? 'InputComponent'})`;
+
+  return WrappedComponent;
+}
+
 type WithChildrenLabel = { labelChildren: ReactNode };
 
 function withVisuallyHiddenLabel<TProps, TRef>(
@@ -87,4 +111,9 @@ function withVisuallyHiddenLabel<TProps, TRef>(
   return WrappedComponent;
 }
 
-export { withLabelId, withAriaLabelledBy, withVisuallyHiddenLabel };
+export {
+  withLabelId,
+  withAriaLabelledBy,
+  withAriaLabelledByAndId,
+  withVisuallyHiddenLabel,
+};

packages/fuselage-forms/src/__snapshots__/test.spec.tsx.snap

@@ -224,12 +224,14 @@ exports[`renders WithMultiSelect without crashing 1`] = `
               class="rcx-box rcx-box--full rcx-css-w398ts"
             >
               <button
+                aria-controls="react-aria-:rb:-listbox"
                 aria-describedby="react-aria-:rb:-description react-aria-:rb:-error react-aria-:rb:-hint"
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-invalid="true"
                 aria-labelledby="react-aria-:rb:-label"
                 class="rcx-box rcx-box--full rcx-input-box--undecorated rcx-select__focus rcx-css-trljwa rcx-css-3fq6z9"
+                id="react-aria-:rb:"
                 role="combobox"
                 type="button"
               />

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

@@ -1,5 +1,5 @@
 import type { Dispatch, SetStateAction } from 'react';
-import { useState } from 'react';
+import { useState, forwardRef } from 'react';
 
 import type { IconProps } from '../Icon';
 
@@ -14,31 +14,40 @@ export type MultiSelectFilteredProps = MultiSelectProps & {
   addonIcon?: IconProps['name'];
 };
 
-const MultiSelectFiltered = ({
-  options,
-  placeholder,
-  filter: propFilter,
-  setFilter: propSetFilter,
-  ...props
-}: MultiSelectFilteredProps) => {
-  const [filter, setFilter] = useState('');
+const MultiSelectFiltered = forwardRef<
+  HTMLInputElement,
+  MultiSelectFilteredProps
+>(
+  (
+    {
+      options,
+      placeholder,
+      filter: propFilter,
+      setFilter: propSetFilter,
+      ...props
+    },
+    ref,
+  ) => {
+    const [filter, setFilter] = useState('');
 
-  return (
-    <MultiSelect
-      {...props}
-      filter={propFilter || filter}
-      setFilter={propSetFilter || setFilter}
-      options={options}
-      anchor={(params: MultiSelectAnchorParams) => (
-        <MultiSelectFilteredAnchor
-          placeholder={placeholder}
-          filter={propFilter || filter}
-          onChangeFilter={propSetFilter || setFilter}
-          {...params}
-        />
-      )}
-    />
-  );
-};
+    return (
+      <MultiSelect
+        {...props}
+        ref={ref}
+        filter={propFilter || filter}
+        setFilter={propSetFilter || setFilter}
+        options={options}
+        anchor={(params: MultiSelectAnchorParams) => (
+          <MultiSelectFilteredAnchor
+            placeholder={placeholder}
+            filter={propFilter || filter}
+            onChangeFilter={propSetFilter || setFilter}
+            {...params}
+          />
+        )}
+      />
+    );
+  },
+);
 
 export default MultiSelectFiltered;