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

package/lib/components/InfinitePagination/InfinitePagination.js.flow

@@ -0,0 +1,122 @@
+// @flow strict
+import * as React from 'react';
+// $FlowFixMe[nonstrict-import]
+import {FixedSizeList, VariableSizeList} from 'react-window';
+
+import {useInfiniteScroll, useResizeObserver} from '../../hooks';
+import {spaceFluid} from '../../styles/variables/_space';
+import classify from '../../utils/classify';
+import {CircularLoader} from '../CircularLoader';
+import type {GenericObject} from '../Table';
+
+import css from './InfinitePagination.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+const DEFAULT_THRESHOLD = 200;
+
+export type InfinitePaginationProps = {
+  items: Array<GenericObject>,
+  width: string,
+  threshold?: number,
+  classNames?: ClassNames,
+  renderItem: (item: GenericObject, index: number) => React.Node,
+  getItemKey?: (item: GenericObject, index: number) => string | number,
+  hasNextPage: boolean,
+  loadMoreItems: () => Promise<void>,
+  // to make Flow happy with the disjoint union isVariableSizeList is a mandatory prop
+  ...
+    | {
+        itemSize: (index: number) => number,
+        isVariableSizeList: true,
+      }
+    | {
+        itemSize: number,
+        isVariableSizeList?: false,
+      },
+};
+
+export const InfinitePagination: React$AbstractComponent<
+  InfinitePaginationProps,
+  HTMLDivElement,
+> = React.forwardRef<InfinitePaginationProps, HTMLDivElement>(
+  (props: InfinitePaginationProps, ref) => {
+    const {
+      items,
+      width = spaceFluid,
+      itemSize,
+      renderItem,
+      threshold = DEFAULT_THRESHOLD,
+      getItemKey,
+      classNames,
+      hasNextPage,
+      loadMoreItems,
+      isVariableSizeList,
+    } = props;
+    const listRef = React.useRef(null);
+    const itemsLength = items.length;
+    const totalItemsCount = itemsLength + (hasNextPage ? 1 : 0);
+    const [containerRef, containerHeight] = useResizeObserver();
+
+    React.useImperativeHandle(ref, () => listRef.current);
+    React.useEffect(() => {
+      if (listRef.current) {
+        listRef.current.scrollToItem(0);
+      }
+    }, [itemsLength === 0]);
+
+    const handleScroll = useInfiniteScroll({
+      itemSize,
+      threshold,
+      itemsLength,
+      hasNextPage,
+      loadMoreItems,
+      containerHeight,
+      isVariableSizeList,
+    });
+
+    const Row = ({index, style}) =>
+      index === itemsLength ? (
+        <div style={style} className={css.loader}>
+          <CircularLoader size="large" />
+        </div>
+      ) : (
+        <div style={style} className={css.listRow}>
+          {renderItem(items[index], index)}
+        </div>
+      );
+
+    const itemKey = React.useCallback(
+      (index) =>
+        index === itemsLength
+          ? 'loading-indicator'
+          : getItemKey
+            ? getItemKey(items[index], index)
+            : index,
+      [items, getItemKey],
+    );
+
+    const ListComponent = isVariableSizeList ? VariableSizeList : FixedSizeList;
+
+    return (
+      <div
+        ref={containerRef}
+        data-testid="InfinitePagination"
+        className={classify(css.wrapper, classNames?.wrapper)}
+      >
+        <ListComponent
+          ref={listRef}
+          width={width}
+          height={containerHeight}
+          itemKey={itemKey}
+          itemSize={itemSize}
+          onScroll={handleScroll}
+          itemCount={totalItemsCount}
+        >
+          {Row}
+        </ListComponent>
+      </div>
+    );
+  },
+);

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

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

package/lib/components/InlineDropdown/InlineDropdown.js

@@ -44,13 +44,10 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
   } = (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))]
   });
-
-  // @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 => {
     isOpen ? onMenuOpen?.() : onMenuClose?.();
@@ -71,9 +68,7 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
       className: (0, _classify.classify)(_InlineDropdownModule.default.inlineDropdownContainer, classNames?.dropdownContainer),
       ref: ref
     }, /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, restButtonProps, {
-      disabled: disabled
-      // @ts-ignore - TS2322 - Type '((node: ReferenceType | null) => void) & ((node: ReferenceType | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
-      ,
+      disabled: disabled,
       ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
       onClick: e => {
         e.stopPropagation();
@@ -91,14 +86,10 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
       })
     })), isOpen && menu && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
       modal: false,
