@spaced-out/ui-design-system 0.1.16 → 0.1.17

package/lib/components/ButtonTabs/ButtonTabs.js

@@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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 ButtonTabs = _ref => {
+const ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     children,
@@ -36,6 +36,7 @@ const ButtonTabs = _ref => {
   });
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "ButtonTabs",
+    ref: ref,
     className: (0, _classify.default)(_ButtonTabsModule.default.buttonTabsWrapper, {
       [_ButtonTabsModule.default.medium]: size === 'medium',
       [_ButtonTabsModule.default.small]: size === 'small',
@@ -43,5 +44,5 @@ const ButtonTabs = _ref => {
       [_ButtonTabsModule.default.disabled]: disabled
     }, classNames?.wrapper)
   }, childrenWithProps);
-};
+});
 exports.ButtonTabs = ButtonTabs;

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

@@ -19,44 +19,53 @@ export type ButtonTabsProps = {
   onButtonTabSelect?: ?(id: string, e?: SyntheticEvent<HTMLElement>) => mixed,
 };
 
-export const ButtonTabs = ({
-  classNames,
-  children,
-  isFluid,
-  size = 'medium',
-  disabled,
-  selectedButtonTabId,
-  onButtonTabSelect,
-}: ButtonTabsProps): React.Node => {
-  const childrenWithProps = React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement(child, {
-        ...child.props,
-        isFluid,
-        size,
-        disabled,
-        selectedButtonTabId,
-        onButtonTabSelect,
-      });
-    }
-    return child;
-  });
-
-  return (
-    <div
-      data-testid="ButtonTabs"
-      className={classify(
-        css.buttonTabsWrapper,
-        {
-          [css.medium]: size === 'medium',
-          [css.small]: size === 'small',
-          [css.isFluid]: isFluid,
-          [css.disabled]: disabled,
-        },
-        classNames?.wrapper,
-      )}
-    >
-      {childrenWithProps}
-    </div>
-  );
-};
+export const ButtonTabs: React$AbstractComponent<
+  ButtonTabsProps,
+  HTMLDivElement,
+> = React.forwardRef<ButtonTabsProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      children,
+      isFluid,
+      size = 'medium',
+      disabled,
+      selectedButtonTabId,
+      onButtonTabSelect,
+    }: ButtonTabsProps,
+    ref,
+  ): React.Node => {
+    const childrenWithProps = React.Children.map(children, (child) => {
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child, {
+          ...child.props,
+          isFluid,
+          size,
+          disabled,
+          selectedButtonTabId,
+          onButtonTabSelect,
+        });
+      }
+      return child;
+    });
+
+    return (
+      <div
+        data-testid="ButtonTabs"
+        ref={ref}
+        className={classify(
+          css.buttonTabsWrapper,
+          {
+            [css.medium]: size === 'medium',
+            [css.small]: size === 'small',
+            [css.isFluid]: isFluid,
+            [css.disabled]: disabled,
+          },
+          classNames?.wrapper,
+        )}
+      >
+        {childrenWithProps}
+      </div>
+    );
+  },
+);

package/lib/components/Card/Card.js

@@ -23,7 +23,7 @@ const getPaddingValue = size => {
   const spaceKey = 'space' + (0, _string.capitalize)(size);
   return SPACES[spaceKey] || SPACES['spaceNone'];
 };
-const Card = _ref => {
+const Card = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     classNames,
@@ -41,17 +41,25 @@ const Card = _ref => {
       '--card-padding-left': getPaddingValue(paddingLeft)
     },
     "data-testid": "Card",
-    className: (0, _classify.default)(_CardModule.default.cardWrapper, classNames?.wrapper)
+    className: (0, _classify.default)(_CardModule.default.cardWrapper, classNames?.wrapper),
+    ref: ref
   }), children);
-};
+});
 exports.Card = Card;
-const ClickableCard = _ref2 => {
+const ClickableCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     classNames,
     onClick,
     disabled = false,
     ...props
   } = _ref2;
+  const componentRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => componentRef.current);
+  React.useEffect(() => {
+    if (disabled) {
+      componentRef.current?.blur();
+    }
+  }, [disabled]);
   const onClickHandler = e => {
     if (!disabled) {
       onClick && onClick(e);
@@ -68,9 +76,10 @@ const ClickableCard = _ref2 => {
         [_CardModule.default.disabled]: disabled
       }, classNames?.wrapper)
     },
