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

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.js.flow

@@ -0,0 +1,166 @@
+// @flow strict
+
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  autoUpdate,
+  // $FlowFixMe[untyped-import]
+  flip,
+  // $FlowFixMe[untyped-import]
+  FloatingFocusManager,
+  // $FlowFixMe[untyped-import]
+  FloatingPortal,
+  // $FlowFixMe[untyped-import]
+  offset,
+  // $FlowFixMe[untyped-import]
+  shift,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react';
+
+import {useReferenceElementWidth} from '../../hooks';
+import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
+import type {ClickAwayRefType} from '../../utils';
+import {ClickAway, mergeRefs} from '../../utils';
+import classify from '../../utils/classify';
+import type {ButtonProps, ButtonSize} from '../Button';
+import {Button} from '../Button';
+import type {AnchorType, Strategy} from '../ButtonDropdown';
+import {ANCHOR_POSITION_TYPE, STRATEGY_TYPE} from '../ButtonDropdown';
+import type {ElevationType} from '../Tooltip';
+import {getElevationValue} from '../Tooltip';
+
+import css from './FilterButtonOverlay.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string, overlayContainer?: string}>;
+export type FilterButtonOverlaySizeTypes = 'medium' | 'small';
+
+export type NewButtonProps = $Diff<ButtonProps, {children?: React.Node}>;
+
+export type FilterButtonOverlayProps = {
+  ...NewButtonProps,
+  classNames?: ClassNames,
+  children: React.Node,
+  positionStrategy?: Strategy,
+  anchorPosition?: AnchorType,
+  clickAwayRef?: ClickAwayRefType,
+  isFluid?: boolean,
+  size?: FilterButtonOverlaySizeTypes,
+  buttonLabel?: React.Node,
+  buttonSize?: ButtonSize,
+  elevation?: ElevationType,
+  buttonIsFluid?: boolean,
+  ...
+};
+
+export const FilterButtonOverlay: React$AbstractComponent<
+  FilterButtonOverlayProps,
+  HTMLDivElement,
+> = React.forwardRef<FilterButtonOverlayProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      anchorPosition = ANCHOR_POSITION_TYPE.bottomStart,
+      positionStrategy = STRATEGY_TYPE.absolute,
+      clickAwayRef,
+      size = 'medium',
+      children,
+      isFluid,
+      buttonLabel,
+      buttonIsFluid,
+      buttonSize,
+      elevation = 'modal',
+      ...restProps
+    }: FilterButtonOverlayProps,
+    ref,
+  ) => {
+    const {x, y, refs, strategy, context} = useFloating({
+      open: true,
+      strategy: positionStrategy,
+      placement: anchorPosition,
+      whileElementsMounted: autoUpdate,
+      middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
+    });
+
+    const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
+
+    return (
+      <ClickAway
+        clickAwayRef={clickAwayRef}
+        closeOnEscapeKeypress
+        containsNestedFloatingPortals
+      >
+        {({isOpen, onOpen, boundaryRef, triggerRef}) => (
+          <div
+            data-testid="FilterButtonOverlay"
+            className={classify(
+              {
+                [css.isFluid]: buttonIsFluid,
+              },
+              classNames?.wrapper,
+            )}
+            ref={ref}
+          >
+            <Button
+              {...restProps}
+              ref={mergeRefs([refs.setReference, triggerRef])}
+              onClick={(e) => {
+                e.stopPropagation();
+                onOpen();
+              }}
+              isFluid={buttonIsFluid}
+              size={buttonSize}
+            >
+              {buttonLabel}
+            </Button>
+
+            {isOpen && (
+              <FloatingPortal>
+                <FloatingFocusManager
+                  modal={false}
+                  context={context}
+                  initialFocus={refs.reference}
+                >
+                  <div
+                    ref={mergeRefs([refs.setFloating, boundaryRef])}
+                    className={css.overlayContainer}
+                    style={{
+                      display: 'flex',
+                      position: strategy,
+                      top: y ?? spaceNone,
+                      left: x ?? spaceNone,
+                      /* NOTE(Sharad): The FloatingPortal renders the menu outside the normal DOM structure,
+                       so its parent is effectively the <body> element. This means the menu
+                       would otherwise default to the body's width. To support fluid width,
+                       we must manually set the dropdown width here; otherwise, it uses a fixed width.
+                       Also, Only treat menu as non-fluid if isFluid is strictly false, since default is true in menu and undefined means fluid. */
+                      ...(isFluid !== false && {
+                        '--dropdown-width': dropdownWidth,
+                      }),
+                      '--menu-elevation': getElevationValue(elevation),
+                    }}
+                  >
+                    <div
+                      className={classify(
+                        css.overlayWrapper,
+                        {
+                          [css.fluid]: isFluid,
+                          [css.small]: size === 'small',
+                          [css.medium]: size === 'medium',
+                        },
+                        classNames?.overlayContainer,
+                      )}
+                    >
+                      {children}
+                    </div>
+                  </div>
+                </FloatingFocusManager>
+              </FloatingPortal>
+            )}
+          </div>
+        )}
+      </ClickAway>
+    );
+  },
+);

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

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

