@elliemae/ds-hooks-keyboard-navigation 3.29.1 → 3.30.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/DSHooksKeyboardNavigation.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "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 defaultFocusCriteria = () => true;\nconst useKeyboardNavigation = (props: DSHooksKeyboardNaviationT.Props) => {\n const {\n options,\n direction = 'agnostic',\n disableRoving = false,\n focusCriteria = defaultFocusCriteria,\n onKeyDown: userOnKeyDown,\n } = 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 prevArrowKeys = useMemo(() => {\n if (direction === 'vertical') return ['ArrowUp'];\n if (direction === 'horizontal') return ['ArrowLeft'];\n return ['ArrowUp', 'ArrowLeft'];\n }, [direction]);\n const nextArrowKeys = useMemo(() => {\n if (direction === 'vertical') return ['ArrowDown'];\n if (direction === 'horizontal') return ['ArrowRight'];\n return ['ArrowDown', 'ArrowRight'];\n }, [direction]);\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n if (userOnKeyDown) userOnKeyDown(e);\n const { key } = e;\n const index = options.findIndex((option) => option === focusedOptionMutable.current);\n if (prevArrowKeys.includes(key)) {\n e.preventDefault();\n const previous = findInCircularList(options, index, focusCriteria, -1);\n setFocusedOption(options[previous]);\n } else if (nextArrowKeys.includes(key)) {\n e.preventDefault();\n const next = findInCircularList(options, index, focusCriteria, 1);\n setFocusedOption(options[next]);\n }\n },\n [userOnKeyDown, options, prevArrowKeys, nextArrowKeys, focusCriteria],\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: (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) as WCAGTabIndex,\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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAuD;AACvD,0BAAiD;AACjD,8BAAyB;AAEzB,IAAAA,gCAA0B;AAC1B,MAAM,uBAAuB,MAAM;AACnC,MAAM,wBAAwB,CAAC,UAA2C;AACxE,QAAM;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,WAAW;AAAA,EACb,IAAI;AACJ,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,oBAAgB,sBAAQ,MAAM;AAClC,QAAI,cAAc;AAAY,aAAO,CAAC,SAAS;AAC/C,QAAI,cAAc;AAAc,aAAO,CAAC,WAAW;AACnD,WAAO,CAAC,WAAW,WAAW;AAAA,EAChC,GAAG,CAAC,SAAS,CAAC;AACd,QAAM,oBAAgB,sBAAQ,MAAM;AAClC,QAAI,cAAc;AAAY,aAAO,CAAC,WAAW;AACjD,QAAI,cAAc;AAAc,aAAO,CAAC,YAAY;AACpD,WAAO,CAAC,aAAa,YAAY;AAAA,EACnC,GAAG,CAAC,SAAS,CAAC;AACd,QAAM,gBAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,UAAI;AAAe,sBAAc,CAAC;AAClC,YAAM,EAAE,IAAI,IAAI;AAChB,YAAM,QAAQ,QAAQ,UAAU,CAAC,WAAW,WAAW,qBAAqB,OAAO;AACnF,UAAI,cAAc,SAAS,GAAG,GAAG;AAC/B,UAAE,eAAe;AACjB,cAAM,eAAW,wCAAmB,SAAS,OAAO,eAAe,EAAE;AACrE,yBAAiB,QAAQ,QAAQ,CAAC;AAAA,MACpC,WAAW,cAAc,SAAS,GAAG,GAAG;AACtC,UAAE,eAAe;AACjB,cAAM,WAAO,wCAAmB,SAAS,OAAO,eAAe,CAAC;AAChE,yBAAiB,QAAQ,IAAI,CAAC;AAAA,MAChC;AAAA,IACF;AAAA,IACA,CAAC,eAAe,SAAS,eAAe,eAAe,aAAa;AAAA,EACtE;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,UAAW,iBACX,SAAS,qBAAqB,WAC7B,sBAAsB,YAAY,QAAQ,qBAAqB,YAAY,QAC3E,SAAS,QAAQ,CAAC,KAAK,qBAAqB,YAAY,QAAQ,sBAAsB,YAAY,OAC/F,IACA;AAAA,IACN;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;",
4
+ "sourcesContent": ["import { useCallback, useMemo, useRef, useState } from 'react';\nimport { useOnBlurOut, findInCircularList } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { type DSHooksKeyboardNaviationT } from './react-desc-prop-types.js';\nimport { propTypes } from './react-desc-prop-types.js';\nconst defaultFocusCriteria = () => true;\nconst useKeyboardNavigation = (props: DSHooksKeyboardNaviationT.Props) => {\n const {\n options,\n direction = 'agnostic',\n disableRoving = false,\n focusCriteria = defaultFocusCriteria,\n onKeyDown: userOnKeyDown,\n } = 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 prevArrowKeys = useMemo(() => {\n if (direction === 'vertical') return ['ArrowUp'];\n if (direction === 'horizontal') return ['ArrowLeft'];\n return ['ArrowUp', 'ArrowLeft'];\n }, [direction]);\n const nextArrowKeys = useMemo(() => {\n if (direction === 'vertical') return ['ArrowDown'];\n if (direction === 'horizontal') return ['ArrowRight'];\n return ['ArrowDown', 'ArrowRight'];\n }, [direction]);\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n if (userOnKeyDown) userOnKeyDown(e);\n const { key } = e;\n const index = options.findIndex((option) => option === focusedOptionMutable.current);\n if (prevArrowKeys.includes(key)) {\n e.preventDefault();\n const previous = findInCircularList(options, index, focusCriteria, -1);\n setFocusedOption(options[previous]);\n } else if (nextArrowKeys.includes(key)) {\n e.preventDefault();\n const next = findInCircularList(options, index, focusCriteria, 1);\n setFocusedOption(options[next]);\n }\n },\n [userOnKeyDown, options, prevArrowKeys, nextArrowKeys, focusCriteria],\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: (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) as TypescriptHelpersT.WCAGTabIndex,\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"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAuD;AACvD,0BAAiD;AACjD,8BAAyB;AAGzB,IAAAA,gCAA0B;AAC1B,MAAM,uBAAuB,MAAM;AACnC,MAAM,wBAAwB,CAAC,UAA2C;AACxE,QAAM;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,WAAW;AAAA,EACb,IAAI;AACJ,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,oBAAgB,sBAAQ,MAAM;AAClC,QAAI,cAAc;AAAY,aAAO,CAAC,SAAS;AAC/C,QAAI,cAAc;AAAc,aAAO,CAAC,WAAW;AACnD,WAAO,CAAC,WAAW,WAAW;AAAA,EAChC,GAAG,CAAC,SAAS,CAAC;AACd,QAAM,oBAAgB,sBAAQ,MAAM;AAClC,QAAI,cAAc;AAAY,aAAO,CAAC,WAAW;AACjD,QAAI,cAAc;AAAc,aAAO,CAAC,YAAY;AACpD,WAAO,CAAC,aAAa,YAAY;AAAA,EACnC,GAAG,CAAC,SAAS,CAAC;AACd,QAAM,gBAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,UAAI;AAAe,sBAAc,CAAC;AAClC,YAAM,EAAE,IAAI,IAAI;AAChB,YAAM,QAAQ,QAAQ,UAAU,CAAC,WAAW,WAAW,qBAAqB,OAAO;AACnF,UAAI,cAAc,SAAS,GAAG,GAAG;AAC/B,UAAE,eAAe;AACjB,cAAM,eAAW,wCAAmB,SAAS,OAAO,eAAe,EAAE;AACrE,yBAAiB,QAAQ,QAAQ,CAAC;AAAA,MACpC,WAAW,cAAc,SAAS,GAAG,GAAG;AACtC,UAAE,eAAe;AACjB,cAAM,WAAO,wCAAmB,SAAS,OAAO,eAAe,CAAC;AAChE,yBAAiB,QAAQ,IAAI,CAAC;AAAA,MAChC;AAAA,IACF;AAAA,IACA,CAAC,eAAe,SAAS,eAAe,eAAe,aAAa;AAAA,EACtE;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,UAAW,iBACX,SAAS,qBAAqB,WAC7B,sBAAsB,YAAY,QAAQ,qBAAqB,YAAY,QAC3E,SAAS,QAAQ,CAAC,KAAK,qBAAqB,YAAY,QAAQ,sBAAsB,YAAY,OAC/F,IACA;AAAA,IACN;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;",
6
6
  "names": ["import_react_desc_prop_types"]
7
7
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSHooksKeyboardNavigation.tsx"],
4
- "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 defaultFocusCriteria = () => true;\nconst useKeyboardNavigation = (props: DSHooksKeyboardNaviationT.Props) => {\n const {\n options,\n direction = 'agnostic',\n disableRoving = false,\n focusCriteria = defaultFocusCriteria,\n onKeyDown: userOnKeyDown,\n } = 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 prevArrowKeys = useMemo(() => {\n if (direction === 'vertical') return ['ArrowUp'];\n if (direction === 'horizontal') return ['ArrowLeft'];\n return ['ArrowUp', 'ArrowLeft'];\n }, [direction]);\n const nextArrowKeys = useMemo(() => {\n if (direction === 'vertical') return ['ArrowDown'];\n if (direction === 'horizontal') return ['ArrowRight'];\n return ['ArrowDown', 'ArrowRight'];\n }, [direction]);\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n if (userOnKeyDown) userOnKeyDown(e);\n const { key } = e;\n const index = options.findIndex((option) => option === focusedOptionMutable.current);\n if (prevArrowKeys.includes(key)) {\n e.preventDefault();\n const previous = findInCircularList(options, index, focusCriteria, -1);\n setFocusedOption(options[previous]);\n } else if (nextArrowKeys.includes(key)) {\n e.preventDefault();\n const next = findInCircularList(options, index, focusCriteria, 1);\n setFocusedOption(options[next]);\n }\n },\n [userOnKeyDown, options, prevArrowKeys, nextArrowKeys, focusCriteria],\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: (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) as WCAGTabIndex,\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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,SAAS,QAAQ,gBAAgB;AACvD,SAAS,cAAc,0BAA0B;AACjD,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAC1B,MAAM,uBAAuB,MAAM;AACnC,MAAM,wBAAwB,CAAC,UAA2C;AACxE,QAAM;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,WAAW;AAAA,EACb,IAAI;AACJ,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,gBAAgB,QAAQ,MAAM;AAClC,QAAI,cAAc;AAAY,aAAO,CAAC,SAAS;AAC/C,QAAI,cAAc;AAAc,aAAO,CAAC,WAAW;AACnD,WAAO,CAAC,WAAW,WAAW;AAAA,EAChC,GAAG,CAAC,SAAS,CAAC;AACd,QAAM,gBAAgB,QAAQ,MAAM;AAClC,QAAI,cAAc;AAAY,aAAO,CAAC,WAAW;AACjD,QAAI,cAAc;AAAc,aAAO,CAAC,YAAY;AACpD,WAAO,CAAC,aAAa,YAAY;AAAA,EACnC,GAAG,CAAC,SAAS,CAAC;AACd,QAAM,YAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,UAAI;AAAe,sBAAc,CAAC;AAClC,YAAM,EAAE,IAAI,IAAI;AAChB,YAAM,QAAQ,QAAQ,UAAU,CAAC,WAAW,WAAW,qBAAqB,OAAO;AACnF,UAAI,cAAc,SAAS,GAAG,GAAG;AAC/B,UAAE,eAAe;AACjB,cAAM,WAAW,mBAAmB,SAAS,OAAO,eAAe,EAAE;AACrE,yBAAiB,QAAQ,QAAQ,CAAC;AAAA,MACpC,WAAW,cAAc,SAAS,GAAG,GAAG;AACtC,UAAE,eAAe;AACjB,cAAM,OAAO,mBAAmB,SAAS,OAAO,eAAe,CAAC;AAChE,yBAAiB,QAAQ,IAAI,CAAC;AAAA,MAChC;AAAA,IACF;AAAA,IACA,CAAC,eAAe,SAAS,eAAe,eAAe,aAAa;AAAA,EACtE;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,UAAW,iBACX,SAAS,qBAAqB,WAC7B,sBAAsB,YAAY,QAAQ,qBAAqB,YAAY,QAC3E,SAAS,QAAQ,CAAC,KAAK,qBAAqB,YAAY,QAAQ,sBAAsB,YAAY,OAC/F,IACA;AAAA,IACN;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;",
4
+ "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 TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { type DSHooksKeyboardNaviationT } from './react-desc-prop-types.js';\nimport { propTypes } from './react-desc-prop-types.js';\nconst defaultFocusCriteria = () => true;\nconst useKeyboardNavigation = (props: DSHooksKeyboardNaviationT.Props) => {\n const {\n options,\n direction = 'agnostic',\n disableRoving = false,\n focusCriteria = defaultFocusCriteria,\n onKeyDown: userOnKeyDown,\n } = 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 prevArrowKeys = useMemo(() => {\n if (direction === 'vertical') return ['ArrowUp'];\n if (direction === 'horizontal') return ['ArrowLeft'];\n return ['ArrowUp', 'ArrowLeft'];\n }, [direction]);\n const nextArrowKeys = useMemo(() => {\n if (direction === 'vertical') return ['ArrowDown'];\n if (direction === 'horizontal') return ['ArrowRight'];\n return ['ArrowDown', 'ArrowRight'];\n }, [direction]);\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n if (userOnKeyDown) userOnKeyDown(e);\n const { key } = e;\n const index = options.findIndex((option) => option === focusedOptionMutable.current);\n if (prevArrowKeys.includes(key)) {\n e.preventDefault();\n const previous = findInCircularList(options, index, focusCriteria, -1);\n setFocusedOption(options[previous]);\n } else if (nextArrowKeys.includes(key)) {\n e.preventDefault();\n const next = findInCircularList(options, index, focusCriteria, 1);\n setFocusedOption(options[next]);\n }\n },\n [userOnKeyDown, options, prevArrowKeys, nextArrowKeys, focusCriteria],\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: (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) as TypescriptHelpersT.WCAGTabIndex,\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"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,SAAS,QAAQ,gBAAgB;AACvD,SAAS,cAAc,0BAA0B;AACjD,SAAS,gBAAgB;AAGzB,SAAS,iBAAiB;AAC1B,MAAM,uBAAuB,MAAM;AACnC,MAAM,wBAAwB,CAAC,UAA2C;AACxE,QAAM;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,WAAW;AAAA,EACb,IAAI;AACJ,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,gBAAgB,QAAQ,MAAM;AAClC,QAAI,cAAc;AAAY,aAAO,CAAC,SAAS;AAC/C,QAAI,cAAc;AAAc,aAAO,CAAC,WAAW;AACnD,WAAO,CAAC,WAAW,WAAW;AAAA,EAChC,GAAG,CAAC,SAAS,CAAC;AACd,QAAM,gBAAgB,QAAQ,MAAM;AAClC,QAAI,cAAc;AAAY,aAAO,CAAC,WAAW;AACjD,QAAI,cAAc;AAAc,aAAO,CAAC,YAAY;AACpD,WAAO,CAAC,aAAa,YAAY;AAAA,EACnC,GAAG,CAAC,SAAS,CAAC;AACd,QAAM,YAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,UAAI;AAAe,sBAAc,CAAC;AAClC,YAAM,EAAE,IAAI,IAAI;AAChB,YAAM,QAAQ,QAAQ,UAAU,CAAC,WAAW,WAAW,qBAAqB,OAAO;AACnF,UAAI,cAAc,SAAS,GAAG,GAAG;AAC/B,UAAE,eAAe;AACjB,cAAM,WAAW,mBAAmB,SAAS,OAAO,eAAe,EAAE;AACrE,yBAAiB,QAAQ,QAAQ,CAAC;AAAA,MACpC,WAAW,cAAc,SAAS,GAAG,GAAG;AACtC,UAAE,eAAe;AACjB,cAAM,OAAO,mBAAmB,SAAS,OAAO,eAAe,CAAC;AAChE,yBAAiB,QAAQ,IAAI,CAAC;AAAA,MAChC;AAAA,IACF;AAAA,IACA,CAAC,eAAe,SAAS,eAAe,eAAe,aAAa;AAAA,EACtE;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,UAAW,iBACX,SAAS,qBAAqB,WAC7B,sBAAsB,YAAY,QAAQ,qBAAqB,YAAY,QAC3E,SAAS,QAAQ,CAAC,KAAK,qBAAqB,YAAY,QAAQ,sBAAsB,YAAY,OAC/F,IACA;AAAA,IACN;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;",
6
6
  "names": []
7
7
  }
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
2
3
  import { type DSHooksKeyboardNaviationT } from './react-desc-prop-types.js';
