@elliemae/ds-hooks-keyboard-navigation 3.27.0-next.1

package/dist/cjs/DSHooksKeyboardNavigation.js

@@ -0,0 +1,102 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DSHooksKeyboardNavigation_exports = {};
+__export(DSHooksKeyboardNavigation_exports, {
+  UseKeyboardNavigationWithSchema: () => UseKeyboardNavigationWithSchema,
+  useKeyboardNavigation: () => useKeyboardNavigation
+});
+module.exports = __toCommonJS(DSHooksKeyboardNavigation_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_react_desc_prop_types2 = require("./react-desc-prop-types.js");
+const useKeyboardNavigation = (props) => {
+  const { options, isHorizontal, disableRoving, focusCriteria } = props;
+  const [focusedOption, setFocusedOption] = (0, import_react.useState)(null);
+  const previousFocusedOption = (0, import_react.useRef)(null);
+  const focusedOptionMutable = (0, import_react.useRef)(null);
+  const config = (0, import_react.useMemo)(
+    () => ({
+      onBlur: () => {
+        previousFocusedOption.current = focusedOption;
+        setFocusedOption(null);
+      }
+    }),
+    [focusedOption]
+  );
+  const handleParentOnBlur = (0, import_ds_utilities.useOnBlurOut)(config);
+  const arrowsKeys = (0, import_react.useMemo)(
+    () => isHorizontal ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"],
+    [isHorizontal]
+  );
+  const onKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      const { key } = e;
+      const index = options.findIndex((option) => option === focusedOptionMutable.current);
+      if (key === arrowsKeys[0]) {
+        e.preventDefault();
+        const previous = (0, import_ds_utilities.findInCircularList)(options, index, focusCriteria, -1);
+        setFocusedOption(options[previous]);
+      } else if (key === arrowsKeys[1]) {
+        e.preventDefault();
+        const next = (0, import_ds_utilities.findInCircularList)(options, index, focusCriteria, 1);
+        setFocusedOption(options[next]);
+      }
+    },
+    [arrowsKeys, options, focusCriteria, setFocusedOption]
+  );
+  const getItemProps = (0, import_react.useCallback)(
+    (dsId) => ({
+      innerRef: (el) => {
+        if (el && dsId === focusedOption && focusedOptionMutable.current !== dsId) {
+          el?.focus();
+          focusedOptionMutable.current = dsId;
+        }
+      },
+      onFocus: () => setFocusedOption(dsId),
+      tabIndex: disableRoving || dsId === focusedOptionMutable.current || previousFocusedOption.current === dsId && focusedOptionMutable.current === null || dsId === options[0] && focusedOptionMutable.current === null && previousFocusedOption.current === null ? 0 : -1
+    }),
+    [disableRoving, focusedOption, options]
+  );
+  const getWrapperProps = (0, import_react.useCallback)(
+    () => ({
+      onKeyDown,
+      onBlur: handleParentOnBlur
+    }),
+    [onKeyDown, handleParentOnBlur]
+  );
+  return (0, import_react.useMemo)(
+    () => ({ getWrapperProps, getItemProps, focusedOption, setFocusedOption }),
+    [focusedOption, getWrapperProps, getItemProps]
+  );
+};
+const UseKeyboardNavigationWithSchema = (0, import_ds_props_helpers.describe)(useKeyboardNavigation);
+UseKeyboardNavigationWithSchema.propTypes = import_react_desc_prop_types2.propTypes;
+//# sourceMappingURL=DSHooksKeyboardNavigation.js.map

