@spaced-out/ui-design-system 0.4.13-beta.0 → 0.4.13-beta.1

package/lib/components/Typeahead/SimpleTypeahead.tsx

@@ -1,159 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
-import type {ClickAwayRefType} from '../../utils/click-away';
-import {getTextLabelFromSelectedKeys} from '../../utils/menu';
-import type {InputProps} from '../Input';
-import type {MenuOption, Virtualization} from '../Menu';
-import type {ElevationType} from '../Tooltip';
-
-import {Typeahead} from './Typeahead';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-  box?: string;
-}>;
-
-export type SimpleTypeaheadRef = {
-  selectedKeys?: Array<string>;
-};
-
-export type SimpleTypeaheadProps = (// Input props
-(InputProps) & {
-  isLoading?: boolean;
-  menuOpenOffset?: number;
-  classNames?: ClassNames;
-  // Menu props
-  options?: Array<MenuOption>;
-  selectedKeys?: Array<string>;
-  menuVirtualization?: Virtualization;
-  header?: React.ReactNode;
-  footer?: React.ReactNode;
-  menuClassNames?: MenuClassNames;
-  showLabelTooltip?: MenuLabelTooltip;
-  allowWrap?: boolean;
-  elevation?: ElevationType;
-  // events
-  onSelect?: (
-    option: MenuOption,
-    arg2?: React.SyntheticEvent<HTMLElement> | null | undefined,
-  ) => unknown;
-  onSearch?: (evt: React.ChangeEvent<HTMLInputElement>) => unknown;
-  onMenuOpen?: () => unknown;
-  onMenuClose?: () => unknown;
-  onClear?: () => void;
-  // Resolvers
-  resolveLabel?: (option: MenuOption) => string | React.ReactNode;
-  resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;
-  clickAwayRef?: ClickAwayRefType;
-  allowInternalFilter?: boolean;
-});
-
-const SimpleTypeaheadBase = (props: SimpleTypeaheadProps & Omit<Omit<Flow.ComponentProps<typeof Typeahead>, 'allowInternalFilter' | 'classNames' | 'size' | 'placeholder' | 'onSelect' | 'onMenuOpen' | 'onMenuClose' | 'typeaheadInputText' | 'onSearch' | 'onClear' | 'menu' | 'clickAwayRef' | 'elevation'>, keyof SimpleTypeaheadProps>, ref: ((arg1: null | SimpleTypeaheadRef) => unknown) | {
-  current: null | SimpleTypeaheadRef;
-}) => {
-  const {
-    size = 'medium',
-    classNames,
-    placeholder = 'Select...',
-    options,
-    selectedKeys,
-    onSelect,
-    onMenuOpen,
-    onMenuClose,
-    resolveLabel,
-    resolveSecondaryLabel,
-    onClear,
-    onSearch,
-    menuVirtualization,
-    header,
-    footer,
-    menuClassNames,
-    clickAwayRef,
-    showLabelTooltip,
-    allowInternalFilter = true,
-    allowWrap = false,
-    elevation = 'modal',
-    ...inputProps
-  } = props;
-
-  const [typeaheadInputText, setTypeaheadInputText] = React.useState('');
-  const [typeaheadSelectedKeys, setTypeaheadSelectedKeys] =
-    React.useState(selectedKeys);
-
-  React.useEffect(() => {
-    const newTypeaheadText = getTextLabelFromSelectedKeys(
-      selectedKeys,
-      options,
-    );
-
-    setTypeaheadSelectedKeys(selectedKeys);
-    setTypeaheadInputText(newTypeaheadText);
-  }, [selectedKeys]);
-
-  const handleOptionChange = (selectedOption: MenuOption, e: React.SyntheticEvent<HTMLElement> | null | undefined) => {
-    e?.stopPropagation();
-    const newSelectedKeys = [selectedOption.key];
-
-    const newTypeaheadText = getTextLabelFromSelectedKeys(
-      newSelectedKeys,
-      options,
-    );
-
-    setTypeaheadSelectedKeys(newSelectedKeys);
-    setTypeaheadInputText(newTypeaheadText);
-
-    setTimeout(() => {
-      onSelect?.(selectedOption, e);
-    });
-  };
-
-// @ts-ignore - TS2345 - Argument of type '{ current: SimpleTypeaheadRef | null; } | ((arg1: SimpleTypeaheadRef | null) => unknown)' is not assignable to parameter of type 'Ref<SimpleTypeaheadRef> | undefined'.
-  React.useImperativeHandle(ref, () => ({
-    selectedKeys: typeaheadSelectedKeys,
-  }));
-
-  return (
-    <Typeahead
-      {...inputProps}
-      allowInternalFilter={allowInternalFilter}
-      classNames={classNames}
-      size={size}
-      placeholder={placeholder}
-      onSelect={handleOptionChange}
-      onMenuOpen={onMenuOpen}
-      onMenuClose={onMenuClose}
-      typeaheadInputText={typeaheadInputText}
-      onSearch={(e) => {
-        setTypeaheadInputText(e.target.value);
-        onSearch?.(e);
-      }}
-      onClear={() => {
-        setTypeaheadInputText('');
-        setTypeaheadSelectedKeys([]);
-        onClear?.();
-      }}
-      menu={{
-        options,
-        selectedKeys: typeaheadSelectedKeys,
-        resolveLabel,
-        resolveSecondaryLabel,
-        size,
-        virtualization: menuVirtualization,
-        header,
-        footer,
-        classNames: menuClassNames,
-        showLabelTooltip,
-        allowWrap,
-      }}
-      clickAwayRef={clickAwayRef}
-      elevation={elevation}
-    />
-  );
-};
-
-// @ts-ignore - TS2345 - Argument of type '(props: SimpleTypeaheadProps & Omit<Omit<Flow.ComponentProps<typeof Typeahead>, 'allowInternalFilter' | 'classNames' | 'size' | 'placeholder' | 'onSelect' | 'onMenuOpen' | 'onMenuClose' | 'typeaheadInputText' | 'onSearch' | 'onClear' | 'menu' | 'clickAwayRef' | 'elevation'>, keyof SimpleTypeaheadProps>, ref: { curre...' is not assignable to parameter of type 'ForwardRefRenderFunction<SimpleTypeaheadProps, SimpleTypeaheadRef>'.
-export const SimpleTypeahead: Flow.AbstractComponent<SimpleTypeaheadProps, SimpleTypeaheadRef> = React.forwardRef<SimpleTypeaheadProps, SimpleTypeaheadRef>(SimpleTypeaheadBase);

