@elliemae/ds-left-navigation 2.2.0-alpha.3 → 3.0.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (213) hide show
  1. package/cjs/LeftNavigation.js +27 -49
  2. package/cjs/LeftNavigationContext.js +18 -44
  3. package/cjs/common/getItemBackgroundStyle.js +8 -47
  4. package/cjs/common/getLeftBorderStyle.js +8 -50
  5. package/cjs/common/getScrollbarStyle.js +4 -55
  6. package/cjs/common/index.js +13 -30
  7. package/cjs/configs/index.js +10 -38
  8. package/cjs/configs/useLeftNavConfig.js +76 -76
  9. package/cjs/configs/useLeftNavItems.js +64 -66
  10. package/cjs/configs/useLeftNavSmoothExpand.js +25 -43
  11. package/cjs/exported-related/ChevronItem/index.js +27 -42
  12. package/cjs/exported-related/Icon/index.js +34 -51
  13. package/cjs/exported-related/ItemRenderer/index.js +94 -99
  14. package/cjs/exported-related/ItemRenderer/styled.js +51 -83
  15. package/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js +45 -57
  16. package/cjs/exported-related/Notifications/index.js +61 -81
  17. package/cjs/exported-related/OpenWindowItem/index.js +32 -49
  18. package/cjs/exported-related/constants.js +25 -53
  19. package/cjs/exported-related/index.js +23 -33
  20. package/cjs/hooks/index.js +13 -30
  21. package/cjs/hooks/useExpandableOnClickHandler.js +26 -55
  22. package/cjs/hooks/useKeyboardNavigation.js +54 -62
  23. package/cjs/hooks/useOpenableOnClickHandler.js +26 -55
  24. package/cjs/hooks/useSelectFirstBodyItem.js +34 -47
  25. package/cjs/index.d.js +2 -27
  26. package/cjs/index.js +30 -41
  27. package/cjs/outOfTheBox/ItemControlledDrilldown/index.js +103 -97
  28. package/cjs/outOfTheBox/ItemControlledDrilldown/styled.js +27 -49
  29. package/cjs/outOfTheBox/ItemHeader/index.js +93 -95
  30. package/cjs/outOfTheBox/ItemHeader/styled.js +22 -49
  31. package/cjs/outOfTheBox/ItemLink/index.js +67 -75
  32. package/cjs/outOfTheBox/ItemLink/styled.js +17 -41
  33. package/cjs/outOfTheBox/ItemSection/index.js +63 -59
  34. package/cjs/outOfTheBox/ItemSection/styled.js +23 -53
  35. package/cjs/outOfTheBox/ItemSeparator/index.js +45 -56
  36. package/cjs/outOfTheBox/ItemSubmenu/index.js +92 -95
  37. package/cjs/outOfTheBox/ItemSubmenu/styled.js +22 -49
  38. package/cjs/outOfTheBox/ItemTextLabel/index.js +52 -51
  39. package/cjs/outOfTheBox/ItemTextLabel/styled.js +23 -43
  40. package/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js +113 -107
  41. package/cjs/outOfTheBox/ItemUncontrolledDrilldown/styled.js +27 -49
  42. package/cjs/outOfTheBox/ItemWithDate/index.js +54 -59
  43. package/cjs/outOfTheBox/ItemWithDate/styled.js +27 -49
  44. package/cjs/outOfTheBox/index.js +50 -65
  45. package/cjs/parts/LeftNavContent/index.js +71 -75
  46. package/cjs/parts/LeftNavContent/styled.js +50 -110
  47. package/cjs/parts/LeftNavContentWithScrollbar/index.js +79 -89
  48. package/cjs/parts/LeftNavFooterItem/index.js +80 -97
  49. package/cjs/parts/LeftNavFooterItem/styled.js +34 -89
  50. package/cjs/parts/LeftNavLoading/index.js +33 -51
  51. package/cjs/parts/OutOfTheBoxMapItem.js +46 -49
  52. package/cjs/prop-types.js +39 -58
  53. package/esm/LeftNavigation.js +15 -17
  54. package/esm/LeftNavigationContext.js +11 -15
  55. package/esm/common/getItemBackgroundStyle.js +6 -20
  56. package/esm/common/getLeftBorderStyle.js +6 -23
  57. package/esm/common/getScrollbarStyle.js +2 -28
  58. package/esm/common/index.js +3 -5
  59. package/esm/configs/index.js +2 -9
  60. package/esm/configs/useLeftNavConfig.js +67 -47
  61. package/esm/configs/useLeftNavItems.js +55 -33
  62. package/esm/configs/useLeftNavSmoothExpand.js +16 -14
  63. package/esm/exported-related/ChevronItem/index.js +18 -13
  64. package/esm/exported-related/Icon/index.js +24 -21
  65. package/esm/exported-related/ItemRenderer/index.js +80 -65
  66. package/esm/exported-related/ItemRenderer/styled.js +42 -56
  67. package/esm/exported-related/ItemRenderer/usePropsWithDefaults.js +36 -27
  68. package/esm/exported-related/Notifications/index.js +50 -57
  69. package/esm/exported-related/OpenWindowItem/index.js +22 -20
  70. package/esm/exported-related/constants.js +17 -24
  71. package/esm/exported-related/index.js +6 -8
  72. package/esm/hooks/index.js +3 -5
  73. package/esm/hooks/useExpandableOnClickHandler.js +22 -26
  74. package/esm/hooks/useKeyboardNavigation.js +47 -30
  75. package/esm/hooks/useOpenableOnClickHandler.js +22 -26
  76. package/esm/hooks/useSelectFirstBodyItem.js +30 -18
  77. package/esm/index.d.js +1 -2
  78. package/esm/index.js +8 -12
  79. package/esm/outOfTheBox/ItemControlledDrilldown/index.js +87 -62
  80. package/esm/outOfTheBox/ItemControlledDrilldown/styled.js +17 -20
  81. package/esm/outOfTheBox/ItemHeader/index.js +82 -65
  82. package/esm/outOfTheBox/ItemHeader/styled.js +12 -20
  83. package/esm/outOfTheBox/ItemLink/index.js +57 -46
  84. package/esm/outOfTheBox/ItemLink/styled.js +8 -12
  85. package/esm/outOfTheBox/ItemSection/index.js +53 -30
  86. package/esm/outOfTheBox/ItemSection/styled.js +13 -24
  87. package/esm/outOfTheBox/ItemSeparator/index.js +35 -27
  88. package/esm/outOfTheBox/ItemSubmenu/index.js +81 -65
  89. package/esm/outOfTheBox/ItemSubmenu/styled.js +12 -20
  90. package/esm/outOfTheBox/ItemTextLabel/index.js +43 -22
  91. package/esm/outOfTheBox/ItemTextLabel/styled.js +14 -14
  92. package/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js +95 -70
  93. package/esm/outOfTheBox/ItemUncontrolledDrilldown/styled.js +17 -20
  94. package/esm/outOfTheBox/ItemWithDate/index.js +44 -30
  95. package/esm/outOfTheBox/ItemWithDate/styled.js +17 -20
  96. package/esm/outOfTheBox/index.js +34 -25
  97. package/esm/parts/LeftNavContent/index.js +64 -54
  98. package/esm/parts/LeftNavContent/styled.js +36 -81
  99. package/esm/parts/LeftNavContentWithScrollbar/index.js +64 -56
  100. package/esm/parts/LeftNavFooterItem/index.js +68 -73
  101. package/esm/parts/LeftNavFooterItem/styled.js +24 -63
  102. package/esm/parts/LeftNavLoading/index.js +22 -22
  103. package/esm/parts/OutOfTheBoxMapItem.js +35 -19
  104. package/esm/prop-types.js +29 -26
  105. package/package.json +6 -6
  106. package/types/LeftNavigationContext.d.ts +4 -4
  107. package/types/configs/useLeftNavSmoothExpand.d.ts +3 -3
  108. package/types/hooks/useSelectFirstBodyItem.d.ts +1 -1
  109. package/types/index.d.d.ts +5 -2
  110. package/cjs/LeftNavigation.js.map +0 -7
  111. package/cjs/LeftNavigationContext.js.map +0 -7
  112. package/cjs/common/getItemBackgroundStyle.js.map +0 -7
  113. package/cjs/common/getLeftBorderStyle.js.map +0 -7
  114. package/cjs/common/getScrollbarStyle.js.map +0 -7
  115. package/cjs/common/index.js.map +0 -7
  116. package/cjs/configs/index.js.map +0 -7
  117. package/cjs/configs/useLeftNavConfig.js.map +0 -7
  118. package/cjs/configs/useLeftNavItems.js.map +0 -7
  119. package/cjs/configs/useLeftNavSmoothExpand.js.map +0 -7
  120. package/cjs/exported-related/ChevronItem/index.js.map +0 -7
  121. package/cjs/exported-related/Icon/index.js.map +0 -7
  122. package/cjs/exported-related/ItemRenderer/index.js.map +0 -7
  123. package/cjs/exported-related/ItemRenderer/styled.js.map +0 -7
  124. package/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js.map +0 -7
  125. package/cjs/exported-related/Notifications/index.js.map +0 -7
  126. package/cjs/exported-related/OpenWindowItem/index.js.map +0 -7
  127. package/cjs/exported-related/constants.js.map +0 -7
  128. package/cjs/exported-related/index.js.map +0 -7
  129. package/cjs/hooks/index.js.map +0 -7
  130. package/cjs/hooks/useExpandableOnClickHandler.js.map +0 -7
  131. package/cjs/hooks/useKeyboardNavigation.js.map +0 -7
  132. package/cjs/hooks/useOpenableOnClickHandler.js.map +0 -7
  133. package/cjs/hooks/useSelectFirstBodyItem.js.map +0 -7
  134. package/cjs/index.d.js.map +0 -7
  135. package/cjs/index.js.map +0 -7
  136. package/cjs/outOfTheBox/ItemControlledDrilldown/index.js.map +0 -7
  137. package/cjs/outOfTheBox/ItemControlledDrilldown/styled.js.map +0 -7
  138. package/cjs/outOfTheBox/ItemHeader/index.js.map +0 -7
  139. package/cjs/outOfTheBox/ItemHeader/styled.js.map +0 -7
  140. package/cjs/outOfTheBox/ItemLink/index.js.map +0 -7
  141. package/cjs/outOfTheBox/ItemLink/styled.js.map +0 -7
  142. package/cjs/outOfTheBox/ItemSection/index.js.map +0 -7
  143. package/cjs/outOfTheBox/ItemSection/styled.js.map +0 -7
  144. package/cjs/outOfTheBox/ItemSeparator/index.js.map +0 -7
  145. package/cjs/outOfTheBox/ItemSubmenu/index.js.map +0 -7
  146. package/cjs/outOfTheBox/ItemSubmenu/styled.js.map +0 -7
  147. package/cjs/outOfTheBox/ItemTextLabel/index.js.map +0 -7
  148. package/cjs/outOfTheBox/ItemTextLabel/styled.js.map +0 -7
  149. package/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +0 -7
  150. package/cjs/outOfTheBox/ItemUncontrolledDrilldown/styled.js.map +0 -7
  151. package/cjs/outOfTheBox/ItemWithDate/index.js.map +0 -7
  152. package/cjs/outOfTheBox/ItemWithDate/styled.js.map +0 -7
  153. package/cjs/outOfTheBox/index.js.map +0 -7
  154. package/cjs/parts/LeftNavContent/index.js.map +0 -7
  155. package/cjs/parts/LeftNavContent/styled.js.map +0 -7
  156. package/cjs/parts/LeftNavContentWithScrollbar/index.js.map +0 -7
  157. package/cjs/parts/LeftNavFooterItem/index.js.map +0 -7
  158. package/cjs/parts/LeftNavFooterItem/styled.js.map +0 -7
  159. package/cjs/parts/LeftNavLoading/index.js.map +0 -7
  160. package/cjs/parts/OutOfTheBoxMapItem.js.map +0 -7
  161. package/cjs/prop-types.js.map +0 -7
  162. package/esm/LeftNavigation.js.map +0 -7
  163. package/esm/LeftNavigationContext.js.map +0 -7
  164. package/esm/common/getItemBackgroundStyle.js.map +0 -7
  165. package/esm/common/getLeftBorderStyle.js.map +0 -7
  166. package/esm/common/getScrollbarStyle.js.map +0 -7
  167. package/esm/common/index.js.map +0 -7
  168. package/esm/configs/index.js.map +0 -7
  169. package/esm/configs/useLeftNavConfig.js.map +0 -7
  170. package/esm/configs/useLeftNavItems.js.map +0 -7
  171. package/esm/configs/useLeftNavSmoothExpand.js.map +0 -7
  172. package/esm/exported-related/ChevronItem/index.js.map +0 -7
  173. package/esm/exported-related/Icon/index.js.map +0 -7
  174. package/esm/exported-related/ItemRenderer/index.js.map +0 -7
  175. package/esm/exported-related/ItemRenderer/styled.js.map +0 -7
  176. package/esm/exported-related/ItemRenderer/usePropsWithDefaults.js.map +0 -7
  177. package/esm/exported-related/Notifications/index.js.map +0 -7
  178. package/esm/exported-related/OpenWindowItem/index.js.map +0 -7
  179. package/esm/exported-related/constants.js.map +0 -7
  180. package/esm/exported-related/index.js.map +0 -7
  181. package/esm/hooks/index.js.map +0 -7
  182. package/esm/hooks/useExpandableOnClickHandler.js.map +0 -7
  183. package/esm/hooks/useKeyboardNavigation.js.map +0 -7
  184. package/esm/hooks/useOpenableOnClickHandler.js.map +0 -7
  185. package/esm/hooks/useSelectFirstBodyItem.js.map +0 -7
  186. package/esm/index.d.js.map +0 -7
  187. package/esm/index.js.map +0 -7
  188. package/esm/outOfTheBox/ItemControlledDrilldown/index.js.map +0 -7
  189. package/esm/outOfTheBox/ItemControlledDrilldown/styled.js.map +0 -7
  190. package/esm/outOfTheBox/ItemHeader/index.js.map +0 -7
  191. package/esm/outOfTheBox/ItemHeader/styled.js.map +0 -7
  192. package/esm/outOfTheBox/ItemLink/index.js.map +0 -7
  193. package/esm/outOfTheBox/ItemLink/styled.js.map +0 -7
  194. package/esm/outOfTheBox/ItemSection/index.js.map +0 -7
  195. package/esm/outOfTheBox/ItemSection/styled.js.map +0 -7
  196. package/esm/outOfTheBox/ItemSeparator/index.js.map +0 -7
  197. package/esm/outOfTheBox/ItemSubmenu/index.js.map +0 -7
  198. package/esm/outOfTheBox/ItemSubmenu/styled.js.map +0 -7
  199. package/esm/outOfTheBox/ItemTextLabel/index.js.map +0 -7
  200. package/esm/outOfTheBox/ItemTextLabel/styled.js.map +0 -7
  201. package/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +0 -7
  202. package/esm/outOfTheBox/ItemUncontrolledDrilldown/styled.js.map +0 -7
  203. package/esm/outOfTheBox/ItemWithDate/index.js.map +0 -7
  204. package/esm/outOfTheBox/ItemWithDate/styled.js.map +0 -7
  205. package/esm/outOfTheBox/index.js.map +0 -7
  206. package/esm/parts/LeftNavContent/index.js.map +0 -7
  207. package/esm/parts/LeftNavContent/styled.js.map +0 -7
  208. package/esm/parts/LeftNavContentWithScrollbar/index.js.map +0 -7
  209. package/esm/parts/LeftNavFooterItem/index.js.map +0 -7
  210. package/esm/parts/LeftNavFooterItem/styled.js.map +0 -7
  211. package/esm/parts/LeftNavLoading/index.js.map +0 -7
  212. package/esm/parts/OutOfTheBoxMapItem.js.map +0 -7
  213. package/esm/prop-types.js.map +0 -7
