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

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;

package/lib/components/Notification/Notification.js.flow

@@ -31,59 +31,6 @@ type BaseNotificationProps = {
   onCloseClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
 };
 
-// Base Notification will not have any state.
-
-const BaseNotification = (props: BaseNotificationProps): React.Node => {
-  const {
-    classNames,
-    semantic = NOTIFICATION_SEMANTIC.success,
-    iconLeftName,
-    iconLeftType = 'regular',
-    dismissable,
-    children,
-    onCloseClick,
-  } = props;
-  return (
-    <div
-      className={classify(
-        css.baseContainer,
-        {
-          [css.success]: semantic === NOTIFICATION_SEMANTIC.success,
-          [css.information]: semantic === NOTIFICATION_SEMANTIC.information,
-          [css.danger]: semantic === NOTIFICATION_SEMANTIC.danger,
-          [css.dismissable]: dismissable,
-        },
-        classNames?.wrapper,
-      )}
-    >
-      {iconLeftName ? (
-        <Icon
-          name={iconLeftName}
-          color={TEXT_COLORS.inversePrimary}
-          size="small"
-          type={iconLeftType}
-        />
-      ) : null}
-      <SubTitleSmall
-        className={classify(classNames?.text)}
-        color={TEXT_COLORS.inversePrimary}
-      >
-        {children}
-      </SubTitleSmall>
-      {dismissable && (
-        <Icon
-          color={TEXT_COLORS.inversePrimary}
-          name="close"
-          size="small"
-          type="regular"
-          onClick={onCloseClick}
-          className={css.closeIcon}
-        />
-      )}
-    </div>
-  );
-};
-
 type NotificationBaseProps = {
   ...BaseNotificationProps,
   classNames?: ClassNames,
@@ -101,37 +48,102 @@ export type NotificationProps = {
   semantic: NotificationSemanticType,
 };
 
-export const Notification = (props: NotificationProps): React.Node => {
-  const {
-    classNames,
-    semantic = NOTIFICATION_SEMANTIC.success,
-    iconLeftName,
-    iconLeftType,
-    dismissable,
-    children,
-    selfDismiss = false,
-    onCloseClick,
-  } = props;
-  const [dismissed, setDismissed] = React.useState(false);
-  const closeClickHandler = (e) => {
-    onCloseClick && onCloseClick(e);
-    selfDismiss && setDismissed(true);
-  };
+// Base Notification will not have any state.
 
-  return (
-    <>
-      {!dismissed && (
-        <BaseNotification
-          classNames={classNames}
-          iconLeftName={iconLeftName}
-          iconLeftType={iconLeftType}
-          semantic={semantic}
-          dismissable={dismissable}
-          onCloseClick={closeClickHandler}
+const BaseNotification: React$AbstractComponent<
+  BaseNotificationProps,
+  HTMLDivElement,
+> = React.forwardRef<BaseNotificationProps, HTMLDivElement>(
+  (props: BaseNotificationProps, ref): React.Node => {
+    const {
+      classNames,
+      semantic = NOTIFICATION_SEMANTIC.success,
+      iconLeftName,
+      iconLeftType = 'regular',
+      dismissable,
+      children,
+      onCloseClick,
+    } = props;
+    return (
+      <div
+        className={classify(
+          css.baseContainer,
+          {
+            [css.success]: semantic === NOTIFICATION_SEMANTIC.success,
+            [css.information]: semantic === NOTIFICATION_SEMANTIC.information,
+            [css.danger]: semantic === NOTIFICATION_SEMANTIC.danger,
+            [css.dismissable]: dismissable,
+          },
+          classNames?.wrapper,
+        )}
+        ref={ref}
+      >
+        {iconLeftName ? (
+          <Icon
+            name={iconLeftName}
+            color={TEXT_COLORS.inversePrimary}
+            size="small"
+            type={iconLeftType}
+          />
+        ) : null}
+        <SubTitleSmall
+          className={classify(classNames?.text)}
+          color={TEXT_COLORS.inversePrimary}
         >
           {children}
-        </BaseNotification>
-      )}
-    </>
-  );
-};
+        </SubTitleSmall>
+        {dismissable && (
+          <Icon
+            color={TEXT_COLORS.inversePrimary}
+            name="close"
+            size="small"
+            type="regular"
+            onClick={onCloseClick}
+            className={css.closeIcon}
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+export const Notification: React$AbstractComponent<
+  NotificationProps,
+  HTMLDivElement,
+> = React.forwardRef<NotificationProps, HTMLDivElement>(
+  (props: NotificationProps, ref): React.Node => {
+    const {
+      classNames,
+      semantic = NOTIFICATION_SEMANTIC.success,
+      iconLeftName,
+      iconLeftType,
+      dismissable,
+      children,
+      selfDismiss = false,
+      onCloseClick,
+    } = props;
+    const [dismissed, setDismissed] = React.useState(false);
+    const closeClickHandler = (e) => {
+      onCloseClick && onCloseClick(e);
+      selfDismiss && setDismissed(true);
+    };
+
+    return (
+      <>
+        {!dismissed && (
+          <BaseNotification
+            classNames={classNames}
+            iconLeftName={iconLeftName}
+            iconLeftType={iconLeftType}
+            semantic={semantic}
+            dismissable={dismissable}
+            onCloseClick={closeClickHandler}
+            ref={ref}
+          >
+            {children}
+          </BaseNotification>
+        )}
+      </>
+    );
+  },
+);

package/lib/components/OptionButton/OptionButton.js

@@ -12,7 +12,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 OptionButton = _ref => {
+const OptionButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     iconLeftName,
@@ -21,6 +21,7 @@ const OptionButton = _ref => {
     isFluid,
     disabled,
     size,
+    isLoading,
     menu,
     anchorPosition,
     onOptionSelect,
@@ -32,7 +33,8 @@ const OptionButton = _ref => {
   } = _ref;
   const [iconName, setIconName] = React.useState('chevron-down');
   return /*#__PURE__*/React.createElement("div", {
-    className: _OptionButtonModule.default.container
+    className: _OptionButtonModule.default.container,
+    ref: ref
   }, /*#__PURE__*/React.createElement(_Button.Button, {
     iconLeftName: iconLeftName,
     iconLeftType: iconLeftType,
@@ -45,7 +47,8 @@ const OptionButton = _ref => {
     disabled: disabled,
     isFluid: isFluid,
     ariaLabel: ariaLabel,
-    actionType: actionType
+    actionType: actionType,
+    isLoading: isLoading
   }, children), /*#__PURE__*/React.createElement(_ButtonDropdown.ButtonDropdown, {
     anchorPosition: anchorPosition,
     ariaLabel: ariaLabel,
@@ -68,5 +71,5 @@ const OptionButton = _ref => {
     onOptionSelect: onOptionSelect,
     size: size
   }));
-};
+});
 exports.OptionButton = OptionButton;

package/lib/components/OptionButton/OptionButton.js.flow

@@ -22,63 +22,73 @@ export type OptionButtonProps = {
   ...
 };
 
-export const OptionButton = ({
-  children,
-  iconLeftName,
-  iconLeftType,
-  type,
-  isFluid,
-  disabled,
-  size,
-  menu,
-  anchorPosition,
-  onOptionSelect,
-  onButtonClick,
-  onMenuOpen,
-  onMenuClose,
-  ariaLabel,
-  actionType,
-}: OptionButtonProps): React.Node => {
-  const [iconName, setIconName] = React.useState('chevron-down');
+export const OptionButton: React$AbstractComponent<
+  OptionButtonProps,
+  HTMLDivElement,
+> = React.forwardRef<OptionButtonProps, HTMLDivElement>(
+  (
+    {
+      children,
+      iconLeftName,
+      iconLeftType,
+      type,
+      isFluid,
+      disabled,
+      size,
+      isLoading,
+      menu,
+      anchorPosition,
+      onOptionSelect,
+      onButtonClick,
+      onMenuOpen,
+      onMenuClose,
+      ariaLabel,
+      actionType,
+    }: OptionButtonProps,
+    ref,
+  ): React.Node => {
+    const [iconName, setIconName] = React.useState('chevron-down');
 
-  return (
-    <div className={css.container}>
-      <Button
-        iconLeftName={iconLeftName}
-        iconLeftType={iconLeftType}
-        onClick={onButtonClick}
-        size={size}
-        type={type}
-        classNames={{wrapper: css.leftButton}}
-        disabled={disabled}
-        isFluid={isFluid}
-        ariaLabel={ariaLabel}
-        actionType={actionType}
-      >
-        {children}
-      </Button>
-      <ButtonDropdown
-        anchorPosition={anchorPosition}
-        ariaLabel={ariaLabel}
-        iconLeftName={iconName}
-        classNames={{
-          buttonWrapper: css.rightButton,
-          dropdownContainer: css.dropDownContainer,
-        }}
-        type={type}
-        disabled={disabled}
-        menu={menu}
-        onMenuClose={() => {
-          setIconName('chevron-down');
-          onMenuOpen && onMenuOpen();
-        }}
-        onMenuOpen={() => {
-          setIconName('chevron-up');
-          onMenuClose && onMenuClose();
-        }}
-        onOptionSelect={onOptionSelect}
-        size={size}
-      />
-    </div>
-  );
-};
+    return (
+      <div className={css.container} ref={ref}>
+        <Button
+          iconLeftName={iconLeftName}
+          iconLeftType={iconLeftType}
+          onClick={onButtonClick}
+          size={size}
+          type={type}
+          classNames={{wrapper: css.leftButton}}
+          disabled={disabled}
+          isFluid={isFluid}
+          ariaLabel={ariaLabel}
+          actionType={actionType}
+          isLoading={isLoading}
+        >
+          {children}
+        </Button>
+        <ButtonDropdown
+          anchorPosition={anchorPosition}
+          ariaLabel={ariaLabel}
+          iconLeftName={iconName}
+          classNames={{
+            buttonWrapper: css.rightButton,
+            dropdownContainer: css.dropDownContainer,
+          }}
+          type={type}
+          disabled={disabled}
+          menu={menu}
+          onMenuClose={() => {
+            setIconName('chevron-down');
+            onMenuOpen && onMenuOpen();
+          }}
+          onMenuOpen={() => {
+            setIconName('chevron-up');
+            onMenuClose && onMenuClose();
+          }}
+          onOptionSelect={onOptionSelect}
+          size={size}
+        />
+      </div>
+    );
+  },
+);

package/lib/components/PageTitle/PageTitle.js

@@ -144,7 +144,7 @@ const PageName = _ref3 => {
 };
 exports.PageName = PageName;
 PageName.displayName = 'PageName';
-const PageTitle = _ref4 => {
+const PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     classNames,
     children,
@@ -165,7 +165,8 @@ const PageTitle = _ref4 => {
   };
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "PageTitle",
-    className: (0, _classify.default)(_PageTitleModule.default.pageTitleWrapper, classNames?.wrapper)
+    className: (0, _classify.default)(_PageTitleModule.default.pageTitleWrapper, classNames?.wrapper),
+    ref: ref
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_PageTitleModule.default.leftSlot, classNames?.leftSlot)
   }, pageNameKey && PAGE_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement(PageName, null, /*#__PURE__*/React.createElement(_Text.TitleMedium, null, PAGE_NAME_LIST[pageNameKey].title, " "), /*#__PURE__*/React.createElement(_Icon.Icon, {
@@ -177,5 +178,5 @@ const PageTitle = _ref4 => {
   })) : getNamedComp('PageName'), getNamedComp('TabSlot')), /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_PageTitleModule.default.rightSlot, classNames?.rightSlot)
   }, getNamedComp('RightSlot')));
-};
+});
 exports.PageTitle = PageTitle;

