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

package/lib/components/TokenListInput/TokenValueChips.d.ts

@@ -1,60 +0,0 @@
-import * as React from 'react';
-import {elevationMenu} from '../../styles/variables/_elevation';
-import {Chip} from '../Chip';
-import {Tooltip} from '../Tooltip';
-type Props<T> = {
-  values: Array<T>;
-  disabled?: boolean;
-  locked?: boolean;
-  onDismiss: (arg0: T) => unknown;
-  resolveTokenValue?: (arg0: ResolveTokenValueProps<T>) => React.ReactNode;
-};
-export type ResolveTokenValueProps<T> = {
-  token: T;
-  disabled?: boolean;
-  onDismiss?: (arg0: T) => unknown;
-  locked?: boolean;
-};
-
-function defaultResolveTokenValue<T>({
-  token,
-  disabled,
-  onDismiss,
-}: ResolveTokenValueProps<T>): React.ReactNode {
-  // $FlowFixMe[prop-missing] - assumes token has label and key
-  return (
-    // $FlowFixMe - assumes token has label and key
-    <Tooltip body={token?.label} elevation={elevationMenu}>
-      <Chip // $FlowFixMe - assumes token has key
-        key={token?.key}
-        onDismiss={(_) => onDismiss?.(token)}
-        dismissable={true}
-        semantic={'primary'}
-        disabled={disabled}
-      >
-        {/* $FlowFixMe - assumes token has label */}
-        {token?.label}
-      </Chip>
-    </Tooltip>
-  );
-}
-
-export function TokenValueChips<T>(props: Props<T>): React.ReactNode {
-  const {
-    values,
-    disabled,
-    locked,
-    onDismiss,
-    resolveTokenValue = defaultResolveTokenValue,
-  } = props;
-  return values.map((token) => {
-    const resolvedTokenValue = resolveTokenValue({
-      token,
-      onDismiss,
-      disabled,
-      locked,
-    });
-    return resolvedTokenValue;
-  });
-}
-TokenValueChips.displayName = 'TokenValueChips';

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

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

package/lib/components/Tooltip/Tooltip.d.ts

