@elliemae/ds-left-navigation 2.2.0-next.3 → 2.3.0-alpha.1

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.
Files changed (213) hide show
  1. package/cjs/LeftNavigation.js +49 -27
  2. package/cjs/LeftNavigation.js.map +7 -0
  3. package/cjs/LeftNavigationContext.js +44 -18
  4. package/cjs/LeftNavigationContext.js.map +7 -0
  5. package/cjs/common/getItemBackgroundStyle.js +47 -8
  6. package/cjs/common/getItemBackgroundStyle.js.map +7 -0
  7. package/cjs/common/getLeftBorderStyle.js +50 -8
  8. package/cjs/common/getLeftBorderStyle.js.map +7 -0
  9. package/cjs/common/getScrollbarStyle.js +55 -4
  10. package/cjs/common/getScrollbarStyle.js.map +7 -0
  11. package/cjs/common/index.js +30 -13
  12. package/cjs/common/index.js.map +7 -0
  13. package/cjs/configs/index.js +38 -10
  14. package/cjs/configs/index.js.map +7 -0
  15. package/cjs/configs/useLeftNavConfig.js +76 -76
  16. package/cjs/configs/useLeftNavConfig.js.map +7 -0
  17. package/cjs/configs/useLeftNavItems.js +66 -64
  18. package/cjs/configs/useLeftNavItems.js.map +7 -0
  19. package/cjs/configs/useLeftNavSmoothExpand.js +43 -25
  20. package/cjs/configs/useLeftNavSmoothExpand.js.map +7 -0
  21. package/cjs/exported-related/ChevronItem/index.js +42 -27
  22. package/cjs/exported-related/ChevronItem/index.js.map +7 -0
  23. package/cjs/exported-related/Icon/index.js +51 -34
  24. package/cjs/exported-related/Icon/index.js.map +7 -0
  25. package/cjs/exported-related/ItemRenderer/index.js +99 -94
  26. package/cjs/exported-related/ItemRenderer/index.js.map +7 -0
  27. package/cjs/exported-related/ItemRenderer/styled.js +83 -51
  28. package/cjs/exported-related/ItemRenderer/styled.js.map +7 -0
  29. package/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js +57 -45
  30. package/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js.map +7 -0
  31. package/cjs/exported-related/Notifications/index.js +81 -61
  32. package/cjs/exported-related/Notifications/index.js.map +7 -0
  33. package/cjs/exported-related/OpenWindowItem/index.js +49 -32
  34. package/cjs/exported-related/OpenWindowItem/index.js.map +7 -0
  35. package/cjs/exported-related/constants.js +53 -25
  36. package/cjs/exported-related/constants.js.map +7 -0
  37. package/cjs/exported-related/index.js +33 -23
  38. package/cjs/exported-related/index.js.map +7 -0
  39. package/cjs/hooks/index.js +30 -13
  40. package/cjs/hooks/index.js.map +7 -0
  41. package/cjs/hooks/useExpandableOnClickHandler.js +55 -26
  42. package/cjs/hooks/useExpandableOnClickHandler.js.map +7 -0
  43. package/cjs/hooks/useKeyboardNavigation.js +62 -54
  44. package/cjs/hooks/useKeyboardNavigation.js.map +7 -0
  45. package/cjs/hooks/useOpenableOnClickHandler.js +55 -26
  46. package/cjs/hooks/useOpenableOnClickHandler.js.map +7 -0
  47. package/cjs/hooks/useSelectFirstBodyItem.js +47 -34
  48. package/cjs/hooks/useSelectFirstBodyItem.js.map +7 -0
  49. package/cjs/index.d.js +27 -2
  50. package/cjs/index.d.js.map +7 -0
  51. package/cjs/index.js +41 -30
  52. package/cjs/index.js.map +7 -0
  53. package/cjs/outOfTheBox/ItemControlledDrilldown/index.js +97 -103
  54. package/cjs/outOfTheBox/ItemControlledDrilldown/index.js.map +7 -0
  55. package/cjs/outOfTheBox/ItemControlledDrilldown/styled.js +49 -27
  56. package/cjs/outOfTheBox/ItemControlledDrilldown/styled.js.map +7 -0
  57. package/cjs/outOfTheBox/ItemHeader/index.js +95 -93
  58. package/cjs/outOfTheBox/ItemHeader/index.js.map +7 -0
  59. package/cjs/outOfTheBox/ItemHeader/styled.js +49 -22
  60. package/cjs/outOfTheBox/ItemHeader/styled.js.map +7 -0
  61. package/cjs/outOfTheBox/ItemLink/index.js +75 -67
  62. package/cjs/outOfTheBox/ItemLink/index.js.map +7 -0
  63. package/cjs/outOfTheBox/ItemLink/styled.js +41 -17
  64. package/cjs/outOfTheBox/ItemLink/styled.js.map +7 -0
  65. package/cjs/outOfTheBox/ItemSection/index.js +59 -63
  66. package/cjs/outOfTheBox/ItemSection/index.js.map +7 -0
  67. package/cjs/outOfTheBox/ItemSection/styled.js +53 -23
  68. package/cjs/outOfTheBox/ItemSection/styled.js.map +7 -0
  69. package/cjs/outOfTheBox/ItemSeparator/index.js +56 -45
  70. package/cjs/outOfTheBox/ItemSeparator/index.js.map +7 -0
  71. package/cjs/outOfTheBox/ItemSubmenu/index.js +95 -92
  72. package/cjs/outOfTheBox/ItemSubmenu/index.js.map +7 -0
  73. package/cjs/outOfTheBox/ItemSubmenu/styled.js +49 -22
  74. package/cjs/outOfTheBox/ItemSubmenu/styled.js.map +7 -0
  75. package/cjs/outOfTheBox/ItemTextLabel/index.js +51 -52
  76. package/cjs/outOfTheBox/ItemTextLabel/index.js.map +7 -0
  77. package/cjs/outOfTheBox/ItemTextLabel/styled.js +43 -23
  78. package/cjs/outOfTheBox/ItemTextLabel/styled.js.map +7 -0
  79. package/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js +107 -113
  80. package/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +7 -0
  81. package/cjs/outOfTheBox/ItemUncontrolledDrilldown/styled.js +49 -27
  82. package/cjs/outOfTheBox/ItemUncontrolledDrilldown/styled.js.map +7 -0
  83. package/cjs/outOfTheBox/ItemWithDate/index.js +59 -54
  84. package/cjs/outOfTheBox/ItemWithDate/index.js.map +7 -0
  85. package/cjs/outOfTheBox/ItemWithDate/styled.js +49 -27
  86. package/cjs/outOfTheBox/ItemWithDate/styled.js.map +7 -0
  87. package/cjs/outOfTheBox/index.js +65 -50
  88. package/cjs/outOfTheBox/index.js.map +7 -0
  89. package/cjs/parts/LeftNavContent/index.js +75 -71
  90. package/cjs/parts/LeftNavContent/index.js.map +7 -0
  91. package/cjs/parts/LeftNavContent/styled.js +110 -50
  92. package/cjs/parts/LeftNavContent/styled.js.map +7 -0
  93. package/cjs/parts/LeftNavContentWithScrollbar/index.js +89 -79
  94. package/cjs/parts/LeftNavContentWithScrollbar/index.js.map +7 -0
  95. package/cjs/parts/LeftNavFooterItem/index.js +97 -80
  96. package/cjs/parts/LeftNavFooterItem/index.js.map +7 -0
  97. package/cjs/parts/LeftNavFooterItem/styled.js +89 -34
  98. package/cjs/parts/LeftNavFooterItem/styled.js.map +7 -0
  99. package/cjs/parts/LeftNavLoading/index.js +51 -33
  100. package/cjs/parts/LeftNavLoading/index.js.map +7 -0
  101. package/cjs/parts/OutOfTheBoxMapItem.js +49 -46
  102. package/cjs/parts/OutOfTheBoxMapItem.js.map +7 -0
  103. package/cjs/prop-types.js +58 -39
  104. package/cjs/prop-types.js.map +7 -0
  105. package/esm/LeftNavigation.js +17 -15
  106. package/esm/LeftNavigation.js.map +7 -0
  107. package/esm/LeftNavigationContext.js +15 -11
  108. package/esm/LeftNavigationContext.js.map +7 -0
  109. package/esm/common/getItemBackgroundStyle.js +20 -6
  110. package/esm/common/getItemBackgroundStyle.js.map +7 -0
  111. package/esm/common/getLeftBorderStyle.js +23 -6
  112. package/esm/common/getLeftBorderStyle.js.map +7 -0
  113. package/esm/common/getScrollbarStyle.js +28 -2
  114. package/esm/common/getScrollbarStyle.js.map +7 -0
  115. package/esm/common/index.js +5 -3
  116. package/esm/common/index.js.map +7 -0
  117. package/esm/configs/index.js +9 -2
  118. package/esm/configs/index.js.map +7 -0
  119. package/esm/configs/useLeftNavConfig.js +47 -67
  120. package/esm/configs/useLeftNavConfig.js.map +7 -0
  121. package/esm/configs/useLeftNavItems.js +33 -55
  122. package/esm/configs/useLeftNavItems.js.map +7 -0
  123. package/esm/configs/useLeftNavSmoothExpand.js +14 -16
  124. package/esm/configs/useLeftNavSmoothExpand.js.map +7 -0
  125. package/esm/exported-related/ChevronItem/index.js +13 -18
  126. package/esm/exported-related/ChevronItem/index.js.map +7 -0
  127. package/esm/exported-related/Icon/index.js +21 -24
  128. package/esm/exported-related/Icon/index.js.map +7 -0
  129. package/esm/exported-related/ItemRenderer/index.js +65 -80
  130. package/esm/exported-related/ItemRenderer/index.js.map +7 -0
  131. package/esm/exported-related/ItemRenderer/styled.js +56 -42
  132. package/esm/exported-related/ItemRenderer/styled.js.map +7 -0
  133. package/esm/exported-related/ItemRenderer/usePropsWithDefaults.js +27 -36
  134. package/esm/exported-related/ItemRenderer/usePropsWithDefaults.js.map +7 -0
  135. package/esm/exported-related/Notifications/index.js +57 -50
  136. package/esm/exported-related/Notifications/index.js.map +7 -0
  137. package/esm/exported-related/OpenWindowItem/index.js +20 -22
  138. package/esm/exported-related/OpenWindowItem/index.js.map +7 -0
  139. package/esm/exported-related/constants.js +24 -17
  140. package/esm/exported-related/constants.js.map +7 -0
  141. package/esm/exported-related/index.js +8 -6
  142. package/esm/exported-related/index.js.map +7 -0
  143. package/esm/hooks/index.js +5 -3
  144. package/esm/hooks/index.js.map +7 -0
  145. package/esm/hooks/useExpandableOnClickHandler.js +26 -22
  146. package/esm/hooks/useExpandableOnClickHandler.js.map +7 -0
  147. package/esm/hooks/useKeyboardNavigation.js +30 -47
  148. package/esm/hooks/useKeyboardNavigation.js.map +7 -0
  149. package/esm/hooks/useOpenableOnClickHandler.js +26 -22
  150. package/esm/hooks/useOpenableOnClickHandler.js.map +7 -0
  151. package/esm/hooks/useSelectFirstBodyItem.js +18 -30
  152. package/esm/hooks/useSelectFirstBodyItem.js.map +7 -0
  153. package/esm/index.d.js +2 -1
  154. package/esm/index.d.js.map +7 -0
  155. package/esm/index.js +12 -8
  156. package/esm/index.js.map +7 -0
  157. package/esm/outOfTheBox/ItemControlledDrilldown/index.js +62 -87
  158. package/esm/outOfTheBox/ItemControlledDrilldown/index.js.map +7 -0
  159. package/esm/outOfTheBox/ItemControlledDrilldown/styled.js +20 -17
  160. package/esm/outOfTheBox/ItemControlledDrilldown/styled.js.map +7 -0
  161. package/esm/outOfTheBox/ItemHeader/index.js +65 -82
  162. package/esm/outOfTheBox/ItemHeader/index.js.map +7 -0
  163. package/esm/outOfTheBox/ItemHeader/styled.js +20 -12
  164. package/esm/outOfTheBox/ItemHeader/styled.js.map +7 -0
  165. package/esm/outOfTheBox/ItemLink/index.js +46 -57
  166. package/esm/outOfTheBox/ItemLink/index.js.map +7 -0
  167. package/esm/outOfTheBox/ItemLink/styled.js +12 -8
  168. package/esm/outOfTheBox/ItemLink/styled.js.map +7 -0
  169. package/esm/outOfTheBox/ItemSection/index.js +30 -53
  170. package/esm/outOfTheBox/ItemSection/index.js.map +7 -0
  171. package/esm/outOfTheBox/ItemSection/styled.js +24 -13
  172. package/esm/outOfTheBox/ItemSection/styled.js.map +7 -0
  173. package/esm/outOfTheBox/ItemSeparator/index.js +27 -35
  174. package/esm/outOfTheBox/ItemSeparator/index.js.map +7 -0
  175. package/esm/outOfTheBox/ItemSubmenu/index.js +65 -81
  176. package/esm/outOfTheBox/ItemSubmenu/index.js.map +7 -0
  177. package/esm/outOfTheBox/ItemSubmenu/styled.js +20 -12
  178. package/esm/outOfTheBox/ItemSubmenu/styled.js.map +7 -0
  179. package/esm/outOfTheBox/ItemTextLabel/index.js +22 -43
  180. package/esm/outOfTheBox/ItemTextLabel/index.js.map +7 -0
  181. package/esm/outOfTheBox/ItemTextLabel/styled.js +14 -14
  182. package/esm/outOfTheBox/ItemTextLabel/styled.js.map +7 -0
  183. package/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js +70 -95
  184. package/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +7 -0
  185. package/esm/outOfTheBox/ItemUncontrolledDrilldown/styled.js +20 -17
  186. package/esm/outOfTheBox/ItemUncontrolledDrilldown/styled.js.map +7 -0
  187. package/esm/outOfTheBox/ItemWithDate/index.js +30 -44
  188. package/esm/outOfTheBox/ItemWithDate/index.js.map +7 -0
  189. package/esm/outOfTheBox/ItemWithDate/styled.js +20 -17
  190. package/esm/outOfTheBox/ItemWithDate/styled.js.map +7 -0
  191. package/esm/outOfTheBox/index.js +25 -34
  192. package/esm/outOfTheBox/index.js.map +7 -0
  193. package/esm/parts/LeftNavContent/index.js +54 -64
  194. package/esm/parts/LeftNavContent/index.js.map +7 -0
  195. package/esm/parts/LeftNavContent/styled.js +81 -36
  196. package/esm/parts/LeftNavContent/styled.js.map +7 -0
  197. package/esm/parts/LeftNavContentWithScrollbar/index.js +56 -64
  198. package/esm/parts/LeftNavContentWithScrollbar/index.js.map +7 -0
  199. package/esm/parts/LeftNavFooterItem/index.js +73 -68
  200. package/esm/parts/LeftNavFooterItem/index.js.map +7 -0
  201. package/esm/parts/LeftNavFooterItem/styled.js +63 -24
  202. package/esm/parts/LeftNavFooterItem/styled.js.map +7 -0
  203. package/esm/parts/LeftNavLoading/index.js +22 -22
  204. package/esm/parts/LeftNavLoading/index.js.map +7 -0
  205. package/esm/parts/OutOfTheBoxMapItem.js +19 -35
  206. package/esm/parts/OutOfTheBoxMapItem.js.map +7 -0
  207. package/esm/prop-types.js +26 -29
  208. package/esm/prop-types.js.map +7 -0
  209. package/package.json +6 -6
  210. package/types/LeftNavigationContext.d.ts +4 -4
  211. package/types/configs/useLeftNavSmoothExpand.d.ts +3 -3
  212. package/types/hooks/useSelectFirstBodyItem.d.ts +1 -1
  213. package/types/index.d.d.ts +2 -5
