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

package/lib/components/InContextAlert/InContextAlert.js.flow

@@ -120,77 +120,83 @@ const AlertIcon = ({
   }
 };
 
-export const InContextAlert = (props: InContextAlertProps): React.Node => {
-  const {
-    classNames,
-    semantic = ALERT_SEMANTIC.neutral,
-    dismissable,
-    children,
-    selfDismiss = false,
-    leftIconName = '',
-    onCloseClick,
-    actionText = '',
-    onAction,
-    leftIconType,
-  } = props;
-  const [dismissed, setDismissed] = React.useState(false);
-  const closeClickHandler = (e) => {
-    onCloseClick && onCloseClick(e);
-    selfDismiss && setDismissed(true);
-  };
+export const InContextAlert: React$AbstractComponent<
+  InContextAlertProps,
+  HTMLDivElement,
+> = React.forwardRef<InContextAlertProps, HTMLDivElement>(
+  (props: InContextAlertProps, ref): React.Node => {
+    const {
+      classNames,
+      semantic = ALERT_SEMANTIC.neutral,
+      dismissable,
+      children,
+      selfDismiss = false,
+      leftIconName = '',
+      onCloseClick,
+      actionText = '',
+      onAction,
+      leftIconType,
+    } = props;
+    const [dismissed, setDismissed] = React.useState(false);
+    const closeClickHandler = (e) => {
+      onCloseClick && onCloseClick(e);
+      selfDismiss && setDismissed(true);
+    };
 
-  return (
-    <>
-      {!dismissed && (
-        <div
-          className={classify(
-            css.alertContainer,
-            {
-              [css.neutral]: semantic === ALERT_SEMANTIC.neutral,
-              [css.success]: semantic === ALERT_SEMANTIC.success,
-              [css.information]: semantic === ALERT_SEMANTIC.information,
-              [css.warning]: semantic === ALERT_SEMANTIC.warning,
-              [css.danger]: semantic === ALERT_SEMANTIC.danger,
-            },
-            classNames?.wrapper,
-          )}
-        >
-          <AlertIcon
-            semantic={semantic}
-            leftIconName={leftIconName}
-            leftIconType={leftIconType}
-          />
-          {React.Children.count(children) > 0 && (
-            <SubTitleExtraSmall className={classify(classNames?.alertText)}>
-              <Truncate line={2}>{children}</Truncate>
-            </SubTitleExtraSmall>
-          )}
-          {!!(actionText || dismissable) && (
-            <div
-              className={classify(
-                css.actionContainer,
-                classNames?.actionContainer,
-              )}
-            >
-              {!!actionText && (
-                <Link onClick={onAction} color="primary">
-                  {actionText}
-                </Link>
-              )}
-              {!!dismissable && (
-                <ClickableIcon
-                  color={TEXT_COLORS.primary}
-                  name="close"
-                  size="small"
-                  type="regular"
-                  onClick={closeClickHandler}
-                  className={css.closeIcon}
-                />
-              )}
-            </div>
-          )}
-        </div>
-      )}
-    </>
-  );
-};
+    return (
+      <>
+        {!dismissed && (
+          <div
+            className={classify(
+              css.alertContainer,
+              {
+                [css.neutral]: semantic === ALERT_SEMANTIC.neutral,
+                [css.success]: semantic === ALERT_SEMANTIC.success,
+                [css.information]: semantic === ALERT_SEMANTIC.information,
+                [css.warning]: semantic === ALERT_SEMANTIC.warning,
+                [css.danger]: semantic === ALERT_SEMANTIC.danger,
+              },
+              classNames?.wrapper,
+            )}
+            ref={ref}
+          >
+            <AlertIcon
+              semantic={semantic}
+              leftIconName={leftIconName}
+              leftIconType={leftIconType}
+            />
+            {React.Children.count(children) > 0 && (
+              <SubTitleExtraSmall className={classify(classNames?.alertText)}>
+                <Truncate line={2}>{children}</Truncate>
+              </SubTitleExtraSmall>
+            )}
+            {!!(actionText || dismissable) && (
+              <div
+                className={classify(
+                  css.actionContainer,
+                  classNames?.actionContainer,
+                )}
+              >
+                {!!actionText && (
+                  <Link onClick={onAction} color="primary">
+                    {actionText}
+                  </Link>
+                )}
+                {!!dismissable && (
+                  <ClickableIcon
+                    color={TEXT_COLORS.primary}
+                    name="close"
+                    size="small"
+                    type="regular"
+                    onClick={closeClickHandler}
+                    className={css.closeIcon}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </>
+    );
+  },
+);

package/lib/components/InlineDropdown/InlineDropdown.js

@@ -18,7 +18,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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const InlineDropdown = _ref => {
+const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     anchorPosition = 'bottom-start',
     size = 'medium',
@@ -31,7 +31,8 @@ const InlineDropdown = _ref => {
     children,
     ...restButtonProps
   } = _ref;
-  const menuBtnRef = React.useRef();
+  const menuBtnRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => menuBtnRef.current);
   const {
     x,
     y,
@@ -96,5 +97,5 @@ const InlineDropdown = _ref => {
       size: menu.size || 'medium'
     }))));
   });
-};
+});
 exports.InlineDropdown = InlineDropdown;

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

