@elliemae/ds-left-navigation 2.0.0-rc.9 → 2.0.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/configs/useLeftNavConfig.js +1 -1
- package/cjs/exported-related/ItemRenderer/index.js +2 -2
- package/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js +3 -2
- package/cjs/hooks/useSelectFirstBodyItem.js +3 -3
- package/cjs/outOfTheBox/ItemHeader/index.js +1 -1
- package/cjs/outOfTheBox/ItemLink/index.js +1 -1
- package/cjs/outOfTheBox/ItemSection/index.js +5 -2
- package/cjs/outOfTheBox/ItemSubmenu/index.js +2 -2
- package/cjs/parts/LeftNavContent/index.js +3 -2
- package/cjs/prop-types.js +2 -1
- package/esm/configs/useLeftNavConfig.js +1 -1
- package/esm/exported-related/ItemRenderer/index.js +2 -2
- package/esm/exported-related/ItemRenderer/usePropsWithDefaults.js +3 -2
- package/esm/hooks/useSelectFirstBodyItem.js +3 -3
- package/esm/outOfTheBox/ItemHeader/index.js +1 -1
- package/esm/outOfTheBox/ItemLink/index.js +1 -1
- package/esm/outOfTheBox/ItemSection/index.js +5 -2
- package/esm/outOfTheBox/ItemSubmenu/index.js +2 -2
- package/esm/parts/LeftNavContent/index.js +3 -2
- package/esm/prop-types.js +2 -1
- package/package.json +6 -6
- package/types/LeftNavigation.d.ts +3 -0
- package/types/hooks/useSelectFirstBodyItem.d.ts +1 -1
- package/types/index.d.d.ts +2 -0
- package/types/prop-types.d.ts +3 -0
|
@@ -57,7 +57,7 @@ const useLeftNavConfig = props => {
|
|
|
57
57
|
React__default["default"].useEffect(() => {
|
|
58
58
|
onFocusChange(focusedItem);
|
|
59
59
|
}, [focusedItem, onFocusChange]);
|
|
60
|
-
useSelectFirstBodyItem.useSelectFirstBodyItem(items, openedItem, props.selectedItem !== undefined ? props.selectedItem : selectedItem, setSelectedItem); // -----------------------------------------------------------------------------
|
|
60
|
+
useSelectFirstBodyItem.useSelectFirstBodyItem(items, openedItem, props.selectedItem !== undefined ? props.selectedItem : selectedItem, setSelectedItem, props.disableDefaultSelection); // -----------------------------------------------------------------------------
|
|
61
61
|
// ************************** ------------ **************************
|
|
62
62
|
// * ITEMS MANAGEMENT *
|
|
63
63
|
// ************************** ------------ **************************
|
|
@@ -79,14 +79,14 @@ const ItemRenderer = props => {
|
|
|
79
79
|
|
|
80
80
|
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
81
81
|
children: [/*#__PURE__*/_jsx__default["default"](styled.StyledItemWrapper, {
|
|
82
|
-
shadowStyle: shadowStyle,
|
|
82
|
+
shadowStyle: shadowStyle(opened, item.type),
|
|
83
83
|
"data-testid": "leftnav-item-wrapper"
|
|
84
84
|
}, void 0, /*#__PURE__*/jsxRuntime.jsx(styled.StyledItem, {
|
|
85
85
|
ref: visibleItemsRefs.current[dsId],
|
|
86
86
|
pt: paddingTop,
|
|
87
87
|
pl: indent === undefined ? 'xxxs' : "".concat(indent, "px"),
|
|
88
88
|
minHeight: minHeight,
|
|
89
|
-
shadowStyle: shadowStyle,
|
|
89
|
+
shadowStyle: shadowStyle(opened, item.type),
|
|
90
90
|
alignItems: "flex-start",
|
|
91
91
|
cols: cols,
|
|
92
92
|
onClick: !opened ? handleOnClick : () => null,
|
|
@@ -29,7 +29,8 @@ const itemDefaultProps = {
|
|
|
29
29
|
ariaLive: 'off',
|
|
30
30
|
ariaExpanded: undefined,
|
|
31
31
|
ariaDescribedBy: undefined
|
|
32
|
-
};
|
|
32
|
+
};
|
|
33
|
+
const itemWithoutShadows = ['ds-left-nav-item-header', 'ds-left-nav-item-link', 'ds-left-nav-item-submenu']; // Make use Item props with defaults
|
|
33
34
|
|
|
34
35
|
const usePropsWithDefaults = props => {
|
|
35
36
|
const propsWithDefault = React.useMemo(() => {
|
|
@@ -43,7 +44,7 @@ const usePropsWithDefaults = props => {
|
|
|
43
44
|
minHeight: '48px',
|
|
44
45
|
paddingTop: '12px',
|
|
45
46
|
subitems: [],
|
|
46
|
-
shadowStyle: () =>
|
|
47
|
+
shadowStyle: (opened, type) => theme => "box-shadow: ".concat(opened || !itemWithoutShadows.includes(type) ? 'inset 4px 0 0 0 #52A6EC' : 'inset 4px 0 0 0 white'),
|
|
47
48
|
hasBorderBottom: false,
|
|
48
49
|
borderBottomMr: '0px'
|
|
49
50
|
}, props), {}, {
|
|
@@ -23,14 +23,14 @@ const isItemInsideTheTree = (item, itemID) => {
|
|
|
23
23
|
return item.dsId === itemID || (item === null || item === void 0 ? void 0 : (_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : (_item$itemOpts$items = _item$itemOpts.items) === null || _item$itemOpts$items === void 0 ? void 0 : _item$itemOpts$items.some(it => isItemInsideTheTree(it, itemID)));
|
|
24
24
|
};
|
|
25
25
|
|
|
26
|
-
const useSelectFirstBodyItem = (items, openedItem, selectedItem, setSelectedItem) => {
|
|
26
|
+
const useSelectFirstBodyItem = (items, openedItem, selectedItem, setSelectedItem, disableDefaultSelection) => {
|
|
27
27
|
React.useEffect(() => {
|
|
28
|
-
if (items && items.length && openedItem) {
|
|
28
|
+
if (!disableDefaultSelection && items && items.length && openedItem) {
|
|
29
29
|
const index = items.findIndex(elem => isSelectableOutOfTheBox(elem) || isSelectableCustom(elem));
|
|
30
30
|
const isItemInside = items.some(it => isItemInsideTheTree(it, selectedItem));
|
|
31
31
|
if (isItemInside) setSelectedItem(selectedItem);else if (index !== -1) setSelectedItem(items[index].dsId);
|
|
32
32
|
}
|
|
33
|
-
}, [openedItem, setSelectedItem]);
|
|
33
|
+
}, [openedItem, setSelectedItem, disableDefaultSelection]);
|
|
34
34
|
};
|
|
35
35
|
|
|
36
36
|
exports.useSelectFirstBodyItem = useSelectFirstBodyItem;
|
|
@@ -62,7 +62,7 @@ const ItemHeader = props => {
|
|
|
62
62
|
const opened = openedItem === dsId;
|
|
63
63
|
const ariaLabel = (_item$itemOpts$ariaLa = item.itemOpts.ariaLabel) !== null && _item$itemOpts$ariaLa !== void 0 ? _item$itemOpts$ariaLa : typeof label === 'string' ? label : 'menuitem';
|
|
64
64
|
const isSelected = selectedItem === dsId || selectedParent === dsId;
|
|
65
|
-
const shadowStyle = React.useCallback(theme => !
|
|
65
|
+
const shadowStyle = React.useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected)(theme) : "box-shadow: inset 4px 0 0 0 #52A6EC", [isSelected, openedItem]);
|
|
66
66
|
return /*#__PURE__*/_jsx__default["default"](index.ItemRenderer, {
|
|
67
67
|
item: _objectSpread(_objectSpread({}, item), {}, {
|
|
68
68
|
itemOpts: _objectSpread(_objectSpread({
|
|
@@ -53,7 +53,7 @@ const ItemLink = props => {
|
|
|
53
53
|
}
|
|
54
54
|
} = props;
|
|
55
55
|
const isSelected = selectedItem === dsId || selectedParent === dsId;
|
|
56
|
-
const shadowStyle = React.useCallback(theme => !
|
|
56
|
+
const shadowStyle = React.useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected)(theme) : "box-shadow: inset 4px 0 0 0 #52A6EC", [isSelected, openedItem]);
|
|
57
57
|
return /*#__PURE__*/_jsx__default["default"](index.ItemRenderer, {
|
|
58
58
|
item: _objectSpread(_objectSpread({}, item), {}, {
|
|
59
59
|
itemOpts: _objectSpread(_objectSpread({
|
|
@@ -36,7 +36,8 @@ const ItemSection = props => {
|
|
|
36
36
|
label,
|
|
37
37
|
LeftComponent,
|
|
38
38
|
RightComponent,
|
|
39
|
-
labelRightSection
|
|
39
|
+
labelRightSection,
|
|
40
|
+
labelDataTestId
|
|
40
41
|
}
|
|
41
42
|
},
|
|
42
43
|
ctx,
|
|
@@ -61,7 +62,9 @@ const ItemSection = props => {
|
|
|
61
62
|
}, void 0, LeftComponent ? /*#__PURE__*/_jsx__default["default"](LeftComponent, {
|
|
62
63
|
ctx: ctx,
|
|
63
64
|
item: item
|
|
64
|
-
}) : _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {})), /*#__PURE__*/_jsx__default["default"](styled.StyledLabel, {
|
|
65
|
+
}) : _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {})), /*#__PURE__*/_jsx__default["default"](styled.StyledLabel, {
|
|
66
|
+
"data-testid": labelDataTestId || 'leftnav-section-item-label'
|
|
67
|
+
}, void 0, label), _StyledVerticalSepara || (_StyledVerticalSepara = /*#__PURE__*/_jsx__default["default"](styled.StyledVerticalSeparator, {})), /*#__PURE__*/_jsx__default["default"](styled.StyledRightLabel, {}, void 0, labelRightSection)), /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
|
|
65
68
|
ml: "auto",
|
|
66
69
|
onFocus: e => {
|
|
67
70
|
setFocusedItem(null);
|
|
@@ -61,7 +61,7 @@ const ItemSubmenu = props => {
|
|
|
61
61
|
} = props;
|
|
62
62
|
const opened = openedItem === dsId;
|
|
63
63
|
const isSelected = selectedItem === dsId;
|
|
64
|
-
const shadowStyle = React.useCallback(theme => !
|
|
64
|
+
const shadowStyle = React.useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected || selectedParent === dsId)(theme) : "box-shadow: inset 4px 0 0 0 #52A6EC", [dsId, isSelected, openedItem, selectedParent]);
|
|
65
65
|
const ariaLabel = (_item$itemOpts$ariaLa = item.itemOpts.ariaLabel) !== null && _item$itemOpts$ariaLa !== void 0 ? _item$itemOpts$ariaLa : typeof label === 'string' ? label : 'menuitem';
|
|
66
66
|
return /*#__PURE__*/_jsx__default["default"](index.ItemRenderer, {
|
|
67
67
|
item: _objectSpread(_objectSpread({}, item), {}, {
|
|
@@ -116,7 +116,7 @@ const ItemSubmenu = props => {
|
|
|
116
116
|
setFocusedItem(null);
|
|
117
117
|
},
|
|
118
118
|
onKeyDown: e => e.stopPropagation(),
|
|
119
|
-
onClick: e => openedItem && e.stopPropagation(),
|
|
119
|
+
onClick: e => openedItem === dsId && e.stopPropagation(),
|
|
120
120
|
"data-testid": "leftnav-right-component"
|
|
121
121
|
}, void 0, RightComponent && /*#__PURE__*/_jsx__default["default"](RightComponent, {
|
|
122
122
|
ctx: ctx,
|
|
@@ -26,7 +26,8 @@ const LeftNavInnerContent = () => {
|
|
|
26
26
|
HeaderComponent,
|
|
27
27
|
BodyHeaderComponent,
|
|
28
28
|
openedItem,
|
|
29
|
-
items
|
|
29
|
+
items,
|
|
30
|
+
withoutBodyShadow
|
|
30
31
|
},
|
|
31
32
|
selectedItem
|
|
32
33
|
} = React__default["default"].useContext(LeftNavigationContext.LeftNavContext);
|
|
@@ -42,7 +43,7 @@ const LeftNavInnerContent = () => {
|
|
|
42
43
|
}, void 0, BodyHeaderComponent ? /*#__PURE__*/_jsx__default["default"](OutOfTheBoxMapItem.OutOfTheBoxMapItem, {
|
|
43
44
|
item: BodyHeaderComponent
|
|
44
45
|
}) : null), /*#__PURE__*/_jsx__default["default"](styled.StyledLeftNavBodyItemsArea, {
|
|
45
|
-
selected: openedItem !== null,
|
|
46
|
+
selected: !withoutBodyShadow && openedItem !== null,
|
|
46
47
|
"data-testid": "leftnav-body-items-area",
|
|
47
48
|
tabIndex: -1
|
|
48
49
|
}, void 0, /*#__PURE__*/_jsx__default["default"](index$2.LeftNavContentWithScrollbar, {}, void 0, items.map(item => /*#__PURE__*/_jsx__default["default"](OutOfTheBoxMapItem.OutOfTheBoxMapItem, {
|
package/cjs/prop-types.js
CHANGED
|
@@ -27,7 +27,8 @@ const leftNavigationProps = {
|
|
|
27
27
|
onFooterClose: reactDesc.PropTypes.func.description('The function to call when the left-nav is closed via the footer'),
|
|
28
28
|
onSelectedChange: reactDesc.PropTypes.func.description('A callback which triggers when the selected item changes').defaultValue(() => null),
|
|
29
29
|
onFocusChange: reactDesc.PropTypes.func.description('A callback which triggers when the focused item changes').defaultValue(() => null),
|
|
30
|
-
items: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object).description('The array of items you want to render inside the left nav').defaultValue([])
|
|
30
|
+
items: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object).description('The array of items you want to render inside the left nav').defaultValue([]),
|
|
31
|
+
disableDefaultSelection: reactDesc.PropTypes.bool.description('Whether you do not want to automatically select the first body item').defaultValue(false)
|
|
31
32
|
};
|
|
32
33
|
|
|
33
34
|
const LeftNavItemProps = () => null;
|
|
@@ -49,7 +49,7 @@ const useLeftNavConfig = props => {
|
|
|
49
49
|
React.useEffect(() => {
|
|
50
50
|
onFocusChange(focusedItem);
|
|
51
51
|
}, [focusedItem, onFocusChange]);
|
|
52
|
-
useSelectFirstBodyItem(items, openedItem, props.selectedItem !== undefined ? props.selectedItem : selectedItem, setSelectedItem); // -----------------------------------------------------------------------------
|
|
52
|
+
useSelectFirstBodyItem(items, openedItem, props.selectedItem !== undefined ? props.selectedItem : selectedItem, setSelectedItem, props.disableDefaultSelection); // -----------------------------------------------------------------------------
|
|
53
53
|
// ************************** ------------ **************************
|
|
54
54
|
// * ITEMS MANAGEMENT *
|
|
55
55
|
// ************************** ------------ **************************
|
|
@@ -70,14 +70,14 @@ const ItemRenderer = props => {
|
|
|
70
70
|
|
|
71
71
|
return /*#__PURE__*/jsxs(Fragment, {
|
|
72
72
|
children: [/*#__PURE__*/_jsx(StyledItemWrapper, {
|
|
73
|
-
shadowStyle: shadowStyle,
|
|
73
|
+
shadowStyle: shadowStyle(opened, item.type),
|
|
74
74
|
"data-testid": "leftnav-item-wrapper"
|
|
75
75
|
}, void 0, /*#__PURE__*/jsx(StyledItem, {
|
|
76
76
|
ref: visibleItemsRefs.current[dsId],
|
|
77
77
|
pt: paddingTop,
|
|
78
78
|
pl: indent === undefined ? 'xxxs' : "".concat(indent, "px"),
|
|
79
79
|
minHeight: minHeight,
|
|
80
|
-
shadowStyle: shadowStyle,
|
|
80
|
+
shadowStyle: shadowStyle(opened, item.type),
|
|
81
81
|
alignItems: "flex-start",
|
|
82
82
|
cols: cols,
|
|
83
83
|
onClick: !opened ? handleOnClick : () => null,
|
|
@@ -21,7 +21,8 @@ const itemDefaultProps = {
|
|
|
21
21
|
ariaLive: 'off',
|
|
22
22
|
ariaExpanded: undefined,
|
|
23
23
|
ariaDescribedBy: undefined
|
|
24
|
-
};
|
|
24
|
+
};
|
|
25
|
+
const itemWithoutShadows = ['ds-left-nav-item-header', 'ds-left-nav-item-link', 'ds-left-nav-item-submenu']; // Make use Item props with defaults
|
|
25
26
|
|
|
26
27
|
const usePropsWithDefaults = props => {
|
|
27
28
|
const propsWithDefault = useMemo(() => {
|
|
@@ -35,7 +36,7 @@ const usePropsWithDefaults = props => {
|
|
|
35
36
|
minHeight: '48px',
|
|
36
37
|
paddingTop: '12px',
|
|
37
38
|
subitems: [],
|
|
38
|
-
shadowStyle: () =>
|
|
39
|
+
shadowStyle: (opened, type) => theme => "box-shadow: ".concat(opened || !itemWithoutShadows.includes(type) ? 'inset 4px 0 0 0 #52A6EC' : 'inset 4px 0 0 0 white'),
|
|
39
40
|
hasBorderBottom: false,
|
|
40
41
|
borderBottomMr: '0px'
|
|
41
42
|
}, props), {}, {
|
|
@@ -19,14 +19,14 @@ const isItemInsideTheTree = (item, itemID) => {
|
|
|
19
19
|
return item.dsId === itemID || (item === null || item === void 0 ? void 0 : (_item$itemOpts = item.itemOpts) === null || _item$itemOpts === void 0 ? void 0 : (_item$itemOpts$items = _item$itemOpts.items) === null || _item$itemOpts$items === void 0 ? void 0 : _item$itemOpts$items.some(it => isItemInsideTheTree(it, itemID)));
|
|
20
20
|
};
|
|
21
21
|
|
|
22
|
-
const useSelectFirstBodyItem = (items, openedItem, selectedItem, setSelectedItem) => {
|
|
22
|
+
const useSelectFirstBodyItem = (items, openedItem, selectedItem, setSelectedItem, disableDefaultSelection) => {
|
|
23
23
|
useEffect(() => {
|
|
24
|
-
if (items && items.length && openedItem) {
|
|
24
|
+
if (!disableDefaultSelection && items && items.length && openedItem) {
|
|
25
25
|
const index = items.findIndex(elem => isSelectableOutOfTheBox(elem) || isSelectableCustom(elem));
|
|
26
26
|
const isItemInside = items.some(it => isItemInsideTheTree(it, selectedItem));
|
|
27
27
|
if (isItemInside) setSelectedItem(selectedItem);else if (index !== -1) setSelectedItem(items[index].dsId);
|
|
28
28
|
}
|
|
29
|
-
}, [openedItem, setSelectedItem]);
|
|
29
|
+
}, [openedItem, setSelectedItem, disableDefaultSelection]);
|
|
30
30
|
};
|
|
31
31
|
|
|
32
32
|
export { useSelectFirstBodyItem };
|
|
@@ -52,7 +52,7 @@ const ItemHeader = props => {
|
|
|
52
52
|
const opened = openedItem === dsId;
|
|
53
53
|
const ariaLabel = (_item$itemOpts$ariaLa = item.itemOpts.ariaLabel) !== null && _item$itemOpts$ariaLa !== void 0 ? _item$itemOpts$ariaLa : typeof label === 'string' ? label : 'menuitem';
|
|
54
54
|
const isSelected = selectedItem === dsId || selectedParent === dsId;
|
|
55
|
-
const shadowStyle = useCallback(theme => !
|
|
55
|
+
const shadowStyle = useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected)(theme) : "box-shadow: inset 4px 0 0 0 #52A6EC", [isSelected, openedItem]);
|
|
56
56
|
return /*#__PURE__*/_jsx(ItemRenderer, {
|
|
57
57
|
item: _objectSpread(_objectSpread({}, item), {}, {
|
|
58
58
|
itemOpts: _objectSpread(_objectSpread({
|
|
@@ -43,7 +43,7 @@ const ItemLink = props => {
|
|
|
43
43
|
}
|
|
44
44
|
} = props;
|
|
45
45
|
const isSelected = selectedItem === dsId || selectedParent === dsId;
|
|
46
|
-
const shadowStyle = useCallback(theme => !
|
|
46
|
+
const shadowStyle = useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected)(theme) : "box-shadow: inset 4px 0 0 0 #52A6EC", [isSelected, openedItem]);
|
|
47
47
|
return /*#__PURE__*/_jsx(ItemRenderer, {
|
|
48
48
|
item: _objectSpread(_objectSpread({}, item), {}, {
|
|
49
49
|
itemOpts: _objectSpread(_objectSpread({
|
|
@@ -26,7 +26,8 @@ const ItemSection = props => {
|
|
|
26
26
|
label,
|
|
27
27
|
LeftComponent,
|
|
28
28
|
RightComponent,
|
|
29
|
-
labelRightSection
|
|
29
|
+
labelRightSection,
|
|
30
|
+
labelDataTestId
|
|
30
31
|
}
|
|
31
32
|
},
|
|
32
33
|
ctx,
|
|
@@ -51,7 +52,9 @@ const ItemSection = props => {
|
|
|
51
52
|
}, void 0, LeftComponent ? /*#__PURE__*/_jsx(LeftComponent, {
|
|
52
53
|
ctx: ctx,
|
|
53
54
|
item: item
|
|
54
|
-
}) : _div || (_div = /*#__PURE__*/_jsx("div", {})), /*#__PURE__*/_jsx(StyledLabel, {
|
|
55
|
+
}) : _div || (_div = /*#__PURE__*/_jsx("div", {})), /*#__PURE__*/_jsx(StyledLabel, {
|
|
56
|
+
"data-testid": labelDataTestId || 'leftnav-section-item-label'
|
|
57
|
+
}, void 0, label), _StyledVerticalSepara || (_StyledVerticalSepara = /*#__PURE__*/_jsx(StyledVerticalSeparator, {})), /*#__PURE__*/_jsx(StyledRightLabel, {}, void 0, labelRightSection)), /*#__PURE__*/_jsx(Grid, {
|
|
55
58
|
ml: "auto",
|
|
56
59
|
onFocus: e => {
|
|
57
60
|
setFocusedItem(null);
|
|
@@ -51,7 +51,7 @@ const ItemSubmenu = props => {
|
|
|
51
51
|
} = props;
|
|
52
52
|
const opened = openedItem === dsId;
|
|
53
53
|
const isSelected = selectedItem === dsId;
|
|
54
|
-
const shadowStyle = useCallback(theme => !
|
|
54
|
+
const shadowStyle = useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected || selectedParent === dsId)(theme) : "box-shadow: inset 4px 0 0 0 #52A6EC", [dsId, isSelected, openedItem, selectedParent]);
|
|
55
55
|
const ariaLabel = (_item$itemOpts$ariaLa = item.itemOpts.ariaLabel) !== null && _item$itemOpts$ariaLa !== void 0 ? _item$itemOpts$ariaLa : typeof label === 'string' ? label : 'menuitem';
|
|
56
56
|
return /*#__PURE__*/_jsx(ItemRenderer, {
|
|
57
57
|
item: _objectSpread(_objectSpread({}, item), {}, {
|
|
@@ -106,7 +106,7 @@ const ItemSubmenu = props => {
|
|
|
106
106
|
setFocusedItem(null);
|
|
107
107
|
},
|
|
108
108
|
onKeyDown: e => e.stopPropagation(),
|
|
109
|
-
onClick: e => openedItem && e.stopPropagation(),
|
|
109
|
+
onClick: e => openedItem === dsId && e.stopPropagation(),
|
|
110
110
|
"data-testid": "leftnav-right-component"
|
|
111
111
|
}, void 0, RightComponent && /*#__PURE__*/_jsx(RightComponent, {
|
|
112
112
|
ctx: ctx,
|
|
@@ -19,7 +19,8 @@ const LeftNavInnerContent = () => {
|
|
|
19
19
|
HeaderComponent,
|
|
20
20
|
BodyHeaderComponent,
|
|
21
21
|
openedItem,
|
|
22
|
-
items
|
|
22
|
+
items,
|
|
23
|
+
withoutBodyShadow
|
|
23
24
|
},
|
|
24
25
|
selectedItem
|
|
25
26
|
} = React.useContext(LeftNavContext);
|
|
@@ -35,7 +36,7 @@ const LeftNavInnerContent = () => {
|
|
|
35
36
|
}, void 0, BodyHeaderComponent ? /*#__PURE__*/_jsx(OutOfTheBoxMapItem, {
|
|
36
37
|
item: BodyHeaderComponent
|
|
37
38
|
}) : null), /*#__PURE__*/_jsx(StyledLeftNavBodyItemsArea, {
|
|
38
|
-
selected: openedItem !== null,
|
|
39
|
+
selected: !withoutBodyShadow && openedItem !== null,
|
|
39
40
|
"data-testid": "leftnav-body-items-area",
|
|
40
41
|
tabIndex: -1
|
|
41
42
|
}, void 0, /*#__PURE__*/_jsx(LeftNavContentWithScrollbar, {}, void 0, items.map(item => /*#__PURE__*/_jsx(OutOfTheBoxMapItem, {
|
package/esm/prop-types.js
CHANGED
|
@@ -23,7 +23,8 @@ const leftNavigationProps = {
|
|
|
23
23
|
onFooterClose: PropTypes.func.description('The function to call when the left-nav is closed via the footer'),
|
|
24
24
|
onSelectedChange: PropTypes.func.description('A callback which triggers when the selected item changes').defaultValue(() => null),
|
|
25
25
|
onFocusChange: PropTypes.func.description('A callback which triggers when the focused item changes').defaultValue(() => null),
|
|
26
|
-
items: PropTypes.arrayOf(PropTypes.object).description('The array of items you want to render inside the left nav').defaultValue([])
|
|
26
|
+
items: PropTypes.arrayOf(PropTypes.object).description('The array of items you want to render inside the left nav').defaultValue([]),
|
|
27
|
+
disableDefaultSelection: PropTypes.bool.description('Whether you do not want to automatically select the first body item').defaultValue(false)
|
|
27
28
|
};
|
|
28
29
|
|
|
29
30
|
const LeftNavItemProps = () => null;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-left-navigation",
|
|
3
|
-
"version": "2.0.0
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Left Navigation",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -233,11 +233,11 @@
|
|
|
233
233
|
"generateSubmodules": true
|
|
234
234
|
},
|
|
235
235
|
"dependencies": {
|
|
236
|
-
"@elliemae/ds-circular-progress-indicator": "2.0.0
|
|
237
|
-
"@elliemae/ds-grid": "2.0.0
|
|
238
|
-
"@elliemae/ds-icons": "2.0.0
|
|
239
|
-
"@elliemae/ds-system": "2.0.0
|
|
240
|
-
"@elliemae/ds-truncated-tooltip-text": "2.0.0
|
|
236
|
+
"@elliemae/ds-circular-progress-indicator": "2.0.0",
|
|
237
|
+
"@elliemae/ds-grid": "2.0.0",
|
|
238
|
+
"@elliemae/ds-icons": "2.0.0",
|
|
239
|
+
"@elliemae/ds-system": "2.0.0",
|
|
240
|
+
"@elliemae/ds-truncated-tooltip-text": "2.0.0",
|
|
241
241
|
"overlayscrollbars": "1.13.1",
|
|
242
242
|
"prop-types": "~15.7.2",
|
|
243
243
|
"react-desc": "~4.1.3"
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { GenericItemItemProps } from '../index.d';
|
|
3
|
-
export declare const useSelectFirstBodyItem: (items: GenericItemItemProps[], openedItem: string, selectedItem: string, setSelectedItem: React.Dispatch<React.SetStateAction<string
|
|
3
|
+
export declare const useSelectFirstBodyItem: (items: GenericItemItemProps[], openedItem: string, selectedItem: string, setSelectedItem: React.Dispatch<React.SetStateAction<string>>, disableDefaultSelection: boolean) => void;
|
package/types/index.d.d.ts
CHANGED
|
@@ -19,6 +19,8 @@ export interface LeftNavProps {
|
|
|
19
19
|
loading: boolean;
|
|
20
20
|
selectedItem?: string;
|
|
21
21
|
selectedParent?: string;
|
|
22
|
+
disableDefaultSelection?: boolean;
|
|
23
|
+
withoutBodyShadow?: boolean;
|
|
22
24
|
}
|
|
23
25
|
export declare type OutOfTheBoxT = 'ds-left-nav-item-header' | 'ds-left-nav-item-link' | 'ds-left-nav-item-submenu' | 'ds-left-nav-item-controlled-drilldown' | 'ds-left-nav-item-uncontrolled-drilldown' | 'ds-left-nav-item-section' | 'ds-left-nav-item-separator' | 'ds-left-nav-item-text-label' | 'ds-left-nav-item-with-date';
|
|
24
26
|
export interface itemOptsT {
|
package/types/prop-types.d.ts
CHANGED
|
@@ -75,6 +75,9 @@ export declare const leftNavigationProps: {
|
|
|
75
75
|
items: {
|
|
76
76
|
deprecated: import("react-desc").PropTypesDescValidator;
|
|
77
77
|
};
|
|
78
|
+
disableDefaultSelection: {
|
|
79
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
80
|
+
};
|
|
78
81
|
};
|
|
79
82
|
export declare const LeftNavItemPropsSchema: {
|
|
80
83
|
(props?: unknown): JSX.Element;
|