@@ -1,186 +0,0 @@
-import {$ReadOnly, $Values} from 'utility-types';
-import * as React from 'react';
-import {
-  // $FlowFixMe[untyped-import]
-  autoUpdate, // $FlowFixMe[untyped-import]
-  flip, // $FlowFixMe[untyped-import]
-  FloatingPortal, // $FlowFixMe[untyped-import]
-  offset, // $FlowFixMe[untyped-import]
-  shift, // $FlowFixMe[untyped-import]
-  useDismiss, // $FlowFixMe[untyped-import]
-  useFloating, // $FlowFixMe[untyped-import]
-  useFocus, // $FlowFixMe[untyped-import]
-  useHover, // $FlowFixMe[untyped-import]
-  useInteractions, // $FlowFixMe[untyped-import]
-  useMergeRefs, // $FlowFixMe[untyped-import]
-  useRole,
-} from '@floating-ui/react';
-import * as ELEVATION from '../../styles/variables/_elevation';
-import * as MOTION from '../../styles/variables/_motion';
-import {spaceXXSmall} from '../../styles/variables/_space';
-import {classify} from '../../utils/classify';
-import {capitalize} from '../../utils/string';
-import {Truncate} from '../Truncate';
-import css from './Tooltip.module.css';
-
-/* eslint-disable flowtype/no-weak-types */
-type ClassNames = $ReadOnly<{
-  tooltip?: string;
-  title?: string;
-  body?: string;
-}>;
-export const DELAY_MOTION_DURATION_TYPES = Object.freeze({
-  none: 'none',
-  fast: 'fast',
-  normal: 'normal',
-  slow: 'slow',
-  slower: 'slower',
-  slowest: 'slowest',
-});
-export type DelayMotionDurationType = $Values<
-  typeof DELAY_MOTION_DURATION_TYPES
->;
-export const ELEVATION_TYPES = Object.freeze({
-  none: 'none',
-  card: 'card',
-  tooltip: 'tooltip',
-  menu: 'menu',
-  backdrop: 'backdrop',
-  modal: 'modal',
-  toast: 'toast',
-});
-export type ElevationType = $Values<typeof ELEVATION_TYPES>;
-export type PlacementType =
-  | 'top'
-  | 'top-start'
-  | 'top-end'
-  | 'bottom'
-  | 'bottom-start'
-  | 'bottom-end'
-  | 'left'
-  | 'right';
-export type BaseTooltipProps = {
-  classNames?: ClassNames;
-  title?: string | React.ReactNode;
-  body?: string | React.ReactNode;
-  placement?: PlacementType;
-  bodyMaxLines?: number;
-  titleMaxLines?: number;
-  delayMotionDuration?: DelayMotionDurationType;
-  hidden?: boolean;
-  elevation?: string;
-};
-export type TooltipProps = BaseTooltipProps & {
-  // TODO(Nishant): Decide on a type to use here
-  // $FlowFixMe
-  children: any;
-};
-
-const getElevationValue = (elevation: string): string => {
-  const elevationKey = 'elevation' + capitalize(elevation);
-  return ELEVATION[elevationKey] || elevation;
-};
-
-export const Tooltip = ({
-  classNames,
-  children,
-  title,
-  body,
-  placement = 'top',
-  bodyMaxLines = 2,
-  titleMaxLines = 1,
-  delayMotionDuration = 'none',
-  elevation = 'tooltip',
-  hidden,
-}: TooltipProps): React.ReactNode => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const {refs, floatingStyles, context, strategy} = useFloating({
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    placement,
-    // Make sure the tooltip stays on the screen
-    whileElementsMounted: autoUpdate,
-    middleware: [
-      offset(parseInt(spaceXXSmall)),
-      flip({
-        fallbackAxisSideDirection: 'start',
-      }),
-      shift(),
-    ],
-  });
-  const motionDurationToken =
-    'motionDuration' + capitalize(delayMotionDuration);
-  const hoverDelay =
-    parseInt(MOTION[motionDurationToken]) === NaN
-      ? 0
-      : parseInt(MOTION[motionDurationToken]);
-  const {getReferenceProps, getFloatingProps} = useInteractions([
-    useHover(context, {
-      delay: {
-        open: hoverDelay,
-        close: 0,
-      },
-    }),
-    useFocus(context),
-    useRole(context, {
-      role: 'tooltip',
-    }),
-    useDismiss(context),
-  ]);
-  // Note(Nishant) Preserve the consumer's ref
-  const ref = useMergeRefs([refs.setReference, children.ref]);
-  return (
-    <>
-      {React.cloneElement(
-        children,
-        getReferenceProps({
-          ref,
-          ...children.props,
-        }),
-      )}
-
-      {isOpen && (
-        <FloatingPortal>
-          <>
-            {!hidden && (
-              <div
-                ref={refs.setFloating}
-                className={classify(css.tooltip, classNames?.tooltip)}
-                style={{
-                  position: strategy,
-                  ...floatingStyles,
-                  '--tooltip-elevation': getElevationValue(elevation),
-                }}
-                {...getFloatingProps()}
-              >
-                {!!title && (
-                  <Truncate line={titleMaxLines} wordBreak="initial">
-                    <div className={classify(css.title, classNames?.title)}>
-                      {title}
-                    </div>
-                  </Truncate>
-                )}
-
-                {!!body && (
-                  <Truncate line={bodyMaxLines} wordBreak="initial">
-                    <div
-                      className={classify(
-                        css.body,
-                        {
-                          [css.hasTitle]: !!title,
-                        },
-                        classNames?.body,
-                      )}
-                    >
-                      {body}
-                    </div>
-                  </Truncate>
-                )}
-              </div>
-            )}
-          </>
-        </FloatingPortal>
-      )}
-    </>
-  );
-};

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

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

package/lib/components/Truncate/Truncate.d.ts