@@ -45,96 +45,105 @@ export type InlineDropdownProps = {
   ...
 };
 
-export const InlineDropdown = ({
-  anchorPosition = 'bottom-start',
-  size = 'medium',
-  onOptionSelect,
-  menu,
-  classNames,
-  disabled,
-  onMenuOpen,
-  onMenuClose,
-  children,
-  ...restButtonProps
-}: InlineDropdownProps): React.Node => {
-  const menuBtnRef = React.useRef();
-  const {x, y, reference, floating, strategy} = useFloating({
-    strategy: 'absolute',
-    placement: anchorPosition,
-    whileElementsMounted: autoUpdate,
-    middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
-  });
+export const InlineDropdown: React$AbstractComponent<
+  InlineDropdownProps,
+  HTMLDivElement,
+> = React.forwardRef<InlineDropdownProps, HTMLDivElement>(
+  (
+    {
+      anchorPosition = 'bottom-start',
+      size = 'medium',
+      onOptionSelect,
+      menu,
+      classNames,
+      disabled,
+      onMenuOpen,
+      onMenuClose,
+      children,
+      ...restButtonProps
+    }: InlineDropdownProps,
+    ref,
+  ): React.Node => {
+    const menuBtnRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => menuBtnRef.current);
+    const {x, y, reference, floating, strategy} = useFloating({
+      strategy: 'absolute',
+      placement: anchorPosition,
+      whileElementsMounted: autoUpdate,
+      middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
+    });
 
-  const onMenuToggle = (isOpen: boolean) => {
-    isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
-  };
+    const onMenuToggle = (isOpen: boolean) => {
+      isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+    };
 
-  return (
-    <ClickAway onChange={onMenuToggle}>
-      {({isOpen, onOpen, cancelNext, clickAway}) => (
-        <div
-          data-testid="InlineDropdown"
-          className={classify(
-            css.inlineDropdownContainer,
-            classNames?.dropdownContainer,
-          )}
-          ref={menuBtnRef}
-        >
-          <UnstyledButton
-            {...restButtonProps}
-            disabled={disabled}
-            ref={reference}
-            onClick={(e) => {
-              e.stopPropagation();
-              onOpen();
-            }}
+    return (
+      <ClickAway onChange={onMenuToggle}>
+        {({isOpen, onOpen, cancelNext, clickAway}) => (
+          <div
+            data-testid="InlineDropdown"
             className={classify(
-              css.inlineButton,
-              {
-                [css.disabled]: disabled,
-              },
-              css[size],
-              classNames?.buttonWrapper,
+              css.inlineDropdownContainer,
+              classNames?.dropdownContainer,
             )}
+            ref={menuBtnRef}
           >
-            <Truncate>{children}</Truncate>
-            <Icon
-              name={isOpen ? 'caret-up' : 'caret-down'}
-              size="small"
-              type="solid"
-              className={classify({
-                [css.disabled]: disabled,
-              })}
-            />
-          </UnstyledButton>
-          {isOpen && menu && (
-            <div
-              onClickCapture={cancelNext}
-              ref={floating}
-              style={{
-                display: 'flex',
-                position: strategy,
-                top: y ?? spaceNone,
-                left: x ?? spaceNone,
+            <UnstyledButton
+              {...restButtonProps}
+              disabled={disabled}
+              ref={reference}
+              onClick={(e) => {
+                e.stopPropagation();
+                onOpen();
               }}
+              className={classify(
+                css.inlineButton,
+                {
+                  [css.disabled]: disabled,
+                },
+                css[size],
+                classNames?.buttonWrapper,
+              )}
             >
-              <Menu
-                {...menu}
-                onSelect={(option) => {
-                  onOptionSelect && onOptionSelect(option);
-                  if (
-                    !menu.optionsVariant ||
-                    menu.optionsVariant === 'normal'
-                  ) {
-                    clickAway();
-                  }
-                }}
-                size={menu.size || 'medium'}
+              <Truncate>{children}</Truncate>
+              <Icon
+                name={isOpen ? 'caret-up' : 'caret-down'}
+                size="small"
+                type="solid"
+                className={classify({
+                  [css.disabled]: disabled,
+                })}
               />
-            </div>
-          )}
-        </div>
-      )}
-    </ClickAway>
-  );
-};
+            </UnstyledButton>
+            {isOpen && menu && (
+              <div
+                onClickCapture={cancelNext}
+                ref={floating}
+                style={{
+                  display: 'flex',
+                  position: strategy,
+                  top: y ?? spaceNone,
+                  left: x ?? spaceNone,
+                }}
+              >
+                <Menu
+                  {...menu}
+                  onSelect={(option) => {
+                    onOptionSelect && onOptionSelect(option);
+                    if (
+                      !menu.optionsVariant ||
+                      menu.optionsVariant === 'normal'
+                    ) {
+                      clickAway();
+                    }
+                  }}
+                  size={menu.size || 'medium'}
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </ClickAway>
+    );
+  },
+);

package/lib/components/LinearLoader/LinearLoader.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 LinearLoader = _ref => {
+const LinearLoader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     value,
     size = 'medium',
@@ -22,12 +22,13 @@ const LinearLoader = _ref => {
       [_LinearLoaderModule.default.large]: size === 'large',
       [_LinearLoaderModule.default.medium]: size === 'medium',
       [_LinearLoaderModule.default.small]: size === 'small'
-    }, className)
+    }, className),
+    ref: ref
   }, /*#__PURE__*/React.createElement("div", {
     className: _LinearLoaderModule.default.progressBar,
     style: {
       width: `${value + '%'}`
     }
   }));
-};
+});
 exports.LinearLoader = LinearLoader;

