@spaced-out/ui-design-system 0.4.15-beta.0 → 0.4.15

package/lib/components/Stepper/Step/Step.js.flow

@@ -0,0 +1,123 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../../utils/classify';
+import type {IconType} from '../../Icon';
+import {Icon, ICON_SIZE, ICON_TYPE} from '../../Icon';
+
+import css from '../Stepper.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  stepCounter?: string,
+  content?: string,
+}>;
+
+export type StepProps = {
+  active?: boolean,
+  children: React.Node,
+  completed?: boolean,
+  disabled?: boolean,
+  expanded?: boolean,
+  index: number,
+  last?: boolean,
+  classNames?: ClassNames,
+  allowClick?: boolean,
+  onClick?: (idx: number, e?: ?SyntheticEvent<HTMLElement>) => mixed,
+  iconName?: string,
+  iconType?: IconType,
+};
+
+export const Step: React$AbstractComponent<StepProps, HTMLDivElement> =
+  React.forwardRef<StepProps, HTMLDivElement>(
+    (
+      {
+        active,
+        children,
+        completed = false,
+        disabled = false,
+        expanded = false,
+        index = 0,
+        last,
+        classNames,
+        onClick,
+        allowClick,
+        iconName,
+        iconType,
+      }: StepProps,
+      ref,
+    ): React.Node => {
+      const childrenArray = React.Children.toArray(children).filter(Boolean);
+      const stepContent = childrenArray.map((stepContent) =>
+        React.cloneElement(stepContent, {
+          ...stepContent.props,
+          active,
+          completed,
+          disabled,
+        }),
+      );
+
+      const handleClick = (e) => allowClick && onClick?.(index, e);
+
+      return (
+        <div
+          ref={ref}
+          className={classify(
+            css.stepWrapper,
+            {
+              [css.active]: active,
+              [css.completed]: completed,
+              [css.expanded]: expanded,
+              [css.last]: last,
+              [css.disabled]: disabled,
+              [css.clickable]: allowClick,
+            },
+            classNames?.wrapper,
+          )}
+          onClick={handleClick}
+        >
+          <div
+            className={classify(
+              css.stepWrapperCounter,
+              {
+                [css.selected]: active,
+                [css.completed]: completed,
+                [css.expanded]: expanded,
+                [css.last]: last,
+                [css.disabled]: disabled,
+                [css.withIcon]: !!iconName,
+              },
+              classNames?.stepCounter,
+            )}
+          >
+            {completed && !active ? (
+              <Icon
+                name="check"
+                type={ICON_TYPE.solid}
+                size={ICON_SIZE.small}
+                className={css.stepIcon}
+              />
+            ) : (
+              <React.Fragment>
+                {iconName ? (
+                  <Icon
+                    name={iconName}
+                    className={css.stepIcon}
+                    size={ICON_SIZE.small}
+                    type={iconType}
+                  />
+                ) : (
+                  (index + 1).toString()
+                )}
+              </React.Fragment>
+            )}
+          </div>
+          <div className={classify(css.stepContent, classNames?.content)}>
+            {stepContent}
+          </div>
+        </div>
+      );
+    },
+  );

package/lib/components/Stepper/Step/StepContent.js.flow

@@ -0,0 +1,40 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../../utils/classify';
+
+import css from '../Stepper.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type StepContentProps = {
+  children: React.Node,
+  active?: boolean,
+  completed?: boolean,
+  disabled?: boolean,
+  classNames?: ClassNames,
+};
+
+export const StepContent = ({
+  children,
+  classNames,
+  active,
+  completed = false,
+  disabled = false,
+}: StepContentProps): React.Node => (
+  <div
+    className={classify(
+      css.stepContentWrapper,
+      {
+        [css.active]: active,
+        [css.completed]: completed,
+        [css.disabled]: disabled,
+      },
+      classNames?.wrapper,
+    )}
+  >
+    {children}
+  </div>
+);

package/lib/components/Stepper/Step/StepLabel.js.flow

@@ -0,0 +1,40 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../../utils/classify';
+
+import css from '../Stepper.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type StepLabelProps = {
+  children: React.Node,
+  active?: boolean,
+  completed?: boolean,
+  disabled?: boolean,
+  classNames?: ClassNames,
+};
+
+export const StepLabel = ({
+  children,
+  classNames,
+  active,
+  completed = false,
+  disabled = false,
+}: StepLabelProps): React.Node => (
+  <div
+    className={classify(
+      css.stepLabelWrapper,
+      {
+        [css.active]: active,
+        [css.completed]: completed,
+        [css.disabled]: disabled,
+      },
+      classNames?.wrapper,
+    )}
+  >
+    {children}
+  </div>
+);