@@ -1,58 +1,51 @@
1
- import * as React from "react";
2
- import React2 from "react";
3
- import {
4
- AlertsSmallFill,
5
- Notifications as InternalNotifications,
6
- ExceptionsSmallFill,
7
- MessagesSmallFill
8
- } from "@elliemae/ds-icons";
9
- import styled from "styled-components";
10
- import Grid from "@elliemae/ds-grid";
11
- const StyledIcon = styled.div`
12
- display: flex;
13
- flex-direction: column;
14
- align-items: center;
15
- `;
16
- const Notifications = ({
17
- exceptions = false,
18
- alerts = false,
19
- messages = false
20
- }) => /* @__PURE__ */ React2.createElement(StyledIcon, null, /* @__PURE__ */ React2.createElement(InternalNotifications, {
21
- size: "m",
22
- color: ["brand-primary", 800],
23
- "data-testid": "left-nav-notifications-icon"
24
- }), (exceptions || alerts || messages) && /* @__PURE__ */ React2.createElement(Grid, {
25
- cols: ["1fr", "1fr", "1fr"],
26
- gutter: "xxxs",
27
- mt: "2px"
28
- }, /* @__PURE__ */ React2.createElement(Grid, {
29
- width: "6px",
30
- height: "6px",
31
- "data-testid": "left-nav-exceptions-icon"
32
- }, exceptions && /* @__PURE__ */ React2.createElement(ExceptionsSmallFill, {
33
- width: "6px",
34
- height: "6px",
35
- color: ["warning", 900]
36
- })), /* @__PURE__ */ React2.createElement(Grid, {
37
- width: "6px",
38
- height: "6px",
39
- "data-testid": "left-nav-alerts-icon"
40
- }, alerts && /* @__PURE__ */ React2.createElement(AlertsSmallFill, {
41
- width: "6px",
42
- height: "6px",
43
- color: ["danger", 900]
44
- })), /* @__PURE__ */ React2.createElement(Grid, {
45
- width: "6px",
46
- height: "6px",
47
- "data-testid": "left-nav-messages-icon"
48
- }, messages && /* @__PURE__ */ React2.createElement(MessagesSmallFill, {
49
- width: "6px",
50
- height: "6px",
51
- color: ["success", 900]
52
- }))));
53
- var Notifications_default = Notifications;
54
- export {
55
- Notifications,
56
- Notifications_default as default
1
+ import _jsx from '@babel/runtime/helpers/esm/jsx';
2
+ import 'react';
3
+ import { Notifications as Notifications$1, ExceptionsSmallFill, AlertsSmallFill, MessagesSmallFill } from '@elliemae/ds-icons';
4
+ import styled from 'styled-components';
5
+ import Grid from '@elliemae/ds-grid';
6
+
7
+ const StyledIcon = /*#__PURE__*/styled.div.withConfig({
8
+ componentId: "sc-hasbsd-0"
9
+ })(["display:flex;flex-direction:column;align-items:center;"]);
10
+ const Notifications = _ref => {
11
+ let {
12
+ exceptions = false,
13
+ alerts = false,
14
+ messages = false
15
+ } = _ref;
16
+ return /*#__PURE__*/_jsx(StyledIcon, {}, void 0, /*#__PURE__*/_jsx(Notifications$1, {
17
+ size: "m",
18
+ color: ['brand-primary', 800],
19
+ "data-testid": "left-nav-notifications-icon"
20
+ }), (exceptions || alerts || messages) && /*#__PURE__*/_jsx(Grid, {
21
+ cols: ['1fr', '1fr', '1fr'],
22
+ gutter: "xxxs",
23
+ mt: "2px"
24
+ }, void 0, /*#__PURE__*/_jsx(Grid, {
25
+ width: "6px",
26
+ height: "6px",
27
+ "data-testid": "left-nav-exceptions-icon"
28
+ }, void 0, exceptions && /*#__PURE__*/_jsx(ExceptionsSmallFill, {
29
+ width: "6px",
30
+ height: "6px",
31
+ color: ['warning', 900]
32
+ })), /*#__PURE__*/_jsx(Grid, {
33
+ width: "6px",
34
+ height: "6px",
35
+ "data-testid": "left-nav-alerts-icon"
36
+ }, void 0, alerts && /*#__PURE__*/_jsx(AlertsSmallFill, {
37
+ width: "6px",
38
+ height: "6px",
39
+ color: ['danger', 900]
40
+ })), /*#__PURE__*/_jsx(Grid, {
41
+ width: "6px",
42
+ height: "6px",
43
+ "data-testid": "left-nav-messages-icon"
44
+ }, void 0, messages && /*#__PURE__*/_jsx(MessagesSmallFill, {
45
+ width: "6px",
46
+ height: "6px",
47
+ color: ['success', 900]
48
+ }))));
57
49
  };
58
- //# sourceMappingURL=index.js.map
50
+
51
+ export { Notifications, Notifications as default };
@@ -1,21 +1,23 @@
1
- import * as React from "react";
2
- import React2 from "react";
3
- import styled from "styled-components";
4
- import { OpenWindow as OpenWindowIcon } from "@elliemae/ds-icons";
5
- const StyledOpenWindow = styled(OpenWindowIcon)`
6
- cursor: pointer;
7
- :focus {
8
- outline: 1px solid ${(props) => props.theme.colors.brand[800]};
9
- }
10
- `;
11
- const OpenWindow = (props) => /* @__PURE__ */ React2.createElement(StyledOpenWindow, {
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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
+ import 'react';
8
+ import styled from 'styled-components';
9
+ import { OpenWindow as OpenWindow$1 } from '@elliemae/ds-icons';
10
+ import { jsx } from 'react/jsx-runtime';
11
+
12
+ 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; }
13
+
14
+ 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; }
15
+ const StyledOpenWindow = /*#__PURE__*/styled(OpenWindow$1).withConfig({
16
+ componentId: "sc-g53ios-0"
17
+ })(["cursor:pointer;:focus{outline:1px solid ", ";}"], props => props.theme.colors.brand[800]);
18
+ const OpenWindow = props => /*#__PURE__*/jsx(StyledOpenWindow, _objectSpread({
12
19
  size: "s",
13
- color: ["brand-primary", 800],
14
- ...props
15
- });
16
- var OpenWindowItem_default = OpenWindow;
17
- export {
18
- OpenWindow,
19
- OpenWindowItem_default as default
20
- };
21
- //# sourceMappingURL=index.js.map
20
+ color: ['brand-primary', 800]
21
+ }, props));
22
+
23
+ export { OpenWindow, OpenWindow as default };
@@ -1,28 +1,21 @@
1
- import * as React from "react";
2
1
  const LABEL_OVERFLOW = {
3
- WRAP: "wrap",
4
- WRAP_ALL: "wrapAll",
5
- TRUNCATE: "truncate"
2
+ WRAP: 'wrap',
3
+ WRAP_ALL: 'wrapAll',
4
+ TRUNCATE: 'truncate'
6
5
  };
