@spaced-out/ui-design-system 0.3.41 → 0.3.43

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';

package/lib/components/InfinitePagination/index.js

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

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

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

package/lib/components/Modal/Modal.d.ts

@@ -13,6 +13,7 @@ import {
   motionDurationNormal,
   motionDurationSlow,
 } from '../../styles/variables/_motion';
+import {opacity0, opacity100} from '../../styles/variables/_opacity';
 import {spaceNegHalfFluid} from '../../styles/variables/_space';
 import classify from '../../utils/classify';
 import {uuid} from '../../utils/helpers';
@@ -82,12 +83,15 @@ const DEFAULT_MODAL_ANIMATION = {
   },
   initial: {
     transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(0.95)`,
+    opacity: opacity0,
   },
   open: {
     transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(1)`,
+    opacity: opacity100,
   },
   close: {
     transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(0.95)`,
+    opacity: opacity0,
   },
 };
 export const ModalHeader = ({
@@ -270,7 +274,7 @@ export const Modal = ({
     };
   }, [isOpen, onClose]);
 
-  if (!isTransitioning && !isOpen) {
+  if (!isOpen && !isMounted) {
     // Check overflow after resetting the DOM for modal. This should always happen after DOM reset
     // TODO(Nishant): Better way to do this?
     setTimeout(() => {
@@ -311,6 +315,10 @@ export const Modal = ({
               classNames?.backdrop,
             )}
             onClick={onBackdropClick}
+            style={{
+              opacity: styles?.opacity,
+              transition: styles?.transition,
+            }}
           />
         )}
 

package/lib/components/Modal/Modal.js

@@ -9,6 +9,7 @@ var _reactDom = require("react-dom");
 var _react2 = require("@floating-ui/react");
 var _useMountTransition = _interopRequireDefault(require("../../hooks/useMountTransition"));
 var _motion = require("../../styles/variables/_motion");
+var _opacity = require("../../styles/variables/_opacity");
 var _space = require("../../styles/variables/_space");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _helpers = require("../../utils/helpers");
@@ -25,13 +26,16 @@ const DEFAULT_MODAL_ANIMATION = {
     close: parseInt(_motion.motionDurationNormal)
   },
   initial: {
-    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(0.95)`
+    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(0.95)`,
+    opacity: _opacity.opacity0
   },
   open: {
-    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(1)`
+    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(1)`,
+    opacity: _opacity.opacity100
   },
   close: {
-    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(0.95)`
+    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(0.95)`,
+    opacity: _opacity.opacity0
   }
 };
 const ModalHeader = _ref => {
@@ -193,7 +197,7 @@ const Modal = _ref4 => {
       window.removeEventListener('keyup', onKeyPress);
     };
   }, [isOpen, onClose]);
-  if (!isTransitioning && !isOpen) {
+  if (!isOpen && !isMounted) {
     // Check overflow after resetting the DOM for modal. This should always happen after DOM reset
     // TODO(Nishant): Better way to do this?
     setTimeout(() => {
@@ -222,7 +226,11 @@ const Modal = _ref4 => {
     className: (0, _classify.default)(_ModalModule.default.backdrop, {
       [_ModalModule.default.darkBackdrop]: !hideBackdrop
     }, classNames?.backdrop),
-    onClick: onBackdropClick
+    onClick: onBackdropClick,
+    style: {
+      opacity: styles?.opacity,
+      transition: styles?.transition
+    }
   }), isMounted && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ModalModule.default.modal, {
       [_ModalModule.default.small]: size === 'small',

package/lib/components/Modal/Modal.js.flow

@@ -17,6 +17,7 @@ import {
   motionDurationNormal,
   motionDurationSlow,
 } from '../../styles/variables/_motion';
+import {opacity0, opacity100} from '../../styles/variables/_opacity';
 import {spaceNegHalfFluid} from '../../styles/variables/_space';
 import classify from '../../utils/classify';
 import {uuid} from '../../utils/helpers';
@@ -88,12 +89,15 @@ const DEFAULT_MODAL_ANIMATION = {
   },
   initial: {
     transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(0.95)`,
+    opacity: opacity0,
   },
   open: {
     transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(1)`,
+    opacity: opacity100,
   },
   close: {
     transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(0.95)`,
+    opacity: opacity0,
   },
 };
 