package/lib/components/Stepper/Step/index.js.flow

@@ -0,0 +1,5 @@
+// @flow strict
+
+export * from './Step';
+export * from './StepContent';
+export * from './StepLabel';

package/lib/components/Stepper/Stepper.js

@@ -20,7 +20,6 @@ const Stepper = exports.Stepper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const childrenArray = React.Children.toArray(children).filter(Boolean);
   const steps = childrenArray.map((step, index) => {
     let isLastStepCompleted = false;
-    // @ts-ignore - TS2339 - Property 'props' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>'.
     const {
       disabled: disabledChild,
       onClick
@@ -28,12 +27,9 @@ const Stepper = exports.Stepper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     if (index === 0) {
       isLastStepCompleted = true;
     } else {
-      // @ts-ignore - TS2339 - Property 'props' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>'.
       isLastStepCompleted = childrenArray[index - 1]?.props?.completed;
     }
-    // @ts-ignore - TS2769 - No overload matches this call.
     return /*#__PURE__*/React.cloneElement(step, {
-      // @ts-ignore - TS2339 - Property 'props' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>'.
       ...step.props,
       index,
       last: index + 1 === childrenArray.length,

package/lib/components/Stepper/Stepper.js.flow

@@ -0,0 +1,64 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+
+import css from './Stepper.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type StepperProps = {
+  classNames?: ClassNames,
+  activeStep?: number,
+  children: React.Node,
+  orientation?: 'horizontal' | 'vertical',
+  disabled?: boolean,
+};
+
+export const Stepper: React$AbstractComponent<StepperProps, HTMLDivElement> =
+  React.forwardRef<StepperProps, HTMLDivElement>(
+    (
+      {
+        activeStep = 0,
+        children,
+        orientation = 'horizontal',
+        classNames,
+        disabled = false,
+      }: StepperProps,
+      ref,
+    ) => {
+      const childrenArray = React.Children.toArray(children).filter(Boolean);
+      const steps = childrenArray.map((step, index) => {
+        let isLastStepCompleted = false;
+        const {disabled: disabledChild, onClick} = step.props;
+        if (index === 0) {
+          isLastStepCompleted = true;
+        } else {
+          isLastStepCompleted = childrenArray[index - 1]?.props?.completed;
+        }
+        return React.cloneElement(step, {
+          ...step.props,
+          index,
+          last: index + 1 === childrenArray.length,
+          active: index === activeStep,
+          allowClick: onClick && index !== activeStep && isLastStepCompleted,
+          disabled: disabledChild || disabled,
+        });
+      });
+
+      return (
+        <div
+          className={classify(
+            css.stepperWrapper,
+            css[orientation],
+            classNames?.wrapper,
+          )}
+          ref={ref}
+        >
+          {steps}
+        </div>
+      );
+    },
+  );

package/lib/components/Stepper/index.js.flow

@@ -0,0 +1,4 @@
+// @flow strict
+
+export * from './Step';
+export * from './Stepper';

package/lib/components/StickyBar/StickyBar.js.flow

@@ -0,0 +1,67 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+
+import css from './StickyBar.module.css';
+
+
+export type StickyBarProps = {
+  className?: string,
+  children: React.Node,
+  position?: 'top' | 'bottom',
+  ...
+};
+
+export type StickyBarChildProps = {
+  className?: string,
+  children: React.Node,
+  ...
+};
+
+export const StickyBarLeftSlot = ({
+  className,
+  children,
+  ...props
+}: StickyBarChildProps): React.Node => (
+  <div {...props} className={classify(css.leftSlot, className)}>
+    {children}
+  </div>
+);
+
+export const StickyBarRightSlot = ({
+  className,
+  children,
+  ...props
+}: StickyBarChildProps): React.Node => (
+  <div {...props} className={classify(css.rightSlot, className)}>
+    {children}
+  </div>
+);
+
+export const StickyBar: React$AbstractComponent<
+  StickyBarProps,
+  HTMLDivElement,
+> = React.forwardRef<StickyBarProps, HTMLDivElement>(
+  (
+    {className, children, position = 'bottom', ...props}: StickyBarProps,
+    ref,
+  ) => (
+    <div
+      {...props}
+      ref={ref}
+      data-testid="StickyBar"
+      className={classify(
+        css.wrapper,
+        {
+          [css.top]: position === 'top',
+          [css.bottom]: position === 'bottom',
+        },
+        className,
+      )}
+    >
+      {children}
+    </div>
+  ),
+);

package/lib/components/StickyBar/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './StickyBar';

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

@@ -0,0 +1,96 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import {Button} from '../Button';
+import type {IconSize, IconType} from '../Icon';
+import {Icon} from '../Icon';
+import {SubTitleMedium, TEXT_COLORS} from '../Text';
+
+import css from './SubMenu.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type SubMenuProps = {
+  classNames?: ClassNames,
+  title: string,
+  titleIcon?: string,
+  titleIconSize?: IconSize,
+  titleIconType?: IconType,
+  children?: React.Node,
+  onClose?: () => mixed,
+  showClose?: boolean,
+};
+
+export const SubMenu: React$AbstractComponent<SubMenuProps, HTMLDivElement> =
+  React.forwardRef<SubMenuProps, HTMLDivElement>(
+    (
+      {
+        classNames,
+        children,
+        title,
+        titleIcon,
+        titleIconSize,
+        titleIconType,
+        onClose,
+        showClose = false,
+      }: SubMenuProps,
+      ref,
+    ): React.Node => {
+      const childrenWithProps = React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return (
+            <div className={css.menuChildWrap}>
+              {React.cloneElement(child, {})}
+            </div>
+          );
+        }
+      });
+
+      return (
+        <div
+          className={classify(css.subMenuWrapper, classNames?.wrapper)}
+          ref={ref}
+        >
+          <div className={css.subMenuTitleAndButton}>
+            <div className={css.subMenuTitleWrapper}>
+              {!!titleIcon && (
+                <Icon
+                  color={TEXT_COLORS.inverseSecondary}
+                  name={titleIcon}
+                  type={titleIconType}
+                  size={titleIconSize}
+                  className={css.titleIcon}
+                />
+              )}
+              <SubTitleMedium
+                className={css.subMenuHeader}
+                color={TEXT_COLORS.inversePrimary}
+              >
+                {title}
+              </SubTitleMedium>
+            </div>
+            {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/SubMenu/SubMenuGroup.js

@@ -27,9 +27,7 @@ const SubMenuGroup = _ref => {
     status,
     classNames
   } = _ref;
-  const isSubMenuGroupChildSelected = React.Children.toArray(children).some(
-  // @ts-ignore - TS2339 - Property 'props' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>'.
-  child => child.props.menuKey === selectedMenuKey);
+  const isSubMenuGroupChildSelected = React.Children.toArray(children).some(child => child.props.menuKey === selectedMenuKey);
   const [collapsed, setCollapsed] = React.useState(!isSubMenuGroupChildSelected);
   const collapseHandler = () => {
     collapsible && setCollapsed(!collapsed);
@@ -44,12 +42,10 @@ const SubMenuGroup = _ref => {
   };
   const childrenWithProps = React.Children.map(children, child => {
     if (/*#__PURE__*/React.isValidElement(child)) {
-      // @ts-ignore - TS2339 - Property 'disabled' does not exist on type 'unknown'.
       const {
         disabled: disabledChild
       } = child.props;
       return /*#__PURE__*/React.cloneElement(child, {
-        // @ts-ignore - TS2769 - No overload matches this call.
         selectedMenuKey,
         onChange: onMenuItemChangeHandler,
         disabled: disabledChild || disabled
@@ -71,9 +67,7 @@ const SubMenuGroup = _ref => {
       [_SubMenuModule.default.collapsed]: !collapsed
     }, classNames?.groupHeader),
     onClick: collapseHandler,
-    onKeyDown: onKeyDownHandlerHeader
-    // @ts-ignore - TS2322 - Type 'string | number' is not assignable to type 'number | undefined'.
-    ,
+    onKeyDown: onKeyDownHandlerHeader,
     tabIndex: disabled ? '-1' : 0
   }, /*#__PURE__*/React.createElement("div", {
     className: _SubMenuModule.default.groupTitleWrapper
@@ -88,9 +82,7 @@ const SubMenuGroup = _ref => {
   }), !!status && collapsed && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_SubMenuModule.default.statusIndicatorWrapper)
   }, /*#__PURE__*/React.createElement(_StatusIndicator.StatusIndicator, {
-    status: status
-    // @ts-ignore - TS2769 - No overload matches this call.
-    ,
+    status: status,
     className: _SubMenuModule.default.statusIndicatorWrapper
   }))), /*#__PURE__*/React.createElement(_Text.ButtonTextMedium, {
     color: _Text.TEXT_COLORS.inverseSecondary,

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

@@ -0,0 +1,156 @@
+//@flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import {FocusManagerWithArrowKeyNavigation} from '../FocusManagerWithArrowKeyNavigation';
+import type {IconSize, IconType} from '../Icon';
+import {Icon} from '../Icon';
+import type {StatusSemanticType} from '../StatusIndicator';
+import {StatusIndicator} from '../StatusIndicator';
+import {ButtonTextMedium, TEXT_COLORS} from '../Text';
+
+import css from './SubMenu.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  groupHeader?: string,
+  menuGroup?: string,
+}>;
+
+export type SubMenuGroupProps = {
+  children?: React.Node,
+  groupTitle?: string,
+  groupIcon?: string,
+  groupIconSize?: IconSize,
+  groupIconType?: IconType,
+  collapsible?: boolean,
+  disabled?: boolean,
+  onChange?: (value: string) => mixed,
+  selectedMenuKey?: string,
+  status?: StatusSemanticType,
+  classNames?: ClassNames,
+};
+
+export const SubMenuGroup = ({
+  children,
+  groupTitle,
+  groupIcon,
+  groupIconSize,
+  groupIconType,
+  collapsible = false,
+  disabled = false,
+  onChange,
+  selectedMenuKey,
+  status,
+  classNames,
+}: SubMenuGroupProps): React.Node => {
+  const isSubMenuGroupChildSelected = React.Children.toArray(children).some(
+    (child) => child.props.menuKey === selectedMenuKey,
+  );
+
+  const [collapsed, setCollapsed] = React.useState(
+    !isSubMenuGroupChildSelected,
+  );
+
+  const collapseHandler = () => {
+    collapsible && setCollapsed(!collapsed);
+  };
+  const onMenuItemChangeHandler = (value) => {
+    onChange && onChange(value);
+  };
+  const onKeyDownHandlerHeader = (e) => {
+    if (e.key === 'Enter') {
+      collapseHandler();
+    }
+  };
+  const childrenWithProps = React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      const {disabled: disabledChild} = child.props;
+      return React.cloneElement(child, {
+        selectedMenuKey,
+        onChange: onMenuItemChangeHandler,
+        disabled: disabledChild || disabled,
+      });
+    }
+    return child;
+  });
+
+  React.useEffect(() => {
+    setCollapsed(!isSubMenuGroupChildSelected);
+  }, [selectedMenuKey]);
+
+  return (
+    <div className={classify(css.subMenuGroupWrapper, classNames?.wrapper)}>
+      <div
+        className={classify(
+          css.subMenuGroupHeader,
+          {[css.collapsible]: collapsible},
+          {[css.highlightedMenu]: isSubMenuGroupChildSelected},
+          {[css.collapsed]: !collapsed},
+          classNames?.groupHeader,
+        )}
+        onClick={collapseHandler}
+        onKeyDown={onKeyDownHandlerHeader}
+        tabIndex={disabled ? '-1' : 0}
+      >
+        <div className={css.groupTitleWrapper}>
+          {(!!groupIcon || !!status) && (
+            <div className={css.groupIconWrapper}>
+              {!!groupIcon && (
+                <Icon
+                  color={TEXT_COLORS.inverseSecondary}
+                  name={groupIcon}
+                  type={groupIconType}
+                  size={groupIconSize}
+                  className={css.groupIcon}
+                />
+              )}
+              {!!status && collapsed && (
+                <div className={classify(css.statusIndicatorWrapper)}>
+                  <StatusIndicator
+                    status={status}
+                    className={css.statusIndicatorWrapper}
+                  />
+                </div>
+              )}
+            </div>
+          )}
+          <ButtonTextMedium
+            color={TEXT_COLORS.inverseSecondary}
+            className={css.groupTitle}
+          >
+            {groupTitle}
+          </ButtonTextMedium>
+        </div>
+        {collapsible && (
+          <Icon
+            color={TEXT_COLORS.inverseSecondary}
+            name={collapsed ? 'chevron-down' : 'chevron-up'}
+            size="small"
+          />
+        )}
+      </div>
+      <div
+        className={classify(
+          css.subMenuGroup,
+          {
+            [css.collapsed]: collapsible && collapsed,
+          },
+          classNames?.menuGroup,
+        )}
+      >
+        <FocusManagerWithArrowKeyNavigation
+          classNames={{
+            wrapper: classify(css.subMenuFocusWrapper),
+          }}
+          focusItemOnOpen={true}
+          loop={true}
+        >
+          {childrenWithProps}
+        </FocusManagerWithArrowKeyNavigation>
+      </div>
+    </div>
+  );
+};