@elliemae/ds-left-navigation 3.5.0-rc.7 → 3.5.1-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/dist/cjs/LeftNavigation.js +5 -4
- package/dist/cjs/LeftNavigation.js.map +2 -2
- package/dist/cjs/exported-related/ChevronItem/index.js +2 -2
- package/dist/cjs/exported-related/ChevronItem/index.js.map +2 -2
- package/dist/cjs/exported-related/Icon/index.js +2 -2
- package/dist/cjs/exported-related/Icon/index.js.map +2 -2
- package/dist/cjs/exported-related/ItemRenderer/index.js +56 -44
- package/dist/cjs/exported-related/ItemRenderer/index.js.map +2 -2
- package/dist/cjs/exported-related/Notifications/index.js +47 -34
- package/dist/cjs/exported-related/Notifications/index.js.map +2 -2
- package/dist/cjs/exported-related/OpenWindowItem/index.js +2 -2
- package/dist/cjs/exported-related/OpenWindowItem/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemControlledDrilldown/index.js +49 -36
- package/dist/cjs/outOfTheBox/ItemControlledDrilldown/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemHeader/index.js +75 -61
- package/dist/cjs/outOfTheBox/ItemHeader/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemLink/index.js +38 -29
- package/dist/cjs/outOfTheBox/ItemLink/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemSection/index.js +40 -26
- package/dist/cjs/outOfTheBox/ItemSection/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemSeparator/index.js +7 -6
- package/dist/cjs/outOfTheBox/ItemSeparator/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemSubmenu/index.js +77 -63
- package/dist/cjs/outOfTheBox/ItemSubmenu/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemTextLabel/index.js +21 -15
- package/dist/cjs/outOfTheBox/ItemTextLabel/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js +48 -35
- package/dist/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemWithDate/index.js +40 -27
- package/dist/cjs/outOfTheBox/ItemWithDate/index.js.map +2 -2
- package/dist/cjs/parts/LeftNavContent/index.js +53 -30
- package/dist/cjs/parts/LeftNavContent/index.js.map +1 -1
- package/dist/cjs/parts/LeftNavFooterItem/index.js +65 -53
- package/dist/cjs/parts/LeftNavFooterItem/index.js.map +2 -2
- package/dist/cjs/parts/LeftNavLoading/index.js +10 -8
- package/dist/cjs/parts/LeftNavLoading/index.js.map +2 -2
- package/dist/cjs/parts/OutOfTheBoxMapItem.js +3 -2
- package/dist/cjs/parts/OutOfTheBoxMapItem.js.map +1 -1
- package/dist/esm/LeftNavigation.js +5 -4
- package/dist/esm/LeftNavigation.js.map +2 -2
- package/dist/esm/exported-related/ChevronItem/index.js +2 -2
- package/dist/esm/exported-related/ChevronItem/index.js.map +2 -2
- package/dist/esm/exported-related/Icon/index.js +2 -2
- package/dist/esm/exported-related/Icon/index.js.map +2 -2
- package/dist/esm/exported-related/ItemRenderer/index.js +56 -44
- package/dist/esm/exported-related/ItemRenderer/index.js.map +2 -2
- package/dist/esm/exported-related/Notifications/index.js +47 -34
- package/dist/esm/exported-related/Notifications/index.js.map +2 -2
- package/dist/esm/exported-related/OpenWindowItem/index.js +2 -2
- package/dist/esm/exported-related/OpenWindowItem/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemControlledDrilldown/index.js +49 -36
- package/dist/esm/outOfTheBox/ItemControlledDrilldown/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemHeader/index.js +75 -61
- package/dist/esm/outOfTheBox/ItemHeader/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemLink/index.js +38 -29
- package/dist/esm/outOfTheBox/ItemLink/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemSection/index.js +40 -26
- package/dist/esm/outOfTheBox/ItemSection/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemSeparator/index.js +7 -6
- package/dist/esm/outOfTheBox/ItemSeparator/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemSubmenu/index.js +77 -63
- package/dist/esm/outOfTheBox/ItemSubmenu/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemTextLabel/index.js +21 -15
- package/dist/esm/outOfTheBox/ItemTextLabel/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js +48 -35
- package/dist/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemWithDate/index.js +40 -27
- package/dist/esm/outOfTheBox/ItemWithDate/index.js.map +2 -2
- package/dist/esm/parts/LeftNavContent/index.js +53 -30
- package/dist/esm/parts/LeftNavContent/index.js.map +1 -1
- package/dist/esm/parts/LeftNavFooterItem/index.js +65 -53
- package/dist/esm/parts/LeftNavFooterItem/index.js.map +2 -2
- package/dist/esm/parts/LeftNavLoading/index.js +10 -8
- package/dist/esm/parts/LeftNavLoading/index.js.map +2 -2
- package/dist/esm/parts/OutOfTheBoxMapItem.js +3 -2
- package/dist/esm/parts/OutOfTheBoxMapItem.js.map +1 -1
- package/package.json +8 -8
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/outOfTheBox/ItemSubmenu/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\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, 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 ItemSubmenu = (props: ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n dsId,\n itemOpts: { label, RightComponent, BottomComponent, labelDataTestId, labelOverflow: itemLabelOverflow },\n CollapsedComponent = () => null,\n },\n ctx,\n ctx: {\n leftNavProps: { openedItem, labelOverflow: leftNavLabelOverflow, onItemClick },\n expandedForAnimation,\n selectedItem,\n selectedParent,\n setFocusedItem,\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n const opened = openedItem === dsId;\n\n const isSelected = selectedItem === dsId;\n\n const shadowStyle = useCallback(\n (opened) => (theme: any) =>\n !opened ? notOpenedShadowStyle(isSelected || selectedParent === dsId)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n [dsId, isSelected, openedItem, selectedParent],\n );\n\n const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? label : 'menuitem');\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ...item.itemOpts,\n ariaLabel,\n ariaExpanded: opened,\n openable: expandedForAnimation && !opened,\n closable: expandedForAnimation && opened,\n selectable: !opened,\n },\n }}\n shadowStyle={shadowStyle}\n hasBorderBottom={opened}\n borderBottomMr=\"12px\"\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 e.stopPropagation();\n setFocusedItem(null);\n }}\n onKeyDown={(e) => e.stopPropagation()}\n onClick={(e) => (openedItem === dsId) && 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 e.stopPropagation();\n setFocusedItem(null);\n }}\n onKeyDown={(e) => e.stopPropagation()}\n onClick={(e) => openedItem && e.stopPropagation()}\n >\n <BottomComponent ctx={ctx} item={item} />\n </Grid>\n )}\n </ItemRenderer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
6
|
-
"names": ["opened", "
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["opened", "Grid"]
|
|
7
7
|
}
|
|
@@ -28,7 +28,7 @@ __export(ItemTextLabel_exports, {
|
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(ItemTextLabel_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
|
-
var
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
32
|
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
33
33
|
var import_exported_related = require("../../exported-related/index");
|
|
34
34
|
var import_styled = require("./styled");
|
|
@@ -43,24 +43,30 @@ const ItemTextLabel = (props) => {
|
|
|
43
43
|
}
|
|
44
44
|
} = props;
|
|
45
45
|
const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
|
|
46
|
-
return /* @__PURE__ */
|
|
46
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_exported_related.ItemRenderer, {
|
|
47
47
|
item: {
|
|
48
48
|
...item,
|
|
49
49
|
CollapsedComponent: null
|
|
50
50
|
},
|
|
51
51
|
minHeight: "32px",
|
|
52
|
-
paddingTop: "8px"
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
52
|
+
paddingTop: "8px",
|
|
53
|
+
children: [
|
|
54
|
+
" ",
|
|
55
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
|
|
56
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLabel, {
|
|
57
|
+
"data-testid": labelDataTestId || "leftnav-list-item-label",
|
|
58
|
+
pl: "24px",
|
|
59
|
+
labelOverflow,
|
|
60
|
+
labelBold,
|
|
61
|
+
labelColor,
|
|
62
|
+
mr: "xxs2",
|
|
63
|
+
pb: "xxxs",
|
|
64
|
+
children: labelOverflow === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
|
|
65
|
+
value: label,
|
|
66
|
+
placement: "bottom-start"
|
|
67
|
+
}) : label
|
|
68
|
+
})
|
|
69
|
+
]
|
|
70
|
+
});
|
|
65
71
|
};
|
|
66
72
|
//# sourceMappingURL=index.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/outOfTheBox/ItemTextLabel/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\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\nexport const ItemTextLabel = (props: ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n itemOpts: { label, labelOverflow: itemLabelOverflow, labelBold, labelColor, labelDataTestId },\n },\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n return (\n <ItemRenderer\n item={{\n ...item,\n CollapsedComponent: null,\n }}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n {/* Empty LeftComponent */} <div />\n <StyledLabel\n data-testid={labelDataTestId || 'leftnav-list-item-label'}\n pl=\"24px\"\n labelOverflow={labelOverflow}\n labelBold={labelBold}\n labelColor={labelColor}\n mr=\"xxs2\"\n pb=\"xxxs\"\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledLabel>\n </ItemRenderer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,uCAA2C;AAC3C,8BAA6B;AAE7B,oBAA4B;AAErB,MAAM,gBAAgB,CAAC,UAAuC;AACnE,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU,EAAE,OAAO,eAAe,mBAAmB,WAAW,YAAY,gBAAgB;AAAA,IAC9F;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe,qBAAqB;AAAA,IACtD;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,qBAAqB;AAE3C,SACE,6CAAC;AAAA,IACC,MAAM;AAAA,MACJ,GAAG;AAAA,MACH,oBAAoB;AAAA,IACtB;AAAA,IACA,WAAU;AAAA,IACV,YAAW;AAAA,IAEgB;AAAA;AAAA,MAAC,4CAAC,SAAI;AAAA,MACjC,4CAAC;AAAA,QACC,eAAa,mBAAmB;AAAA,QAChC,IAAG;AAAA,QACH;AAAA,QACA;AAAA,QACA;AAAA,QACA,IAAG;AAAA,QACH,IAAG;AAAA,QAEF,4BAAkB,aAAa,4CAAC;AAAA,UAA2B,OAAO;AAAA,UAAO,WAAU;AAAA,SAAe,IAAK;AAAA,OAC1G;AAAA;AAAA,GACF;AAEJ;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -28,7 +28,8 @@ __export(ItemUncontrolledDrilldown_exports, {
|
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(ItemUncontrolledDrilldown_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
|
-
var
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
|
+
var import_react = require("react");
|
|
32
33
|
var import_ds_grid = __toESM(require("@elliemae/ds-grid"));
|
|
33
34
|
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
34
35
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
@@ -55,12 +56,12 @@ const OutOfTheBoxMapSubitem = (props) => {
|
|
|
55
56
|
...item,
|
|
56
57
|
itemOpts: { ...item.itemOpts, indent: currentIndent + 44 }
|
|
57
58
|
};
|
|
58
|
-
return /* @__PURE__ */
|
|
59
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OutOfTheBoxComponent, {
|
|
59
60
|
item: newItem,
|
|
60
61
|
ctx
|
|
61
62
|
});
|
|
62
63
|
}
|
|
63
|
-
return /* @__PURE__ */
|
|
64
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
|
|
64
65
|
item,
|
|
65
66
|
ctx
|
|
66
67
|
});
|
|
@@ -97,7 +98,7 @@ const ItemUncontrolledDrilldown = (props) => {
|
|
|
97
98
|
const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
|
|
98
99
|
const arrowIcon = (0, import_react.useMemo)(() => {
|
|
99
100
|
const Component = opened ? import_ds_icons.ArrowheadDown : import_ds_icons.ArrowheadRight;
|
|
100
|
-
return /* @__PURE__ */
|
|
101
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
|
|
101
102
|
width: "24px",
|
|
102
103
|
height: "18px",
|
|
103
104
|
color: ["brand-primary", "800"]
|
|
@@ -106,11 +107,10 @@ const ItemUncontrolledDrilldown = (props) => {
|
|
|
106
107
|
const subitems = (0, import_react.useMemo)(() => {
|
|
107
108
|
if (!opened || !items)
|
|
108
109
|
return [];
|
|
109
|
-
return items.map((subitem) => /* @__PURE__ */
|
|
110
|
+
return items.map((subitem) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OutOfTheBoxMapSubitem, {
|
|
110
111
|
item: subitem,
|
|
111
|
-
ctx
|
|
112
|
-
|
|
113
|
-
}));
|
|
112
|
+
ctx
|
|
113
|
+
}, subitem.dsId));
|
|
114
114
|
}, [items, opened]);
|
|
115
115
|
const handleOnClick = (0, import_react.useCallback)(() => {
|
|
116
116
|
if (opened)
|
|
@@ -118,7 +118,7 @@ const ItemUncontrolledDrilldown = (props) => {
|
|
|
118
118
|
else
|
|
119
119
|
setOpenedDrilldowns([...openedDrilldowns, dsId]);
|
|
120
120
|
}, [opened, setOpenedDrilldowns, openedDrilldowns]);
|
|
121
|
-
return /* @__PURE__ */
|
|
121
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_exported_related.ItemRenderer, {
|
|
122
122
|
item: {
|
|
123
123
|
...item,
|
|
124
124
|
itemOpts: {
|
|
@@ -133,31 +133,44 @@ const ItemUncontrolledDrilldown = (props) => {
|
|
|
133
133
|
subitems,
|
|
134
134
|
minHeight: "32px",
|
|
135
135
|
paddingTop: "8px",
|
|
136
|
-
onClick: handleOnClick
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
136
|
+
onClick: handleOnClick,
|
|
137
|
+
children: [
|
|
138
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.default, {
|
|
139
|
+
pl: "xxs",
|
|
140
|
+
mt: "-2px",
|
|
141
|
+
children: arrowIcon
|
|
142
|
+
}),
|
|
143
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLabel, {
|
|
144
|
+
pb: "xxxs",
|
|
145
|
+
"data-testid": labelDataTestId || "leftnav-list-item-label",
|
|
146
|
+
labelOverflow,
|
|
147
|
+
labelBold,
|
|
148
|
+
labelColor,
|
|
149
|
+
children: labelOverflow === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
|
|
150
|
+
value: label,
|
|
151
|
+
placement: "bottom-start"
|
|
152
|
+
}) : label
|
|
153
|
+
}),
|
|
154
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.default, {
|
|
155
|
+
pr: "xxs2",
|
|
156
|
+
cols: ["auto", "auto"],
|
|
157
|
+
alignItems: "center",
|
|
158
|
+
children: [
|
|
159
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledDate, {
|
|
160
|
+
ml: "xxs",
|
|
161
|
+
"data-testid": "leftnav-list-item-date",
|
|
162
|
+
children: labelRightSection
|
|
163
|
+
}),
|
|
164
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.default, {
|
|
165
|
+
pl: RightComponent ? "xxs" : "0px",
|
|
166
|
+
children: RightComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RightComponent, {
|
|
167
|
+
ctx,
|
|
168
|
+
item
|
|
169
|
+
})
|
|
170
|
+
})
|
|
171
|
+
]
|
|
172
|
+
})
|
|
173
|
+
]
|
|
174
|
+
});
|
|
162
175
|
};
|
|
163
176
|
//# sourceMappingURL=index.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/outOfTheBox/ItemUncontrolledDrilldown/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useMemo, useCallback, useEffect } from 'react';\nimport Grid from '@elliemae/ds-grid';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { ItemRenderer, ITEM_TYPES } from '../../exported-related/index';\nimport { StyledLabel, StyledDate } from './styled';\nimport { ItemSeparator } from '../ItemSeparator';\nimport { ItemWithDate } from '../ItemWithDate';\nimport { ItemTextLabel } from '../ItemTextLabel';\nimport type { ComponentProps } from '../../index.d';\n\n// Subitem mapping\nconst outOfTheBoxSubitemsComponents: Record<string, React.ComponentType<ComponentProps>> = {\n [ITEM_TYPES.LEFT_NAV_ITEM_SEPARATOR]: ItemSeparator,\n [ITEM_TYPES.LEFT_NAV_ITEM_WITH_DATE]: ItemWithDate,\n [ITEM_TYPES.LEFT_NAV_ITEM_TEXT_LABEL]: ItemTextLabel,\n};\n\nconst OutOfTheBoxMapSubitem = (props: ComponentProps): JSX.Element => {\n const {\n item,\n item: { type, Component },\n ctx,\n } = props;\n\n if (typeof type === 'string' && !!outOfTheBoxSubitemsComponents[type]) {\n const OutOfTheBoxComponent = outOfTheBoxSubitemsComponents[type];\n const currentIndent = item.itemOpts?.indent ?? 0;\n const newItem = {\n ...item,\n itemOpts: { ...item.itemOpts, indent: currentIndent + 44 },\n };\n return <OutOfTheBoxComponent item={newItem} ctx={ctx} />;\n }\n // we expect an error to be threw if Component is not defined and type is not a valid out-of-the-box...\n return <Component item={item} ctx={ctx} />;\n};\n\nexport const ItemUncontrolledDrilldown = (props: ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n dsId,\n itemOpts: {\n label,\n RightComponent,\n labelRightSection,\n labelOverflow: itemLabelOverflow,\n labelBold,\n labelColor,\n startOpened,\n items,\n labelDataTestId,\n },\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n openedDrilldowns,\n setOpenedDrilldowns,\n },\n } = props;\n\n // Start opened functionality\n useEffect(() => {\n if (startOpened) setOpenedDrilldowns([...openedDrilldowns, dsId]);\n }, []);\n\n const opened = openedDrilldowns.includes(dsId);\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n const arrowIcon = useMemo(() => {\n const Component = opened ? ArrowheadDown : ArrowheadRight;\n return <Component width=\"24px\" height=\"18px\" color={['brand-primary', '800']} />;\n }, [opened]);\n\n // Array of subitems\n const subitems = useMemo(() => {\n if (!opened || !items) return [];\n return items.map((subitem) => <OutOfTheBoxMapSubitem item={subitem} ctx={ctx} key={subitem.dsId} />);\n }, [items, opened]);\n\n const handleOnClick = useCallback(() => {\n if (opened) setOpenedDrilldowns(openedDrilldowns.filter((openedDrilldown) => openedDrilldown !== dsId));\n else setOpenedDrilldowns([...openedDrilldowns, dsId]);\n }, [opened, setOpenedDrilldowns, openedDrilldowns]);\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ariaExpanded: opened,\n ariaRole: 'menuitem',\n ...item.itemOpts,\n openable: !opened,\n closable: opened,\n },\n CollapsedComponent: null,\n }}\n subitems={subitems}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n onClick={handleOnClick}\n >\n <Grid pl=\"xxs\" mt=\"-2px\">\n {arrowIcon}\n </Grid>\n <StyledLabel\n pb=\"xxxs\"\n data-testid={labelDataTestId || 'leftnav-list-item-label'}\n labelOverflow={labelOverflow}\n labelBold={labelBold}\n labelColor={labelColor}\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledLabel>\n <Grid pr=\"xxs2\" cols={['auto', 'auto']} alignItems=\"center\">\n <StyledDate ml=\"xxs\" data-testid=\"leftnav-list-item-date\">\n {labelRightSection}\n </StyledDate>\n <Grid pl={RightComponent ? 'xxs' : '0px'}>{RightComponent && <RightComponent ctx={ctx} item={item} />}</Grid>\n </Grid>\n </ItemRenderer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
6
|
-
"names": ["
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Grid"]
|
|
7
7
|
}
|
|
@@ -28,7 +28,7 @@ __export(ItemWithDate_exports, {
|
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(ItemWithDate_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
|
-
var
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
32
|
var import_ds_grid = __toESM(require("@elliemae/ds-grid"));
|
|
33
33
|
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
34
34
|
var import_exported_related = require("../../exported-related/index");
|
|
@@ -53,36 +53,49 @@ const ItemWithDate = (props) => {
|
|
|
53
53
|
}
|
|
54
54
|
} = props;
|
|
55
55
|
const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
|
|
56
|
-
return /* @__PURE__ */
|
|
56
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_exported_related.ItemRenderer, {
|
|
57
57
|
item: {
|
|
58
58
|
...item,
|
|
59
59
|
CollapsedComponent: null
|
|
60
60
|
},
|
|
61
61
|
minHeight: "32px",
|
|
62
|
-
paddingTop: "8px"
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
62
|
+
paddingTop: "8px",
|
|
63
|
+
children: [
|
|
64
|
+
" ",
|
|
65
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
|
|
66
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLabel, {
|
|
67
|
+
pl: "xxs",
|
|
68
|
+
pb: "xxxs",
|
|
69
|
+
"data-testid": labelDataTestId || "leftnav-list-item-label",
|
|
70
|
+
labelOverflow,
|
|
71
|
+
labelBold,
|
|
72
|
+
labelColor,
|
|
73
|
+
children: labelOverflow === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
|
|
74
|
+
value: label,
|
|
75
|
+
placement: "bottom-start"
|
|
76
|
+
}) : label
|
|
77
|
+
}),
|
|
78
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.default, {
|
|
79
|
+
pr: "xxs2",
|
|
80
|
+
cols: ["auto", "auto"],
|
|
81
|
+
alignItems: "center",
|
|
82
|
+
children: [
|
|
83
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledDate, {
|
|
84
|
+
ml: "xxs",
|
|
85
|
+
"data-testid": "leftnav-list-item-date",
|
|
86
|
+
children: labelRightSection
|
|
87
|
+
}),
|
|
88
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.default, {
|
|
89
|
+
pl: RightComponent ? "xxs" : "0px",
|
|
90
|
+
"data-testid": "leftnav-right-component",
|
|
91
|
+
children: RightComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RightComponent, {
|
|
92
|
+
ctx,
|
|
93
|
+
item
|
|
94
|
+
})
|
|
95
|
+
})
|
|
96
|
+
]
|
|
97
|
+
})
|
|
98
|
+
]
|
|
99
|
+
});
|
|
87
100
|
};
|
|
88
101
|
//# sourceMappingURL=index.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/outOfTheBox/ItemWithDate/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React 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, StyledDate } from './styled';\n\nexport const ItemWithDate = (props: ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n itemOpts: {\n label,\n RightComponent,\n labelRightSection,\n labelOverflow: itemLabelOverflow,\n labelBold,\n labelColor,\n labelDataTestId,\n },\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n return (\n <ItemRenderer\n item={{\n ...item,\n CollapsedComponent: null,\n }}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n {/* Empty LeftComponent */} <div />\n <StyledLabel\n pl=\"xxs\"\n pb=\"xxxs\"\n data-testid={labelDataTestId || 'leftnav-list-item-label'}\n labelOverflow={labelOverflow}\n labelBold={labelBold}\n labelColor={labelColor}\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledLabel>\n <Grid pr=\"xxs2\" cols={['auto', 'auto']} alignItems=\"center\">\n <StyledDate ml=\"xxs\" data-testid=\"leftnav-list-item-date\">\n {labelRightSection}\n </StyledDate>\n <Grid pl={RightComponent ? 'xxs' : '0px'} data-testid=\"leftnav-right-component\">\n {RightComponent && <RightComponent ctx={ctx} item={item} />}\n </Grid>\n </Grid>\n </ItemRenderer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB
|
|
6
|
-
"names": ["
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,qBAAiB;AACjB,uCAA2C;AAC3C,8BAA6B;AAE7B,oBAAwC;AAEjC,MAAM,eAAe,CAAC,UAAuC;AAClE,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe,qBAAqB;AAAA,IACtD;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,qBAAqB;AAE3C,SACE,6CAAC;AAAA,IACC,MAAM;AAAA,MACJ,GAAG;AAAA,MACH,oBAAoB;AAAA,IACtB;AAAA,IACA,WAAU;AAAA,IACV,YAAW;AAAA,IAEgB;AAAA;AAAA,MAAC,4CAAC,SAAI;AAAA,MACjC,4CAAC;AAAA,QACC,IAAG;AAAA,QACH,IAAG;AAAA,QACH,eAAa,mBAAmB;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QAEC,4BAAkB,aAAa,4CAAC;AAAA,UAA2B,OAAO;AAAA,UAAO,WAAU;AAAA,SAAe,IAAK;AAAA,OAC1G;AAAA,MACA,6CAAC,eAAAA,SAAA;AAAA,QAAK,IAAG;AAAA,QAAO,MAAM,CAAC,QAAQ,MAAM;AAAA,QAAG,YAAW;AAAA,QACjD;AAAA,sDAAC;AAAA,YAAW,IAAG;AAAA,YAAM,eAAY;AAAA,YAC9B;AAAA,WACH;AAAA,UACA,4CAAC,eAAAA,SAAA;AAAA,YAAK,IAAI,iBAAiB,QAAQ;AAAA,YAAO,eAAY;AAAA,YACnD,4BAAkB,4CAAC;AAAA,cAAe;AAAA,cAAU;AAAA,aAAY;AAAA,WAC3D;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
|
|
6
|
+
"names": ["Grid"]
|
|
7
7
|
}
|
|
@@ -28,6 +28,7 @@ __export(LeftNavContent_exports, {
|
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(LeftNavContent_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
31
32
|
var import_react = __toESM(require("react"));
|
|
32
33
|
var import_LeftNavigationContext = require("../../LeftNavigationContext");
|
|
33
34
|
var import_LeftNavFooterItem = require("../LeftNavFooterItem");
|
|
@@ -40,45 +41,67 @@ const LeftNavInnerContent = () => {
|
|
|
40
41
|
leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow },
|
|
41
42
|
selectedItem
|
|
42
43
|
} = import_react.default.useContext(import_LeftNavigationContext.LeftNavContext);
|
|
43
|
-
return /* @__PURE__ */
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
44
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
45
|
+
children: [
|
|
46
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLeftNavHeaderArea, {
|
|
47
|
+
"data-testid": "leftnav-header-area",
|
|
48
|
+
selected: HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId),
|
|
49
|
+
children: HeaderComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OutOfTheBoxMapItem.OutOfTheBoxMapItem, {
|
|
50
|
+
item: HeaderComponent
|
|
51
|
+
}) : null
|
|
52
|
+
}),
|
|
53
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledLeftNavBodyAreasContainer, {
|
|
54
|
+
children: [
|
|
55
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLeftNavBodyHeaderArea, {
|
|
56
|
+
"data-testid": "leftnav-body-header-area",
|
|
57
|
+
selected: BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId),
|
|
58
|
+
children: BodyHeaderComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OutOfTheBoxMapItem.OutOfTheBoxMapItem, {
|
|
59
|
+
item: BodyHeaderComponent
|
|
60
|
+
}) : null
|
|
61
|
+
}),
|
|
62
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLeftNavBodyItemsArea, {
|
|
63
|
+
selected: !withoutBodyShadow && openedItem !== null,
|
|
64
|
+
"data-testid": "leftnav-body-items-area",
|
|
65
|
+
tabIndex: -1,
|
|
66
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLeftNavContentWithScrollbar, {
|
|
67
|
+
children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OutOfTheBoxMapItem.OutOfTheBoxMapItem, {
|
|
68
|
+
item
|
|
69
|
+
}, item.dsId))
|
|
70
|
+
})
|
|
71
|
+
})
|
|
72
|
+
]
|
|
73
|
+
})
|
|
74
|
+
]
|
|
75
|
+
});
|
|
61
76
|
};
|
|
62
77
|
const LeftNavContent = () => {
|
|
63
78
|
const {
|
|
64
79
|
expandedForAnimation,
|
|
65
80
|
leftNavProps: { expanded, expandedWidth, footerLabel, onFooterExpand, onFooterClose, loading }
|
|
66
81
|
} = import_react.default.useContext(import_LeftNavigationContext.LeftNavContext);
|
|
67
|
-
return /* @__PURE__ */
|
|
82
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLeftNavExpandAnimationWrapper, {
|
|
68
83
|
expandedWidth,
|
|
69
84
|
expanded,
|
|
70
85
|
"data-testid": "leftnav-component",
|
|
71
|
-
"aria-label": leftNavScreenReaderInstructions
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
86
|
+
"aria-label": leftNavScreenReaderInstructions,
|
|
87
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledLeftNavAreasContainer, {
|
|
88
|
+
expandedWidth,
|
|
89
|
+
expanded: expandedForAnimation,
|
|
90
|
+
children: [
|
|
91
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LeftNavLoading.LeftNavLoading, {
|
|
92
|
+
expanded: expandedForAnimation
|
|
93
|
+
}),
|
|
94
|
+
!loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LeftNavInnerContent, {}),
|
|
95
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLeftNavFooterArea, {
|
|
96
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LeftNavFooterItem.LeftNavFooterItem, {
|
|
97
|
+
footerLabel,
|
|
98
|
+
onFooterExpand,
|
|
99
|
+
onFooterClose
|
|
100
|
+
})
|
|
101
|
+
})
|
|
102
|
+
]
|
|
103
|
+
})
|
|
104
|
+
});
|
|
82
105
|
};
|
|
83
106
|
var LeftNavContent_default = LeftNavContent;
|
|
84
107
|
//# sourceMappingURL=index.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/LeftNavContent/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { LeftNavContext } from '../../LeftNavigationContext';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem';\nimport {\n StyledLeftNavExpandAnimationWrapper,\n StyledLeftNavAreasContainer,\n StyledLeftNavHeaderArea,\n StyledLeftNavBodyAreasContainer,\n StyledLeftNavBodyHeaderArea,\n StyledLeftNavBodyItemsArea,\n StyledLeftNavFooterArea,\n StyledLeftNavContentWithScrollbar,\n} from './styled';\nimport { LeftNavLoading } from '../LeftNavLoading';\n\nconst leftNavScreenReaderInstructions =\n 'Left Navigation. You can navigate through the items using the Up/Down arrows. ' +\n 'To expand or select an item, use the Enter/Return or Space keys. ' +\n 'Expandable items can also be opened/closed with the Right/Left arrows. ' +\n 'The Home and End keys will take you to the first and last item respectively.';\n\nconst LeftNavInnerContent = () => {\n const {\n leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow },\n selectedItem,\n } = React.useContext(LeftNavContext);\n return (\n <>\n <StyledLeftNavHeaderArea\n data-testid=\"leftnav-header-area\"\n selected={HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId)}\n >\n {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}\n </StyledLeftNavHeaderArea>\n <StyledLeftNavBodyAreasContainer>\n <StyledLeftNavBodyHeaderArea\n data-testid=\"leftnav-body-header-area\"\n selected={BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId)}\n >\n {BodyHeaderComponent ? <OutOfTheBoxMapItem item={BodyHeaderComponent} /> : null}\n </StyledLeftNavBodyHeaderArea>\n <StyledLeftNavBodyItemsArea\n selected={!withoutBodyShadow && openedItem !== null}\n data-testid=\"leftnav-body-items-area\"\n tabIndex={-1}\n >\n <StyledLeftNavContentWithScrollbar>\n {items.map((item) => (\n <OutOfTheBoxMapItem item={item} key={item.dsId} />\n ))}\n </StyledLeftNavContentWithScrollbar>\n </StyledLeftNavBodyItemsArea>\n </StyledLeftNavBodyAreasContainer>\n </>\n );\n};\n\nconst LeftNavContent: React.ComponentType = () => {\n const {\n expandedForAnimation,\n leftNavProps: { expanded, expandedWidth, footerLabel, onFooterExpand, onFooterClose, loading },\n } = React.useContext(LeftNavContext);\n\n return (\n <StyledLeftNavExpandAnimationWrapper\n expandedWidth={expandedWidth}\n expanded={expanded}\n data-testid=\"leftnav-component\"\n aria-label={leftNavScreenReaderInstructions}\n >\n <StyledLeftNavAreasContainer expandedWidth={expandedWidth} expanded={expandedForAnimation}>\n {loading && <LeftNavLoading expanded={expandedForAnimation} />}\n {!loading && <LeftNavInnerContent />}\n <StyledLeftNavFooterArea>\n <LeftNavFooterItem footerLabel={footerLabel} onFooterExpand={onFooterExpand} onFooterClose={onFooterClose} />\n </StyledLeftNavFooterArea>\n </StyledLeftNavAreasContainer>\n </StyledLeftNavExpandAnimationWrapper>\n );\n};\n\nexport default LeftNavContent;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,mCAA+B;AAC/B,+BAAkC;AAClC,gCAAmC;AACnC,oBASO;AACP,4BAA+B;AAE/B,MAAM,kCACJ;AAKF,MAAM,sBAAsB,MAAM;AAChC,QAAM;AAAA,IACJ,cAAc,EAAE,iBAAiB,qBAAqB,YAAY,OAAO,kBAAkB;AAAA,IAC3F;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,2CAAc;AACnC,SACE,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkB;AAClB,mCAA+B;AAC/B,+BAAkC;AAClC,gCAAmC;AACnC,oBASO;AACP,4BAA+B;AAE/B,MAAM,kCACJ;AAKF,MAAM,sBAAsB,MAAM;AAChC,QAAM;AAAA,IACJ,cAAc,EAAE,iBAAiB,qBAAqB,YAAY,OAAO,kBAAkB;AAAA,IAC3F;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,2CAAc;AACnC,SACE;AAAA,IACE;AAAA,kDAAC;AAAA,QACC,eAAY;AAAA,QACZ,UAAU,mBAAmB,CAAC,cAAc,UAAU,EAAE,SAAS,gBAAgB,IAAI;AAAA,QAEpF,4BAAkB,4CAAC;AAAA,UAAmB,MAAM;AAAA,SAAiB,IAAK;AAAA,OACrE;AAAA,MACA,6CAAC;AAAA,QACC;AAAA,sDAAC;AAAA,YACC,eAAY;AAAA,YACZ,UAAU,uBAAuB,CAAC,cAAc,UAAU,EAAE,SAAS,oBAAoB,IAAI;AAAA,YAE5F,gCAAsB,4CAAC;AAAA,cAAmB,MAAM;AAAA,aAAqB,IAAK;AAAA,WAC7E;AAAA,UACA,4CAAC;AAAA,YACC,UAAU,CAAC,qBAAqB,eAAe;AAAA,YAC/C,eAAY;AAAA,YACZ,UAAU;AAAA,YAEV,sDAAC;AAAA,cACE,gBAAM,IAAI,CAAC,SACV,4CAAC;AAAA,gBAAmB;AAAA,iBAAiB,KAAK,IAAM,CACjD;AAAA,aACH;AAAA,WACF;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;AAEA,MAAM,iBAAsC,MAAM;AAChD,QAAM;AAAA,IACJ;AAAA,IACA,cAAc,EAAE,UAAU,eAAe,aAAa,gBAAgB,eAAe,QAAQ;AAAA,EAC/F,IAAI,aAAAA,QAAM,WAAW,2CAAc;AAEnC,SACE,4CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ,cAAY;AAAA,IAEZ,uDAAC;AAAA,MAA4B;AAAA,MAA8B,UAAU;AAAA,MAClE;AAAA,mBAAW,4CAAC;AAAA,UAAe,UAAU;AAAA,SAAsB;AAAA,QAC3D,CAAC,WAAW,4CAAC,uBAAoB;AAAA,QAClC,4CAAC;AAAA,UACC,sDAAC;AAAA,YAAkB;AAAA,YAA0B;AAAA,YAAgC;AAAA,WAA8B;AAAA,SAC7G;AAAA;AAAA,KACF;AAAA,GACF;AAEJ;AAEA,IAAO,yBAAQ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|