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

package/lib/components/ButtonDropdown/ButtonDropdown.js.flow

@@ -1,226 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-import {
-  // $FlowFixMe[untyped-import]
-  autoUpdate,
-  // $FlowFixMe[untyped-import]
-  flip,
-  // $FlowFixMe[untyped-import]
-  FloatingFocusManager,
-  // $FlowFixMe[untyped-import]
-  FloatingPortal,
-  // $FlowFixMe[untyped-import]
-  offset,
-  // $FlowFixMe[untyped-import]
-  shift,
-  // $FlowFixMe[untyped-import]
-  useFloating,
-} from '@floating-ui/react';
-
-import {useReferenceElementWidth} from '../../hooks';
-import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
-import {classify} from '../../utils/classify';
-import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
-import {mergeRefs} from '../../utils/merge-refs';
-import type {ButtonProps} from '../Button';
-import {Button} from '../Button';
-import {ConditionalWrapper} from '../ConditionalWrapper';
-import type {MenuOption, MenuProps} from '../Menu';
-import {Menu} from '../Menu';
-import type {BaseTooltipProps, ElevationType} from '../Tooltip';
-import {getElevationValue, Tooltip} from '../Tooltip';
-
-import css from './ButtonDropdown.module.css';
-
-
-export const ANCHOR_POSITION_TYPE = Object.freeze({
-  top: 'top',
-  topStart: 'top-start',
-  topEnd: 'top-end',
-  bottom: 'bottom',
-  bottomStart: 'bottom-start',
-  bottomEnd: 'bottom-end',
-});
-
-export const STRATEGY_TYPE = Object.freeze({
-  absolute: 'absolute',
-  fixed: 'fixed',
-});
-
-export type AnchorType = $Values<typeof ANCHOR_POSITION_TYPE>;
-export type Strategy = $Values<typeof STRATEGY_TYPE>;
-
-type ClassNames = $ReadOnly<{
-  buttonWrapper?: string,
-  dropdownContainer?: string,
-  buttonIcon?: string,
-}>;
-
-export type ButtonDropdownProps = {
-  ...ButtonProps,
-  classNames?: ClassNames,
-  menu?: MenuProps,
-  positionStrategy?: Strategy,
-  anchorPosition?: AnchorType,
-  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
-  onMenuOpen?: () => mixed,
-  onMenuClose?: () => mixed,
-  tooltip?: BaseTooltipProps,
-  elevation?: ElevationType,
-  clickAwayRef?: ClickAwayRefType,
-  ...
-};
-
-export const ButtonDropdown: React$AbstractComponent<
-  ButtonDropdownProps,
-  HTMLDivElement,
-> = React.forwardRef<ButtonDropdownProps, HTMLDivElement>(
-  (
-    {
-      anchorPosition = 'bottom-start',
-      positionStrategy = STRATEGY_TYPE.absolute,
-      size = 'medium',
-      onOptionSelect,
-      menu,
-      classNames,
-      disabled,
-      onMenuOpen,
-      onMenuClose,
-      children,
-      iconRightName,
-      iconRightType = 'solid',
-      isFluid,
-      tooltip,
-      onClick,
-      elevation = 'modal',
-      clickAwayRef,
-      ...restButtonProps
-    }: ButtonDropdownProps,
-    forwardRef,
-  ) => {
-    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-
-    const {x, y, refs, strategy, context} = useFloating({
-      open: true,
-      strategy: positionStrategy,
-      placement: anchorPosition,
-      whileElementsMounted: autoUpdate,
-      middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
-    });
-
-    const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
-
-    const onMenuToggle = (isOpen: boolean) => {
-      if (isOpen) {
-        onMenuOpen?.();
-        setIsMenuOpen(true);
-      } else {
-        onMenuClose?.();
-        setIsMenuOpen(false);
-      }
-    };
-
-    return (
-      <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
-        {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
-          <div
-            data-testid="ButtonDropdown"
-            className={classify(
-              css.buttonDropdownContainer,
-              {
-                [css.isFluid]: isFluid === true,
-              },
-              classNames?.dropdownContainer,
-            )}
-            ref={forwardRef}
-          >
-            <ConditionalWrapper
-              condition={Boolean(tooltip)}
-              wrapper={(children) => (
-                <Tooltip
-                  {...tooltip}
-                  hidden={isMenuOpen ? true : tooltip?.hidden}
-                >
-                  {children}
-                </Tooltip>
-              )}
-            >
-              <Button
-                {...restButtonProps}
-                iconRightName={
-                  children
-                    ? iconRightName || (isOpen ? 'caret-up' : 'caret-down')
-                    : iconRightName
-                }
-                iconRightType={iconRightType}
-                disabled={disabled}
-                size={size}
-                ref={mergeRefs([refs.setReference, triggerRef])}
-                onClick={(e) => {
-                  onClick?.(e);
-                  e.stopPropagation();
-                  onOpen();
-                }}
-                isFluid={isFluid}
-                classNames={{
-                  wrapper: classNames?.buttonWrapper,
-                  icon: classNames?.buttonIcon,
-                }}
-              >
-                {children}
-              </Button>
-            </ConditionalWrapper>
-
-            {isOpen && menu && (
-              <FloatingPortal>
-                <FloatingFocusManager
-                  modal={false}
-                  context={context}
-                  initialFocus={refs.reference}
-                >
-                  <div
-                    className={css.menuWrapper}
-                    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 || size}
-                      onTabOut={clickAway}
-                    />
-                  </div>
-                </FloatingFocusManager>
-              </FloatingPortal>
-            )}
-          </div>
-        )}
-      </ClickAway>
-    );
-  },
-);

