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

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/SemanticAIIcon/BadgedIcon.d.ts

@@ -0,0 +1,70 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import {TEXT_COLORS} from '../../types/typography';
+import classify from '../../utils/classify';
+import type {IconSize, IconType} from '../Icon';
+import {Icon} from '../Icon';
+import typographyStyle from '../../styles/typography.module.css';
+import css from './BadgedIcon.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+  icon?: string;
+  badgeIcon?: string;
+}>;
+export type BadgedIconProps = {
+  type?: IconType;
+  name: string;
+  size?: IconSize;
+  ariaLabel?: string;
+  showBadge?: boolean;
+  classNames?: ClassNames;
+};
+export const BadgedIcon = ({
+  name,
+  showBadge = true,
+  classNames,
+  size = 'medium',
+  type = 'solid',
+  ariaLabel,
+}: BadgedIconProps): React.ReactNode => (
+  <>
+    {!!name && (
+      <div
+        className={classify(css.iconContainer, css[size], classNames?.wrapper)}
+      >
+        <Icon
+          ariaLabel={ariaLabel}
+          name={name}
+          className={classNames?.icon}
+          name={name}
+          size={size === 'large' ? 'medium' : size}
+          type={type}
+          color={TEXT_COLORS.clickable}
+        />
+        {showBadge && <BadgeIcon className={classNames?.badgeIcon} />}
+      </div>
+    )}
+  </>
+);
+
+const BadgeIcon = ({
+  className,
+}: {
+  className: string | null | undefined;
+}): React.ReactNode => (
+  <svg
+    className={classify(
+      css.badgeIcon,
+      typographyStyle[TEXT_COLORS['clickable']],
+      className,
+    )}
+    viewBox="0 0 12 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.46573 1.0335L8.10352 4.61465L11.6941 6.24816C11.883 6.3424 12.009 6.53088 12.009 6.71936C12.009 6.90784 11.883 7.09632 11.6941 7.15915L8.10352 8.82407L6.46573 12.4052C6.37124 12.5937 6.18226 12.7194 5.99329 12.7194C5.80431 12.7194 5.61533 12.5937 5.55234 12.4052L3.88305 8.82407L0.292498 7.19056C0.103521 7.09632 0.0090332 6.90784 0.0090332 6.71936C0.0090332 6.53088 0.103521 6.3424 0.292498 6.24816L3.88305 4.61465L5.55234 1.0335C5.61533 0.845015 5.80431 0.71936 5.99329 0.71936C6.18226 0.71936 6.37124 0.845015 6.46573 1.0335Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/lib/components/SemanticAIIcon/BadgedIcon.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BadgedIcon = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _typography = require("../../types/typography");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Icon = require("../Icon");
+var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
+var _BadgedIconModule = _interopRequireDefault(require("./BadgedIcon.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; }
+
+const BadgedIcon = _ref => {
+  let {
+    name,
+    showBadge = true,
+    classNames,
+    size = 'medium',
+    type = 'solid',
+    ariaLabel
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !!name && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_BadgedIconModule.default.iconContainer, _BadgedIconModule.default[size], classNames?.wrapper)
+  }, /*#__PURE__*/React.createElement(_Icon.Icon, {
+    ariaLabel: ariaLabel,
+    name: name,
+    className: classNames?.icon,
+    name: name,
+    size: size === 'large' ? 'medium' : size,
+    type: type,
+    color: _typography.TEXT_COLORS.clickable
+  }), showBadge && /*#__PURE__*/React.createElement(BadgeIcon, {
+    className: classNames?.badgeIcon
+  })));
+};
+exports.BadgedIcon = BadgedIcon;
+const BadgeIcon = _ref2 => {
+  let {
+    className
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("svg", {
+    className: (0, _classify.default)(_BadgedIconModule.default.badgeIcon, _typographyModule.default[_typography.TEXT_COLORS['clickable']], className),
+    viewBox: "0 0 12 13",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6.46573 1.0335L8.10352 4.61465L11.6941 6.24816C11.883 6.3424 12.009 6.53088 12.009 6.71936C12.009 6.90784 11.883 7.09632 11.6941 7.15915L8.10352 8.82407L6.46573 12.4052C6.37124 12.5937 6.18226 12.7194 5.99329 12.7194C5.80431 12.7194 5.61533 12.5937 5.55234 12.4052L3.88305 8.82407L0.292498 7.19056C0.103521 7.09632 0.0090332 6.90784 0.0090332 6.71936C0.0090332 6.53088 0.103521 6.3424 0.292498 6.24816L3.88305 4.61465L5.55234 1.0335C5.61533 0.845015 5.80431 0.71936 5.99329 0.71936C6.18226 0.71936 6.37124 0.845015 6.46573 1.0335Z",
+    fill: "currentColor"
+  }));
+};

package/lib/components/SemanticAIIcon/BadgedIcon.js.flow