@@ -276,7 +280,7 @@ export const Modal = ({
     };
   }, [isOpen, onClose]);
 
-  if (!isTransitioning && !isOpen) {
+  if (!isOpen && !isMounted) {
     // Check overflow after resetting the DOM for modal. This should always happen after DOM reset
     // TODO(Nishant): Better way to do this?
     setTimeout(() => {
@@ -318,6 +322,10 @@ export const Modal = ({
               classNames?.backdrop,
             )}
             onClick={onBackdropClick}
+            style={{
+              opacity: styles?.opacity,
+              transition: styles?.transition,
+            }}
           />
         )}
 

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

@@ -232,8 +232,8 @@ export const TABLE_DOCS = {
     },
   },
   parameters: {
-    componentSubtitle: 'Generates a Table component.',
     docs: {
+      subtitle: 'Generates a Table component.',
       description: {
         component: `
 \`\`\`js

package/lib/components/Table/Table.docs.js

@@ -224,8 +224,8 @@ const TABLE_DOCS = {
     }
   },
   parameters: {
-    componentSubtitle: 'Generates a Table component.',
     docs: {
+      subtitle: 'Generates a Table component.',
       description: {
         component: `
 \`\`\`js

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

@@ -183,8 +183,8 @@ export const TABLE_DOCS = {
     },
   },
   parameters: {
-    componentSubtitle: 'Generates a Table component.',
     docs: {
+      subtitle: 'Generates a Table component.',
       description: {
         component: `
 \`\`\`js

package/lib/components/TokenListInput/TokenValueChips.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {elevationMenu} from '../../styles/variables/_elevation';
 import {Chip} from '../Chip';
 import {Tooltip} from '../Tooltip';
 type Props<T> = {
@@ -23,7 +24,7 @@ function defaultResolveTokenValue<T>({
   // $FlowFixMe[prop-missing] - assumes token has label and key
   return (
     // $FlowFixMe - assumes token has label and key
-    <Tooltip body={token?.label}>
+    <Tooltip body={token?.label} elevation={elevationMenu}>
       <Chip // $FlowFixMe - assumes token has key
         key={token?.key}
         onDismiss={(_) => onDismiss?.(token)}

package/lib/components/TokenListInput/TokenValueChips.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TokenValueChips = TokenValueChips;
 var React = _interopRequireWildcard(require("react"));
+var _elevation = require("../../styles/variables/_elevation");
 var _Chip = require("../Chip");
 var _Tooltip = require("../Tooltip");
 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); }
@@ -22,7 +23,8 @@ function defaultResolveTokenValue(_ref) {
     /*#__PURE__*/
     // $FlowFixMe - assumes token has label and key
     React.createElement(_Tooltip.Tooltip, {
-      body: token?.label
+      body: token?.label,
+      elevation: _elevation.elevationMenu
     }, /*#__PURE__*/React.createElement(_Chip.Chip
     // $FlowFixMe - assumes token has key
     , {

package/lib/components/TokenListInput/TokenValueChips.js.flow

@@ -1,6 +1,7 @@
 // @flow strict
 import * as React from 'react';
 
+import {elevationMenu} from '../../styles/variables/_elevation';
 import {Chip} from '../Chip';
 import {Tooltip} from '../Tooltip';
 
@@ -29,7 +30,7 @@ function defaultResolveTokenValue<T>({
 
   return (
     // $FlowFixMe - assumes token has label and key
-    <Tooltip body={token?.label}>
+    <Tooltip body={token?.label} elevation={elevationMenu}>
       <Chip
         // $FlowFixMe - assumes token has key
         key={token?.key}

package/lib/components/index.d.ts

@@ -22,12 +22,14 @@ export * from './Dropdown';
 export * from './EmptyState';
 export * from './ErrorMessage';
 export * from './FileUpload';
+export * from './FilterButtonOverlay';
 export * from './FocusManager';
 export * from './FocusManagerWithArrowKeyNavigation';
 export * from './FormTitleWrapper';
 export * from './Grid';
 export * from './Icon';
 export * from './InContextAlert';
+export * from './InfinitePagination';
 export * from './InlineDropdown';
 export * from './Input';
 export * from './KPIBox';