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

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.js

@@ -50,6 +50,7 @@ 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++) {
@@ -77,22 +78,32 @@ 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.stories.d.ts

@@ -0,0 +1,175 @@
+import * as React from 'react';
+import type { FocusManagerWithArrowKeyNavigationProps } from './';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: (props: FocusManagerWithArrowKeyNavigationProps & Omit<Omit<import("flow-to-typescript-codemod").Flow.ComponentProps<typeof import("@floating-ui/react").FloatingFocusManager>, "context" | "modal" | "initialFocus">, keyof FocusManagerWithArrowKeyNavigationProps>) => React.JSX.Element;
+    argTypes: {
+        classNames: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        children: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        initialFocus: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        returnFocus: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        modal: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        guards: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        cols: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        orientation: {
+            options: string[];
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        loop: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        listReference: {
+            description: string;
+        };
+        focusItemOnOpen: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _FocusManagerWithGridNavigation: {
+    (args: FocusManagerWithArrowKeyNavigationProps): React.JSX.Element;
+    args: {
+        loop: boolean;
+        focusItemOnOpen: string;
+    };
+};
+export declare const _FocusManagerWithGridNavigationHavingEmptyElements: () => React.JSX.Element;
+export declare const _FocusManagerWithListNavigation: () => React.JSX.Element;
+export declare const _FocusManagerWithGridNavigationUsingListReference: {
+    (args: FocusManagerWithArrowKeyNavigationProps): React.JSX.Element;
+    args: {
+        loop: boolean;
+        focusItemOnOpen: string;
+        self: boolean;
+        passListReference: boolean;
+    };
+};
+//# sourceMappingURL=FocusManagerWithArrowKeyNavigation.stories.d.ts.map

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusManagerWithArrowKeyNavigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAC,uCAAuC,EAAC,MAAM,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAShE,wBAuIE;AAEF,eAAO,MAAM,+BAA+B;WAAU,uCAAuC;;;;;CA6F5F,CAAC;AAOF,eAAO,MAAM,kDAAkD,yBA0G5D,CAAC;AAEJ,eAAO,MAAM,+BAA+B,yBA0B3C,CAAC;AAEF,eAAO,MAAM,iDAAiD;WAAU,uCAAuC;;;;;;;CAkK9G,CAAC"}

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.stories.js

@@ -0,0 +1,427 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._FocusManagerWithListNavigation = exports._FocusManagerWithGridNavigationUsingListReference = exports._FocusManagerWithGridNavigationHavingEmptyElements = exports._FocusManagerWithGridNavigation = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Button = require("../Button");
+var _Text = require("../Text");
+var _FocusManagerWithArrowKeyNavigation = require("./FocusManagerWithArrowKeyNavigation");
+var _FocusManagerWithArrowKeyNavigationStoriesModule = _interopRequireDefault(require("./FocusManagerWithArrowKeyNavigation.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Utils/Focus Manager With Arrow Key Navigation',
+  component: _FocusManagerWithArrowKeyNavigation.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'
+    }
+  }
+};
+const _FocusManagerWithGridNavigation = args => {
+  const onClick = e => {
+    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 /*#__PURE__*/React.createElement(_FocusManagerWithArrowKeyNavigation.FocusManagerWithArrowKeyNavigation, _extends({
+    initialFocus: 0,
+    cols: 5,
+    orientation: "horizontal",
+    classNames: {
+      wrapper: _FocusManagerWithArrowKeyNavigationStoriesModule.default.wrapper
+    }
+  }, args), /*#__PURE__*/React.createElement(_FocusManagerWithArrowKeyNavigation.SkipElementFromNavigation, {
+    className: _FocusManagerWithArrowKeyNavigationStoriesModule.default.categoryName
+  }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
+    color: "clickable"
+  }, 'Numbers')), numbers.map(number => /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "ghost",
+    key: number
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    className: _FocusManagerWithArrowKeyNavigationStoriesModule.default.btnWidth,
+    onClick: onClick
+  }, number)), /*#__PURE__*/React.createElement(_FocusManagerWithArrowKeyNavigation.SkipElementFromNavigation, {
+    className: _FocusManagerWithArrowKeyNavigationStoriesModule.default.categoryName
+  }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
+    color: "clickable"
+  }, 'Alphabets')), alphabets.map(alphabet => /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "ghost",
+    key: alphabet
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    className: _FocusManagerWithArrowKeyNavigationStoriesModule.default.btnWidth,
+    onClick: onClick
+  }, alphabet)), /*#__PURE__*/React.createElement(_FocusManagerWithArrowKeyNavigation.SkipElementFromNavigation, {
+    className: _FocusManagerWithArrowKeyNavigationStoriesModule.default.categoryName
+  }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
+    color: "clickable"
+  }, 'SmallCase')), smallCase.map(alphabet => /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "ghost",
+    key: alphabet
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    className: _FocusManagerWithArrowKeyNavigationStoriesModule.default.btnWidth,
+    onClick: onClick
+  }, alphabet)));
+};
+exports._FocusManagerWithGridNavigation = _FocusManagerWithGridNavigation;
+_FocusManagerWithGridNavigation.args = {
+  loop: true,
+  focusItemOnOpen: 'auto'
+};
+const _FocusManagerWithGridNavigationHavingEmptyElements = () => {
+  const onClick = e => {
+    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 /*#__PURE__*/React.createElement(_FocusManagerWithArrowKeyNavigation.FocusManagerWithArrowKeyNavigation, {
+    initialFocus: 0,
+    cols: 5,
+    orientation: "horizontal",
+    classNames: {
+      wrapper: _FocusManagerWithArrowKeyNavigationStoriesModule.default.wrapper
+    }
+  }, /*#__PURE__*/React.createElement(_FocusManagerWithArrowKeyNavigation.SkipElementFromNavigation, {
+    className: _FocusManagerWithArrowKeyNavigationStoriesModule.default.categoryName
+  }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
+    color: "clickable"
+  }, 'Numbers')), numbers.map(number => /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "ghost",
+    key: number
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    className: _FocusManagerWithArrowKeyNavigationStoriesModule.default.btnWidth,
+    onClick: onClick
+  }, number)), /*#__PURE__*/React.createElement("div", {
+    disabled: true
+  }), /*#__PURE__*/React.createElement("div", {
+    disabled: true
+  }), /*#__PURE__*/React.createElement(_FocusManagerWithArrowKeyNavigation.SkipElementFromNavigation, {
+    className: _FocusManagerWithArrowKeyNavigationStoriesModule.default.categoryName
+  }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
+    color: "clickable"
+  }, 'Alphabets')), alphabets.map(alphabet => /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "ghost",
+    key: alphabet
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    className: _FocusManagerWithArrowKeyNavigationStoriesModule.default.btnWidth,
+    onClick: onClick
+  }, alphabet)), /*#__PURE__*/React.createElement("div", {
+    disabled: true
+  }), /*#__PURE__*/React.createElement("div", {
+    disabled: true
+  }), /*#__PURE__*/React.createElement("div", {
+    disabled: true
+  }), /*#__PURE__*/React.createElement(_FocusManagerWithArrowKeyNavigation.SkipElementFromNavigation, {
+    className: _FocusManagerWithArrowKeyNavigationStoriesModule.default.categoryName
+  }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
+    color: "clickable"
+  }, 'SmallCase')), smallCase.map(alphabet => /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "ghost",
+    key: alphabet
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    className: _FocusManagerWithArrowKeyNavigationStoriesModule.default.btnWidth,
+    onClick: onClick
+  }, alphabet)));
+};
+exports._FocusManagerWithGridNavigationHavingEmptyElements = _FocusManagerWithGridNavigationHavingEmptyElements;
+const _FocusManagerWithListNavigation = () => {
+  const onClick = e => {
+    console.error('checking pass through', e);
+  };
+  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+  return /*#__PURE__*/React.createElement(_FocusManagerWithArrowKeyNavigation.FocusManagerWithArrowKeyNavigation, {
+    initialFocus: 0,
+    cols: 1,
+    orientation: "vertical",
+    classNames: {
+      wrapper: _FocusManagerWithArrowKeyNavigationStoriesModule.default.wrapper
+    }
+  }, numbers.map(number => /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "ghost",
+    key: number
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    className: _FocusManagerWithArrowKeyNavigationStoriesModule.default.btnWidth,
+    onClick: onClick,
+    isFluid: true
+  }, number)));
+};
+exports._FocusManagerWithListNavigation = _FocusManagerWithListNavigation;
+const _FocusManagerWithGridNavigationUsingListReference = args => {
+  const onClick = e => {
+    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 /*#__PURE__*/React.createElement(_FocusManagerWithArrowKeyNavigation.FocusManagerWithArrowKeyNavigation, _extends({
+    initialFocus: 0,
+    cols: 5,
+    orientation: "horizontal",
+    classNames: {
+      wrapper: _FocusManagerWithArrowKeyNavigationStoriesModule.default.wrapper
+    },
+    listReference: listRef
+  }, args), /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
+    color: "clickable",
+    className: _FocusManagerWithArrowKeyNavigationStoriesModule.default.categoryName
+  }, 'Numbers'), numbers.map(number => /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "ghost",
+    key: number
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    className: _FocusManagerWithArrowKeyNavigationStoriesModule.default.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)), /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
+    color: "clickable",
+    className: _FocusManagerWithArrowKeyNavigationStoriesModule.default.categoryName
+  }, 'Alphabets'), alphabets.map(alphabet => /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "ghost",
+    key: alphabet
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    className: _FocusManagerWithArrowKeyNavigationStoriesModule.default.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)), /*#__PURE__*/React.createElement("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);
+      }
+    }
+  }), /*#__PURE__*/React.createElement("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);
+      }
+    }
+  }), /*#__PURE__*/React.createElement("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);
+      }
+    }
+  }), /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
+    color: "clickable",
+    className: _FocusManagerWithArrowKeyNavigationStoriesModule.default.categoryName
+  }, 'SmallCase'), smallCase.map(alphabet => /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "ghost",
+    key: alphabet
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    className: _FocusManagerWithArrowKeyNavigationStoriesModule.default.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)), /*#__PURE__*/React.createElement("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);
+      }
+    }
+  }), /*#__PURE__*/React.createElement("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);
+      }
+    }
+  }));
+};
+exports._FocusManagerWithGridNavigationUsingListReference = _FocusManagerWithGridNavigationUsingListReference;
+_FocusManagerWithGridNavigationUsingListReference.args = {
+  loop: true,
+  focusItemOnOpen: 'auto',
+  self: true,
+  passListReference: true
+};

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

