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

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

package/lib/components/SearchInput/SearchInput.js

@@ -13,7 +13,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 SearchInput = _ref => {
+const SearchInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     value,
     disabled,
@@ -33,6 +33,7 @@ const SearchInput = _ref => {
     className: (0, _classify.default)(_SearchInputModule.default.searchInputWrapper, classNames?.wrapper)
   }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, searchInputProps, {
     type: "text",
+    ref: ref,
     classNames: {
       iconRight: value && !(disabled || locked) ? _SearchInputModule.default.clickable : '',
       iconLeft: value && !disabled ? _SearchInputModule.default.primaryText : '',
@@ -55,5 +56,5 @@ const SearchInput = _ref => {
     className: _SearchInputModule.default.loader,
     size: "small"
   })));
-};
+});
 exports.SearchInput = SearchInput;

package/lib/components/SearchInput/SearchInput.js.flow

@@ -24,54 +24,63 @@ export type SearchInputProps = {
   ...
 };
 
-export const SearchInput = ({
-  value,
-  disabled,
-  locked,
-  placeholder = 'Search...',
-  classNames,
-  onClear,
-  isLoading,
-  size,
-  iconLeftName = 'magnifying-glass',
-  ...searchInputProps
-}: SearchInputProps): React.Node => {
-  const handleClearClick = () => {
-    onClear?.();
-  };
+export const SearchInput: React$AbstractComponent<
+  SearchInputProps,
+  HTMLInputElement,
+> = React.forwardRef<SearchInputProps, HTMLInputElement>(
+  (
+    {
+      value,
+      disabled,
+      locked,
+      placeholder = 'Search...',
+      classNames,
+      onClear,
+      isLoading,
+      size,
+      iconLeftName = 'magnifying-glass',
+      ...searchInputProps
+    }: SearchInputProps,
+    ref,
+  ): React.Node => {
+    const handleClearClick = () => {
+      onClear?.();
+    };
 
-  return (
-    <div className={classify(css.searchInputWrapper, classNames?.wrapper)}>
-      <Input
-        {...searchInputProps}
-        type="text"
-        classNames={{
-          iconRight: value && !(disabled || locked) ? css.clickable : '',
-          iconLeft: value && !disabled ? css.primaryText : '',
-          box: classNames?.box,
-        }}
-        placeholder={placeholder}
-        value={value}
-        disabled={disabled}
-        locked={locked}
-        iconLeftName={iconLeftName}
-        size={size}
-        iconRightName={value && !(disabled || locked) ? 'xmark' : 'fw'}
-        onIconRightClick={handleClearClick}
-      />
-      {isLoading && (
-        <div
-          className={classify(css.loaderContainer, {
-            [css.small]: size === 'small',
-          })}
-        >
-          <CircularLoader
-            colorToken="colorFillPrimary"
-            className={css.loader}
-            size="small"
-          />
-        </div>
-      )}
-    </div>
-  );
-};
+    return (
+      <div className={classify(css.searchInputWrapper, classNames?.wrapper)}>
+        <Input
+          {...searchInputProps}
+          type="text"
+          ref={ref}
+          classNames={{
+            iconRight: value && !(disabled || locked) ? css.clickable : '',
+            iconLeft: value && !disabled ? css.primaryText : '',
+            box: classNames?.box,
+          }}
+          placeholder={placeholder}
+          value={value}
+          disabled={disabled}
+          locked={locked}
+          iconLeftName={iconLeftName}
+          size={size}
+          iconRightName={value && !(disabled || locked) ? 'xmark' : 'fw'}
+          onIconRightClick={handleClearClick}
+        />
+        {isLoading && (
+          <div
+            className={classify(css.loaderContainer, {
+              [css.small]: size === 'small',
+            })}
+          >
+            <CircularLoader
+              colorToken="colorFillPrimary"
+              className={css.loader}
+              size="small"
+            />
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/lib/components/SearchInput/SearchInput.module.css

@@ -11,7 +11,7 @@
 .searchInputWrapper {
   display: flex;
   position: relative;
-  align-items: end;
+  align-items: flex-end;
   height: fit-content;
 }