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

package/lib/components/InContextAlert/InContextAlert.d.ts

@@ -1,210 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-import * as React from 'react';
-import type {AlertSemanticType} from '../../types/common';
-import {ALERT_SEMANTIC} from '../../types/common';
-import {TEXT_COLORS} from '../../types/typography';
-import {classify} from '../../utils/classify';
-import type {IconType} from '../Icon';
-import {ClickableIcon, Icon} from '../Icon';
-import {Link} from '../Link';
-import {SubTitleExtraSmall} from '../Text';
-import {Truncate} from '../Truncate';
-import css from './InContextAlert.module.css';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-  alertText?: string;
-  actionContainer?: string;
-  icon?: string;
-}>;
-type InContextAlertBaseProps = (
-  | {
-      dismissable: true;
-      onCloseClick?:
-        | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
-        | null
-        | undefined;
-      selfDismiss?: boolean;
-    }
-  | {
-      dismissable?: false;
-    }
-) & {
-  classNames?: ClassNames;
-  children?: string;
-  actionText?: string;
-  onAction?:
-    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
-    | null
-    | undefined;
-};
-export type InContextAlertProps = InContextAlertBaseProps & {
-  semantic?: AlertSemanticType;
-  leftIconName?: string;
-  leftIconType?: IconType;
-};
-
-const AlertIcon = ({
-  semantic,
-  leftIconName,
-  leftIconType,
-  iconClassName,
-}: {
-  semantic: AlertSemanticType;
-  leftIconName: string;
-  leftIconType?: IconType;
-  iconClassName?: string;
-}) => {
-  switch (semantic) {
-    case ALERT_SEMANTIC.neutral:
-      return (
-        <Icon
-          color={TEXT_COLORS.neutral}
-          name={leftIconName ? leftIconName : 'face-smile'}
-          size="small"
-          type={leftIconType}
-          className={iconClassName}
-        />
-      );
-
-    case ALERT_SEMANTIC.success:
-      return (
-        <Icon
-          name={leftIconName ? leftIconName : 'circle-check'}
-          size="small"
-          color={TEXT_COLORS.success}
-          type={leftIconType}
-          className={iconClassName}
-        />
-      );
-
-    case ALERT_SEMANTIC.information:
-      return (
-        <Icon
-          name={leftIconName ? leftIconName : 'circle-info'}
-          size="small"
-          color={TEXT_COLORS.information}
-          type={leftIconType}
-          className={iconClassName}
-        />
-      );
-
-    case ALERT_SEMANTIC.warning:
-      return (
-        <Icon
-          name={leftIconName ? leftIconName : 'circle-exclamation'}
-          size="small"
-          color={TEXT_COLORS.warning}
-          type={leftIconType}
-          className={iconClassName}
-        />
-      );
-
-    case ALERT_SEMANTIC.danger:
-      return (
-        <Icon
-          name={leftIconName ? leftIconName : 'shield-exclamation'}
-          size="small"
-          color={TEXT_COLORS.danger}
-          type={leftIconType}
-          className={iconClassName}
-        />
-      );
-
-    default:
-      return (
-        <Icon
-          color={TEXT_COLORS.neutral}
-          name={leftIconName ? leftIconName : 'face-smile'}
-          size="small"
-          type={leftIconType}
-          className={iconClassName}
-        />
-      );
-  }
-};
-
-export const InContextAlert: React$AbstractComponent<
-  InContextAlertProps,
-  HTMLDivElement
-> = React.forwardRef<InContextAlertProps, HTMLDivElement>(
-  (props: InContextAlertProps, ref): React.ReactNode => {
-    const {
-      classNames,
-      semantic = ALERT_SEMANTIC.neutral,
-      dismissable,
-      children,
-      selfDismiss = false,
-      leftIconName = '',
-      onCloseClick,
-      actionText = '',
-      onAction,
-      leftIconType,
-    } = props;
-    const [dismissed, setDismissed] = React.useState(false);
-
-    const closeClickHandler = (e) => {
-      onCloseClick && onCloseClick(e);
-      selfDismiss && setDismissed(true);
-    };
-
-    return (
-      <>
-        {!dismissed && (
-          <div
-            className={classify(
-              css.alertContainer,
-              {
-                [css.neutral]: semantic === ALERT_SEMANTIC.neutral,
-                [css.success]: semantic === ALERT_SEMANTIC.success,
-                [css.information]: semantic === ALERT_SEMANTIC.information,
-                [css.warning]: semantic === ALERT_SEMANTIC.warning,
-                [css.danger]: semantic === ALERT_SEMANTIC.danger,
-              },
-              classNames?.wrapper,
-            )}
-            ref={ref}
-          >
-            <AlertIcon
-              semantic={semantic}
-              leftIconName={leftIconName}
-              leftIconType={leftIconType}
-              iconClassName={classNames?.icon}
-            />
-            {React.Children.count(children) > 0 && (
-              <SubTitleExtraSmall className={classify(classNames?.alertText)}>
-                <Truncate line={2} wordBreak="initial">
-                  {children}
-                </Truncate>
-              </SubTitleExtraSmall>
-            )}
-            {!!(actionText || dismissable) && (
-              <div
-                className={classify(
-                  css.actionContainer,
-                  classNames?.actionContainer,
-                )}
-              >
-                {!!actionText && (
-                  <Link onClick={onAction} color="primary">
-                    {actionText}
-                  </Link>
-                )}
-                {!!dismissable && (
-                  <ClickableIcon
-                    color={TEXT_COLORS.primary}
-                    ariaLabel="close"
-                    name="close"
-                    size="small"
-                    type="regular"
-                    onClick={closeClickHandler}
-                    className={css.closeIcon}
-                  />
-                )}
-              </div>
-            )}
-          </div>
-        )}
-      </>
-    );
-  },
-);

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

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

