@elliemae/ds-left-navigation 3.50.1-next.9 → 3.51.0-beta.2

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.
@@ -33,7 +33,7 @@ __export(constants_exports, {
33
33
  });
34
34
  module.exports = __toCommonJS(constants_exports);
35
35
  var React = __toESM(require("react"));
36
- const DSLeftNavigationName = "DSLeftNavigation";
36
+ const DSLeftNavigationName = "DSLeftnavigation";
37
37
  const DSLeftNavigationSlots = {
38
38
  ROOT: "root",
39
39
  AREAS_CONTAINER: "areas-container",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/constants/constants.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["export const DSLeftNavigationName = 'DSLeftNavigation';\n\nexport const DSLeftNavigationSlots = {\n ROOT: 'root',\n\n AREAS_CONTAINER: 'areas-container',\n BODY_AREAS_CONTAINER: 'body-areas-container',\n FOOTER_AREA: 'footer-area',\n LOADER_WRAPPER: 'loader-wrapper',\n HEADER_AREA: 'header-area',\n BODY_HEADER_AREA: 'body-header-area',\n BODY_ITEMS_AREA: 'body-items-area',\n\n FOOTER_MENU: 'footer-menu',\n FOOTER_ITEM: 'footer-item',\n FOOTER_LABEL: 'footer-label',\n FOOTER_SEPARATOR: 'footer-separator',\n FOOTER_MENU_COLLAPSE: 'footer-menu-collapse',\n\n NOTIFICATIONS_CONTAINER: 'notifications-container',\n\n ITEM_SEPARATOR: 'item-separator',\n\n SECTION_LABEL: 'section-label',\n SECTION_RIGHT_LABEL: 'section-right-label',\n VERTICAL_SEPARATOR: 'vertical-separator',\n SECTION_CONTAINER: 'section-container',\n\n ITEM_LABEL: 'item-label',\n LEFT_CONTAINER: 'left-container',\n BOTTOM_CONTAINER: 'bottom-container',\n RIGHT_CONTAINER: 'right-container',\n ITEM_DATE: 'item-date',\n ITEM_CHEVRON_BACK: 'item-chevron-back',\n\n ITEM: 'item',\n COLLAPSED_CONTAINER: 'collapsed-container',\n ARROW_CONTAINER: 'arrow-container',\n ITEM_BORDER_BOTTOM: 'item-border-bottom',\n};\n", "import * as React from 'react';\nexport { React };\n"],
4
+ "sourcesContent": ["export const DSLeftNavigationName = 'DSLeftnavigation';\n\nexport const DSLeftNavigationSlots = {\n ROOT: 'root',\n\n AREAS_CONTAINER: 'areas-container',\n BODY_AREAS_CONTAINER: 'body-areas-container',\n FOOTER_AREA: 'footer-area',\n LOADER_WRAPPER: 'loader-wrapper',\n HEADER_AREA: 'header-area',\n BODY_HEADER_AREA: 'body-header-area',\n BODY_ITEMS_AREA: 'body-items-area',\n\n FOOTER_MENU: 'footer-menu',\n FOOTER_ITEM: 'footer-item',\n FOOTER_LABEL: 'footer-label',\n FOOTER_SEPARATOR: 'footer-separator',\n FOOTER_MENU_COLLAPSE: 'footer-menu-collapse',\n\n NOTIFICATIONS_CONTAINER: 'notifications-container',\n\n ITEM_SEPARATOR: 'item-separator',\n\n SECTION_LABEL: 'section-label',\n SECTION_RIGHT_LABEL: 'section-right-label',\n VERTICAL_SEPARATOR: 'vertical-separator',\n SECTION_CONTAINER: 'section-container',\n\n ITEM_LABEL: 'item-label',\n LEFT_CONTAINER: 'left-container',\n BOTTOM_CONTAINER: 'bottom-container',\n RIGHT_CONTAINER: 'right-container',\n ITEM_DATE: 'item-date',\n ITEM_CHEVRON_BACK: 'item-chevron-back',\n\n ITEM: 'item',\n COLLAPSED_CONTAINER: 'collapsed-container',\n ARROW_CONTAINER: 'arrow-container',\n ITEM_BORDER_BOTTOM: 'item-border-bottom',\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,uBAAuB;AAE7B,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EAEN,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EAEjB,aAAa;AAAA,EACb,aAAa;AAAA,EACb,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,sBAAsB;AAAA,EAEtB,yBAAyB;AAAA,EAEzB,gBAAgB;AAAA,EAEhB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EAEnB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,mBAAmB;AAAA,EAEnB,MAAM;AAAA,EACN,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,oBAAoB;AACtB;",
6
6
  "names": []
7
7
  }
@@ -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
  }
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- const DSLeftNavigationName = "DSLeftNavigation";
2
+ const DSLeftNavigationName = "DSLeftnavigation";
3
3
  const DSLeftNavigationSlots = {
4
4
  ROOT: "root",
5
5
  AREAS_CONTAINER: "areas-container",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/constants.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSLeftNavigationName = 'DSLeftNavigation';\n\nexport const DSLeftNavigationSlots = {\n ROOT: 'root',\n\n AREAS_CONTAINER: 'areas-container',\n BODY_AREAS_CONTAINER: 'body-areas-container',\n FOOTER_AREA: 'footer-area',\n LOADER_WRAPPER: 'loader-wrapper',\n HEADER_AREA: 'header-area',\n BODY_HEADER_AREA: 'body-header-area',\n BODY_ITEMS_AREA: 'body-items-area',\n\n FOOTER_MENU: 'footer-menu',\n FOOTER_ITEM: 'footer-item',\n FOOTER_LABEL: 'footer-label',\n FOOTER_SEPARATOR: 'footer-separator',\n FOOTER_MENU_COLLAPSE: 'footer-menu-collapse',\n\n NOTIFICATIONS_CONTAINER: 'notifications-container',\n\n ITEM_SEPARATOR: 'item-separator',\n\n SECTION_LABEL: 'section-label',\n SECTION_RIGHT_LABEL: 'section-right-label',\n VERTICAL_SEPARATOR: 'vertical-separator',\n SECTION_CONTAINER: 'section-container',\n\n ITEM_LABEL: 'item-label',\n LEFT_CONTAINER: 'left-container',\n BOTTOM_CONTAINER: 'bottom-container',\n RIGHT_CONTAINER: 'right-container',\n ITEM_DATE: 'item-date',\n ITEM_CHEVRON_BACK: 'item-chevron-back',\n\n ITEM: 'item',\n COLLAPSED_CONTAINER: 'collapsed-container',\n ARROW_CONTAINER: 'arrow-container',\n ITEM_BORDER_BOTTOM: 'item-border-bottom',\n};\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSLeftNavigationName = 'DSLeftnavigation';\n\nexport const DSLeftNavigationSlots = {\n ROOT: 'root',\n\n AREAS_CONTAINER: 'areas-container',\n BODY_AREAS_CONTAINER: 'body-areas-container',\n FOOTER_AREA: 'footer-area',\n LOADER_WRAPPER: 'loader-wrapper',\n HEADER_AREA: 'header-area',\n BODY_HEADER_AREA: 'body-header-area',\n BODY_ITEMS_AREA: 'body-items-area',\n\n FOOTER_MENU: 'footer-menu',\n FOOTER_ITEM: 'footer-item',\n FOOTER_LABEL: 'footer-label',\n FOOTER_SEPARATOR: 'footer-separator',\n FOOTER_MENU_COLLAPSE: 'footer-menu-collapse',\n\n NOTIFICATIONS_CONTAINER: 'notifications-container',\n\n ITEM_SEPARATOR: 'item-separator',\n\n SECTION_LABEL: 'section-label',\n SECTION_RIGHT_LABEL: 'section-right-label',\n VERTICAL_SEPARATOR: 'vertical-separator',\n SECTION_CONTAINER: 'section-container',\n\n ITEM_LABEL: 'item-label',\n LEFT_CONTAINER: 'left-container',\n BOTTOM_CONTAINER: 'bottom-container',\n RIGHT_CONTAINER: 'right-container',\n ITEM_DATE: 'item-date',\n ITEM_CHEVRON_BACK: 'item-chevron-back',\n\n ITEM: 'item',\n COLLAPSED_CONTAINER: 'collapsed-container',\n ARROW_CONTAINER: 'arrow-container',\n ITEM_BORDER_BOTTOM: 'item-border-bottom',\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,uBAAuB;AAE7B,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EAEN,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EAEjB,aAAa;AAAA,EACb,aAAa;AAAA,EACb,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,sBAAsB;AAAA,EAEtB,yBAAyB;AAAA,EAEzB,gBAAgB;AAAA,EAEhB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EAEnB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,mBAAmB;AAAA,EAEnB,MAAM;AAAA,EACN,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,oBAAoB;AACtB;",
6
6
  "names": []
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,4 +1,4 @@
1
- export declare const DSLeftNavigationName = "DSLeftNavigation";
1
+ export declare const DSLeftNavigationName = "DSLeftnavigation";
2
2
  export declare const DSLeftNavigationSlots: {
3
3
  ROOT: string;
4
4
  AREAS_CONTAINER: string;
@@ -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-beta.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Left Navigation",
6
6
  "files": [
@@ -14,206 +14,6 @@
14
14
  "types": "./dist/types/index.d.ts",
15
15
  "import": "./dist/esm/index.js",
16
16
  "require": "./dist/cjs/index.js"
17
- },
18
- "./prop-types": {
19
- "import": "./dist/esm/prop-types.js",
20
- "require": "./dist/cjs/prop-types.js"
21
- },
22
- "./parts/OutOfTheBoxMapItem": {
23
- "import": "./dist/esm/parts/OutOfTheBoxMapItem.js",
24
- "require": "./dist/cjs/parts/OutOfTheBoxMapItem.js"
25
- },
26
- "./parts/LeftNavLoading": {
27
- "import": "./dist/esm/parts/LeftNavLoading/index.js",
28
- "require": "./dist/cjs/parts/LeftNavLoading/index.js"
29
- },
30
- "./parts/LeftNavFooterItem/styled": {
31
- "import": "./dist/esm/parts/LeftNavFooterItem/styled.js",
32
- "require": "./dist/cjs/parts/LeftNavFooterItem/styled.js"
33
- },
34
- "./parts/LeftNavFooterItem": {
35
- "import": "./dist/esm/parts/LeftNavFooterItem/index.js",
36
- "require": "./dist/cjs/parts/LeftNavFooterItem/index.js"
37
- },
38
- "./parts/LeftNavContentWithScrollbar": {
39
- "import": "./dist/esm/parts/LeftNavContentWithScrollbar/index.js",
40
- "require": "./dist/cjs/parts/LeftNavContentWithScrollbar/index.js"
41
- },
42
- "./parts/LeftNavContent/styled": {
43
- "import": "./dist/esm/parts/LeftNavContent/styled.js",
44
- "require": "./dist/cjs/parts/LeftNavContent/styled.js"
45
- },
46
- "./parts/LeftNavContent": {
47
- "import": "./dist/esm/parts/LeftNavContent/index.js",
48
- "require": "./dist/cjs/parts/LeftNavContent/index.js"
49
- },
50
- "./outOfTheBox/ItemWithDate/styled": {
51
- "import": "./dist/esm/outOfTheBox/ItemWithDate/styled.js",
52
- "require": "./dist/cjs/outOfTheBox/ItemWithDate/styled.js"
53
- },
54
- "./outOfTheBox/ItemWithDate": {
55
- "import": "./dist/esm/outOfTheBox/ItemWithDate/index.js",
56
- "require": "./dist/cjs/outOfTheBox/ItemWithDate/index.js"
57
- },
58
- "./outOfTheBox/ItemUncontrolledDrilldown/styled": {
59
- "import": "./dist/esm/outOfTheBox/ItemUncontrolledDrilldown/styled.js",
60
- "require": "./dist/cjs/outOfTheBox/ItemUncontrolledDrilldown/styled.js"
61
- },
62
- "./outOfTheBox/ItemUncontrolledDrilldown": {
63
- "import": "./dist/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js",
64
- "require": "./dist/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js"
65
- },
66
- "./outOfTheBox/ItemTextLabel/styled": {
67
- "import": "./dist/esm/outOfTheBox/ItemTextLabel/styled.js",
68
- "require": "./dist/cjs/outOfTheBox/ItemTextLabel/styled.js"
69
- },
70
- "./outOfTheBox/ItemTextLabel": {
71
- "import": "./dist/esm/outOfTheBox/ItemTextLabel/index.js",
72
- "require": "./dist/cjs/outOfTheBox/ItemTextLabel/index.js"
73
- },
74
- "./outOfTheBox/ItemSubmenu/styled": {
75
- "import": "./dist/esm/outOfTheBox/ItemSubmenu/styled.js",
76
- "require": "./dist/cjs/outOfTheBox/ItemSubmenu/styled.js"
77
- },
78
- "./outOfTheBox/ItemSubmenu": {
79
- "import": "./dist/esm/outOfTheBox/ItemSubmenu/index.js",
80
- "require": "./dist/cjs/outOfTheBox/ItemSubmenu/index.js"
81
- },
82
- "./outOfTheBox/ItemSeparator": {
83
- "import": "./dist/esm/outOfTheBox/ItemSeparator/index.js",
84
- "require": "./dist/cjs/outOfTheBox/ItemSeparator/index.js"
85
- },
86
- "./outOfTheBox/ItemSection/styled": {
87
- "import": "./dist/esm/outOfTheBox/ItemSection/styled.js",
88
- "require": "./dist/cjs/outOfTheBox/ItemSection/styled.js"
89
- },
90
- "./outOfTheBox/ItemSection": {
91
- "import": "./dist/esm/outOfTheBox/ItemSection/index.js",
92
- "require": "./dist/cjs/outOfTheBox/ItemSection/index.js"
93
- },
94
- "./outOfTheBox/ItemLink/styled": {
95
- "import": "./dist/esm/outOfTheBox/ItemLink/styled.js",
96
- "require": "./dist/cjs/outOfTheBox/ItemLink/styled.js"
97
- },
98
- "./outOfTheBox/ItemLink": {
99
- "import": "./dist/esm/outOfTheBox/ItemLink/index.js",
100
- "require": "./dist/cjs/outOfTheBox/ItemLink/index.js"
101
- },
102
- "./outOfTheBox/ItemHeader/styled": {
103
- "import": "./dist/esm/outOfTheBox/ItemHeader/styled.js",
104
- "require": "./dist/cjs/outOfTheBox/ItemHeader/styled.js"
105
- },
106
- "./outOfTheBox/ItemHeader": {
107
- "import": "./dist/esm/outOfTheBox/ItemHeader/index.js",
108
- "require": "./dist/cjs/outOfTheBox/ItemHeader/index.js"
109
- },
110
- "./outOfTheBox/ItemControlledDrilldown/styled": {
111
- "import": "./dist/esm/outOfTheBox/ItemControlledDrilldown/styled.js",
112
- "require": "./dist/cjs/outOfTheBox/ItemControlledDrilldown/styled.js"
113
- },
114
- "./outOfTheBox/ItemControlledDrilldown": {
115
- "import": "./dist/esm/outOfTheBox/ItemControlledDrilldown/index.js",
116
- "require": "./dist/cjs/outOfTheBox/ItemControlledDrilldown/index.js"
117
- },
118
- "./outOfTheBox": {
119
- "import": "./dist/esm/outOfTheBox/index.js",
120
- "require": "./dist/cjs/outOfTheBox/index.js"
121
- },
122
- "./LeftNavigationContext": {
123
- "import": "./dist/esm/LeftNavigationContext.js",
124
- "require": "./dist/cjs/LeftNavigationContext.js"
125
- },
126
- "./LeftNavigation": {
127
- "import": "./dist/esm/LeftNavigation.js",
128
- "require": "./dist/cjs/LeftNavigation.js"
129
- },
130
- "./hooks/useSelectFirstBodyItem": {
131
- "import": "./dist/esm/hooks/useSelectFirstBodyItem.js",
132
- "require": "./dist/cjs/hooks/useSelectFirstBodyItem.js"
133
- },
134
- "./hooks/useOpenableOnClickHandler": {
135
- "import": "./dist/esm/hooks/useOpenableOnClickHandler.js",
136
- "require": "./dist/cjs/hooks/useOpenableOnClickHandler.js"
137
- },
138
- "./hooks/useKeyboardNavigation": {
139
- "import": "./dist/esm/hooks/useKeyboardNavigation.js",
140
- "require": "./dist/cjs/hooks/useKeyboardNavigation.js"
141
- },
142
- "./hooks/useExpandableOnClickHandler": {
143
- "import": "./dist/esm/hooks/useExpandableOnClickHandler.js",
144
- "require": "./dist/cjs/hooks/useExpandableOnClickHandler.js"
145
- },
146
- "./hooks": {
147
- "import": "./dist/esm/hooks/index.js",
148
- "require": "./dist/cjs/hooks/index.js"
149
- },
150
- "./exported-related/OpenWindowItem": {
151
- "import": "./dist/esm/exported-related/OpenWindowItem/index.js",
152
- "require": "./dist/cjs/exported-related/OpenWindowItem/index.js"
153
- },
154
- "./exported-related/Notifications": {
155
- "import": "./dist/esm/exported-related/Notifications/index.js",
156
- "require": "./dist/cjs/exported-related/Notifications/index.js"
157
- },
158
- "./exported-related/ItemRenderer/usePropsWithDefaults": {
159
- "import": "./dist/esm/exported-related/ItemRenderer/usePropsWithDefaults.js",
160
- "require": "./dist/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js"
161
- },
162
- "./exported-related/ItemRenderer/styled": {
163
- "import": "./dist/esm/exported-related/ItemRenderer/styled.js",
164
- "require": "./dist/cjs/exported-related/ItemRenderer/styled.js"
165
- },
166
- "./exported-related/ItemRenderer": {
167
- "import": "./dist/esm/exported-related/ItemRenderer/index.js",
168
- "require": "./dist/cjs/exported-related/ItemRenderer/index.js"
169
- },
170
- "./exported-related": {
171
- "import": "./dist/esm/exported-related/index.js",
172
- "require": "./dist/cjs/exported-related/index.js"
173
- },
174
- "./exported-related/Icon": {
175
- "import": "./dist/esm/exported-related/Icon/index.js",
176
- "require": "./dist/cjs/exported-related/Icon/index.js"
177
- },
178
- "./exported-related/constants": {
179
- "import": "./dist/esm/exported-related/constants.js",
180
- "require": "./dist/cjs/exported-related/constants.js"
181
- },
182
- "./exported-related/ChevronItem": {
183
- "import": "./dist/esm/exported-related/ChevronItem/index.js",
184
- "require": "./dist/cjs/exported-related/ChevronItem/index.js"
185
- },
186
- "./configs/useLeftNavSmoothExpand": {
187
- "import": "./dist/esm/configs/useLeftNavSmoothExpand.js",
188
- "require": "./dist/cjs/configs/useLeftNavSmoothExpand.js"
189
- },
190
- "./configs/useLeftNavItems": {
191
- "import": "./dist/esm/configs/useLeftNavItems.js",
192
- "require": "./dist/cjs/configs/useLeftNavItems.js"
193
- },
194
- "./configs/useLeftNavConfig": {
195
- "import": "./dist/esm/configs/useLeftNavConfig.js",
196
- "require": "./dist/cjs/configs/useLeftNavConfig.js"
197
- },
198
- "./configs": {
199
- "import": "./dist/esm/configs/index.js",
200
- "require": "./dist/cjs/configs/index.js"
201
- },
202
- "./common": {
203
- "import": "./dist/esm/common/index.js",
204
- "require": "./dist/cjs/common/index.js"
205
- },
206
- "./common/getScrollbarStyle": {
207
- "import": "./dist/esm/common/getScrollbarStyle.js",
208
- "require": "./dist/cjs/common/getScrollbarStyle.js"
209
- },
210
- "./common/getLeftBorderStyle": {
211
- "import": "./dist/esm/common/getLeftBorderStyle.js",
212
- "require": "./dist/cjs/common/getLeftBorderStyle.js"
213
- },
214
- "./common/getItemBackgroundStyle": {
215
- "import": "./dist/esm/common/getItemBackgroundStyle.js",
216
- "require": "./dist/cjs/common/getItemBackgroundStyle.js"
217
17
  }
218
18
  },
219
19
  "repository": {
@@ -221,8 +21,8 @@
221
21
  "url": "https://git.elliemae.io/platform-ui/dimsum.git"
222
22
  },
223
23
  "engines": {
224
- "pnpm": ">=6",
225
- "node": ">=16"
24
+ "pnpm": ">=9",
25
+ "node": ">=22"
226
26
  },
227
27
  "author": "ICE MT",
228
28
  "jestSonar": {
@@ -236,25 +36,25 @@
236
36
  "typeSafety": false
237
37
  },
238
38
  "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"
39
+ "@elliemae/ds-button-v2": "3.51.0-beta.2",
40
+ "@elliemae/ds-icons": "3.51.0-beta.2",
41
+ "@elliemae/ds-skeleton": "3.51.0-beta.2",
42
+ "@elliemae/ds-grid": "3.51.0-beta.2",
43
+ "@elliemae/ds-props-helpers": "3.51.0-beta.2",
44
+ "@elliemae/ds-circular-progress-indicator": "3.51.0-beta.2",
45
+ "@elliemae/ds-system": "3.51.0-beta.2",
46
+ "@elliemae/ds-truncated-tooltip-text": "3.51.0-beta.2"
247
47
  },
248
48
  "devDependencies": {
249
- "@elliemae/pui-cli": "9.0.0-next.31",
49
+ "@elliemae/pui-cli": "9.0.0-next.55",
250
50
  "jest": "~29.7.0",
251
51
  "styled-components": "~5.3.9",
252
- "@elliemae/ds-monorepo-devops": "3.50.1-next.9"
52
+ "@elliemae/ds-monorepo-devops": "3.51.0-beta.2"
253
53
  },
254
54
  "peerDependencies": {
255
55
  "lodash": "^4.17.21",
256
- "react": "^17.0.2",
257
- "react-dom": "^17.0.2",
56
+ "react": "^18.3.1",
57
+ "react-dom": "^18.3.1",
258
58
  "styled-components": "~5.3.9"
259
59
  },
260
60
  "scripts": {