@@ -1,8 +1,7 @@
1
- import { useContext, useMemo, useCallback, useLayoutEffect } from 'react';
2
- import { CHEVRON_BACK_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../exported-related/constants.js';
3
- import { LeftNavContext } from '../LeftNavigationContext.js';
4
-
5
- /* eslint-disable max-statements */
1
+ import * as React from "react";
2
+ import { useCallback, useMemo, useLayoutEffect, useContext } from "react";
3
+ import { CHEVRON_BACK_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from "../exported-related/constants";
4
+ import LeftNavContext from "../LeftNavigationContext";
6
5
  const KEY_CODES = {
7
6
  TAB: 9,
8
7
  ENTER: 13,
@@ -14,52 +13,29 @@ const KEY_CODES = {
14
13
  END: 35,
15
14
  HOME: 36
16
15
  };
17
-
18
16
  const nextIndex = (index, length) => (index + 1) % length;
19
-
20
17
  const prevIndex = (index, length) => (index - 1 + length) % length;
21
-
22
- const useKeyboardNavigation = _ref => {
23
- let {
24
- item,
25
- onClick
26
- } = _ref;
18
+ const useKeyboardNavigation = ({ item, onClick }) => {
27
19
  const {
28
20
  dsId,
29
- itemOpts: {
30
- selectable,
31
- openable,
32
- closable
33
- }
21
+ itemOpts: { selectable, openable, closable }
34
22
  } = item;
35
- const {
36
- visibleItems,
37
- visibleItemsRefs
38
- } = useContext(LeftNavContext);
39
- const currentIndex = useMemo(() => visibleItems.findIndex(visibleItemDsId => visibleItemDsId === dsId), [dsId, visibleItems]);
40
- const {
41
- setFocusedItem,
42
- focusedItem,
43
- setSelectedItem
44
- } = useContext(LeftNavContext);
45
- const focusAndSelect = useCallback(nextDsId => {
23
+ const { visibleItems, visibleItemsRefs } = useContext(LeftNavContext);
24
+ const currentIndex = useMemo(() => visibleItems.findIndex((visibleItemDsId) => visibleItemDsId === dsId), [dsId, visibleItems]);
25
+ const { setFocusedItem, focusedItem, setSelectedItem } = useContext(LeftNavContext);
26
+ const focusAndSelect = useCallback((nextDsId) => {
46
27
  setFocusedItem(nextDsId);
47
28
  setSelectedItem(nextDsId);
48
29
  }, [setFocusedItem, setSelectedItem]);
49
30
  useLayoutEffect(() => {
50
- var _visibleItemsRefs$cur, _visibleItemsRefs$cur2;
51
-
52
- if (dsId === focusedItem) (_visibleItemsRefs$cur = visibleItemsRefs.current[dsId]) === null || _visibleItemsRefs$cur === void 0 ? void 0 : (_visibleItemsRefs$cur2 = _visibleItemsRefs$cur.current) === null || _visibleItemsRefs$cur2 === void 0 ? void 0 : _visibleItemsRefs$cur2.focus();
31
+ if (dsId === focusedItem)
32
+ visibleItemsRefs.current[dsId]?.current?.focus();
53
33
  }, [dsId, focusedItem, visibleItemsRefs]);
54
- const onKeyDown = useCallback(e => {
55
- const {
56
- keyCode
57
- } = e; // Prevent default behaviour when not tab
58
-
34
+ const onKeyDown = useCallback((e) => {
35
+ const { keyCode } = e;
59
36
  if (keyCode !== KEY_CODES.TAB) {
60
37
  e.preventDefault();
61
38
  }
62
-
63
39
  if (keyCode === KEY_CODES.ENTER || keyCode === KEY_CODES.SPACE) {
64
40
  if (selectable) {
65
41
  onClick(e);
@@ -72,35 +48,42 @@ const useKeyboardNavigation = _ref => {
72
48
  setFocusedItem(dsId);
73
49
  }
74
50
  }
75
-
76
51
  if (openable && keyCode === KEY_CODES.RIGHT_ARROW) {
77
52
  onClick(e);
78
53
  }
79
-
80
54
  if (closable && keyCode === KEY_CODES.LEFT_ARROW) {
81
55
  onClick(e);
82
56
  setFocusedItem(dsId);
83
57
  }
84
-
85
58
  if (keyCode === KEY_CODES.DOWN_ARROW) {
86
59
  const nextDsId = visibleItems[nextIndex(currentIndex, visibleItems.length)];
87
60
  setFocusedItem(nextDsId);
88
61
  }
89
-
90
62
  if (keyCode === KEY_CODES.UP_ARROW) {
91
63
  const prevDsId = visibleItems[prevIndex(currentIndex, visibleItems.length)];
92
64
  setFocusedItem(prevDsId);
93
65
  }
94
-
95
66
  if (keyCode === KEY_CODES.HOME) {
96
67
  setFocusedItem(visibleItems[0]);
97
68
  }
98
-
99
69
  if (keyCode === KEY_CODES.END) {
100
70
  setFocusedItem(visibleItems[visibleItems.length - 1]);
101
71
  }
102
- }, [openable, closable, selectable, focusedItem, onClick, focusAndSelect, dsId, setFocusedItem, visibleItems, currentIndex]);
72
+ }, [
73
+ openable,
74
+ closable,
75
+ selectable,
76
+ focusedItem,
77
+ onClick,
78
+ focusAndSelect,
79
+ dsId,
80
+ setFocusedItem,
81
+ visibleItems,
82
+ currentIndex
83
+ ]);
103
84
  return onKeyDown;
104
85
  };
105
-
106
- export { useKeyboardNavigation };
86
+ export {
87
+ useKeyboardNavigation
88
+ };
89
+ //# sourceMappingURL=useKeyboardNavigation.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 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 React, { useCallback, useMemo, useLayoutEffect, useContext } from 'react';\nimport { CHEVRON_BACK_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../exported-related/constants';\nimport { GenericItemItemProps } from '../index.d';\nimport LeftNavContext from '../LeftNavigationContext';\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: 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 (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 (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;ACGA;AACA;AAEA;AAEA,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;AAAA;AAGR,MAAM,YAAY,CAAC,OAAe,WAAoB,SAAQ,KAAK;AACnE,MAAM,YAAY,CAAC,OAAe,WAAoB,SAAQ,IAAI,UAAU;AAQrE,MAAM,wBAAwB,CAAC,EAAE,MAAM,cAAsE;AAClH,QAAM;AAAA,IACJ;AAAA,IACA,UAAU,EAAE,YAAY,UAAU;AAAA,MAChC;AAEJ,QAAM,EAAE,cAAc,qBAAqB,WAAW;AAEtD,QAAM,eAAe,QACnB,MAAM,aAAa,UAAU,CAAC,oBAAoB,oBAAoB,OACtE,CAAC,MAAM;AAGT,QAAM,EAAE,gBAAgB,aAAa,oBAAoB,WAAW;AAEpE,QAAM,iBAAiB,YACrB,CAAC,aAAqB;AACpB,mBAAe;AACf,oBAAgB;AAAA,KAElB,CAAC,gBAAgB;AAGnB,kBAAgB,MAAM;AACpB,QAAI,SAAS;AAAa,uBAAiB,QAAQ,OAAO,SAAS;AAAA,KAClE,CAAC,MAAM,aAAa;AAEvB,QAAM,YAAwC,YAC5C,CAAC,MAAM;AACL,UAAM,EAAE,YAAY;AAGpB,QAAI,YAAY,UAAU,KAAK;AAC7B,QAAE;AAAA;AAGJ,QAAI,YAAY,UAAU,SAAS,YAAY,UAAU,OAAO;AAC9D,UAAI,YAAY;AACd,gBAAQ;AACR,uBAAe;AAAA,iBACN,gBAAgB,oBAAoB;AAC7C,gBAAQ;AACR,uBAAe;AAAA,iBACN,gBAAgB,yBAAyB;AAClD,gBAAQ;AACR,uBAAe;AAAA;AAAA;AAInB,QAAI,YAAY,YAAY,UAAU,aAAa;AACjD,cAAQ;AAAA;AAGV,QAAI,YAAY,YAAY,UAAU,YAAY;AAChD,cAAQ;AACR,qBAAe;AAAA;AAGjB,QAAI,YAAY,UAAU,YAAY;AACpC,YAAM,WAAW,aAAa,UAAU,cAAc,aAAa;AACnE,qBAAe;AAAA;AAGjB,QAAI,YAAY,UAAU,UAAU;AAClC,YAAM,WAAW,aAAa,UAAU,cAAc,aAAa;AACnE,qBAAe;AAAA;AAGjB,QAAI,YAAY,UAAU,MAAM;AAC9B,qBAAe,aAAa;AAAA;AAG9B,QAAI,YAAY,UAAU,KAAK;AAC7B,qBAAe,aAAa,aAAa,SAAS;AAAA;AAAA,KAGtD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIJ,SAAO;AAAA;",
6
+ "names": []
7
+ }
@@ -1,36 +1,40 @@
1
- import { useContext, useCallback } from 'react';
2
- import { LeftNavContext } from '../LeftNavigationContext.js';
3
-
4
- const useOpenableOnClickHandler = _ref => {
5
- let {
6
- id,
7
- opened,
8
- onExpand,
9
- onOpen,
10
- onClose
11
- } = _ref;
1
+ import * as React from "react";
2
+ import { useCallback, useContext } from "react";
3
+ import LeftNavigationContext from "../LeftNavigationContext";
4
+ const useOpenableOnClickHandler = ({
5
+ id,
6
+ opened,
7
+ onExpand,
8
+ onOpen,
9
+ onClose
10
+ }) => {
12
11
  const {
13
- leftNavProps: {
14
- expanded
15
- },
12
+ leftNavProps: { expanded },
16
13
  setSelectedItem
17
- } = useContext(LeftNavContext);
18
- const handleOnExpand = useCallback(e => {
14
+ } = useContext(LeftNavigationContext);
15
+ const handleOnExpand = useCallback((e) => {
19
16
  onExpand(e);
20
17
  setSelectedItem(id);
21
18
  }, [id, onExpand, setSelectedItem]);
22
- const handleOnOpen = useCallback(e => {
19
+ const handleOnOpen = useCallback((e) => {
23
20
  onOpen(e);
24
21
  setSelectedItem(id);
25
22
  }, [id, onOpen, setSelectedItem]);
26
- const handleOnClose = useCallback(e => {
23
+ const handleOnClose = useCallback((e) => {
27
24
  onClose(e);
28
25
  setSelectedItem(id);
29
26
  }, [id, onClose, setSelectedItem]);
30
- const handleOnClick = useCallback(e => {
31
- if (!expanded) handleOnExpand(e);else if (!opened) handleOnOpen(e);else handleOnClose(e);
27
+ const handleOnClick = useCallback((e) => {
28
+ if (!expanded)
29
+ handleOnExpand(e);
30
+ else if (!opened)
31
+ handleOnOpen(e);
32
+ else
33
+ handleOnClose(e);
32
34
  }, [expanded, opened, handleOnExpand, handleOnOpen, handleOnClose]);
33
35
  return handleOnClick;
34
36
  };
35
-
36
- export { useOpenableOnClickHandler };
37
+ export {
38
+ useOpenableOnClickHandler
39
+ };
40
+ //# sourceMappingURL=useOpenableOnClickHandler.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useOpenableOnClickHandler.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useContext } from 'react';\nimport LeftNavigationContext from '../LeftNavigationContext';\n\ntype useOpenableOnClickHandlerProps = {\n id: string;\n onExpand: React.MouseEventHandler & React.KeyboardEventHandler;\n onOpen: React.MouseEventHandler & React.KeyboardEventHandler;\n onClose: React.MouseEventHandler & React.KeyboardEventHandler;\n opened: boolean;\n};\n\nexport const useOpenableOnClickHandler = ({\n id,\n opened,\n onExpand,\n onOpen,\n onClose,\n}: useOpenableOnClickHandlerProps): ((\n e: React.MouseEvent<HTMLElement>,\n) => void) => {\n const {\n leftNavProps: { expanded },\n setSelectedItem,\n } = useContext(LeftNavigationContext);\n\n const handleOnExpand = useCallback(\n (e) => {\n onExpand(e);\n setSelectedItem(id);\n },\n [id, onExpand, setSelectedItem],\n );\n\n const handleOnOpen = useCallback(\n (e) => {\n onOpen(e);\n setSelectedItem(id);\n },\n [id, onOpen, setSelectedItem],\n );\n\n const handleOnClose = useCallback(\n (e) => {\n onClose(e);\n setSelectedItem(id);\n },\n [id, onClose, setSelectedItem],\n );\n\n const handleOnClick = useCallback(\n (e) => {\n if (!expanded) handleOnExpand(e);\n else if (!opened) handleOnOpen(e);\n else handleOnClose(e);\n },\n [expanded, opened, handleOnExpand, handleOnOpen, handleOnClose],\n );\n\n return handleOnClick;\n};\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AAUO,MAAM,4BAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAGY;AACZ,QAAM;AAAA,IACJ,cAAc,EAAE;AAAA,IAChB;AAAA,MACE,WAAW;AAEf,QAAM,iBAAiB,YACrB,CAAC,MAAM;AACL,aAAS;AACT,oBAAgB;AAAA,KAElB,CAAC,IAAI,UAAU;AAGjB,QAAM,eAAe,YACnB,CAAC,MAAM;AACL,WAAO;AACP,oBAAgB;AAAA,KAElB,CAAC,IAAI,QAAQ;AAGf,QAAM,gBAAgB,YACpB,CAAC,MAAM;AACL,YAAQ;AACR,oBAAgB;AAAA,KAElB,CAAC,IAAI,SAAS;AAGhB,QAAM,gBAAgB,YACpB,CAAC,MAAM;AACL,QAAI,CAAC;AAAU,qBAAe;AAAA,aACrB,CAAC;AAAQ,mBAAa;AAAA;AAC1B,oBAAc;AAAA,KAErB,CAAC,UAAU,QAAQ,gBAAgB,cAAc;AAGnD,SAAO;AAAA;",
6
+ "names": []
7
+ }
@@ -1,35 +1,23 @@
1
- import 'core-js/modules/esnext.async-iterator.some.js';
2
- import 'core-js/modules/esnext.iterator.constructor.js';
3
- import 'core-js/modules/esnext.iterator.some.js';
4
- import { useEffect } from 'react';
5
- import { ITEM_TYPES } from '../exported-related/constants.js';
6
-
7
- const {
8
- LEFT_NAV_ITEM_SEPARATOR,
9
- LEFT_NAV_ITEM_SECTION
10
- } = ITEM_TYPES;
11
-
12
- const isSelectableOutOfTheBox = elem => typeof elem.type === 'string' && elem.type !== LEFT_NAV_ITEM_SEPARATOR && elem.type !== LEFT_NAV_ITEM_SECTION;
13
-
14
- const isSelectableCustom = elem => elem.itemOpts.selectable;
15
-
16
- const isItemInsideTheTree = (item, itemID) => {
17
- var _item$itemOpts, _item$itemOpts$items;
18
-
19
- return item.dsId === itemID || !!(item !== null && item !== void 0 && (_item$itemOpts = item.itemOpts) !== null && _item$itemOpts !== void 0 && (_item$itemOpts$items = _item$itemOpts.items) !== null && _item$itemOpts$items !== void 0 && _item$itemOpts$items.some(it => isItemInsideTheTree(it, itemID)));
20
- };
21
-
1
+ import * as React from "react";
2
+ import { useEffect } from "react";
3
+ import { ITEM_TYPES } from "../exported-related/constants";
4
+ const { LEFT_NAV_ITEM_SEPARATOR, LEFT_NAV_ITEM_SECTION } = ITEM_TYPES;
5
+ const isSelectableOutOfTheBox = (elem) => typeof elem.type === "string" && elem.type !== LEFT_NAV_ITEM_SEPARATOR && elem.type !== LEFT_NAV_ITEM_SECTION;
6
+ const isSelectableCustom = (elem) => elem.itemOpts.selectable;
7
+ const isItemInsideTheTree = (item, itemID) => item.dsId === itemID || item?.itemOpts?.items?.some((it) => isItemInsideTheTree(it, itemID));
22
8
  const useSelectFirstBodyItem = (items, openedItem, selectedItem, setSelectedItem, disableDefaultSelection) => {
23
9
  useEffect(() => {
24
10
  if (!disableDefaultSelection && items && items.length && openedItem) {
25
- var _items$index$dsId;
26
-
27
- const index = items.findIndex(elem => isSelectableOutOfTheBox(elem) || isSelectableCustom(elem));
28
- const isItemInside = items.some(it => isItemInsideTheTree(it, selectedItem));
29
- if (isItemInside) setSelectedItem(selectedItem);else if (index !== -1) setSelectedItem((_items$index$dsId = items[index].dsId) !== null && _items$index$dsId !== void 0 ? _items$index$dsId : '');
30
- } // eslint-disable-next-line react-hooks/exhaustive-deps
31
-
11
+ const index = items.findIndex((elem) => isSelectableOutOfTheBox(elem) || isSelectableCustom(elem));
12
+ const isItemInside = items.some((it) => isItemInsideTheTree(it, selectedItem));
13
+ if (isItemInside)
14
+ setSelectedItem(selectedItem);
15
+ else if (index !== -1)
16
+ setSelectedItem(items[index].dsId);
17
+ }
32
18
  }, [openedItem, setSelectedItem, disableDefaultSelection]);
33
19
  };
34
-
35
- export { useSelectFirstBodyItem };
20
+ export {
21
+ useSelectFirstBodyItem
22
+ };
23
+ //# sourceMappingURL=useSelectFirstBodyItem.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useSelectFirstBodyItem.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect } from 'react';\nimport { GenericItemItemProps } from '../index.d';\nimport { ITEM_TYPES } from '../exported-related/constants';\n\nconst { LEFT_NAV_ITEM_SEPARATOR, LEFT_NAV_ITEM_SECTION } = ITEM_TYPES;\n\nconst isSelectableOutOfTheBox = (elem: GenericItemItemProps) =>\n typeof elem.type === 'string' && elem.type !== LEFT_NAV_ITEM_SEPARATOR && elem.type !== LEFT_NAV_ITEM_SECTION;\nconst isSelectableCustom = (elem: GenericItemItemProps) => elem.itemOpts.selectable;\n\nconst isItemInsideTheTree = (item: GenericItemItemProps, itemID: string) =>\n item.dsId === itemID || item?.itemOpts?.items?.some((it) => isItemInsideTheTree(it, itemID));\n\nexport const useSelectFirstBodyItem = (\n items: GenericItemItemProps[],\n openedItem: string,\n selectedItem: string,\n setSelectedItem: React.Dispatch<React.SetStateAction<string>>,\n disableDefaultSelection: boolean,\n): void => {\n useEffect(() => {\n if (!disableDefaultSelection && items && items.length && openedItem) {\n const index = items.findIndex((elem) => isSelectableOutOfTheBox(elem) || isSelectableCustom(elem));\n const isItemInside = items.some((it) => isItemInsideTheTree(it, selectedItem));\n if (isItemInside) setSelectedItem(selectedItem);\n else if (index !== -1) setSelectedItem(items[index].dsId);\n }\n }, [openedItem, setSelectedItem, disableDefaultSelection]);\n};\n"],
5
+ "mappings": "AAAA;ACAA;AAEA;AAEA,MAAM,EAAE,yBAAyB,0BAA0B;AAE3D,MAAM,0BAA0B,CAAC,SAC/B,OAAO,KAAK,SAAS,YAAY,KAAK,SAAS,2BAA2B,KAAK,SAAS;AAC1F,MAAM,qBAAqB,CAAC,SAA+B,KAAK,SAAS;AAEzE,MAAM,sBAAsB,CAAC,MAA4B,WACvD,KAAK,SAAS,UAAU,MAAM,UAAU,OAAO,KAAK,CAAC,OAAO,oBAAoB,IAAI;AAE/E,MAAM,yBAAyB,CACpC,OACA,YACA,cACA,iBACA,4BACS;AACT,YAAU,MAAM;AACd,QAAI,CAAC,2BAA2B,SAAS,MAAM,UAAU,YAAY;AACnE,YAAM,QAAQ,MAAM,UAAU,CAAC,SAAS,wBAAwB,SAAS,mBAAmB;AAC5F,YAAM,eAAe,MAAM,KAAK,CAAC,OAAO,oBAAoB,IAAI;AAChE,UAAI;AAAc,wBAAgB;AAAA,eACzB,UAAU;AAAI,wBAAgB,MAAM,OAAO;AAAA;AAAA,KAErD,CAAC,YAAY,iBAAiB;AAAA;",
6
+ "names": []
7
+ }
package/esm/index.d.js CHANGED
@@ -1 +1,2 @@
1
-
1
+ import * as React from "react";
2
+ //# sourceMappingURL=index.d.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "AAAA;",
6
+ "names": []
7
+ }
package/esm/index.js CHANGED
@@ -1,8 +1,12 @@
1
- export { LeftNavItemOptionsSchema, LeftNavItemPropsSchema } from './prop-types.js';
2
- export { LeftNavigation, LeftNavigationWithSchema, LeftNavigation as default } from './LeftNavigation.js';
3
- export { CHEVRON_BACK_DS_ID, FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID, ITEM_TYPES, LABEL_OVERFLOW } from './exported-related/constants.js';
4
- export { ItemRenderer } from './exported-related/ItemRenderer/index.js';
5
- export { ChevronItem } from './exported-related/ChevronItem/index.js';
6
- export { Notifications } from './exported-related/Notifications/index.js';
7
- export { OpenWindow } from './exported-related/OpenWindowItem/index.js';
8
- export { Icon } from './exported-related/Icon/index.js';
1
+ import * as React from "react";
2
+ import { LeftNavItemPropsSchema, LeftNavItemOptionsSchema } from "./prop-types";
3
+ import { LeftNavigation, LeftNavigationWithSchema, LeftNavigation as LeftNavigation2 } from "./LeftNavigation";
4
+ export * from "./exported-related";
5
+ export {
6
+ LeftNavItemOptionsSchema,
7
+ LeftNavItemPropsSchema,
8
+ LeftNavigation,
9
+ LeftNavigationWithSchema,
10
+ LeftNavigation2 as default
11
+ };
12
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { LeftNavItemPropsSchema, LeftNavItemOptionsSchema } from './prop-types';\nexport { LeftNavigation, LeftNavigationWithSchema, LeftNavigation as default } from './LeftNavigation';\nexport * from './exported-related';\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AACA;",
6
+ "names": []
7
+ }
@@ -1,70 +1,42 @@
1
- import 'core-js/modules/esnext.async-iterator.filter.js';
2
- import 'core-js/modules/esnext.iterator.constructor.js';
3
- import 'core-js/modules/esnext.iterator.filter.js';
4
- import 'core-js/modules/esnext.async-iterator.for-each.js';
5
- import 'core-js/modules/esnext.iterator.for-each.js';
6
- import _jsx from '@babel/runtime/helpers/esm/jsx';
7
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
8
- import 'core-js/modules/esnext.async-iterator.map.js';
9
- import 'core-js/modules/esnext.iterator.map.js';
10
- import { useMemo } from 'react';
11
- import Grid from '@elliemae/ds-grid';
12
- import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
13
- import { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';
14
- import { ITEM_TYPES } from '../../exported-related/constants.js';
15
- import { ItemRenderer } from '../../exported-related/ItemRenderer/index.js';
16
- import 'react/jsx-runtime';
17
- import 'styled-components';
18
- import { StyledLabel, StyledDate } from './styled.js';
19
- import { ItemSeparator } from '../ItemSeparator/index.js';
20
- import { ItemWithDate } from '../ItemWithDate/index.js';
21
- import { ItemTextLabel } from '../ItemTextLabel/index.js';
22
-
23
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
24
-
25
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
1
+ import * as React from "react";
2
+ import React2, { useMemo } from "react";
3
+ import Grid from "@elliemae/ds-grid";
4
+ import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
5
+ import { ArrowheadDown, ArrowheadRight } from "@elliemae/ds-icons";
6
+ import { ItemRenderer, ITEM_TYPES } from "../../exported-related/index";
7
+ import { StyledLabel, StyledDate } from "./styled";
8
+ import { ItemSeparator } from "../ItemSeparator";
9
+ import { ItemWithDate } from "../ItemWithDate";
10
+ import { ItemTextLabel } from "../ItemTextLabel";
26
11
  const outOfTheBoxSubitemsComponents = {
27
12
  [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,
28
13
  [ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,
29
14
  [ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel
30
15
  };
31
-
32
- const OutOfTheBoxMapSubitem = props => {
16
+ const OutOfTheBoxMapSubitem = (props) => {
33
17
  const {
34
18
  item,
35
- item: {
36
- type,
37
- Component
38
- },
19
+ item: { type, Component },
39
20
  ctx
40
21
  } = props;
41
-
42
- if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {
43
- var _item$itemOpts$indent, _item$itemOpts;
44
-
22
+ if (typeof type === "string" && !!outOfTheBoxSubitemsComponents[type]) {
45
23
  const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];
46
- const currentIndent = (_item$itemOpts$indent = (_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : _item$itemOpts.indent) !== null && _item$itemOpts$indent !== void 0 ? _item$itemOpts$indent : 0;
47
-
48
- const newItem = _objectSpread(_objectSpread({}, item), {}, {
49
- itemOpts: _objectSpread(_objectSpread({}, item.itemOpts), {}, {
50
- indent: currentIndent + 44
51
- })
52
- });
53
-
54
- return /*#__PURE__*/_jsx(OutOfTheBoxComponent, {
24
+ const currentIndent = item.itemOpts?.indent ?? 0;
25
+ const newItem = {
26
+ ...item,
27
+ itemOpts: { ...item.itemOpts, indent: currentIndent + 44 }
28
+ };
29
+ return /* @__PURE__ */ React2.createElement(OutOfTheBoxComponent, {
55
30
  item: newItem,
56
- ctx: ctx
31
+ ctx
57
32
  });
58
- } // we expect an error to be threw if Component is not defined and type is not a valid out-of-the-box...
59
-
60
-
61
- return /*#__PURE__*/_jsx(Component, {
62
- item: item,
63
- ctx: ctx
33
+ }
34
+ return /* @__PURE__ */ React2.createElement(Component, {
35
+ item,
36
+ ctx
64
37
  });
65
38
  };
66
-
67
- const ItemControlledDrilldown = props => {
39
+ const ItemControlledDrilldown = (props) => {
68
40
  const {
69
41
  item,
70
42
  item: {
@@ -82,67 +54,70 @@ const ItemControlledDrilldown = props => {
82
54
  },
83
55
  ctx,
84
56
  ctx: {
85
- leftNavProps: {
86
- labelOverflow: leftNavLabelOverflow
87
- }
57
+ leftNavProps: { labelOverflow: leftNavLabelOverflow }
88
58
  }
89
59
  } = props;
90
60
  const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
91
61
  const arrowIcon = useMemo(() => {
92
62
  const Component = isOpened ? ArrowheadDown : ArrowheadRight;
93
- return /*#__PURE__*/_jsx(Component, {
63
+ return /* @__PURE__ */ React2.createElement(Component, {
94
64
  width: "24px",
95
65
  height: "18px",
96
- color: ['brand-primary', '800']
66
+ color: ["brand-primary", "800"]
97
67
  });
98
68
  }, [isOpened]);
99
69
  const subitems = useMemo(() => {
100
- if (!isOpened || !items) return [];
101
- return items.map(subitem => /*#__PURE__*/_jsx(OutOfTheBoxMapSubitem, {
70
+ if (!isOpened || !items)
71
+ return [];
72
+ return items.map((subitem) => /* @__PURE__ */ React2.createElement(OutOfTheBoxMapSubitem, {
102
73
  item: subitem,
103
- ctx: ctx
104
- }, subitem.dsId));
74
+ ctx,
75
+ key: subitem.dsId
76
+ }));
105
77
  }, [items, isOpened]);
106
- return /*#__PURE__*/_jsx(ItemRenderer, {
107
- item: _objectSpread(_objectSpread({}, item), {}, {
108
- itemOpts: _objectSpread(_objectSpread({
78
+ return /* @__PURE__ */ React2.createElement(ItemRenderer, {
79
+ item: {
80
+ ...item,
81
+ itemOpts: {
109
82
  ariaExpanded: isOpened,
110
- ariaRole: 'menuitem'
111
- }, item.itemOpts), {}, {
83
+ ariaRole: "menuitem",
84
+ ...item.itemOpts,
112
85
  openable: !isOpened,
113
86
  closable: isOpened
114
- }),
87
+ },
115
88
  CollapsedComponent: null
116
- }),
117
- subitems: subitems,
89
+ },
90
+ subitems,
118
91
  minHeight: "32px",
119
92
  paddingTop: "8px"
120
- }, void 0, /*#__PURE__*/_jsx(Grid, {
93
+ }, /* @__PURE__ */ React2.createElement(Grid, {
121
94
  pl: "xxs",
122
95
  mt: "-2px"
123
- }, void 0, arrowIcon), /*#__PURE__*/_jsx(StyledLabel, {
96
+ }, arrowIcon), /* @__PURE__ */ React2.createElement(StyledLabel, {
124
97
  pb: "xxxs",
125
- "data-testid": labelDataTestId || 'leftnav-list-item-label',
126
- labelOverflow: labelOverflow,
127
- labelBold: labelBold,
128
- labelColor: labelColor
129
- }, void 0, labelOverflow === 'truncate' ? /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
98
+ "data-testid": labelDataTestId || "leftnav-list-item-label",
99
+ labelOverflow,
100
+ labelBold,
101
+ labelColor
102
+ }, labelOverflow === "truncate" ? /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
130
103
  value: label,
131
104
  placement: "bottom-start"
132
- }) : label), /*#__PURE__*/_jsx(Grid, {
105
+ }) : label), /* @__PURE__ */ React2.createElement(Grid, {
133
106
  pr: "xxs2",
134
- cols: ['auto', 'auto'],
107
+ cols: ["auto", "auto"],
135
108
  alignItems: "center"
136
- }, void 0, /*#__PURE__*/_jsx(StyledDate, {
109
+ }, /* @__PURE__ */ React2.createElement(StyledDate, {
137
110
  ml: "xxs",
138
111
  "data-testid": "leftnav-list-item-date"
139
- }, void 0, labelRightSection), /*#__PURE__*/_jsx(Grid, {
140
- pl: RightComponent ? 'xxs' : '0px',
112
+ }, labelRightSection), /* @__PURE__ */ React2.createElement(Grid, {
113
+ pl: RightComponent ? "xxs" : "0px",
141
114
  "data-testid": "leftnav-right-component"
142
- }, void 0, RightComponent && /*#__PURE__*/_jsx(RightComponent, {
143
- ctx: ctx,
144
- item: item
115
+ }, RightComponent && /* @__PURE__ */ React2.createElement(RightComponent, {
116
+ ctx,
117
+ item
145
118
  }))));
146
119
  };
147
-
148
- export { ItemControlledDrilldown };
120
+ export {
121
+ ItemControlledDrilldown
122
+ };
123
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemControlledDrilldown/index.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport Grid from '@elliemae/ds-grid';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { ItemRenderer, ITEM_TYPES } from '../../exported-related/index';\nimport { StyledLabel, StyledDate } from './styled';\nimport { ItemSeparator } from '../ItemSeparator';\nimport { ItemWithDate } from '../ItemWithDate';\nimport { ItemTextLabel } from '../ItemTextLabel';\nimport type { ComponentProps } from '../../index.d';\n\nconst outOfTheBoxSubitemsComponents: Record<string, React.ComponentType<ComponentProps>> = {\n [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,\n [ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,\n [ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel,\n};\n\nconst OutOfTheBoxMapSubitem = (props: ComponentProps): JSX.Element => {\n const {\n item,\n item: { type, Component },\n ctx,\n } = props;\n\n if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {\n const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];\n const currentIndent = item.itemOpts?.indent ?? 0;\n const newItem = {\n ...item,\n itemOpts: { ...item.itemOpts, indent: currentIndent + 44 },\n };\n return <OutOfTheBoxComponent item={newItem} ctx={ctx} />;\n }\n // we expect an error to be threw if Component is not defined and type is not a valid out-of-the-box...\n return <Component item={item} ctx={ctx} />;\n};\n\nexport const ItemControlledDrilldown = (props: ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n itemOpts: {\n label,\n RightComponent,\n labelRightSection,\n labelOverflow: itemLabelOverflow,\n labelBold,\n labelColor,\n isOpened,\n items,\n labelDataTestId,\n },\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n const arrowIcon = useMemo(() => {\n const Component = isOpened ? ArrowheadDown : ArrowheadRight;\n return <Component width=\"24px\" height=\"18px\" color={['brand-primary', '800']} />;\n }, [isOpened]);\n\n const subitems = useMemo(() => {\n if (!isOpened || !items) return [];\n return items.map((subitem) => <OutOfTheBoxMapSubitem item={subitem} ctx={ctx} key={subitem.dsId} />);\n }, [items, isOpened]);\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ariaExpanded: isOpened,\n ariaRole: 'menuitem',\n ...item.itemOpts,\n openable: !isOpened,\n closable: isOpened,\n },\n CollapsedComponent: null,\n }}\n subitems={subitems}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n <Grid pl=\"xxs\" mt=\"-2px\">\n {arrowIcon}\n </Grid>\n <StyledLabel\n pb=\"xxxs\"\n data-testid={labelDataTestId || 'leftnav-list-item-label'}\n labelOverflow={labelOverflow}\n labelBold={labelBold}\n labelColor={labelColor}\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledLabel>\n <Grid pr=\"xxs2\" cols={['auto', 'auto']} alignItems=\"center\">\n <StyledDate ml=\"xxs\" data-testid=\"leftnav-list-item-date\">\n {labelRightSection}\n </StyledDate>\n <Grid pl={RightComponent ? 'xxs' : '0px'} data-testid=\"leftnav-right-component\">\n {RightComponent && <RightComponent ctx={ctx} item={item} />}\n </Grid>\n </Grid>\n </ItemRenderer>\n );\n};\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,gCAAqF;AAAA,GACxF,WAAW,0BAA0B;AAAA,GACrC,WAAW,0BAA0B;AAAA,GACrC,WAAW,2BAA2B;AAAA;AAGzC,MAAM,wBAAwB,CAAC,UAAuC;AACpE,QAAM;AAAA,IACJ;AAAA,IACA,MAAM,EAAE,MAAM;AAAA,IACd;AAAA,MACE;AAEJ,MAAI,OAAO,SAAS,YAAY,CAAC,CAAC,8BAA8B,OAAO;AACrE,UAAM,uBAAuB,8BAA8B;AAC3D,UAAM,gBAAgB,KAAK,UAAU,UAAU;AAC/C,UAAM,UAAU;AAAA,SACX;AAAA,MACH,UAAU,KAAK,KAAK,UAAU,QAAQ,gBAAgB;AAAA;AAExD,WAAO,qCAAC,sBAAD;AAAA,MAAsB,MAAM;AAAA,MAAS;AAAA;AAAA;AAG9C,SAAO,qCAAC,WAAD;AAAA,IAAW;AAAA,IAAY;AAAA;AAAA;AAGzB,MAAM,0BAA0B,CAAC,UAAuC;AAC7E,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA;AAAA,IAGJ;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe;AAAA;AAAA,MAE/B;AAEJ,QAAM,gBAAgB,qBAAqB;AAE3C,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,YAAY,WAAW,gBAAgB;AAC7C,WAAO,qCAAC,WAAD;AAAA,MAAW,OAAM;AAAA,MAAO,QAAO;AAAA,MAAO,OAAO,CAAC,iBAAiB;AAAA;AAAA,KACrE,CAAC;AAEJ,QAAM,WAAW,QAAQ,MAAM;AAC7B,QAAI,CAAC,YAAY,CAAC;AAAO,aAAO;AAChC,WAAO,MAAM,IAAI,CAAC,YAAY,qCAAC,uBAAD;AAAA,MAAuB,MAAM;AAAA,MAAS;AAAA,MAAU,KAAK,QAAQ;AAAA;AAAA,KAC1F,CAAC,OAAO;AAEX,SACE,qCAAC,cAAD;AAAA,IACE,MAAM;AAAA,SACD;AAAA,MACH,UAAU;AAAA,QACR,cAAc;AAAA,QACd,UAAU;AAAA,WACP,KAAK;AAAA,QACR,UAAU,CAAC;AAAA,QACX,UAAU;AAAA;AAAA,MAEZ,oBAAoB;AAAA;AAAA,IAEtB;AAAA,IACA,WAAU;AAAA,IACV,YAAW;AAAA,KAEX,qCAAC,MAAD;AAAA,IAAM,IAAG;AAAA,IAAM,IAAG;AAAA,KACf,YAEH,qCAAC,aAAD;AAAA,IACE,IAAG;AAAA,IACH,eAAa,mBAAmB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,KAEC,kBAAkB,aAAa,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA,IAAO,WAAU;AAAA,OAAoB,QAE1G,qCAAC,MAAD;AAAA,IAAM,IAAG;AAAA,IAAO,MAAM,CAAC,QAAQ;AAAA,IAAS,YAAW;AAAA,KACjD,qCAAC,YAAD;AAAA,IAAY,IAAG;AAAA,IAAM,eAAY;AAAA,KAC9B,oBAEH,qCAAC,MAAD;AAAA,IAAM,IAAI,iBAAiB,QAAQ;AAAA,IAAO,eAAY;AAAA,KACnD,kBAAkB,qCAAC,gBAAD;AAAA,IAAgB;AAAA,IAAU;AAAA;AAAA;",
6
+ "names": []
7
+ }
@@ -1,17 +1,20 @@
1
- import styled from 'styled-components';
2
- import Grid from '@elliemae/ds-grid';
3
-
4
- const StyledLabel = /*#__PURE__*/styled(Grid).withConfig({
5
- componentId: "sc-1tjij7e-0"
6
- })(["font-size:13px;font-weight:", ";color:", ";line-height:14px;word-break:", ";"], props => props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular, _ref => {
7
- let {
8
- labelColor,
9
- theme
10
- } = _ref;
11
- return labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800];
12
- }, props => props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal');
13
- const StyledDate = /*#__PURE__*/styled(Grid).withConfig({
14
- componentId: "sc-1tjij7e-1"
15
- })(["font-size:12px;color:", ";line-height:14px;"], props => props.theme.colors.neutral[600]);
16
-
17
- export { StyledDate, StyledLabel };
1
+ import * as React from "react";
2
+ import styled from "styled-components";
3
+ import Grid from "@elliemae/ds-grid";
4
+ const StyledLabel = styled(Grid)`
5
+ font-size: 13px;
6
+ font-weight: ${(props) => props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular};
7
+ color: ${({ labelColor, theme }) => labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800]};
8
+ line-height: 14px;
9
+ word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
10
+ `;
11
+ const StyledDate = styled(Grid)`
12
+ font-size: 12px;
13
+ color: ${(props) => props.theme.colors.neutral[600]};
14
+ line-height: 14px;
15
+ `;
16
+ export {
17
+ StyledDate,
18
+ StyledLabel
19
+ };
20
+ //# sourceMappingURL=styled.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemControlledDrilldown/styled.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport Grid from '@elliemae/ds-grid';\n\nexport const StyledLabel = styled(Grid)<{ labelBold: boolean }>`\n font-size: 13px;\n font-weight: ${(props) =>\n props.labelBold\n ? props.theme.fontWeights.semibold\n : props.theme.fontWeights.regular};\n color: ${({ labelColor, theme }) =>\n labelColor\n ? theme.colors[labelColor[0]][labelColor[1]]\n : theme.colors.neutral[800]};\n line-height: 14px;\n word-break: ${(props) =>\n props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal'};\n`;\n\nexport const StyledDate = styled(Grid)`\n font-size: 12px;\n color: ${(props) => props.theme.colors.neutral[600]};\n line-height: 14px;\n`;\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,cAAc,OAAO;AAAA;AAAA,iBAEjB,CAAC,UACd,MAAM,YACF,MAAM,MAAM,YAAY,WACxB,MAAM,MAAM,YAAY;AAAA,WACrB,CAAC,EAAE,YAAY,YACtB,aACI,MAAM,OAAO,WAAW,IAAI,WAAW,MACvC,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAEb,CAAC,UACb,MAAM,kBAAkB,YAAY,cAAc;AAAA;AAG/C,MAAM,aAAa,OAAO;AAAA;AAAA,WAEtB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;",
6
+ "names": []
7
+ }