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

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

@@ -1,415 +0,0 @@
-import * as React from 'react';
-
-import {
-  getButtonLabelFromSelectedKeys,
-  getSelectedKeysFromSelectedOption,
-} from '../../utils/menu';
-import type {ButtonProps} from '../Button';
-import {ANCHOR_POSITION_TYPE} from '../ButtonDropdown';
-import type {MenuOption, MenuProps} from '../Menu';
-import {MenuFooter, MenuHeader} from '../Menu/Menu.stories';
-import {ELEVATION_TYPES} from '../Tooltip';
-
-import type {InlineDropdownProps} from './InlineDropdown';
-import {InlineDropdown} from './InlineDropdown';
-
-import css from './InlineDropdown.stories.module.css';
-
-
-const anchorPositionOptions: Array<unknown> = [
-  ...Object.values(ANCHOR_POSITION_TYPE),
-];
-
-import {BUTTON_ACTION_TYPE} from '../Button';
-
-
-const elevationOptions: Array<unknown> = [...Object.values(ELEVATION_TYPES)];
-const actionTypeOptions: Array<unknown> = [...Object.values(BUTTON_ACTION_TYPE)];
-
-const textOptions: MenuOption[] = [
-  {key: '1', label: 'Option one'},
-  {key: '2', label: 'Option two'},
-  {
-    key: '3',
-    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.',
-  },
-  {
-    key: '4',
-    label: 'Option four very long option that would truncate',
-  },
-  {key: '5', label: 'Option five(disabled)', disabled: true},
-  {
-    key: '6',
-    label: 'Option six(disabled) very long option that would truncate',
-    disabled: true,
-  },
-  {key: '7', label: 'Option Seven'},
-  {key: '8', label: 'Option Eight'},
-  {key: '9', label: 'Option Night'},
-];
-
-const menuProps: MenuProps = {
-  isFluid: false,
-  menuDisabled: false,
-  size: 'medium',
-  options: textOptions,
-};
-
-const textOnlyInlineDropdownProps: ButtonProps = {
-  children: 'Button Text',
-};
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Inline Dropdown/Generic Inline Dropdown',
-  component: InlineDropdown,
-  argTypes: {
-    onClick: {
-      description:
-        '**onClick** handler that is applied to the root `<UnstyledButton>` element',
-      action: 'clicked',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    menu: {
-      description: 'Menu props to use',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: 'MenuProps'},
-      },
-    },
-    classNames: {
-      description: 'External classNames to be applied',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: '{buttonWrapper?: string, dropdownContainer?: 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'},
-      },
-    },
-    actionType: {
-      options: actionTypeOptions,
-      description:
-        'Action type of Button. Supported types are listed on the dropdown',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'submit'},
-      },
-    },
-    size: {
-      description:
-        'Inline dropdown supports only three size variants namely small and medium and extra small. `extraSmall` < `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'},
-      },
-    },
-    children: {
-      description: 'The content of the inline dropdown',
-      table: {
-        type: {summary: 'React.Component | 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.',
-      action: 'clicked',
-      table: {
-        type: {summary: '() => mixed'},
-      },
-    },
-    onMenuClose: {
-      description: '**onMenuClose** handler is triggered when menu is closed.',
-      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'},
-      },
-    },
-    clickAwayRef: {
-      type: {optional: true},
-      description: 'ref that contains the functions to open or close the child',
-      table: {
-        type: {
-          summary: 'ClickAwayRefType',
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a InlineDropdown component',
-      description: {
-        component: `
-\`\`\`js
-import { InlineDropdown } from "@spaced-out/ui-design-system/lib/components/InlineDropdown";
-\`\`\`
-Inline Dropdown is a composite component that internally implements **<a href="../?path=/docs-components-menu--docs">Menu</a>** with
-**Unstyled Button** component. It also uses **Floating UI** to position the
-menu component relative to empty space available, taking viewport and component position into account. This makes sure that menu is always visible
-irrespective of the component positioning. The component has a callback to notify the parent on option selection. Inline Dropdown is implemented inside a
-\`ClickAway\` listener and thus Menu is closed automatically on outside click.
-
-- 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.
-
-
-**Note: ** For checkbox type option set you can make use of \`getSelectedKeysFromSelectedOption\` and \`getButtonLabelFromSelectedKeys\` from \`utils/menu\`
-to populate \`selectedKeys\` and \`buttonText\` respectively.
-          `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/InlineDropdown/InlineDropdown.jsx',
-    },
-  },
-};
-
-export const _TextOnly = (args: InlineDropdownProps) => (<div className={css.menuBtnWrapper}>
-  <InlineDropdown {...args} />
-</div>);
-
-_TextOnly.args = {
-  ...textOnlyInlineDropdownProps,
-  menu: menuProps,
-  size: 'medium',
-};
-
-export const _TextWithTooltip = (args: InlineDropdownProps) => (<div className={css.menuBtnWrapper}>
-  <InlineDropdown {...args} />
-</div>);
-
-_TextWithTooltip.args = {
-  ...textOnlyInlineDropdownProps,
-  menu: {...menuProps, showLabelTooltip: {maxLines: 2}},
-  size: 'medium',
-};
-
-export const _WithSearch = (args: InlineDropdownProps) => (<div className={css.menuBtnWrapper}>
-  <InlineDropdown {...args} />
-</div>);
-
-_WithSearch.args = {
-  ...textOnlyInlineDropdownProps,
-  menu: {...menuProps, allowSearch: true},
-  size: 'medium',
-};
-
-const checkboxMenuProps: MenuProps = {
-  options: textOptions,
-  optionsVariant: 'checkbox',
-  selectedKeys: ['4'],
-  isFluid: false,
-};
-
-export const _WithCheckboxMenu = (args: InlineDropdownProps) => {
-  const [btnText, setBtnText] = React.useState('');
-  const [selectedKeys, setSelectedKeys] = React.useState(
-    args.menu?.selectedKeys || [],
-  );
-
-  React.useEffect(() => {
-    setSelectedKeys(args.menu?.selectedKeys || []);
-    const newBtnText = getButtonLabelFromSelectedKeys(
-      args.menu?.selectedKeys,
-      args.children,
-    );
-// @ts-ignore - TS2345 - Argument of type 'React.ReactNode' is not assignable to parameter of type 'SetStateAction<string>'.
-    setBtnText(newBtnText);
-  }, [args.menu?.selectedKeys]);
-
-  const handleChange = (option: MenuOption) => {
-    const newSelectedKeys = getSelectedKeysFromSelectedOption(
-      option,
-      selectedKeys,
-    );
-    const newBtnText = getButtonLabelFromSelectedKeys(
-      newSelectedKeys,
-      args.children,
-    );
-    setSelectedKeys(newSelectedKeys);
-// @ts-ignore - TS2345 - Argument of type 'React.ReactNode' is not assignable to parameter of type 'SetStateAction<string>'.
-    setBtnText(newBtnText);
-  };
-
-  return (
-    <div className={css.menuBtnWrapper}>
-      <InlineDropdown
-        {...args}
-        menu={{...args.menu, selectedKeys}}
-        onOptionSelect={handleChange}
-      >
-        {btnText}
-      </InlineDropdown>
-    </div>
-  );
-};
-
-_WithCheckboxMenu.args = {
-  children: 'Long Button Text',
-  menu: checkboxMenuProps,
-  size: 'medium',
-};
-
-const radioMenuProps: MenuProps = {
-  options: textOptions,
-  optionsVariant: 'radio',
-  selectedKeys: ['4'],
-  isFluid: false,
-};
-
-export const _WithRadioMenu = (args: InlineDropdownProps) => {
-  const [selectedKeys, setSelectedKeys] = React.useState(
-    args.menu?.selectedKeys || [],
-  );
-
-  React.useEffect(() => {
-    setSelectedKeys(args.menu?.selectedKeys || []);
-  }, [args.menu?.selectedKeys]);
-
-  const handleChange = (option: MenuOption) => {
-    setSelectedKeys([option.key]);
-  };
-
-  return (
-    <div className={css.menuBtnWrapper}>
-      <InlineDropdown
-        {...args}
-        menu={{...args.menu, selectedKeys}}
-        onOptionSelect={handleChange}
-      >
-        {args.children}
-      </InlineDropdown>
-    </div>
-  );
-};
-
-_WithRadioMenu.args = {
-  children: 'Long Button Text',
-  menu: radioMenuProps,
-};
-
-export const _WithHeaderAndFooter = (args: InlineDropdownProps) => (<WithHeaderAndFooter {...args} />);
-
-export const WithHeaderAndFooter = (args: InlineDropdownProps) => {
-  const clickAwayRef = React.useRef(null);
-  const [btnText, setBtnText] = React.useState('');
-  const [selectedKeys, setSelectedKeys] = React.useState(
-    args.menu?.selectedKeys || [],
-  );
-
-  React.useEffect(() => {
-    setSelectedKeys(args.menu?.selectedKeys || []);
-    const newBtnText = getButtonLabelFromSelectedKeys(
-      args.menu?.selectedKeys,
-      args.children,
-    );
-// @ts-ignore - TS2345 - Argument of type 'React.ReactNode' is not assignable to parameter of type 'SetStateAction<string>'.
-    setBtnText(newBtnText);
-  }, [args.menu?.selectedKeys]);
-
-  const handleChange = (option: MenuOption) => {
-    const newSelectedKeys = getSelectedKeysFromSelectedOption(
-      option,
-      selectedKeys,
-    );
-    const newBtnText = getButtonLabelFromSelectedKeys(
-      newSelectedKeys,
-      args.children,
-    );
-    setSelectedKeys(newSelectedKeys);
-// @ts-ignore - TS2345 - Argument of type 'React.ReactNode' is not assignable to parameter of type 'SetStateAction<string>'.
-    setBtnText(newBtnText);
-  };
-
-  const onSave = () => {
-    if (clickAwayRef.current) {
-// @ts-ignore - TS2339 - Property 'forceClose' does not exist on type 'never'.
-      clickAwayRef.current.forceClose();
-    }
-  };
-
-  return (
-    <div className={css.menuBtnWrapper}>
-      <InlineDropdown
-        {...args}
-        menu={{
-          ...args.menu,
-          selectedKeys,
-          header: <MenuHeader />,
-          footer: <MenuFooter onSave={onSave} />,
-        }}
-        onOptionSelect={handleChange}
-        clickAwayRef={clickAwayRef}
-      >
-        {btnText}
-      </InlineDropdown>
-    </div>
-  );
-};
-
-const menuPropsWithHeaderAndFooter: MenuProps = {
-  options: textOptions,
-  optionsVariant: 'checkbox',
-};
-
-_WithHeaderAndFooter.args = {
-  children: 'Long Button Text',
-  menu: menuPropsWithHeaderAndFooter,
-  size: 'medium',
-};

package/lib/components/InlineDropdown/InlineDropdown.tsx

@@ -1,175 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-import {
-  autoUpdate,
-  flip,
-  FloatingFocusManager,
-  FloatingPortal,
-  offset,
-  shift,
-  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 {UnstyledButtonProps} from '../Button';
-import {UnstyledButton} from '../Button';
-import type {AnchorType} from '../ButtonDropdown';
-import {Icon} from '../Icon';
-import type {MenuOption, MenuProps} from '../Menu';
-import {Menu} from '../Menu';
-import {ElevationType, getElevationValue} from '../Tooltip';
-import {Truncate} from '../Truncate';
-
-import css from './InlineDropdown.module.css';
-
-
-type ClassNames = Readonly<{
-  buttonWrapper?: string;
-  dropdownContainer?: string;
-}>;
-
-export type InlineDropdownProps = ((UnstyledButtonProps) & {
-  classNames?: ClassNames;
-  menu?: MenuProps;
-  anchorPosition?: AnchorType;
-  onOptionSelect?: (
-    option: MenuOption,
-    arg2?: React.SyntheticEvent<HTMLElement> | null | undefined,
-  ) => unknown;
-  onMenuOpen?: () => unknown;
-  onMenuClose?: () => unknown;
-  size?: 'medium' | 'small' | 'extraSmall';
-  elevation?: ElevationType;
-  clickAwayRef?: ClickAwayRefType;
-});
-
-export const InlineDropdown: Flow.AbstractComponent<InlineDropdownProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, InlineDropdownProps>((
-  {
-    anchorPosition = 'bottom-start',
-    size = 'medium',
-    onOptionSelect,
-    menu,
-    classNames,
-    disabled,
-    onMenuOpen,
-    onMenuClose,
-    children,
-    clickAwayRef,
-    elevation = 'modal',
-    ...restButtonProps
-  }: InlineDropdownProps,
-  ref,
-) => {
-  const {x, y, refs, strategy, context} = useFloating({
-    open: true,
-    strategy: 'absolute',
-// @ts-ignore - TS2322 - Type 'string' is not assignable to type 'Placement | undefined'.
-    placement: anchorPosition,
-    whileElementsMounted: autoUpdate,
-    middleware: [shift(), 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?.() : onMenuClose?.();
-  };
-
-  return (
-    <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
-      {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
-        <div
-          data-testid="InlineDropdown"
-          className={classify(
-            css.inlineDropdownContainer,
-            classNames?.dropdownContainer,
-          )}
-          ref={ref}
-        >
-          <UnstyledButton
-            {...restButtonProps}
-            disabled={disabled}
-// @ts-ignore - TS2322 - Type '((node: ReferenceType | null) => void) & ((node: ReferenceType | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
-            ref={mergeRefs([refs.setReference, triggerRef])}
-            onClick={(e) => {
-              e.stopPropagation();
-              onOpen();
-            }}
-            className={classify(
-              css.inlineButton,
-              {
-                [css.disabled]: disabled,
-              },
-              css[size],
-              classNames?.buttonWrapper,
-            )}
-          >
-            <Truncate>{children}</Truncate>
-            <Icon
-              name={isOpen ? 'caret-up' : 'caret-down'}
-              size="small"
-              type="solid"
-              className={classify({
-                [css.disabled]: disabled,
-              })}
-            />
-          </UnstyledButton>
-          {isOpen && menu && (
-            <FloatingPortal>
-              <FloatingFocusManager
-                modal={false}
-                context={context}
-// @ts-ignore - TS2322 - Type 'TriggerRefType<HTMLElement | null | undefined>' is not assignable to type 'number | MutableRefObject<HTMLElement | null> | undefined'.
-                initialFocus={triggerRef}
-              >
-                <div
-                  className={css.menuWrapper}
-// @ts-ignore - TS2322 - Type '((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
-                  ref={mergeRefs([refs.setFloating, boundaryRef])}
-                  style={{
-                    display: 'flex',
-                    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) => {
-                      onOptionSelect && onOptionSelect(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();
-                      }
-                    }}
-                    size={menu.size || 'medium'}
-                    onTabOut={clickAway}
-                  />
-                </div>
-              </FloatingFocusManager>
-            </FloatingPortal>
-          )}
-        </div>
-      )}
-    </ClickAway>
-  );
-});