@elliemae/ds-left-navigation 3.50.1-next.9 → 3.51.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.
@@ -35,17 +35,6 @@ var React = __toESM(require("react"));
35
35
  var import_react = require("react");
36
36
  var import_constants = require("../exported-related/constants.js");
37
37
  var import_LeftNavigationContext = __toESM(require("../LeftNavigationContext.js"));
38
- const KEY_CODES = {
39
- TAB: 9,
40
- ENTER: 13,
41
- SPACE: 32,
42
- LEFT_ARROW: 37,
43
- UP_ARROW: 38,
44
- RIGHT_ARROW: 39,
45
- DOWN_ARROW: 40,
46
- END: 35,
47
- HOME: 36
48
- };
49
38
  const nextIndex = (index, length) => (index + 1) % length;
50
39
  const prevIndex = (index, length) => (index - 1 + length) % length;
51
40
  const useKeyboardNavigation = ({ item, onClick }) => {
@@ -71,11 +60,11 @@ const useKeyboardNavigation = ({ item, onClick }) => {
71
60
  }, [dsId, focusedItem, visibleItemsRefs]);
72
61
  const onKeyDown = (0, import_react.useCallback)(
73
62
  (e) => {
74
- const { keyCode } = e;
75
- if (keyCode !== KEY_CODES.TAB) {
63
+ const { key } = e;
64
+ if (key !== "Tab") {
76
65
  e.preventDefault();
77
66
  }
78
- if (dsId && (keyCode === KEY_CODES.ENTER || keyCode === KEY_CODES.SPACE)) {
67
+ if (dsId && (key === "Enter" || key === " ")) {
79
68
  if (selectable) {
80
69
  onClick(e);
81
70
  focusAndSelect(dsId);
@@ -87,25 +76,25 @@ const useKeyboardNavigation = ({ item, onClick }) => {
87
76
  setFocusedItem(dsId);
88
77
  }
89
78
  }
90
- if (openable && keyCode === KEY_CODES.RIGHT_ARROW) {
79
+ if (openable && key === "ArrowRight") {
91
80
  onClick(e);
92
81
  }
93
- if (dsId && closable && keyCode === KEY_CODES.LEFT_ARROW) {
82
+ if (dsId && closable && key === "ArrowLeft") {
94
83
  onClick(e);
95
84
  setFocusedItem(dsId);
96
85
  }
97
- if (keyCode === KEY_CODES.DOWN_ARROW) {
86
+ if (key === "ArrowDown") {
98
87
  const nextDsId = visibleItems[nextIndex(currentIndex, visibleItems.length)];
99
88
  setFocusedItem(nextDsId);
100
89
  }
101
- if (keyCode === KEY_CODES.UP_ARROW) {
90
+ if (key === "ArrowUp") {
102
91
  const prevDsId = visibleItems[prevIndex(currentIndex, visibleItems.length)];
103
92
  setFocusedItem(prevDsId);
104
93
  }
105
- if (keyCode === KEY_CODES.HOME) {
94
+ if (key === "Home") {
106
95
  setFocusedItem(visibleItems[0]);
107
96
  }
108
- if (keyCode === KEY_CODES.END) {
97
+ if (key === "End") {
109
98
  setFocusedItem(visibleItems[visibleItems.length - 1]);
110
99
  }
111
100
  },
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/useKeyboardNavigation.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useMemo, useLayoutEffect, useContext } from 'react';\nimport { CHEVRON_BACK_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../exported-related/constants.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\nimport LeftNavContext from '../LeftNavigationContext.js';\n\nconst KEY_CODES = {\n TAB: 9,\n ENTER: 13,\n SPACE: 32,\n LEFT_ARROW: 37,\n UP_ARROW: 38,\n RIGHT_ARROW: 39,\n DOWN_ARROW: 40,\n END: 35,\n HOME: 36,\n};\n\nconst nextIndex = (index: number, length: number) => (index + 1) % length;\nconst prevIndex = (index: number, length: number) => (index - 1 + length) % length;\n\ntype UseKeyboardNavigationProps = {\n item: DSLeftNavigationT.GenericItemItemProps;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onClick: (e: any) => void;\n};\n\nexport const useKeyboardNavigation = ({ item, onClick }: UseKeyboardNavigationProps): React.KeyboardEventHandler => {\n const {\n dsId,\n itemOpts: { selectable, openable, closable },\n } = item;\n\n const { visibleItems, visibleItemsRefs } = useContext(LeftNavContext);\n\n const currentIndex = useMemo(\n () => visibleItems.findIndex((visibleItemDsId) => visibleItemDsId === dsId),\n [dsId, visibleItems],\n );\n\n const { setFocusedItem, focusedItem, setSelectedItem } = useContext(LeftNavContext);\n\n const focusAndSelect = useCallback(\n (nextDsId: string) => {\n setFocusedItem(nextDsId);\n setSelectedItem(nextDsId);\n },\n [setFocusedItem, setSelectedItem],\n );\n\n useLayoutEffect(() => {\n if (dsId === focusedItem) visibleItemsRefs.current[dsId]?.current?.focus();\n }, [dsId, focusedItem, visibleItemsRefs]);\n\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n const { keyCode } = e;\n\n // Prevent default behaviour when not tab\n if (keyCode !== KEY_CODES.TAB) {\n e.preventDefault();\n }\n\n if (dsId && (keyCode === KEY_CODES.ENTER || keyCode === KEY_CODES.SPACE)) {\n if (selectable) {\n onClick(e);\n focusAndSelect(dsId);\n } else if (focusedItem === CHEVRON_BACK_DS_ID) {\n onClick(e);\n focusAndSelect(dsId);\n } else if (focusedItem === FOOTER_MENU_CLOSE_DS_ID) {\n onClick(e);\n setFocusedItem(dsId);\n }\n }\n\n if (openable && keyCode === KEY_CODES.RIGHT_ARROW) {\n onClick(e);\n }\n\n if (dsId && closable && keyCode === KEY_CODES.LEFT_ARROW) {\n onClick(e);\n setFocusedItem(dsId);\n }\n\n if (keyCode === KEY_CODES.DOWN_ARROW) {\n const nextDsId = visibleItems[nextIndex(currentIndex, visibleItems.length)];\n setFocusedItem(nextDsId);\n }\n\n if (keyCode === KEY_CODES.UP_ARROW) {\n const prevDsId = visibleItems[prevIndex(currentIndex, visibleItems.length)];\n setFocusedItem(prevDsId);\n }\n\n if (keyCode === KEY_CODES.HOME) {\n setFocusedItem(visibleItems[0]);\n }\n\n if (keyCode === KEY_CODES.END) {\n setFocusedItem(visibleItems[visibleItems.length - 1]);\n }\n },\n [\n openable,\n closable,\n selectable,\n focusedItem,\n onClick,\n focusAndSelect,\n dsId,\n setFocusedItem,\n visibleItems,\n currentIndex,\n ],\n );\n\n return onKeyDown;\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAkE;AAClE,uBAA4D;AAE5D,mCAA2B;AAE3B,MAAM,YAAY;AAAA,EAChB,KAAK;AAAA,EACL,OAAO;AAAA,EACP,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,MAAM;AACR;AAEA,MAAM,YAAY,CAAC,OAAe,YAAoB,QAAQ,KAAK;AACnE,MAAM,YAAY,CAAC,OAAe,YAAoB,QAAQ,IAAI,UAAU;AAQrE,MAAM,wBAAwB,CAAC,EAAE,MAAM,QAAQ,MAA8D;AAClH,QAAM;AAAA,IACJ;AAAA,IACA,UAAU,EAAE,YAAY,UAAU,SAAS;AAAA,EAC7C,IAAI;AAEJ,QAAM,EAAE,cAAc,iBAAiB,QAAI,yBAAW,6BAAAA,OAAc;AAEpE,QAAM,mBAAe;AAAA,IACnB,MAAM,aAAa,UAAU,CAAC,oBAAoB,oBAAoB,IAAI;AAAA,IAC1E,CAAC,MAAM,YAAY;AAAA,EACrB;AAEA,QAAM,EAAE,gBAAgB,aAAa,gBAAgB,QAAI,yBAAW,6BAAAA,OAAc;AAElF,QAAM,qBAAiB;AAAA,IACrB,CAAC,aAAqB;AACpB,qBAAe,QAAQ;AACvB,sBAAgB,QAAQ;AAAA,IAC1B;AAAA,IACA,CAAC,gBAAgB,eAAe;AAAA,EAClC;AAEA,oCAAgB,MAAM;AACpB,QAAI,SAAS,YAAa,kBAAiB,QAAQ,IAAI,GAAG,SAAS,MAAM;AAAA,EAC3E,GAAG,CAAC,MAAM,aAAa,gBAAgB,CAAC;AAExC,QAAM,gBAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,YAAM,EAAE,QAAQ,IAAI;AAGpB,UAAI,YAAY,UAAU,KAAK;AAC7B,UAAE,eAAe;AAAA,MACnB;AAEA,UAAI,SAAS,YAAY,UAAU,SAAS,YAAY,UAAU,QAAQ;AACxE,YAAI,YAAY;AACd,kBAAQ,CAAC;AACT,yBAAe,IAAI;AAAA,QACrB,WAAW,gBAAgB,qCAAoB;AAC7C,kBAAQ,CAAC;AACT,yBAAe,IAAI;AAAA,QACrB,WAAW,gBAAgB,0CAAyB;AAClD,kBAAQ,CAAC;AACT,yBAAe,IAAI;AAAA,QACrB;AAAA,MACF;AAEA,UAAI,YAAY,YAAY,UAAU,aAAa;AACjD,gBAAQ,CAAC;AAAA,MACX;AAEA,UAAI,QAAQ,YAAY,YAAY,UAAU,YAAY;AACxD,gBAAQ,CAAC;AACT,uBAAe,IAAI;AAAA,MACrB;AAEA,UAAI,YAAY,UAAU,YAAY;AACpC,cAAM,WAAW,aAAa,UAAU,cAAc,aAAa,MAAM,CAAC;AAC1E,uBAAe,QAAQ;AAAA,MACzB;AAEA,UAAI,YAAY,UAAU,UAAU;AAClC,cAAM,WAAW,aAAa,UAAU,cAAc,aAAa,MAAM,CAAC;AAC1E,uBAAe,QAAQ;AAAA,MACzB;AAEA,UAAI,YAAY,UAAU,MAAM;AAC9B,uBAAe,aAAa,CAAC,CAAC;AAAA,MAChC;AAEA,UAAI,YAAY,UAAU,KAAK;AAC7B,uBAAe,aAAa,aAAa,SAAS,CAAC,CAAC;AAAA,MACtD;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
4
+ "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useMemo, useLayoutEffect, useContext } from 'react';\nimport { CHEVRON_BACK_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../exported-related/constants.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\nimport LeftNavContext from '../LeftNavigationContext.js';\n\nconst nextIndex = (index: number, length: number) => (index + 1) % length;\nconst prevIndex = (index: number, length: number) => (index - 1 + length) % length;\n\ntype UseKeyboardNavigationProps = {\n item: DSLeftNavigationT.GenericItemItemProps;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onClick: (e: any) => void;\n};\n\nexport const useKeyboardNavigation = ({ item, onClick }: UseKeyboardNavigationProps): React.KeyboardEventHandler => {\n const {\n dsId,\n itemOpts: { selectable, openable, closable },\n } = item;\n\n const { visibleItems, visibleItemsRefs } = useContext(LeftNavContext);\n\n const currentIndex = useMemo(\n () => visibleItems.findIndex((visibleItemDsId) => visibleItemDsId === dsId),\n [dsId, visibleItems],\n );\n\n const { setFocusedItem, focusedItem, setSelectedItem } = useContext(LeftNavContext);\n\n const focusAndSelect = useCallback(\n (nextDsId: string) => {\n setFocusedItem(nextDsId);\n setSelectedItem(nextDsId);\n },\n [setFocusedItem, setSelectedItem],\n );\n\n useLayoutEffect(() => {\n if (dsId === focusedItem) visibleItemsRefs.current[dsId]?.current?.focus();\n }, [dsId, focusedItem, visibleItemsRefs]);\n\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n const { key } = e;\n\n // Prevent default behaviour when not tab\n if (key !== 'Tab') {\n e.preventDefault();\n }\n\n if (dsId && (key === 'Enter' || key === ' ')) {\n if (selectable) {\n onClick(e);\n focusAndSelect(dsId);\n } else if (focusedItem === CHEVRON_BACK_DS_ID) {\n onClick(e);\n focusAndSelect(dsId);\n } else if (focusedItem === FOOTER_MENU_CLOSE_DS_ID) {\n onClick(e);\n setFocusedItem(dsId);\n }\n }\n\n if (openable && key === 'ArrowRight') {\n onClick(e);\n }\n\n if (dsId && closable && key === 'ArrowLeft') {\n onClick(e);\n setFocusedItem(dsId);\n }\n\n if (key === 'ArrowDown') {\n const nextDsId = visibleItems[nextIndex(currentIndex, visibleItems.length)];\n setFocusedItem(nextDsId);\n }\n\n if (key === 'ArrowUp') {\n const prevDsId = visibleItems[prevIndex(currentIndex, visibleItems.length)];\n setFocusedItem(prevDsId);\n }\n\n if (key === 'Home') {\n setFocusedItem(visibleItems[0]);\n }\n\n if (key === 'End') {\n setFocusedItem(visibleItems[visibleItems.length - 1]);\n }\n },\n [\n openable,\n closable,\n selectable,\n focusedItem,\n onClick,\n focusAndSelect,\n dsId,\n setFocusedItem,\n visibleItems,\n currentIndex,\n ],\n );\n\n return onKeyDown;\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAkE;AAClE,uBAA4D;AAE5D,mCAA2B;AAE3B,MAAM,YAAY,CAAC,OAAe,YAAoB,QAAQ,KAAK;AACnE,MAAM,YAAY,CAAC,OAAe,YAAoB,QAAQ,IAAI,UAAU;AAQrE,MAAM,wBAAwB,CAAC,EAAE,MAAM,QAAQ,MAA8D;AAClH,QAAM;AAAA,IACJ;AAAA,IACA,UAAU,EAAE,YAAY,UAAU,SAAS;AAAA,EAC7C,IAAI;AAEJ,QAAM,EAAE,cAAc,iBAAiB,QAAI,yBAAW,6BAAAA,OAAc;AAEpE,QAAM,mBAAe;AAAA,IACnB,MAAM,aAAa,UAAU,CAAC,oBAAoB,oBAAoB,IAAI;AAAA,IAC1E,CAAC,MAAM,YAAY;AAAA,EACrB;AAEA,QAAM,EAAE,gBAAgB,aAAa,gBAAgB,QAAI,yBAAW,6BAAAA,OAAc;AAElF,QAAM,qBAAiB;AAAA,IACrB,CAAC,aAAqB;AACpB,qBAAe,QAAQ;AACvB,sBAAgB,QAAQ;AAAA,IAC1B;AAAA,IACA,CAAC,gBAAgB,eAAe;AAAA,EAClC;AAEA,oCAAgB,MAAM;AACpB,QAAI,SAAS,YAAa,kBAAiB,QAAQ,IAAI,GAAG,SAAS,MAAM;AAAA,EAC3E,GAAG,CAAC,MAAM,aAAa,gBAAgB,CAAC;AAExC,QAAM,gBAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAGhB,UAAI,QAAQ,OAAO;AACjB,UAAE,eAAe;AAAA,MACnB;AAEA,UAAI,SAAS,QAAQ,WAAW,QAAQ,MAAM;AAC5C,YAAI,YAAY;AACd,kBAAQ,CAAC;AACT,yBAAe,IAAI;AAAA,QACrB,WAAW,gBAAgB,qCAAoB;AAC7C,kBAAQ,CAAC;AACT,yBAAe,IAAI;AAAA,QACrB,WAAW,gBAAgB,0CAAyB;AAClD,kBAAQ,CAAC;AACT,yBAAe,IAAI;AAAA,QACrB;AAAA,MACF;AAEA,UAAI,YAAY,QAAQ,cAAc;AACpC,gBAAQ,CAAC;AAAA,MACX;AAEA,UAAI,QAAQ,YAAY,QAAQ,aAAa;AAC3C,gBAAQ,CAAC;AACT,uBAAe,IAAI;AAAA,MACrB;AAEA,UAAI,QAAQ,aAAa;AACvB,cAAM,WAAW,aAAa,UAAU,cAAc,aAAa,MAAM,CAAC;AAC1E,uBAAe,QAAQ;AAAA,MACzB;AAEA,UAAI,QAAQ,WAAW;AACrB,cAAM,WAAW,aAAa,UAAU,cAAc,aAAa,MAAM,CAAC;AAC1E,uBAAe,QAAQ;AAAA,MACzB;AAEA,UAAI,QAAQ,QAAQ;AAClB,uBAAe,aAAa,CAAC,CAAC;AAAA,MAChC;AAEA,UAAI,QAAQ,OAAO;AACjB,uBAAe,aAAa,aAAa,SAAS,CAAC,CAAC;AAAA,MACtD;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
6
6
  "names": ["LeftNavContext"]
7
7
  }
@@ -2,17 +2,6 @@ import * as React from "react";
2
2
  import { useCallback, useMemo, useLayoutEffect, useContext } from "react";
3
3
  import { CHEVRON_BACK_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from "../exported-related/constants.js";
4
4
  import LeftNavContext from "../LeftNavigationContext.js";
5
- const KEY_CODES = {
6
- TAB: 9,
7
- ENTER: 13,
8
- SPACE: 32,
9
- LEFT_ARROW: 37,
10
- UP_ARROW: 38,
11
- RIGHT_ARROW: 39,
12
- DOWN_ARROW: 40,
13
- END: 35,
14
- HOME: 36
15
- };
16
5
  const nextIndex = (index, length) => (index + 1) % length;
17
6
  const prevIndex = (index, length) => (index - 1 + length) % length;
18
7
  const useKeyboardNavigation = ({ item, onClick }) => {
@@ -38,11 +27,11 @@ const useKeyboardNavigation = ({ item, onClick }) => {
38
27
  }, [dsId, focusedItem, visibleItemsRefs]);
39
28
  const onKeyDown = useCallback(
40
29
  (e) => {
41
- const { keyCode } = e;
42
- if (keyCode !== KEY_CODES.TAB) {
30
+ const { key } = e;
31
+ if (key !== "Tab") {
43
32
  e.preventDefault();
44
33
  }
45
- if (dsId && (keyCode === KEY_CODES.ENTER || keyCode === KEY_CODES.SPACE)) {
34
+ if (dsId && (key === "Enter" || key === " ")) {
46
35
  if (selectable) {
47
36
  onClick(e);
48
37
  focusAndSelect(dsId);
@@ -54,25 +43,25 @@ const useKeyboardNavigation = ({ item, onClick }) => {
54
43
  setFocusedItem(dsId);
55
44
  }
56
45
  }
57
- if (openable && keyCode === KEY_CODES.RIGHT_ARROW) {
46
+ if (openable && key === "ArrowRight") {
58
47
  onClick(e);
59
48
  }
60
- if (dsId && closable && keyCode === KEY_CODES.LEFT_ARROW) {
49
+ if (dsId && closable && key === "ArrowLeft") {
61
50
  onClick(e);
62
51
  setFocusedItem(dsId);
63
52
  }
64
- if (keyCode === KEY_CODES.DOWN_ARROW) {
53
+ if (key === "ArrowDown") {
65
54
  const nextDsId = visibleItems[nextIndex(currentIndex, visibleItems.length)];
66
55
  setFocusedItem(nextDsId);
67
56
  }
68
- if (keyCode === KEY_CODES.UP_ARROW) {
57
+ if (key === "ArrowUp") {
69
58
  const prevDsId = visibleItems[prevIndex(currentIndex, visibleItems.length)];
70
59
  setFocusedItem(prevDsId);
71
60
  }
72
- if (keyCode === KEY_CODES.HOME) {
61
+ if (key === "Home") {
73
62
  setFocusedItem(visibleItems[0]);
74
63
  }
75
- if (keyCode === KEY_CODES.END) {
64
+ if (key === "End") {
76
65
  setFocusedItem(visibleItems[visibleItems.length - 1]);
77
66
  }
78
67
  },
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useKeyboardNavigation.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useMemo, useLayoutEffect, useContext } from 'react';\nimport { CHEVRON_BACK_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../exported-related/constants.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\nimport LeftNavContext from '../LeftNavigationContext.js';\n\nconst KEY_CODES = {\n TAB: 9,\n ENTER: 13,\n SPACE: 32,\n LEFT_ARROW: 37,\n UP_ARROW: 38,\n RIGHT_ARROW: 39,\n DOWN_ARROW: 40,\n END: 35,\n HOME: 36,\n};\n\nconst nextIndex = (index: number, length: number) => (index + 1) % length;\nconst prevIndex = (index: number, length: number) => (index - 1 + length) % length;\n\ntype UseKeyboardNavigationProps = {\n item: DSLeftNavigationT.GenericItemItemProps;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onClick: (e: any) => void;\n};\n\nexport const useKeyboardNavigation = ({ item, onClick }: UseKeyboardNavigationProps): React.KeyboardEventHandler => {\n const {\n dsId,\n itemOpts: { selectable, openable, closable },\n } = item;\n\n const { visibleItems, visibleItemsRefs } = useContext(LeftNavContext);\n\n const currentIndex = useMemo(\n () => visibleItems.findIndex((visibleItemDsId) => visibleItemDsId === dsId),\n [dsId, visibleItems],\n );\n\n const { setFocusedItem, focusedItem, setSelectedItem } = useContext(LeftNavContext);\n\n const focusAndSelect = useCallback(\n (nextDsId: string) => {\n setFocusedItem(nextDsId);\n setSelectedItem(nextDsId);\n },\n [setFocusedItem, setSelectedItem],\n );\n\n useLayoutEffect(() => {\n if (dsId === focusedItem) visibleItemsRefs.current[dsId]?.current?.focus();\n }, [dsId, focusedItem, visibleItemsRefs]);\n\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n const { keyCode } = e;\n\n // Prevent default behaviour when not tab\n if (keyCode !== KEY_CODES.TAB) {\n e.preventDefault();\n }\n\n if (dsId && (keyCode === KEY_CODES.ENTER || keyCode === KEY_CODES.SPACE)) {\n if (selectable) {\n onClick(e);\n focusAndSelect(dsId);\n } else if (focusedItem === CHEVRON_BACK_DS_ID) {\n onClick(e);\n focusAndSelect(dsId);\n } else if (focusedItem === FOOTER_MENU_CLOSE_DS_ID) {\n onClick(e);\n setFocusedItem(dsId);\n }\n }\n\n if (openable && keyCode === KEY_CODES.RIGHT_ARROW) {\n onClick(e);\n }\n\n if (dsId && closable && keyCode === KEY_CODES.LEFT_ARROW) {\n onClick(e);\n setFocusedItem(dsId);\n }\n\n if (keyCode === KEY_CODES.DOWN_ARROW) {\n const nextDsId = visibleItems[nextIndex(currentIndex, visibleItems.length)];\n setFocusedItem(nextDsId);\n }\n\n if (keyCode === KEY_CODES.UP_ARROW) {\n const prevDsId = visibleItems[prevIndex(currentIndex, visibleItems.length)];\n setFocusedItem(prevDsId);\n }\n\n if (keyCode === KEY_CODES.HOME) {\n setFocusedItem(visibleItems[0]);\n }\n\n if (keyCode === KEY_CODES.END) {\n setFocusedItem(visibleItems[visibleItems.length - 1]);\n }\n },\n [\n openable,\n closable,\n selectable,\n focusedItem,\n onClick,\n focusAndSelect,\n dsId,\n setFocusedItem,\n visibleItems,\n currentIndex,\n ],\n );\n\n return onKeyDown;\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,SAAS,iBAAiB,kBAAkB;AAClE,SAAS,oBAAoB,+BAA+B;AAE5D,OAAO,oBAAoB;AAE3B,MAAM,YAAY;AAAA,EAChB,KAAK;AAAA,EACL,OAAO;AAAA,EACP,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,MAAM;AACR;AAEA,MAAM,YAAY,CAAC,OAAe,YAAoB,QAAQ,KAAK;AACnE,MAAM,YAAY,CAAC,OAAe,YAAoB,QAAQ,IAAI,UAAU;AAQrE,MAAM,wBAAwB,CAAC,EAAE,MAAM,QAAQ,MAA8D;AAClH,QAAM;AAAA,IACJ;AAAA,IACA,UAAU,EAAE,YAAY,UAAU,SAAS;AAAA,EAC7C,IAAI;AAEJ,QAAM,EAAE,cAAc,iBAAiB,IAAI,WAAW,cAAc;AAEpE,QAAM,eAAe;AAAA,IACnB,MAAM,aAAa,UAAU,CAAC,oBAAoB,oBAAoB,IAAI;AAAA,IAC1E,CAAC,MAAM,YAAY;AAAA,EACrB;AAEA,QAAM,EAAE,gBAAgB,aAAa,gBAAgB,IAAI,WAAW,cAAc;AAElF,QAAM,iBAAiB;AAAA,IACrB,CAAC,aAAqB;AACpB,qBAAe,QAAQ;AACvB,sBAAgB,QAAQ;AAAA,IAC1B;AAAA,IACA,CAAC,gBAAgB,eAAe;AAAA,EAClC;AAEA,kBAAgB,MAAM;AACpB,QAAI,SAAS,YAAa,kBAAiB,QAAQ,IAAI,GAAG,SAAS,MAAM;AAAA,EAC3E,GAAG,CAAC,MAAM,aAAa,gBAAgB,CAAC;AAExC,QAAM,YAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,YAAM,EAAE,QAAQ,IAAI;AAGpB,UAAI,YAAY,UAAU,KAAK;AAC7B,UAAE,eAAe;AAAA,MACnB;AAEA,UAAI,SAAS,YAAY,UAAU,SAAS,YAAY,UAAU,QAAQ;AACxE,YAAI,YAAY;AACd,kBAAQ,CAAC;AACT,yBAAe,IAAI;AAAA,QACrB,WAAW,gBAAgB,oBAAoB;AAC7C,kBAAQ,CAAC;AACT,yBAAe,IAAI;AAAA,QACrB,WAAW,gBAAgB,yBAAyB;AAClD,kBAAQ,CAAC;AACT,yBAAe,IAAI;AAAA,QACrB;AAAA,MACF;AAEA,UAAI,YAAY,YAAY,UAAU,aAAa;AACjD,gBAAQ,CAAC;AAAA,MACX;AAEA,UAAI,QAAQ,YAAY,YAAY,UAAU,YAAY;AACxD,gBAAQ,CAAC;AACT,uBAAe,IAAI;AAAA,MACrB;AAEA,UAAI,YAAY,UAAU,YAAY;AACpC,cAAM,WAAW,aAAa,UAAU,cAAc,aAAa,MAAM,CAAC;AAC1E,uBAAe,QAAQ;AAAA,MACzB;AAEA,UAAI,YAAY,UAAU,UAAU;AAClC,cAAM,WAAW,aAAa,UAAU,cAAc,aAAa,MAAM,CAAC;AAC1E,uBAAe,QAAQ;AAAA,MACzB;AAEA,UAAI,YAAY,UAAU,MAAM;AAC9B,uBAAe,aAAa,CAAC,CAAC;AAAA,MAChC;AAEA,UAAI,YAAY,UAAU,KAAK;AAC7B,uBAAe,aAAa,aAAa,SAAS,CAAC,CAAC;AAAA,MACtD;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useMemo, useLayoutEffect, useContext } from 'react';\nimport { CHEVRON_BACK_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../exported-related/constants.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\nimport LeftNavContext from '../LeftNavigationContext.js';\n\nconst nextIndex = (index: number, length: number) => (index + 1) % length;\nconst prevIndex = (index: number, length: number) => (index - 1 + length) % length;\n\ntype UseKeyboardNavigationProps = {\n item: DSLeftNavigationT.GenericItemItemProps;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onClick: (e: any) => void;\n};\n\nexport const useKeyboardNavigation = ({ item, onClick }: UseKeyboardNavigationProps): React.KeyboardEventHandler => {\n const {\n dsId,\n itemOpts: { selectable, openable, closable },\n } = item;\n\n const { visibleItems, visibleItemsRefs } = useContext(LeftNavContext);\n\n const currentIndex = useMemo(\n () => visibleItems.findIndex((visibleItemDsId) => visibleItemDsId === dsId),\n [dsId, visibleItems],\n );\n\n const { setFocusedItem, focusedItem, setSelectedItem } = useContext(LeftNavContext);\n\n const focusAndSelect = useCallback(\n (nextDsId: string) => {\n setFocusedItem(nextDsId);\n setSelectedItem(nextDsId);\n },\n [setFocusedItem, setSelectedItem],\n );\n\n useLayoutEffect(() => {\n if (dsId === focusedItem) visibleItemsRefs.current[dsId]?.current?.focus();\n }, [dsId, focusedItem, visibleItemsRefs]);\n\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n const { key } = e;\n\n // Prevent default behaviour when not tab\n if (key !== 'Tab') {\n e.preventDefault();\n }\n\n if (dsId && (key === 'Enter' || key === ' ')) {\n if (selectable) {\n onClick(e);\n focusAndSelect(dsId);\n } else if (focusedItem === CHEVRON_BACK_DS_ID) {\n onClick(e);\n focusAndSelect(dsId);\n } else if (focusedItem === FOOTER_MENU_CLOSE_DS_ID) {\n onClick(e);\n setFocusedItem(dsId);\n }\n }\n\n if (openable && key === 'ArrowRight') {\n onClick(e);\n }\n\n if (dsId && closable && key === 'ArrowLeft') {\n onClick(e);\n setFocusedItem(dsId);\n }\n\n if (key === 'ArrowDown') {\n const nextDsId = visibleItems[nextIndex(currentIndex, visibleItems.length)];\n setFocusedItem(nextDsId);\n }\n\n if (key === 'ArrowUp') {\n const prevDsId = visibleItems[prevIndex(currentIndex, visibleItems.length)];\n setFocusedItem(prevDsId);\n }\n\n if (key === 'Home') {\n setFocusedItem(visibleItems[0]);\n }\n\n if (key === 'End') {\n setFocusedItem(visibleItems[visibleItems.length - 1]);\n }\n },\n [\n openable,\n closable,\n selectable,\n focusedItem,\n onClick,\n focusAndSelect,\n dsId,\n setFocusedItem,\n visibleItems,\n currentIndex,\n ],\n );\n\n return onKeyDown;\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,SAAS,iBAAiB,kBAAkB;AAClE,SAAS,oBAAoB,+BAA+B;AAE5D,OAAO,oBAAoB;AAE3B,MAAM,YAAY,CAAC,OAAe,YAAoB,QAAQ,KAAK;AACnE,MAAM,YAAY,CAAC,OAAe,YAAoB,QAAQ,IAAI,UAAU;AAQrE,MAAM,wBAAwB,CAAC,EAAE,MAAM,QAAQ,MAA8D;AAClH,QAAM;AAAA,IACJ;AAAA,IACA,UAAU,EAAE,YAAY,UAAU,SAAS;AAAA,EAC7C,IAAI;AAEJ,QAAM,EAAE,cAAc,iBAAiB,IAAI,WAAW,cAAc;AAEpE,QAAM,eAAe;AAAA,IACnB,MAAM,aAAa,UAAU,CAAC,oBAAoB,oBAAoB,IAAI;AAAA,IAC1E,CAAC,MAAM,YAAY;AAAA,EACrB;AAEA,QAAM,EAAE,gBAAgB,aAAa,gBAAgB,IAAI,WAAW,cAAc;AAElF,QAAM,iBAAiB;AAAA,IACrB,CAAC,aAAqB;AACpB,qBAAe,QAAQ;AACvB,sBAAgB,QAAQ;AAAA,IAC1B;AAAA,IACA,CAAC,gBAAgB,eAAe;AAAA,EAClC;AAEA,kBAAgB,MAAM;AACpB,QAAI,SAAS,YAAa,kBAAiB,QAAQ,IAAI,GAAG,SAAS,MAAM;AAAA,EAC3E,GAAG,CAAC,MAAM,aAAa,gBAAgB,CAAC;AAExC,QAAM,YAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAGhB,UAAI,QAAQ,OAAO;AACjB,UAAE,eAAe;AAAA,MACnB;AAEA,UAAI,SAAS,QAAQ,WAAW,QAAQ,MAAM;AAC5C,YAAI,YAAY;AACd,kBAAQ,CAAC;AACT,yBAAe,IAAI;AAAA,QACrB,WAAW,gBAAgB,oBAAoB;AAC7C,kBAAQ,CAAC;AACT,yBAAe,IAAI;AAAA,QACrB,WAAW,gBAAgB,yBAAyB;AAClD,kBAAQ,CAAC;AACT,yBAAe,IAAI;AAAA,QACrB;AAAA,MACF;AAEA,UAAI,YAAY,QAAQ,cAAc;AACpC,gBAAQ,CAAC;AAAA,MACX;AAEA,UAAI,QAAQ,YAAY,QAAQ,aAAa;AAC3C,gBAAQ,CAAC;AACT,uBAAe,IAAI;AAAA,MACrB;AAEA,UAAI,QAAQ,aAAa;AACvB,cAAM,WAAW,aAAa,UAAU,cAAc,aAAa,MAAM,CAAC;AAC1E,uBAAe,QAAQ;AAAA,MACzB;AAEA,UAAI,QAAQ,WAAW;AACrB,cAAM,WAAW,aAAa,UAAU,cAAc,aAAa,MAAM,CAAC;AAC1E,uBAAe,QAAQ;AAAA,MACzB;AAEA,UAAI,QAAQ,QAAQ;AAClB,uBAAe,aAAa,CAAC,CAAC;AAAA,MAChC;AAEA,UAAI,QAAQ,OAAO;AACjB,uBAAe,aAAa,aAAa,SAAS,CAAC,CAAC;AAAA,MACtD;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
6
6
  "names": []
7
7
  }
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import type { DSLeftNavigationT } from './react-desc-prop-types.js';
2
3
  export declare const LeftNavigation: {
3
4
  (props: DSLeftNavigationT.Props): JSX.Element;
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { type SvgIconT } from '@elliemae/ds-icons';
2
3
  export declare const ChevronItem: (props?: SvgIconT.Props) => JSX.Element;
3
4
  export default ChevronItem;
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  type NotificationsProps = {
2
3
  exceptions?: boolean;
3
4
  alerts?: boolean;
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { type SvgIconT } from '@elliemae/ds-icons';
2
3
  export declare const OpenWindow: (props: SvgIconT.Props) => JSX.Element;
3
4
  export default OpenWindow;
@@ -1,2 +1,3 @@
1
+ /// <reference types="react" />
1
2
  import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
2
3
  export declare const ItemControlledDrilldown: (props: DSLeftNavigationT.ComponentProps) => JSX.Element;
@@ -1,2 +1,3 @@
1
+ /// <reference types="react" />
1
2
  import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
2
3
  export declare const ItemHeader: (props: DSLeftNavigationT.ComponentProps) => JSX.Element;
@@ -1,2 +1,3 @@
1
+ /// <reference types="react" />
1
2
  import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
2
3
  export declare const ItemLink: (props: DSLeftNavigationT.ComponentProps) => JSX.Element;
@@ -1,2 +1,3 @@
1
+ /// <reference types="react" />
1
2
  import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
2
3
  export declare const ItemSection: (props: DSLeftNavigationT.ComponentProps) => JSX.Element;
@@ -1,2 +1,3 @@
1
+ /// <reference types="react" />
1
2
  import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
2
3
  export declare const ItemSeparator: (props: DSLeftNavigationT.ComponentProps) => JSX.Element;
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
2
3
  interface SkeletonPropsT {
3
4
  item: DSLeftNavigationT.ComponentProps['item'];
@@ -1,2 +1,3 @@
1
+ /// <reference types="react" />
1
2
  import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
2
3
  export declare const ItemSubmenu: (props: DSLeftNavigationT.ComponentProps) => JSX.Element;
@@ -1,2 +1,3 @@
1
+ /// <reference types="react" />
1
2
  import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
2
3
  export declare const ItemTextLabel: (props: DSLeftNavigationT.ComponentProps) => JSX.Element;
@@ -1,2 +1,3 @@
1
+ /// <reference types="react" />
1
2
  import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
2
3
  export declare const ItemUncontrolledDrilldown: (props: DSLeftNavigationT.ComponentProps) => JSX.Element;
@@ -1,2 +1,3 @@
1
+ /// <reference types="react" />
1
2
  import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
2
3
  export declare const ItemWithDate: (props: DSLeftNavigationT.ComponentProps) => JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-left-navigation",
3
- "version": "3.50.1-next.9",
3
+ "version": "3.51.0-next.0",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Left Navigation",
6
6
  "files": [
@@ -236,25 +236,25 @@
236
236
  "typeSafety": false
237
237
  },
238
238
  "dependencies": {
239
- "@elliemae/ds-button-v2": "3.50.1-next.9",
240
- "@elliemae/ds-grid": "3.50.1-next.9",
241
- "@elliemae/ds-circular-progress-indicator": "3.50.1-next.9",
242
- "@elliemae/ds-props-helpers": "3.50.1-next.9",
243
- "@elliemae/ds-skeleton": "3.50.1-next.9",
244
- "@elliemae/ds-icons": "3.50.1-next.9",
245
- "@elliemae/ds-system": "3.50.1-next.9",
246
- "@elliemae/ds-truncated-tooltip-text": "3.50.1-next.9"
239
+ "@elliemae/ds-button-v2": "3.51.0-next.0",
240
+ "@elliemae/ds-circular-progress-indicator": "3.51.0-next.0",
241
+ "@elliemae/ds-grid": "3.51.0-next.0",
242
+ "@elliemae/ds-props-helpers": "3.51.0-next.0",
243
+ "@elliemae/ds-icons": "3.51.0-next.0",
244
+ "@elliemae/ds-skeleton": "3.51.0-next.0",
245
+ "@elliemae/ds-system": "3.51.0-next.0",
246
+ "@elliemae/ds-truncated-tooltip-text": "3.51.0-next.0"
247
247
  },
248
248
  "devDependencies": {
249
- "@elliemae/pui-cli": "9.0.0-next.31",
249
+ "@elliemae/pui-cli": "9.0.0-next.50",
250
250
  "jest": "~29.7.0",
251
251
  "styled-components": "~5.3.9",
252
- "@elliemae/ds-monorepo-devops": "3.50.1-next.9"
252
+ "@elliemae/ds-monorepo-devops": "3.51.0-next.0"
253
253
  },
254
254
  "peerDependencies": {
255
255
  "lodash": "^4.17.21",
256
- "react": "^17.0.2",
257
- "react-dom": "^17.0.2",
256
+ "react": "^18.3.1",
257
+ "react-dom": "^18.3.1",
258
258
  "styled-components": "~5.3.9"
259
259
  },
260
260
  "scripts": {