@elliemae/ds-left-navigation 2.2.0-alpha.1 → 2.2.0-alpha.5
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 +49 -27
- package/cjs/LeftNavigation.js.map +7 -0
- package/cjs/LeftNavigationContext.js +44 -18
- package/cjs/LeftNavigationContext.js.map +7 -0
- package/cjs/common/getItemBackgroundStyle.js +47 -8
- package/cjs/common/getItemBackgroundStyle.js.map +7 -0
- package/cjs/common/getLeftBorderStyle.js +50 -8
- package/cjs/common/getLeftBorderStyle.js.map +7 -0
- package/cjs/common/getScrollbarStyle.js +55 -4
- package/cjs/common/getScrollbarStyle.js.map +7 -0
- package/cjs/common/index.js +30 -13
- package/cjs/common/index.js.map +7 -0
- package/cjs/configs/index.js +38 -10
- package/cjs/configs/index.js.map +7 -0
- package/cjs/configs/useLeftNavConfig.js +76 -72
- package/cjs/configs/useLeftNavConfig.js.map +7 -0
- package/cjs/configs/useLeftNavItems.js +66 -64
- package/cjs/configs/useLeftNavItems.js.map +7 -0
- package/cjs/configs/useLeftNavSmoothExpand.js +42 -21
- package/cjs/configs/useLeftNavSmoothExpand.js.map +7 -0
- package/cjs/exported-related/ChevronItem/index.js +42 -27
- package/cjs/exported-related/ChevronItem/index.js.map +7 -0
- package/cjs/exported-related/Icon/index.js +51 -34
- package/cjs/exported-related/Icon/index.js.map +7 -0
- package/cjs/exported-related/ItemRenderer/index.js +99 -94
- package/cjs/exported-related/ItemRenderer/index.js.map +7 -0
- package/cjs/exported-related/ItemRenderer/styled.js +83 -51
- package/cjs/exported-related/ItemRenderer/styled.js.map +7 -0
- package/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js +57 -45
- package/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js.map +7 -0
- package/cjs/exported-related/Notifications/index.js +81 -61
- package/cjs/exported-related/Notifications/index.js.map +7 -0
- package/cjs/exported-related/OpenWindowItem/index.js +49 -32
- package/cjs/exported-related/OpenWindowItem/index.js.map +7 -0
- package/cjs/exported-related/constants.js +53 -25
- package/cjs/exported-related/constants.js.map +7 -0
- package/cjs/exported-related/index.js +33 -23
- package/cjs/exported-related/index.js.map +7 -0
- package/cjs/hooks/index.js +30 -13
- package/cjs/hooks/index.js.map +7 -0
- package/cjs/hooks/useExpandableOnClickHandler.js +55 -26
- package/cjs/hooks/useExpandableOnClickHandler.js.map +7 -0
- package/cjs/hooks/useKeyboardNavigation.js +62 -54
- package/cjs/hooks/useKeyboardNavigation.js.map +7 -0
- package/cjs/hooks/useOpenableOnClickHandler.js +55 -26
- package/cjs/hooks/useOpenableOnClickHandler.js.map +7 -0
- package/cjs/hooks/useSelectFirstBodyItem.js +46 -30
- package/cjs/hooks/useSelectFirstBodyItem.js.map +7 -0
- package/cjs/index.d.js +27 -2
- package/cjs/index.d.js.map +7 -0
- package/cjs/index.js +41 -30
- package/cjs/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemControlledDrilldown/index.js +97 -103
- package/cjs/outOfTheBox/ItemControlledDrilldown/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemControlledDrilldown/styled.js +49 -27
- package/cjs/outOfTheBox/ItemControlledDrilldown/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemHeader/index.js +95 -91
- package/cjs/outOfTheBox/ItemHeader/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemHeader/styled.js +49 -22
- package/cjs/outOfTheBox/ItemHeader/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemLink/index.js +75 -65
- package/cjs/outOfTheBox/ItemLink/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemLink/styled.js +41 -17
- package/cjs/outOfTheBox/ItemLink/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemSection/index.js +59 -63
- package/cjs/outOfTheBox/ItemSection/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemSection/styled.js +53 -23
- package/cjs/outOfTheBox/ItemSection/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemSeparator/index.js +56 -45
- package/cjs/outOfTheBox/ItemSeparator/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemSubmenu/index.js +95 -90
- package/cjs/outOfTheBox/ItemSubmenu/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemSubmenu/styled.js +49 -22
- package/cjs/outOfTheBox/ItemSubmenu/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemTextLabel/index.js +51 -52
- package/cjs/outOfTheBox/ItemTextLabel/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemTextLabel/styled.js +43 -23
- package/cjs/outOfTheBox/ItemTextLabel/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js +107 -113
- package/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemUncontrolledDrilldown/styled.js +49 -27
- package/cjs/outOfTheBox/ItemUncontrolledDrilldown/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemWithDate/index.js +59 -54
- package/cjs/outOfTheBox/ItemWithDate/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemWithDate/styled.js +49 -27
- package/cjs/outOfTheBox/ItemWithDate/styled.js.map +7 -0
- package/cjs/outOfTheBox/index.js +65 -50
- package/cjs/outOfTheBox/index.js.map +7 -0
- package/cjs/parts/LeftNavContent/index.js +75 -71
- package/cjs/parts/LeftNavContent/index.js.map +7 -0
- package/cjs/parts/LeftNavContent/styled.js +110 -50
- package/cjs/parts/LeftNavContent/styled.js.map +7 -0
- package/cjs/parts/LeftNavContentWithScrollbar/index.js +89 -79
- package/cjs/parts/LeftNavContentWithScrollbar/index.js.map +7 -0
- package/cjs/parts/LeftNavFooterItem/index.js +97 -80
- package/cjs/parts/LeftNavFooterItem/index.js.map +7 -0
- package/cjs/parts/LeftNavFooterItem/styled.js +89 -34
- package/cjs/parts/LeftNavFooterItem/styled.js.map +7 -0
- package/cjs/parts/LeftNavLoading/index.js +51 -33
- package/cjs/parts/LeftNavLoading/index.js.map +7 -0
- package/cjs/parts/OutOfTheBoxMapItem.js +49 -46
- package/cjs/parts/OutOfTheBoxMapItem.js.map +7 -0
- package/cjs/prop-types.js +58 -39
- package/cjs/prop-types.js.map +7 -0
- package/esm/LeftNavigation.js +17 -15
- package/esm/LeftNavigation.js.map +7 -0
- package/esm/LeftNavigationContext.js +15 -11
- package/esm/LeftNavigationContext.js.map +7 -0
- package/esm/common/getItemBackgroundStyle.js +20 -6
- package/esm/common/getItemBackgroundStyle.js.map +7 -0
- package/esm/common/getLeftBorderStyle.js +23 -6
- package/esm/common/getLeftBorderStyle.js.map +7 -0
- package/esm/common/getScrollbarStyle.js +28 -2
- package/esm/common/getScrollbarStyle.js.map +7 -0
- package/esm/common/index.js +5 -3
- package/esm/common/index.js.map +7 -0
- package/esm/configs/index.js +9 -2
- package/esm/configs/index.js.map +7 -0
- package/esm/configs/useLeftNavConfig.js +47 -63
- package/esm/configs/useLeftNavConfig.js.map +7 -0
- package/esm/configs/useLeftNavItems.js +33 -55
- package/esm/configs/useLeftNavItems.js.map +7 -0
- package/esm/configs/useLeftNavSmoothExpand.js +13 -12
- package/esm/configs/useLeftNavSmoothExpand.js.map +7 -0
- package/esm/exported-related/ChevronItem/index.js +13 -18
- package/esm/exported-related/ChevronItem/index.js.map +7 -0
- package/esm/exported-related/Icon/index.js +21 -24
- package/esm/exported-related/Icon/index.js.map +7 -0
- package/esm/exported-related/ItemRenderer/index.js +65 -80
- package/esm/exported-related/ItemRenderer/index.js.map +7 -0
- package/esm/exported-related/ItemRenderer/styled.js +56 -42
- package/esm/exported-related/ItemRenderer/styled.js.map +7 -0
- package/esm/exported-related/ItemRenderer/usePropsWithDefaults.js +27 -36
- package/esm/exported-related/ItemRenderer/usePropsWithDefaults.js.map +7 -0
- package/esm/exported-related/Notifications/index.js +57 -50
- package/esm/exported-related/Notifications/index.js.map +7 -0
- package/esm/exported-related/OpenWindowItem/index.js +20 -22
- package/esm/exported-related/OpenWindowItem/index.js.map +7 -0
- package/esm/exported-related/constants.js +24 -17
- package/esm/exported-related/constants.js.map +7 -0
- package/esm/exported-related/index.js +8 -6
- package/esm/exported-related/index.js.map +7 -0
- package/esm/hooks/index.js +5 -3
- package/esm/hooks/index.js.map +7 -0
- package/esm/hooks/useExpandableOnClickHandler.js +26 -22
- package/esm/hooks/useExpandableOnClickHandler.js.map +7 -0
- package/esm/hooks/useKeyboardNavigation.js +30 -47
- package/esm/hooks/useKeyboardNavigation.js.map +7 -0
- package/esm/hooks/useOpenableOnClickHandler.js +26 -22
- package/esm/hooks/useOpenableOnClickHandler.js.map +7 -0
- package/esm/hooks/useSelectFirstBodyItem.js +17 -26
- package/esm/hooks/useSelectFirstBodyItem.js.map +7 -0
- package/esm/index.d.js +2 -1
- package/esm/index.d.js.map +7 -0
- package/esm/index.js +12 -8
- package/esm/index.js.map +7 -0
- package/esm/outOfTheBox/ItemControlledDrilldown/index.js +62 -87
- package/esm/outOfTheBox/ItemControlledDrilldown/index.js.map +7 -0
- package/esm/outOfTheBox/ItemControlledDrilldown/styled.js +20 -17
- package/esm/outOfTheBox/ItemControlledDrilldown/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemHeader/index.js +65 -80
- package/esm/outOfTheBox/ItemHeader/index.js.map +7 -0
- package/esm/outOfTheBox/ItemHeader/styled.js +20 -12
- package/esm/outOfTheBox/ItemHeader/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemLink/index.js +46 -55
- package/esm/outOfTheBox/ItemLink/index.js.map +7 -0
- package/esm/outOfTheBox/ItemLink/styled.js +12 -8
- package/esm/outOfTheBox/ItemLink/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemSection/index.js +30 -53
- package/esm/outOfTheBox/ItemSection/index.js.map +7 -0
- package/esm/outOfTheBox/ItemSection/styled.js +24 -13
- package/esm/outOfTheBox/ItemSection/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemSeparator/index.js +27 -35
- package/esm/outOfTheBox/ItemSeparator/index.js.map +7 -0
- package/esm/outOfTheBox/ItemSubmenu/index.js +65 -79
- package/esm/outOfTheBox/ItemSubmenu/index.js.map +7 -0
- package/esm/outOfTheBox/ItemSubmenu/styled.js +20 -12
- package/esm/outOfTheBox/ItemSubmenu/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemTextLabel/index.js +22 -43
- package/esm/outOfTheBox/ItemTextLabel/index.js.map +7 -0
- package/esm/outOfTheBox/ItemTextLabel/styled.js +14 -14
- package/esm/outOfTheBox/ItemTextLabel/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js +70 -95
- package/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +7 -0
- package/esm/outOfTheBox/ItemUncontrolledDrilldown/styled.js +20 -17
- package/esm/outOfTheBox/ItemUncontrolledDrilldown/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemWithDate/index.js +30 -44
- package/esm/outOfTheBox/ItemWithDate/index.js.map +7 -0
- package/esm/outOfTheBox/ItemWithDate/styled.js +20 -17
- package/esm/outOfTheBox/ItemWithDate/styled.js.map +7 -0
- package/esm/outOfTheBox/index.js +25 -34
- package/esm/outOfTheBox/index.js.map +7 -0
- package/esm/parts/LeftNavContent/index.js +54 -64
- package/esm/parts/LeftNavContent/index.js.map +7 -0
- package/esm/parts/LeftNavContent/styled.js +81 -36
- package/esm/parts/LeftNavContent/styled.js.map +7 -0
- package/esm/parts/LeftNavContentWithScrollbar/index.js +56 -64
- package/esm/parts/LeftNavContentWithScrollbar/index.js.map +7 -0
- package/esm/parts/LeftNavFooterItem/index.js +73 -68
- package/esm/parts/LeftNavFooterItem/index.js.map +7 -0
- package/esm/parts/LeftNavFooterItem/styled.js +63 -24
- package/esm/parts/LeftNavFooterItem/styled.js.map +7 -0
- package/esm/parts/LeftNavLoading/index.js +22 -22
- package/esm/parts/LeftNavLoading/index.js.map +7 -0
- package/esm/parts/OutOfTheBoxMapItem.js +19 -35
- package/esm/parts/OutOfTheBoxMapItem.js.map +7 -0
- package/esm/prop-types.js +26 -29
- package/esm/prop-types.js.map +7 -0
- package/package.json +6 -6
|
@@ -1,48 +1,32 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
|
|
11
|
-
import { CHEVRON_BACK_DS_ID } from '../../exported-related/constants.js';
|
|
12
|
-
import { ItemRenderer } from '../../exported-related/ItemRenderer/index.js';
|
|
13
|
-
import '@elliemae/ds-icons';
|
|
14
|
-
import 'react/jsx-runtime';
|
|
15
|
-
import 'styled-components';
|
|
16
|
-
import { StyledChevronLeft, StyledLabel } from './styled.js';
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useCallback } from "react";
|
|
3
|
+
import Grid from "@elliemae/ds-grid";
|
|
4
|
+
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
5
|
+
import { ItemRenderer } from "../../exported-related/index";
|
|
6
|
+
import { StyledLabel, StyledChevronLeft } from "./styled";
|
|
7
|
+
import { CHEVRON_BACK_DS_ID } from "../../exported-related/constants";
|
|
8
|
+
const notOpenedShadowStyle = (isSelected) => (theme) => `
|
|
9
|
+
box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : "transparent"};
|
|
17
10
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
const notOpenedShadowStyle = isSelected => theme => "\n box-shadow: inset 4px 0 0 0 ".concat(isSelected ? theme.colors.brand[400] : 'transparent', ";\n\n :hover {\n box-shadow: inset 4px 0 0 0 ").concat(isSelected ? theme.colors.brand[400] : theme.colors.brand[300], ";\n }\n\n :active {\n box-shadow: inset 4px 0 0 0 ").concat(theme.colors.brand[400], ";\n }\n");
|
|
23
|
-
|
|
24
|
-
const ItemHeader = props => {
|
|
25
|
-
var _item$itemOpts$ariaLa;
|
|
11
|
+
:hover {
|
|
12
|
+
box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};
|
|
13
|
+
}
|
|
26
14
|
|
|
15
|
+
:active {
|
|
16
|
+
box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
|
|
17
|
+
}
|
|
18
|
+
`;
|
|
19
|
+
const ItemHeader = (props) => {
|
|
27
20
|
const {
|
|
28
21
|
item,
|
|
29
22
|
item: {
|
|
30
23
|
dsId,
|
|
31
|
-
itemOpts: {
|
|
32
|
-
label,
|
|
33
|
-
RightComponent,
|
|
34
|
-
BottomComponent,
|
|
35
|
-
labelDataTestId
|
|
36
|
-
},
|
|
24
|
+
itemOpts: { label, RightComponent, BottomComponent, labelDataTestId },
|
|
37
25
|
CollapsedComponent = () => null
|
|
38
26
|
},
|
|
39
27
|
ctx,
|
|
40
28
|
ctx: {
|
|
41
|
-
leftNavProps: {
|
|
42
|
-
openedItem,
|
|
43
|
-
labelOverflow,
|
|
44
|
-
onItemClick
|
|
45
|
-
},
|
|
29
|
+
leftNavProps: { openedItem, labelOverflow, onItemClick },
|
|
46
30
|
expandedForAnimation,
|
|
47
31
|
setFocusedItem,
|
|
48
32
|
selectedItem,
|
|
@@ -50,83 +34,84 @@ const ItemHeader = props => {
|
|
|
50
34
|
}
|
|
51
35
|
} = props;
|
|
52
36
|
const opened = openedItem === dsId;
|
|
53
|
-
const ariaLabel =
|
|
37
|
+
const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === "string" ? label : "menuitem");
|
|
54
38
|
const isSelected = selectedItem === dsId || selectedParent === dsId;
|
|
55
|
-
const shadowStyle = useCallback(
|
|
56
|
-
return
|
|
57
|
-
item:
|
|
58
|
-
|
|
39
|
+
const shadowStyle = useCallback((opened2) => (theme) => !opened2 ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`, [isSelected, openedItem]);
|
|
40
|
+
return /* @__PURE__ */ React2.createElement(ItemRenderer, {
|
|
41
|
+
item: {
|
|
42
|
+
...item,
|
|
43
|
+
itemOpts: {
|
|
59
44
|
ariaLabel,
|
|
60
|
-
ariaExpanded: opened
|
|
61
|
-
|
|
45
|
+
ariaExpanded: opened,
|
|
46
|
+
...item.itemOpts,
|
|
62
47
|
openable: expandedForAnimation && !opened,
|
|
63
48
|
closable: expandedForAnimation && opened,
|
|
64
49
|
selectable: !opened
|
|
65
|
-
}
|
|
66
|
-
}
|
|
50
|
+
}
|
|
51
|
+
},
|
|
67
52
|
hasBorderBottom: true,
|
|
68
|
-
borderBottomMr: opened ?
|
|
69
|
-
shadowStyle
|
|
70
|
-
},
|
|
71
|
-
cols: opened ? [
|
|
53
|
+
borderBottomMr: opened ? "12px" : "0px",
|
|
54
|
+
shadowStyle
|
|
55
|
+
}, /* @__PURE__ */ React2.createElement(Grid, {
|
|
56
|
+
cols: opened ? ["auto", "auto"] : ["38px"],
|
|
72
57
|
gutter: "1px",
|
|
73
|
-
pl: opened ?
|
|
58
|
+
pl: opened ? "xxs" : 0,
|
|
74
59
|
justifyItems: "center",
|
|
75
60
|
"data-testid": "leftnav-leftcomponent"
|
|
76
|
-
},
|
|
61
|
+
}, opened && /* @__PURE__ */ React2.createElement(StyledChevronLeft, {
|
|
77
62
|
size: "m",
|
|
78
|
-
color: [
|
|
79
|
-
onClick: e => {
|
|
63
|
+
color: ["brand-primary", 800],
|
|
64
|
+
onClick: (e) => {
|
|
80
65
|
onItemClick(item, e);
|
|
81
66
|
},
|
|
82
67
|
"data-testid": "leftnav-leftcomponent-chevron",
|
|
83
68
|
tabIndex: 0,
|
|
84
|
-
onFocus: e => {
|
|
69
|
+
onFocus: (e) => {
|
|
85
70
|
e.stopPropagation();
|
|
86
71
|
setFocusedItem(CHEVRON_BACK_DS_ID);
|
|
87
72
|
},
|
|
88
73
|
role: "button",
|
|
89
|
-
"aria-label":
|
|
90
|
-
}),
|
|
91
|
-
item
|
|
92
|
-
ctx
|
|
93
|
-
})),
|
|
94
|
-
ml: opened ?
|
|
74
|
+
"aria-label": `Close ${ariaLabel}`
|
|
75
|
+
}), /* @__PURE__ */ React2.createElement(CollapsedComponent, {
|
|
76
|
+
item,
|
|
77
|
+
ctx
|
|
78
|
+
})), /* @__PURE__ */ React2.createElement(StyledLabel, {
|
|
79
|
+
ml: opened ? "xxs" : "1px",
|
|
95
80
|
mt: "xxxs",
|
|
96
81
|
mb: "15px",
|
|
97
|
-
"data-testid": labelDataTestId ||
|
|
98
|
-
labelOverflow
|
|
99
|
-
},
|
|
82
|
+
"data-testid": labelDataTestId || "leftnav-itemlabel",
|
|
83
|
+
labelOverflow
|
|
84
|
+
}, labelOverflow === "truncate" ? /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
|
|
100
85
|
value: label,
|
|
101
86
|
placement: "bottom-start"
|
|
102
|
-
}) : label),
|
|
87
|
+
}) : label), /* @__PURE__ */ React2.createElement(Grid, {
|
|
103
88
|
pl: "xs",
|
|
104
|
-
pr: opened ?
|
|
105
|
-
onFocus: e => {
|
|
89
|
+
pr: opened ? "xxs2" : "xxs",
|
|
90
|
+
onFocus: (e) => {
|
|
106
91
|
setFocusedItem(null);
|
|
107
92
|
e.stopPropagation();
|
|
108
93
|
},
|
|
109
|
-
onKeyDown: e => e.stopPropagation(),
|
|
94
|
+
onKeyDown: (e) => e.stopPropagation(),
|
|
110
95
|
"data-testid": "leftnav-right-component"
|
|
111
|
-
},
|
|
112
|
-
ctx
|
|
113
|
-
item
|
|
114
|
-
})), BottomComponent &&
|
|
115
|
-
style: {
|
|
116
|
-
gridColumn: 'span 3'
|
|
117
|
-
},
|
|
96
|
+
}, RightComponent && /* @__PURE__ */ React2.createElement(RightComponent, {
|
|
97
|
+
ctx,
|
|
98
|
+
item
|
|
99
|
+
})), BottomComponent && /* @__PURE__ */ React2.createElement(Grid, {
|
|
100
|
+
style: { gridColumn: "span 3" },
|
|
118
101
|
pb: "xxxs",
|
|
119
102
|
pl: "xxs",
|
|
120
103
|
pr: "xxs",
|
|
121
|
-
onFocus: e => {
|
|
104
|
+
onFocus: (e) => {
|
|
122
105
|
setFocusedItem(null);
|
|
123
106
|
e.stopPropagation();
|
|
124
107
|
},
|
|
125
|
-
onKeyDown: e => e.stopPropagation()
|
|
126
|
-
},
|
|
127
|
-
ctx
|
|
128
|
-
item
|
|
108
|
+
onKeyDown: (e) => e.stopPropagation()
|
|
109
|
+
}, /* @__PURE__ */ React2.createElement(BottomComponent, {
|
|
110
|
+
ctx,
|
|
111
|
+
item
|
|
129
112
|
})));
|
|
130
113
|
};
|
|
131
|
-
|
|
132
|
-
|
|
114
|
+
export {
|
|
115
|
+
ItemHeader
|
|
116
|
+
};
|
|
117
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemHeader/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useCallback } from 'react';\nimport Grid from '@elliemae/ds-grid';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ItemRenderer } from '../../exported-related/index';\nimport type { ComponentProps } from '../../index.d';\nimport { StyledLabel, StyledChevronLeft } from './styled';\nimport { CHEVRON_BACK_DS_ID } from '../../exported-related/constants';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst notOpenedShadowStyle = (isSelected: boolean) => (theme: any) =>\n `\n box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};\n\n :hover {\n box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};\n }\n\n :active {\n box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};\n }\n`;\n\nexport const ItemHeader = (props: ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n dsId,\n itemOpts: { label, RightComponent, BottomComponent, labelDataTestId },\n CollapsedComponent = () => null,\n },\n ctx,\n ctx: {\n leftNavProps: { openedItem, labelOverflow, onItemClick },\n expandedForAnimation,\n setFocusedItem,\n selectedItem,\n selectedParent,\n },\n } = props;\n\n const opened = openedItem === dsId;\n\n const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? label : 'menuitem');\n\n const isSelected = selectedItem === dsId || selectedParent === dsId;\n\n const shadowStyle = useCallback(\n (opened) => (theme: any) =>\n !opened ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n [isSelected, openedItem],\n );\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ariaLabel,\n ariaExpanded: opened,\n ...item.itemOpts,\n openable: expandedForAnimation && !opened,\n closable: expandedForAnimation && opened,\n selectable: !opened,\n },\n }}\n hasBorderBottom\n borderBottomMr={opened ? '12px' : '0px'}\n shadowStyle={shadowStyle}\n >\n <Grid\n cols={opened ? ['auto', 'auto'] : ['38px']}\n gutter=\"1px\"\n pl={opened ? 'xxs' : 0}\n justifyItems=\"center\"\n data-testid=\"leftnav-leftcomponent\"\n >\n {opened && (\n <StyledChevronLeft\n size=\"m\"\n color={['brand-primary', 800]}\n onClick={(e) => {\n onItemClick(item, e);\n }}\n data-testid=\"leftnav-leftcomponent-chevron\"\n tabIndex={0}\n onFocus={(e) => {\n e.stopPropagation();\n setFocusedItem(CHEVRON_BACK_DS_ID);\n }}\n role=\"button\"\n aria-label={`Close ${ariaLabel}`}\n />\n )}\n <CollapsedComponent item={item} ctx={ctx} />\n </Grid>\n <StyledLabel\n ml={opened ? 'xxs' : '1px'}\n mt=\"xxxs\"\n mb=\"15px\"\n data-testid={labelDataTestId || 'leftnav-itemlabel'}\n labelOverflow={labelOverflow}\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledLabel>\n <Grid\n pl=\"xs\"\n pr={opened ? 'xxs2' : 'xxs'}\n onFocus={(e) => {\n setFocusedItem(null);\n e.stopPropagation();\n }}\n onKeyDown={(e) => e.stopPropagation()}\n data-testid=\"leftnav-right-component\"\n >\n {RightComponent && <RightComponent ctx={ctx} item={item} />}\n </Grid>\n {BottomComponent && (\n <Grid\n style={{ gridColumn: 'span 3' }}\n pb=\"xxxs\"\n pl=\"xxs\"\n pr=\"xxs\"\n onFocus={(e) => {\n setFocusedItem(null);\n e.stopPropagation();\n }}\n onKeyDown={(e) => e.stopPropagation()}\n >\n <BottomComponent ctx={ctx} item={item} />\n </Grid>\n )}\n </ItemRenderer>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACEA;AACA;AACA;AACA;AAEA;AACA;AAGA,MAAM,uBAAuB,CAAC,eAAwB,CAAC,UACrD;AAAA,gCAC8B,aAAa,MAAM,OAAO,MAAM,OAAO;AAAA;AAAA;AAAA,kCAGrC,aAAa,MAAM,OAAO,MAAM,OAAO,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,kCAI1D,MAAM,OAAO,MAAM;AAAA;AAAA;AAI9C,MAAM,aAAa,CAAC,UAAuC;AAChE,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,OAAO,gBAAgB,iBAAiB;AAAA,MACpD,qBAAqB,MAAM;AAAA;AAAA,IAE7B;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,YAAY,eAAe;AAAA,MAC3C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAEJ,QAAM,SAAS,eAAe;AAE9B,QAAM,YAAY,KAAK,SAAS,aAAc,QAAO,UAAU,WAAW,QAAQ;AAElF,QAAM,aAAa,iBAAiB,QAAQ,mBAAmB;AAE/D,QAAM,cAAc,YAClB,CAAC,YAAW,CAAC,UACX,CAAC,UAAS,qBAAqB,YAAY,SAAS,uCACtD,CAAC,YAAY;AAGf,SACE,qCAAC,cAAD;AAAA,IACE,MAAM;AAAA,SACD;AAAA,MACH,UAAU;AAAA,QACR;AAAA,QACA,cAAc;AAAA,WACX,KAAK;AAAA,QACR,UAAU,wBAAwB,CAAC;AAAA,QACnC,UAAU,wBAAwB;AAAA,QAClC,YAAY,CAAC;AAAA;AAAA;AAAA,IAGjB,iBAAe;AAAA,IACf,gBAAgB,SAAS,SAAS;AAAA,IAClC;AAAA,KAEA,qCAAC,MAAD;AAAA,IACE,MAAM,SAAS,CAAC,QAAQ,UAAU,CAAC;AAAA,IACnC,QAAO;AAAA,IACP,IAAI,SAAS,QAAQ;AAAA,IACrB,cAAa;AAAA,IACb,eAAY;AAAA,KAEX,UACC,qCAAC,mBAAD;AAAA,IACE,MAAK;AAAA,IACL,OAAO,CAAC,iBAAiB;AAAA,IACzB,SAAS,CAAC,MAAM;AACd,kBAAY,MAAM;AAAA;AAAA,IAEpB,eAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS,CAAC,MAAM;AACd,QAAE;AACF,qBAAe;AAAA;AAAA,IAEjB,MAAK;AAAA,IACL,cAAY,SAAS;AAAA,MAGzB,qCAAC,oBAAD;AAAA,IAAoB;AAAA,IAAY;AAAA,OAElC,qCAAC,aAAD;AAAA,IACE,IAAI,SAAS,QAAQ;AAAA,IACrB,IAAG;AAAA,IACH,IAAG;AAAA,IACH,eAAa,mBAAmB;AAAA,IAChC;AAAA,KAEC,kBAAkB,aAAa,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA,IAAO,WAAU;AAAA,OAAoB,QAE1G,qCAAC,MAAD;AAAA,IACE,IAAG;AAAA,IACH,IAAI,SAAS,SAAS;AAAA,IACtB,SAAS,CAAC,MAAM;AACd,qBAAe;AACf,QAAE;AAAA;AAAA,IAEJ,WAAW,CAAC,MAAM,EAAE;AAAA,IACpB,eAAY;AAAA,KAEX,kBAAkB,qCAAC,gBAAD;AAAA,IAAgB;AAAA,IAAU;AAAA,OAE9C,mBACC,qCAAC,MAAD;AAAA,IACE,OAAO,EAAE,YAAY;AAAA,IACrB,IAAG;AAAA,IACH,IAAG;AAAA,IACH,IAAG;AAAA,IACH,SAAS,CAAC,MAAM;AACd,qBAAe;AACf,QAAE;AAAA;AAAA,IAEJ,WAAW,CAAC,MAAM,EAAE;AAAA,KAEpB,qCAAC,iBAAD;AAAA,IAAiB;AAAA,IAAU;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,12 +1,20 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
const StyledLabel =
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import Grid from "@elliemae/ds-grid";
|
|
3
|
+
import { ChevronSmallLeft } from "@elliemae/ds-icons";
|
|
4
|
+
import styled from "styled-components";
|
|
5
|
+
const StyledLabel = styled(Grid)`
|
|
6
|
+
font-size: 14px;
|
|
7
|
+
color: ${(props) => props.theme.colors.neutral[800]};
|
|
8
|
+
word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
|
|
9
|
+
`;
|
|
10
|
+
const StyledChevronLeft = styled(ChevronSmallLeft)`
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
:focus {
|
|
13
|
+
outline: 2px solid ${(props) => props.theme.colors.brand[800]};
|
|
14
|
+
}
|
|
15
|
+
`;
|
|
16
|
+
export {
|
|
17
|
+
StyledChevronLeft,
|
|
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/ItemHeader/styled.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import Grid from '@elliemae/ds-grid';\nimport { ChevronSmallLeft } from '@elliemae/ds-icons';\nimport styled from 'styled-components';\n\nexport const StyledLabel = styled(Grid)`\n font-size: 14px;\n color: ${(props) => props.theme.colors.neutral[800]};\n word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n`;\n\nexport const StyledChevronLeft = styled(ChevronSmallLeft)`\n cursor: pointer;\n :focus {\n outline: 2px solid ${(props) => props.theme.colors.brand[800]};\n }\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AAEO,MAAM,cAAc,OAAO;AAAA;AAAA,WAEvB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACjC,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc;AAAA;AAGvE,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA,yBAGf,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,85 +1,76 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
import Grid from '@elliemae/ds-grid';
|
|
10
|
-
import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
|
|
11
|
-
import { ItemRenderer } from '../../exported-related/ItemRenderer/index.js';
|
|
12
|
-
import '@elliemae/ds-icons';
|
|
13
|
-
import 'react/jsx-runtime';
|
|
14
|
-
import 'styled-components';
|
|
15
|
-
import { StyledLabel } from './styled.js';
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useCallback } from "react";
|
|
3
|
+
import Grid from "@elliemae/ds-grid";
|
|
4
|
+
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
5
|
+
import { ItemRenderer } from "../../exported-related/index";
|
|
6
|
+
import { StyledLabel } from "./styled";
|
|
7
|
+
const notOpenedShadowStyle = (isSelected) => (theme) => `
|
|
8
|
+
box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : "transparent"};
|
|
16
9
|
|
|
17
|
-
|
|
10
|
+
:hover {
|
|
11
|
+
box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};
|
|
12
|
+
}
|
|
18
13
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
const ItemLink = props => {
|
|
14
|
+
:active {
|
|
15
|
+
box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
|
|
16
|
+
}
|
|
17
|
+
`;
|
|
18
|
+
const ItemLink = (props) => {
|
|
24
19
|
const {
|
|
25
20
|
item,
|
|
26
21
|
item: {
|
|
27
22
|
dsId,
|
|
28
|
-
itemOpts: {
|
|
29
|
-
label,
|
|
30
|
-
RightComponent,
|
|
31
|
-
labelDataTestId
|
|
32
|
-
},
|
|
23
|
+
itemOpts: { label, RightComponent, labelDataTestId },
|
|
33
24
|
CollapsedComponent = () => null
|
|
34
25
|
},
|
|
35
26
|
ctx,
|
|
36
27
|
ctx: {
|
|
37
|
-
leftNavProps: {
|
|
38
|
-
labelOverflow,
|
|
39
|
-
openedItem
|
|
40
|
-
},
|
|
28
|
+
leftNavProps: { labelOverflow, openedItem },
|
|
41
29
|
selectedItem,
|
|
42
30
|
selectedParent
|
|
43
31
|
}
|
|
44
32
|
} = props;
|
|
45
33
|
const isSelected = selectedItem === dsId || selectedParent === dsId;
|
|
46
|
-
const shadowStyle = useCallback(opened => theme => !opened ? notOpenedShadowStyle(isSelected)(theme) :
|
|
47
|
-
return
|
|
48
|
-
item:
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
34
|
+
const shadowStyle = useCallback((opened) => (theme) => !opened ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`, [isSelected, openedItem]);
|
|
35
|
+
return /* @__PURE__ */ React2.createElement(ItemRenderer, {
|
|
36
|
+
item: {
|
|
37
|
+
...item,
|
|
38
|
+
itemOpts: {
|
|
39
|
+
ariaLabel: typeof label === "string" ? label : "",
|
|
40
|
+
ariaRole: "link",
|
|
41
|
+
...item.itemOpts,
|
|
53
42
|
selectable: true
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
shadowStyle
|
|
57
|
-
},
|
|
58
|
-
cols: [
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
shadowStyle
|
|
46
|
+
}, /* @__PURE__ */ React2.createElement(Grid, {
|
|
47
|
+
cols: ["38px"],
|
|
59
48
|
gutter: "1px",
|
|
60
49
|
pl: 0,
|
|
61
50
|
justifyItems: "center",
|
|
62
51
|
"data-testid": "leftnav-leftcomponent"
|
|
63
|
-
},
|
|
64
|
-
item
|
|
65
|
-
ctx
|
|
66
|
-
})),
|
|
52
|
+
}, /* @__PURE__ */ React2.createElement(CollapsedComponent, {
|
|
53
|
+
item,
|
|
54
|
+
ctx
|
|
55
|
+
})), /* @__PURE__ */ React2.createElement(StyledLabel, {
|
|
67
56
|
ml: "1px",
|
|
68
57
|
mt: "xxxs",
|
|
69
58
|
mb: "15px",
|
|
70
|
-
"data-testid": labelDataTestId ||
|
|
71
|
-
labelOverflow
|
|
72
|
-
},
|
|
59
|
+
"data-testid": labelDataTestId || "leftnav-itemlabel",
|
|
60
|
+
labelOverflow
|
|
61
|
+
}, labelOverflow === "truncate" ? /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
|
|
73
62
|
value: label,
|
|
74
63
|
placement: "bottom-start"
|
|
75
|
-
}) : label),
|
|
64
|
+
}) : label), /* @__PURE__ */ React2.createElement(Grid, {
|
|
76
65
|
mt: "xxxs",
|
|
77
66
|
pr: "xxs2",
|
|
78
67
|
"data-testid": "leftnav-right-component"
|
|
79
|
-
},
|
|
80
|
-
ctx
|
|
81
|
-
item
|
|
68
|
+
}, RightComponent && /* @__PURE__ */ React2.createElement(RightComponent, {
|
|
69
|
+
ctx,
|
|
70
|
+
item
|
|
82
71
|
})));
|
|
83
72
|
};
|
|
84
|
-
|
|
85
|
-
|
|
73
|
+
export {
|
|
74
|
+
ItemLink
|
|
75
|
+
};
|
|
76
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemLink/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React, { useCallback } from 'react';\nimport Grid from '@elliemae/ds-grid';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ItemRenderer } from '../../exported-related/index';\nimport type { ComponentProps } from '../../index.d';\nimport { StyledLabel } from './styled';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst notOpenedShadowStyle = (isSelected: boolean) => (theme: any) =>\n `\n box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};\n\n :hover {\n box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};\n }\n\n :active {\n box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};\n }\n`;\n\nexport const ItemLink = (props: ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n dsId,\n itemOpts: { label, RightComponent, labelDataTestId },\n CollapsedComponent = () => null,\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow, openedItem },\n selectedItem,\n selectedParent,\n },\n } = props;\n\n const isSelected = selectedItem === dsId || selectedParent === dsId;\n\n const shadowStyle = useCallback(\n (opened) => (theme: any) => !opened ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n [isSelected, openedItem],\n );\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ariaLabel: typeof label === 'string' ? label : '',\n ariaRole: 'link',\n ...item.itemOpts,\n selectable: true,\n },\n }}\n shadowStyle={shadowStyle}\n >\n <Grid cols={['38px']} gutter=\"1px\" pl={0} justifyItems=\"center\" data-testid=\"leftnav-leftcomponent\">\n <CollapsedComponent item={item} ctx={ctx} />\n </Grid>\n <StyledLabel\n ml=\"1px\"\n mt=\"xxxs\"\n mb=\"15px\"\n data-testid={labelDataTestId || 'leftnav-itemlabel'}\n labelOverflow={labelOverflow}\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledLabel>\n <Grid mt=\"xxxs\" pr=\"xxs2\" data-testid=\"leftnav-right-component\">\n {RightComponent && <RightComponent ctx={ctx} item={item} />}\n </Grid>\n </ItemRenderer>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEA;AAGA,MAAM,uBAAuB,CAAC,eAAwB,CAAC,UACrD;AAAA,gCAC8B,aAAa,MAAM,OAAO,MAAM,OAAO;AAAA;AAAA;AAAA,kCAGrC,aAAa,MAAM,OAAO,MAAM,OAAO,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,kCAI1D,MAAM,OAAO,MAAM;AAAA;AAAA;AAI9C,MAAM,WAAW,CAAC,UAAuC;AAC9D,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,OAAO,gBAAgB;AAAA,MACnC,qBAAqB,MAAM;AAAA;AAAA,IAE7B;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe;AAAA,MAC/B;AAAA,MACA;AAAA;AAAA,MAEA;AAEJ,QAAM,aAAa,iBAAiB,QAAQ,mBAAmB;AAE/D,QAAM,cAAc,YAClB,CAAC,WAAW,CAAC,UAAe,CAAC,SAAS,qBAAqB,YAAY,SAAS,uCAChF,CAAC,YAAY;AAGf,SACE,qCAAC,cAAD;AAAA,IACE,MAAM;AAAA,SACD;AAAA,MACH,UAAU;AAAA,QACR,WAAW,OAAO,UAAU,WAAW,QAAQ;AAAA,QAC/C,UAAU;AAAA,WACP,KAAK;AAAA,QACR,YAAY;AAAA;AAAA;AAAA,IAGhB;AAAA,KAEA,qCAAC,MAAD;AAAA,IAAM,MAAM,CAAC;AAAA,IAAS,QAAO;AAAA,IAAM,IAAI;AAAA,IAAG,cAAa;AAAA,IAAS,eAAY;AAAA,KAC1E,qCAAC,oBAAD;AAAA,IAAoB;AAAA,IAAY;AAAA,OAElC,qCAAC,aAAD;AAAA,IACE,IAAG;AAAA,IACH,IAAG;AAAA,IACH,IAAG;AAAA,IACH,eAAa,mBAAmB;AAAA,IAChC;AAAA,KAEC,kBAAkB,aAAa,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA,IAAO,WAAU;AAAA,OAAoB,QAE1G,qCAAC,MAAD;AAAA,IAAM,IAAG;AAAA,IAAO,IAAG;AAAA,IAAO,eAAY;AAAA,KACnC,kBAAkB,qCAAC,gBAAD;AAAA,IAAgB;AAAA,IAAU;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,8 +1,12 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
const StyledLabel =
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import Grid from "@elliemae/ds-grid";
|
|
3
|
+
import styled from "styled-components";
|
|
4
|
+
const StyledLabel = styled(Grid)`
|
|
5
|
+
font-size: 14px;
|
|
6
|
+
color: ${(props) => props.theme.colors.neutral[800]};
|
|
7
|
+
word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
|
|
8
|
+
`;
|
|
9
|
+
export {
|
|
10
|
+
StyledLabel
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemLink/styled.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import Grid from '@elliemae/ds-grid';\nimport styled from 'styled-components';\n\nexport const StyledLabel = styled(Grid)`\n font-size: 14px;\n color: ${(props) => props.theme.colors.neutral[800]};\n word-break: ${(props) =>\n props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal'};\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEO,MAAM,cAAc,OAAO;AAAA;AAAA,WAEvB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACjC,CAAC,UACb,MAAM,kBAAkB,YAAY,cAAc;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,73 +1,50 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
8
|
-
import 'react';
|
|
9
|
-
import Grid from '@elliemae/ds-grid';
|
|
10
|
-
import { ItemRenderer } from '../../exported-related/ItemRenderer/index.js';
|
|
11
|
-
import '@elliemae/ds-icons';
|
|
12
|
-
import 'react/jsx-runtime';
|
|
13
|
-
import 'styled-components';
|
|
14
|
-
import { StyledLabel, StyledVerticalSeparator, StyledRightLabel } from './styled.js';
|
|
15
|
-
|
|
16
|
-
var _div, _StyledVerticalSepara;
|
|
17
|
-
|
|
18
|
-
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; }
|
|
19
|
-
|
|
20
|
-
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; }
|
|
21
|
-
const ItemSection = props => {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import Grid from "@elliemae/ds-grid";
|
|
4
|
+
import { ItemRenderer } from "../../exported-related/index";
|
|
5
|
+
import { StyledLabel, StyledRightLabel, StyledVerticalSeparator } from "./styled";
|
|
6
|
+
const ItemSection = (props) => {
|
|
22
7
|
const {
|
|
23
8
|
item,
|
|
24
9
|
item: {
|
|
25
|
-
itemOpts: {
|
|
26
|
-
label,
|
|
27
|
-
LeftComponent,
|
|
28
|
-
RightComponent,
|
|
29
|
-
labelRightSection,
|
|
30
|
-
labelDataTestId
|
|
31
|
-
}
|
|
10
|
+
itemOpts: { label, LeftComponent, RightComponent, labelRightSection, labelDataTestId }
|
|
32
11
|
},
|
|
33
12
|
ctx,
|
|
34
|
-
ctx: {
|
|
35
|
-
setFocusedItem
|
|
36
|
-
}
|
|
13
|
+
ctx: { setFocusedItem }
|
|
37
14
|
} = props;
|
|
38
|
-
return
|
|
39
|
-
item:
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
focuseable: false
|
|
43
|
-
}),
|
|
15
|
+
return /* @__PURE__ */ React2.createElement(ItemRenderer, {
|
|
16
|
+
item: {
|
|
17
|
+
...item,
|
|
18
|
+
itemOpts: { ...item.itemOpts, selectable: false, focuseable: false },
|
|
44
19
|
CollapsedComponent: null
|
|
45
|
-
}
|
|
20
|
+
},
|
|
46
21
|
minHeight: "32px",
|
|
47
22
|
paddingTop: "8px"
|
|
48
|
-
},
|
|
49
|
-
cols: [
|
|
23
|
+
}, /* @__PURE__ */ React2.createElement(Grid, {
|
|
24
|
+
cols: ["min-content", "auto", "min-content", "auto"],
|
|
50
25
|
pl: "xxs",
|
|
51
26
|
alignItems: "center"
|
|
52
|
-
},
|
|
53
|
-
ctx
|
|
54
|
-
item
|
|
55
|
-
}) :
|
|
56
|
-
"data-testid": labelDataTestId ||
|
|
57
|
-
},
|
|
27
|
+
}, LeftComponent ? /* @__PURE__ */ React2.createElement(LeftComponent, {
|
|
28
|
+
ctx,
|
|
29
|
+
item
|
|
30
|
+
}) : /* @__PURE__ */ React2.createElement("div", null), /* @__PURE__ */ React2.createElement(StyledLabel, {
|
|
31
|
+
"data-testid": labelDataTestId || "leftnav-section-item-label"
|
|
32
|
+
}, label), /* @__PURE__ */ React2.createElement(StyledVerticalSeparator, null), /* @__PURE__ */ React2.createElement(StyledRightLabel, null, labelRightSection)), /* @__PURE__ */ React2.createElement(Grid, {
|
|
58
33
|
ml: "auto",
|
|
59
|
-
onFocus: e => {
|
|
34
|
+
onFocus: (e) => {
|
|
60
35
|
setFocusedItem(null);
|
|
61
36
|
e.stopPropagation();
|
|
62
37
|
},
|
|
63
|
-
onKeyDown: e => e.stopPropagation(),
|
|
38
|
+
onKeyDown: (e) => e.stopPropagation(),
|
|
64
39
|
pr: "xxs2",
|
|
65
40
|
alignItems: "center",
|
|
66
41
|
"data-testid": "leftnav-right-component"
|
|
67
|
-
},
|
|
68
|
-
ctx
|
|
69
|
-
item
|
|
42
|
+
}, RightComponent && /* @__PURE__ */ React2.createElement(RightComponent, {
|
|
43
|
+
ctx,
|
|
44
|
+
item
|
|
70
45
|
})));
|
|
71
46
|
};
|
|
72
|
-
|
|
73
|
-
|
|
47
|
+
export {
|
|
48
|
+
ItemSection
|
|
49
|
+
};
|
|
50
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemSection/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport Grid from '@elliemae/ds-grid';\nimport { ItemRenderer } from '../../exported-related/index';\nimport type { ComponentProps } from '../../index.d';\nimport { StyledLabel, StyledRightLabel, StyledVerticalSeparator } from './styled';\n\nexport const ItemSection = (props: ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n itemOpts: { label, LeftComponent, RightComponent, labelRightSection, labelDataTestId },\n },\n ctx,\n ctx: { setFocusedItem },\n } = props;\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: { ...item.itemOpts, selectable: false, focuseable: false },\n CollapsedComponent: null,\n }}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n <Grid cols={['min-content', 'auto', 'min-content', 'auto']} pl=\"xxs\" alignItems=\"center\">\n {LeftComponent ? <LeftComponent ctx={ctx} item={item} /> : <div />}\n <StyledLabel data-testid={labelDataTestId || 'leftnav-section-item-label'}>{label}</StyledLabel>\n <StyledVerticalSeparator />\n <StyledRightLabel>{labelRightSection}</StyledRightLabel>\n </Grid>\n <Grid\n ml=\"auto\"\n onFocus={(e) => {\n setFocusedItem(null);\n e.stopPropagation();\n }}\n onKeyDown={(e) => e.stopPropagation()}\n pr=\"xxs2\"\n alignItems=\"center\"\n data-testid=\"leftnav-right-component\"\n >\n {RightComponent && <RightComponent ctx={ctx} item={item} />}\n </Grid>\n </ItemRenderer>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAEO,MAAM,cAAc,CAAC,UAAuC;AACjE,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU,EAAE,OAAO,eAAe,gBAAgB,mBAAmB;AAAA;AAAA,IAEvE;AAAA,IACA,KAAK,EAAE;AAAA,MACL;AAEJ,SACE,qCAAC,cAAD;AAAA,IACE,MAAM;AAAA,SACD;AAAA,MACH,UAAU,KAAK,KAAK,UAAU,YAAY,OAAO,YAAY;AAAA,MAC7D,oBAAoB;AAAA;AAAA,IAEtB,WAAU;AAAA,IACV,YAAW;AAAA,KAEX,qCAAC,MAAD;AAAA,IAAM,MAAM,CAAC,eAAe,QAAQ,eAAe;AAAA,IAAS,IAAG;AAAA,IAAM,YAAW;AAAA,KAC7E,gBAAgB,qCAAC,eAAD;AAAA,IAAe;AAAA,IAAU;AAAA,OAAiB,qCAAC,OAAD,OAC3D,qCAAC,aAAD;AAAA,IAAa,eAAa,mBAAmB;AAAA,KAA+B,QAC5E,qCAAC,yBAAD,OACA,qCAAC,kBAAD,MAAmB,qBAErB,qCAAC,MAAD;AAAA,IACE,IAAG;AAAA,IACH,SAAS,CAAC,MAAM;AACd,qBAAe;AACf,QAAE;AAAA;AAAA,IAEJ,WAAW,CAAC,MAAM,EAAE;AAAA,IACpB,IAAG;AAAA,IACH,YAAW;AAAA,IACX,eAAY;AAAA,KAEX,kBAAkB,qCAAC,gBAAD;AAAA,IAAgB;AAAA,IAAU;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,13 +1,24 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
const StyledLabel =
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
const StyledLabel = styled.span`
|
|
4
|
+
font-size: 13px;
|
|
5
|
+
color: ${(props) => props.theme.colors.neutral[700]};
|
|
6
|
+
margin-left: ${(props) => props.theme.space.xxs};
|
|
7
|
+
line-height: 13px;
|
|
8
|
+
`;
|
|
9
|
+
const StyledVerticalSeparator = styled.div`
|
|
10
|
+
margin: 0 ${(props) => props.theme.space.xxs};
|
|
11
|
+
width: 1px;
|
|
12
|
+
height: 13px;
|
|
13
|
+
background: ${(props) => props.theme.colors.neutral[600]};
|
|
14
|
+
`;
|
|
15
|
+
const StyledRightLabel = styled.span`
|
|
16
|
+
font-size: 12px;
|
|
17
|
+
line-height: 13px;
|
|
18
|
+
`;
|
|
19
|
+
export {
|
|
20
|
+
StyledLabel,
|
|
21
|
+
StyledRightLabel,
|
|
22
|
+
StyledVerticalSeparator
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemSection/styled.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\n\nexport const StyledLabel = styled.span`\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral[700]};\n margin-left: ${(props) => props.theme.space.xxs};\n line-height: 13px;\n`;\n\nexport const StyledVerticalSeparator = styled.div`\n margin: 0 ${(props) => props.theme.space.xxs};\n width: 1px;\n height: 13px;\n background: ${(props) => props.theme.colors.neutral[600]};\n`;\n\nexport const StyledRightLabel = styled.span`\n font-size: 12px;\n line-height: 13px;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEO,MAAM,cAAc,OAAO;AAAA;AAAA,WAEvB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,iBAChC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAIvC,MAAM,0BAA0B,OAAO;AAAA,cAChC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,gBAG3B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG/C,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|