package/lib/components/LinearLoader/LinearLoader.js.flow

@@ -13,22 +13,24 @@ export type LinearLoaderProps = {
   className?: string,
 };
 
-export const LinearLoader = ({
-  value,
-  size = 'medium',
-  className,
-}: LinearLoaderProps): React.Node => (
-  <div
-    className={classify(
-      css.lineContainer,
-      {
-        [css.large]: size === 'large',
-        [css.medium]: size === 'medium',
-        [css.small]: size === 'small',
-      },
-      className,
-    )}
-  >
-    <div className={css.progressBar} style={{width: `${value + '%'}`}}></div>
-  </div>
+export const LinearLoader: React$AbstractComponent<
+  LinearLoaderProps,
+  HTMLDivElement,
+> = React.forwardRef<LinearLoaderProps, HTMLDivElement>(
+  ({value, size = 'medium', className}: LinearLoaderProps, ref): React.Node => (
+    <div
+      className={classify(
+        css.lineContainer,
+        {
+          [css.large]: size === 'large',
+          [css.medium]: size === 'medium',
+          [css.small]: size === 'small',
+        },
+        className,
+      )}
+      ref={ref}
+    >
+      <div className={css.progressBar} style={{width: `${value + '%'}`}}></div>
+    </div>
+  ),
 );

package/lib/components/Link/Link.js

@@ -65,9 +65,16 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     disabled,
     ...props
   } = _ref;
