@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.
- package/cjs/LeftNavigation.js +27 -49
- package/cjs/LeftNavigationContext.js +18 -44
- package/cjs/common/getItemBackgroundStyle.js +8 -47
- package/cjs/common/getLeftBorderStyle.js +8 -50
- package/cjs/common/getScrollbarStyle.js +4 -55
- package/cjs/common/index.js +13 -30
- package/cjs/configs/index.js +10 -38
- package/cjs/configs/useLeftNavConfig.js +76 -76
- package/cjs/configs/useLeftNavItems.js +64 -66
- package/cjs/configs/useLeftNavSmoothExpand.js +25 -43
- package/cjs/exported-related/ChevronItem/index.js +27 -42
- package/cjs/exported-related/Icon/index.js +34 -51
- package/cjs/exported-related/ItemRenderer/index.js +94 -99
- package/cjs/exported-related/ItemRenderer/styled.js +51 -83
- package/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js +45 -57
- package/cjs/exported-related/Notifications/index.js +61 -81
- package/cjs/exported-related/OpenWindowItem/index.js +32 -49
- package/cjs/exported-related/constants.js +25 -53
- package/cjs/exported-related/index.js +23 -33
- package/cjs/hooks/index.js +13 -30
- package/cjs/hooks/useExpandableOnClickHandler.js +26 -55
- package/cjs/hooks/useKeyboardNavigation.js +54 -62
- package/cjs/hooks/useOpenableOnClickHandler.js +26 -55
- package/cjs/hooks/useSelectFirstBodyItem.js +34 -47
- package/cjs/index.d.js +2 -27
- package/cjs/index.js +30 -41
- package/cjs/outOfTheBox/ItemControlledDrilldown/index.js +103 -97
- package/cjs/outOfTheBox/ItemControlledDrilldown/styled.js +27 -49
- package/cjs/outOfTheBox/ItemHeader/index.js +93 -95
- package/cjs/outOfTheBox/ItemHeader/styled.js +22 -49
- package/cjs/outOfTheBox/ItemLink/index.js +67 -75
- package/cjs/outOfTheBox/ItemLink/styled.js +17 -41
- package/cjs/outOfTheBox/ItemSection/index.js +63 -59
- package/cjs/outOfTheBox/ItemSection/styled.js +23 -53
- package/cjs/outOfTheBox/ItemSeparator/index.js +45 -56
- package/cjs/outOfTheBox/ItemSubmenu/index.js +92 -95
- package/cjs/outOfTheBox/ItemSubmenu/styled.js +22 -49
- package/cjs/outOfTheBox/ItemTextLabel/index.js +52 -51
- package/cjs/outOfTheBox/ItemTextLabel/styled.js +23 -43
- package/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js +113 -107
- package/cjs/outOfTheBox/ItemUncontrolledDrilldown/styled.js +27 -49
- package/cjs/outOfTheBox/ItemWithDate/index.js +54 -59
- package/cjs/outOfTheBox/ItemWithDate/styled.js +27 -49
- package/cjs/outOfTheBox/index.js +50 -65
- package/cjs/parts/LeftNavContent/index.js +71 -75
- package/cjs/parts/LeftNavContent/styled.js +50 -110
- package/cjs/parts/LeftNavContentWithScrollbar/index.js +79 -89
- package/cjs/parts/LeftNavFooterItem/index.js +80 -97
- package/cjs/parts/LeftNavFooterItem/styled.js +34 -89
- package/cjs/parts/LeftNavLoading/index.js +33 -51
- package/cjs/parts/OutOfTheBoxMapItem.js +46 -49
- package/cjs/prop-types.js +39 -58
- package/esm/LeftNavigation.js +15 -17
- package/esm/LeftNavigationContext.js +11 -15
- package/esm/common/getItemBackgroundStyle.js +6 -20
- package/esm/common/getLeftBorderStyle.js +6 -23
- package/esm/common/getScrollbarStyle.js +2 -28
- package/esm/common/index.js +3 -5
- package/esm/configs/index.js +2 -9
- package/esm/configs/useLeftNavConfig.js +67 -47
- package/esm/configs/useLeftNavItems.js +55 -33
- package/esm/configs/useLeftNavSmoothExpand.js +16 -14
- package/esm/exported-related/ChevronItem/index.js +18 -13
- package/esm/exported-related/Icon/index.js +24 -21
- package/esm/exported-related/ItemRenderer/index.js +80 -65
- package/esm/exported-related/ItemRenderer/styled.js +42 -56
- package/esm/exported-related/ItemRenderer/usePropsWithDefaults.js +36 -27
- package/esm/exported-related/Notifications/index.js +50 -57
- package/esm/exported-related/OpenWindowItem/index.js +22 -20
- package/esm/exported-related/constants.js +17 -24
- package/esm/exported-related/index.js +6 -8
- package/esm/hooks/index.js +3 -5
- package/esm/hooks/useExpandableOnClickHandler.js +22 -26
- package/esm/hooks/useKeyboardNavigation.js +47 -30
- package/esm/hooks/useOpenableOnClickHandler.js +22 -26
- package/esm/hooks/useSelectFirstBodyItem.js +30 -18
- package/esm/index.d.js +1 -2
- package/esm/index.js +8 -12
- package/esm/outOfTheBox/ItemControlledDrilldown/index.js +87 -62
- package/esm/outOfTheBox/ItemControlledDrilldown/styled.js +17 -20
- package/esm/outOfTheBox/ItemHeader/index.js +82 -65
- package/esm/outOfTheBox/ItemHeader/styled.js +12 -20
- package/esm/outOfTheBox/ItemLink/index.js +57 -46
- package/esm/outOfTheBox/ItemLink/styled.js +8 -12
- package/esm/outOfTheBox/ItemSection/index.js +53 -30
- package/esm/outOfTheBox/ItemSection/styled.js +13 -24
- package/esm/outOfTheBox/ItemSeparator/index.js +35 -27
- package/esm/outOfTheBox/ItemSubmenu/index.js +81 -65
- package/esm/outOfTheBox/ItemSubmenu/styled.js +12 -20
- package/esm/outOfTheBox/ItemTextLabel/index.js +43 -22
- package/esm/outOfTheBox/ItemTextLabel/styled.js +14 -14
- package/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js +95 -70
- package/esm/outOfTheBox/ItemUncontrolledDrilldown/styled.js +17 -20
- package/esm/outOfTheBox/ItemWithDate/index.js +44 -30
- package/esm/outOfTheBox/ItemWithDate/styled.js +17 -20
- package/esm/outOfTheBox/index.js +34 -25
- package/esm/parts/LeftNavContent/index.js +64 -54
- package/esm/parts/LeftNavContent/styled.js +36 -81
- package/esm/parts/LeftNavContentWithScrollbar/index.js +64 -56
- package/esm/parts/LeftNavFooterItem/index.js +68 -73
- package/esm/parts/LeftNavFooterItem/styled.js +24 -63
- package/esm/parts/LeftNavLoading/index.js +22 -22
- package/esm/parts/OutOfTheBoxMapItem.js +35 -19
- package/esm/prop-types.js +29 -26
- package/package.json +6 -6
- package/types/LeftNavigationContext.d.ts +4 -4
- package/types/configs/useLeftNavSmoothExpand.d.ts +3 -3
- package/types/hooks/useSelectFirstBodyItem.d.ts +1 -1
- package/types/index.d.d.ts +5 -2
- package/cjs/LeftNavigation.js.map +0 -7
- package/cjs/LeftNavigationContext.js.map +0 -7
- package/cjs/common/getItemBackgroundStyle.js.map +0 -7
- package/cjs/common/getLeftBorderStyle.js.map +0 -7
- package/cjs/common/getScrollbarStyle.js.map +0 -7
- package/cjs/common/index.js.map +0 -7
- package/cjs/configs/index.js.map +0 -7
- package/cjs/configs/useLeftNavConfig.js.map +0 -7
- package/cjs/configs/useLeftNavItems.js.map +0 -7
- package/cjs/configs/useLeftNavSmoothExpand.js.map +0 -7
- package/cjs/exported-related/ChevronItem/index.js.map +0 -7
- package/cjs/exported-related/Icon/index.js.map +0 -7
- package/cjs/exported-related/ItemRenderer/index.js.map +0 -7
- package/cjs/exported-related/ItemRenderer/styled.js.map +0 -7
- package/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js.map +0 -7
- package/cjs/exported-related/Notifications/index.js.map +0 -7
- package/cjs/exported-related/OpenWindowItem/index.js.map +0 -7
- package/cjs/exported-related/constants.js.map +0 -7
- package/cjs/exported-related/index.js.map +0 -7
- package/cjs/hooks/index.js.map +0 -7
- package/cjs/hooks/useExpandableOnClickHandler.js.map +0 -7
- package/cjs/hooks/useKeyboardNavigation.js.map +0 -7
- package/cjs/hooks/useOpenableOnClickHandler.js.map +0 -7
- package/cjs/hooks/useSelectFirstBodyItem.js.map +0 -7
- package/cjs/index.d.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/cjs/outOfTheBox/ItemControlledDrilldown/index.js.map +0 -7
- package/cjs/outOfTheBox/ItemControlledDrilldown/styled.js.map +0 -7
- package/cjs/outOfTheBox/ItemHeader/index.js.map +0 -7
- package/cjs/outOfTheBox/ItemHeader/styled.js.map +0 -7
- package/cjs/outOfTheBox/ItemLink/index.js.map +0 -7
- package/cjs/outOfTheBox/ItemLink/styled.js.map +0 -7
- package/cjs/outOfTheBox/ItemSection/index.js.map +0 -7
- package/cjs/outOfTheBox/ItemSection/styled.js.map +0 -7
- package/cjs/outOfTheBox/ItemSeparator/index.js.map +0 -7
- package/cjs/outOfTheBox/ItemSubmenu/index.js.map +0 -7
- package/cjs/outOfTheBox/ItemSubmenu/styled.js.map +0 -7
- package/cjs/outOfTheBox/ItemTextLabel/index.js.map +0 -7
- package/cjs/outOfTheBox/ItemTextLabel/styled.js.map +0 -7
- package/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +0 -7
- package/cjs/outOfTheBox/ItemUncontrolledDrilldown/styled.js.map +0 -7
- package/cjs/outOfTheBox/ItemWithDate/index.js.map +0 -7
- package/cjs/outOfTheBox/ItemWithDate/styled.js.map +0 -7
- package/cjs/outOfTheBox/index.js.map +0 -7
- package/cjs/parts/LeftNavContent/index.js.map +0 -7
- package/cjs/parts/LeftNavContent/styled.js.map +0 -7
- package/cjs/parts/LeftNavContentWithScrollbar/index.js.map +0 -7
- package/cjs/parts/LeftNavFooterItem/index.js.map +0 -7
- package/cjs/parts/LeftNavFooterItem/styled.js.map +0 -7
- package/cjs/parts/LeftNavLoading/index.js.map +0 -7
- package/cjs/parts/OutOfTheBoxMapItem.js.map +0 -7
- package/cjs/prop-types.js.map +0 -7
- package/esm/LeftNavigation.js.map +0 -7
- package/esm/LeftNavigationContext.js.map +0 -7
- package/esm/common/getItemBackgroundStyle.js.map +0 -7
- package/esm/common/getLeftBorderStyle.js.map +0 -7
- package/esm/common/getScrollbarStyle.js.map +0 -7
- package/esm/common/index.js.map +0 -7
- package/esm/configs/index.js.map +0 -7
- package/esm/configs/useLeftNavConfig.js.map +0 -7
- package/esm/configs/useLeftNavItems.js.map +0 -7
- package/esm/configs/useLeftNavSmoothExpand.js.map +0 -7
- package/esm/exported-related/ChevronItem/index.js.map +0 -7
- package/esm/exported-related/Icon/index.js.map +0 -7
- package/esm/exported-related/ItemRenderer/index.js.map +0 -7
- package/esm/exported-related/ItemRenderer/styled.js.map +0 -7
- package/esm/exported-related/ItemRenderer/usePropsWithDefaults.js.map +0 -7
- package/esm/exported-related/Notifications/index.js.map +0 -7
- package/esm/exported-related/OpenWindowItem/index.js.map +0 -7
- package/esm/exported-related/constants.js.map +0 -7
- package/esm/exported-related/index.js.map +0 -7
- package/esm/hooks/index.js.map +0 -7
- package/esm/hooks/useExpandableOnClickHandler.js.map +0 -7
- package/esm/hooks/useKeyboardNavigation.js.map +0 -7
- package/esm/hooks/useOpenableOnClickHandler.js.map +0 -7
- package/esm/hooks/useSelectFirstBodyItem.js.map +0 -7
- package/esm/index.d.js.map +0 -7
- package/esm/index.js.map +0 -7
- package/esm/outOfTheBox/ItemControlledDrilldown/index.js.map +0 -7
- package/esm/outOfTheBox/ItemControlledDrilldown/styled.js.map +0 -7
- package/esm/outOfTheBox/ItemHeader/index.js.map +0 -7
- package/esm/outOfTheBox/ItemHeader/styled.js.map +0 -7
- package/esm/outOfTheBox/ItemLink/index.js.map +0 -7
- package/esm/outOfTheBox/ItemLink/styled.js.map +0 -7
- package/esm/outOfTheBox/ItemSection/index.js.map +0 -7
- package/esm/outOfTheBox/ItemSection/styled.js.map +0 -7
- package/esm/outOfTheBox/ItemSeparator/index.js.map +0 -7
- package/esm/outOfTheBox/ItemSubmenu/index.js.map +0 -7
- package/esm/outOfTheBox/ItemSubmenu/styled.js.map +0 -7
- package/esm/outOfTheBox/ItemTextLabel/index.js.map +0 -7
- package/esm/outOfTheBox/ItemTextLabel/styled.js.map +0 -7
- package/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +0 -7
- package/esm/outOfTheBox/ItemUncontrolledDrilldown/styled.js.map +0 -7
- package/esm/outOfTheBox/ItemWithDate/index.js.map +0 -7
- package/esm/outOfTheBox/ItemWithDate/styled.js.map +0 -7
- package/esm/outOfTheBox/index.js.map +0 -7
- package/esm/parts/LeftNavContent/index.js.map +0 -7
- package/esm/parts/LeftNavContent/styled.js.map +0 -7
- package/esm/parts/LeftNavContentWithScrollbar/index.js.map +0 -7
- package/esm/parts/LeftNavFooterItem/index.js.map +0 -7
- package/esm/parts/LeftNavFooterItem/styled.js.map +0 -7
- package/esm/parts/LeftNavLoading/index.js.map +0 -7
- package/esm/parts/OutOfTheBoxMapItem.js.map +0 -7
- package/esm/prop-types.js.map +0 -7
|
@@ -1,58 +1,51 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
})
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
},
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
},
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
},
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
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
|
-
|
|
50
|
+
|
|
51
|
+
export { Notifications, Notifications as default };
|
|
@@ -1,21 +1,23 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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: [
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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:
|
|
4
|
-
WRAP_ALL:
|
|
5
|
-
TRUNCATE:
|
|
2
|
+
WRAP: 'wrap',
|
|
3
|
+
WRAP_ALL: 'wrapAll',
|
|
4
|
+
TRUNCATE: 'truncate'
|
|
6
5
|
};
|
|
7
6
|
const ITEM_TYPES = {
|
|
8
|
-
LEFT_NAV_ITEM_HEADER:
|
|
9
|
-
LEFT_NAV_ITEM_LINK:
|
|
10
|
-
LEFT_NAV_ITEM_SUBMENU:
|
|
11
|
-
LEFT_NAV_ITEM_CONTROLLED_DRILLDOWN:
|
|
12
|
-
LEFT_NAV_ITEM_UNCONTROLLED_DRILLDOWN:
|
|
13
|
-
LEFT_NAV_ITEM_SECTION:
|
|
14
|
-
LEFT_NAV_ITEM_SEPARATOR:
|
|
15
|
-
LEFT_NAV_ITEM_TEXT_LABEL:
|
|
16
|
-
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 =
|
|
19
|
-
const FOOTER_MENU_CLOSE_DS_ID =
|
|
20
|
-
const CHEVRON_BACK_DS_ID =
|
|
21
|
-
|
|
22
|
-
|
|
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
|
-
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
export
|
|
6
|
-
export
|
|
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';
|
package/esm/hooks/index.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
export
|
|
3
|
-
export
|
|
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
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
const useExpandableOnClickHandler =
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
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: {
|
|
12
|
+
leftNavProps: {
|
|
13
|
+
expanded
|
|
14
|
+
},
|
|
12
15
|
setSelectedItem
|
|
13
|
-
} = useContext(
|
|
14
|
-
const handleOnExpand = useCallback(
|
|
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(
|
|
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(
|
|
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
|
-
|
|
33
|
-
|
|
34
|
-
};
|
|
35
|
-
//# sourceMappingURL=useExpandableOnClickHandler.js.map
|
|
30
|
+
|
|
31
|
+
export { useExpandableOnClickHandler };
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
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
|
-
|
|
21
|
+
|
|
22
|
+
const useKeyboardNavigation = _ref => {
|
|
23
|
+
let {
|
|
24
|
+
item,
|
|
25
|
+
onClick
|
|
26
|
+
} = _ref;
|
|
19
27
|
const {
|
|
20
28
|
dsId,
|
|
21
|
-
itemOpts: {
|
|
29
|
+
itemOpts: {
|
|
30
|
+
selectable,
|
|
31
|
+
openable,
|
|
32
|
+
closable
|
|
33
|
+
}
|
|
22
34
|
} = item;
|
|
23
|
-
const {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
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
|
-
|
|
32
|
-
|
|
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(
|
|
35
|
-
const {
|
|
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
|
-
|
|
87
|
-
|
|
88
|
-
};
|
|
89
|
-
//# sourceMappingURL=useKeyboardNavigation.js.map
|
|
105
|
+
|
|
106
|
+
export { useKeyboardNavigation };
|
|
@@ -1,40 +1,36 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
const useOpenableOnClickHandler =
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
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: {
|
|
13
|
+
leftNavProps: {
|
|
14
|
+
expanded
|
|
15
|
+
},
|
|
13
16
|
setSelectedItem
|
|
14
|
-
} = useContext(
|
|
15
|
-
const handleOnExpand = useCallback(
|
|
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(
|
|
22
|
+
const handleOnOpen = useCallback(e => {
|
|
20
23
|
onOpen(e);
|
|
21
24
|
setSelectedItem(id);
|
|
22
25
|
}, [id, onOpen, setSelectedItem]);
|
|
23
|
-
const handleOnClose = useCallback(
|
|
26
|
+
const handleOnClose = useCallback(e => {
|
|
24
27
|
onClose(e);
|
|
25
28
|
setSelectedItem(id);
|
|
26
29
|
}, [id, onClose, setSelectedItem]);
|
|
27
|
-
const handleOnClick = useCallback(
|
|
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
|
-
|
|
38
|
-
|
|
39
|
-
};
|
|
40
|
-
//# sourceMappingURL=useOpenableOnClickHandler.js.map
|
|
35
|
+
|
|
36
|
+
export { useOpenableOnClickHandler };
|
|
@@ -1,23 +1,35 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const
|
|
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
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
else if (index !== -1)
|
|
16
|
-
|
|
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
|
-
|
|
21
|
-
|
|
22
|
-
};
|
|
23
|
-
//# sourceMappingURL=useSelectFirstBodyItem.js.map
|
|
34
|
+
|
|
35
|
+
export { useSelectFirstBodyItem };
|
package/esm/index.d.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
//# sourceMappingURL=index.d.js.map
|
|
1
|
+
|
package/esm/index.js
CHANGED
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export
|
|
5
|
-
export {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
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';
|