feat(fuselage): MultiSelect improvements (#645)

* Adapt MulsiSelect to replace AutoComplete

* Convert MultiSelect to tsx

* Convert MultiSelectFiltered to tsx

* fix

* fix: review

* Add addonIcon prop on MultiSelect

* Adapt Select and SelectFiltered to replace AutoComplete

* Fix `MultiStaticSelectElement` definition of initial value

* Add utility type `ActionOf`

* Fix state types

* Replace `SelectOptions`

* Fix failing test

Co-authored-by: dougfabris <devfabris@gmail.com>
Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>

Author: 3 people

packages/fuselage-hooks/src/useAutoFocus.ts

@@ -7,7 +7,7 @@ import { useEffect, useRef, Ref } from 'react';
  * @param options - options of the focus request
  * @returns the ref which holds the element
  * @public
- * @deprecated
+ * @deprecated in favor of focus provided by react-hook-form
  */
 export const useAutoFocus = <
   T extends { focus: (options?: FocusOptions) => void }

packages/fuselage-ui-kit/src/elements/LinearScaleElement.tsx

@@ -60,7 +60,7 @@ const LinearScaleElement = ({
           {points.map((point, i) => (
             <Button
               key={i}
-              className={point === value ? 'active' : undefined}
+              className={point === String(value) ? 'active' : undefined}
               disabled={loading}
               danger={!!error}
               minWidth='4ch'

packages/fuselage-ui-kit/src/elements/MultiStaticSelectElement.tsx

@@ -1,4 +1,4 @@
-import { MultiSelectFiltered } from '@rocket.chat/fuselage';
+import { MultiSelectFiltered, SelectOption } from '@rocket.chat/fuselage';
 import * as UiKit from '@rocket.chat/ui-kit';
 import React, { memo, ReactElement, useCallback, useMemo } from 'react';
 
@@ -15,7 +15,7 @@ const MultiStaticSelectElement = ({
 }: MultiStaticSelectElementProps): ReactElement => {
   const [{ loading, value, error }, action] = useUiKitState(block, context);
 
-  const options = useMemo<readonly [string, string][]>(
+  const options = useMemo<SelectOption[]>(
     () =>
       block.options.map(({ value, text }, i) => [
         value,

packages/fuselage-ui-kit/src/elements/OverflowElement.tsx

@@ -23,7 +23,8 @@ const OverflowElement = ({
   const [{ loading }, action] = useUiKitState(block, context);
 
   const fireChange = useCallback(
-    ([value]: [unknown, string]) => action({ target: { value } }),
+    ([value]: [UiKit.ActionOf<UiKit.OverflowElement>, string]) =>
+      action({ target: { value } }),
     [action]
   );
 
@@ -51,7 +52,7 @@ const OverflowElement = ({
 
   const handleSelection = useCallback(
     ([value]: OptionType) => {
-      action({ target: { value } });
+      action({ target: { value: String(value) } });
       reset();
       hide();
     },

packages/fuselage-ui-kit/src/hooks/useUiKitState.ts

@@ -4,26 +4,36 @@ import { useContext, useMemo, useState } from 'react';
 
 import { kitContext, useUiKitStateValue } from '../contexts/kitContext';
 
-type UiKitState = {
+type UiKitState<
+  TElement extends UiKit.ActionableElement = UiKit.ActionableElement
+> = {
   loading: boolean;
   setLoading: (loading: boolean) => void;
   error?: string;
-  value: string | number | undefined;
+  value: UiKit.ActionOf<TElement>;
 };
 
-const hasInitialValue = <T extends UiKit.ActionableElement>(
-  element: T
-): element is T & { initialValue: number | string } =>
+const hasInitialValue = <TElement extends UiKit.ActionableElement>(
+  element: TElement
+): element is TElement & { initialValue: number | string } =>
   'initialValue' in element;
 
-const hasInitialOption = <T extends UiKit.ActionableElement>(
-  element: T
-): element is T & { initialOption: UiKit.Option } => 'initialOption' in element;
+const hasInitialOption = <TElement extends UiKit.ActionableElement>(
+  element: TElement
+): element is TElement & { initialOption: UiKit.Option } =>
+  'initialOption' in element;
 
-export const useUiKitState: <T extends UiKit.ActionableElement>(
-  element: T,
+export const useUiKitState: <TElement extends UiKit.ActionableElement>(
+  element: TElement,
   context: UiKit.BlockContext
-) => [UiKitState, any] = (rest, context) => {
+) => [
+  state: UiKitState<TElement>,
+  action: (
+    pseudoEvent?:
+      | { target: EventTarget }
+      | { target: { value: UiKit.ActionOf<TElement> } }
+  ) => void
+] = (rest, context) => {
   const { blockId, actionId, appId } = rest;
   const {
     action,

packages/fuselage/src/components/AutoComplete/AutoComplete.d.ts

@@ -15,4 +15,8 @@ type AutoCompleteProps = {
   error?: boolean;
   disabled?: boolean;
 };
+
+/**
+ * @deprecated in favor of Select and MultiSelect
+ */
 export const AutoComplete: FC<AutoCompleteProps>;

packages/fuselage/src/components/MultiSelect/MultiSelect.d.ts

@@ -12,6 +12,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 
 import { MultiSelect, MultiSelectFiltered } from '../..';
+import { SelectOption } from '../Select';
 
 export default {
   title: 'Inputs/MultiSelect',
@@ -35,7 +36,7 @@ export default {
   },
 } as ComponentMeta<typeof MultiSelect>;
 
-const options: readonly (readonly [string, string, boolean?])[] = [
+const options: SelectOption[] = [
   ['1', 'a teste 1'],
   ['2', 'b teste 2', true],
   ['3', 'c teste 3'],
@@ -58,6 +59,13 @@ Default.args = {
   options,
 };
 
+export const WithValue: ComponentStory<typeof MultiSelect> = Template.bind({});
+WithValue.args = {
+  placeholder: 'Placeholder here...',
+  options,
+  value: ['1', '2'],
+};
+
 export const Error: ComponentStory<typeof MultiSelect> = Template.bind({});
 Error.args = {
   error: 'Error',