3
4
  declare const useKeyboardNavigation: (props: DSHooksKeyboardNaviationT.Props) => {
4
5
  getWrapperProps: () => {
@@ -8,7 +9,7 @@ declare const useKeyboardNavigation: (props: DSHooksKeyboardNaviationT.Props) =>
8
9
  getItemProps: (dsId: string) => {
9
10
  innerRef: (el: HTMLElement | null) => void;
10
11
  onFocus: () => void;
11
- tabIndex: WCAGTabIndex;
12
+ tabIndex: TypescriptHelpersT.WCAGTabIndex;
12
13
  };
13
14
  focusedOption: string | null;
14
15
  setFocusedOption: import("react").Dispatch<import("react").SetStateAction<string | null>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-hooks-keyboard-navigation",
3
- "version": "3.29.1",
3
+ "version": "3.30.0-next.0",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Hooks Keyboaord Navigation",
6
6
  "files": [
@@ -35,15 +35,16 @@
35
35
  "indent": 4
36
36
  },
37
37
  "dependencies": {
38
- "@elliemae/ds-props-helpers": "3.29.1",
39
- "@elliemae/ds-utilities": "3.29.1"
38
+ "@elliemae/ds-typescript-helpers": "3.30.0-next.0",
39
+ "@elliemae/ds-utilities": "3.30.0-next.0",
40
+ "@elliemae/ds-props-helpers": "3.30.0-next.0"
40
41
  },
41
42
  "devDependencies": {
42
43
  "@elliemae/pui-cli": "~9.0.0-next.31",
43
44
  "@xstyled/system": "3.7.0",
44
45
  "styled-components": "~5.3.9",
45
46
  "styled-system": "~5.1.5",
46
- "@elliemae/ds-monorepo-devops": "3.29.1"
47
+ "@elliemae/ds-monorepo-devops": "3.30.0-next.0"
47
48
  },
48
49
  "peerDependencies": {
49
50
  "lodash": "^4.17.21",