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

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.stories.tsx

@@ -1,557 +0,0 @@
-import * as React from 'react';
-
-import {Button} from '../Button';
-import {SubTitleExtraSmall} from '../Text';
-
-import type {FocusManagerWithArrowKeyNavigationProps} from './';
-import {
-  FocusManagerWithArrowKeyNavigation,
-  SkipElementFromNavigation,
-} from './FocusManagerWithArrowKeyNavigation';
-
-import css from './FocusManagerWithArrowKeyNavigation.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Utils/Focus Manager With Arrow Key Navigation',
-  component: FocusManagerWithArrowKeyNavigation,
-  argTypes: {
-    classNames: {
-      description: 'Provide an optional className to be applied to the wrapper',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: '{wrapper?: string}',
-        },
-      },
-    },
-    children: {
-      description:
-        'The children to be rendered inside the FocusManager And provides list and grid navigation',
-      table: {
-        type: {summary: 'React.ReactNode'},
-      },
-    },
-    initialFocus: {
-      description:
-        'Which element to initially focus. Can be a number (tabbable index as specified by the order)',
-      control: {
-        type: 'number',
-      },
-      table: {
-        type: {summary: 'number'},
-        defaultValue: {summary: '-1'},
-      },
-    },
-    returnFocus: {
-      description:
-        'Determines if focus should be returned to the reference element (or if that is not available, the previously focused element). This prop is ignored if the floating element lost focus.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'true'},
-      },
-    },
-    modal: {
-      description:
-        'Determines if focus is “modal”, meaning focus is fully trapped inside the floating element and outside content cannot be accessed. This includes screen reader virtual cursors.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'true'},
-      },
-    },
-    guards: {
-      description:
-        'Determines if the focus guards are rendered. If not, focus can escape into the address bar/console/browser UI, like in native dialogs.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'true'},
-      },
-    },
-    cols: {
-      description:
-        'For a list it should be 1. For grid, you can have cols set according to your use-case',
-      control: {
-        type: 'number',
-      },
-      table: {
-        type: {summary: 'number'},
-        defaultValue: {summary: '1'},
-      },
-    },
-    orientation: {
-      options: ['vertical', 'horizontal'],
-      description:
-        'For list, orientation should be vertical. For grid, the orientation should be set to horizontal',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'vertical'},
-      },
-    },
-    loop: {
-      description:
-        'Determines whether to restart from the beginning or end if the user has navigated to the boundary of the list and grid(in vertical direction only).',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    listReference: {
-      description:
-        'User can provide custom list of elements to navigate between by using listReference. It accepts a list of ref nodes',
-    },
-    focusItemOnOpen: {
-      description:
-        'Determines whether to focus the item upon opening the floating element. "auto" infers what to do based on the input type (keyboard vs. pointer), while a boolean value will force the value. \n **Note**: By default value is "auto" string.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'auto'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle:
-        'Generates a FocusManager component with list or grid navigation.',
-      description: {
-        component: `
-\`\`\`js
-import { FocusManagerWithArrowKeyNavigation, SkipElementFromNavigation } from "@spaced-out/ui-design-system/lib/components/FocusManagerWithArrowKeyNavigation";
-\`\`\`
-Provides flexible non-modal focus management for an element and also provides navigation(list or grid) with arrow keys for the children elements passed. \n **Note:** If there are elements you want to skip in navigation, you should wrap the element using **SkipElementFromNavigation**, which will not be indexed. In case of Grid, if you have any empty slots, calling component should take care of it. For practical implementation of both cases check examples below.
-        `,
-      },
-    },
-    storySource: {
-      componentPath:
-        '/src/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.jsx',
-    },
-  },
-};
-
-export const _FocusManagerWithGridNavigation = (args: FocusManagerWithArrowKeyNavigationProps) => {
-  const onClick = (e: React.SyntheticEvent<HTMLElement>) => {
-    console.error('checking pass through', e);
-  };
-  const numbers = [
-    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
-  ];
-  const alphabets = [
-    'A',
-    'B',
-    'C',
-    'D',
-    'E',
-    'F',
-    'G',
-    'H',
-    'I',
-    'J',
-    'K',
-    'L',
-    'M',
-    'N',
-    'O',
-  ];
-  const smallCase = [
-    'a',
-    'b',
-    'c',
-    'd',
-    'e',
-    'f',
-    'g',
-    'h',
-    'i',
-    'j',
-    'k',
-    'l',
-    'm',
-    'n',
-    'o',
-  ];
-  return (
-    <FocusManagerWithArrowKeyNavigation
-      initialFocus={0}
-      cols={5}
-      orientation="horizontal"
-      classNames={{wrapper: css.wrapper}}
-      {...args}
-    >
-      <SkipElementFromNavigation className={css.categoryName}>
-        <SubTitleExtraSmall color="clickable">{'Numbers'}</SubTitleExtraSmall>
-      </SkipElementFromNavigation>
-      {numbers.map((number) => (
-        <Button
-          type="ghost"
-          key={number}
-// @ts-ignore - TS2769 - No overload matches this call.
-          className={css.btnWidth}
-          onClick={onClick}
-        >
-          {number}
-        </Button>
-      ))}
-      <SkipElementFromNavigation className={css.categoryName}>
-        <SubTitleExtraSmall color="clickable">{'Alphabets'}</SubTitleExtraSmall>
-      </SkipElementFromNavigation>
-      {alphabets.map((alphabet) => (
-        <Button
-          type="ghost"
-          key={alphabet}
-// @ts-ignore - TS2769 - No overload matches this call.
-          className={css.btnWidth}
-          onClick={onClick}
-        >
-          {alphabet}
-        </Button>
-      ))}
-      <SkipElementFromNavigation className={css.categoryName}>
-        <SubTitleExtraSmall color="clickable">{'SmallCase'}</SubTitleExtraSmall>
-      </SkipElementFromNavigation>
-      {smallCase.map((alphabet) => (
-        <Button
-          type="ghost"
-          key={alphabet}
-// @ts-ignore - TS2769 - No overload matches this call.
-          className={css.btnWidth}
-          onClick={onClick}
-        >
-          {alphabet}
-        </Button>
-      ))}
-    </FocusManagerWithArrowKeyNavigation>
-  );
-};
-
-_FocusManagerWithGridNavigation.args = {
-  loop: true,
-  focusItemOnOpen: 'auto',
-};
-
-export const _FocusManagerWithGridNavigationHavingEmptyElements =
-  () => {
-    const onClick = (e: React.SyntheticEvent<HTMLElement>) => {
-      console.error('checking pass through', e);
-    };
-    const numbers = [
-      1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
-    ];
-    const alphabets = [
-      'A',
-      'B',
-      'C',
-      'D',
-      'E',
-      'F',
-      'G',
-      'H',
-      'I',
-      'J',
-      'K',
-      'L',
-    ];
-    const smallCase = [
-      'a',
-      'b',
-      'c',
-      'd',
-      'e',
-      'f',
-      'g',
-      'h',
-      'i',
-      'j',
-      'k',
-      'l',
-      'm',
-      'n',
-      'o',
-    ];
-    return (
-      <FocusManagerWithArrowKeyNavigation
-        initialFocus={0}
-        cols={5}
-        orientation="horizontal"
-        classNames={{wrapper: css.wrapper}}
-      >
-        <SkipElementFromNavigation className={css.categoryName}>
-          <SubTitleExtraSmall color="clickable">{'Numbers'}</SubTitleExtraSmall>
-        </SkipElementFromNavigation>
-        {numbers.map((number) => (
-          <Button
-            type="ghost"
-            key={number}
-// @ts-ignore - TS2769 - No overload matches this call.
-            className={css.btnWidth}
-            onClick={onClick}
-          >
-            {number}
-          </Button>
-        ))}
-        {/* adding two empty slots for consistent navigation in grid */}
-{ /* @ts-ignore - TS2322 - Type '{ disabled: boolean; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. */}
-        <div disabled={true}></div>
-{ /* @ts-ignore - TS2322 - Type '{ disabled: boolean; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. */}
-        <div disabled={true}></div>
-        <SkipElementFromNavigation className={css.categoryName}>
-          <SubTitleExtraSmall color="clickable">
-            {'Alphabets'}
-          </SubTitleExtraSmall>
-        </SkipElementFromNavigation>
-        {alphabets.map((alphabet) => (
-          <Button
-            type="ghost"
-            key={alphabet}
-// @ts-ignore - TS2769 - No overload matches this call.
-            className={css.btnWidth}
-            onClick={onClick}
-          >
-            {alphabet}
-          </Button>
-        ))}
-        {/* adding three empty slots for consistent navigation in grid*/}
-{ /* @ts-ignore - TS2322 - Type '{ disabled: boolean; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. */}
-        <div disabled={true}></div>
-{ /* @ts-ignore - TS2322 - Type '{ disabled: boolean; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. */}
-        <div disabled={true}></div>
-{ /* @ts-ignore - TS2322 - Type '{ disabled: boolean; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. */}
-        <div disabled={true}></div>
-        <SkipElementFromNavigation className={css.categoryName}>
-          <SubTitleExtraSmall color="clickable">
-            {'SmallCase'}
-          </SubTitleExtraSmall>
-        </SkipElementFromNavigation>
-        {smallCase.map((alphabet) => (
-          <Button
-            type="ghost"
-            key={alphabet}
-// @ts-ignore - TS2769 - No overload matches this call.
-            className={css.btnWidth}
-            onClick={onClick}
-          >
-            {alphabet}
-          </Button>
-        ))}
-      </FocusManagerWithArrowKeyNavigation>
-    );
-  };
-
-export const _FocusManagerWithListNavigation = () => {
-  const onClick = (e: React.SyntheticEvent<HTMLElement>) => {
-    console.error('checking pass through', e);
-  };
-  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
-  return (
-    <FocusManagerWithArrowKeyNavigation
-      initialFocus={0}
-      cols={1}
-      orientation="vertical"
-      classNames={{wrapper: css.wrapper}}
-    >
-      {numbers.map((number) => (
-        <Button
-          type="ghost"
-          key={number}
-// @ts-ignore - TS2769 - No overload matches this call.
-          className={css.btnWidth}
-          onClick={onClick}
-          isFluid={true}
-        >
-          {number}
-        </Button>
-      ))}
-    </FocusManagerWithArrowKeyNavigation>
-  );
-};
-
-export const _FocusManagerWithGridNavigationUsingListReference = (args: FocusManagerWithArrowKeyNavigationProps) => {
-  const onClick = (e: React.SyntheticEvent<HTMLElement>) => {
-    console.error('checking pass through', e);
-  };
-  const numbers = [
-    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
-  ];
-  const alphabets = [
-    'A',
-    'B',
-    'C',
-    'D',
-    'E',
-    'F',
-    'G',
-    'H',
-    'I',
-    'J',
-    'K',
-    'L',
-  ];
-  const smallCase = [
-    'a',
-    'b',
-    'c',
-    'd',
-    'e',
-    'f',
-    'g',
-    'h',
-    'i',
-    'j',
-    'k',
-    'l',
-    'm',
-  ];
-  const listRef = React.useRef([]);
-  return (
-    <FocusManagerWithArrowKeyNavigation
-      initialFocus={0}
-      cols={5}
-      orientation="horizontal"
-      classNames={{wrapper: css.wrapper}}
-      listReference={listRef}
-      {...args}
-    >
-      <SubTitleExtraSmall color="clickable" className={css.categoryName}>
-        {'Numbers'}
-      </SubTitleExtraSmall>
-      {numbers.map((number) => (
-        <Button
-          type="ghost"
-          key={number}
-// @ts-ignore - TS2769 - No overload matches this call.
-          className={css.btnWidth}
-          onClick={onClick}
-          ref={(node) => {
-            if (node) {
-// @ts-ignore - TS2345 - Argument of type 'HTMLButtonElement' is not assignable to parameter of type 'never'.
-              listRef.current.push(node);
-            }
-          }}
-        >
-          {number}
-        </Button>
-      ))}
-
-      <SubTitleExtraSmall color="clickable" className={css.categoryName}>
-        {'Alphabets'}
-      </SubTitleExtraSmall>
-
-      {alphabets.map((alphabet) => (
-        <Button
-          type="ghost"
-          key={alphabet}
-// @ts-ignore - TS2769 - No overload matches this call.
-          className={css.btnWidth}
-          onClick={onClick}
-          ref={(node) => {
-            if (node) {
-// @ts-ignore - TS2345 - Argument of type 'HTMLButtonElement' is not assignable to parameter of type 'never'.
-              listRef.current.push(node);
-            }
-          }}
-        >
-          {alphabet}
-        </Button>
-      ))}
-      {/* adding three empty slots for consistent navigation in grid*/}
-      <div
-// @ts-ignore - TS2322 - Type '{ disabled: boolean; ref: (node: HTMLDivElement | null) => void; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
-        disabled={true}
-        ref={(node) => {
-          if (node) {
-// @ts-ignore - TS2345 - Argument of type 'HTMLDivElement' is not assignable to parameter of type 'never'.
-            listRef.current.push(node);
-          }
-        }}
-      ></div>
-      <div
-// @ts-ignore - TS2322 - Type '{ disabled: boolean; ref: (node: HTMLDivElement | null) => void; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
-        disabled={true}
-        ref={(node) => {
-          if (node) {
-// @ts-ignore - TS2345 - Argument of type 'HTMLDivElement' is not assignable to parameter of type 'never'.
-            listRef.current.push(node);
-          }
-        }}
-      ></div>
-      <div
-// @ts-ignore - TS2322 - Type '{ disabled: boolean; ref: (node: HTMLDivElement | null) => void; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
-        disabled={true}
-        ref={(node) => {
-          if (node) {
-// @ts-ignore - TS2345 - Argument of type 'HTMLDivElement' is not assignable to parameter of type 'never'.
-            listRef.current.push(node);
-          }
-        }}
-      ></div>
-      <SubTitleExtraSmall color="clickable" className={css.categoryName}>
-        {'SmallCase'}
-      </SubTitleExtraSmall>
-      {smallCase.map((alphabet) => (
-        <Button
-          type="ghost"
-          key={alphabet}
-// @ts-ignore - TS2769 - No overload matches this call.
-          className={css.btnWidth}
-          onClick={onClick}
-          ref={(node) => {
-            if (node) {
-// @ts-ignore - TS2345 - Argument of type 'HTMLButtonElement' is not assignable to parameter of type 'never'.
-              listRef.current.push(node);
-            }
-          }}
-        >
-          {alphabet}
-        </Button>
-      ))}
-      {/* adding three empty slots for consistent navigation in grid*/}
-      <div
-// @ts-ignore - TS2322 - Type '{ disabled: boolean; ref: (node: HTMLDivElement | null) => void; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
-        disabled={true}
-        ref={(node) => {
-          if (node) {
-// @ts-ignore - TS2345 - Argument of type 'HTMLDivElement' is not assignable to parameter of type 'never'.
-            listRef.current.push(node);
-          }
-        }}
-      ></div>
-      <div
-// @ts-ignore - TS2322 - Type '{ disabled: boolean; ref: (node: HTMLDivElement | null) => void; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
-        disabled={true}
-        ref={(node) => {
-          if (node) {
-// @ts-ignore - TS2345 - Argument of type 'HTMLDivElement' is not assignable to parameter of type 'never'.
-            listRef.current.push(node);
-          }
-        }}
-      ></div>
-    </FocusManagerWithArrowKeyNavigation>
-  );
-};
-
-_FocusManagerWithGridNavigationUsingListReference.args = {
-  loop: true,
-  focusItemOnOpen: 'auto',
-  self: true,
-  passListReference: true,
-};

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.tsx

@@ -1,156 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-import {
-  FloatingFocusManager,
-  useFloating,
-  useInteractions,
-  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.ReactNode;
-  className?: string;
-};
-
-export const SkipElementFromNavigation: Flow.AbstractComponent<SkipElementFromNavigationProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, SkipElementFromNavigationProps>((
-  {
-    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 & Omit<Omit<Flow.ComponentProps<typeof FloatingFocusManager>, 'context' | 'modal' | 'initialFocus'>, keyof FocusManagerWithArrowKeyNavigationProps>,
-) => {
-  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<any>(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
-// @ts-ignore - TS7019 - Rest parameter 'args' implicitly has an 'any[]' type.
-  const childOnClickPassthrough = (childOnClickHandler: any | null | undefined, index: number, ...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) => {
-// @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 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: (...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>
-  );
-};