@spaced-out/ui-design-system 0.3.42 → 0.3.44

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.js.flow

@@ -0,0 +1,135 @@
+// @flow strict
+
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  autoUpdate,
+  // $FlowFixMe[untyped-import]
+  flip,
+  // $FlowFixMe[untyped-import]
+  offset,
+  // $FlowFixMe[untyped-import]
+  shift,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react';
+
+import {sizeFluid} from '../../styles/variables/_size';
+import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
+import type {ClickAwayRefType} from '../../utils';
+import {ClickAway, mergeRefs} from '../../utils';
+import classify from '../../utils/classify';
+import type {ButtonProps, ButtonSize} from '../Button';
+import {Button} from '../Button';
+import type {AnchorType, Strategy} from '../ButtonDropdown';
+import {ANCHOR_POSITION_TYPE, STRATEGY_TYPE} from '../ButtonDropdown';
+
+import css from './FilterButtonOverlay.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string, overlayContainer?: string}>;
+export type FilterButtonOverlaySizeTypes = 'medium' | 'small';
+
+export type NewButtonProps = $Diff<ButtonProps, {children?: React.Node}>;
+
+export type FilterButtonOverlayProps = {
+  ...NewButtonProps,
+  classNames?: ClassNames,
+  children: React.Node,
+  positionStrategy?: Strategy,
+  anchorPosition?: AnchorType,
+  clickAwayRef?: ClickAwayRefType,
+  isFluid?: boolean,
+  size?: FilterButtonOverlaySizeTypes,
+  buttonLabel?: React.Node,
+  buttonSize?: ButtonSize,
+  buttonIsFluid?: boolean,
+  ...
+};
+
+export const FilterButtonOverlay: React$AbstractComponent<
+  FilterButtonOverlayProps,
+  HTMLDivElement,
+> = React.forwardRef<FilterButtonOverlayProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      anchorPosition = ANCHOR_POSITION_TYPE.bottomStart,
+      positionStrategy = STRATEGY_TYPE.absolute,
+      clickAwayRef,
+      size,
+      children,
+      isFluid,
+      buttonLabel,
+      buttonIsFluid,
+      buttonSize,
+      ...restProps
+    }: FilterButtonOverlayProps,
+    ref,
+  ) => {
+    const {x, y, refs, strategy} = useFloating({
+      open: true,
+      strategy: positionStrategy,
+      placement: anchorPosition,
+      whileElementsMounted: autoUpdate,
+      middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
+    });
+
+    return (
+      <ClickAway clickAwayRef={clickAwayRef} closeOnEscapeKeypress>
+        {({isOpen, onOpen, boundaryRef, triggerRef}) => (
+          <div
+            data-testid="FilterButtonOverlay"
+            className={classify(
+              {
+                [css.isFluid]: buttonIsFluid,
+              },
+              classNames?.wrapper,
+            )}
+            ref={ref}
+          >
+            <Button
+              {...restProps}
+              ref={mergeRefs([refs.setReference, triggerRef])}
+              onClick={(e) => {
+                e.stopPropagation();
+                onOpen();
+              }}
+              isFluid={buttonIsFluid}
+              size={buttonSize}
+            >
+              {buttonLabel}
+            </Button>
+
+            {isOpen && (
+              <div
+                ref={mergeRefs([refs.setFloating, boundaryRef])}
+                style={{
+                  display: 'flex',
+                  position: strategy,
+                  top: y ?? spaceNone,
+                  left: x ?? spaceNone,
+                  ...(isFluid && {width: sizeFluid}),
+                }}
+              >
+                <div
+                  className={classify(
+                    css.overlayWrapper,
+                    {
+                      [css.fluid]: isFluid,
+                      [css.medium]: size === 'medium',
+                      [css.small]: size === 'small',
+                    },
+                    classNames?.overlayContainer,
+                  )}
+                >
+                  {children}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </ClickAway>
+    );
+  },
+);

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.module.css

@@ -0,0 +1,35 @@
+@value (colorBackgroundTertiary) from '../../styles/variables/_color.css';
+@value (size160, sizeFluid, size300, size240) from '../../styles/variables/_size.css';
+@value (borderRadiusMedium) from '../../styles/variables/_border.css';
+@value (elevationMenu) from '../../styles/variables/_elevation.css';
+
+.overlayWrapper {
+  position: relative;
+  composes: boxShadow2 from '../../styles/shadow.module.css';
+  composes: borderPrimary from '../../styles/border.module.css';
+  background-color: colorBackgroundTertiary;
+  display: flex;
+  flex-flow: column;
+  min-width: size160;
+  border-radius: borderRadiusMedium;
+  z-index: elevationMenu;
+}
+
+.fluid {
+  width: sizeFluid;
+  min-width: size160;
+}
+
+.medium {
+  width: size300;
+  min-width: size300;
+}
+
+.small {
+  width: size240;
+  min-width: size240;
+}
+
+.isFluid {
+  width: sizeFluid;
+}

package/lib/components/FilterButtonOverlay/index.d.ts

@@ -0,0 +1 @@
+export * from './FilterButtonOverlay';

package/lib/components/FilterButtonOverlay/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _FilterButtonOverlay = require("./FilterButtonOverlay");
+Object.keys(_FilterButtonOverlay).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FilterButtonOverlay[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FilterButtonOverlay[key];
+    }
+  });
+});

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

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