package/dist/cjs/DSHooksKeyboardNavigation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DSHooksKeyboardNavigation.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useCallback, useMemo, useRef, useState } from 'react';\nimport { useOnBlurOut, findInCircularList } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSHooksKeyboardNaviationT } from './react-desc-prop-types.js';\nimport { propTypes } from './react-desc-prop-types.js';\nconst useKeyboardNavigation = (props: DSHooksKeyboardNaviationT.Props) => {\n  const { options, isHorizontal, disableRoving, focusCriteria } = props;\n  const [focusedOption, setFocusedOption] = useState<string | null>(null);\n  const previousFocusedOption = useRef<string | null>(null);\n  const focusedOptionMutable = useRef<string | null>(null);\n\n  const config = useMemo(\n    () => ({\n      onBlur: () => {\n        previousFocusedOption.current = focusedOption;\n        setFocusedOption(null);\n      },\n    }),\n    [focusedOption],\n  );\n  const handleParentOnBlur = useOnBlurOut(config);\n\n  const arrowsKeys = useMemo(\n    () => (isHorizontal ? ['ArrowLeft', 'ArrowRight'] : ['ArrowUp', 'ArrowDown']),\n    [isHorizontal],\n  );\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      const { key } = e;\n      const index = options.findIndex((option) => option === focusedOptionMutable.current);\n      if (key === arrowsKeys[0]) {\n        e.preventDefault();\n        const previous = findInCircularList(options, index, focusCriteria, -1);\n        setFocusedOption(options[previous]);\n      } else if (key === arrowsKeys[1]) {\n        e.preventDefault();\n        const next = findInCircularList(options, index, focusCriteria, 1);\n        setFocusedOption(options[next]);\n      }\n    },\n    [arrowsKeys, options, focusCriteria, setFocusedOption],\n  );\n\n  const getItemProps = useCallback(\n    (dsId: string) => ({\n      innerRef: (el: HTMLElement | null) => {\n        if (el && dsId === focusedOption && focusedOptionMutable.current !== dsId) {\n          el?.focus();\n          focusedOptionMutable.current = dsId;\n        }\n      },\n      onFocus: () => setFocusedOption(dsId),\n      tabIndex:\n        disableRoving ||\n        dsId === focusedOptionMutable.current ||\n        (previousFocusedOption.current === dsId && focusedOptionMutable.current === null) ||\n        (dsId === options[0] && focusedOptionMutable.current === null && previousFocusedOption.current === null)\n          ? 0\n          : -1,\n    }),\n    [disableRoving, focusedOption, options],\n  );\n\n  const getWrapperProps = useCallback(\n    () => ({\n      onKeyDown,\n      onBlur: handleParentOnBlur,\n    }),\n    [onKeyDown, handleParentOnBlur],\n  );\n\n  return useMemo(\n    () => ({ getWrapperProps, getItemProps, focusedOption, setFocusedOption }),\n    [focusedOption, getWrapperProps, getItemProps],\n  );\n};\n\nconst UseKeyboardNavigationWithSchema = describe(useKeyboardNavigation);\nUseKeyboardNavigationWithSchema.propTypes = propTypes;\n\nexport { useKeyboardNavigation, UseKeyboardNavigationWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAuD;AACvD,0BAAiD;AACjD,8BAAyB;AAEzB,IAAAA,gCAA0B;AAC1B,MAAM,wBAAwB,CAAC,UAA2C;AACxE,QAAM,EAAE,SAAS,cAAc,eAAe,cAAc,IAAI;AAChE,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAwB,IAAI;AACtE,QAAM,4BAAwB,qBAAsB,IAAI;AACxD,QAAM,2BAAuB,qBAAsB,IAAI;AAEvD,QAAM,aAAS;AAAA,IACb,OAAO;AAAA,MACL,QAAQ,MAAM;AACZ,8BAAsB,UAAU;AAChC,yBAAiB,IAAI;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AACA,QAAM,yBAAqB,kCAAa,MAAM;AAE9C,QAAM,iBAAa;AAAA,IACjB,MAAO,eAAe,CAAC,aAAa,YAAY,IAAI,CAAC,WAAW,WAAW;AAAA,IAC3E,CAAC,YAAY;AAAA,EACf;AACA,QAAM,gBAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,YAAM,QAAQ,QAAQ,UAAU,CAAC,WAAW,WAAW,qBAAqB,OAAO;AACnF,UAAI,QAAQ,WAAW,CAAC,GAAG;AACzB,UAAE,eAAe;AACjB,cAAM,eAAW,wCAAmB,SAAS,OAAO,eAAe,EAAE;AACrE,yBAAiB,QAAQ,QAAQ,CAAC;AAAA,MACpC,WAAW,QAAQ,WAAW,CAAC,GAAG;AAChC,UAAE,eAAe;AACjB,cAAM,WAAO,wCAAmB,SAAS,OAAO,eAAe,CAAC;AAChE,yBAAiB,QAAQ,IAAI,CAAC;AAAA,MAChC;AAAA,IACF;AAAA,IACA,CAAC,YAAY,SAAS,eAAe,gBAAgB;AAAA,EACvD;AAEA,QAAM,mBAAe;AAAA,IACnB,CAAC,UAAkB;AAAA,MACjB,UAAU,CAAC,OAA2B;AACpC,YAAI,MAAM,SAAS,iBAAiB,qBAAqB,YAAY,MAAM;AACzE,cAAI,MAAM;AACV,+BAAqB,UAAU;AAAA,QACjC;AAAA,MACF;AAAA,MACA,SAAS,MAAM,iBAAiB,IAAI;AAAA,MACpC,UACE,iBACA,SAAS,qBAAqB,WAC7B,sBAAsB,YAAY,QAAQ,qBAAqB,YAAY,QAC3E,SAAS,QAAQ,CAAC,KAAK,qBAAqB,YAAY,QAAQ,sBAAsB,YAAY,OAC/F,IACA;AAAA,IACR;AAAA,IACA,CAAC,eAAe,eAAe,OAAO;AAAA,EACxC;AAEA,QAAM,sBAAkB;AAAA,IACtB,OAAO;AAAA,MACL;AAAA,MACA,QAAQ;AAAA,IACV;AAAA,IACA,CAAC,WAAW,kBAAkB;AAAA,EAChC;AAEA,aAAO;AAAA,IACL,OAAO,EAAE,iBAAiB,cAAc,eAAe,iBAAiB;AAAA,IACxE,CAAC,eAAe,iBAAiB,YAAY;AAAA,EAC/C;AACF;AAEA,MAAM,sCAAkC,kCAAS,qBAAqB;AACtE,gCAAgC,YAAY;",
+  "names": ["import_react_desc_prop_types"]
+}

