@spaced-out/ui-design-system 0.3.45 → 0.3.46

package/lib/components/Button/Button.d.ts

@@ -1,288 +0,0 @@
-import {$ReadOnly, $Values, $Keys} from 'utility-types';
-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.ReactNode;
-  disabled?: unknown;
-  actionType?: ButtonActionType;
-  onClick?:
-    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
-    | null
-    | undefined;
-  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.d.ts

@@ -1,14 +0,0 @@
-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.d.ts

@@ -1,192 +0,0 @@
-import {$Values, $ReadOnly} from 'utility-types';
-import * as React from 'react';
-import {
-  // $FlowFixMe[untyped-import]
-  autoUpdate, // $FlowFixMe[untyped-import]
-  flip, // $FlowFixMe[untyped-import]
-  offset, // $FlowFixMe[untyped-import]
-  shift, // $FlowFixMe[untyped-import]
-  useFloating,
-} from '@floating-ui/react';
-import {sizeFluid} from '../../styles/variables/_size';
-import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
-import {classify} from '../../utils/classify';
-import type {ClickAwayRefType} from '../../utils/click-away';
-import {ClickAway} 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} from '../Tooltip';
-import {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,
-    arg1: React.SyntheticEvent<HTMLElement> | null | undefined,
-  ) => unknown;
-  onMenuOpen?: () => unknown;
-  onMenuClose?: () => unknown;
-  tooltip?: BaseTooltipProps;
-  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,
-      clickAwayRef,
-      ...restButtonProps
-    }: ButtonDropdownProps,
-    forwardRef,
-  ) => {
-    const menuBtnRef = React.useRef(null);
-    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-    React.useImperativeHandle(forwardRef, () => menuBtnRef.current);
-    const {x, y, refs, strategy} = useFloating({
-      open: true,
-      strategy: positionStrategy,
-      placement: anchorPosition,
-      whileElementsMounted: autoUpdate,
-      middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
-    });
-
-    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={menuBtnRef}
-          >
-            <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 && (
-              <div
-                ref={mergeRefs([refs.setFloating, boundaryRef])}
-                style={{
-                  display: 'flex',
-                  position: strategy,
-                  top: y ?? spaceNone,
-                  left: x ?? spaceNone,
-                  ...(isFluid && {
-                    width: sizeFluid,
-                  }),
-                }}
-              >
-                <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>
-            )}
-          </div>
-        )}
-      </ClickAway>
-    );
-  },
-);

package/lib/components/ButtonDropdown/SimpleButtonDropdown.d.ts

@@ -1,148 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-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} 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 = ButtonProps & {
-  classNames?: ClassNames;
-  anchorPosition?: AnchorType;
-  tooltip?: BaseTooltipProps;
-  // Menu props
-  options?: Array<MenuOption>;
-  optionsVariant?: MenuOptionsVariant;
-  allowSearch?: boolean;
-  selectedKeys?: Array<string>;
-  menuVirtualization?: Virtualization;
-  header?: React.ReactNode;
-  footer?: React.ReactNode;
-  menuClassNames?: MenuClassNames;
-  showLabelTooltip?: MenuLabelTooltip;
-  allowWrap?: boolean;
-  // events
-  onOptionSelect?: (
-    option: MenuOption,
-    arg1: React.SyntheticEvent<HTMLElement> | null | undefined,
-  ) => unknown;
-  onMenuOpen?: () => unknown;
-  onMenuClose?: () => unknown;
-  // Resolvers
-  resolveLabel?: (option: MenuOption) => string | React.ReactNode;
-  resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;
-  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,
-    ...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}
-      onMenuClose={onMenuClose}
-      clickAwayRef={clickAwayRef}
-      menu={{
-        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.d.ts

@@ -1,2 +0,0 @@
-export * from './ButtonDropdown';
-export * from './SimpleButtonDropdown';