package/lib/components/Icon/ClickableIcon.d.ts

@@ -58,9 +58,10 @@ export const ClickableIcon: React$AbstractComponent<
         ref={ref}
       >
         <Icon
+          {...props}
           size={size}
+          color={disabled ? TEXT_COLORS.disabled : props.color}
           className={classNames?.icon || className}
-          {...props}
         />
       </UnstyledButton>
     );

package/lib/components/Icon/ClickableIcon.js

@@ -42,10 +42,11 @@ const ClickableIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [_ClickableIconModule.default.large]: size === 'large'
     }, classNames?.button),
     ref: ref
-  }), /*#__PURE__*/React.createElement(_.Icon, _extends({
+  }), /*#__PURE__*/React.createElement(_.Icon, _extends({}, props, {
     size: size,
+    color: disabled ? _Text.TEXT_COLORS.disabled : props.color,
     className: classNames?.icon || className
-  }, props)));
+  })));
 });
 exports.ClickableIcon = ClickableIcon;
 const CloseIcon = /*#__PURE__*/React.forwardRef((_ref2, ref) => {

package/lib/components/Icon/ClickableIcon.js.flow

@@ -65,9 +65,10 @@ export const ClickableIcon: React$AbstractComponent<
         ref={ref}
       >
         <Icon
+          {...props}
           size={size}
+          color={disabled ? TEXT_COLORS.disabled : props.color}
           className={classNames?.icon || className}
-          {...props}
         />
       </UnstyledButton>
     );

package/lib/components/Icon/ClickableIcon.module.css

@@ -54,12 +54,12 @@ button {
   border-radius: borderRadiusXSmall;
 }
 
-.button:focus {
+.button:focus-visible:not(:disabled) {
   box-shadow: borderWidthNone borderWidthNone borderWidthNone
     borderWidthTertiary colorFocusPrimary;
 }
 
-.button:hover {
+.button:hover:not(:disabled) {
   background-color: colorButtonFillGhostPressed;
   color: colorTextPrimary;
 }

package/lib/components/Icon/Icon.docs.d.ts

@@ -100,6 +100,20 @@ export const ICON_DOCS = {
         },
       },
     },
+    disabled: {
+      description: 'If **true**, the clickable icon is disabled',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
     ariaLabel: {
       control: {
         type: 'text',
@@ -114,8 +128,8 @@ export const ICON_DOCS = {
     },
   },
   parameters: {
-    componentSubtitle: 'Generates a Icon component',
     docs: {
+      subtitle: 'Generates a Icon component',
       description: {
         component: `
 \`\`\`js

package/lib/components/Icon/Icon.docs.js

@@ -104,6 +104,20 @@ const ICON_DOCS = {
         }
       }
     },
+    disabled: {
+      description: 'If **true**, the clickable icon is disabled',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
     ariaLabel: {
       control: {
         type: 'text'
@@ -117,8 +131,8 @@ const ICON_DOCS = {
     }
   },
   parameters: {
-    componentSubtitle: 'Generates a Icon component',
     docs: {
+      subtitle: 'Generates a Icon component',
       description: {
         component: `
 \`\`\`js

package/lib/components/Icon/Icon.docs.js.flow

@@ -74,6 +74,16 @@ export const ICON_DOCS = {
         type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
       },
     },
+    disabled: {
+      description: 'If **true**, the clickable icon is disabled',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: {summary: 'boolean'},
+        defaultValue: {summary: 'false'},
+      },
+    },
     ariaLabel: {
       control: {
         type: 'text',
@@ -86,8 +96,8 @@ export const ICON_DOCS = {
     },
   },
   parameters: {
-    componentSubtitle: 'Generates a Icon component',
     docs: {
+      subtitle: 'Generates a Icon component',
       description: {
         component: `
 \`\`\`js

package/lib/components/InfinitePagination/InfinitePagination.d.ts

@@ -0,0 +1,112 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+// @ts-expect-error[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 = (
+  | {
+      itemSize: (index: number) => number;
+      isVariableSizeList: true;
+    }
+  | {
+      itemSize: number;
+      isVariableSizeList?: false;
+    }
+) & {
+  items: Array<GenericObject>;
+  width: string;
+  threshold?: number;
+  classNames?: ClassNames;
+  renderItem: (item: GenericObject, index: number) => React.ReactNode;
+  getItemKey?: (item: GenericObject, index: number) => string | number;
+  hasNextPage: boolean;
+  loadMoreItems: () => Promise<void>;
+};
+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/InfinitePagination.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InfinitePagination = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactWindow = require("react-window");
+var _hooks = require("../../hooks");
+var _space = require("../../styles/variables/_space");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _CircularLoader = require("../CircularLoader");
+var _InfinitePaginationModule = _interopRequireDefault(require("./InfinitePagination.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// $FlowFixMe[nonstrict-import]
+
+const DEFAULT_THRESHOLD = 200;
+const InfinitePagination = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    items,
+    width = _space.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] = (0, _hooks.useResizeObserver)();
+  React.useImperativeHandle(ref, () => listRef.current);
+  React.useEffect(() => {
+    if (listRef.current) {
+      listRef.current.scrollToItem(0);
+    }
+  }, [itemsLength === 0]);
+  const handleScroll = (0, _hooks.useInfiniteScroll)({
+    itemSize,
+    threshold,
+    itemsLength,
+    hasNextPage,
+    loadMoreItems,
+    containerHeight,
+    isVariableSizeList
+  });
+  const Row = _ref => {
+    let {
+      index,
+      style
+    } = _ref;
+    return index === itemsLength ? /*#__PURE__*/React.createElement("div", {
+      style: style,
+      className: _InfinitePaginationModule.default.loader
+    }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
+      size: "large"
+    })) : /*#__PURE__*/React.createElement("div", {
+      style: style,
+      className: _InfinitePaginationModule.default.listRow
+    }, renderItem(items[index], index));
+  };
+  const itemKey = React.useCallback(index => index === itemsLength ? 'loading-indicator' : getItemKey ? getItemKey(items[index], index) : index, [items, getItemKey]);
+  const ListComponent = isVariableSizeList ? _reactWindow.VariableSizeList : _reactWindow.FixedSizeList;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    "data-testid": "InfinitePagination",
+    className: (0, _classify.default)(_InfinitePaginationModule.default.wrapper, classNames?.wrapper)
+  }, /*#__PURE__*/React.createElement(ListComponent, {
+    ref: listRef,
+    width: width,
+    height: containerHeight,
+    itemKey: itemKey,
+    itemSize: itemSize,
+    onScroll: handleScroll,
+    itemCount: totalItemsCount
+  }, Row));
+});
+exports.InfinitePagination = InfinitePagination;

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/InfinitePagination.module.css

@@ -0,0 +1,18 @@
+@value (
+  spaceFluid
+) from '../../styles/variables/_space.css';
+
+.wrapper {
+  display: flex;
+  height: spaceFluid;
+}
+
+.loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.listRow {
+  box-sizing: border-box;
+}

package/lib/components/InfinitePagination/index.d.ts

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