@@ -0,0 +1,2 @@
+export * from './FocusManagerWithArrowKeyNavigation';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/FocusManagerWithArrowKeyNavigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FocusManagerWithArrowKeyNavigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC"}

package/lib/components/FormTitleWrapper/FormTitleWrapper.d.ts

@@ -0,0 +1,21 @@
+import { Flow } from 'flow-to-typescript-codemod';
+import * as React from 'react';
+import type { ColorTypes } from '../../types/typography';
+import type { IconSize, IconType } from '../Icon';
+type ClassNames = Readonly<{
+    wrapper?: string;
+    title?: string;
+    rightSlot?: string;
+}>;
+export type FormTitleWrapperProps = {
+    classNames?: ClassNames;
+    iconType?: IconType;
+    iconName?: string;
+    iconSize?: IconSize;
+    iconColor?: ColorTypes;
+    title: React.ReactNode;
+    rightSlot?: React.ReactNode;
+};
+export declare const FormTitleWrapper: Flow.AbstractComponent<FormTitleWrapperProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=FormTitleWrapper.d.ts.map

package/lib/components/FormTitleWrapper/FormTitleWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormTitleWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/FormTitleWrapper/FormTitleWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAC;AAEvD,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,SAAS,CAAC;AAMhD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG;IAClC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,CAAC,qBAAqB,EAAE,cAAc,CAkCzF,CAAC"}