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

package/lib/components/SideMenuLink/SideMenuLink.js

@@ -112,7 +112,7 @@ const MENU_NAME_LIST = Object.freeze({
   }
 });
 exports.MENU_NAME_LIST = MENU_NAME_LIST;
-const SideMenuLink = _ref => {
+const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     pageNameKey,
@@ -131,7 +131,8 @@ const SideMenuLink = _ref => {
       [_SideMenuLinkModule.default.disabled]: disabled,
       [_SideMenuLinkModule.default.closed]: !opened
     }, classNames?.wrapper),
-    onClick: onChangeHandler
+    onClick: onChangeHandler,
+    ref: ref
   }, pageNameKey && MENU_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     type: MENU_NAME_LIST[pageNameKey].iconType,
     name: MENU_NAME_LIST[pageNameKey].iconName,
@@ -142,5 +143,5 @@ const SideMenuLink = _ref => {
     color: _Text.TEXT_COLORS.inverseSecondary,
     className: _SideMenuLinkModule.default.menuText
   }, MENU_NAME_LIST[pageNameKey].title) : null);
-};
+});
 exports.SideMenuLink = SideMenuLink;

package/lib/components/SideMenuLink/SideMenuLink.js.flow

@@ -121,48 +121,57 @@ export type SideMenuLinkProps = {
   onChange?: (newValue: string) => mixed,
 };
 
-export const SideMenuLink = ({
-  classNames,
-  pageNameKey,
-  disabled,
-  opened,
-  selectedValue,
-  onChange,
-}: SideMenuLinkProps): React.Node => {
-  const selected = selectedValue === pageNameKey;
-  const onChangeHandler = () => {
-    onChange && onChange(pageNameKey);
-  };
-  return (
-    <div
-      className={classify(
-        css.linkWrapper,
-        {
-          [css.selected]: selected,
-          [css.disabled]: disabled,
-          [css.closed]: !opened,
-        },
-        classNames?.wrapper,
-      )}
-      onClick={onChangeHandler}
-    >
-      {pageNameKey && MENU_NAME_LIST[pageNameKey] ? (
-        <Icon
-          type={MENU_NAME_LIST[pageNameKey].iconType}
-          name={MENU_NAME_LIST[pageNameKey].iconName}
-          size="medium"
-          color={TEXT_COLORS.inverseSecondary}
-          className={css.menuIcon}
-        />
-      ) : null}
-      {pageNameKey && MENU_NAME_LIST[pageNameKey] && opened ? (
-        <SubTitleSmall
-          color={TEXT_COLORS.inverseSecondary}
-          className={css.menuText}
-        >
-          {MENU_NAME_LIST[pageNameKey].title}
-        </SubTitleSmall>
-      ) : null}
-    </div>
-  );
-};
+export const SideMenuLink: React$AbstractComponent<
+  SideMenuLinkProps,
+  HTMLDivElement,
+> = React.forwardRef<SideMenuLinkProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      pageNameKey,
+      disabled,
+      opened,
+      selectedValue,
+      onChange,
+    }: SideMenuLinkProps,
+    ref,
+  ): React.Node => {
+    const selected = selectedValue === pageNameKey;
+    const onChangeHandler = () => {
+      onChange && onChange(pageNameKey);
+    };
+    return (
+      <div
+        className={classify(
+          css.linkWrapper,
+          {
+            [css.selected]: selected,
+            [css.disabled]: disabled,
+            [css.closed]: !opened,
+          },
+          classNames?.wrapper,
+        )}
+        onClick={onChangeHandler}
+        ref={ref}
+      >
+        {pageNameKey && MENU_NAME_LIST[pageNameKey] ? (
+          <Icon
+            type={MENU_NAME_LIST[pageNameKey].iconType}
+            name={MENU_NAME_LIST[pageNameKey].iconName}
+            size="medium"
+            color={TEXT_COLORS.inverseSecondary}
+            className={css.menuIcon}
+          />
+        ) : null}
+        {pageNameKey && MENU_NAME_LIST[pageNameKey] && opened ? (
+          <SubTitleSmall
+            color={TEXT_COLORS.inverseSecondary}
+            className={css.menuText}
+          >
+            {MENU_NAME_LIST[pageNameKey].title}
+          </SubTitleSmall>
+        ) : null}
+      </div>
+    );
+  },
+);

