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

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -61,15 +61,11 @@ const ButtonDropdown = exports.ButtonDropdown = /*#__PURE__*/React.forwardRef((_
     context
   } = (0, _react2.useFloating)({
     open: true,
-    // @ts-ignore - TS2322 - Type 'string' is not assignable to type 'Strategy | undefined'.
     strategy: positionStrategy,
-    // @ts-ignore - TS2322 - Type 'string' is not assignable to type 'Placement | undefined'.
     placement: anchorPosition,
     whileElementsMounted: _react2.autoUpdate,
     middleware: [(0, _react2.shift)(), (0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
   });
-
-  // @ts-ignore - TS2345 - Argument of type '(ReferenceType & ReferenceType) | null' is not assignable to parameter of type 'HTMLElement | null | undefined'.
   const dropdownWidth = (0, _hooks.useReferenceElementWidth)(refs.reference?.current);
   const onMenuToggle = isOpen => {
     if (isOpen) {
@@ -106,9 +102,7 @@ const ButtonDropdown = exports.ButtonDropdown = /*#__PURE__*/React.forwardRef((_
       iconRightName: children ? iconRightName || (isOpen ? 'caret-up' : 'caret-down') : iconRightName,
       iconRightType: iconRightType,
       disabled: disabled,
-      size: size
-      // @ts-ignore - TS2322 - Type '((node: ReferenceType | null) => void) & ((node: ReferenceType | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
-      ,
+      size: size,
       ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
       onClick: e => {
         onClick?.(e);
@@ -122,14 +116,10 @@ const ButtonDropdown = exports.ButtonDropdown = /*#__PURE__*/React.forwardRef((_
       }
     }), children)), isOpen && menu && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.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'.
-      ,
+      context: context,
       initialFocus: refs.reference
     }, /*#__PURE__*/React.createElement("div", {
-      className: _ButtonDropdownModule.default.menuWrapper
-      // @ts-ignore - TS2322 - Type '((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
-      ,
+      className: _ButtonDropdownModule.default.menuWrapper,
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         display: 'flex',

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

@@ -0,0 +1,226 @@
+// @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

@@ -40,7 +40,6 @@ const SimpleButtonDropdownBase = (props, ref) => {
   React.useEffect(() => {
     const newBtnText = (0, _menu.getButtonLabelFromSelectedKeys)(selectedKeys, children);
     setButtonDropdownSelectedKeys(selectedKeys);
-    // @ts-ignore - TS2345 - Argument of type 'React.ReactNode' is not assignable to parameter of type 'SetStateAction<string>'.
     setBtnText(newBtnText);
   }, [selectedKeys]);
   const handleOptionChange = (selectedOption, e) => {
@@ -53,14 +52,11 @@ const SimpleButtonDropdownBase = (props, ref) => {
     }
     const newBtnText = (0, _menu.getButtonLabelFromSelectedKeys)(newSelectedKeys, children);
     setButtonDropdownSelectedKeys(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: SimpleButtonDropdownRef | null; } | ((arg1: SimpleButtonDropdownRef | null) => unknown)' is not assignable to parameter of type 'Ref<SimpleButtonDropdownRef> | undefined'.
   React.useImperativeHandle(ref, () => ({
     selectedKeys: buttonDropdownSelectedKeys
   }));
@@ -92,6 +88,4 @@ const SimpleButtonDropdownBase = (props, ref) => {
     }
   }), optionsVariant === 'checkbox' ? btnText : children);
 };
-
-// @ts-ignore - TS2345 - Argument of type '(props: SimpleButtonDropdownProps & Omit<Omit<Flow.ComponentProps<typeof ButtonDropdown>, 'anchorPosition' | 'classNames' | 'size' | 'onOptionSelect' | 'onMenuOpen' | 'elevation' | 'onMenuClose' | 'clickAwayRef' | 'menu'>, keyof SimpleButtonDropdownProps>, ref: { current: null | SimpleButtonDropdownRef; } | ((arg1: ...' is not assignable to parameter of type 'ForwardRefRenderFunction<SimpleButtonDropdownProps, SimpleButtonDropdownRef>'.
 const SimpleButtonDropdown = exports.SimpleButtonDropdown = /*#__PURE__*/React.forwardRef(SimpleButtonDropdownBase);

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

@@ -0,0 +1,169 @@
+// @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

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

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

@@ -0,0 +1,82 @@
+// @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

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

package/lib/components/ButtonTabs/ButtonTabDropdown.js

@@ -42,7 +42,6 @@ const ButtonTabDropdown = _ref => {
       iconType,
       classNames,
       size: buttonSize
-      // @ts-ignore - TS2339 - Property 'props' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<React.ReactNode> | ReactPortal | Promise<...>'.
     } = child.props;
     return {
       key: id,
@@ -70,7 +69,6 @@ const ButtonTabDropdown = _ref => {
   } = (0, _react2.useFloating)({
     open: true,
     strategy: 'absolute',
-    // @ts-ignore - TS2322 - Type 'string' is not assignable to type 'Placement | undefined'.
     placement: anchorPosition,
     whileElementsMounted: _react2.autoUpdate,
     middleware: [(0, _react2.shift)(), (0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
@@ -87,25 +85,18 @@ const ButtonTabDropdown = _ref => {
       "data-testid": "ButtonTabDropdown",
       className: (0, _classify.default)(_ButtonTabDropdownModule.default.buttonTabDropDownWrapper, dropdownClass)
     }, /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, _extends({}, buttonTabProps, {
-      // @ts-ignore - TS2322 - Type '((node: ReferenceType | null) => void) & ((node: ReferenceType | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
       ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
-      selectedButtonTabId: moreTabSelectedId
-      // @ts-ignore - TS6133 - 'id' is declared but its value is never read.
-      ,
+      selectedButtonTabId: moreTabSelectedId,
       onButtonTabSelect: (id, e) => {
         e?.stopPropagation();
         onOpen();
       }
     }), title), isOpen && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.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'.
-      ,
+      context: context,
       initialFocus: refs.reference
     }, /*#__PURE__*/React.createElement("div", {
-      className: _ButtonTabDropdownModule.default.menuWrapper
-      // @ts-ignore - TS2322 - Type '((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
-      ,
+      className: _ButtonTabDropdownModule.default.menuWrapper,
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         display: 'flex',