@@ -0,0 +1,73 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {TEXT_COLORS} from '../../types/typography';
+import classify from '../../utils/classify';
+import type {IconSize, IconType} from '../Icon';
+import {Icon} from '../Icon';
+
+import typographyStyle from '../../styles/typography.module.css';
+import css from './BadgedIcon.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  icon?: string,
+  badgeIcon?: string,
+}>;
+
+export type BadgedIconProps = {
+  type?: IconType,
+  name: string,
+  size?: IconSize,
+  ariaLabel?: string,
+  showBadge?: boolean,
+  classNames?: ClassNames,
+};
+
+export const BadgedIcon = ({
+  name,
+  showBadge = true,
+  classNames,
+  size = 'medium',
+  type = 'solid',
+  ariaLabel,
+}: BadgedIconProps): React.Node => (
+  <>
+    {!!name && (
+      <div
+        className={classify(css.iconContainer, css[size], classNames?.wrapper)}
+      >
+        <Icon
+          ariaLabel={ariaLabel}
+          name={name}
+          className={classNames?.icon}
+          name={name}
+          size={size === 'large' ? 'medium' : size}
+          type={type}
+          color={TEXT_COLORS.clickable}
+        />
+        {showBadge && <BadgeIcon className={classNames?.badgeIcon} />}
+      </div>
+    )}
+  </>
+);
+
+const BadgeIcon = ({className}: {className: ?string}): React.Node => (
+  <svg
+    className={classify(
+      css.badgeIcon,
+      typographyStyle[TEXT_COLORS['clickable']],
+      className,
+    )}
+    viewBox="0 0 12 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.46573 1.0335L8.10352 4.61465L11.6941 6.24816C11.883 6.3424 12.009 6.53088 12.009 6.71936C12.009 6.90784 11.883 7.09632 11.6941 7.15915L8.10352 8.82407L6.46573 12.4052C6.37124 12.5937 6.18226 12.7194 5.99329 12.7194C5.80431 12.7194 5.61533 12.5937 5.55234 12.4052L3.88305 8.82407L0.292498 7.19056C0.103521 7.09632 0.0090332 6.90784 0.0090332 6.71936C0.0090332 6.53088 0.103521 6.3424 0.292498 6.24816L3.88305 4.61465L5.55234 1.0335C5.61533 0.845015 5.80431 0.71936 5.99329 0.71936C6.18226 0.71936 6.37124 0.845015 6.46573 1.0335Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/lib/components/SemanticAIIcon/BadgedIcon.module.css

@@ -0,0 +1,88 @@
+@value (colorBackgroundTertiary) from '../../styles/variables/_color.css';
+
+@value (
+  size42,
+  size34,
+  size60,
+  size8,
+  size12,
+  size2,
+  size4
+) from '../../styles/variables/_size.css';
+
+@value (
+  borderRadiusMedium,
+  borderRadiusCircle
+) from '../../styles/variables/_border.css';
+
+@value (
+  motionEaseInEaseOut,
+  motionDurationSlow
+) from '../../styles/variables/_motion.css';
+
+@value (
+  spaceNone,
+  spaceMedium,
+  spaceXSmall
+) from '../../styles/variables/_space.css';
+
+.iconContainer {
+  display: flex;
+  width: fit-content;
+  min-width: size34;
+  min-height: size34;
+  justify-content: center;
+  align-items: center;
+  border-radius: borderRadiusMedium;
+  position: relative;
+  background: linear-gradient(
+      91deg,
+      rgba(204, 192, 240, 0.5) 0%,
+      rgba(178, 209, 250, 0.5) 100%
+    ),
+    colorBackgroundTertiary;
+}
+
+.medium {
+  width: size42;
+  height: size42;
+}
+
+.small {
+  width: size34;
+  height: size34;
+}
+
+.large {
+  width: size60;
+  height: size60;
+}
+
+.iconContainer:hover .badgeIcon {
+  transform: rotate(-90deg);
+}
+
+.badgeIcon {
+  position: absolute;
+  border-radius: borderRadiusCircle;
+  top: calc(size2 * -1);
+  right: calc(size4 * -1);
+  transition: transform motionDurationSlow motionEaseInEaseOut;
+}
+
+.small .badgeIcon {
+  width: size8;
+  height: size8;
+  left: calc(spaceMedium + spaceXSmall);
+  top: spaceNone;
+}
+
+.medium .badgeIcon {
+  width: size12;
+  height: size12;
+}
+
+.large .badgeIcon {
+  width: size12;
+  height: size12;
+}

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

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

package/lib/components/SemanticAIIcon/index.js

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

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

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

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/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';
@@ -49,6 +51,7 @@ export * from './RangeSlider';
 export * from './Rating';
 export * from './ScoreBar';
 export * from './SearchInput';
+export * from './SemanticAIIcon';
 export * from './Separator';
 export * from './Shimmer';
 export * from './SideMenuLink';

package/lib/components/index.js

@@ -267,6 +267,17 @@ Object.keys(_FileUpload).forEach(function (key) {
     }
   });
 });
+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];
+    }
+  });
+});
 var _FocusManager = require("./FocusManager");
 Object.keys(_FocusManager).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -333,6 +344,17 @@ Object.keys(_InContextAlert).forEach(function (key) {
     }
   });
 });