-      context: context
-      // @ts-ignore - TS2322 - Type 'TriggerRefType<HTMLElement | null | undefined>' is not assignable to type 'number | MutableRefObject<HTMLElement | null> | undefined'.
-      ,
+      context: context,
       initialFocus: triggerRef
     }, /*#__PURE__*/React.createElement("div", {
-      className: _InlineDropdownModule.default.menuWrapper
-      // @ts-ignore - TS2322 - Type '((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
-      ,
+      className: _InlineDropdownModule.default.menuWrapper,
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         display: 'flex',

package/lib/components/InlineDropdown/InlineDropdown.js.flow

@@ -0,0 +1,181 @@
+// @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 {ClickAway, type ClickAwayRefType} 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 {type 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, ?SyntheticEvent<HTMLElement>) => mixed,
+  onMenuOpen?: () => mixed,
+  onMenuClose?: () => mixed,
+  size?: 'medium' | 'small' | 'extraSmall',
+  elevation?: ElevationType,
+  clickAwayRef?: ClickAwayRefType,
+  ...
+};
+
+export const InlineDropdown: React$AbstractComponent<
+  InlineDropdownProps,
+  HTMLDivElement,
+> = React.forwardRef<InlineDropdownProps, HTMLDivElement>(
+  (
+    {
+      anchorPosition = 'bottom-start',
+      size = 'medium',
+      onOptionSelect,
+      menu,
+      classNames,
+      disabled,
+      onMenuOpen,
+      onMenuClose,
+      children,
+      clickAwayRef,
+      elevation = 'modal',
+      ...restButtonProps
+    }: InlineDropdownProps,
+    ref,
+  ): React.Node => {
+    const {x, y, refs, strategy, context} = useFloating({
+      open: true,
+      strategy: 'absolute',
+      placement: anchorPosition,
+      whileElementsMounted: autoUpdate,
+      middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
+    });
+
+    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}
+              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}
+                  initialFocus={triggerRef}
+                >
+                  <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 || 'medium'}
+                      onTabOut={clickAway}
+                    />
+                  </div>
+                </FloatingFocusManager>
+              </FloatingPortal>
+            )}
+          </div>
+        )}
+      </ClickAway>
+    );
+  },
+);

package/lib/components/InlineDropdown/SimpleInlineDropdown.js

@@ -40,7 +40,6 @@ const SimpleInlineDropdownBase = (props, ref) => {
   React.useEffect(() => {
     const newBtnText = (0, _menu.getButtonLabelFromSelectedKeys)(selectedKeys, children);
     setInlineDropdownSelectedKeys(selectedKeys);
-    // @ts-ignore - TS2345 - Argument of type 'ReactNode' is not assignable to parameter of type 'SetStateAction<string>'.
     setBtnText(newBtnText);
   }, [selectedKeys]);
   const handleOptionChange = (selectedOption, e) => {
@@ -53,14 +52,11 @@ const SimpleInlineDropdownBase = (props, ref) => {
     }
     const newBtnText = (0, _menu.getButtonLabelFromSelectedKeys)(newSelectedKeys, children);
     setInlineDropdownSelectedKeys(newSelectedKeys);
-    // @ts-ignore - TS2345 - Argument of type '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
   }));
@@ -81,7 +77,6 @@ const SimpleInlineDropdownBase = (props, ref) => {
       allowSearch,
       resolveLabel,
       resolveSecondaryLabel,
-      // @ts-ignore - TS2367 - This condition will always return 'false' since the types '"medium" | "small"' and '"extraSmall"' have no overlap.
       size: size === 'extraSmall' ? 'small' : size,
       virtualization: menuVirtualization,
       header,
@@ -92,6 +87,4 @@ const SimpleInlineDropdownBase = (props, ref) => {
     }
   }), optionsVariant === 'checkbox' ? btnText : children);
 };
-
-// @ts-ignore - TS2345 - Argument of type '(props: SimpleInlineDropdownProps, ref: { current: null | SimpleInlineDropdownRef; } | ((arg1: null | SimpleInlineDropdownRef) => unknown)) => React.JSX.Element' is not assignable to parameter of type 'ForwardRefRenderFunction<SimpleInlineDropdownProps, SimpleInlineDropdownRef>'.
 const SimpleInlineDropdown = exports.SimpleInlineDropdown = /*#__PURE__*/React.forwardRef(SimpleInlineDropdownBase);

package/lib/components/InlineDropdown/SimpleInlineDropdown.js.flow