package/lib/components/ButtonDropdown/SimpleButtonDropdown.js.flow

@@ -1,169 +0,0 @@
-// @flow strict
-
-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 {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
-import type {BaseTooltipProps, ElevationType} from '../Tooltip';
-
-import type {AnchorType} from './ButtonDropdown';
-import {ButtonDropdown} from './ButtonDropdown';
-
-
-type ClassNames = $ReadOnly<{
-  buttonWrapper?: string,
-  dropdownContainer?: string,
-  buttonIcon?: string,
-}>;
-
-export type SimpleButtonDropdownRef = {
-  selectedKeys?: Array<string>,
-};
-
-export type SimpleButtonDropdownProps = {
-  // Input props
-  ...ButtonProps,
-
-  elevation?: ElevationType,
-  classNames?: ClassNames,
-  anchorPosition?: AnchorType,
-  tooltip?: BaseTooltipProps,
-
-  // Menu props
-  options?: Array<MenuOption>,
-  optionsVariant?: MenuOptionsVariant,
-  allowSearch?: boolean,
-  selectedKeys?: Array<string>,
-  menuVirtualization?: Virtualization,
-  header?: React.Node,
-  footer?: React.Node,
-  menuClassNames?: MenuClassNames,
-  showLabelTooltip?: MenuLabelTooltip,
-  allowWrap?: boolean,
-
-  // events
-  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
-  onMenuOpen?: () => mixed,
-  onMenuClose?: () => mixed,
-
-  // Resolvers
-  resolveLabel?: (option: MenuOption) => string | React.Node,
-  resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
-  clickAwayRef?: ClickAwayRefType,
-  ...
-};
-
-const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
-  const {
-    size = 'medium',
-    classNames,
-    anchorPosition,
-    options,
-    optionsVariant,
-    allowSearch,
-    selectedKeys,
-    onOptionSelect,
-    onMenuOpen,
-    onMenuClose,
-    resolveLabel,
-    resolveSecondaryLabel,
-    children,
-    isFluid,
-    menuVirtualization,
-    header,
-    footer,
-    menuClassNames,
-    showLabelTooltip,
-    allowWrap = false,
-    clickAwayRef,
-    elevation = 'modal',
-    ...buttonProps
-  } = props;
-
-  const [btnText, setBtnText] = React.useState('');
-  const [buttonDropdownSelectedKeys, setButtonDropdownSelectedKeys] =
-    React.useState(selectedKeys);
-
-  React.useEffect(() => {
-    const newBtnText = getButtonLabelFromSelectedKeys(selectedKeys, children);
-
-    setButtonDropdownSelectedKeys(selectedKeys);
-    setBtnText(newBtnText);
-  }, [selectedKeys]);
-
-  const handleOptionChange = (selectedOption: MenuOption, e) => {
-    e?.stopPropagation();
-    let newSelectedKeys = [];
-
-    if (optionsVariant === 'checkbox') {
-      newSelectedKeys = getSelectedKeysFromSelectedOption(
-        selectedOption,
-        buttonDropdownSelectedKeys,
-      );
-    } else {
-      newSelectedKeys = [selectedOption.key];
-    }
-
-    const newBtnText = getButtonLabelFromSelectedKeys(
-      newSelectedKeys,
-      children,
-    );
-
-    setButtonDropdownSelectedKeys(newSelectedKeys);
-    setBtnText(newBtnText);
-
-    setTimeout(() => {
-      onOptionSelect?.(selectedOption, e);
-    });
-  };
-
-  React.useImperativeHandle(ref, () => ({
-    selectedKeys: buttonDropdownSelectedKeys,
-  }));
-
-  return (
-    <ButtonDropdown
-      {...buttonProps}
-      anchorPosition={anchorPosition}
-      classNames={classNames}
-      size={size}
-      onOptionSelect={handleOptionChange}
-      onMenuOpen={onMenuOpen}
-      elevation={elevation}
-      onMenuClose={onMenuClose}
-      clickAwayRef={clickAwayRef}
-      menu={{
-        // TODO (Sharad): The isFluid prop here controls menu width unlike ButtonDropdown, and is independent from the isFluid prop in ButtonDropdown. There should be a way to set the isFluid prop of ButtonDropdown.
-        isFluid,
-        options,
-        selectedKeys: buttonDropdownSelectedKeys,
-        optionsVariant,
-        allowSearch,
-        resolveLabel,
-        resolveSecondaryLabel,
-        size,
-        virtualization: menuVirtualization,
-        header,
-        footer,
-        classNames: menuClassNames,
-        showLabelTooltip,
-        allowWrap,
-      }}
-    >
-      {optionsVariant === 'checkbox' ? btnText : children}
-    </ButtonDropdown>
-  );
-};
-
-export const SimpleButtonDropdown: React.AbstractComponent<
-  SimpleButtonDropdownProps,
-  SimpleButtonDropdownRef,
-> = React.forwardRef<SimpleButtonDropdownProps, SimpleButtonDropdownRef>(
-  SimpleButtonDropdownBase,
-);

