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

package/lib/components/Dropdown/Dropdown.tsx

@@ -1,174 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-import {
-  autoUpdate,
-  flip,
-  FloatingFocusManager,
-  FloatingPortal,
-  offset,
-  useFloating,
-} from '@floating-ui/react';
-
-import {useReferenceElementWidth} from '../../hooks';
-import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
-import {classify} from '../../utils/classify';
-import {ClickAwayRefType, ClickAway} from '../../utils/click-away';
-import {mergeRefs} from '../../utils/merge-refs';
-import type {InputProps} from '../Input';
-import {Input} from '../Input';
-import type {MenuOption, MenuProps} from '../Menu';
-import {Menu} from '../Menu';
-import {ElevationType, getElevationValue} from '../Tooltip';
-
-import css from './Dropdown.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-  box?: string;
-  iconRight?: string;
-}>;
-
-export type DropdownProps = ((InputProps) & {
-  classNames?: ClassNames;
-  onChange?: (
-    option: MenuOption,
-    arg2?: React.SyntheticEvent<HTMLElement> | null | undefined,
-  ) => unknown;
-  onMenuOpen?: () => unknown;
-  onMenuClose?: () => unknown;
-  scrollMenuToBottom?: boolean;
-  dropdownInputText?: string;
-  menu?: MenuProps;
-  elevation?: ElevationType;
-  clickAwayRef?: ClickAwayRefType;
-});
-
-export const Dropdown: Flow.AbstractComponent<DropdownProps, HTMLInputElement> = React.forwardRef<HTMLInputElement, DropdownProps>((
-  {
-    size = 'medium',
-    classNames,
-    placeholder = 'Select...',
-    onChange,
-    menu,
-    onMenuOpen,
-    onMenuClose,
-    scrollMenuToBottom = false,
-    dropdownInputText = '',
-    clickAwayRef,
-    elevation = 'modal',
-    ...inputProps
-  }: DropdownProps,
-  ref,
-) => {
-// @ts-ignore - TS2554 - Expected 1 arguments, but got 0.
-  const menuRef = React.useRef();
-
-  const {x, y, refs, strategy, context} = useFloating({
-    open: true,
-    strategy: 'absolute',
-    placement: 'bottom-start',
-    whileElementsMounted: autoUpdate,
-    middleware: [flip(), offset(parseInt(spaceXXSmall))],
-  });
-// @ts-ignore - TS2345 - Argument of type '(ReferenceType & ReferenceType) | null' is not assignable to parameter of type 'HTMLElement | null | undefined'.
-  const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
-
-  const onMenuToggle = (isOpen: boolean) => {
-    isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
-    if (scrollMenuToBottom && menuRef.current && isOpen) {
-// @ts-ignore - TS2571 - Object is of type 'unknown'. | TS2571 - Object is of type 'unknown'.
-      menuRef.current.scrollTop = isOpen ? menuRef.current.scrollHeight : 0;
-    }
-  };
-
-  return (
-    <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
-      {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
-        <div
-          className={classify(css.dropdownContainer, classNames?.wrapper)}
-          data-testid="Dropdown"
-        >
-          <Input
-            {...inputProps}
-            onKeyDown={(e) => {
-              if (e.keyCode === 32) {
-                e.preventDefault();
-                isOpen ? clickAway() : onOpen();
-              }
-            }}
-// @ts-ignore - TS2741 - Property 'current' is missing in type '((node: ReferenceType | null) => void) & ((node: ReferenceType | null) => void)' but required in type '{ current: HTMLElement | null | undefined; }'.
-            boxRef={mergeRefs([refs.setReference, triggerRef])}
-            size={size}
-            placeholder={placeholder}
-            value={dropdownInputText}
-            classNames={{
-              box: classify(css.inputBox, classNames?.box),
-              iconRight: classNames?.iconRight,
-            }}
-            iconRightName={isOpen ? 'angle-up' : 'angle-down'}
-            readOnly
-            onContainerClick={(e) => {
-              e.stopPropagation();
-              onOpen();
-            }}
-            ref={ref}
-          />
-
-          {isOpen && menu && (
-            <FloatingPortal>
-              <FloatingFocusManager
-                modal={false}
-                context={context}
-// @ts-ignore - TS2322 - Type 'MutableRefObject<ReferenceType | null> & MutableRefObject<ReferenceType | null>' is not assignable to type 'number | MutableRefObject<HTMLElement | null> | undefined'.
-                initialFocus={refs.reference}
-              >
-                <div
-// @ts-ignore - TS2741 - Property 'current' is missing in type '((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void)' but required in type '{ current: HTMLElement | null | undefined; }'.
-                  ref={mergeRefs([refs.setFloating, boundaryRef])}
-                  className={css.menuWrapper}
-                  style={{
-                    position: strategy,
-                    top: y ?? spaceNone,
-                    left: x ?? spaceNone,
-                    /* NOTE(Sharad): The FloatingPortal renders the menu outside the normal DOM structure,
-                     so its parent is effectively the <body> element. This means the menu
-                     would otherwise default to the body's width. To support fluid width,
-                     we must manually set the dropdown width here; otherwise, it uses a fixed width.
-                     Also, Only treat menu as non-fluid if isFluid is strictly false, since default is true in menu and undefined means fluid. */
-                    ...(menu.isFluid !== false && {
-                      '--dropdown-width': dropdownWidth,
-                    }),
-                    '--menu-elevation': getElevationValue(elevation),
-                  }}
-                >
-                  <Menu
-                    {...menu}
-                    onSelect={(option, e) => {
-                      onChange && onChange(option, e);
-                      if (
-                        // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
-                        !option.keepMenuOpenOnOptionSelect &&
-                        (!menu.optionsVariant ||
-                          menu.optionsVariant === 'normal')
-                      ) {
-                        clickAway();
-// @ts-ignore - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelector' does not exist on type 'ReferenceType & ReferenceType'.
-                        refs.reference.current.querySelector('input').focus();
-                      }
-                    }}
-                    size={menu.size || size}
-                    onTabOut={clickAway}
-// @ts-ignore - TS2769 - No overload matches this call.
-                    ref={menuRef}
-                  />
-                </div>
-              </FloatingFocusManager>
-            </FloatingPortal>
-          )}
-        </div>
-      )}
-    </ClickAway>
-  );
-});