package/dist/cjs/index.js

@@ -0,0 +1,38 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+__export(src_exports, {
+  UseKeyboardNavigationWithSchema: () => import_DSHooksKeyboardNavigation.UseKeyboardNavigationWithSchema,
+  useKeyboardNavigation: () => import_DSHooksKeyboardNavigation.useKeyboardNavigation
+});
+module.exports = __toCommonJS(src_exports);
+var React = __toESM(require("react"));
+var import_DSHooksKeyboardNavigation = require("./DSHooksKeyboardNavigation.js");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export { UseKeyboardNavigationWithSchema, useKeyboardNavigation } from './DSHooksKeyboardNavigation.js';\nexport { type DSHooksKeyboardNaviationT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uCAAuE;AACvE,mCAA+C;",
+  "names": []
+}

package/dist/cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/cjs/react-desc-prop-types.js

@@ -0,0 +1,46 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  propTypes: () => propTypes
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+var React = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+const propTypes = {
+  options: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.string).description("Array of strings to be items ids.").isRequired,
+  isHorizontal: import_ds_utilities.PropTypes.bool.isRequired.description(
+    "If true, the roving tab index will be applied to the items horizontally. If false, it will be applied vertically."
+  ).defaultValue(false),
+  disableRoving: import_ds_utilities.PropTypes.bool.description("If true, the roving tab index will not be applied to the items."),
+  focusCriteria: import_ds_utilities.PropTypes.func.description(
+    "Function that returns a boolean to determine if the element should be focused."
+  )
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\n\nimport type { WeakValidationMap } from 'react';\nimport { PropTypes } from '@elliemae/ds-utilities';\nimport { type useKeyboardNavigation } from './DSHooksKeyboardNavigation.js';\nexport declare namespace DSHooksKeyboardNaviationT {\n  interface Props {\n    options: string[];\n    isHorizontal?: boolean;\n    disableRoving?: boolean;\n    focusCriteria?: (dsId: string) => boolean;\n  }\n\n  type UseKeyboardNavigationReturnType = ReturnType<typeof useKeyboardNavigation>;\n  type ItemPropsT = ReturnType<UseKeyboardNavigationReturnType['getItemProps']>;\n  type WrapperPropsT = ReturnType<UseKeyboardNavigationReturnType['getWrapperProps']>;\n}\n\nexport const propTypes = {\n  options: PropTypes.arrayOf(PropTypes.string).description('Array of strings to be items ids.').isRequired,\n  isHorizontal: PropTypes.bool.isRequired\n    .description(\n      'If true, the roving tab index will be applied to the items horizontally. If false, it will be applied vertically.',\n    )\n    .defaultValue(false),\n  disableRoving: PropTypes.bool.description('If true, the roving tab index will not be applied to the items.'),\n  focusCriteria: PropTypes.func.description(\n    'Function that returns a boolean to determine if the element should be focused.',\n  ),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,0BAA0B;AAenB,MAAM,YAAY;AAAA,EACvB,SAAS,8BAAU,QAAQ,8BAAU,MAAM,EAAE,YAAY,mCAAmC,EAAE;AAAA,EAC9F,cAAc,8BAAU,KAAK,WAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,eAAe,8BAAU,KAAK,YAAY,iEAAiE;AAAA,EAC3G,eAAe,8BAAU,KAAK;AAAA,IAC5B;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/esm/DSHooksKeyboardNavigation.js

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { useOnBlurOut, findInCircularList } from "@elliemae/ds-utilities";
+import { describe } from "@elliemae/ds-props-helpers";
+import { propTypes } from "./react-desc-prop-types.js";
+const useKeyboardNavigation = (props) => {
+  const { options, isHorizontal, disableRoving, focusCriteria } = props;
+  const [focusedOption, setFocusedOption] = useState(null);
+  const previousFocusedOption = useRef(null);
+  const focusedOptionMutable = useRef(null);
+  const config = useMemo(
+    () => ({
+      onBlur: () => {
+        previousFocusedOption.current = focusedOption;
+        setFocusedOption(null);
+      }
+    }),
+    [focusedOption]
+  );
+  const handleParentOnBlur = useOnBlurOut(config);
+  const arrowsKeys = useMemo(
+    () => isHorizontal ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"],
+    [isHorizontal]
+  );
+  const onKeyDown = useCallback(
+    (e) => {
+      const { key } = e;
+      const index = options.findIndex((option) => option === focusedOptionMutable.current);
+      if (key === arrowsKeys[0]) {
+        e.preventDefault();
+        const previous = findInCircularList(options, index, focusCriteria, -1);
+        setFocusedOption(options[previous]);
+      } else if (key === arrowsKeys[1]) {
+        e.preventDefault();
+        const next = findInCircularList(options, index, focusCriteria, 1);
+        setFocusedOption(options[next]);
+      }
+    },
+    [arrowsKeys, options, focusCriteria, setFocusedOption]
+  );
+  const getItemProps = useCallback(
+    (dsId) => ({
+      innerRef: (el) => {
+        if (el && dsId === focusedOption && focusedOptionMutable.current !== dsId) {
+          el?.focus();
+          focusedOptionMutable.current = dsId;
+        }
+      },
+      onFocus: () => setFocusedOption(dsId),
+      tabIndex: disableRoving || dsId === focusedOptionMutable.current || previousFocusedOption.current === dsId && focusedOptionMutable.current === null || dsId === options[0] && focusedOptionMutable.current === null && previousFocusedOption.current === null ? 0 : -1
+    }),
+    [disableRoving, focusedOption, options]
+  );
+  const getWrapperProps = useCallback(
+    () => ({
+      onKeyDown,
+      onBlur: handleParentOnBlur
+    }),
+    [onKeyDown, handleParentOnBlur]
+  );
+  return useMemo(
+    () => ({ getWrapperProps, getItemProps, focusedOption, setFocusedOption }),
+    [focusedOption, getWrapperProps, getItemProps]
+  );
+};
+const UseKeyboardNavigationWithSchema = describe(useKeyboardNavigation);
+UseKeyboardNavigationWithSchema.propTypes = propTypes;
+export {
+  UseKeyboardNavigationWithSchema,
+  useKeyboardNavigation
+};
+//# sourceMappingURL=DSHooksKeyboardNavigation.js.map

package/dist/esm/DSHooksKeyboardNavigation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSHooksKeyboardNavigation.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useMemo, useRef, useState } from 'react';\nimport { useOnBlurOut, findInCircularList } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSHooksKeyboardNaviationT } from './react-desc-prop-types.js';\nimport { propTypes } from './react-desc-prop-types.js';\nconst useKeyboardNavigation = (props: DSHooksKeyboardNaviationT.Props) => {\n  const { options, isHorizontal, disableRoving, focusCriteria } = props;\n  const [focusedOption, setFocusedOption] = useState<string | null>(null);\n  const previousFocusedOption = useRef<string | null>(null);\n  const focusedOptionMutable = useRef<string | null>(null);\n\n  const config = useMemo(\n    () => ({\n      onBlur: () => {\n        previousFocusedOption.current = focusedOption;\n        setFocusedOption(null);\n      },\n    }),\n    [focusedOption],\n  );\n  const handleParentOnBlur = useOnBlurOut(config);\n\n  const arrowsKeys = useMemo(\n    () => (isHorizontal ? ['ArrowLeft', 'ArrowRight'] : ['ArrowUp', 'ArrowDown']),\n    [isHorizontal],\n  );\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      const { key } = e;\n      const index = options.findIndex((option) => option === focusedOptionMutable.current);\n      if (key === arrowsKeys[0]) {\n        e.preventDefault();\n        const previous = findInCircularList(options, index, focusCriteria, -1);\n        setFocusedOption(options[previous]);\n      } else if (key === arrowsKeys[1]) {\n        e.preventDefault();\n        const next = findInCircularList(options, index, focusCriteria, 1);\n        setFocusedOption(options[next]);\n      }\n    },\n    [arrowsKeys, options, focusCriteria, setFocusedOption],\n  );\n\n  const getItemProps = useCallback(\n    (dsId: string) => ({\n      innerRef: (el: HTMLElement | null) => {\n        if (el && dsId === focusedOption && focusedOptionMutable.current !== dsId) {\n          el?.focus();\n          focusedOptionMutable.current = dsId;\n        }\n      },\n      onFocus: () => setFocusedOption(dsId),\n      tabIndex:\n        disableRoving ||\n        dsId === focusedOptionMutable.current ||\n        (previousFocusedOption.current === dsId && focusedOptionMutable.current === null) ||\n        (dsId === options[0] && focusedOptionMutable.current === null && previousFocusedOption.current === null)\n          ? 0\n          : -1,\n    }),\n    [disableRoving, focusedOption, options],\n  );\n\n  const getWrapperProps = useCallback(\n    () => ({\n      onKeyDown,\n      onBlur: handleParentOnBlur,\n    }),\n    [onKeyDown, handleParentOnBlur],\n  );\n\n  return useMemo(\n    () => ({ getWrapperProps, getItemProps, focusedOption, setFocusedOption }),\n    [focusedOption, getWrapperProps, getItemProps],\n  );\n};\n\nconst UseKeyboardNavigationWithSchema = describe(useKeyboardNavigation);\nUseKeyboardNavigationWithSchema.propTypes = propTypes;\n\nexport { useKeyboardNavigation, UseKeyboardNavigationWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,SAAS,QAAQ,gBAAgB;AACvD,SAAS,cAAc,0BAA0B;AACjD,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAC1B,MAAM,wBAAwB,CAAC,UAA2C;AACxE,QAAM,EAAE,SAAS,cAAc,eAAe,cAAc,IAAI;AAChE,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAwB,IAAI;AACtE,QAAM,wBAAwB,OAAsB,IAAI;AACxD,QAAM,uBAAuB,OAAsB,IAAI;AAEvD,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,MACL,QAAQ,MAAM;AACZ,8BAAsB,UAAU;AAChC,yBAAiB,IAAI;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AACA,QAAM,qBAAqB,aAAa,MAAM;AAE9C,QAAM,aAAa;AAAA,IACjB,MAAO,eAAe,CAAC,aAAa,YAAY,IAAI,CAAC,WAAW,WAAW;AAAA,IAC3E,CAAC,YAAY;AAAA,EACf;AACA,QAAM,YAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,YAAM,QAAQ,QAAQ,UAAU,CAAC,WAAW,WAAW,qBAAqB,OAAO;AACnF,UAAI,QAAQ,WAAW,CAAC,GAAG;AACzB,UAAE,eAAe;AACjB,cAAM,WAAW,mBAAmB,SAAS,OAAO,eAAe,EAAE;AACrE,yBAAiB,QAAQ,QAAQ,CAAC;AAAA,MACpC,WAAW,QAAQ,WAAW,CAAC,GAAG;AAChC,UAAE,eAAe;AACjB,cAAM,OAAO,mBAAmB,SAAS,OAAO,eAAe,CAAC;AAChE,yBAAiB,QAAQ,IAAI,CAAC;AAAA,MAChC;AAAA,IACF;AAAA,IACA,CAAC,YAAY,SAAS,eAAe,gBAAgB;AAAA,EACvD;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,UAAkB;AAAA,MACjB,UAAU,CAAC,OAA2B;AACpC,YAAI,MAAM,SAAS,iBAAiB,qBAAqB,YAAY,MAAM;AACzE,cAAI,MAAM;AACV,+BAAqB,UAAU;AAAA,QACjC;AAAA,MACF;AAAA,MACA,SAAS,MAAM,iBAAiB,IAAI;AAAA,MACpC,UACE,iBACA,SAAS,qBAAqB,WAC7B,sBAAsB,YAAY,QAAQ,qBAAqB,YAAY,QAC3E,SAAS,QAAQ,CAAC,KAAK,qBAAqB,YAAY,QAAQ,sBAAsB,YAAY,OAC/F,IACA;AAAA,IACR;AAAA,IACA,CAAC,eAAe,eAAe,OAAO;AAAA,EACxC;AAEA,QAAM,kBAAkB;AAAA,IACtB,OAAO;AAAA,MACL;AAAA,MACA,QAAQ;AAAA,IACV;AAAA,IACA,CAAC,WAAW,kBAAkB;AAAA,EAChC;AAEA,SAAO;AAAA,IACL,OAAO,EAAE,iBAAiB,cAAc,eAAe,iBAAiB;AAAA,IACxE,CAAC,eAAe,iBAAiB,YAAY;AAAA,EAC/C;AACF;AAEA,MAAM,kCAAkC,SAAS,qBAAqB;AACtE,gCAAgC,YAAY;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { UseKeyboardNavigationWithSchema, useKeyboardNavigation } from "./DSHooksKeyboardNavigation.js";
+import {} from "./react-desc-prop-types.js";
+export {
+  UseKeyboardNavigationWithSchema,
+  useKeyboardNavigation
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { UseKeyboardNavigationWithSchema, useKeyboardNavigation } from './DSHooksKeyboardNavigation.js';\nexport { type DSHooksKeyboardNaviationT } from './react-desc-prop-types.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iCAAiC,6BAA6B;AACvE,eAA+C;",
+  "names": []
+}

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/esm/react-desc-prop-types.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { PropTypes } from "@elliemae/ds-utilities";
+const propTypes = {
+  options: PropTypes.arrayOf(PropTypes.string).description("Array of strings to be items ids.").isRequired,
+  isHorizontal: PropTypes.bool.isRequired.description(
+    "If true, the roving tab index will be applied to the items horizontally. If false, it will be applied vertically."
+  ).defaultValue(false),
+  disableRoving: PropTypes.bool.description("If true, the roving tab index will not be applied to the items."),
+  focusCriteria: PropTypes.func.description(
+    "Function that returns a boolean to determine if the element should be focused."
+  )
+};
+export {
+  propTypes
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\n\nimport type { WeakValidationMap } from 'react';\nimport { PropTypes } from '@elliemae/ds-utilities';\nimport { type useKeyboardNavigation } from './DSHooksKeyboardNavigation.js';\nexport declare namespace DSHooksKeyboardNaviationT {\n  interface Props {\n    options: string[];\n    isHorizontal?: boolean;\n    disableRoving?: boolean;\n    focusCriteria?: (dsId: string) => boolean;\n  }\n\n  type UseKeyboardNavigationReturnType = ReturnType<typeof useKeyboardNavigation>;\n  type ItemPropsT = ReturnType<UseKeyboardNavigationReturnType['getItemProps']>;\n  type WrapperPropsT = ReturnType<UseKeyboardNavigationReturnType['getWrapperProps']>;\n}\n\nexport const propTypes = {\n  options: PropTypes.arrayOf(PropTypes.string).description('Array of strings to be items ids.').isRequired,\n  isHorizontal: PropTypes.bool.isRequired\n    .description(\n      'If true, the roving tab index will be applied to the items horizontally. If false, it will be applied vertically.',\n    )\n    .defaultValue(false),\n  disableRoving: PropTypes.bool.description('If true, the roving tab index will not be applied to the items.'),\n  focusCriteria: PropTypes.func.description(\n    'Function that returns a boolean to determine if the element should be focused.',\n  ),\n} as WeakValidationMap<unknown>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,iBAAiB;AAenB,MAAM,YAAY;AAAA,EACvB,SAAS,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,mCAAmC,EAAE;AAAA,EAC9F,cAAc,UAAU,KAAK,WAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,eAAe,UAAU,KAAK,YAAY,iEAAiE;AAAA,EAC3G,eAAe,UAAU,KAAK;AAAA,IAC5B;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/types/DSHooksKeyboardNavigation.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { type DSHooksKeyboardNaviationT } from './react-desc-prop-types.js';
+declare const useKeyboardNavigation: (props: DSHooksKeyboardNaviationT.Props) => {
+    getWrapperProps: () => {
+        onKeyDown: import("react").KeyboardEventHandler<Element>;
+        onBlur: (e: import("react").FocusEvent<Element, Element>, ...args: unknown[]) => void;
+    };
+    getItemProps: (dsId: string) => {
+        innerRef: (el: HTMLElement | null) => void;
+        onFocus: () => void;
+        tabIndex: number;
+    };
+    focusedOption: string | null;
+    setFocusedOption: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+};
+declare const UseKeyboardNavigationWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSHooksKeyboardNaviationT.Props>;
+export { useKeyboardNavigation, UseKeyboardNavigationWithSchema };

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { UseKeyboardNavigationWithSchema, useKeyboardNavigation } from './DSHooksKeyboardNavigation.js';
+export { type DSHooksKeyboardNaviationT } from './react-desc-prop-types.js';

package/dist/types/react-desc-prop-types.d.ts

@@ -0,0 +1,14 @@
+import type { WeakValidationMap } from 'react';
+import { type useKeyboardNavigation } from './DSHooksKeyboardNavigation.js';
+export declare namespace DSHooksKeyboardNaviationT {
+    interface Props {
+        options: string[];
+        isHorizontal?: boolean;
+        disableRoving?: boolean;
+        focusCriteria?: (dsId: string) => boolean;
+    }
+    type UseKeyboardNavigationReturnType = ReturnType<typeof useKeyboardNavigation>;
+    type ItemPropsT = ReturnType<UseKeyboardNavigationReturnType['getItemProps']>;
+    type WrapperPropsT = ReturnType<UseKeyboardNavigationReturnType['getWrapperProps']>;
+}
+export declare const propTypes: WeakValidationMap<unknown>;

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@elliemae/ds-hooks-keyboard-navigation",
+  "version": "3.27.0-next.1",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - Hooks Keyboaord Navigation",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum.git"
+  },
+  "engines": {
+    "pnpm": ">=6",
+    "node": ">=16"
+  },
+  "author": "ICE MT",
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
+  },
+  "dependencies": {
+    "@elliemae/ds-props-helpers": "3.27.0-next.1",
+    "@elliemae/ds-utilities": "3.27.0-next.1"
+  },
+  "devDependencies": {
+    "@elliemae/pui-cli": "~9.0.0-next.31",
+    "@xstyled/system": "3.7.0",
+    "styled-components": "~5.3.9",
+    "styled-system": "~5.1.5",
+    "@elliemae/ds-monorepo-devops": "3.27.0-next.1"
+  },
+  "peerDependencies": {
+    "lodash": "^4.17.21",
+    "react": "~17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "~5.3.9",
+    "styled-system": "^5.1.5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "typeSafety": true
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
+    "test": "pui-cli test --passWithNoTests",
+    "lint": "node ../../../scripts/lint.mjs --fix",
+    "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
+    "dts": "node ../../../scripts/dts.mjs",
+    "dts:withdeps": "pnpm --filter {.}... dts",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
+    "dev:build": "pnpm --filter {.}... build",
+    "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
+    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}