package/lib/components/StatusIndicator/StatusIndicator.js

@@ -20,7 +20,7 @@ const STATUS_SEMANTIC = Object.freeze({
   neutral: 'neutral'
 });
 exports.STATUS_SEMANTIC = STATUS_SEMANTIC;
-const StatusIndicator = _ref => {
+const StatusIndicator = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     status = 'information',
@@ -33,9 +33,10 @@ const StatusIndicator = _ref => {
     className: (0, _classify.default)(_StatusIndicatorModule.default.statusWrapper, _StatusIndicatorModule.default[status], {
       [_StatusIndicatorModule.default.withBorder]: withBorder
     }, classNames?.wrapper),
+    ref: ref,
     style: {
       '--border-color': COLORS[borderColorToken] || COLORS['colorBackgroundTertiary']
     }
   }));
-};
+});
 exports.StatusIndicator = StatusIndicator;

package/lib/components/StatusIndicator/StatusIndicator.js.flow

@@ -28,27 +28,36 @@ export type StatusIndicatorProps = {
   ...
 };
 
-export const StatusIndicator = ({
-  classNames,
-  status = 'information',
-  withBorder,
-  borderColorToken = 'colorBackgroundTertiary',
-  ...props
-}: StatusIndicatorProps): React.Node => (
-  <div
-    {...props}
-    data-testid="StatusIndicator"
-    className={classify(
-      css.statusWrapper,
-      css[status],
-      {
-        [css.withBorder]: withBorder,
-      },
-      classNames?.wrapper,
-    )}
-    style={{
-      '--border-color':
-        COLORS[borderColorToken] || COLORS['colorBackgroundTertiary'],
-    }}
-  ></div>
+export const StatusIndicator: React$AbstractComponent<
+  StatusIndicatorProps,
+  HTMLDivElement,
+> = React.forwardRef<StatusIndicatorProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      status = 'information',
+      withBorder,
+      borderColorToken = 'colorBackgroundTertiary',
+      ...props
+    }: StatusIndicatorProps,
+    ref,
+  ): React.Node => (
+    <div
+      {...props}
+      data-testid="StatusIndicator"
+      className={classify(
+        css.statusWrapper,
+        css[status],
+        {
+          [css.withBorder]: withBorder,
+        },
+        classNames?.wrapper,
+      )}
+      ref={ref}
+      style={{
+        '--border-color':
+          COLORS[borderColorToken] || COLORS['colorBackgroundTertiary'],
+      }}
+    ></div>
+  ),
 );

package/lib/components/SubMenu/SubMenu.js

@@ -163,7 +163,7 @@ const SubMenuGroup = _ref5 => {
   }, childrenWithProps));
 };
 exports.SubMenuGroup = SubMenuGroup;
-const SubMenu = _ref6 => {
+const SubMenu = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     classNames,
     children,
@@ -179,7 +179,8 @@ const SubMenu = _ref6 => {
     }
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_SubMenuModule.default.subMenuWrapper, classNames?.wrapper)
+    className: (0, _classify.default)(_SubMenuModule.default.subMenuWrapper, classNames?.wrapper),
+    ref: ref
   }, /*#__PURE__*/React.createElement("div", {
     className: _SubMenuModule.default.subMenuTitleAndButton
   }, /*#__PURE__*/React.createElement(_Text.SubTitleMedium, {
@@ -197,6 +198,6 @@ const SubMenu = _ref6 => {
       icon: _SubMenuModule.default.subMenuCloseIcon
     }
   })), childrenWithProps);
