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

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

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import without from 'lodash/without';
+import {Chip} from '../Chip';
+import {Tooltip} from '../Tooltip';
+type Props<T> = {
+  values: Array<T>;
+  disabled?: boolean;
+  locked?: boolean;
+  onChange: (arg0: Array<T>) => unknown;
+  resolveTokenValue?: (arg0: ResolveTokenValueProps<T>) => React.ReactNode;
+};
+export type ResolveTokenValueProps<T> = {
+  token: T;
+  disabled?: boolean;
+  onDismiss?: (e: React.SyntheticEvent<HTMLElement>) => 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}>
+      <Chip // $FlowFixMe - assumes token has key
+        key={token?.key}
+        onDismiss={onDismiss}
+        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,
+    onChange,
+    resolveTokenValue = defaultResolveTokenValue,
+  } = props;
+  return values.map((token) => {
+    const onDismiss = (e) => {
+      !disabled && !locked && onChange(without(values, token));
+    };
+
+    const resolvedTokenValue = resolveTokenValue({
+      token,
+      onDismiss,
+      disabled,
+      locked,
+    });
+    return resolvedTokenValue;
+  });
+}
+TokenValueChips.displayName = 'TokenValueChips';

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,141 @@
+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,
+);