package/lib/components/ButtonDropdown/index.js.flow

@@ -1,4 +0,0 @@
-// @flow strict
-
-export * from './ButtonDropdown';
-export * from './SimpleButtonDropdown';

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.js.flow

@@ -1,82 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import classify from '../../../utils/classify';
-import {Button} from '../../Button';
-import type {IconType} from '../../Icon';
-
-import css from './ButtonTab.module.css';
-
-
-type ClassNames = $ReadOnly<{wrapper?: string}>;
-
-export type ButtonTabProps = {
-  classNames?: ClassNames,
-  children?: React.Node,
-  disabled?: boolean,
-  onButtonTabSelect?: ?(id: string, e?: ?SyntheticEvent<HTMLElement>) => mixed,
-  iconName?: string,
-  iconType?: IconType,
-  size?: 'medium' | 'small',
-  isFluid?: boolean,
-  ariaLabel?: string,
-  id: string,
-  selectedButtonTabId?: string,
-  isLoading?: boolean,
-  isLeftCurved?: boolean,
-  isRightCurved?: boolean,
-  ...
-};
-
-export const ButtonTab: React$AbstractComponent<
-  ButtonTabProps,
-  HTMLButtonElement,
-> = React.forwardRef<ButtonTabProps, HTMLButtonElement>(
-  (
-    {
-      classNames,
-      children,
-      iconName,
-      iconType = 'regular',
-      size,
-      onButtonTabSelect,
-      id,
-      selectedButtonTabId,
-      disabled,
-      isLeftCurved,
-      isRightCurved,
-      ...props
-    }: ButtonTabProps,
-    ref,
-  ): React.Node => (
-    <Button
-      {...props}
-      disabled={disabled}
-      size={size}
-      type="tertiary"
-      ref={ref}
-      classNames={{
-        wrapper: classify(
-          css.buttonTabWrapper,
-          {
-            [css.mediumButtonTab]: size === 'medium',
-            [css.smallButtonTab]: size === 'small',
-            [css.onlyIcon]: iconName && !children,
-            [css.isSelected]: id === selectedButtonTabId,
-            [css.disabled]: disabled,
-            [css.leftCurved]: isLeftCurved,
-            [css.rightCurved]: isRightCurved,
-          },
-          classNames?.wrapper,
-        ),
-        icon: css.icon,
-      }}
-      iconLeftName={iconName}
-      iconLeftType={iconType}
-      onClick={(e) => onButtonTabSelect && onButtonTabSelect(id, e)}
-    >
-      {children}
-    </Button>
-  ),
-);

package/lib/components/ButtonTabs/ButtonTab/index.js.flow

