@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

package/lib/components/Tooltip/Tooltip.js.flow

@@ -0,0 +1,206 @@
+// @flow strict
+
+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.Node,
+  body?: string | React.Node,
+  placement?: PlacementType,
+  bodyMaxLines?: number,
+  titleMaxLines?: number,
+  delayMotionDuration?: DelayMotionDurationType,
+  hidden?: boolean,
+  elevation?: ElevationType,
+};
+
+export type TooltipProps = {
+  ...BaseTooltipProps,
+  // TODO(Nishant): Decide on a type to use here
+  // $FlowFixMe
+  children: any,
+};
+
+export 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.Node => {
+  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 (React 19 safe)
+  const mergedRef = useMergeRefs([refs.setReference, children.ref ?? null]);
+
+  return (
+    <>
+      {React.cloneElement(
+        children,
+        getReferenceProps({
+          ...children.props,
+          ref: mergedRef,
+        }),
+      )}
+
+      {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.js.flow

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

package/lib/components/Truncate/Truncate.js

@@ -22,9 +22,7 @@ const BaseTruncate = exports.BaseTruncate = /*#__PURE__*/React.forwardRef((_ref,
     style: {
       '--line-clamp': line,
       '--word-break': wordBreak
-    }
-    // @ts-ignore - TS2322 - Type 'React.ReactNode' is not assignable to type 'string | undefined'.
-    ,
+    },
     title: showFullTextOnHover ? children : '',
     ref: ref
   }, children);
@@ -41,13 +39,11 @@ const Truncate = exports.Truncate = /*#__PURE__*/React.forwardRef((_ref2, ref) =
   if (arrayChildren.length) {
     const child = arrayChildren[0];
     if (/*#__PURE__*/React.isValidElement(child)) {
-      // @ts-ignore - TS2339 - Property 'className' does not exist on type 'unknown'. | TS2339 - Property 'children' does not exist on type 'unknown'.
       const {
         className,
         children
       } = child.props;
       return /*#__PURE__*/React.cloneElement(child, {
-        // @ts-ignore - TS2769 - No overload matches this call.
         className: (0, _classify.classify)(_TruncateModule.default.truncateLineClamp, className, truncateClassName),
         style: {
           '--line-clamp': line,

package/lib/components/Truncate/Truncate.js.flow

@@ -0,0 +1,86 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+
+import css from './Truncate.module.css';
+
+
+export type TruncateProps = {
+  children?: React.Node,
+  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.Node => (
+    <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.Node => {
+      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.js.flow

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

package/lib/components/TruncatedTextWithTooltip/TruncatedTextWithTooltip.js

@@ -22,14 +22,12 @@ const TruncatedTextWithTooltip = _ref => {
     wrapText = false,
     line = 1,
     wordBreak = 'break-all',
-    // @ts-ignore - TS6133 - 'props' is declared but its value is never read.
     ...props
   } = _ref;
   const {
     width
   } = (0, _useWindowSize.useWindowSize)();
   const [showMouseTip, setShowMouseTip] = React.useState(false);
-  // @ts-ignore - TS2554 - Expected 1 arguments, but got 0.
   const truncatedRef = React.useRef();
   const checkIfTextOverflowing = React.useMemo(() => (0, _debounce.default)(() => {
     if (!wrapText && truncatedRef && truncatedRef.current && truncatedRef.current.scrollHeight > truncatedRef.current.clientHeight) {
@@ -53,7 +51,6 @@ const TruncatedTextWithTooltip = _ref => {
       const child = React.Children.only(children);
 
       //Vivek: This children in tooltip body is modified to remove line clamp style
-      // @ts-ignore - TS2769 - No overload matches this call.
       const modifiedChild = /*#__PURE__*/React.cloneElement(child, {
         style: {
           '--line-clamp': tooltip?.bodyMaxLines || line,
@@ -69,9 +66,7 @@ const TruncatedTextWithTooltip = _ref => {
     }
   }, /*#__PURE__*/React.createElement("span", {
     className: (0, _classify.default)(_TruncatedTextWithTooltipModule.default.truncateLineClamp, classNames?.wrapper),
-    style: styles
-    // @ts-ignore - TS2322 - Type 'RefObject<HTMLSpanElement | null | undefined>' is not assignable to type 'Ref<HTMLSpanElement> | undefined'.
-    ,
+    style: styles,
     ref: truncatedRef
   }, children));
 };

package/lib/components/TruncatedTextWithTooltip/TruncatedTextWithTooltip.js.flow

@@ -0,0 +1,104 @@
+// @flow strict
+
+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.Node,
+  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.Node => {
+  const {width} = useWindowSize();
+  const [showMouseTip, setShowMouseTip] = React.useState(false);
+  const truncatedRef = React.useRef<?HTMLSpanElement>();
+
+  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'}
+          >
+            <div className={css.childrenWrapper}>{children}</div>
+          </Tooltip>
+        );
+      }}
+    >
+      <span
+        className={classify(css.truncateLineClamp, classNames?.wrapper)}
+        style={styles}
+        ref={truncatedRef}
+      >
+        {children}
+      </span>
+    </ConditionalWrapper>
+  );
+};

package/lib/components/TruncatedTextWithTooltip/index.js.flow

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

package/lib/components/Typeahead/SimpleTypeahead.js

@@ -51,8 +51,6 @@ const SimpleTypeaheadBase = (props, ref) => {
       onSelect?.(selectedOption, e);
     });
   };
-
-  // @ts-ignore - TS2345 - Argument of type '{ current: SimpleTypeaheadRef | null; } | ((arg1: SimpleTypeaheadRef | null) => unknown)' is not assignable to parameter of type 'Ref<SimpleTypeaheadRef> | undefined'.
   React.useImperativeHandle(ref, () => ({
     selectedKeys: typeaheadSelectedKeys
   }));
@@ -91,6 +89,4 @@ const SimpleTypeaheadBase = (props, ref) => {
     elevation: elevation
   }));
 };
-
-// @ts-ignore - TS2345 - Argument of type '(props: SimpleTypeaheadProps & Omit<Omit<Flow.ComponentProps<typeof Typeahead>, 'allowInternalFilter' | 'classNames' | 'size' | 'placeholder' | 'onSelect' | 'onMenuOpen' | 'onMenuClose' | 'typeaheadInputText' | 'onSearch' | 'onClear' | 'menu' | 'clickAwayRef' | 'elevation'>, keyof SimpleTypeaheadProps>, ref: { curre...' is not assignable to parameter of type 'ForwardRefRenderFunction<SimpleTypeaheadProps, SimpleTypeaheadRef>'.
 const SimpleTypeahead = exports.SimpleTypeahead = /*#__PURE__*/React.forwardRef(SimpleTypeaheadBase);

package/lib/components/Typeahead/SimpleTypeahead.js.flow

@@ -0,0 +1,164 @@
+// @flow strict
+
+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 type {ElevationType} from '../Tooltip';
+
+import {Typeahead} from './Typeahead';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  box?: string,
+}>;
+
+export type SimpleTypeaheadRef = {
+  selectedKeys?: Array<string>,
+};
+
+export type SimpleTypeaheadProps = {
+  // Input props
+  ...InputProps,
+
+  isLoading?: boolean,
+  menuOpenOffset?: number,
+
+  classNames?: ClassNames,
+
+  // Menu props
+  options?: Array<MenuOption>,
+  selectedKeys?: Array<string>,
+  menuVirtualization?: Virtualization,
+  header?: React.Node,
+  footer?: React.Node,
+  menuClassNames?: MenuClassNames,
+  showLabelTooltip?: MenuLabelTooltip,
+  allowWrap?: boolean,
+  elevation?: ElevationType,
+
+  // events
+  onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
+  onSearch?: (evt: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onMenuOpen?: () => mixed,
+  onMenuClose?: () => mixed,
+  onClear?: () => void,
+
+  // Resolvers
+  resolveLabel?: (option: MenuOption) => string | React.Node,
+  resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
+  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,
+    elevation = 'modal',
+    ...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}
+      elevation={elevation}
+    />
+  );
+};
+
+export const SimpleTypeahead: React.AbstractComponent<
+  SimpleTypeaheadProps,
+  SimpleTypeaheadRef,
+> = React.forwardRef<SimpleTypeaheadProps, SimpleTypeaheadRef>(
+  SimpleTypeaheadBase,
+);

package/lib/components/Typeahead/Typeahead.js

@@ -51,8 +51,6 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     whileElementsMounted: _react2.autoUpdate,
     middleware: [(0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
   });
-
-  // @ts-ignore - TS2345 - Argument of type '(ReferenceType & ReferenceType) | null' is not assignable to parameter of type 'HTMLElement | null | undefined'.
   const dropdownWidth = (0, _hooks.useReferenceElementWidth)(refs.reference?.current);
   const onMenuToggle = isOpen => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
@@ -72,9 +70,7 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       "data-testid": "Typeahead",
       className: (0, _classify.classify)(_TypeaheadModule.default.typeaheadContainer, classNames?.wrapper)
     }, /*#__PURE__*/React.createElement(_SearchInput.SearchInput, _extends({}, inputProps, {
-      ref: ref
-      // @ts-ignore - TS2322 - Type '((node: ReferenceType | null) => void) & ((node: ReferenceType | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
-      ,
+      ref: ref,
       boxRef: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
       size: size,
       placeholder: placeholder,
@@ -99,21 +95,16 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           clickAway();
         }
         onFocus?.(_e);
-      }
-      // @ts-ignore - TS2769 - No overload matches this call. | TS7006 - Parameter '_e' implicitly has an 'any' type.
-      ,
+      },
       onClear: _e => {
         onClear?.();
       }
     })), isOpen && !isLoading && menu && menuOptions && !!menuOptions.length && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
       modal: false,
       context: context,
-      returnFocus: false
-      // @ts-ignore - TS2322 - Type 'MutableRefObject<ReferenceType | null> & MutableRefObject<ReferenceType | null>' is not assignable to type 'number | MutableRefObject<HTMLElement | null> | undefined'.
-      ,
+      returnFocus: false,
       initialFocus: refs.reference
     }, /*#__PURE__*/React.createElement("div", {
-      // @ts-ignore - TS2322 - Type '((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       className: _TypeaheadModule.default.menuWrapper,
       style: {