@@ -1,87 +0,0 @@
-import * as React from 'react';
-import {classify} from '../../utils/classify';
-import css from './Truncate.module.css';
-export type TruncateProps = {
-  children?: React.ReactNode;
-  line?: number;
-  showFullTextOnHover?: boolean;
-  wordBreak?: string;
-  className?: string;
-};
-export const BaseTruncate: React$AbstractComponent<
-  TruncateProps,
-  HTMLSpanElement
-> = React.forwardRef<TruncateProps, HTMLSpanElement>(
-  (
-    {
-      children,
-      line = 1,
-      showFullTextOnHover = false,
-      wordBreak = 'break-all',
-      className,
-    }: TruncateProps,
-    ref,
-  ): React.ReactNode => (
-    <span
-      className={classify(css.truncateLineClamp, className)}
-      style={{
-        '--line-clamp': line,
-        '--word-break': wordBreak,
-      }}
-      title={showFullTextOnHover ? children : ''}
-      ref={ref}
-    >
-      {children}
-    </span>
-  ),
-);
-export const Truncate: React$AbstractComponent<TruncateProps, HTMLSpanElement> =
-  React.forwardRef<TruncateProps, HTMLSpanElement>(
-    (
-      {
-        children,
-        line = 1,
-        showFullTextOnHover = false,
-        wordBreak = 'break-all',
-        className: truncateClassName,
-      }: TruncateProps,
-      ref,
-    ): React.ReactNode => {
-      const arrayChildren = React.Children.toArray(children);
-
-      if (arrayChildren.length) {
-        const child = arrayChildren[0];
-
-        if (React.isValidElement(child)) {
-          const {className, children} = child.props;
-          return React.cloneElement(child, {
-            className: classify(
-              css.truncateLineClamp,
-              className,
-              truncateClassName,
-            ),
-            style: {
-              '--line-clamp': line,
-              '--word-break': wordBreak,
-            },
-            title: showFullTextOnHover ? children : '',
-            ref,
-          });
-        }
-
-        return (
-          <BaseTruncate
-            line={line}
-            showFullTextOnHover={showFullTextOnHover}
-            ref={ref}
-            wordBreak={wordBreak}
-            className={truncateClassName}
-          >
-            {children}
-          </BaseTruncate>
-        );
-      }
-
-      return null;
-    },
-  );

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

@@ -1,2 +0,0 @@
-export type {TruncateProps} from './Truncate';
-export {Truncate} from './Truncate';

package/lib/components/TruncatedTextWithTooltip/TruncatedTextWithTooltip.d.ts

@@ -1,95 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-import * as React from 'react';
-import debounce from 'lodash/debounce';
-import {useWindowSize} from '../../hooks/useWindowSize';
-import classify from '../../utils/classify';
-import {ConditionalWrapper} from '../ConditionalWrapper';
-import type {BaseTooltipProps} from '../Tooltip';
-import {Tooltip} from '../Tooltip';
-import css from './TruncatedTextWithTooltip.module.css';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-}>;
-export type TruncatedTextWithTooltipProps = {
-  children?: React.ReactNode;
-  tooltip?: BaseTooltipProps;
-  classNames?: ClassNames;
-  line?: number;
-  wordBreak?: string;
-  wrapText?: boolean;
-};
-export const TruncatedTextWithTooltip = ({
-  classNames,
-  children,
-  tooltip,
-  wrapText = false,
-  line = 1,
-  wordBreak = 'break-all',
-  ...props
-}: TruncatedTextWithTooltipProps): React.ReactNode => {
-  const {width} = useWindowSize();
-  const [showMouseTip, setShowMouseTip] = React.useState(false);
-  const truncatedRef = React.useRef<HTMLSpanElement | null | undefined>();
-  const checkIfTextOverflowing = React.useMemo(
-    () =>
-      debounce(
-        () => {
-          if (
-            !wrapText &&
-            truncatedRef &&
-            truncatedRef.current &&
-            truncatedRef.current.scrollHeight >
-              truncatedRef.current.clientHeight
-          ) {
-            setShowMouseTip(true);
-          } else {
-            setShowMouseTip(false);
-          }
-        },
-        200,
-        {
-          leading: true,
-        },
-      ),
-    [],
-  );
-  React.useEffect(() => {
-    checkIfTextOverflowing();
-  }, [width, line, children, wrapText]);
-  const styles = {
-    '--line-clamp': wrapText ? 'unset' : line,
-    '--word-break': wordBreak,
-  };
-  return (
-    <ConditionalWrapper
-      condition={Boolean(showMouseTip)}
-      wrapper={(children) => {
-        const child = React.Children.only(children);
-        //Vivek: This children in tooltip body is modified to remove line clamp style
-        const modifiedChild = React.cloneElement(child, {
-          style: {
-            '--line-clamp': tooltip?.bodyMaxLines || line,
-            '--word-break': wordBreak,
-          },
-        });
-        return (
-          <Tooltip
-            {...tooltip}
-            body={tooltip?.body || modifiedChild}
-            elevation={tooltip?.elevation ?? 'toast'}
-          >
-            {children}
-          </Tooltip>
-        );
-      }}
-    >
-      <span
-        className={classify(css.truncateLineClamp, classNames?.wrapper)}
-        style={styles}
-        ref={truncatedRef}
-      >
-        {children}
-      </span>
-    </ConditionalWrapper>
-  );
-};

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

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

package/lib/components/Typeahead/SimpleTypeahead.d.ts

