@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

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

@@ -0,0 +1,231 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {ColorTypes} from '../../types/typography';
+import {TEXT_COLORS} from '../../types/typography';
+import classify from '../../utils/classify';
+import {ConditionalWrapper} from '../ConditionalWrapper';
+import type {IconSize, IconType} from '../Icon';
+import {Icon, ICON_SIZE} from '../Icon';
+
+import css from '../../styles/typography.module.css';
+
+
+export const LINK_AS = Object.freeze({
+  bodyLarge: 'bodyLarge',
+  bodyMedium: 'bodyMedium',
+  bodySmall: 'bodySmall',
+  buttonTextExtraSmall: 'buttonTextExtraSmall',
+  buttonTextMedium: 'buttonTextMedium',
+  buttonTextSmall: 'buttonTextSmall',
+  formInputMedium: 'formInputMedium',
+  formInputSmall: 'formInputSmall',
+  formLabelMedium: 'formLabelMedium',
+  formLabelSmall: 'formLabelSmall',
+  jumboMedium: 'jumboMedium',
+  subTitleExtraSmall: 'subTitleExtraSmall',
+  subTitleLarge: 'subTitleLarge',
+  subTitleMedium: 'subTitleMedium',
+  subTitleSmall: 'subTitleSmall',
+  titleMedium: 'titleMedium',
+});
+
+export type LinkAs = $Values<typeof LINK_AS>;
+
+export const ANCHOR_REL = Object.freeze({
+  alternate: 'alternate',
+  author: 'author',
+  bookmark: 'bookmark',
+  external: 'external',
+  help: 'help',
+  license: 'license',
+  next: 'next',
+  nofollow: 'nofollow',
+  noopener: 'noopener',
+  noreferrer: 'noreferrer',
+  search: 'search',
+  tag: 'tag',
+});
+
+export type AnchorRel = $Values<typeof ANCHOR_REL>;
+
+export const ANCHOR_TARGET = Object.freeze({
+  _blank: '_blank',
+  _self: '_self',
+  _parent: '_parent',
+  _top: '_top',
+  framename: 'framename',
+});
+
+export type AnchorTarget = $Values<typeof ANCHOR_TARGET>;
+
+export type BaseLinkProps = {
+  children: React.Node,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  tabIndex?: number,
+  disabled?: boolean,
+  className?: string,
+  as?: LinkAs,
+  rel?: AnchorRel,
+  target?: AnchorTarget,
+  iconLeftName?: string,
+  iconLeftSize?: IconSize,
+  iconLeftType?: IconType,
+  iconRightName?: string,
+  iconRightSize?: IconSize,
+  iconRightType?: IconType,
+  /**
+   * IMPORTANT: If you are using `to` make sure to provide link component from your router
+   * if you want to prevent full page reloads in a Single Page Application (SPA).
+   *
+   * Using `href` in anchor tags causes the browser to navigate to a new URL,
+   * resulting in a full page reload. However, in a Single Page Application (SPA), we aim to provide a seamless
+   * user experience without such reloads.
+   *
+   * To achieve client-side navigation and prevent page reloads, use client-side routing libraries
+   * (e.g., React Router) and their navigation components (e.g., <Link> or <a> with an onClick handler)
+   * to handle navigation within your SPA. These components work without triggering full page reloads
+   * and maintain the SPA's performance and user experience.
+   *
+   */
+  to?: string,
+  href?: string,
+  ...
+};
+
+export type LinkProps = {
+  ...BaseLinkProps,
+  color?: ColorTypes,
+  underline?: boolean,
+  /**
+   * Provide your router's link component
+   *
+   * import {Link} from 'src/rerouter';
+   * import {Link as GenesisLink} from '@spaced-out/ui-design-system/lib/components/Link';
+   *
+   * <GenesisLink linkComponent={Link} to="/pages" />
+   */
+  linkComponent?: React.AbstractComponent<BaseLinkProps, ?HTMLAnchorElement>,
+  ...
+};
+
+export const Link: React$AbstractComponent<LinkProps, ?HTMLAnchorElement> =
+  React.forwardRef<LinkProps, ?HTMLAnchorElement>(
+    (
+      {
+        color = TEXT_COLORS.clickable,
+        children,
+        className,
+        as = 'buttonTextExtraSmall',
+        underline = true,
+        tabIndex = 0,
+        disabled,
+        onClick,
+        linkComponent: LinkComponent = DefaultLink,
+        iconLeftName,
+        iconLeftSize = ICON_SIZE.small,
+        iconLeftType,
+        iconRightName,
+        iconRightSize = ICON_SIZE.small,
+        iconRightType,
+        ...props
+      }: LinkProps,
+      ref,
+    ) => {
+      const linkRef = React.useRef(null);
+      React.useImperativeHandle(ref, () => linkRef.current);
+      React.useEffect(() => {
+        if (disabled) {
+          linkRef.current?.blur();
+        }
+      }, [disabled]);
+
+      const handleClick = (event: SyntheticEvent<HTMLElement>) => {
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+
+        onClick?.(event);
+      };
+
+      /**
+       * By spec anchor tag wont call onClick on enter key press when the element is focussed
+       * as a workaround we would need to listen to key press event and call onClick
+       * manually, one workaround to avoid this is to have empty href along with onClick
+       * but that would break accessibility
+       */
+      const handleKeyPress = (event) => {
+        if (event.key === 'Enter' && onClick) {
+          handleClick(event);
+        }
+      };
+
+      return (
+        <LinkComponent
+          {...props}
+          tabIndex={disabled ? -1 : tabIndex}
+          ref={linkRef}
+          data-testid="Link"
+          className={classify(
+            css.link,
+            css[as],
+            css[color],
+            {
+              [css.underline]: underline && !(iconLeftName || iconRightName),
+              [css.disabled]: disabled,
+            },
+            className,
+          )}
+          onClick={handleClick}
+          onKeyPress={handleKeyPress}
+        >
+          {!!iconLeftName && (
+            <Icon
+              name={iconLeftName}
+              size={iconLeftSize}
+              type={iconLeftType}
+              className={classify(css[color], {[css.disabled]: disabled})}
+            />
+          )}
+
+          <ConditionalWrapper
+            condition={Boolean(iconLeftName || iconRightName)}
+            wrapper={(children) => (
+              <span
+                className={classify({
+                  [css.underline]: underline,
+                })}
+              >
+                {children}
+              </span>
+            )}
+          >
+            {children}
+          </ConditionalWrapper>
+
+          {!!iconRightName && (
+            <Icon
+              name={iconRightName}
+              size={iconRightSize}
+              type={iconRightType}
+              className={css[color]}
+            />
+          )}
+        </LinkComponent>
+      );
+    },
+  );
+
+const DefaultLink = React.forwardRef<BaseLinkProps, HTMLAnchorElement>(
+  ({children, href, to, ...props}, ref) => {
+    const resolvedHref = to ?? href;
+
+    return (
+      <a {...props} href={resolvedHref} ref={ref}>
+        {children}
+      </a>
+    );
+  },
+);

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

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

