@spaced-out/ui-design-system 0.4.15 → 0.5.1

package/lib/components/Button/Button.js.flow

@@ -1,286 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import {classify} from '../../utils/classify';
-import {CircularLoader} from '../CircularLoader';
-import type {IconType} from '../Icon';
-import {Icon} from '../Icon';
-import {Truncate} from '../Truncate';
-
-import css from './Button.module.css';
-
-
-type ClassNames = $ReadOnly<{wrapper?: string, icon?: string, text?: string}>;
-
-/**
- * Note(Nishant): Although Button supports gradient as a type, its not currently customizable really.
- * This only supports pre-defined gradient that moves from left to right.
- * If someone wants to add more gradients, the expectation is that they would add it through a wrapper className.
- *
- * We could have taken an extra prop to take in the Gradient colors but that should not be encouraged
- * as it would add an additional overhead on the component to figure out exact color values from string tokens
- * and since this is rarely used type anyway, it should be avoided.
- */
-export const BUTTON_TYPES = Object.freeze({
-  primary: 'primary',
-  secondary: 'secondary',
-  tertiary: 'tertiary',
-  ghost: 'ghost',
-  danger: 'danger',
-  gradient: 'gradient',
-});
-
-export const BUTTON_ACTION_TYPE = Object.freeze({
-  button: 'button',
-  submit: 'submit',
-  reset: 'reset',
-});
-
-export const BUTTON_SIZE = Object.freeze({
-  small: 'small',
-  medium: 'medium',
-});
-
-export type ButtonType = $Values<typeof BUTTON_TYPES>;
-export type ButtonActionType = $Values<typeof BUTTON_ACTION_TYPE>;
-export type ButtonSize = $Keys<typeof BUTTON_SIZE>;
-
-export type BaseButtonProps = {
-  children?: React.Node,
-  disabled?: mixed,
-  actionType?: ButtonActionType,
-  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  ariaLabel?: string,
-  tabIndex?: number,
-  isLoading?: boolean,
-  role?: string,
-  ...
-};
-
-export type UnstyledButtonProps = {
-  ...BaseButtonProps,
-  className?: string,
-  ...
-};
-
-export type ButtonProps = {
-  ...BaseButtonProps,
-  classNames?: ClassNames,
-  iconLeftName?: string,
-  iconLeftType?: IconType,
-  iconRightName?: string,
-  iconRightType?: IconType,
-  type?: ButtonType,
-  isFluid?: boolean,
-  size?: ButtonSize,
-  ...
-};
-
-const ButtonTypeToIconColorMap = {
-  primary: 'inversePrimary',
-  secondary: 'clickable',
-  tertiary: 'primary',
-  ghost: 'primary',
-  danger: 'inversePrimary',
-  gradient: 'inversePrimary',
-};
-
-const ButtonTypeToLoaderColorMap = {
-  primary: 'colorTextInversePrimary',
-  secondary: 'colorTextClickable',
-  tertiary: 'colorTextPrimary',
-  ghost: 'colorTextPrimary',
-  danger: 'colorTextInversePrimary',
-  gradient: 'colorTextInversePrimary',
-};
-
-export const UnstyledButton: React$AbstractComponent<
-  UnstyledButtonProps,
-  HTMLButtonElement,
-> = React.forwardRef<UnstyledButtonProps, HTMLButtonElement>(
-  (
-    {
-      disabled,
-      onClick,
-      className,
-      ariaLabel,
-      actionType,
-      tabIndex = 0,
-      isLoading,
-      role = 'button',
-      ...props
-    }: UnstyledButtonProps,
-    ref,
-  ) => (
-    <button
-      {...props}
-      {...(ariaLabel ? {'aria-label': ariaLabel} : {})}
-      className={className}
-      ref={ref}
-      role={role}
-      disabled={disabled}
-      tabIndex={disabled ? -1 : tabIndex}
-      type={actionType}
-      onClick={(event) => {
-        if (disabled || isLoading) {
-          event.preventDefault();
-        } else if (onClick) {
-          onClick(event);
-        }
-      }}
-    />
-  ),
-);
-
-export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
-  React.forwardRef<ButtonProps, HTMLButtonElement>(
-    (
-      {
-        classNames,
-        children,
-        iconLeftName = '',
-        iconLeftType = 'regular',
-        iconRightName = '',
-        iconRightType = 'regular',
-        type = 'primary',
-        isFluid = false,
-        disabled = false,
-        actionType = 'button',
-        size = 'medium',
-        isLoading,
-        ...props
-      }: ButtonProps,
-      ref,
-    ) => (
-      <UnstyledButton
-        {...props}
-        actionType={actionType}
-        disabled={disabled}
-        isLoading={isLoading}
-        className={classify(
-          css.button,
-          {
-            [css.primary]: type === 'primary',
-            [css.secondary]: type === 'secondary',
-            [css.tertiary]: type === 'tertiary',
-            [css.ghost]: type === 'ghost',
-            [css.danger]: type === 'danger',
-            [css.gradient]: type === 'gradient',
-            [css.disabled]: disabled,
-            [css.small]: size === 'small',
-            [css.medium]: size === 'medium',
-            [css.isFluid]: isFluid === true,
-            [css.withIconLeft]: !!iconLeftName,
-            [css.withIconRight]: !!iconRightName,
-            [css.withBothIcon]: !!(iconLeftName && iconRightName),
-            [css.onlyIcon]: (iconLeftName || iconRightName) && !children,
-          },
-          classNames?.wrapper,
-        )}
-        ref={ref}
-      >
-        <div className={css.buttonRow}>
-          {/* Has no icon, only child */}
-          {!(iconLeftName || iconRightName) ? (
-            <div className={classify(css.textContainer, classNames?.text)}>
-              {isLoading && (
-                <div className={css.loader}>
-                  <CircularLoader
-                    size={size}
-                    colorToken={
-                      disabled
-                        ? 'colorTextDisabled'
-                        : ButtonTypeToLoaderColorMap[type]
-                    }
-                  />
-                </div>
-              )}
-              <Truncate className={classify({[css.hidden]: isLoading})}>
-                {children}
-              </Truncate>
-            </div>
-          ) : // has icon, but no child
-            children == null ? (
-              <>
-                {isLoading && (
-                  <div className={css.loader}>
-                    <CircularLoader
-                      size={size}
-                      colorToken={
-                        disabled
-                          ? 'colorTextDisabled'
-                          : ButtonTypeToLoaderColorMap[type]
-                      }
-                    />
-                  </div>
-                )}
-                <Icon
-                  name={iconLeftName || iconRightName}
-                  color={disabled ? 'disabled' : ButtonTypeToIconColorMap[type]}
-                  size={size === 'medium' ? 'medium' : 'small'}
-                  type={iconLeftName ? iconLeftType : iconRightType}
-                  className={classify(
-                    {[css.hidden]: isLoading},
-                    classNames?.icon,
-                  )}
-                />
-              </>
-            ) : (
-            // has icon _and_ child
-              (iconLeftName || iconRightName) && (
-                <>
-                  {iconLeftName && (
-                    <Icon
-                      name={iconLeftName}
-                      color={
-                        disabled ? 'disabled' : ButtonTypeToIconColorMap[type]
-                      }
-                      size={size === 'medium' ? 'medium' : 'small'}
-                      type={iconLeftType}
-                      className={classify(
-                        {[css.hidden]: isLoading},
-                        classNames?.icon,
-                      )}
-                    />
-                  )}
-                  <div className={classify(css.textContainer, classNames?.text)}>
-                    {isLoading && (
-                      <div className={css.loader}>
-                        <CircularLoader
-                          size={size}
-                          colorToken={
-                            disabled
-                              ? 'colorTextDisabled'
-                              : ButtonTypeToLoaderColorMap[type]
-                          }
-                        />
-                      </div>
-                    )}
-                    <Truncate className={classify({[css.hidden]: isLoading})}>
-                      {children}
-                    </Truncate>
-                  </div>
-                  {iconRightName && (
-                    <Icon
-                      name={iconRightName}
-                      color={
-                        disabled ? 'disabled' : ButtonTypeToIconColorMap[type]
-                      }
-                      size={size === 'medium' ? 'medium' : 'small'}
-                      type={iconRightType}
-                      className={classify(
-                        {[css.hidden]: isLoading},
-                        classNames?.icon,
-                      )}
-                    />
-                  )}
-                </>
-              )
-            )}
-        </div>
-      </UnstyledButton>
-    ),
-  );
-
-Button.name = Button.displayName = 'Button';

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