7
6
  const ITEM_TYPES = {
8
- LEFT_NAV_ITEM_HEADER: "ds-left-nav-item-header",
9
- LEFT_NAV_ITEM_LINK: "ds-left-nav-item-link",
10
- LEFT_NAV_ITEM_SUBMENU: "ds-left-nav-item-submenu",
11
- LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN: "ds-left-nav-item-controlled-drilldown",
12
- LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN: "ds-left-nav-item-uncontrolled-drilldown",
13
- LEFT_NAV_ITEM_SECTION: "ds-left-nav-item-section",
14
- LEFT_NAV_ITEM_SEPARATOR: "ds-left-nav-item-separator",
15
- LEFT_NAV_ITEM_TEXT_LABEL: "ds-left-nav-item-text-label",
16
- LEFT_NAV_ITEM_WITH_DATE: "ds-left-nav-item-with-date"
7
+ LEFT_NAV_ITEM_HEADER: 'ds-left-nav-item-header',
8
+ LEFT_NAV_ITEM_LINK: 'ds-left-nav-item-link',
9
+ LEFT_NAV_ITEM_SUBMENU: 'ds-left-nav-item-submenu',
10
+ LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN: 'ds-left-nav-item-controlled-drilldown',
11
+ LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN: 'ds-left-nav-item-uncontrolled-drilldown',
12
+ LEFT_NAV_ITEM_SECTION: 'ds-left-nav-item-section',
13
+ LEFT_NAV_ITEM_SEPARATOR: 'ds-left-nav-item-separator',
14
+ LEFT_NAV_ITEM_TEXT_LABEL: 'ds-left-nav-item-text-label',
15
+ LEFT_NAV_ITEM_WITH_DATE: 'ds-left-nav-item-with-date'
17
16
  };
