fix(fuselage): Select/MultiSelect options visibility (#759)

RocketChat · Jul 20, 2022 · e121ad0 · e121ad0
1 parent 79fdb3e
commit e121ad0
Show file tree

Hide file tree

Showing 12 changed files with 63 additions and 78 deletions.
diff --git a/packages/fuselage-hooks/src/useOutsideClick.ts b/packages/fuselage-hooks/src/useOutsideClick.ts
@@ -10,7 +10,7 @@ import { useMutableCallback } from './useMutableCallback';
  * @public
  */
 
-export function useOutsideClick<T extends HTMLElement>(
+export function useOutsideClick<T extends Element>(
   elements: RefObject<T>[],
   cb: (e: MouseEvent) => void
 ): void {

diff --git a/packages/fuselage/src/components/MultiSelect/MultiSelect.tsx b/packages/fuselage/src/components/MultiSelect/MultiSelect.tsx
@@ -2,6 +2,7 @@ import {
   useMergedRefs,
   useMutableCallback,
   useResizeObserver,
+  useOutsideClick,
 } from '@rocket.chat/fuselage-hooks';
 import type {
   ComponentProps,
@@ -50,13 +51,15 @@ type MultiSelectProps = Omit<
   renderItem?: ElementType;
   renderSelected?: ElementType;
   addonIcon?: ComponentProps<typeof Icon>['name'];
+  setFilter?: (filter: string) => void;
 };
 
 export const MultiSelect = forwardRef(
   (
     {
       value,
       filter,
+      setFilter,
       options = [],
       error,
       disabled,
@@ -79,21 +82,21 @@ export const MultiSelect = forwardRef(
     );
     const [currentOptionValue, setCurrentOption] = useState<SelectOption[0]>();
 
-    const option = options.find(
-      (option) => getValue(option) === currentOptionValue
-    );
-
     const index = options.findIndex(
       (option) => getValue(option) === currentOptionValue
     );
 
+    const removeFocusClass = () =>
+      innerRef.current?.classList.remove('focus-visible');
+
     const internalChanged = ([value]: SelectOption) => {
       if (internalValue.includes(value)) {
         setCurrentOption(undefined);
         const newValue = internalValue.filter((item) => item !== value);
         setInternalValue(newValue);
         return onChange(newValue);
       }
+      setFilter?.('');
       setCurrentOption(value);
       const newValue = [...internalValue, value];
       setInternalValue(newValue);
@@ -123,6 +126,7 @@ export const MultiSelect = forwardRef(
     const anchorRef = useMergedRefs(ref, innerRef);
 
     const { ref: containerRef, borderBoxSize } = useResizeObserver();
+    useOutsideClick([containerRef], removeFocusClass);
 
     const renderAnchor = (params: MultiSelectAnchorParams) => {
       if (isForwardRefType(Anchor)) {
@@ -138,19 +142,24 @@ export const MultiSelect = forwardRef(
       return null;
     };
 
+    const handleClick = useMutableCallback(() => {
+      if (innerRef.current?.classList.contains('focus-visible')) {
+        removeFocusClass();
+        return hide();
+      }
+
+      innerRef.current?.classList.add('focus-visible');
+      innerRef.current?.focus();
+      return show();
+    });
+
     return (
       <Box
         is='div'
         rcx-select
         className={[error && 'invalid', disabled && 'disabled']}
         ref={containerRef}
-        onClick={useMutableCallback(() => {
-          if (visible === AnimatedVisibility.VISIBLE) {
-            return hide();
-          }
-          innerRef.current?.focus();
-          return show();
-        })}
+        onClick={handleClick}
         disabled={disabled}
         {...props}
       >
@@ -169,7 +178,7 @@ export const MultiSelect = forwardRef(
                   <Margins all='x4'>
                     {renderAnchor({
                       ref: anchorRef,
-                      children: !value ? option || placeholder : null,
+                      children: internalValue.length === 0 ? placeholder : null,
                       disabled: disabled ?? false,
                       onClick: show,
                       onBlur: hide,
@@ -189,6 +198,7 @@ export const MultiSelect = forwardRef(
                           onMouseDown={(e: SyntheticEvent) => {
                             prevent(e);
                             internalChanged(currentOption);
+                            removeFocusClass();
                           }}
                           children={getLabel(currentOption)}
                         />
@@ -200,6 +210,7 @@ export const MultiSelect = forwardRef(
                           onMouseDown={(e: SyntheticEvent) => {
                             prevent(e);
                             internalChanged(currentOption);
+                            removeFocusClass();
                           }}
                           children={getLabel(currentOption)}
                         />
@@ -218,7 +229,7 @@ export const MultiSelect = forwardRef(
                 <Icon
                   name={
                     visible === AnimatedVisibility.VISIBLE
-                      ? 'cross'
+                      ? 'chevron-up'
                       : addonIcon || 'chevron-down'
                   }
                   size='x20'

diff --git a/packages/fuselage/src/components/MultiSelect/MultiSelectFiltered.tsx b/packages/fuselage/src/components/MultiSelect/MultiSelectFiltered.tsx
@@ -25,6 +25,7 @@ export const MultiSelectFiltered = ({
     <MultiSelect
       {...props}
       filter={propFilter || filter}
+      setFilter={propSetFilter || setFilter}
       options={options}
       anchor={(params: MultiSelectAnchorParams) => (
         <MultiSelectFilteredAnchor

diff --git a/packages/fuselage/src/components/PaginatedSelect/PaginatedSelect.tsx b/packages/fuselage/src/components/PaginatedSelect/PaginatedSelect.tsx
@@ -10,11 +10,12 @@ import type { SelectProps } from '..';
 import AnimatedVisibility from '../AnimatedVisibility';
 import Box from '../Box';
 import { Icon } from '../Icon';
+import Margins from '../Margins';
 import { useVisible } from '../Options/useVisible';
 import { OptionsPaginated } from '../OptionsPaginated';
 import PositionAnimated from '../PositionAnimated';
-import PaginatedSelectAddon from './PaginatedSelectAddon';
-import PaginatedSelectFocus from './PaginatedSelectFocus';
+import SelectAddon from '../Select/SelectAddon';
+import SelectFocus from '../Select/SelectFocus';
 import PaginatedSelectWrapper from './PaginatedSelectWrapper';
 
 type PaginatedOptionType = {
@@ -55,7 +56,7 @@ export const PaginatedSelect = ({
   error,
   disabled,
   options = [],
-  anchor: Anchor = PaginatedSelectFocus,
+  anchor: Anchor = SelectFocus,
   onChange = () => {},
   placeholder = '',
   renderOptions: _Options = OptionsPaginated,
@@ -136,14 +137,18 @@ export const PaginatedSelect = ({
           onClick={show}
           onBlur={hide}
         />
-        <PaginatedSelectAddon mi='x4'>
-          <Icon
-            name={
-              visible === AnimatedVisibility.VISIBLE ? 'cross' : 'chevron-down'
-            }
-            size='x20'
-          />
-        </PaginatedSelectAddon>
+        <Margins inline='x4'>
+          <SelectAddon>
+            <Icon
+              name={
+                visible === AnimatedVisibility.VISIBLE
+                  ? 'chevron-up'
+                  : 'chevron-down'
+              }
+              size='x20'
+            />
+          </SelectAddon>
+        </Margins>
       </PaginatedSelectWrapper>
       <PositionAnimated visible={visible} anchor={containerRef}>
         <_Options

diff --git a/packages/fuselage/src/components/PaginatedSelect/PaginatedSelectAddon.tsx b/packages/fuselage/src/components/PaginatedSelect/PaginatedSelectAddon.tsx
diff --git a/packages/fuselage/src/components/PaginatedSelect/PaginatedSelectFocus.tsx b/packages/fuselage/src/components/PaginatedSelect/PaginatedSelectFocus.tsx
diff --git a/packages/fuselage/src/components/Select/Select.spec.tsx b/packages/fuselage/src/components/Select/Select.spec.tsx
@@ -1,14 +1,16 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
 import React from 'react';
 import { withResizeObserverMock } from 'testing-utils/mocks/withResizeObserverMock';
 
-import { Select } from '.';
-import { options } from './Select.stories';
+import * as stories from './Select.stories';
+
+const { Default } = composeStories(stories);
 
 withResizeObserverMock();
 
 describe('[Select Component]', () => {
   it('renders without crashing', () => {
-    render(<Select options={options} onChange={() => undefined} />);
+    render(<Default {...Default.args} />);
   });
 });
diff --git a/packages/fuselage/src/components/Select/Select.stories.tsx b/packages/fuselage/src/components/Select/Select.stories.tsx
@@ -11,7 +11,7 @@ import React from 'react';
 import type { SelectOption } from '../..';
 import { Select, SelectFiltered } from '../..';
 
-export const options: SelectOption[] = Array.from({
+const options: SelectOption[] = Array.from({
   length: 10,
 }).map((_, i) => [`${i + 1}`, `a teste ${i + 1}`]);
 

diff --git a/packages/fuselage/src/components/Select/Select.tsx b/packages/fuselage/src/components/Select/Select.tsx
@@ -2,6 +2,7 @@ import {
   useMergedRefs,
   useMutableCallback,
   useResizeObserver,
+  useOutsideClick,
 } from '@rocket.chat/fuselage-hooks';
 import type {
   ComponentProps,
@@ -115,15 +116,19 @@ export const Select = forwardRef(
     const [cursor, handleKeyDown, handleKeyUp, reset, [visible, hide, show]] =
       useCursor(index, filteredOptions, internalChangedByKeyboard);
 
+    const innerRef = useRef<HTMLInputElement | null>(null);
+    const anchorRef = useMergedRefs(ref, innerRef);
+
+    const removeFocusClass = () =>
+      innerRef.current?.classList.remove('focus-visible');
+
     const internalChangedByClick = useMutableCallback(([value]) => {
       setInternalValue(value);
       onChange(value);
+      removeFocusClass();
       hide();
     });
 
-    const innerRef = useRef<HTMLInputElement | null>(null);
-    const anchorRef = useMergedRefs(ref, innerRef);
-
     const renderAnchor = (params: SelectAnchorParams) => {
       if (isForwardRefType(Anchor)) {
         return <Anchor {...params} />;
@@ -139,6 +144,7 @@ export const Select = forwardRef(
     const { ref: containerRef, borderBoxSize } = useResizeObserver();
 
     useDidUpdate(reset, [filter, internalValue]);
+    useOutsideClick([containerRef], removeFocusClass);
 
     const valueLabel = getLabel(option);
 
@@ -147,9 +153,12 @@ export const Select = forwardRef(
       (valueLabel || placeholder || typeof placeholder === 'string');
 
     const handleClick = useMutableCallback(() => {
-      if (visible === AnimatedVisibility.VISIBLE) {
+      if (innerRef.current?.classList.contains('focus-visible')) {
+        removeFocusClass();
         return hide();
       }
+
+      innerRef.current?.classList.add('focus-visible');
       innerRef.current?.focus();
       return show();
     });
@@ -207,7 +216,7 @@ export const Select = forwardRef(
                 <Icon
                   name={
                     visible === AnimatedVisibility.VISIBLE
-                      ? 'cross'
+                      ? 'chevron-up'
                       : addonIcon || 'chevron-down'
                   }
                   size='x20'

diff --git a/packages/fuselage/src/components/Select/SelectAddon.tsx b/packages/fuselage/src/components/Select/SelectAddon.tsx
@@ -3,8 +3,6 @@ import React, { forwardRef } from 'react';
 
 import Box from '../Box';
 
-export type SelectOptions = readonly [value: string, label: string][];
-
 type AddonProps = ComponentProps<typeof Box>;
 
 const SelectAddon = forwardRef(function SelectAddon(

diff --git a/packages/fuselage/src/components/Select/SelectFocus.tsx b/packages/fuselage/src/components/Select/SelectFocus.tsx
@@ -3,8 +3,6 @@ import React, { forwardRef } from 'react';
 
 import Box from '../Box';
 
-export type SelectOptions = readonly [value: string, label: string][];
-
 type SelectFocusProps = ComponentProps<typeof Box>;
 
 const SelectFocus = forwardRef(function SelectFocus(

diff --git a/packages/fuselage/src/components/Select/styles.scss b/packages/fuselage/src/components/Select/styles.scss
@@ -40,6 +40,7 @@
   }
 
   &__wrapper {
+    align-items: center;
     flex-grow: 1;
     flex-shrink: 1;