@@ -1,16 +0,0 @@
-// @flow strict
-
-export type {
-  ButtonActionType,
-  ButtonProps,
-  ButtonSize,
-  ButtonType,
-  UnstyledButtonProps,
-} from './Button';
-export {
-  Button,
-  BUTTON_ACTION_TYPE,
-  BUTTON_SIZE,
-  BUTTON_TYPES,
-  UnstyledButton,
-} from './Button';

package/lib/components/ButtonDropdown/ButtonDropdown.js.flow

@@ -1,226 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-import {
-  // $FlowFixMe[untyped-import]
-  autoUpdate,
-  // $FlowFixMe[untyped-import]
-  flip,
-  // $FlowFixMe[untyped-import]
-  FloatingFocusManager,
-  // $FlowFixMe[untyped-import]
-  FloatingPortal,
-  // $FlowFixMe[untyped-import]
-  offset,
-  // $FlowFixMe[untyped-import]
-  shift,
-  // $FlowFixMe[untyped-import]
-  useFloating,
-} from '@floating-ui/react';
-
-import {useReferenceElementWidth} from '../../hooks';
-import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
-import {classify} from '../../utils/classify';
-import {ClickAway, type ClickAwayRefType} from '../../utils/click-away';
-import {mergeRefs} from '../../utils/merge-refs';
-import type {ButtonProps} from '../Button';
-import {Button} from '../Button';
-import {ConditionalWrapper} from '../ConditionalWrapper';
-import type {MenuOption, MenuProps} from '../Menu';
-import {Menu} from '../Menu';
-import type {BaseTooltipProps, ElevationType} from '../Tooltip';
-import {getElevationValue, Tooltip} from '../Tooltip';
-
-import css from './ButtonDropdown.module.css';
-
-
-export const ANCHOR_POSITION_TYPE = Object.freeze({
-  top: 'top',
-  topStart: 'top-start',
-  topEnd: 'top-end',
-  bottom: 'bottom',
-  bottomStart: 'bottom-start',
-  bottomEnd: 'bottom-end',
-});
-
-export const STRATEGY_TYPE = Object.freeze({
-  absolute: 'absolute',
-  fixed: 'fixed',
-});
-
-export type AnchorType = $Values<typeof ANCHOR_POSITION_TYPE>;
-export type Strategy = $Values<typeof STRATEGY_TYPE>;
-
-type ClassNames = $ReadOnly<{
-  buttonWrapper?: string,
-  dropdownContainer?: string,
-  buttonIcon?: string,
-}>;
-
-export type ButtonDropdownProps = {
-  ...ButtonProps,
-  classNames?: ClassNames,
-  menu?: MenuProps,
-  positionStrategy?: Strategy,
-  anchorPosition?: AnchorType,
-  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
-  onMenuOpen?: () => mixed,
-  onMenuClose?: () => mixed,
-  tooltip?: BaseTooltipProps,
-  elevation?: ElevationType,
-  clickAwayRef?: ClickAwayRefType,
-  ...
-};
-
-export const ButtonDropdown: React$AbstractComponent<
-  ButtonDropdownProps,
-  HTMLDivElement,
-> = React.forwardRef<ButtonDropdownProps, HTMLDivElement>(
-  (
-    {
-      anchorPosition = 'bottom-start',
-      positionStrategy = STRATEGY_TYPE.absolute,
-      size = 'medium',
-      onOptionSelect,
-      menu,
-      classNames,
-      disabled,
-      onMenuOpen,
-      onMenuClose,
-      children,
-      iconRightName,
-      iconRightType = 'solid',
-      isFluid,
-      tooltip,
-      onClick,
-      elevation = 'modal',
-      clickAwayRef,
-      ...restButtonProps
-    }: ButtonDropdownProps,
-    forwardRef,
-  ) => {
-    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-
-    const {x, y, refs, strategy, context} = useFloating({
-      open: true,
-      strategy: positionStrategy,
-      placement: anchorPosition,
-      whileElementsMounted: autoUpdate,
-      middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
-    });
-
-    const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
-
-    const onMenuToggle = (isOpen: boolean) => {
-      if (isOpen) {
-        onMenuOpen?.();
-        setIsMenuOpen(true);
-      } else {
-        onMenuClose?.();
-        setIsMenuOpen(false);
-      }
-    };
-
-    return (
-      <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
-        {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
-          <div
-            data-testid="ButtonDropdown"
-            className={classify(
-              css.buttonDropdownContainer,
-              {
-                [css.isFluid]: isFluid === true,
-              },
-              classNames?.dropdownContainer,
-            )}
-            ref={forwardRef}
-          >
-            <ConditionalWrapper
-              condition={Boolean(tooltip)}
-              wrapper={(children) => (
-                <Tooltip
-                  {...tooltip}
-                  hidden={isMenuOpen ? true : tooltip?.hidden}
-                >
-                  {children}
-                </Tooltip>
-              )}
-            >
-              <Button
-                {...restButtonProps}
-                iconRightName={
-                  children
-                    ? iconRightName || (isOpen ? 'caret-up' : 'caret-down')
-                    : iconRightName
-                }
-                iconRightType={iconRightType}
-                disabled={disabled}
-                size={size}
-                ref={mergeRefs([refs.setReference, triggerRef])}
-                onClick={(e) => {
-                  onClick?.(e);
-                  e.stopPropagation();
-                  onOpen();
-                }}
-                isFluid={isFluid}
-                classNames={{
-                  wrapper: classNames?.buttonWrapper,
-                  icon: classNames?.buttonIcon,
-                }}
-              >
-                {children}
-              </Button>
-            </ConditionalWrapper>
-
-            {isOpen && menu && (
-              <FloatingPortal>
-                <FloatingFocusManager
-                  modal={false}
-                  context={context}
-                  initialFocus={refs.reference}
-                >
-                  <div
-                    className={css.menuWrapper}
-                    ref={mergeRefs([refs.setFloating, boundaryRef])}
-                    style={{
-                      display: 'flex',
-                      position: strategy,
-                      top: y ?? spaceNone,
-                      left: x ?? spaceNone,
-                      /* NOTE(Sharad): The FloatingPortal renders the menu outside the normal DOM structure,
-                       so its parent is effectively the <body> element. This means the menu
-                       would otherwise default to the body's width. To support fluid width,
-                       we must manually set the dropdown width here; otherwise, it uses a fixed width.
-                       Also, Only treat menu as non-fluid if isFluid is strictly false, since default is true in menu and undefined means fluid. */
-                      ...(menu.isFluid !== false && {
-                        '--dropdown-width': dropdownWidth,
-                      }),
-                      '--menu-elevation': getElevationValue(elevation),
-                    }}
-                  >
-                    <Menu
-                      {...menu}
-                      onSelect={(option, e) => {
-                        onOptionSelect && onOptionSelect(option, e);
-                        if (
-                          // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
-                          !option.keepMenuOpenOnOptionSelect &&
-                          (!menu.optionsVariant ||
-                            menu.optionsVariant === 'normal')
-                        ) {
-                          clickAway();
-                        }
-                      }}
-                      size={menu.size || size}
-                      onTabOut={clickAway}
-                    />
-                  </div>
-                </FloatingFocusManager>
-              </FloatingPortal>
-            )}
-          </div>
-        )}
-      </ClickAway>
-    );
-  },
-);

