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

package/lib/components/InlineDropdown/SimpleInlineDropdown.stories.tsx

@@ -1,513 +0,0 @@
-import * as React from 'react';
-
-import type {ButtonProps} from '../Button';
-import {ANCHOR_POSITION_TYPE} from '../ButtonDropdown';
-import type {MenuOption} from '../Menu';
-import {MenuFooter, MenuHeader} from '../Menu/Menu.stories';
-import {ELEVATION_TYPES} from '../Tooltip';
-
-import type {SimpleInlineDropdownProps} from './SimpleInlineDropdown';
-import {SimpleInlineDropdown} from './SimpleInlineDropdown';
-
-import css from './InlineDropdown.stories.module.css';
-
-
-const anchorPositionOptions: Array<unknown> = [
-  ...Object.values(ANCHOR_POSITION_TYPE),
-];
-const elevationOptions: Array<unknown> = [...Object.values(ELEVATION_TYPES)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Inline Dropdown/Simple Inline Dropdown',
-  component: SimpleInlineDropdown,
-  argTypes: {
-    onClick: {
-      description:
-        '**onClick** handler that is applied to the root `<button>` element',
-      action: 'clicked',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    classNames: {
-      description: 'External classNames to be applied',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: '{buttonWrapper?: string, dropdownContainer?: 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}',
-        },
-      },
-    },
-    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'},
-      },
-    },
-    size: {
-      description:
-        'Button supports only two size variants namely small and medium. `small` < `medium`',
-      control: {
-        type: 'radio',
-      },
-      options: ['medium', 'small', 'extraSmall'],
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    disabled: {
-      description: 'If **true**, the component is disabled',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    isFluid: {
-      description:
-        'If **true**, the component would take the container\'s `width`',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    children: {
-      description: 'The content of the Button',
-      table: {
-        type: {summary: 'React.Component | string'},
-      },
-    },
-    ariaLabel: {
-      control: {
-        type: 'text',
-      },
-      description:
-        '**aria-label** should be used where Button do not have have discernible text. This would avoid accessibility violations in screen readers',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    onOptionSelect: {
-      description:
-        '**onOptionSelect** handler is triggered when there is a change in selected option',
-      action: 'clicked',
-      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'},
-      },
-    },
-    anchorPosition: {
-      options: anchorPositionOptions,
-      description:
-        'Position of Menu. It can be any one value from the dropdown',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'bottom-start'},
-      },
-    },
-    options: {
-      description: 'Options to be displayed in buttonInlineDropdown',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: 'Array<MenuOption>'},
-      },
-    },
-    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}',
-        },
-      },
-    },
-    clickAwayRef: {
-      type: {optional: true},
-      description: 'ref that contains the functions to open or close the child',
-      table: {
-        type: {
-          summary: 'ClickAwayRefType',
-        },
-      },
-    },
-    header: {
-      description: 'Custom Header For the Menu',
-      table: {
-        type: {
-          summary: 'React.ReactNode',
-        },
-      },
-    },
-    footer: {
-      description: 'Custom Header For the Menu',
-      table: {
-        type: {
-          summary: 'React.ReactNode',
-        },
-      },
-    },
-    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},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a InlineDropdown component',
-      description: {
-        component: `
-\`\`\`js
-import { SimpleInlineDropdown } from "@spaced-out/ui-design-system/lib/components/InlineDropdown";
-\`\`\`
-**SimpleInlineDropdown** is implemented as a combination of **Unstyled Button** 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.
-
-- **SimpleInlineDropdown** serially spreads out BaseMenuProps, meaning it would accept options as a prop instead of whole Menu.
-- **SimpleInlineDropdown** 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 **onOptionSelect** 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 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.
-
-For checkbox type options you can get the latest instance of selected Keys from the component itself:
-
-\`\`\`jsx
-export const _WithCheckboxOptions = (args: SimpleInlineDropdownProps): 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.buttonInlineDropdownWrapper}>
-      <div className={css.content}>
-      <SimpleInlineDropdown
-        options={options}
-        optionsVariant={'checkbox'}
-        selectedKeys={['4']}
-        onOptionSelect={handleChange}
-        ref={ref}
-        clickAwayRef={clickAwayRef}
-      >
-        Some Button Label
-      </SimpleInlineDropdown>
-      </div>
-    </div>
-  );
-};
-\`\`\`
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/InlineDropdown/InlineDropdown.jsx',
-    },
-  },
-};
-
-const options: MenuOption[] = [
-  {
-    key: '1',
-    label: 'Option one',
-    iconLeft: 'coffee',
-  },
-  {key: '2', label: 'Option two', iconLeft: 'user'},
-  {
-    key: '3',
-    label: 'Option three (disabled)',
-    iconLeft: 'warning',
-    disabled: true,
-  },
-  {
-    key: '4',
-    label:
-      'Option three this is a very long option that would truncate, and this is even longer text to further test the truncation behavior in the dropdown component, ensuring that extremely long labels are handled gracefully and do not break the layout or overflow in an undesirable way, especially when the text is much longer than what would typically be expected in a dropdown option.',
-    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',
-  },
-];
-
-const textOnlyButtonProps: ButtonProps = {
-  children: 'Button Text',
-};
-
-const commonMenuProps = {
-  options,
-  size: 'medium',
-  isFluid: false,
-} as const;
-
-export const _TextOnly = (args: SimpleInlineDropdownProps) => {
-  const [selectedKeys, setSelectedKeys] = React.useState([]);
-
-  return (
-    <div className={css.menuBtnWrapper}>
-      <SimpleInlineDropdown
-        {...args}
-        selectedKeys={selectedKeys}
-        onOptionSelect={() => setSelectedKeys([])}
-      />
-    </div>
-  );
-};
-
-_TextOnly.args = {
-  ...textOnlyButtonProps,
-  ...commonMenuProps,
-};
-
-export const _TextWithTooltip = (args: SimpleInlineDropdownProps) => {
-  const [selectedKeys, setSelectedKeys] = React.useState([]);
-
-  return (
-    <div className={css.menuBtnWrapper}>
-      <SimpleInlineDropdown
-        {...args}
-        selectedKeys={selectedKeys}
-        onOptionSelect={() => setSelectedKeys([])}
-      />
-    </div>
-  );
-};
-
-_TextWithTooltip.args = {
-  ...textOnlyButtonProps,
-  ...commonMenuProps,
-  showLabelTooltip: {maxLines: 2},
-};
-
-export const _WithSearch = (args: SimpleInlineDropdownProps) => (<div className={css.menuBtnWrapper}>
-  <SimpleInlineDropdown {...args} />
-</div>);
-
-_WithSearch.args = {
-  ...textOnlyButtonProps,
-  allowSearch: true,
-  ...commonMenuProps,
-};
-
-export const _WithCheckboxOptions = (args: SimpleInlineDropdownProps) => {
-  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.menuBtnWrapper}>
-      <SimpleInlineDropdown {...args} onOptionSelect={handleChange} ref={ref} />
-    </div>
-  );
-};
-
-_WithCheckboxOptions.args = {
-  ...textOnlyButtonProps,
-  ...commonMenuProps,
-  optionsVariant: 'checkbox',
-  selectedKeys: ['4'],
-};
-
-export const _WithRadioOptions = (args: SimpleInlineDropdownProps) => (<div className={css.menuBtnWrapper}>
-  <SimpleInlineDropdown {...args} />
-</div>);
-
-_WithRadioOptions.args = {
-  ...textOnlyButtonProps,
-  ...commonMenuProps,
-  optionsVariant: 'radio',
-  selectedKeys: ['2'],
-};
-
-export const _WithHeaderAndFooter = (args: SimpleInlineDropdownProps) => {
-  const ref = React.useRef(null);
-  const clickAwayRef = React.useRef(null);
-
-  const onSave = () => {
-    if (clickAwayRef.current) {
-// @ts-ignore - TS2339 - Property 'forceClose' does not exist on type 'never'.
-      clickAwayRef.current.forceClose();
-    }
-  };
-
-  const handleChange = () => {
-    // Get your current instance of selected keys from ref
-    // const selectedKeys = ref.current?.selectedKeys;
-  };
-
-  return (
-    <div className={css.menuBtnWrapper}>
-      <SimpleInlineDropdown
-        {...args}
-        onOptionSelect={handleChange}
-        ref={ref}
-        header={<MenuHeader />}
-        footer={<MenuFooter onSave={onSave} />}
-        clickAwayRef={clickAwayRef}
-      />
-    </div>
-  );
-};
-
-_WithHeaderAndFooter.args = {
-  ...textOnlyButtonProps,
-  ...commonMenuProps,
-  optionsVariant: 'checkbox',
-  selectedKeys: ['4'],
-};

package/lib/components/InlineDropdown/SimpleInlineDropdown.tsx

@@ -1,165 +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 {
-  getButtonLabelFromSelectedKeys,
-  getSelectedKeysFromSelectedOption,
-} from '../../utils/menu';
-import type {ButtonProps} from '../Button';
-import type {AnchorType} from '../ButtonDropdown';
-import type {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
-import type {ElevationType} from '../Tooltip';
-
-import {InlineDropdown} from './InlineDropdown';
-
-
-type ClassNames = Readonly<{
-  buttonWrapper?: string;
-  dropdownContainer?: string;
-}>;
-
-export type SimpleInlineDropdownRef = {
-  selectedKeys?: Array<string>;
-};
-
-export type SimpleInlineDropdownProps = (// Input props
-(ButtonProps) & {
-  elevation?: ElevationType;
-  classNames?: ClassNames;
-  anchorPosition?: AnchorType;
-  // Menu props
-  options?: Array<MenuOption>;
-  optionsVariant?: MenuOptionsVariant;
-  allowSearch?: boolean;
-  selectedKeys?: Array<string>;
-  showLabelTooltip?: MenuLabelTooltip;
-  allowWrap?: boolean;
-  // events
-  onOptionSelect?: (
-    option: MenuOption,
-    arg2?: React.SyntheticEvent<HTMLElement> | null | undefined,
-  ) => unknown;
-  onMenuOpen?: () => unknown;
-  onMenuClose?: () => unknown;
-  menuVirtualization?: Virtualization;
-  header?: React.ReactNode;
-  footer?: React.ReactNode;
-  menuClassNames?: MenuClassNames;
-  // Resolvers
-  resolveLabel?: (option: MenuOption) => string | React.ReactNode;
-  resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;
-  clickAwayRef?: ClickAwayRefType;
-});
-
-const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps & Omit<Omit<Flow.ComponentProps<typeof InlineDropdown>, 'anchorPosition' | 'classNames' | 'size' | 'onOptionSelect' | 'onMenuOpen' | 'onMenuClose' | 'clickAwayRef' | 'elevation' | 'menu'>, keyof SimpleInlineDropdownProps>, ref: ((arg1: null | SimpleInlineDropdownRef) => unknown) | {
-  current: null | SimpleInlineDropdownRef;
-}) => {
-  const {
-    size = 'medium',
-    classNames,
-    anchorPosition,
-    options,
-    optionsVariant,
-    allowSearch,
-    selectedKeys,
-    onOptionSelect,
-    onMenuOpen,
-    onMenuClose,
-    resolveLabel,
-    resolveSecondaryLabel,
-    children,
-    isFluid,
-    menuVirtualization,
-    header,
-    footer,
-    menuClassNames,
-    showLabelTooltip,
-    clickAwayRef,
-    allowWrap = false,
-    elevation = 'modal',
-    ...buttonProps
-  } = props;
-
-  const [btnText, setBtnText] = React.useState('');
-  const [inlineDropdownSelectedKeys, setInlineDropdownSelectedKeys] =
-    React.useState(selectedKeys);
-
-  React.useEffect(() => {
-    const newBtnText = getButtonLabelFromSelectedKeys(selectedKeys, children);
-
-    setInlineDropdownSelectedKeys(selectedKeys);
-// @ts-ignore - TS2345 - Argument of type 'React.ReactNode' is not assignable to parameter of type 'SetStateAction<string>'.
-    setBtnText(newBtnText);
-  }, [selectedKeys]);
-
-  const handleOptionChange = (selectedOption: MenuOption, e: React.SyntheticEvent<HTMLElement> | null | undefined) => {
-    e?.stopPropagation();
-    let newSelectedKeys: Array<never> | Array<string> = [];
-
-    if (optionsVariant === 'checkbox') {
-      newSelectedKeys = getSelectedKeysFromSelectedOption(
-        selectedOption,
-        inlineDropdownSelectedKeys,
-      );
-    } else {
-      newSelectedKeys = [selectedOption.key];
-    }
-
-    const newBtnText = getButtonLabelFromSelectedKeys(
-      newSelectedKeys,
-      children,
-    );
-
-    setInlineDropdownSelectedKeys(newSelectedKeys);
-// @ts-ignore - TS2345 - Argument of type 'React.ReactNode' is not assignable to parameter of type 'SetStateAction<string>'.
-    setBtnText(newBtnText);
-
-    setTimeout(() => {
-      onOptionSelect?.(selectedOption, e);
-    });
-  };
-
-// @ts-ignore - TS2345 - Argument of type '{ current: SimpleInlineDropdownRef | null; } | ((arg1: SimpleInlineDropdownRef | null) => unknown)' is not assignable to parameter of type 'Ref<SimpleInlineDropdownRef> | undefined'.
-  React.useImperativeHandle(ref, () => ({
-    selectedKeys: inlineDropdownSelectedKeys,
-  }));
-
-  return (
-    <InlineDropdown
-      {...buttonProps}
-      anchorPosition={anchorPosition}
-      classNames={classNames}
-      size={size}
-      onOptionSelect={handleOptionChange}
-      onMenuOpen={onMenuOpen}
-      onMenuClose={onMenuClose}
-      clickAwayRef={clickAwayRef}
-      elevation={elevation}
-      menu={{
-        isFluid,
-        options,
-        selectedKeys: inlineDropdownSelectedKeys,
-        optionsVariant,
-        allowSearch,
-        resolveLabel,
-        resolveSecondaryLabel,
-// @ts-ignore - TS2367 - This condition will always return 'false' since the types '"small" | "medium"' and '"extraSmall"' have no overlap.
-        size: size === 'extraSmall' ? 'small' : size,
-        virtualization: menuVirtualization,
-        header,
-        footer,
-        classNames: menuClassNames,
-        showLabelTooltip,
-        allowWrap,
-      }}
-    >
-      {optionsVariant === 'checkbox' ? btnText : children}
-    </InlineDropdown>
-  );
-};
-
-// @ts-ignore - TS2345 - Argument of type '(props: SimpleInlineDropdownProps & Omit<Omit<Flow.ComponentProps<typeof InlineDropdown>, 'anchorPosition' | 'classNames' | 'size' | 'onOptionSelect' | 'onMenuOpen' | 'onMenuClose' | 'clickAwayRef' | 'elevation' | 'menu'>, keyof SimpleInlineDropdownProps>, ref: { current: null | SimpleInlineDropdownRef; } | ((arg1: ...' is not assignable to parameter of type 'ForwardRefRenderFunction<SimpleInlineDropdownProps, SimpleInlineDropdownRef>'.
-export const SimpleInlineDropdown: Flow.AbstractComponent<SimpleInlineDropdownProps, SimpleInlineDropdownRef> = React.forwardRef<SimpleInlineDropdownProps, SimpleInlineDropdownRef>(SimpleInlineDropdownBase);

package/lib/components/InlineDropdown/index.ts

@@ -1,2 +0,0 @@
-export * from './InlineDropdown';
-export * from './SimpleInlineDropdown';