-    tabIndex: "0",
+    tabIndex: disabled ? -1 : 0,
     onClick: onClickHandler,
-    onKeyDown: onKeyDownHandler
+    onKeyDown: onKeyDownHandler,
+    ref: ref
   }));
-};
+});
 exports.ClickableCard = ClickableCard;

package/lib/components/Card/Card.js.flow

@@ -41,59 +41,77 @@ const getPaddingValue = (size: PaddingSizeType): string => {
   return SPACES[spaceKey] || SPACES['spaceNone'];
 };
 
-export const Card = ({
-  children,
-  classNames,
-  paddingTop = 'medium',
-  paddingRight = 'medium',
-  paddingBottom = 'medium',
-  paddingLeft = 'medium',
-  ...props
-}: CardProps): React.Node => (
-  <div
-    {...props}
-    style={{
-      '--card-padding-top': getPaddingValue(paddingTop),
-      '--card-padding-right': getPaddingValue(paddingRight),
-      '--card-padding-bottom': getPaddingValue(paddingBottom),
-      '--card-padding-left': getPaddingValue(paddingLeft),
-    }}
-    data-testid="Card"
-    className={classify(css.cardWrapper, classNames?.wrapper)}
-  >
-    {children}
-  </div>
-);
-
-export const ClickableCard = ({
-  classNames,
-  onClick,
-  disabled = false,
-  ...props
-}: ClickableCardProps): React.Node => {
-  const onClickHandler = (e) => {
-    if (!disabled) {
-      onClick && onClick(e);
-    }
-  };
-  const onKeyDownHandler = (e) => {
-    if (e.key === 'Enter') {
-      onClickHandler(e);
-    }
-  };
-  return (
-    <Card
-      {...props}
-      classNames={{
-        wrapper: classify(
-          css.clickableCard,
-          {[css.disabled]: disabled},
-          classNames?.wrapper,
-        ),
-      }}
-      tabIndex="0"
-      onClick={onClickHandler}
-      onKeyDown={onKeyDownHandler}
-    />
+export const Card: React$AbstractComponent<CardProps, HTMLDivElement> =
+  React.forwardRef<CardProps, HTMLDivElement>(
+    (
+      {
+        children,
+        classNames,
+        paddingTop = 'medium',
+        paddingRight = 'medium',
+        paddingBottom = 'medium',
+        paddingLeft = 'medium',
+        ...props
+      }: CardProps,
+      ref,
+    ): React.Node => (
+      <div
+        {...props}
+        style={{
+          '--card-padding-top': getPaddingValue(paddingTop),
+          '--card-padding-right': getPaddingValue(paddingRight),
+          '--card-padding-bottom': getPaddingValue(paddingBottom),
+          '--card-padding-left': getPaddingValue(paddingLeft),
+        }}
+        data-testid="Card"
+        className={classify(css.cardWrapper, classNames?.wrapper)}
+        ref={ref}
+      >
+        {children}
+      </div>
+    ),
   );
-};
+
+export const ClickableCard: React$AbstractComponent<
+  ClickableCardProps,
+  HTMLDivElement,
+> = React.forwardRef<ClickableCardProps, HTMLDivElement>(
+  (
+    {classNames, onClick, disabled = false, ...props}: ClickableCardProps,
+    ref,
+  ): React.Node => {
+    const componentRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => componentRef.current);
+    React.useEffect(() => {
+      if (disabled) {
+        componentRef.current?.blur();
+      }
+    }, [disabled]);
+    const onClickHandler = (e) => {
+      if (!disabled) {
+        onClick && onClick(e);
+      }
+    };
+    const onKeyDownHandler = (e) => {
+      if (e.key === 'Enter') {
+        onClickHandler(e);
+      }
+    };
+    return (
+      <Card
+        {...props}
+        classNames={{
+          wrapper: classify(
+            css.clickableCard,
+            {[css.disabled]: disabled},
+            classNames?.wrapper,
+          ),
+        }}
+        tabIndex={disabled ? -1 : 0}
+        onClick={onClickHandler}
+        onKeyDown={onKeyDownHandler}
+        ref={ref}
+      />
+    );
+  },
+);

package/lib/components/Chip/Chip.js

@@ -22,7 +22,7 @@ const CHIP_SEMANTIC = Object.freeze({
   secondary: 'secondary'
 });
 exports.CHIP_SEMANTIC = CHIP_SEMANTIC;