package/lib/components/Dropdown/SimpleDropdown.stories.tsx

@@ -1,534 +0,0 @@
-import * as React from 'react';
-
-import type {MenuOption} from '../Menu';
-import {MenuFooter, MenuHeader} from '../Menu/Menu.stories';
-import {ELEVATION_TYPES} from '../Tooltip';
-
-import type {SimpleDropdownProps} from './SimpleDropdown';
-import {SimpleDropdown} from './SimpleDropdown';
-
-import css from './Dropdown.stories.module.css';
-
-
-const elevationOptions: Array<unknown> = [...Object.values(ELEVATION_TYPES)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Form Components/Dropdown/Simple Dropdown',
-  component: SimpleDropdown,
-  argTypes: {
-    size: {
-      description:
-        'Dropdown supports only two size variants namely small and medium. `small` < `medium`',
-      options: ['medium', 'small'],
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    required: {
-      description: 'if **true**, a red star would be added to the label',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    options: {
-      description: 'Options to be displayed in dropdown',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: 'Array<MenuOption>'},
-      },
-    },
-    name: {
-      description: 'Name of the Dropdown',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    disabled: {
-      description: 'if **true**, the component is disabled',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    placeholder: {
-      description: 'Placeholder of dropdown. 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 dropdown',
-      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 dropdown. This appears on top of dropdown input',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    helperText: {
-      description:
-        'Secondary label of the dropdown. This appears on bottom of dropdown input, if the dropdown 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'},
-      },
-    },
-    elevation: {
-      description:
-        'Elevation level for the dropdown menu. This 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'},
-      },
-    },
-    classNames: {
-      description: 'External classnames to be applied',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: '{wrapper?: string, box?: string}'},
-      },
-    },
-    menuClassNames: {
-      description:
-        'External classnames to be applied to the menu. Wrapper gets applied to Menu wrapper and option gets applied to each option in the menu.',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary:
-            '{wrapper?: string, option?: string, groupTitle?: string, optionTextContainer?: string, optionTextLabel?: string}',
-        },
-      },
-    },
-    onChange: {
-      description:
-        '**onChange** handler is triggered when there is a selection of an option from dropdown',
-      action: 'changed',
-      table: {
-        type: {
-          summary:
-            '(option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed',
-        },
-      },
-    },
-    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'},
-      },
-    },
-    onFocus: {
-      description: '**onFocus** handler is triggered when dropdown is focussed',
-      action: 'focussed',
-      table: {
-        type: {summary: '(e: SyntheticInputEvent<HTMLInputElement>) => mixed'},
-      },
-    },
-    onBlur: {
-      description: '**onBlur** handler is triggered when dropdown is blurred',
-      action: 'blurred',
-      table: {
-        type: {summary: '(e: SyntheticInputEvent<HTMLInputElement>) => mixed'},
-      },
-    },
-    optionsVariant: {
-      description: 'Menu supports multiple options variant',
-      control: {
-        type: 'select',
-      },
-      options: ['checkbox', 'radio', 'normal'],
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'normal'},
-      },
-    },
-    allowSearch: {
-      description: `if **true**, the component would show a search input on top of menu.
-        This is a simple **static search**
-        which filter options by **matching search text to option label**`,
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    selectedKeys: {
-      description:
-        'Selected keys corresponding to options. These options are shown as selected in UI',
-      control: {
-        type: 'array',
-      },
-      table: {
-        type: {summary: 'Array<string>'},
-      },
-    },
-    resolveLabel: {
-      description:
-        'A function that resolves the label for a MenuOption. This is useful when you want to customize the label of an option based on some condition',
-      table: {
-        type: {
-          summary: '(option: MenuOption) => string | React.ReactNode',
-        },
-      },
-    },
-    resolveSecondaryLabel: {
-      description:
-        'A function that resolves the secondary label for a MenuOption. This is useful when you want to customize the secondary label of an option based on some condition',
-      table: {
-        type: {
-          summary: '(option: MenuOption) => string | React.ReactNode',
-        },
-      },
-    },
-    menuVirtualization: {
-      description: `If **Enabled**, the options will only be rendered when they are within the component's viewport. **menuHeight and itemHeight** accept numerical input, interpreted as pixel values.`,
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary:
-            '{enable: boolean, menuHeight?: number, itemHeight?: number}',
-        },
-      },
-    },
-    header: {
-      description: 'Custom Header For the Menu',
-      table: {
-        type: {
-          summary: 'React.ReactNode',
-        },
-      },
-    },
-    footer: {
-      description: 'Custom Header For the Menu',
-      table: {
-        type: {
-          summary: 'React.ReactNode',
-        },
-      },
-    },
-    clickAwayRef: {
-      type: {optional: true},
-      description: 'ref that contains the functions to open or close the child',
-      table: {
-        type: {
-          summary: 'ClickAwayRefType',
-        },
-      },
-    },
-    showLabelTooltip: {
-      description: 'Show Tooltip on the label of the menu option if truncated',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: 'MenuLabelTooltip'},
-      },
-    },
-    allowWrap: {
-      description:
-        'Allows the label to wrap up to 3 lines. If truncated, a tooltip will display up to 10 lines.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    staticLabels: {
-      description:
-        'Static labels to be displayed in the dropdown with search input',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary:
-            '{RESULT?: string, RESULTS?: string, SEARCH_PLACEHOLDER?: string}',
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Dropdown component',
-      description: {
-        component: `
-\`\`\`js
-import { SimpleDropdown } from "@spaced-out/ui-design-system/lib/components/Dropdown";
-\`\`\`
-**SimpleDropdown** 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.
-
-- **SimpleDropdown** serially spreads out BaseMenuProps, meaning it would accept options as a prop instead of whole Menu.
-- **SimpleDropdown** would have implicit label selection behavior built in, meaning if you select an option the
-label would get auto populated for the component itself.
-- The component maintains an internal state for selections. You can always override it with explicit **selectedKeys**
-prop which changes on **onChange** callback.
-- You can always get the most recent instance of selected options from ref by using \`ref.current?.selectedKeys\`. This might be useful when you have
-options which are multi-select.
-- The component also supports custom **header** as \`React Component\` and this is then passed in
-the **<a href="../?path=/docs/components-menu--docs">Menu</a>** Component.
-- The component also supports custom **footer** as \`React Component\` and this is then passed in
-the **<a href="../?path=/docs/components-menu--docs">Menu</a>** Component. This might be useful when you need
-to save some state in the parent component.
-- Supports passing a \`clickAwayRef\` prop to the component.
-- You can always force Open the instance 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 instance from ref by using \`clickAwayRef.current?.forceClose()\`. This might be useful when want to force Close as per you needs.
-
-
-
-For checkbox type options you can get the latest instance of selected Keys from the component itself:
-
-\`\`\`jsx
-export const _WithCheckboxOptions = (args: SimpleDropdownProps): React.ReactNode => {
-  const ref = React.useRef(null);
-  const clickAwayRef = React.useRef(null);
-
-  const handleChange = () => {
-    // Get your current instance of selected keys from ref
-    // const selectedKeys = ref.current?.selectedKeys;
-  };
-
-  return (
-    <div className={css.dropdownWrapper}>
-      <div className={css.content}>
-      <SimpleDropdown
-        label="Form Label"
-        options={options}
-        optionsVariant={'checkbox'}
-        selectedKeys={['4']}
-        onChange={handleChange}
-        ref={ref}
-        clickAwayRef={clickAwayRef}
-      />
-      </div>
-    </div>
-  );
-};
-\`\`\`
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Dropdown/Dropdown.jsx',
-    },
-  },
-};
-
-const options: MenuOption[] = [
-  {
-    key: '1',
-    label: 'Option one',
-    iconLeft: 'coffee',
-  },
-  {key: '2', label: 'Option two', iconLeft: 'user'},
-  {
-    key: '4',
-    label:
-      'Option three is a very long option that would truncate and keep going to make it even longer than before. You can hover over the label to see the full text. ShowLabelTooltip maxLines is used to define the number of lines to show in the tooltip.',
-    iconLeft: 'face-party',
-  },
-  {
-    key: '5',
-    label: 'Option five(disabled)',
-    disabled: true,
-    iconLeft: 'flag',
-  },
-  {
-    key: '6',
-    label: 'Option six(disabled) very long option that would truncate',
-    disabled: true,
-    iconLeft: 'camera',
-  },
-  {
-    key: '7',
-    label: 'Option seven',
-    iconLeft: 'coffee',
-  },
-  {key: '8', label: 'Option eight', iconLeft: 'user'},
-  {
-    key: '9',
-    label: 'Option nine',
-    iconLeft: 'face-party',
-  },
-];
-
-export const _WithSimpleOptions = (args: SimpleDropdownProps) => (<div className={css.dropdownWrapper}>
-  <div className={css.content}>
-    <SimpleDropdown {...args} />
-  </div>
-</div>);
-
-_WithSimpleOptions.args = {
-  label: 'Form Label',
-  options,
-};
-
-export const _WithSimpleOptionsTooltip = (args: SimpleDropdownProps) => (<div className={css.dropdownWrapper}>
-  <div className={css.content}>
-    <SimpleDropdown {...args} />
-  </div>
-</div>);
-
-_WithSimpleOptionsTooltip.args = {
-  label: 'Form Label',
-  options,
-  showLabelTooltip: {maxLines: 6},
-};
-
-export const _WithSearch = (args: SimpleDropdownProps) => (<div className={css.dropdownWrapper}>
-  <div className={css.content}>
-    <SimpleDropdown {...args} />
-  </div>
-</div>);
-
-_WithSearch.args = {
-  label: 'Form Label',
-  options,
-  allowSearch: true,
-};
-
-export const _WithCheckboxOptions = (args: SimpleDropdownProps) => {
-  const ref = React.useRef(null);
-
-  const handleChange = () => {
-    // Get your current instance of selected keys from ref
-    // const selectedKeys = ref.current?.selectedKeys;
-  };
-
-  return (
-    <div className={css.dropdownWrapper}>
-      <div className={css.content}>
-        <SimpleDropdown {...args} onChange={handleChange} ref={ref} />
-      </div>
-    </div>
-  );
-};
-
-_WithCheckboxOptions.args = {
-  label: 'Form Label',
-  options,
-  optionsVariant: 'checkbox',
-  selectedKeys: ['4'],
-};
-
-export const _WithRadioOptions = (args: SimpleDropdownProps) => (<div className={css.dropdownWrapper}>
-  <div className={css.content}>
-    <SimpleDropdown {...args} />
-  </div>
-</div>);
-
-_WithRadioOptions.args = {
-  label: 'Form Label',
-  options,
-  optionsVariant: 'radio',
-  selectedKeys: ['2'],
-};
-
-export const _WithHeaderAndFooter = (args: SimpleDropdownProps) => {
-  const clickAwayRef = React.useRef(null);
-  const onSave = () => {
-    if (clickAwayRef.current) {
-// @ts-ignore - TS2339 - Property 'forceClose' does not exist on type 'never'.
-      clickAwayRef.current.forceClose();
-    }
-  };
-
-  return (
-    <div className={css.dropdownWrapper}>
-      <div className={css.content}>
-        <SimpleDropdown
-          {...args}
-          clickAwayRef={clickAwayRef}
-          header={<MenuHeader />}
-          footer={<MenuFooter onSave={onSave} />}
-        />
-      </div>
-    </div>
-  );
-};
-
-_WithHeaderAndFooter.args = {
-  label: 'Form Label',
-  options,
-  optionsVariant: 'checkbox',
-  selectedKeys: ['4'],
-};