+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];
+    }
+  });
+});
 var _InlineDropdown = require("./InlineDropdown");
 Object.keys(_InlineDropdown).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -564,6 +586,17 @@ Object.keys(_SearchInput).forEach(function (key) {
     }
   });
 });
+var _SemanticAIIcon = require("./SemanticAIIcon");
+Object.keys(_SemanticAIIcon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SemanticAIIcon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SemanticAIIcon[key];
+    }
+  });
+});
 var _Separator = require("./Separator");
 Object.keys(_Separator).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -24,12 +24,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';
@@ -51,6 +53,7 @@ export * from './RangeSlider';
 export * from './Rating';
 export * from './ScoreBar';
 export * from './SearchInput';
+export * from './SemanticAIIcon';
 export * from './Separator';
 export * from './Shimmer';
 export * from './SideMenuLink';

package/lib/hooks/index.d.ts

@@ -3,11 +3,13 @@ export * from './useCopyToClipboard';
 export * from './useDebounce';
 export * from './useFileUpload';
 export * from './useFilteredOptions';
+export * from './useInfiniteScroll';
 export * from './useInputState';
 export * from './useLockedBody';
 export * from './useModal';
 export * from './useMountTransition';
 export * from './usePagination';
+export * from './useResizeObserver';
 export * from './useToastPortal';
 export * from './useToggle';
 export * from './useWindowSize';

package/lib/hooks/index.js

@@ -58,6 +58,17 @@ Object.keys(_useFilteredOptions).forEach(function (key) {
     }
   });
 });
+var _useInfiniteScroll = require("./useInfiniteScroll");
+Object.keys(_useInfiniteScroll).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useInfiniteScroll[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useInfiniteScroll[key];
+    }
+  });
+});
 var _useInputState = require("./useInputState");
 Object.keys(_useInputState).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -113,6 +124,17 @@ Object.keys(_usePagination).forEach(function (key) {
     }
   });
 });
+var _useResizeObserver = require("./useResizeObserver");
+Object.keys(_useResizeObserver).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useResizeObserver[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useResizeObserver[key];
+    }
+  });
+});
 var _useToastPortal = require("./useToastPortal");
 Object.keys(_useToastPortal).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/hooks/index.js.flow

@@ -5,11 +5,13 @@ export * from './useCopyToClipboard';
 export * from './useDebounce';
 export * from './useFileUpload';
 export * from './useFilteredOptions';
+export * from './useInfiniteScroll';
 export * from './useInputState';
 export * from './useLockedBody';
 export * from './useModal';
 export * from './useMountTransition';
 export * from './usePagination';
+export * from './useResizeObserver';
 export * from './useToastPortal';
 export * from './useToggle';
 export * from './useWindowSize';

package/lib/hooks/useInfiniteScroll/index.d.ts

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

package/lib/hooks/useInfiniteScroll/index.js

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

package/lib/hooks/useInfiniteScroll/index.js.flow

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

package/lib/hooks/useInfiniteScroll/useInfiniteScroll.d.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+type InfiniteScrollOptions = {
+  itemSize: number | ((index: number) => number);
+  threshold: number;
+  itemsLength: number;
+  hasNextPage: boolean;
+  loadMoreItems: () => Promise<void>;
+  containerHeight: number;
+  isVariableSizeList?: boolean;
+};
+export function useInfiniteScroll({
+  itemSize,
+  threshold,
+  itemsLength,
+  hasNextPage,
+  loadMoreItems,
+  containerHeight,
+  isVariableSizeList,
+}: InfiniteScrollOptions): (scrollData: {
+  scrollOffset: number;
+  scrollDirection: 'forward' | 'backward';
+}) => void {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const loadingRef = React.useRef(false);
+  const handleLoadMore = React.useCallback(async () => {
+    if (!hasNextPage || isLoading || loadingRef.current) {
+      return;
+    }
+
+    loadingRef.current = true;
+    setIsLoading(true);
+
+    try {
+      await loadMoreItems();
+    } catch (err) {
+      console.error('Error loading more items:', err);
+    } finally {
+      loadingRef.current = false;
+      setIsLoading(false);
+    }
+  }, [hasNextPage, isLoading, loadMoreItems]);
+  return React.useCallback(
+    ({scrollOffset, scrollDirection}) => {
+      if (scrollDirection !== 'forward') {
+        return;
+      }
+
+      let totalSize = 0;
+
+      if (isVariableSizeList && typeof itemSize === 'function') {
+        for (let i = 0; i < itemsLength; i++) {
+          totalSize += itemSize(i);
+        }
+      } else if (typeof itemSize === 'number') {
+        totalSize = itemsLength * itemSize;
+      }
+
+      if (
+        scrollOffset > totalSize - containerHeight - threshold &&
+        hasNextPage &&
+        !isLoading
+      ) {
+        handleLoadMore();
+      }
+    },
+    [
+      itemSize,
+      threshold,
+      isLoading,
+      itemsLength,
+      hasNextPage,
+      handleLoadMore,
+      containerHeight,
+      isVariableSizeList,
+    ],
+  );
+}