-const Chip = _ref => {
+const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     semantic = 'primary',
@@ -39,6 +39,7 @@ const Chip = _ref => {
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-testid": "Chip"
   }, rest, {
+    ref: ref,
     className: (0, _classify.classify)(_ChipModule.default.chipWrapper, {
       [_ChipModule.default.primary]: semantic === CHIP_SEMANTIC.primary,
       [_ChipModule.default.information]: semantic === CHIP_SEMANTIC.information,
@@ -70,5 +71,5 @@ const Chip = _ref => {
       }
     }
   }));
-};
+});
 exports.Chip = Chip;

package/lib/components/Chip/Chip.js.flow

@@ -48,64 +48,71 @@ export type SmallChipProps = {
 };
 
 export type ChipProps = MediumChipProps | SmallChipProps;
-export const Chip = ({
-  classNames,
-  semantic = 'primary',
-  size = 'medium',
-  children,
-  iconName = '',
-  iconType = 'regular',
-  dismissable = false,
-  onDismiss = () => null,
-  onClick,
-  disabled,
-  ...rest
-}: ChipProps): React.Node => (
-  <div
-    data-testid="Chip"
-    {...rest}
-    className={classify(
-      css.chipWrapper,
+export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
+  React.forwardRef<ChipProps, HTMLDivElement>(
+    (
       {
-        [css.primary]: semantic === CHIP_SEMANTIC.primary,
-        [css.information]: semantic === CHIP_SEMANTIC.information,
-        [css.success]: semantic === CHIP_SEMANTIC.success,
-        [css.warning]: semantic === CHIP_SEMANTIC.warning,
-        [css.danger]: semantic === CHIP_SEMANTIC.danger,
-        [css.secondary]: semantic === CHIP_SEMANTIC.secondary,
-        [css.medium]: size === 'medium',
-        [css.small]: size === 'small',
-        [css.dismissable]: dismissable,
-        [css.withIcon]: !!iconName && size !== 'small',
-        [css.disabled]: disabled,
-      },
-      classNames?.wrapper,
-    )}
-    onClick={onClick}
-  >
-    {iconName && size !== 'small' && (
-      <Icon
-        className={css.chipIcon}
-        name={iconName}
-        type={iconType}
-        size="small"
-      />
-    )}
-    <Truncate>{children}</Truncate>
+        classNames,
+        semantic = 'primary',
+        size = 'medium',
+        children,
+        iconName = '',
+        iconType = 'regular',
+        dismissable = false,
+        onDismiss = () => null,
+        onClick,
+        disabled,
+        ...rest
+      }: ChipProps,
+      ref,
+    ): React.Node => (
+      <div
+        data-testid="Chip"
+        {...rest}
+        ref={ref}
+        className={classify(
+          css.chipWrapper,
+          {
+            [css.primary]: semantic === CHIP_SEMANTIC.primary,
+            [css.information]: semantic === CHIP_SEMANTIC.information,
+            [css.success]: semantic === CHIP_SEMANTIC.success,
+            [css.warning]: semantic === CHIP_SEMANTIC.warning,
+            [css.danger]: semantic === CHIP_SEMANTIC.danger,
+            [css.secondary]: semantic === CHIP_SEMANTIC.secondary,
+            [css.medium]: size === 'medium',
+            [css.small]: size === 'small',
+            [css.dismissable]: dismissable,
+            [css.withIcon]: !!iconName && size !== 'small',
+            [css.disabled]: disabled,
+          },
+          classNames?.wrapper,
+        )}
+        onClick={onClick}
+      >
+        {iconName && size !== 'small' && (
+          <Icon
+            className={css.chipIcon}
+            name={iconName}
+            type={iconType}
+            size="small"
+          />
+        )}
+        <Truncate>{children}</Truncate>
 
-    {dismissable && size !== 'small' && (
-      <Icon
-        className={css.dismissIcon}
-        name="xmark"
-        type={iconType}
-        size="small"
-        onClick={(event) => {
-          event.stopPropagation();
-          if (!disabled && onDismiss) {
-            onDismiss(event);
-          }
-        }}
-      />
-    )}
-  </div>
-);
+        {dismissable && size !== 'small' && (
+          <Icon
+            className={css.dismissIcon}
+            name="xmark"
+            type={iconType}
+            size="small"
+            onClick={(event) => {
+              event.stopPropagation();
+              if (!disabled && onDismiss) {
+                onDismiss(event);
+              }
+            }}
+          />
+        )}
+      </div>
+    ),
+  );

package/lib/components/CircularLoader/CircularLoader.js