-};
+});
 exports.SubMenu = SubMenu;
 SubMenu.displayName = 'SubMenu';

package/lib/components/SubMenu/SubMenu.js.flow

@@ -250,46 +250,49 @@ export type SubMenuProps = {
   showClose?: boolean,
 };
 
-export const SubMenu = ({
-  classNames,
-  children,
-  title,
-  onClose,
-  showClose = false,
-}: SubMenuProps): React.Node => {
-  const childrenWithProps = React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      return <div className={css.menuChildWrap}>{child}</div>;
-    }
-  });
+export const SubMenu: React$AbstractComponent<SubMenuProps, HTMLDivElement> =
+  React.forwardRef<SubMenuProps, HTMLDivElement>(
+    (
+      {classNames, children, title, onClose, showClose = false}: SubMenuProps,
+      ref,
+    ): React.Node => {
+      const childrenWithProps = React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return <div className={css.menuChildWrap}>{child}</div>;
+        }
+      });
 
-  return (
-    <div className={classify(css.subMenuWrapper, classNames?.wrapper)}>
-      <div className={css.subMenuTitleAndButton}>
-        <SubTitleMedium
-          className={css.subMenuHeader}
-          color={TEXT_COLORS.inversePrimary}
+      return (
+        <div
+          className={classify(css.subMenuWrapper, classNames?.wrapper)}
+          ref={ref}
         >
-          {title}
-        </SubTitleMedium>
-        {showClose && (
-          <Button
-            ariaLabel="Icon Button"
-            iconRightName="close"
-            onClick={onClose}
-            size="small"
-            type="ghost"
-            actionType="button"
-            classNames={{
-              wrapper: css.subMenuCloseButton,
-              icon: css.subMenuCloseIcon,
-            }}
-          />
-        )}
-      </div>
-      {childrenWithProps}
-    </div>
+          <div className={css.subMenuTitleAndButton}>
+            <SubTitleMedium
+              className={css.subMenuHeader}
+              color={TEXT_COLORS.inversePrimary}
+            >
+              {title}
+            </SubTitleMedium>
+            {showClose && (
+              <Button
+                ariaLabel="Icon Button"
+                iconRightName="close"
+                onClick={onClose}
+                size="small"
+                type="ghost"
+                actionType="button"
+                classNames={{
+                  wrapper: css.subMenuCloseButton,
+                  icon: css.subMenuCloseIcon,
+                }}
+              />
+            )}
+          </div>
+          {childrenWithProps}
+        </div>
+      );
+    },
   );
-};
 
 SubMenu.displayName = 'SubMenu';

package/lib/components/Table/StaticTable.js