@@ -1,141 +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 {getTextLabelFromSelectedKeys} from '../../utils/menu';
-import type {InputProps} from '../Input';
-import type {MenuOption, Virtualization} from '../Menu';
-import {Typeahead} from './Typeahead';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-  box?: string;
-}>;
-export type SimpleTypeaheadRef = {
-  selectedKeys?: Array<string>;
-};
-export type SimpleTypeaheadProps = InputProps & {
-  isLoading?: boolean;
-  menuOpenOffset?: number;
-  classNames?: ClassNames;
-  // Menu props
-  options?: Array<MenuOption>;
-  selectedKeys?: Array<string>;
-  menuVirtualization?: Virtualization;
-  header?: React.ReactNode;
-  footer?: React.ReactNode;
-  menuClassNames?: MenuClassNames;
-  showLabelTooltip?: MenuLabelTooltip;
-  allowWrap?: boolean;
-  // events
-  onSelect?: (
-    option: MenuOption,
-    arg1: React.SyntheticEvent<HTMLElement> | null | undefined,
-  ) => unknown;
-  onSearch?: (evt: React.SyntheticEvent<HTMLInputElement>) => unknown;
-  onMenuOpen?: () => unknown;
-  onMenuClose?: () => unknown;
-  onClear?: () => void;
-  // Resolvers
-  resolveLabel?: (option: MenuOption) => string | React.ReactNode;
-  resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;
-  clickAwayRef?: ClickAwayRefType;
-  allowInternalFilter?: boolean;
-};
-
-const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
-  const {
-    size = 'medium',
-    classNames,
-    placeholder = 'Select...',
-    options,
-    selectedKeys,
-    onSelect,
-    onMenuOpen,
-    onMenuClose,
-    resolveLabel,
-    resolveSecondaryLabel,
-    onClear,
-    onSearch,
-    menuVirtualization,
-    header,
-    footer,
-    menuClassNames,
-    clickAwayRef,
-    showLabelTooltip,
-    allowInternalFilter = true,
-    allowWrap = false,
-    ...inputProps
-  } = props;
-  const [typeaheadInputText, setTypeaheadInputText] = React.useState('');
-  const [typeaheadSelectedKeys, setTypeaheadSelectedKeys] =
-    React.useState(selectedKeys);
-  React.useEffect(() => {
-    const newTypeaheadText = getTextLabelFromSelectedKeys(
-      selectedKeys,
-      options,
-    );
-    setTypeaheadSelectedKeys(selectedKeys);
-    setTypeaheadInputText(newTypeaheadText);
-  }, [selectedKeys]);
-
-  const handleOptionChange = (selectedOption: MenuOption, e) => {
-    e?.stopPropagation();
-    const newSelectedKeys = [selectedOption.key];
-    const newTypeaheadText = getTextLabelFromSelectedKeys(
-      newSelectedKeys,
-      options,
-    );
-    setTypeaheadSelectedKeys(newSelectedKeys);
-    setTypeaheadInputText(newTypeaheadText);
-    setTimeout(() => {
-      onSelect?.(selectedOption, e);
-    });
-  };
-
-  React.useImperativeHandle(ref, () => ({
-    selectedKeys: typeaheadSelectedKeys,
-  }));
-  return (
-    <Typeahead
-      {...inputProps}
-      allowInternalFilter={allowInternalFilter}
-      classNames={classNames}
-      size={size}
-      placeholder={placeholder}
-      onSelect={handleOptionChange}
-      onMenuOpen={onMenuOpen}
-      onMenuClose={onMenuClose}
-      typeaheadInputText={typeaheadInputText}
-      onSearch={(e) => {
-        setTypeaheadInputText(e.target.value);
-        onSearch?.(e);
-      }}
-      onClear={() => {
-        setTypeaheadInputText('');
-        setTypeaheadSelectedKeys([]);
-        onClear?.();
-      }}
-      menu={{
-        options,
-        selectedKeys: typeaheadSelectedKeys,
-        resolveLabel,
-        resolveSecondaryLabel,
-        size,
-        virtualization: menuVirtualization,
-        header,
-        footer,
-        classNames: menuClassNames,
-        showLabelTooltip,
-        allowWrap,
-      }}
-      clickAwayRef={clickAwayRef}
-    />
-  );
-};
-
-export const SimpleTypeahead: React.AbstractComponent<
-  SimpleTypeaheadProps,
-  SimpleTypeaheadRef
-> = React.forwardRef<SimpleTypeaheadProps, SimpleTypeaheadRef>(
-  SimpleTypeaheadBase,
-);