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

package/lib/components/InlineDropdown/InlineDropdown.d.ts

@@ -0,0 +1,146 @@
+import {$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 {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 {UnstyledButtonProps} from '../Button';
+import {UnstyledButton} from '../Button';
+import type {AnchorType} from '../ButtonDropdown';
+import {Icon} from '../Icon';
+import type {MenuOption, MenuProps} from '../Menu';
+import {Menu} from '../Menu';
+import {Truncate} from '../Truncate';
+import css from './InlineDropdown.module.css';
+type ClassNames = $ReadOnly<{
+  buttonWrapper?: string;
+  dropdownContainer?: string;
+}>;
+export type InlineDropdownProps = UnstyledButtonProps & {
+  classNames?: ClassNames;
+  menu?: MenuProps;
+  anchorPosition?: AnchorType;
+  onOptionSelect?: (
+    option: MenuOption,
+    arg1: React.SyntheticEvent<HTMLElement> | null | undefined,
+  ) => unknown;
+  onMenuOpen?: () => unknown;
+  onMenuClose?: () => unknown;
+  size?: 'medium' | 'small' | 'extraSmall';
+  clickAwayRef?: ClickAwayRefType;
+};
+export const InlineDropdown: React$AbstractComponent<
+  InlineDropdownProps,
+  HTMLDivElement
+> = React.forwardRef<InlineDropdownProps, HTMLDivElement>(
+  (
+    {
+      anchorPosition = 'bottom-start',
+      size = 'medium',
+      onOptionSelect,
+      menu,
+      classNames,
+      disabled,
+      onMenuOpen,
+      onMenuClose,
+      children,
+      clickAwayRef,
+      ...restButtonProps
+    }: InlineDropdownProps,
+    ref,
+  ): React.ReactNode => {
+    const menuBtnRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => menuBtnRef.current);
+    const {x, y, refs, strategy} = useFloating({
+      open: true,
+      strategy: 'absolute',
+      placement: anchorPosition,
+      whileElementsMounted: autoUpdate,
+      middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
+    });
+
+    const onMenuToggle = (isOpen: boolean) => {
+      isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+    };
+
+    return (
+      <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
+        {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
+          <div
+            data-testid="InlineDropdown"
+            className={classify(
+              css.inlineDropdownContainer,
+              classNames?.dropdownContainer,
+            )}
+            ref={menuBtnRef}
+          >
+            <UnstyledButton
+              {...restButtonProps}
+              disabled={disabled}
+              ref={mergeRefs([refs.setReference, triggerRef])}
+              onClick={(e) => {
+                e.stopPropagation();
+                onOpen();
+              }}
+              className={classify(
+                css.inlineButton,
+                {
+                  [css.disabled]: disabled,
+                },
+                css[size],
+                classNames?.buttonWrapper,
+              )}
+            >
+              <Truncate>{children}</Truncate>
+              <Icon
+                name={isOpen ? 'caret-up' : 'caret-down'}
+                size="small"
+                type="solid"
+                className={classify({
+                  [css.disabled]: disabled,
+                })}
+              />
+            </UnstyledButton>
+            {isOpen && menu && (
+              <div
+                ref={mergeRefs([refs.setFloating, boundaryRef])}
+                style={{
+                  display: 'flex',
+                  position: strategy,
+                  top: y ?? spaceNone,
+                  left: x ?? spaceNone,
+                }}
+              >
+                <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 || 'medium'}
+                  onTabOut={clickAway}
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </ClickAway>
+    );
+  },
+);

package/lib/components/InlineDropdown/SimpleInlineDropdown.d.ts

@@ -0,0 +1,145 @@
+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 {AnchorType} from '../ButtonDropdown';
+import type {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
+import {InlineDropdown} from './InlineDropdown';
+type ClassNames = $ReadOnly<{
+  buttonWrapper?: string;
+  dropdownContainer?: string;
+}>;
+export type SimpleInlineDropdownRef = {
+  selectedKeys?: Array<string>;
+};
+export type SimpleInlineDropdownProps = ButtonProps & {
+  classNames?: ClassNames;
+  anchorPosition?: AnchorType;
+  // Menu props
+  options?: Array<MenuOption>;
+  optionsVariant?: MenuOptionsVariant;
+  allowSearch?: boolean;
+  selectedKeys?: Array<string>;
+  showLabelTooltip?: MenuLabelTooltip;
+  allowWrap?: boolean;
+  // events
+  onOptionSelect?: (
+    option: MenuOption,
+    arg1: React.SyntheticEvent<HTMLElement> | null | undefined,
+  ) => unknown;
+  onMenuOpen?: () => unknown;
+  onMenuClose?: () => unknown;
+  menuVirtualization?: Virtualization;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+  menuClassNames?: MenuClassNames;
+  // Resolvers
+  resolveLabel?: (option: MenuOption) => string | React.ReactNode;
+  resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;
+  clickAwayRef?: ClickAwayRefType;
+};
+
+const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
+  const {
+    size = 'medium',
+    classNames,
+    anchorPosition,
+    options,
+    optionsVariant,
+    allowSearch,
+    selectedKeys,
+    onOptionSelect,
+    onMenuOpen,
+    onMenuClose,
+    resolveLabel,
+    resolveSecondaryLabel,
+    children,
+    isFluid,
+    menuVirtualization,
+    header,
+    footer,
+    menuClassNames,
+    showLabelTooltip,
+    clickAwayRef,
+    allowWrap = false,
+    ...buttonProps
+  } = props;
+  const [btnText, setBtnText] = React.useState('');
+  const [inlineDropdownSelectedKeys, setInlineDropdownSelectedKeys] =
+    React.useState(selectedKeys);
+  React.useEffect(() => {
+    const newBtnText = getButtonLabelFromSelectedKeys(selectedKeys, children);
+    setInlineDropdownSelectedKeys(selectedKeys);
+    setBtnText(newBtnText);
+  }, [selectedKeys]);
+
+  const handleOptionChange = (selectedOption: MenuOption, e) => {
+    e?.stopPropagation();
+    let newSelectedKeys = [];
+
+    if (optionsVariant === 'checkbox') {
+      newSelectedKeys = getSelectedKeysFromSelectedOption(
+        selectedOption,
+        inlineDropdownSelectedKeys,
+      );
+    } else {
+      newSelectedKeys = [selectedOption.key];
+    }
+
+    const newBtnText = getButtonLabelFromSelectedKeys(
+      newSelectedKeys,
+      children,
+    );
+    setInlineDropdownSelectedKeys(newSelectedKeys);
+    setBtnText(newBtnText);
+    setTimeout(() => {
+      onOptionSelect?.(selectedOption, e);
+    });
+  };
+
+  React.useImperativeHandle(ref, () => ({
+    selectedKeys: inlineDropdownSelectedKeys,
+  }));
+  return (
+    <InlineDropdown
+      {...buttonProps}
+      anchorPosition={anchorPosition}
+      classNames={classNames}
+      size={size}
+      onOptionSelect={handleOptionChange}
+      onMenuOpen={onMenuOpen}
+      onMenuClose={onMenuClose}
+      clickAwayRef={clickAwayRef}
+      menu={{
+        isFluid,
+        options,
+        selectedKeys: inlineDropdownSelectedKeys,
+        optionsVariant,
+        allowSearch,
+        resolveLabel,
+        resolveSecondaryLabel,
+        size: size === 'extraSmall' ? 'small' : size,
+        virtualization: menuVirtualization,
+        header,
+        footer,
+        classNames: menuClassNames,
+        showLabelTooltip,
+        allowWrap,
+      }}
+    >
+      {optionsVariant === 'checkbox' ? btnText : children}
+    </InlineDropdown>
+  );
+};
+
+export const SimpleInlineDropdown: React.AbstractComponent<
+  SimpleInlineDropdownProps,
+  SimpleInlineDropdownRef
+> = React.forwardRef<SimpleInlineDropdownProps, SimpleInlineDropdownRef>(
+  SimpleInlineDropdownBase,
+);

package/lib/components/InlineDropdown/index.d.ts

@@ -0,0 +1,2 @@
+export * from './InlineDropdown';
+export * from './SimpleInlineDropdown';

package/lib/components/Input/Input.d.ts

@@ -0,0 +1,327 @@
+import {$ReadOnly, $Values} from 'utility-types';
+import * as React from 'react';
+import {classify} from '../../utils/classify';
+import type {IconType} from '../Icon';
+import {Icon} from '../Icon';
+import {BodySmall, FormLabelSmall} from '../Text';
+import css from './Input.module.css';
+type ClassNames = $ReadOnly<{
+  box?: string;
+  iconLeft?: string;
+  iconRight?: string;
+  wrapper?: string;
+}>;
+export const EXPONENT_CHARACTER_LIST = ['E', 'e'];
+export const INPUT_TYPES = Object.freeze({
+  text: 'text',
+  number: 'number',
+  password: 'password',
+  email: 'email',
+  tel: 'tel',
+  url: 'url',
+  date: 'date',
+  'datetime-local': 'datetime-local',
+  time: 'time',
+  week: 'week',
+  month: 'month',
+  color: 'color',
+  search: 'search',
+});
+export type InputType = $Values<typeof INPUT_TYPES>;
+export type InputOnChangeParamsType = {
+  evt: React.SyntheticEvent<HTMLInputElement>;
+  isEnter?: boolean;
+};
+export type InputProps = {
+  value?: string;
+  onChange?: (
+    evt: React.SyntheticEvent<HTMLInputElement>,
+    isEnter?: boolean,
+  ) => unknown;
+  classNames?: ClassNames;
+  onFocus?: (e: React.SyntheticEvent<HTMLInputElement>) => unknown;
+  onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => unknown;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => unknown;
+  onPaste?: (e: ClipboardEvent) => unknown;
+  onIconRightClick?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  onContainerClick?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  name?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  locked?: boolean;
+  error?: boolean;
+  errorText?: string;
+  label?: string | React.ReactNode;
+  helperText?: string | React.ReactNode;
+  type?: InputType;
+  size?: 'medium' | 'small';
+  iconLeftName?: string;
+  iconLeftType?: IconType;
+  iconRightName?: string;
+  iconRightType?: IconType;
+  required?: boolean;
+  readOnly?: boolean;
+  boxRef?: (arg0: HTMLElement | null | undefined) => unknown;
+  minLength?: string;
+  maxLength?: string;
+  pattern?: string;
+  min?: string;
+  max?: string;
+  autoComplete?: string;
+
+  /* Note(Nishant): Restricts typing `e` and `E` in the number input when
+  set to true. We have baked this condition in the keydown handler itself so
+  this would restrict and not show these exponent characters when typed
+  **/
+  disallowExponents?: boolean;
+
+  /** The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any.
+   * Only values which are equal to the basis for stepping (min if specified, value otherwise, and an
+   * appropriate default value if neither of those is provided) are valid. */
+  step?: string;
+  hideNumberSpinner?: boolean;
+  hidePasswordToggleIcon?: boolean;
+};
+
+const Input_ = (props: InputProps, ref): React.ReactNode => {
+  const {
+    value,
+    type,
+    onChange,
+    onFocus,
+    onBlur,
+    onIconRightClick,
+    onContainerClick,
+    name,
+    disabled,
+    placeholder,
+    error,
+    locked,
+    errorText,
+    label,
+    helperText,
+    classNames,
+    size = 'medium',
+    iconLeftName = '',
+    iconLeftType = 'regular',
+    iconRightName = '',
+    iconRightType = 'regular',
+    required,
+    readOnly,
+    boxRef,
+    onKeyDown,
+    disallowExponents,
+    hideNumberSpinner,
+    hidePasswordToggleIcon,
+    ...inputProps
+  } = props;
+  const [showPassword, setShowPassword] = React.useState(false);
+  const controlledInputFilled = value !== '';
+
+  const handleRightIconClick = (e: React.SyntheticEvent<HTMLElement>) => {
+    if (locked || disabled) {
+      return;
+    }
+
+    if (type === 'password') {
+      setShowPassword(!showPassword);
+    }
+
+    onIconRightClick && onIconRightClick(e);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (type === INPUT_TYPES.number && disallowExponents) {
+      if (EXPONENT_CHARACTER_LIST.includes(e.key)) {
+        e.preventDefault();
+      }
+    }
+
+    onKeyDown?.(e);
+  };
+
+  return (
+    <div
+      className={classify(
+        css.wrapper,
+        {
+          [css.filled]: controlledInputFilled ?? false,
+          [css.withError]: error ?? false,
+        },
+        classNames?.wrapper,
+      )}
+    >
+      {Boolean(label) && (
+        <div className={css.info}>
+          <div className={css.infoContent}>
+            <FormLabelSmall color="secondary">{label ?? ''}</FormLabelSmall>
+            &nbsp;
+            {required && <FormLabelSmall color="danger">{'*'}</FormLabelSmall>}
+          </div>
+        </div>
+      )}
+      <div
+        className={classify(
+          css.box,
+          {
+            [css.inputDisabled]: disabled ?? false,
+            [css.medium]: size === 'medium',
+            [css.small]: size === 'small',
+            [css.locked]: locked,
+            [css.color]: type === 'color',
+            [css.hideNumberSpinner]: hideNumberSpinner,
+          },
+          classNames?.box,
+        )}
+        onClick={!(disabled || locked) ? onContainerClick : null}
+        ref={boxRef}
+      >
+        {iconLeftName && (
+          <Icon
+            className={classify(classNames?.iconLeft)}
+            name={iconLeftName}
+            color={disabled ? 'disabled' : 'secondary'}
+            size="small"
+            type={iconLeftType}
+          />
+        )}
+        <input
+          {...inputProps}
+          disabled={locked || disabled}
+          name={name}
+          ref={ref}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          type={showPassword ? 'text' : type}
+          readOnly={readOnly && 'readOnly'}
+          onKeyDown={handleKeyDown}
+        />
+        {type === 'color' && (
+          <div
+            className={classify(css.colorText, css[size], {
+              [css.hasValue]: value,
+            })}
+          >
+            {value ? value : placeholder}
+          </div>
+        )}
+        <RightInputIcon
+          isEmail={type === 'email'}
+          isPassword={type === 'password'}
+          showPassword={showPassword}
+          showPasswordToggleIcon={!hidePasswordToggleIcon}
+          isLocked={locked}
+          isDisabled={disabled}
+          onClick={handleRightIconClick}
+          iconRightName={iconRightName}
+          iconRightType={iconRightType}
+          className={classNames?.iconRight}
+        />
+      </div>
+      {(Boolean(helperText) || error) && (
+        <div className={css.info}>
+          {error && errorText ? (
+            <BodySmall color="danger">{errorText}</BodySmall>
+          ) : typeof helperText === 'string' ? (
+            <BodySmall color={disabled ? 'disabled' : 'secondary'}>
+              {helperText}
+            </BodySmall>
+          ) : (
+            helperText
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const RightInputIcon = ({
+  isEmail,
+  isPassword,
+  showPassword,
+  showPasswordToggleIcon,
+  isLocked,
+  isDisabled,
+  iconRightName,
+  iconRightType,
+  ...rightIconProps
+}: {
+  isEmail?: boolean;
+  isPassword?: boolean;
+  showPassword?: boolean;
+  showPasswordToggleIcon?: boolean;
+  isLocked?: boolean;
+  isDisabled?: boolean;
+  onClick?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  iconRightName?: string;
+  iconRightType?: IconType;
+  className?: string;
+}): React.ReactNode => {
+  if (isLocked) {
+    return (
+      <Icon
+        name="lock"
+        color={isDisabled ? 'disabled' : 'secondary'}
+        size="small"
+        {...rightIconProps}
+      />
+    );
+  }
+
+  if (isEmail) {
+    return (
+      <Icon
+        name="at"
+        color={isDisabled ? 'disabled' : 'secondary'}
+        size="small"
+        type={iconRightType}
+        {...rightIconProps}
+      />
+    );
+  }
+
+  if (isPassword && showPasswordToggleIcon) {
+    return (
+      <Icon
+        name={showPassword ? 'eye-slash' : 'eye'}
+        color={isDisabled ? 'disabled' : 'secondary'}
+        size="small"
+        type={iconRightType}
+        {...rightIconProps}
+        className={classify(css.rightClickableIcon, {
+          [css.disabled]: isDisabled || isLocked,
+        })}
+      />
+    );
+  }
+
+  if (iconRightName) {
+    return (
+      <Icon
+        name={iconRightName || ''}
+        color={isDisabled ? 'disabled' : 'secondary'}
+        size="small"
+        type={iconRightType}
+        {...rightIconProps}
+      />
+    );
+  }
+
+  return <></>;
+};
+
+export const Input = React.forwardRef<InputProps, HTMLInputElement>(
+  Input_,
+) as React$AbstractComponent<InputProps, HTMLInputElement>;

package/lib/components/Input/index.d.ts

@@ -0,0 +1 @@
+export * from './Input';

package/lib/components/KPIBox/KPIBox.d.ts

@@ -0,0 +1,89 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import type {AlertSemanticType} from '../../types/common';
+import classify from '../../utils/classify';
+import type {IconSize, IconType} from '../Icon';
+import {SemanticIcon} from '../Icon';
+import css from './KPIBox.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+  topFoldContent?: string;
+  middleFoldContent?: string;
+  bottomFoldContent?: string;
+}>;
+export type KPIBoxProps = {
+  classNames?: ClassNames;
+  semantic?: AlertSemanticType;
+  topContent?: React.ReactNode;
+  middleContent?: React.ReactNode;
+  bottomContent?: React.ReactNode;
+  iconName?: string;
+  iconSize?: IconSize;
+  iconType?: IconType;
+};
+export const KPIBox: React$AbstractComponent<KPIBoxProps, HTMLDivElement> =
+  React.forwardRef<KPIBoxProps, HTMLDivElement>(
+    (
+      {
+        classNames,
+        semantic = 'neutral',
+        topContent,
+        middleContent,
+        bottomContent,
+        iconName,
+        iconSize = 'large',
+        iconType = 'solid',
+        ...props
+      }: KPIBoxProps,
+      ref,
+    ) => (
+      <div
+        {...props}
+        ref={ref}
+        data-testid="KPIBox"
+        className={classify(css.wrapper, classNames?.wrapper)}
+      >
+        {!!iconName && (
+          <SemanticIcon
+            semantic={semantic}
+            name={iconName}
+            size={iconSize}
+            type={iconType}
+          />
+        )}
+
+        <div className={css.textContainer}>
+          {!!topContent && (
+            <div
+              className={classify(
+                css.topFoldContent,
+                classNames?.topFoldContent,
+              )}
+            >
+              {topContent}
+            </div>
+          )}
+          {!!middleContent && (
+            <div
+              className={classify(
+                css.middleFoldContent,
+                classNames?.middleFoldContent,
+              )}
+            >
+              {middleContent}
+            </div>
+          )}
+          {!!bottomContent && (
+            <div
+              className={classify(
+                css.bottomFoldContent,
+                classNames?.bottomFoldContent,
+              )}
+            >
+              {bottomContent}
+            </div>
+          )}
+        </div>
+      </div>
+    ),
+  );