package/lib/components/ButtonDropdown/SimpleButtonDropdown.js.flow

@@ -1,169 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
-import type {ClickAwayRefType} from '../../utils/click-away';
-import {
-  getButtonLabelFromSelectedKeys,
-  getSelectedKeysFromSelectedOption,
-} from '../../utils/menu';
-import type {ButtonProps} from '../Button';
-import type {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
-import type {BaseTooltipProps, ElevationType} from '../Tooltip';
-
-import type {AnchorType} from './ButtonDropdown';
-import {ButtonDropdown} from './ButtonDropdown';
-
-
-type ClassNames = $ReadOnly<{
-  buttonWrapper?: string,
-  dropdownContainer?: string,
-  buttonIcon?: string,
-}>;
-
-export type SimpleButtonDropdownRef = {
-  selectedKeys?: Array<string>,
-};
-
-export type SimpleButtonDropdownProps = {
-  // Input props
-  ...ButtonProps,
-
-  elevation?: ElevationType,
-  classNames?: ClassNames,
-  anchorPosition?: AnchorType,
-  tooltip?: BaseTooltipProps,
-
-  // Menu props
-  options?: Array<MenuOption>,
-  optionsVariant?: MenuOptionsVariant,
-  allowSearch?: boolean,
-  selectedKeys?: Array<string>,
-  menuVirtualization?: Virtualization,
-  header?: React.Node,
-  footer?: React.Node,
-  menuClassNames?: MenuClassNames,
-  showLabelTooltip?: MenuLabelTooltip,
-  allowWrap?: boolean,
-
-  // events
-  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
-  onMenuOpen?: () => mixed,
-  onMenuClose?: () => mixed,
-
-  // Resolvers
-  resolveLabel?: (option: MenuOption) => string | React.Node,
-  resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
-  clickAwayRef?: ClickAwayRefType,
-  ...
-};
-
-const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
-  const {
-    size = 'medium',
-    classNames,
-    anchorPosition,
-    options,
-    optionsVariant,
-    allowSearch,
-    selectedKeys,
-    onOptionSelect,
-    onMenuOpen,
-    onMenuClose,
-    resolveLabel,
-    resolveSecondaryLabel,
-    children,
-    isFluid,
-    menuVirtualization,
-    header,
-    footer,
-    menuClassNames,
-    showLabelTooltip,
-    allowWrap = false,
-    clickAwayRef,
-    elevation = 'modal',
-    ...buttonProps
-  } = props;
-
-  const [btnText, setBtnText] = React.useState('');
-  const [buttonDropdownSelectedKeys, setButtonDropdownSelectedKeys] =
-    React.useState(selectedKeys);
-
-  React.useEffect(() => {
-    const newBtnText = getButtonLabelFromSelectedKeys(selectedKeys, children);
-
-    setButtonDropdownSelectedKeys(selectedKeys);
-    setBtnText(newBtnText);
-  }, [selectedKeys]);
-
-  const handleOptionChange = (selectedOption: MenuOption, e) => {
-    e?.stopPropagation();
-    let newSelectedKeys = [];
-
-    if (optionsVariant === 'checkbox') {
-      newSelectedKeys = getSelectedKeysFromSelectedOption(
-        selectedOption,
-        buttonDropdownSelectedKeys,
-      );
-    } else {
-      newSelectedKeys = [selectedOption.key];
-    }
-
-    const newBtnText = getButtonLabelFromSelectedKeys(
-      newSelectedKeys,
-      children,
-    );
-
-    setButtonDropdownSelectedKeys(newSelectedKeys);
-    setBtnText(newBtnText);
-
-    setTimeout(() => {
-      onOptionSelect?.(selectedOption, e);
-    });
-  };
-
-  React.useImperativeHandle(ref, () => ({
-    selectedKeys: buttonDropdownSelectedKeys,
-  }));
-
-  return (
-    <ButtonDropdown
-      {...buttonProps}
-      anchorPosition={anchorPosition}
-      classNames={classNames}
-      size={size}
-      onOptionSelect={handleOptionChange}
-      onMenuOpen={onMenuOpen}
-      elevation={elevation}
-      onMenuClose={onMenuClose}
-      clickAwayRef={clickAwayRef}
-      menu={{
-        // TODO (Sharad): The isFluid prop here controls menu width unlike ButtonDropdown, and is independent from the isFluid prop in ButtonDropdown. There should be a way to set the isFluid prop of ButtonDropdown.
-        isFluid,
-        options,
-        selectedKeys: buttonDropdownSelectedKeys,
-        optionsVariant,
-        allowSearch,
-        resolveLabel,
-        resolveSecondaryLabel,
-        size,
-        virtualization: menuVirtualization,
-        header,
-        footer,
-        classNames: menuClassNames,
-        showLabelTooltip,
-        allowWrap,
-      }}
-    >
-      {optionsVariant === 'checkbox' ? btnText : children}
-    </ButtonDropdown>
-  );
-};
-
-export const SimpleButtonDropdown: React.AbstractComponent<
-  SimpleButtonDropdownProps,
-  SimpleButtonDropdownRef,
-> = React.forwardRef<SimpleButtonDropdownProps, SimpleButtonDropdownRef>(
-  SimpleButtonDropdownBase,
-);

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

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