From e121ad06ef05b1093052ea9780f36d402623656a Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Wed, 20 Jul 2022 17:07:29 -0300
Subject: [PATCH] fix(fuselage): Select/MultiSelect options visibility (#759)

---
 .../fuselage-hooks/src/useOutsideClick.ts     |  2 +-
 .../components/MultiSelect/MultiSelect.tsx    | 37 ++++++++++++-------
 .../MultiSelect/MultiSelectFiltered.tsx       |  1 +
 .../PaginatedSelect/PaginatedSelect.tsx       | 27 ++++++++------
 .../PaginatedSelect/PaginatedSelectAddon.tsx  | 15 --------
 .../PaginatedSelect/PaginatedSelectFocus.tsx  | 25 -------------
 .../src/components/Select/Select.spec.tsx     |  8 ++--
 .../src/components/Select/Select.stories.tsx  |  2 +-
 .../fuselage/src/components/Select/Select.tsx | 19 +++++++---
 .../src/components/Select/SelectAddon.tsx     |  2 -
 .../src/components/Select/SelectFocus.tsx     |  2 -
 .../src/components/Select/styles.scss         |  1 +
 12 files changed, 63 insertions(+), 78 deletions(-)
 delete mode 100644 packages/fuselage/src/components/PaginatedSelect/PaginatedSelectAddon.tsx
 delete mode 100644 packages/fuselage/src/components/PaginatedSelect/PaginatedSelectFocus.tsx

diff --git a/packages/fuselage-hooks/src/useOutsideClick.ts b/packages/fuselage-hooks/src/useOutsideClick.ts
index 6a5b89bc7f..69098d2b2b 100644
--- 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
index 021a97ac21..01e466b12e 100644
--- 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,6 +51,7 @@ type MultiSelectProps = Omit<
   renderItem?: ElementType;
   renderSelected?: ElementType;
   addonIcon?: ComponentProps<typeof Icon>['name'];
+  setFilter?: (filter: string) => void;
 };
 
 export const MultiSelect = forwardRef(
@@ -57,6 +59,7 @@ export const MultiSelect = forwardRef(
     {
       value,
       filter,
+      setFilter,
       options = [],
       error,
       disabled,
@@ -79,14 +82,13 @@ 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);
@@ -94,6 +96,7 @@ export const MultiSelect = forwardRef(
         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
index 1243c9213a..0e83174615 100644
--- 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
index becd489b8d..d195b561e1 100644
--- 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
deleted file mode 100644
index 0331283c2e..0000000000
--- a/packages/fuselage/src/components/PaginatedSelect/PaginatedSelectAddon.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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;
diff --git a/packages/fuselage/src/components/PaginatedSelect/PaginatedSelectFocus.tsx b/packages/fuselage/src/components/PaginatedSelect/PaginatedSelectFocus.tsx
deleted file mode 100644
index 7e12691b6c..0000000000
--- a/packages/fuselage/src/components/PaginatedSelect/PaginatedSelectFocus.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-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;
diff --git a/packages/fuselage/src/components/Select/Select.spec.tsx b/packages/fuselage/src/components/Select/Select.spec.tsx
index 10176ec77e..5f57450d4e 100644
--- 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
index ddde465ff5..70b0ff7f3b 100644
--- 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
index fd38b8908a..b0802f4556 100644
--- 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
index 65c36a7980..5446126839 100644
--- 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
index 09dd70ab96..70604c0073 100644
--- 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
index 2f575b17dd..3b460fcad5 100644
--- 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;