@@ -0,0 +1,167 @@
+// @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 {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, ?SyntheticEvent<HTMLElement>) => mixed,
+  onMenuOpen?: () => mixed,
+  onMenuClose?: () => mixed,
+  menuVirtualization?: Virtualization,
+  header?: React.Node,
+  footer?: React.Node,
+  menuClassNames?: MenuClassNames,
+
+  // Resolvers
+  resolveLabel?: (option: MenuOption) => string | React.Node,
+  resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
+  clickAwayRef?: ClickAwayRefType,
+  ...
+};
+
+const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
+  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);
+    setBtnText(newBtnText);
+  }, [selectedKeys]);
+
+  const handleOptionChange = (selectedOption: MenuOption, e) => {
+    e?.stopPropagation();
+    let newSelectedKeys = [];
+
+    if (optionsVariant === 'checkbox') {
+      newSelectedKeys = getSelectedKeysFromSelectedOption(
+        selectedOption,
+        inlineDropdownSelectedKeys,
+      );
+    } else {
+      newSelectedKeys = [selectedOption.key];
+    }
+
+    const newBtnText = getButtonLabelFromSelectedKeys(
+      newSelectedKeys,
+      children,
+    );
+
+    setInlineDropdownSelectedKeys(newSelectedKeys);
+    setBtnText(newBtnText);
+
+    setTimeout(() => {
+      onOptionSelect?.(selectedOption, e);
+    });
+  };
+
+  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,
+        size: size === 'extraSmall' ? 'small' : size,
+        virtualization: menuVirtualization,
+        header,
+        footer,
+        classNames: menuClassNames,
+        showLabelTooltip,
+        allowWrap,
+      }}
+    >
+      {optionsVariant === 'checkbox' ? btnText : children}
+    </InlineDropdown>
+  );
+};
+
+export const SimpleInlineDropdown: React.AbstractComponent<
+  SimpleInlineDropdownProps,
+  SimpleInlineDropdownRef,
+> = React.forwardRef<SimpleInlineDropdownProps, SimpleInlineDropdownRef>(
+  SimpleInlineDropdownBase,
+);

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

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

package/lib/components/Input/Input.js

@@ -73,7 +73,6 @@ const Input_ = (props, ref) => {
   };
   const handleKeyDown = e => {
     if (type === INPUT_TYPES.number && disallowExponents) {
-      // @ts-ignore - TS2345 - Argument of type 'string' is not assignable to parameter of type '"E" | "e"'.
       if (EXPONENT_CHARACTER_LIST.includes(e.key)) {
         e.preventDefault();
       }
@@ -101,12 +100,8 @@ const Input_ = (props, ref) => {
       [_InputModule.default.locked]: locked,
       [_InputModule.default.color]: type === 'color',
       [_InputModule.default.hideNumberSpinner]: hideNumberSpinner
-    }, classNames?.box)
-    // @ts-ignore - TS2322 - Type '((arg1: SyntheticEvent<HTMLElement, Event>) => unknown) | null | undefined' is not assignable to type 'MouseEventHandler<HTMLDivElement> | undefined'.
-    ,
-    onClick: !(disabled || locked) ? onContainerClick : null
-    // @ts-ignore - TS2322 - Type '((arg1?: HTMLElement | null | undefined) => unknown) | undefined' is not assignable to type 'Ref<HTMLDivElement> | undefined'.
-    ,
+    }, classNames?.box),
+    onClick: !(disabled || locked) ? onContainerClick : null,
     ref: boxRef
   }, iconLeftName && /*#__PURE__*/React.createElement(_Icon.Icon, {
     className: (0, _classify.classify)(classNames?.iconLeft),
@@ -116,18 +111,14 @@ const Input_ = (props, ref) => {
     type: iconLeftType
   }), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
     disabled: locked || disabled,
-    name: name
-    // @ts-ignore - TS2322 - Type '{ current: HTMLInputElement | null; } | ((arg1: HTMLInputElement | null) => unknown)' is not assignable to type 'Ref<HTMLInputElement> | undefined'.
-    ,
+    name: name,
     ref: ref,
     placeholder: placeholder,
     value: value,
     onChange: onChange,
     onFocus: onFocus,
     onBlur: onBlur,
-    type: showPassword ? 'text' : type
-    // @ts-ignore - TS2322 - Type 'false | "readOnly" | undefined' is not assignable to type 'boolean | undefined'.
-    ,
+    type: showPassword ? 'text' : type,
     readOnly: readOnly && 'readOnly',
     onKeyDown: handleKeyDown
   })), type === 'color' && /*#__PURE__*/React.createElement("div", {
@@ -202,6 +193,4 @@ const RightInputIcon = _ref => {
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 };
-
-// @ts-ignore - TS2345 - Argument of type '(props: InputProps, ref: { current: null | HTMLInputElement; } | ((arg1: null | HTMLInputElement) => unknown)) => React.JSX.Element' is not assignable to parameter of type 'ForwardRefRenderFunction<HTMLInputElement, InputProps>'.
 const Input = exports.Input = /*#__PURE__*/React.forwardRef(Input_);