package/lib/components/Menu/Menu.js

@@ -14,7 +14,7 @@ var _MenuOptionButton = require("./MenuOptionButton");
 var _MenuModule = _interopRequireDefault(require("./Menu.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // $FlowIssue[nonstrict-import] react-window
 // Render first available option set
 
 const menuSizeMedium = 276,
@@ -56,10 +56,7 @@ const RenderOption = _ref => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, allowSearch && showResultText && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
       className: _MenuModule.default.filterOptionsResultText,
       color: "tertiary"
-    }, finalResultText), virtualization && isVirtualizationEnabled ?
-    /*#__PURE__*/
-    // @ts-ignore - TS2769 - No overload matches this call.
-    React.createElement(_reactWindow.FixedSizeList, {
+    }, finalResultText), virtualization && isVirtualizationEnabled ? /*#__PURE__*/React.createElement(_reactWindow.FixedSizeList, {
       height: menuHeight || (size === 'medium' ? menuSizeMedium : menuSizeSmall),
       itemSize: itemHeight || (size === 'medium' ? buttonSizeMedium : buttonSizeSmall),
       itemCount: optionsFiltered.length

package/lib/components/Menu/Menu.js.flow

@@ -0,0 +1,391 @@
+// @flow strict
+import * as React from 'react';
+// $FlowIssue[nonstrict-import] react-window
+import {FixedSizeList} from 'react-window';
+
+import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
+import {classify} from '../../utils/classify';
+import {
+  getFilteredComposeOptionsFromSearchText,
+  getFilteredComposeOptionsResultText,
+  getFilteredGroupTitleOptionsFromSearchText,
+  getFilteredGroupTitleOptionsResultText,
+  getFilteredOptionsFromSearchText,
+  getFilteredOptionsResultText,
+} from '../../utils/menu';
+import type {IconType} from '../Icon/Icon';
+import {SearchInput} from '../SearchInput';
+import {FormLabelSmall} from '../Text';
+
+import {MenuOptionButton} from './MenuOptionButton';
+
+import css from './Menu.module.css';
+
+
+type ClassNames = MenuClassNames;
+
+type OptionClassNames = $ReadOnly<{
+  wrapper?: string,
+}>;
+
+export type Virtualization = $ReadOnly<{
+  enable: boolean,
+  itemHeight?: number,
+  menuHeight?: number,
+}>;
+
+export type MenuOption = {
+  key: string,
+  classNames?: OptionClassNames,
+  label?: string,
+  secondaryLabel?: string,
+  customComponent?: React.Node,
+  iconLeft?: string,
+  iconLeftType?: IconType,
+  iconRight?: string,
+  iconRightType?: IconType,
+  disabled?: boolean,
+  optionSize?: MenuSizeTypes,
+  optionVariant?: MenuOptionsVariant,
+  keepMenuOpenOnOptionSelect?: boolean,
+  indeterminate?: boolean,
+};
+
+// Render first available option set
+
+export type BaseMenuProps = {
+  onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
+  selectedOption?: ?MenuOption,
+  optionsVariant?: MenuOptionsVariant,
+  selectedKeys?: Array<string>,
+  classNames?: ClassNames,
+  size?: MenuSizeTypes,
+  width?: string,
+  menuDisabled?: boolean,
+  isFluid?: boolean,
+  // onTabOut is a callback function that is called when
+  // the user navigates outside of the menu using the tab key.
+  onTabOut?: () => mixed,
+  allowSearch?: boolean,
+  // A function that resolves the label for a MenuOption.
+  // It takes a MenuOption as a parameter and returns either a string or a React Node.
+  resolveLabel?: (option: MenuOption) => string | React.Node,
+  // A function that resolves the secondaryLabel for a MenuOption.
+  // It takes a MenuOption as a parameter and returns either a string or a React Node.
+  resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
+  // When virtualization is enabled, the MenuOptionButtons will be rendered only when they are present in the Menu's viewport
+  virtualization?: Virtualization,
+  header?: React.Node,
+  footer?: React.Node,
+  showResultText?: boolean,
+  staticLabels?: {
+    RESULT?: string,
+    RESULTS?: string,
+    SEARCH_PLACEHOLDER?: string,
+  },
+  showLabelTooltip?: MenuLabelTooltip,
+  allowWrap?: boolean,
+};
+
+export type MenuOptionTypes = {
+  options?: Array<MenuOption>,
+  composeOptions?: Array<Array<MenuOption>>,
+  groupTitleOptions?: Array<MenuGroupTitleOption>,
+};
+
+export type MenuSizeTypes = 'medium' | 'small';
+export type MenuOptionsVariant = 'checkbox' | 'radio' | 'normal';
+
+export type MenuGroupTitleOption = {
+  groupTitle?: React.Node,
+  options?: Array<MenuOption>,
+  showLineDivider?: boolean,
+};
+
+export type MenuProps = {
+  ...BaseMenuProps,
+  ...MenuOptionTypes,
+};
+
+export type RenderOptionProps = {
+  ...MenuProps,
+  searchText?: string,
+};
+
+const menuSizeMedium = 276,
+  menuSizeSmall = 228;
+
+const buttonSizeMedium = 40,
+  buttonSizeSmall = 32;
+
+const RenderOption = ({
+  options,
+  composeOptions,
+  groupTitleOptions,
+  classNames,
+  searchText = '',
+  showResultText = true,
+  staticLabels = {
+    RESULT: 'result',
+    RESULTS: 'results',
+    SEARCH_PLACEHOLDER: 'Search...',
+  },
+  ...restProps
+}: RenderOptionProps): React.Node => {
+  const {
+    allowSearch,
+    size,
+    virtualization = {
+      enable: false,
+      menuHeight: null,
+      itemHeight: null,
+    },
+  } = restProps;
+  if (options && Array.isArray(options) && options.length) {
+    const optionsFiltered = !allowSearch
+      ? options
+      : getFilteredOptionsFromSearchText(options, searchText);
+    const finalResultText = !allowSearch
+      ? ''
+      : getFilteredOptionsResultText(optionsFiltered, staticLabels);
+
+    const {
+      enable: isVirtualizationEnabled,
+      menuHeight,
+      itemHeight,
+    } = virtualization;
+
+    return (
+      <>
+        {allowSearch && showResultText && (
+          <FormLabelSmall
+            className={css.filterOptionsResultText}
+            color="tertiary"
+          >
+            {finalResultText}
+          </FormLabelSmall>
+        )}
+        {virtualization && isVirtualizationEnabled ? (
+          <FixedSizeList
+            height={
+              menuHeight || (size === 'medium' ? menuSizeMedium : menuSizeSmall)
+            }
+            itemSize={
+              itemHeight ||
+              (size === 'medium' ? buttonSizeMedium : buttonSizeSmall)
+            }
+            itemCount={optionsFiltered.length}
+          >
+            {({index: idx, style}) => {
+              const buttonOption = optionsFiltered[idx];
+              return (
+                <React.Fragment key={buttonOption.key}>
+                  <MenuOptionButton
+                    option={buttonOption}
+                    classNames={classNames}
+                    style={style}
+                    {...restProps}
+                    isLastItem={idx === optionsFiltered.length - 1}
+                  />
+                </React.Fragment>
+              );
+            }}
+          </FixedSizeList>
+        ) : (
+          optionsFiltered.map((option, idx) => (
+            <React.Fragment key={option.key}>
+              <MenuOptionButton
+                option={option}
+                classNames={classNames}
+                {...restProps}
+                isLastItem={idx === optionsFiltered.length - 1}
+              />
+            </React.Fragment>
+          ))
+        )}
+      </>
+    );
+  }
+  if (
+    composeOptions &&
+    Array.isArray(composeOptions) &&
+    composeOptions.length
+  ) {
+    const optionsFiltered = !allowSearch
+      ? composeOptions
+      : getFilteredComposeOptionsFromSearchText(composeOptions, searchText);
+    const finalResultText = !allowSearch
+      ? ''
+      : getFilteredComposeOptionsResultText(optionsFiltered, staticLabels);
+
+    return (
+      <>
+        {allowSearch && showResultText && (
+          <FormLabelSmall
+            className={css.filterOptionsResultText}
+            color="tertiary"
+          >
+            {finalResultText}
+          </FormLabelSmall>
+        )}
+        {optionsFiltered.map((composeMenuOptions, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <span key={index} className={css.menuDivider}>
+            {composeMenuOptions.map((option, idx) => (
+              <React.Fragment key={option.key}>
+                <MenuOptionButton
+                  option={option}
+                  classNames={classNames}
+                  {...restProps}
+                  isLastItem={
+                    index === optionsFiltered.length - 1 &&
+                    idx === composeMenuOptions.length - 1
+                  }
+                />
+              </React.Fragment>
+            ))}
+          </span>
+        ))}
+      </>
+    );
+  }
+  if (
+    groupTitleOptions &&
+    Array.isArray(groupTitleOptions) &&
+    groupTitleOptions.length
+  ) {
+    const optionsFiltered = !allowSearch
+      ? groupTitleOptions
+      : getFilteredGroupTitleOptionsFromSearchText(
+        groupTitleOptions,
+        searchText,
+      );
+    const finalResultText = !allowSearch
+      ? ''
+      : getFilteredGroupTitleOptionsResultText(optionsFiltered, staticLabels);
+
+    return (
+      <>
+        {allowSearch && showResultText && (
+          <FormLabelSmall
+            className={css.filterOptionsResultText}
+            color="tertiary"
+          >
+            {finalResultText}
+          </FormLabelSmall>
+        )}
+        {optionsFiltered.map((optionsGroup, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <React.Fragment key={index}>
+            {!!optionsGroup.groupTitle && (
+              <div
+                className={classify(
+                  css.groupTitleWrapper,
+                  classNames?.groupTitle,
+                )}
+              >
+                {optionsGroup.groupTitle}
+              </div>
+            )}
+
+            {optionsGroup.options?.map((option, idx) => (
+              <React.Fragment key={option.key}>
+                <MenuOptionButton
+                  option={option}
+                  classNames={classNames}
+                  {...restProps}
+                  isLastItem={
+                    index === optionsFiltered.length - 1 &&
+                    idx ===
+                      (optionsGroup.options && optionsGroup.options.length - 1)
+                  }
+                />
+              </React.Fragment>
+            ))}
+          </React.Fragment>
+        ))}
+      </>
+    );
+  }
+  return <></>;
+};
+
+export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
+  React.forwardRef<MenuProps, HTMLDivElement>(
+    (props: MenuProps, ref): React.Node => {
+      const {
+        classNames,
+        size = 'medium',
+        width,
+        isFluid = true,
+        allowSearch,
+        virtualization = {
+          enable: false,
+          menuHeight: null,
+          itemHeight: null,
+        },
+        header,
+        footer,
+        staticLabels,
+      } = props;
+      const [searchText, setSearchText] = React.useState('');
+      const {menuHeight} = virtualization;
+
+      const hasHeader = header ? true : false;
+      const hasFooter = footer ? true : false;
+
+      return (
+        <div
+          className={classify(
+            css.menuCard,
+            {
+              [css.fluid]: isFluid,
+              [css.medium]: size === 'medium',
+              [css.mediumWithHeader]:
+                size === 'medium' && hasHeader && !hasFooter,
+              [css.mediumWithFooter]:
+                size === 'medium' && !hasHeader && hasFooter,
+              [css.mediumWithHeaderAndFooter]:
+                size === 'medium' && hasFooter && hasHeader,
+              [css.small]: size === 'small',
+              [css.smallWithHeader]:
+                size === 'small' && hasHeader && !hasFooter,
+              [css.smallWithFooter]:
+                size === 'small' && !hasHeader && hasFooter,
+              [css.smallWithHeaderAndFooter]:
+                size === 'small' && hasFooter && hasHeader,
+              [css.menuCardTopPaddingZero]: header,
+              [css.menuCardBottomPaddingZero]: footer,
+            },
+            classNames?.wrapper,
+          )}
+          style={{
+            width,
+            maxHeight: menuHeight ? menuHeight + 'px' : '',
+          }}
+          ref={ref}
+        >
+          {hasHeader && (
+            <div className={classify(css.menuHeader, classNames?.header)}>
+              {header}
+            </div>
+          )}
+          {allowSearch && (
+            <SearchInput
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              onClear={() => setSearchText('')}
+              size={size}
+              placeholder={staticLabels?.SEARCH_PLACEHOLDER ?? 'Search...'}
+            />
+          )}
+          <RenderOption {...props} searchText={searchText} />
+          {hasFooter && (
+            <div className={classify(css.menuFooter, classNames?.footer)}>
+              {footer}
+            </div>
+          )}
+        </div>
+      );
+    },
+  );

package/lib/components/Menu/MenuOptionButton.js

@@ -82,9 +82,7 @@ const MenuOptionButton = props => {
       [_MenuModule.default.disabled]: menuDisabled || disabled,
       [_MenuModule.default.withIconLeft]: !!iconLeft,
       [_MenuModule.default.withIconRight]: !!iconRight
-    }, classNames?.option, optionClassNames?.wrapper)
-    // @ts-ignore - TS2769 - No overload matches this call.
-    ,
+    }, classNames?.option, optionClassNames?.wrapper),
     style: style,
     disabled: menuDisabled || disabled,
     onClick: e => onSelect && onSelect(option, e),
@@ -119,7 +117,6 @@ const MenuOptionButton = props => {
     className: (0, _classify.classify)(_MenuModule.default.icon, _MenuModule.default.rightIcon)
   }));
 };
-// @ts-ignore - TS2322 - Type 'string | Node | undefined' is not assignable to type 'React.ReactNode'.
 exports.MenuOptionButton = MenuOptionButton;
 const renderLabel = (label, allowWrap, showLabelTooltip) => {
   if (showLabelTooltip) {
@@ -140,7 +137,5 @@ const renderLabel = (label, allowWrap, showLabelTooltip) => {
       line: 3
     }, label);
   }
-
-  // @ts-ignore - TS2769 - No overload matches this call.
   return /*#__PURE__*/React.createElement(_Truncate.Truncate, null, label);
 };