package/lib/components/PageTitle/PageTitle.js.flow

@@ -161,50 +161,52 @@ export const PageName = ({children, ...props}: PageNameProps): React.Node => (
 );
 PageName.displayName = 'PageName';
 
-export const PageTitle = ({
-  classNames,
-  children,
-  pageNameKey,
-}: PageTitleProps): React.Node => {
-  const getNamedComp = (comp: string) => {
-    const childrenArray = React.Children.toArray(children);
-    if (childrenArray.length) {
-      const nodes: React.Node[] = [];
-      for (const child of childrenArray) {
-        if (child?.type?.displayName === comp) {
-          nodes.push(child);
+export const PageTitle: React$AbstractComponent<
+  PageTitleProps,
+  HTMLDivElement,
+> = React.forwardRef<PageTitleProps, HTMLDivElement>(
+  ({classNames, children, pageNameKey}: PageTitleProps, ref): React.Node => {
+    const getNamedComp = (comp: string) => {
+      const childrenArray = React.Children.toArray(children);
+      if (childrenArray.length) {
+        const nodes: React.Node[] = [];
+        for (const child of childrenArray) {
+          if (child?.type?.displayName === comp) {
+            nodes.push(child);
+          }
         }
+        return nodes.length > 1 ? nodes : nodes[0];
       }
-      return nodes.length > 1 ? nodes : nodes[0];
-    }
-    return null;
-  };
-
-  return (
-    <div
-      data-testid="PageTitle"
-      className={classify(css.pageTitleWrapper, classNames?.wrapper)}
-    >
-      <div className={classify(css.leftSlot, classNames?.leftSlot)}>
-        {pageNameKey && PAGE_NAME_LIST[pageNameKey] ? (
-          <PageName>
-            <TitleMedium>{PAGE_NAME_LIST[pageNameKey].title} </TitleMedium>
-            <Icon
-              type={PAGE_NAME_LIST[pageNameKey].iconType}
-              name={PAGE_NAME_LIST[pageNameKey].iconName}
-              size="medium"
-              color={TEXT_COLORS.primary}
-              swapOpacity={PAGE_NAME_LIST[pageNameKey].iconSwapOpacity}
-            />
-          </PageName>
-        ) : (
-          getNamedComp('PageName')
-        )}
-        {getNamedComp('TabSlot')}
-      </div>
-      <div className={classify(css.rightSlot, classNames?.rightSlot)}>
-        {getNamedComp('RightSlot')}
+      return null;
+    };
+
+    return (
+      <div
+        data-testid="PageTitle"
+        className={classify(css.pageTitleWrapper, classNames?.wrapper)}
+        ref={ref}
+      >
+        <div className={classify(css.leftSlot, classNames?.leftSlot)}>
+          {pageNameKey && PAGE_NAME_LIST[pageNameKey] ? (
+            <PageName>
+              <TitleMedium>{PAGE_NAME_LIST[pageNameKey].title} </TitleMedium>
+              <Icon
+                type={PAGE_NAME_LIST[pageNameKey].iconType}
+                name={PAGE_NAME_LIST[pageNameKey].iconName}
+                size="medium"
+                color={TEXT_COLORS.primary}
+                swapOpacity={PAGE_NAME_LIST[pageNameKey].iconSwapOpacity}
+              />
+            </PageName>
+          ) : (
+            getNamedComp('PageName')
+          )}
+          {getNamedComp('TabSlot')}
+        </div>
+        <div className={classify(css.rightSlot, classNames?.rightSlot)}>
+          {getNamedComp('RightSlot')}
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  },
+);

package/lib/components/Pagination/PaginationItem.js

@@ -23,10 +23,10 @@ const PaginationButton = props => {
   } = props;
   const paginationBtnRef = React.useRef(null);
   React.useEffect(() => {
-    if (disabled || selected) {
+    if (selected) {
       paginationBtnRef.current?.blur();
     }
-  }, [disabled, selected]);
+  }, [selected]);
   switch (type) {
     case 'first':
       return /*#__PURE__*/React.createElement(_Button.Button, {

package/lib/components/Pagination/PaginationItem.js.flow

@@ -16,10 +16,10 @@ export const PaginationButton = (props: PaginationItemProps): React.Node => {
   const paginationBtnRef = React.useRef(null);
 
   React.useEffect(() => {
-    if (disabled || selected) {
+    if (selected) {
       paginationBtnRef.current?.blur();
     }
-  }, [disabled, selected]);
+  }, [selected]);
 
   switch (type) {
   case 'first':