package/lib/components/InfinitePagination/InfinitePagination.d.ts

@@ -1,112 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-import * as React from 'react';
-// @ts-expect-error[nonstrict-import]
-import {FixedSizeList, VariableSizeList} from 'react-window';
-import {useInfiniteScroll, useResizeObserver} from '../../hooks';
-import {spaceFluid} from '../../styles/variables/_space';
-import classify from '../../utils/classify';
-import {CircularLoader} from '../CircularLoader';
-import type {GenericObject} from '../Table';
-import css from './InfinitePagination.module.css';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-}>;
-const DEFAULT_THRESHOLD = 200;
-export type InfinitePaginationProps = (
-  | {
-      itemSize: (index: number) => number;
-      isVariableSizeList: true;
-    }
-  | {
-      itemSize: number;
-      isVariableSizeList?: false;
-    }
-) & {
-  items: Array<GenericObject>;
-  width: string;
-  threshold?: number;
-  classNames?: ClassNames;
-  renderItem: (item: GenericObject, index: number) => React.ReactNode;
-  getItemKey?: (item: GenericObject, index: number) => string | number;
-  hasNextPage: boolean;
-  loadMoreItems: () => Promise<void>;
-};
-export const InfinitePagination: React$AbstractComponent<
-  InfinitePaginationProps,
-  HTMLDivElement
-> = React.forwardRef<InfinitePaginationProps, HTMLDivElement>(
-  (props: InfinitePaginationProps, ref) => {
-    const {
-      items,
-      width = spaceFluid,
-      itemSize,
-      renderItem,
-      threshold = DEFAULT_THRESHOLD,
-      getItemKey,
-      classNames,
-      hasNextPage,
-      loadMoreItems,
-      isVariableSizeList,
-    } = props;
-    const listRef = React.useRef(null);
-    const itemsLength = items.length;
-    const totalItemsCount = itemsLength + (hasNextPage ? 1 : 0);
-    const [containerRef, containerHeight] = useResizeObserver();
-    React.useImperativeHandle(ref, () => listRef.current);
-    React.useEffect(() => {
-      if (listRef.current) {
-        listRef.current.scrollToItem(0);
-      }
-    }, [itemsLength === 0]);
-    const handleScroll = useInfiniteScroll({
-      itemSize,
-      threshold,
-      itemsLength,
-      hasNextPage,
-      loadMoreItems,
-      containerHeight,
-      isVariableSizeList,
-    });
-
-    const Row = ({index, style}) =>
-      index === itemsLength ? (
-        <div style={style} className={css.loader}>
-          <CircularLoader size="large" />
-        </div>
-      ) : (
-        <div style={style} className={css.listRow}>
-          {renderItem(items[index], index)}
-        </div>
-      );
-
-    const itemKey = React.useCallback(
-      (index) =>
-        index === itemsLength
-          ? 'loading-indicator'
-          : getItemKey
-          ? getItemKey(items[index], index)
-          : index,
-      [items, getItemKey],
-    );
-    const ListComponent = isVariableSizeList ? VariableSizeList : FixedSizeList;
-    return (
-      <div
-        ref={containerRef}
-        data-testid="InfinitePagination"
-        className={classify(css.wrapper, classNames?.wrapper)}
-      >
-        <ListComponent
-          ref={listRef}
-          width={width}
-          height={containerHeight}
-          itemKey={itemKey}
-          itemSize={itemSize}
-          onScroll={handleScroll}
-          itemCount={totalItemsCount}
-        >
-          {Row}
-        </ListComponent>
-      </div>
-    );
-  },
-);

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

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

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

@@ -1,146 +0,0 @@
-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

@@ -1,145 +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 {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

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