package/lib/components/Typeahead/Typeahead.stories.tsx

@@ -1,552 +0,0 @@
-import * as React from 'react';
-
-import {useDebounce} from '../../hooks/useDebounce';
-import type {MenuOption, MenuProps} from '../Menu';
-import {MenuFooter, MenuHeader} from '../Menu/Menu.stories';
-import {ELEVATION_TYPES} from '../Tooltip';
-
-import type {TypeaheadProps} from './Typeahead';
-import {Typeahead} from './Typeahead';
-
-import css from './Typeahead.stories.module.css';
-
-
-const DEFAULT_LIMIT = 10;
-const DEFAULT_OFFSET = 0;
-const elevationOptions: Array<unknown> = [...Object.values(ELEVATION_TYPES)];
-
-const options: MenuOption[] = [
-  {key: '1', label: 'Eden Porter', iconLeft: 'user'},
-  {key: '2', label: 'Verda Rodgers', iconLeft: 'user'},
-  {
-    key: '3',
-    label:
-      'Option three this is a very long option that would truncate, and it continues even further to demonstrate how the text will behave when it exceeds the typical display width of the dropdown or typeahead component, ensuring that truncation, ellipsis, or wrapping is handled gracefully by the UI.',
-    iconLeft: 'user',
-  },
-  {key: '4', label: 'Rolf Kim', iconLeft: 'user'},
-  {key: '5', label: 'Ava Clark', iconLeft: 'user'},
-  {key: '6', label: 'Geneva Rhodes', iconLeft: 'user'},
-  {key: '7', label: 'Miranda Black', iconLeft: 'user'},
-  {key: '8', label: 'Marsh Saunders', iconLeft: 'user'},
-  {key: '9', label: 'Prunella Webb', iconLeft: 'user'},
-  {key: '10', label: 'Andy Mullins', iconLeft: 'user'},
-  {key: '11', label: 'Jade Watkins', iconLeft: 'user'},
-  {key: '12', label: 'Wally Wolfe', iconLeft: 'user'},
-  {key: '13', label: 'Misty Lipsey', iconLeft: 'user'},
-  {key: '14', label: 'Dwight Gibbs', iconLeft: 'user'},
-  {key: '15', label: 'Ronald Rhodes', iconLeft: 'user'},
-  {key: '16', label: 'Sophia Evans', iconLeft: 'user'},
-  {key: '17', label: 'Liam Harris', iconLeft: 'user'},
-  {key: '18', label: 'Olivia Grant', iconLeft: 'user'},
-  {key: '19', label: 'Ethan Daniels', iconLeft: 'user'},
-  {key: '20', label: 'Chloe Thomas', iconLeft: 'user'},
-  {key: '21', label: 'Lucas Martinez', iconLeft: 'user'},
-  {key: '22', label: 'Benjamin Wright', iconLeft: 'user'},
-  {key: '23', label: 'Amelia King', iconLeft: 'user'},
-  {key: '24', label: 'James Lewis', iconLeft: 'user'},
-  {key: '25', label: 'Pamela Fennimore', iconLeft: 'user'},
-];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Form Components/Typeahead/Generic Typeahead',
-  component: Typeahead,
-  argTypes: {
-    size: {
-      description:
-        'Typeahead supports only two size variants namely small and medium. `small` < `medium`',
-      options: ['medium', 'small'],
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    menuSize: {
-      description:
-        'Size of the menu.If not specified menu would take the size prop of typeahead. `small` < `medium`',
-      options: ['medium', 'small'],
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-      },
-    },
-    elevation: {
-      description:
-        'This is passed to Typeahead. Elevation level for the dropdown menu controls the z-index stacking order. Default is set to "modal" elevation. Use higher elevation levels when rendering the dropdown above other elevated elements like Modal, Toast, etc.',
-      control: {
-        type: 'select',
-      },
-      options: elevationOptions,
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'modal'},
-      },
-    },
-    name: {
-      description: 'Name of the typeahead',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    options: {
-      description:
-        'Typeahead options to be displayed. Each option should atleast have `{key: string, label: string}` Each option additionally supports `iconLeft` and `iconRight`',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: 'MenuOption[]'},
-      },
-    },
-    disabled: {
-      description: 'if **true**, the component is disabled',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    isLoading: {
-      description:
-        'if **true**, the component would add a loader. The loader occupies space outside the container.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    menuOpenOffset: {
-      description:
-        'A number indicating how many characters are needed to open menu',
-      control: {
-        type: 'number',
-      },
-      table: {
-        type: {summary: 'number'},
-        defaultValue: {summary: 1},
-      },
-    },
-    placeholder: {
-      description:
-        'Placeholder of typeahead. This appears inside the input box',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    locked: {
-      description:
-        'if **true**, the component is locked, Locked state is the readonly state of the typeahead',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    error: {
-      description:
-        'if **true**, the component is moved to error state, Error state displays a red border surrounding input',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    errorText: {
-      description:
-        'Error text to be displayed on the bottom of the input. This uses `colorTextDanger`',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    label: {
-      description:
-        'Primary label of the typeahead. This appears on top of typeahead input',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    helperText: {
-      description:
-        'Secondary label of the typeahead. This appears on bottom of typeahead input, if the typeahead is in `error` state the priority is given to `errorText`, in such cases secondary label wont be displayed',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    classNames: {
-      description: 'External classnames to be applied',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: '{wrapper?: string, box?: string}'},
-      },
-    },
-    onSelect: {
-      description:
-        '**onSelect** handler is triggered when there is a selection of an option from Menu',
-      action: 'Option Selected',
-      table: {
-        type: {
-          summary:
-            '(option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed',
-        },
-      },
-    },
-    iconLeftName: {
-      description:
-        'Left icon to be applied to the button, it internally uses the `Icon` component to render icons. By default Typeahead has magnifying-glass icon',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'magnifying-glass'},
-      },
-    },
-    onClear: {
-      description:
-        '**onClear** handler is triggered when clear button is clicked.',
-      action: 'cleared',
-      table: {
-        type: {summary: '() => void'},
-      },
-    },
-    onSearch: {
-      description:
-        '**onSearch** handler is triggered when there change in the input value',
-      action: 'Searched',
-      table: {
-        type: {
-          summary: '(evt: SyntheticInputEvent<HTMLInputElement>) => mixed',
-        },
-      },
-    },
-    onFocus: {
-      description:
-        '**onFocus** handler is triggered when typeahead is focussed',
-      action: 'focussed',
-      table: {
-        type: {summary: '(e: SyntheticInputEvent<HTMLInputElement>) => mixed'},
-      },
-    },
-    onBlur: {
-      description: '**onBlur** handler is triggered when typeahead is blurred',
-      action: 'blurred',
-      table: {
-        type: {summary: '(e: SyntheticInputEvent<HTMLInputElement>) => mixed'},
-      },
-    },
-    typeaheadInputText: {
-      description:
-        'Text that appears inside the top input. Since Typeahead is a controlled component, this has to be set by caller',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    menu: {
-      description: 'Menu props to use',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: 'MenuProps'},
-      },
-    },
-    onMenuOpen: {
-      description:
-        '**onMenuOpen** handler is triggered when menu is opened. This should be helpful in cases where you want to change Button icon / text on this trigger.',
-      action: 'clicked',
-      table: {
-        type: {summary: '() => mixed'},
-      },
-    },
-    onMenuClose: {
-      description:
-        '**onMenuClose** handler is triggered when menu is closed. This should be helpful in cases where you want to change Button icon / text on this trigger.',
-      action: 'clicked',
-      table: {
-        type: {summary: '() => mixed'},
-      },
-    },
-    clickAwayRef: {
-      type: {optional: true},
-      description: 'ref that contains the functions to open or close the child',
-      table: {
-        type: {
-          summary: 'ClickAwayRefType',
-        },
-      },
-    },
-    allowInternalFilter: {
-      description:
-        'Allows the **MenuOptions** to be filtered internally based on the **label** of each option. When this is set to false, the internal filtering mechanism that matches options against the search text is skipped. This means it assumes that the **MenuOptions** has already been filtered externally and will display the provided options as they are without any further processing.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: true},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Typeahead component',
-      description: {
-        component: `
-\`\`\`js
-import { Typeahead } from "@spaced-out/ui-design-system/lib/components/Typeahead";
-\`\`\`
-**Typeahead** is implemented as a combination of **<a href="../?path=/docs/form-components-input--docs">Input</a>** and **<a href="../?path=/docs/components-menu--docs">Menu</a>**
-components. It internally uses **Floating UI** to
-position itself in context of DOM. Supports a bunch of callbacks listed below. Typeahead automatically filters options when a
-substring match is found in option(s). This is done using \`label\` prop of option.
-
-- Supports passing a \`clickAwayRef\` prop to the component.
-- You can always force Open the dropdown from ref by using \`clickAwayRef.current?.forceOpen()\`. This might be useful when want to force Open as per you needs.
-- You can always force Close the dropdown from ref by using \`clickAwayRef.current?.forceClose()\`. This might be useful when want to force Close as per you needs.
-
-**Purpose:** The Typeahead component is designed to enhance performance and user experience by initially displaying a limited set of menu options (e.g., most popular or recently used items). Once the user begins typing into the input field, the component dynamically queries the API and displays all matching results based on the input text. This approach minimizes initial load time while ensuring that users can still access the full range of options through search-driven filtering.
-
-Currently typeahead only supports simple menu options.
-
-\`\`\`jsx
-export const _BasicTypeahead = (args: TypeaheadProps): React.ReactNode => {
-  const clickAwayRef = React.useRef(null);
-  const [inputText, setInputText] = React.useState('');
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [menuOptions, setMenuOptions] = React.useState([]);
-
-  const debouncedInputText = useDebounce(inputText, 500);
-
-  const fetchData = async () => {
-    setIsLoading(true);
-    const newOptions = await getPaginatedData(
-      debouncedInputText,
-      DEFAULT_OFFSET,
-      DEFAULT_LIMIT,
-    );
-    setMenuOptions(newOptions);
-    setIsLoading(false);
-  };
-
-  React.useEffect(() => {
-    fetchData();
-  }, [debouncedInputText]);
-
-  return (
-    <div className={css.typeaheadWrapper}>
-      <Typeahead
-        {...args}
-        menu={{
-          options: menuOptions,
-          virtualization: {enable: true},
-        }}
-        onClear={() => setInputText('')}
-        onSearch={(e) => setInputText(e.target.value)}
-        onSelect={({label}) => setInputText(label || '')}
-        isLoading={isLoading}
-        clickAwayRef={clickAwayRef}
-        typeaheadInputText={inputText}
-        allowInternalFilter={false}
-      />
-    </div>
-  );
-}
-\`\`\`
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Typeahead/Typeahead.jsx',
-    },
-  },
-};
-
-const menuProps: MenuProps = {
-  options,
-};
-
-export const _Typeahead = (args: TypeaheadProps) => {
-  const [inputText, setInputText] = React.useState('');
-  return (
-    <div className={css.typeaheadWrapper}>
-      <Typeahead
-        {...args}
-        typeaheadInputText={inputText}
-        onSearch={(e) => setInputText(e.target.value)}
-        onSelect={(option) => {
-// @ts-ignore - TS2345 - Argument of type 'string | undefined' is not assignable to parameter of type 'SetStateAction<string>'.
-          setInputText(option.label);
-        }}
-        onClear={() => setInputText('')}
-      />
-    </div>
-  );
-};
-
-_Typeahead.args = {
-  label: 'Search a name',
-  menu: menuProps,
-};
-
-export const _TypeaheadWithTooltipOptions = (args: TypeaheadProps) => {
-  const [inputText, setInputText] = React.useState('');
-  return (
-    <div className={css.typeaheadWrapper}>
-      <Typeahead
-        {...args}
-        typeaheadInputText={inputText}
-        onSearch={(e) => setInputText(e.target.value)}
-        onSelect={(option) => {
-// @ts-ignore - TS2345 - Argument of type 'string | undefined' is not assignable to parameter of type 'SetStateAction<string>'.
-          setInputText(option.label);
-        }}
-        onClear={() => setInputText('')}
-      />
-    </div>
-  );
-};
-
-_TypeaheadWithTooltipOptions.args = {
-  label: 'Search a name',
-  menu: {...menuProps, showLabelTooltip: {maxLines: 10}},
-};
-
-export const _WithHeaderAndFooter = (args: TypeaheadProps) => (<WithHeaderAndFooter {...args} />);
-
-export const WithHeaderAndFooter = (args: TypeaheadProps) => {
-  const clickAwayRef = React.useRef(null);
-  const [inputText, setInputText] = React.useState('');
-
-  const onSave = () => {
-    if (clickAwayRef.current) {
-// @ts-ignore - TS2339 - Property 'forceClose' does not exist on type 'never'.
-      clickAwayRef.current.forceClose();
-    }
-  };
-
-  return (
-    <div className={css.typeaheadWrapper}>
-      <Typeahead
-        {...args}
-        typeaheadInputText={inputText}
-        onSearch={(e) => setInputText(e.target.value)}
-        onSelect={(option) => {
-// @ts-ignore - TS2345 - Argument of type 'string | undefined' is not assignable to parameter of type 'SetStateAction<string>'.
-          setInputText(option.label);
-        }}
-        menu={{
-          options,
-          header: <MenuHeader />,
-          footer: <MenuFooter onSave={onSave} />,
-        }}
-        onClear={() => setInputText('')}
-        clickAwayRef={clickAwayRef}
-      />
-    </div>
-  );
-};
-
-_WithHeaderAndFooter.args = {
-  label: 'Search a name',
-};
-
-const getPaginatedData = ({
-  limit,
-  offset,
-  searchText,
-}: {
-  limit: number;
-  offset: number;
-  searchText: string;
-}) =>
-  new Promise((resolve: (result: Promise<Array<MenuOption>> | Array<MenuOption>) => void) =>
-    setTimeout(() => {
-      const filteredOptions = options.filter((option) =>
-        option.label
-          ? option.label.toLowerCase().includes(searchText.toLowerCase())
-          : true,
-      );
-
-      resolve(filteredOptions.slice(offset, offset + limit));
-    }, 1000),
-  );
-
-export const _WithPaginationAndVirtualization = (args: TypeaheadProps) => {
-  const clickAwayRef = React.useRef(null);
-  const [inputText, setInputText] = React.useState('');
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [menuOptions, setMenuOptions] = React.useState([]);
-
-  const debouncedInputText = useDebounce(inputText, 500);
-
-  const fetchData = async () => {
-    setIsLoading(true);
-    const newOptions = await getPaginatedData({
-      limit: DEFAULT_LIMIT,
-      offset: DEFAULT_OFFSET,
-      searchText: debouncedInputText,
-    });
-// @ts-ignore - TS2345 - Argument of type 'MenuOption[]' is not assignable to parameter of type 'SetStateAction<never[]>'.
-    setMenuOptions(newOptions);
-    setIsLoading(false);
-  };
-
-  React.useEffect(() => {
-    fetchData();
-  }, [debouncedInputText]);
-
-  return (
-    <div className={css.typeaheadWrapper}>
-      <Typeahead
-        {...args}
-        menu={{
-          options: menuOptions,
-          virtualization: {enable: true},
-        }}
-        onClear={() => setInputText('')}
-        onSearch={(e) => setInputText(e.target.value)}
-        onSelect={({label}) => setInputText(label || '')}
-        isLoading={isLoading}
-        clickAwayRef={clickAwayRef}
-        typeaheadInputText={inputText}
-        allowInternalFilter={false}
-      />
-    </div>
-  );
-};
-
-_WithPaginationAndVirtualization.args = {
-  label: 'Search a name',
-  menuOpenOffset: 0,
-};