package/lib/components/FocusManager/FocusManager.js.flow

@@ -0,0 +1,57 @@
+// @flow strict
+
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  FloatingFocusManager,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react';
+
+import classify from '../../utils/classify';
+
+import css from './FocusManager.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type FocusManagerProps = {
+  classNames?: ClassNames,
+  children?: React.Node,
+  initialFocus?: number,
+  returnFocus?: boolean,
+  guards?: boolean,
+  modal?: boolean,
+};
+
+export const FocusManager = (props: FocusManagerProps): React.Node => {
+  const {refs, context} = useFloating({open: true});
+  const {
+    classNames,
+    children,
+    initialFocus = -1,
+    returnFocus = true,
+    modal = true,
+    guards = true,
+    ...restFloatingFocusManagerProps
+  } = props;
+
+  return (
+    <FloatingFocusManager
+      context={context}
+      initialFocus={initialFocus}
+      modal={modal}
+      guards={guards}
+      returnFocus={returnFocus}
+      {...restFloatingFocusManagerProps}
+    >
+      <div
+        ref={refs.setFloating}
+        data-testid="FocusManager"
+        className={classify(css.wrapper, classNames?.wrapper)}
+      >
+        {children}
+      </div>
+    </FloatingFocusManager>
+  );
+};

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

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

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.js