+  const linkRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => linkRef.current);
+  React.useEffect(() => {
+    if (disabled) {
+      linkRef.current?.blur();
+    }
+  }, [disabled]);
   return /*#__PURE__*/React.createElement("a", _extends({}, props, {
     tabIndex: disabled ? -1 : tabIndex,
-    innerref: ref,
+    ref: linkRef,
     "data-testid": "Link",
     className: (0, _classify.default)(_typographyModule.default.link, _typographyModule.default[as], _typographyModule.default[color], {
       [_typographyModule.default.underline]: underline,

package/lib/components/Link/Link.js.flow

@@ -72,40 +72,48 @@ export type LinkProps = {
   ...
 };
 
-export const Link: React$AbstractComponent<
-  LinkProps,
-  React.Element<'a'>,
-> = React.forwardRef<LinkProps, React.Element<'a'>>(
-  (
-    {
-      color = TEXT_COLORS.clickable,
-      children,
-      className,
-      as = 'buttonTextExtraSmall',
-      underline = true,
-      tabIndex = 0,
-      disabled,
-      ...props
-    }: LinkProps,
-    ref,
-  ) => (
-    <a
-      {...props}
-      tabIndex={disabled ? -1 : tabIndex}
-      innerref={ref}
-      data-testid="Link"
-      className={classify(
-        css.link,
-        css[as],
-        css[color],
-        {
-          [css.underline]: underline,
-          [css.disabled]: disabled,
-        },
+export const Link: React$AbstractComponent<LinkProps, HTMLAnchorElement> =
+  React.forwardRef<LinkProps, HTMLAnchorElement>(
+    (
+      {
+        color = TEXT_COLORS.clickable,
+        children,
         className,
-      )}
-    >
-      {children}
-    </a>
-  ),
-);
+        as = 'buttonTextExtraSmall',
+        underline = true,
+        tabIndex = 0,
+        disabled,
+        ...props
+      }: LinkProps,
+      ref,
+    ) => {
+      const linkRef = React.useRef(null);
+      React.useImperativeHandle(ref, () => linkRef.current);
+      React.useEffect(() => {
+        if (disabled) {
+          linkRef.current?.blur();
+        }
+      }, [disabled]);
+
+      return (
+        <a
+          {...props}
+          tabIndex={disabled ? -1 : tabIndex}
+          ref={linkRef}
+          data-testid="Link"
+          className={classify(
+            css.link,
+            css[as],
+            css[color],
+            {
+              [css.underline]: underline,
+              [css.disabled]: disabled,
+            },
+            className,
+          )}
+        >
+          {children}
+        </a>
+      );
+    },
+  );

package/lib/components/Notification/Notification.js

@@ -22,7 +22,7 @@ const NOTIFICATION_SEMANTIC = Object.freeze({
 exports.NOTIFICATION_SEMANTIC = NOTIFICATION_SEMANTIC;
 // Base Notification will not have any state.
 
-const BaseNotification = props => {
+const BaseNotification = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     classNames,
     semantic = NOTIFICATION_SEMANTIC.success,
@@ -38,7 +38,8 @@ const BaseNotification = props => {
       [_NotificationModule.default.information]: semantic === NOTIFICATION_SEMANTIC.information,
       [_NotificationModule.default.danger]: semantic === NOTIFICATION_SEMANTIC.danger,
       [_NotificationModule.default.dismissable]: dismissable
-    }, classNames?.wrapper)
+    }, classNames?.wrapper),
+    ref: ref
   }, iconLeftName ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconLeftName,
     color: _typography.TEXT_COLORS.inversePrimary,
@@ -55,8 +56,8 @@ const BaseNotification = props => {
     onClick: onCloseClick,
     className: _NotificationModule.default.closeIcon
   }));
-};
-const Notification = props => {
+});
+const Notification = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     classNames,
     semantic = NOTIFICATION_SEMANTIC.success,
@@ -78,7 +79,8 @@ const Notification = props => {
     iconLeftType: iconLeftType,
     semantic: semantic,
     dismissable: dismissable,
-    onCloseClick: closeClickHandler
+    onCloseClick: closeClickHandler,
+    ref: ref
   }, children));
-};
+});
 exports.Notification = Notification;