@@ -12,17 +12,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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 CircularLoader = _ref => {
+const CircularLoader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size = 'medium',
     className,
-    colorToken = 'colorFillPrimary'
+    colorToken = 'colorFillPrimary',
+    ariaLabel = 'Loading'
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_CircularLoaderModule.default.container, {
       [_CircularLoaderModule.default.mediumContainer]: size === 'medium',
       [_CircularLoaderModule.default.smallContainer]: size === 'small'
-    }, className)
+    }, className),
+    ref: ref,
+    "aria-label": ariaLabel,
+    role: "alert",
+    "aria-busy": "true"
   }, /*#__PURE__*/React.createElement("div", {
     className: _CircularLoaderModule.default.spinLoader,
     "aria-hidden": "true"
@@ -37,5 +42,5 @@ const CircularLoader = _ref => {
       '--color': COLORS[colorToken]
     }
   })));
-};
+});
 exports.CircularLoader = CircularLoader;

package/lib/components/CircularLoader/CircularLoader.js.flow

@@ -11,34 +11,48 @@ import css from './CircularLoader.module.css';
 export type CircularLoaderProps = {
   size?: 'large' | 'medium' | 'small',
   className?: string,
+  ariaLabel?: string,
   // TODO: update it to permissible colors
   colorToken?: $Keys<typeof COLORS>,
 };
 
-export const CircularLoader = ({
-  size = 'medium',
-  className,
-  colorToken = 'colorFillPrimary',
-}: CircularLoaderProps): React.Node => (
-  <div
-    className={classify(
-      css.container,
-      {
-        [css.mediumContainer]: size === 'medium',
-        [css.smallContainer]: size === 'small',
-      },
+export const CircularLoader: React$AbstractComponent<
+  CircularLoaderProps,
+  HTMLDivElement,
+> = React.forwardRef<CircularLoaderProps, HTMLDivElement>(
+  (
+    {
+      size = 'medium',
       className,
-    )}
-  >
-    <div className={css.spinLoader} aria-hidden="true">
-      <div
-        className={css.outerCircle}
-        style={{'--color': COLORS[colorToken]}}
-      ></div>
-      <div
-        className={css.ellipse}
-        style={{'--color': COLORS[colorToken]}}
-      ></div>
+      colorToken = 'colorFillPrimary',
+      ariaLabel = 'Loading',
+    }: CircularLoaderProps,
+    ref,
+  ): React.Node => (
+    <div
+      className={classify(
+        css.container,
+        {
+          [css.mediumContainer]: size === 'medium',
+          [css.smallContainer]: size === 'small',
+        },
+        className,
+      )}
+      ref={ref}
+      aria-label={ariaLabel}
+      role="alert"
+      aria-busy="true"
+    >
+      <div className={css.spinLoader} aria-hidden="true">
+        <div
+          className={css.outerCircle}
+          style={{'--color': COLORS[colorToken]}}
+        ></div>
+        <div
+          className={css.ellipse}
+          style={{'--color': COLORS[colorToken]}}
+        ></div>
+      </div>
     </div>
-  </div>
+  ),
 );

package/lib/components/CollapsibleCard/CollapsibleCard.js

@@ -42,7 +42,7 @@ const CollapsibleCardContent = _ref2 => {
   }, children);
 };
 exports.CollapsibleCardContent = CollapsibleCardContent;
-const CollapsibleCard = _ref3 => {
+const CollapsibleCard = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     id,
     isOpen,
@@ -57,7 +57,8 @@ const CollapsibleCard = _ref3 => {
   const [collapsibleCardIsOpen, setCollapsibleCardIsOpen] = React.useState(Boolean(isOpen));
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "CollapsibleCard",
-    className: (0, _classify.default)(_CollapsibleCardModule.default.wrapper, classNames?.wrapper)
+    className: (0, _classify.default)(_CollapsibleCardModule.default.wrapper, classNames?.wrapper),
+    ref: ref
   }, /*#__PURE__*/React.createElement(_Button.UnstyledButton, {
     className: (0, _classify.default)(_CollapsibleCardModule.default.header, {
       [_CollapsibleCardModule.default.isOpen]: collapsibleCardIsOpen
@@ -86,5 +87,5 @@ const CollapsibleCard = _ref3 => {
   })), collapsibleCardIsOpen && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_CollapsibleCardModule.default.content, classNames?.content)
   }, children));
-};
+});
 exports.CollapsibleCard = CollapsibleCard;