18
- const FOOTER_DS_ID = "ds-left-nav-__internal__-footer";
19
- const FOOTER_MENU_CLOSE_DS_ID = "ds-left-nav-__internal__-footer-menu-close";
20
- const CHEVRON_BACK_DS_ID = "ds-left-nav-__internal__-chevron-back";
21
- export {
22
- CHEVRON_BACK_DS_ID,
23
- FOOTER_DS_ID,
24
- FOOTER_MENU_CLOSE_DS_ID,
25
- ITEM_TYPES,
26
- LABEL_OVERFLOW
27
- };
28
- //# sourceMappingURL=constants.js.map
17
+ const FOOTER_DS_ID = 'ds-left-nav-__internal__-footer';
18
+ const FOOTER_MENU_CLOSE_DS_ID = 'ds-left-nav-__internal__-footer-menu-close';
19
+ const CHEVRON_BACK_DS_ID = 'ds-left-nav-__internal__-chevron-back';
20
+
21
+ export { CHEVRON_BACK_DS_ID, FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID, ITEM_TYPES, LABEL_OVERFLOW };
@@ -1,8 +1,6 @@
1
- import * as React from "react";
2
- export * from "./constants";
3
- export * from "./ItemRenderer";
4
- export * from "./ChevronItem";
5
- export * from "./Notifications";
6
- export * from "./OpenWindowItem";
7
- export * from "./Icon";
8
- //# sourceMappingURL=index.js.map
1
+ export { CHEVRON_BACK_DS_ID, FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID, ITEM_TYPES, LABEL_OVERFLOW } from './constants.js';
2
+ export { ItemRenderer } from './ItemRenderer/index.js';
3
+ export { ChevronItem } from './ChevronItem/index.js';
4
+ export { Notifications } from './Notifications/index.js';
5
+ export { OpenWindow } from './OpenWindowItem/index.js';
6
+ export { Icon } from './Icon/index.js';
@@ -1,5 +1,3 @@
1
- import * as React from "react";
2
- export * from "./useOpenableOnClickHandler";
3
- export * from "./useExpandableOnClickHandler";
4
- export * from "./useKeyboardNavigation";
5
- //# sourceMappingURL=index.js.map
1
+ export { useOpenableOnClickHandler } from './useOpenableOnClickHandler.js';
2
+ export { useExpandableOnClickHandler } from './useExpandableOnClickHandler.js';
3
+ export { useKeyboardNavigation } from './useKeyboardNavigation.js';
@@ -1,35 +1,31 @@
1
- import * as React from "react";
2
- import { useCallback, useContext } from "react";
3
- import LeftNavigationContext from "../LeftNavigationContext";
4
- const useExpandableOnClickHandler = ({
5
- id,
6
- onExpand,
7
- onOpen,
8
- selectable = true
9
- }) => {
1
+ import { useContext, useCallback } from 'react';
2
+ import { LeftNavContext } from '../LeftNavigationContext.js';
3
+
4
+ const useExpandableOnClickHandler = _ref => {
5
+ let {
6
+ id,
7
+ onExpand,
8
+ onOpen,
9
+ selectable = true
10
+ } = _ref;
10
11
  const {
11
- leftNavProps: { expanded },
12
+ leftNavProps: {
13
+ expanded
14
+ },
12
15
  setSelectedItem
13
- } = useContext(LeftNavigationContext);
14
- const handleOnExpand = useCallback((e) => {
16
+ } = useContext(LeftNavContext);
17
+ const handleOnExpand = useCallback(e => {
15
18
  onExpand(e);
16
- if (selectable)
17
- setSelectedItem(id);
19
+ if (selectable) setSelectedItem(id);
18
20
  }, [id, onExpand, setSelectedItem, selectable]);
19
- const handleOnOpen = useCallback((e) => {
21
+ const handleOnOpen = useCallback(e => {
20
22
  onOpen(e);
21
- if (selectable)
22
- setSelectedItem(id);
23
+ if (selectable) setSelectedItem(id);
23
24
  }, [id, onOpen, setSelectedItem, selectable]);
24
- const handleOnClick = useCallback((e) => {
25
- if (!expanded)
26
- handleOnExpand(e);
27
- else
28
- handleOnOpen(e);
25
+ const handleOnClick = useCallback(e => {
26
+ if (!expanded) handleOnExpand(e);else handleOnOpen(e);
29
27
  }, [expanded, handleOnExpand, handleOnOpen]);
30
28
  return handleOnClick;
31
29
  };
32
- export {
33
- useExpandableOnClickHandler
34
- };
35
- //# sourceMappingURL=useExpandableOnClickHandler.js.map
30
+
31
+ export { useExpandableOnClickHandler };
@@ -1,7 +1,8 @@
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";
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 */
5
6
  const KEY_CODES = {
6
7
  TAB: 9,
7
8
  ENTER: 13,
@@ -13,29 +14,52 @@ const KEY_CODES = {
13
14
  END: 35,
14
15
  HOME: 36
15
16
  };
17
+
16
18
  const nextIndex = (index, length) => (index + 1) % length;
19
+
17
20
  const prevIndex = (index, length) => (index - 1 + length) % length;
18
- const useKeyboardNavigation = ({ item, onClick }) => {
21
+
22
+ const useKeyboardNavigation = _ref => {
23
+ let {
24
+ item,
25
+ onClick
26
+ } = _ref;
19
27
  const {
20
28
  dsId,
21
- itemOpts: { selectable, openable, closable }
29
+ itemOpts: {
30
+ selectable,
31
+ openable,
32
+ closable
33
+ }
22
34
  } = item;
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) => {
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 => {
27
46
  setFocusedItem(nextDsId);
28
47
  setSelectedItem(nextDsId);
29
48
  }, [setFocusedItem, setSelectedItem]);
30
49
  useLayoutEffect(() => {
31
- if (dsId === focusedItem)
32
- visibleItemsRefs.current[dsId]?.current?.focus();
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();
33
53
  }, [dsId, focusedItem, visibleItemsRefs]);
34
- const onKeyDown = useCallback((e) => {
35
- const { keyCode } = e;
54
+ const onKeyDown = useCallback(e => {
55
+ const {
56
+ keyCode
57
+ } = e; // Prevent default behaviour when not tab
58
+
36
59
  if (keyCode !== KEY_CODES.TAB) {
37
60
  e.preventDefault();
38
61
  }
62
+
39
63
  if (keyCode === KEY_CODES.ENTER || keyCode === KEY_CODES.SPACE) {
40
64
  if (selectable) {
41
65
  onClick(e);
@@ -48,42 +72,35 @@ const useKeyboardNavigation = ({ item, onClick }) => {
48
72
  setFocusedItem(dsId);
49
73
  }
50
74
  }
75
+
51
76
  if (openable && keyCode === KEY_CODES.RIGHT_ARROW) {
52
77
  onClick(e);
53
78
  }
79
+
54
80
  if (closable && keyCode === KEY_CODES.LEFT_ARROW) {
55
81
  onClick(e);
56
82
  setFocusedItem(dsId);
57
83
  }
84
+
58
85
  if (keyCode === KEY_CODES.DOWN_ARROW) {
59
86
  const nextDsId = visibleItems[nextIndex(currentIndex, visibleItems.length)];
60
87
  setFocusedItem(nextDsId);
61
88
  }
89
+
62
90
  if (keyCode === KEY_CODES.UP_ARROW) {
63
91
  const prevDsId = visibleItems[prevIndex(currentIndex, visibleItems.length)];
64
92
  setFocusedItem(prevDsId);
65
93
  }
94
+
66
95
  if (keyCode === KEY_CODES.HOME) {
67
96
  setFocusedItem(visibleItems[0]);
68
97
  }
98
+
69
99
  if (keyCode === KEY_CODES.END) {
70
100
  setFocusedItem(visibleItems[visibleItems.length - 1]);
71
101
  }
72
- }, [
73
- openable,
74
- closable,
75
- selectable,
76
- focusedItem,
77
- onClick,
78
- focusAndSelect,
79
- dsId,
80
- setFocusedItem,
81
- visibleItems,
82
- currentIndex
83
- ]);
102
+ }, [openable, closable, selectable, focusedItem, onClick, focusAndSelect, dsId, setFocusedItem, visibleItems, currentIndex]);
84
103
  return onKeyDown;
85
104
  };
86
- export {
87
- useKeyboardNavigation
88
- };
89
- //# sourceMappingURL=useKeyboardNavigation.js.map
105
+
106
+ export { useKeyboardNavigation };
@@ -1,40 +1,36 @@
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
- }) => {
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;
11
12
  const {
12
- leftNavProps: { expanded },
13
+ leftNavProps: {
14
+ expanded
15
+ },
13
16
  setSelectedItem
14
- } = useContext(LeftNavigationContext);
15
- const handleOnExpand = useCallback((e) => {
17
+ } = useContext(LeftNavContext);
18
+ const handleOnExpand = useCallback(e => {
16
19
  onExpand(e);
17
20
  setSelectedItem(id);
18
21
  }, [id, onExpand, setSelectedItem]);
19
- const handleOnOpen = useCallback((e) => {
22
+ const handleOnOpen = useCallback(e => {
20
23
  onOpen(e);
21
24
  setSelectedItem(id);
22
25
  }, [id, onOpen, setSelectedItem]);
23
- const handleOnClose = useCallback((e) => {
26
+ const handleOnClose = useCallback(e => {
24
27
  onClose(e);
25
28
  setSelectedItem(id);
26
29
  }, [id, onClose, setSelectedItem]);
27
- const handleOnClick = useCallback((e) => {
28
- if (!expanded)
29
- handleOnExpand(e);
30
- else if (!opened)
31
- handleOnOpen(e);
32
- else
33
- handleOnClose(e);
30
+ const handleOnClick = useCallback(e => {
31
+ if (!expanded) handleOnExpand(e);else if (!opened) handleOnOpen(e);else handleOnClose(e);
34
32
  }, [expanded, opened, handleOnExpand, handleOnOpen, handleOnClose]);
35
33
  return handleOnClick;
36
34
  };
37
- export {
38
- useOpenableOnClickHandler
39
- };
40
- //# sourceMappingURL=useOpenableOnClickHandler.js.map
35
+
36
+ export { useOpenableOnClickHandler };
@@ -1,23 +1,35 @@
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));
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
+
8
22
  const useSelectFirstBodyItem = (items, openedItem, selectedItem, setSelectedItem, disableDefaultSelection) => {
9
23
  useEffect(() => {
10
24
  if (!disableDefaultSelection && items && items.length && openedItem) {
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
- }
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
+
18
32
  }, [openedItem, setSelectedItem, disableDefaultSelection]);
19
33
  };
20
- export {
21
- useSelectFirstBodyItem
22
- };
23
- //# sourceMappingURL=useSelectFirstBodyItem.js.map
34
+
35
+ export { useSelectFirstBodyItem };
package/esm/index.d.js CHANGED
@@ -1,2 +1 @@
1
- import * as React from "react";
2
- //# sourceMappingURL=index.d.js.map
1
+
package/esm/index.js CHANGED
@@ -1,12 +1,8 @@
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
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';