@@ -1,3 +0,0 @@
-// @flow strict
-
-export * from './ButtonTab';

package/lib/components/ButtonTabs/ButtonTabDropdown.js.flow

@@ -1,150 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-import {
-  // $FlowFixMe[untyped-import]
-  autoUpdate,
-  // $FlowFixMe[untyped-import]
-  flip,
-  // $FlowFixMe[untyped-import]
-  FloatingFocusManager,
-  // $FlowFixMe[untyped-import]
-  FloatingPortal,
-  // $FlowFixMe[untyped-import]
-  offset,
-  // $FlowFixMe[untyped-import]
-  shift,
-  // $FlowFixMe[untyped-import]
-  useFloating,
-} from '@floating-ui/react';
-import {includes} from 'lodash';
-
-import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
-import classify from '../../utils/classify';
-import {ClickAway} from '../../utils/click-away';
-import {mergeRefs} from '../../utils/merge-refs';
-import type {AnchorType} from '../ButtonDropdown';
-import {Menu} from '../Menu';
-import type {ElevationType} from '../Tooltip';
-import {getElevationValue} from '../Tooltip';
-
-import type {ButtonTabProps} from './ButtonTab';
-import {ButtonTab} from './ButtonTab';
-
-import css from './ButtonTabDropdown.module.css';
-
-
-export type ButtonTabDropdownProps = {
-  ...ButtonTabProps,
-  title: string,
-  elevation?: ElevationType,
-  dropdownClass?: string,
-  anchorPosition?: AnchorType,
-  ...
-};
-
-export const ButtonTabDropdown = ({
-  title,
-  elevation = 'modal',
-  anchorPosition = 'bottom-end',
-  ...buttonTabProps
-}: ButtonTabDropdownProps): React.Node => {
-  const {
-    size,
-    children,
-    selectedButtonTabId,
-    onButtonTabSelect: onTabSelect,
-    dropdownClass,
-  } = buttonTabProps;
-  const childrenArray = React.Children.toArray(children);
-  const menuOptions = childrenArray.map((child) => {
-    const {
-      id,
-      children,
-      disabled,
-      iconName,
-      iconType,
-      classNames,
-      size: buttonSize,
-    } = child.props;
-    return {
-      key: id,
-      disabled,
-      classNames,
-      label: children,
-      iconLeft: iconName,
-      iconLeftType: iconType,
-      customComponent: children,
-      optionSize: buttonSize ?? size,
-    };
-  });
-  const moreTabSelectedId = includes(
-    menuOptions.map(({key}) => key),
-    selectedButtonTabId,
-  )
-    ? 'more-tab'
-    : selectedButtonTabId;
-
-  const {x, y, refs, strategy, context} = useFloating({
-    open: true,
-    strategy: 'absolute',
-    placement: anchorPosition,
-    whileElementsMounted: autoUpdate,
-    middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
-  });
-
-  return (
-    <ClickAway>
-      {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
-        <div
-          data-testid="ButtonTabDropdown"
-          className={classify(css.buttonTabDropDownWrapper, dropdownClass)}
-        >
-          <ButtonTab
-            {...buttonTabProps}
-            ref={mergeRefs([refs.setReference, triggerRef])}
-            selectedButtonTabId={moreTabSelectedId}
-            onButtonTabSelect={(id, e) => {
-              e?.stopPropagation();
-              onOpen();
-            }}
-          >
-            {title}
-          </ButtonTab>
-          {isOpen && (
-            <FloatingPortal>
-              <FloatingFocusManager
-                modal={false}
-                context={context}
-                initialFocus={refs.reference}
-              >
-                <div
-                  className={css.menuWrapper}
-                  ref={mergeRefs([refs.setFloating, boundaryRef])}
-                  style={{
-                    display: 'flex',
-                    position: strategy,
-                    top: y ?? spaceNone,
-                    left: x ?? spaceNone,
-                    '--menu-elevation': getElevationValue(elevation),
-                  }}
-                >
-                  <Menu
-                    onSelect={(option, e) => {
-                      onTabSelect && onTabSelect(option.key, e);
-                      clickAway();
-                    }}
-                    size={size}
-                    options={menuOptions}
-                    onTabOut={clickAway}
-                    selectedKeys={[selectedButtonTabId ?? '']}
-                  />
-                </div>
-              </FloatingFocusManager>
-            </FloatingPortal>
-          )}
-        </div>
-      )}
-    </ClickAway>
-  );
-};