@@ -39,8 +39,11 @@ function StaticTable(props) {
     showHeader = true,
     tableHeaderClassName,
     sortable,
+    // eslint-disable-next-line unused-imports/no-unused-vars
     defaultSortKey,
+    // eslint-disable-next-line unused-imports/no-unused-vars
     defaultSortDirection = 'original',
+    // eslint-disable-next-line unused-imports/no-unused-vars
     onSort,
     handleSortClick,
     sortKey,

package/lib/components/Table/StaticTable.js.flow

@@ -48,8 +48,11 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
     showHeader = true,
     tableHeaderClassName,
     sortable,
+    // eslint-disable-next-line unused-imports/no-unused-vars
     defaultSortKey,
+    // eslint-disable-next-line unused-imports/no-unused-vars
     defaultSortDirection = 'original',
+    // eslint-disable-next-line unused-imports/no-unused-vars
     onSort,
     handleSortClick,
     sortKey,

package/lib/components/Table/Table.js

@@ -25,26 +25,36 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
  */
 function Table(props) {
   const {
+    // eslint-disable-next-line unused-imports/no-unused-vars
     className,
+    // eslint-disable-next-line unused-imports/no-unused-vars
     classNames,
+    // eslint-disable-next-line unused-imports/no-unused-vars
     Row,
     entries,
+    // eslint-disable-next-line unused-imports/no-unused-vars
     extras,
+    // eslint-disable-next-line unused-imports/no-unused-vars
     headers,
+    // eslint-disable-next-line unused-imports/no-unused-vars
     showHeader = true,
+    // eslint-disable-next-line unused-imports/no-unused-vars
     tableHeaderClassName,
     sortable = true,
     defaultSortKey,
     defaultSortDirection = 'original',
     onSort,
+    // eslint-disable-next-line unused-imports/no-unused-vars
     isLoading,
     idName = 'id',
+    // eslint-disable-next-line unused-imports/no-unused-vars
     emptyText
   } = props;
 
   /**
    *
    */
+  // eslint-disable-next-line unused-imports/no-unused-vars
   const {
     sortedEntries,
     sortedKeys,

package/lib/components/Table/Table.js.flow

@@ -69,26 +69,36 @@ export function Table<Data: GenericObject, Extras: GenericObject>(
   props: TableProps<Data, Extras>,
 ): React.Node {
   const {
+    // eslint-disable-next-line unused-imports/no-unused-vars
     className,
+    // eslint-disable-next-line unused-imports/no-unused-vars
     classNames,
+    // eslint-disable-next-line unused-imports/no-unused-vars
     Row,
     entries,
+    // eslint-disable-next-line unused-imports/no-unused-vars
     extras,
+    // eslint-disable-next-line unused-imports/no-unused-vars
     headers,
+    // eslint-disable-next-line unused-imports/no-unused-vars
     showHeader = true,
+    // eslint-disable-next-line unused-imports/no-unused-vars
     tableHeaderClassName,
     sortable = true,
     defaultSortKey,
     defaultSortDirection = 'original',
     onSort,
+    // eslint-disable-next-line unused-imports/no-unused-vars
     isLoading,
     idName = 'id',
+    // eslint-disable-next-line unused-imports/no-unused-vars
     emptyText,
   } = props;
 
   /**
    *
    */
+  // eslint-disable-next-line unused-imports/no-unused-vars
   const {sortedEntries, sortedKeys, ...sortableProps} = useSortableEntries(
     entries,
     idName,

package/lib/components/Table/hooks.js

@@ -33,6 +33,7 @@ function useSortableEntries(entries, idName, _ref) {
   };
   const advanceSortDirection = dir => {
     const nextDirection = getNextDirection(dir);
+    // eslint-disable-next-line unused-imports/no-unused-vars
     setSortDirection(dir => nextDirection);
     return nextDirection;
   };

package/lib/components/Table/hooks.js.flow

@@ -46,6 +46,7 @@ export function useSortableEntries<T: GenericObject>(
   };
   const advanceSortDirection = (dir: SortDirection) => {
     const nextDirection = getNextDirection(dir);
+    // eslint-disable-next-line unused-imports/no-unused-vars
     setSortDirection((dir) => nextDirection);
     return nextDirection;
   };

package/lib/components/Tabs/TabList/TabList.js

@@ -14,7 +14,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 TabList = _ref => {
+const TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     classNames,
     children,
@@ -24,6 +24,7 @@ const TabList = _ref => {
     menuWidth
   } = _ref;
   const ref = React.useRef(null);
+  React.useImperativeHandle(forwardRef, () => ref.current);
   const [containerWidth, setContainerWidth] = React.useState(0);
   const childrenWithProps = () => {
     const childrenArray = React.Children.toArray(children);
@@ -121,5 +122,5 @@ const TabList = _ref => {
       [_TabListModule.default.smallSize]: size === 'small'
     }, classNames?.wrapper)
   }, containerWidth ? childrenWithProps() : null);
-};
+});
 exports.TabList = TabList;