@@ -50,7 +50,6 @@ const FocusManagerWithArrowKeyNavigation = props => {
 
   // Note(Nishant): This is to correctly call the onClick handler which could have been on child
   // we also need to set the active index correctly on click for list navigation to work
-  // @ts-ignore - TS7019 - Rest parameter 'args' implicitly has an 'any[]' type.
   const childOnClickPassthrough = function (childOnClickHandler, index) {
     if (childOnClickHandler) {
       for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
@@ -78,32 +77,22 @@ const FocusManagerWithArrowKeyNavigation = props => {
 
   let skippedChildrenCount = 0;
   const clonedChildren = listReference ? children : childrenArray.map((child, index) => {
-    // @ts-ignore - TS2339 - Property 'props' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<React.ReactNode> | ReactPortal | Promise<...>'.
     const {
       onClick: childClickHandler
     } = child.props;
     let adjustedIndex = index - skippedChildrenCount;
-
-    // @ts-ignore - TS2339 - Property 'type' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<React.ReactNode> | ReactPortal | Promise<...>'.
     if (child?.type?.displayName === SKIP_ELEMENT_DISPLAY_NAME) {
       skippedChildrenCount++;
-      // @ts-ignore - TS2322 - Type 'null' is not assignable to type 'number'.
       adjustedIndex = null;
     }
-
-    // @ts-ignore - TS2769 - No overload matches this call.
     return /*#__PURE__*/React.cloneElement(child, {
-      // @ts-ignore - TS2339 - Property 'props' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<React.ReactNode> | ReactPortal | Promise<...>'.
       ...child.props,
       tabIndex: activeIndex === index ? 0 : -1,
-      // @ts-ignore - TS7006 - Parameter 'node' implicitly has an 'any' type.
       ref: node => {
         if (adjustedIndex !== null) {
-          // @ts-ignore - TS2322 - Type 'any' is not assignable to type 'never'.
           listRef.current[adjustedIndex] = node;
         }
       },
-      // @ts-ignore - TS7019 - Rest parameter 'args' implicitly has an 'any[]' type.
       onClick: function () {
         for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
           args[_key3] = arguments[_key3];

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.js.flow

@@ -0,0 +1,152 @@
+// @flow strict
+
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  FloatingFocusManager,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+  // $FlowFixMe[untyped-import]
+  useInteractions,
+  // $FlowFixMe[untyped-import]
+  useListNavigation,
+} from '@floating-ui/react';
+
+import classify from '../../utils/classify';
+import type {FocusManagerProps} from '../FocusManager';
+
+import css from './FocusManagerWithArrowKeyNavigation.module.css';
+
+
+const SKIP_ELEMENT_DISPLAY_NAME = 'SkipElementFromNavigation';
+
+export type SkipElementFromNavigationProps = {
+  children: React.Node,
+  className?: string,
+  ...
+};
+
+export const SkipElementFromNavigation: React$AbstractComponent<
+  SkipElementFromNavigationProps,
+  HTMLDivElement,
+> = React.forwardRef<SkipElementFromNavigationProps, HTMLDivElement>(
+  (
+    {children, className, ...restProps}: SkipElementFromNavigationProps,
+    ref,
+  ) => (
+    <div {...restProps} className={className} tabIndex={-1} ref={ref}>
+      {children}
+    </div>
+  ),
+);
+
+SkipElementFromNavigation.displayName = SKIP_ELEMENT_DISPLAY_NAME;
+
+export type FocusManagerWithArrowKeyNavigationProps = {
+  ...FocusManagerProps,
+  cols?: number,
+  orientation?: 'horizontal' | 'vertical',
+  focusItemOnOpen?: 'auto' | boolean,
+  loop?: boolean,
+  listReference?: {current: Array<HTMLElement>},
+};
+
+export const FocusManagerWithArrowKeyNavigation = (
+  props: FocusManagerWithArrowKeyNavigationProps,
+): React.Node => {
+  const {
+    classNames,
+    children,
+    initialFocus = -1,
+    orientation = 'vertical',
+    modal = false,
+    cols = 1,
+    focusItemOnOpen = 'auto',
+    loop = false,
+    listReference,
+    ...restFloatingFocusManagerProps
+  } = props;
+
+  const {refs, context} = useFloating({open: true});
+  const [activeIndex, setActiveIndex] = React.useState(null);
+  const listRef = React.useRef([]);
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+
+  // Note(Nishant): This is to correctly call the onClick handler which could have been on child
+  // we also need to set the active index correctly on click for list navigation to work
+  const childOnClickPassthrough = (childOnClickHandler, index, ...args) => {
+    if (childOnClickHandler) {
+      childOnClickHandler(...args);
+    }
+    setActiveIndex(index);
+  };
+
+  // Add childOnClickPassthrough for the list of references passed in case of custom nodes passed
+  if (listReference) {
+    listReference.current.map((element, index) => {
+      const childClickHandler = element.onclick;
+      element.onclick = (...args) => {
+        childOnClickPassthrough(childClickHandler, index, ...args);
+      };
+    });
+  }
+  // Note(Nishant): Force the list navigation props onto the children
+  // while using this component make sure your all the passed children have a focus state
+
+  let skippedChildrenCount = 0;
+
+  const clonedChildren = listReference
+    ? children
+    : childrenArray.map((child, index) => {
+      const {onClick: childClickHandler} = child.props;
+
+      let adjustedIndex = index - skippedChildrenCount;
+
+      if (child?.type?.displayName === SKIP_ELEMENT_DISPLAY_NAME) {
+        skippedChildrenCount++;
+        adjustedIndex = null;
+      }
+
+      return React.cloneElement(child, {
+        ...child.props,
+        tabIndex: activeIndex === index ? 0 : -1,
+        ref: (node) => {
+          if (adjustedIndex !== null) {
+            listRef.current[adjustedIndex] = node;
+          }
+        },
+        onClick: (...args) => {
+          childOnClickPassthrough(childClickHandler, adjustedIndex, ...args);
+        },
+      });
+    });
+
+  const listNavigation = useListNavigation(context, {
+    orientation,
+    cols,
+    listRef: listReference ? listReference : listRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    focusItemOnOpen,
+    loop,
+  });
+  const {getFloatingProps} = useInteractions([listNavigation]);
+
+  return (
+    <FloatingFocusManager
+      context={context}
+      modal={modal}
+      initialFocus={initialFocus}
+      {...restFloatingFocusManagerProps}
+    >
+      <div
+        ref={refs.setFloating}
+        data-testid="FocusManagerWithArrowKeyNavigation"
+        {...getFloatingProps()}
+        className={classify(css.wrapper, classNames?.wrapper)}
+      >
+        {clonedChildren}
+      </div>
+    </FloatingFocusManager>
+  );
+};

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

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

package/lib/components/FormTitleWrapper/FormTitleWrapper.js.flow

@@ -0,0 +1,68 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {ColorTypes} from '../../types/typography';
+import classify from '../../utils/classify';
+import type {IconSize, IconType} from '../Icon';
+import {Icon} from '../Icon';
+
+import css from './FormTitleWrapper.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  title?: string,
+  rightSlot?: string,
+}>;
+
+export type FormTitleWrapperProps = {
+  classNames?: ClassNames,
+  iconType?: IconType,
+  iconName?: string,
+  iconSize?: IconSize,
+  iconColor?: ColorTypes,
+  title: React.Node, // Should always atleast have a title
+  rightSlot?: React.Node,
+};
+
+export const FormTitleWrapper: React$AbstractComponent<
+  FormTitleWrapperProps,
+  HTMLDivElement,
+> = React.forwardRef<FormTitleWrapperProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      iconType,
+      iconName,
+      iconSize = 'small',
+      iconColor,
+      title,
+      rightSlot,
+    }: FormTitleWrapperProps,
+    ref,
+  ) => (
+    <div ref={ref} data-testid="FormTitleWrapper" className={css.container}>
+      <div className={classify(css.leftSection, classNames?.wrapper)}>
+        {!!iconName && (
+          <Icon
+            type={iconType}
+            name={iconName}
+            size={iconSize}
+            color={iconColor}
+          />
+        )}
+        {/* This is to safeguard semantics as it internally composes from a subTitleSmall className
+            we don't fix the component here as <SubtitleSmall> resolves to <h4> and since title is a React.Node,
+            this would break semantics in case custom components are passed inside
+         */}
+        <div className={classify(css.componentHousing, classNames?.title)}>
+          {title}
+        </div>
+      </div>
+      <div className={classify(css.rightSection, classNames?.rightSlot)}>
+        {rightSlot}
+      </div>
+    </div>
+  ),
+);

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

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

package/lib/components/Grid/Grid.js

@@ -20,7 +20,6 @@ const Row = _ref => {
   let {
     className,
     children,
-    // @ts-ignore - TS6133 - 'span' is declared but its value is never read.
     span = 1,
     gridType = 'medium',
     repeatTracks = '1fr'
@@ -30,7 +29,6 @@ const Row = _ref => {
   let lastChildColCount = 0;
   const childrenWithProps = React.Children.map(children, child => {
     if (/*#__PURE__*/React.isValidElement(child)) {
-      // @ts-ignore - TS2339 - Property 'span' does not exist on type 'unknown'. | TS2339 - Property 'offset' does not exist on type 'unknown'.
       const {
         span = 1,
         offset = 0
@@ -46,20 +44,16 @@ const Row = _ref => {
       lastChildColCount = columnSpanCount;
       columnSpanCount = lastChildColCount + offset + span;
       let gridColumnStart = 0,
-        // @ts-ignore - TS6133 - 'gridColumnEnd' is declared but its value is never read.
         gridColumnEnd = 0;
       if (gridType === 'autoFill' || gridType === 'autoFit') {
-        // @ts-ignore - TS2322 - Type 'string' is not assignable to type 'number'.
         gridColumnStart = 'auto';
         return /*#__PURE__*/React.cloneElement(child, {
-          // @ts-ignore - TS2769 - No overload matches this call.
           gridColumnStart,
           gridColumnEnd: `span ${span}`
         });
       } else if (typeof gridRepeatCount === 'number' && columnSpanCount <= gridRepeatCount) {
         gridColumnStart = lastChildColCount + offset + 1;
         return /*#__PURE__*/React.cloneElement(child, {
-          // @ts-ignore - TS2769 - No overload matches this call.
           gridColumnStart,
           gridColumnEnd: `span ${span}`
         });
@@ -88,9 +82,7 @@ const Col = _ref2 => {
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_GridModule.default.gridColumn, className),
     style: {
-      // @ts-ignore - TS2322 - Type 'number | undefined' is not assignable to type 'string | number'.
       '--grid-column-start': gridColumnStart,
-      // @ts-ignore - TS2322 - Type 'number | undefined' is not assignable to type 'string | number'.
       '--grid-column-end': gridColumnEnd
     }
   }, children);

package/lib/components/Grid/Grid.js.flow

@@ -0,0 +1,110 @@
+// @flow strict
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+
+import css from './Grid.module.css';
+
+
+export type RowProps = {
+  className?: string,
+  children?: React.Node,
+  span?: number,
+  offset?: number,
+  gridType?: 'small' | 'medium' | 'large' | 'autoFill' | 'autoFit',
+  repeatTracks?: string,
+};
+
+const GRID_SYSTEM_MAP = {
+  small: 24,
+  medium: 12,
+  large: 6,
+  autoFill: 'auto-fill',
+  autoFit: 'auto-fit',
+};
+
+export const Row = ({
+  className,
+  children,
+  span = 1,
+  gridType = 'medium',
+  repeatTracks = '1fr',
+}: RowProps): React.Node => {
+  const gridRepeatCount = GRID_SYSTEM_MAP[gridType];
+  let columnSpanCount = 0;
+  let lastChildColCount = 0;
+  const childrenWithProps = React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      const {span = 1, offset = 0} = child.props;
+      if (span < 1) {
+        console.error(`span can not be less than one`);
+        return;
+      }
+      if (offset < 0) {
+        console.error(`offset can not be negative`);
+        return;
+      }
+      lastChildColCount = columnSpanCount;
+      columnSpanCount = lastChildColCount + offset + span;
+      let gridColumnStart = 0,
+        gridColumnEnd = 0;
+      if (gridType === 'autoFill' || gridType === 'autoFit') {
+        gridColumnStart = 'auto';
+        return React.cloneElement(child, {
+          gridColumnStart,
+          gridColumnEnd: `span ${span}`,
+        });
+      } else if (
+        typeof gridRepeatCount === 'number' &&
+        columnSpanCount <= gridRepeatCount
+      ) {
+        gridColumnStart = lastChildColCount + offset + 1;
+        return React.cloneElement(child, {
+          gridColumnStart,
+          gridColumnEnd: `span ${span}`,
+        });
+      } else {
+        console.error(`number of column exceed ${gridRepeatCount}`);
+      }
+    }
+  });
+
+  return (
+    <div
+      data-testid="Grid"
+      className={classify(css.gridRow, className)}
+      style={{
+        '--grid-repeat-count': gridRepeatCount,
+        '--repeat-tracks': repeatTracks,
+      }}
+    >
+      {childrenWithProps}
+    </div>
+  );
+};
+
+export type ColProps = {
+  className?: string,
+  children?: React.Node,
+  span?: number,
+  offset?: number,
+  gridColumnStart?: number,
+  gridColumnEnd?: number,
+};
+
+export const Col = ({
+  className,
+  children,
+  gridColumnStart,
+  gridColumnEnd,
+}: ColProps): React.Node => (
+  <div
+    className={classify(css.gridColumn, className)}
+    style={{
+      '--grid-column-start': gridColumnStart,
+      '--grid-column-end': gridColumnEnd,
+    }}
+  >
+    {children}
+  </div>
+);

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

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

package/lib/components/Icon/ClickableIcon.js

@@ -18,8 +18,8 @@ const ClickableIcon = exports.ClickableIcon = /*#__PURE__*/React.forwardRef((_re
     size = 'medium',
     ariaLabel,
     onClick,
-    // Deprecated for Clickable Icon
     className,
+    // Deprecated for Clickable Icon
     classNames,
     disabled = false,
     ...props
@@ -32,9 +32,7 @@ const ClickableIcon = exports.ClickableIcon = /*#__PURE__*/React.forwardRef((_re
   };
   return /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, props, {
     onClick: onClick,
-    disabled: disabled
-    // @ts-ignore - TS2769 - No overload matches this call.
-    ,
+    disabled: disabled,
     onKeyDown: onKeyDownHandler,
     ariaLabel: ariaLabel,
     className: (0, _classify.default)(_ClickableIconModule.default.button, {