@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": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/OpenWindowItem/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { OpenWindow as OpenWindowIcon } from '@elliemae/ds-icons';\n\nconst StyledOpenWindow = styled(OpenWindowIcon)`\n cursor: pointer;\n :focus {\n outline: 1px solid ${(props) => props.theme.colors.brand[800]};\n }\n`;\n\nexport const OpenWindow = (props: unknown): JSX.Element => (\n <StyledOpenWindow size=\"s\" color={['brand-primary', 800]} {...props} />\n);\n\nexport default OpenWindow;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,cAAc;AACvB,SAAS,cAAc,sBAAsB;AAE7C,MAAM,mBAAmB,OAAO,cAAc;AAAA;AAAA;AAAA,yBAGrB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAItD,MAAM,aAAa,CAAC,UACzB,oBAAC;AAAA,EAAiB,MAAK;AAAA,EAAI,OAAO,CAAC,iBAAiB,GAAG;AAAA,EAAI,GAAG;AAAA,CAAO;AAGvE,IAAO,yBAAQ;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useMemo } from "react";
|
|
3
4
|
import Grid from "@elliemae/ds-grid";
|
|
4
5
|
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
5
6
|
import { ArrowheadDown, ArrowheadRight } from "@elliemae/ds-icons";
|
|
@@ -26,12 +27,12 @@ const OutOfTheBoxMapSubitem = (props) => {
|
|
|
26
27
|
...item,
|
|
27
28
|
itemOpts: { ...item.itemOpts, indent: currentIndent + 44 }
|
|
28
29
|
};
|
|
29
|
-
return /* @__PURE__ */
|
|
30
|
+
return /* @__PURE__ */ jsx(OutOfTheBoxComponent, {
|
|
30
31
|
item: newItem,
|
|
31
32
|
ctx
|
|
32
33
|
});
|
|
33
34
|
}
|
|
34
|
-
return /* @__PURE__ */
|
|
35
|
+
return /* @__PURE__ */ jsx(Component, {
|
|
35
36
|
item,
|
|
36
37
|
ctx
|
|
37
38
|
});
|
|
@@ -60,7 +61,7 @@ const ItemControlledDrilldown = (props) => {
|
|
|
60
61
|
const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
|
|
61
62
|
const arrowIcon = useMemo(() => {
|
|
62
63
|
const Component = isOpened ? ArrowheadDown : ArrowheadRight;
|
|
63
|
-
return /* @__PURE__ */
|
|
64
|
+
return /* @__PURE__ */ jsx(Component, {
|
|
64
65
|
width: "24px",
|
|
65
66
|
height: "18px",
|
|
66
67
|
color: ["brand-primary", "800"]
|
|
@@ -69,13 +70,12 @@ const ItemControlledDrilldown = (props) => {
|
|
|
69
70
|
const subitems = useMemo(() => {
|
|
70
71
|
if (!isOpened || !items)
|
|
71
72
|
return [];
|
|
72
|
-
return items.map((subitem) => /* @__PURE__ */
|
|
73
|
+
return items.map((subitem) => /* @__PURE__ */ jsx(OutOfTheBoxMapSubitem, {
|
|
73
74
|
item: subitem,
|
|
74
|
-
ctx
|
|
75
|
-
|
|
76
|
-
}));
|
|
75
|
+
ctx
|
|
76
|
+
}, subitem.dsId));
|
|
77
77
|
}, [items, isOpened]);
|
|
78
|
-
return /* @__PURE__ */
|
|
78
|
+
return /* @__PURE__ */ jsxs(ItemRenderer, {
|
|
79
79
|
item: {
|
|
80
80
|
...item,
|
|
81
81
|
itemOpts: {
|
|
@@ -89,33 +89,46 @@ const ItemControlledDrilldown = (props) => {
|
|
|
89
89
|
},
|
|
90
90
|
subitems,
|
|
91
91
|
minHeight: "32px",
|
|
92
|
-
paddingTop: "8px"
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
92
|
+
paddingTop: "8px",
|
|
93
|
+
children: [
|
|
94
|
+
/* @__PURE__ */ jsx(Grid, {
|
|
95
|
+
pl: "xxs",
|
|
96
|
+
mt: "-2px",
|
|
97
|
+
children: arrowIcon
|
|
98
|
+
}),
|
|
99
|
+
/* @__PURE__ */ jsx(StyledLabel, {
|
|
100
|
+
pb: "xxxs",
|
|
101
|
+
"data-testid": labelDataTestId || "leftnav-list-item-label",
|
|
102
|
+
labelOverflow,
|
|
103
|
+
labelBold,
|
|
104
|
+
labelColor,
|
|
105
|
+
children: labelOverflow === "truncate" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, {
|
|
106
|
+
value: label,
|
|
107
|
+
placement: "bottom-start"
|
|
108
|
+
}) : label
|
|
109
|
+
}),
|
|
110
|
+
/* @__PURE__ */ jsxs(Grid, {
|
|
111
|
+
pr: "xxs2",
|
|
112
|
+
cols: ["auto", "auto"],
|
|
113
|
+
alignItems: "center",
|
|
114
|
+
children: [
|
|
115
|
+
/* @__PURE__ */ jsx(StyledDate, {
|
|
116
|
+
ml: "xxs",
|
|
117
|
+
"data-testid": "leftnav-list-item-date",
|
|
118
|
+
children: labelRightSection
|
|
119
|
+
}),
|
|
120
|
+
/* @__PURE__ */ jsx(Grid, {
|
|
121
|
+
pl: RightComponent ? "xxs" : "0px",
|
|
122
|
+
"data-testid": "leftnav-right-component",
|
|
123
|
+
children: RightComponent && /* @__PURE__ */ jsx(RightComponent, {
|
|
124
|
+
ctx,
|
|
125
|
+
item
|
|
126
|
+
})
|
|
127
|
+
})
|
|
128
|
+
]
|
|
129
|
+
})
|
|
130
|
+
]
|
|
131
|
+
});
|
|
119
132
|
};
|
|
120
133
|
export {
|
|
121
134
|
ItemControlledDrilldown
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemControlledDrilldown/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } 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\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 ItemControlledDrilldown = (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 isOpened,\n items,\n labelDataTestId,\n },\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n const arrowIcon = useMemo(() => {\n const Component = isOpened ? ArrowheadDown : ArrowheadRight;\n return <Component width=\"24px\" height=\"18px\" color={['brand-primary', '800']} />;\n }, [isOpened]);\n\n const subitems = useMemo(() => {\n if (!isOpened || !items) return [];\n return items.map((subitem) => <OutOfTheBoxMapSubitem item={subitem} ctx={ctx} key={subitem.dsId} />);\n }, [items, isOpened]);\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ariaExpanded: isOpened,\n ariaRole: 'menuitem',\n ...item.itemOpts,\n openable: !isOpened,\n closable: isOpened,\n },\n CollapsedComponent: null,\n }}\n subitems={subitems}\n minHeight=\"32px\"\n paddingTop=\"8px\"\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'} data-testid=\"leftnav-right-component\">\n {RightComponent && <RightComponent ctx={ctx} item={item} />}\n </Grid>\n </Grid>\n </ItemRenderer>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useCallback } from "react";
|
|
3
4
|
import Grid from "@elliemae/ds-grid";
|
|
4
5
|
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
5
6
|
import { ItemRenderer } from "../../exported-related/index";
|
|
@@ -41,7 +42,7 @@ const ItemHeader = (props) => {
|
|
|
41
42
|
(opened2) => (theme) => !opened2 ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,
|
|
42
43
|
[isSelected, openedItem]
|
|
43
44
|
);
|
|
44
|
-
return /* @__PURE__ */
|
|
45
|
+
return /* @__PURE__ */ jsxs(ItemRenderer, {
|
|
45
46
|
item: {
|
|
46
47
|
...item,
|
|
47
48
|
itemOpts: {
|
|
@@ -55,65 +56,78 @@ const ItemHeader = (props) => {
|
|
|
55
56
|
},
|
|
56
57
|
hasBorderBottom: true,
|
|
57
58
|
borderBottomMr: opened ? "12px" : "0px",
|
|
58
|
-
shadowStyle
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
59
|
+
shadowStyle,
|
|
60
|
+
children: [
|
|
61
|
+
/* @__PURE__ */ jsxs(Grid, {
|
|
62
|
+
cols: opened ? ["auto", "auto"] : ["38px"],
|
|
63
|
+
gutter: "1px",
|
|
64
|
+
pl: opened ? "xxs" : 0,
|
|
65
|
+
justifyItems: "center",
|
|
66
|
+
"data-testid": "leftnav-leftcomponent",
|
|
67
|
+
children: [
|
|
68
|
+
opened && /* @__PURE__ */ jsx(StyledChevronLeft, {
|
|
69
|
+
size: "m",
|
|
70
|
+
color: ["brand-primary", 800],
|
|
71
|
+
onClick: (e) => {
|
|
72
|
+
onItemClick(item, e);
|
|
73
|
+
},
|
|
74
|
+
"data-testid": "leftnav-leftcomponent-chevron",
|
|
75
|
+
tabIndex: 0,
|
|
76
|
+
onFocus: (e) => {
|
|
77
|
+
e.stopPropagation();
|
|
78
|
+
setFocusedItem(CHEVRON_BACK_DS_ID);
|
|
79
|
+
},
|
|
80
|
+
role: "button",
|
|
81
|
+
"aria-label": `Close ${ariaLabel}`
|
|
82
|
+
}),
|
|
83
|
+
/* @__PURE__ */ jsx(CollapsedComponent, {
|
|
84
|
+
item,
|
|
85
|
+
ctx
|
|
86
|
+
})
|
|
87
|
+
]
|
|
88
|
+
}),
|
|
89
|
+
/* @__PURE__ */ jsx(StyledLabel, {
|
|
90
|
+
ml: opened ? "xxs" : "1px",
|
|
91
|
+
mt: "xxxs",
|
|
92
|
+
mb: "15px",
|
|
93
|
+
"data-testid": labelDataTestId || "leftnav-itemlabel",
|
|
94
|
+
labelOverflow,
|
|
95
|
+
children: labelOverflow === "truncate" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, {
|
|
96
|
+
value: label,
|
|
97
|
+
placement: "bottom-start"
|
|
98
|
+
}) : label
|
|
99
|
+
}),
|
|
100
|
+
/* @__PURE__ */ jsx(Grid, {
|
|
101
|
+
pl: "xs",
|
|
102
|
+
pr: opened ? "xxs2" : "xxs",
|
|
103
|
+
onFocus: (e) => {
|
|
104
|
+
setFocusedItem(null);
|
|
105
|
+
e.stopPropagation();
|
|
106
|
+
},
|
|
107
|
+
onKeyDown: (e) => e.stopPropagation(),
|
|
108
|
+
"data-testid": "leftnav-right-component",
|
|
109
|
+
children: RightComponent && /* @__PURE__ */ jsx(RightComponent, {
|
|
110
|
+
ctx,
|
|
111
|
+
item
|
|
112
|
+
})
|
|
113
|
+
}),
|
|
114
|
+
BottomComponent && /* @__PURE__ */ jsx(Grid, {
|
|
115
|
+
style: { gridColumn: "span 3" },
|
|
116
|
+
pb: "xxxs",
|
|
117
|
+
pl: "xxs",
|
|
118
|
+
pr: "xxs",
|
|
119
|
+
onFocus: (e) => {
|
|
120
|
+
setFocusedItem(null);
|
|
121
|
+
e.stopPropagation();
|
|
122
|
+
},
|
|
123
|
+
onKeyDown: (e) => e.stopPropagation(),
|
|
124
|
+
children: /* @__PURE__ */ jsx(BottomComponent, {
|
|
125
|
+
ctx,
|
|
126
|
+
item
|
|
127
|
+
})
|
|
128
|
+
})
|
|
129
|
+
]
|
|
130
|
+
});
|
|
117
131
|
};
|
|
118
132
|
export {
|
|
119
133
|
ItemHeader
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemHeader/index.tsx"],
|
|
4
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, labelOverflow: itemLabelOverflow },\n CollapsedComponent = () => null,\n },\n ctx,\n ctx: {\n leftNavProps: { openedItem, labelOverflow: leftNavLabelOverflow, onItemClick },\n expandedForAnimation,\n setFocusedItem,\n selectedItem,\n selectedParent,\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\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,YAAY,WAAW;
|
|
6
|
-
"names": ["
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["opened"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useCallback } from "react";
|
|
3
4
|
import Grid from "@elliemae/ds-grid";
|
|
4
5
|
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
5
6
|
import { ItemRenderer } from "../../exported-related/index";
|
|
@@ -36,7 +37,7 @@ const ItemLink = (props) => {
|
|
|
36
37
|
(opened) => (theme) => !opened ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,
|
|
37
38
|
[isSelected, openedItem]
|
|
38
39
|
);
|
|
39
|
-
return /* @__PURE__ */
|
|
40
|
+
return /* @__PURE__ */ jsxs(ItemRenderer, {
|
|
40
41
|
item: {
|
|
41
42
|
...item,
|
|
42
43
|
itemOpts: {
|
|
@@ -46,33 +47,41 @@ const ItemLink = (props) => {
|
|
|
46
47
|
selectable: true
|
|
47
48
|
}
|
|
48
49
|
},
|
|
49
|
-
shadowStyle
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
50
|
+
shadowStyle,
|
|
51
|
+
children: [
|
|
52
|
+
/* @__PURE__ */ jsx(Grid, {
|
|
53
|
+
cols: ["38px"],
|
|
54
|
+
gutter: "1px",
|
|
55
|
+
pl: 0,
|
|
56
|
+
justifyItems: "center",
|
|
57
|
+
"data-testid": "leftnav-leftcomponent",
|
|
58
|
+
children: /* @__PURE__ */ jsx(CollapsedComponent, {
|
|
59
|
+
item,
|
|
60
|
+
ctx
|
|
61
|
+
})
|
|
62
|
+
}),
|
|
63
|
+
/* @__PURE__ */ jsx(StyledLabel, {
|
|
64
|
+
ml: "1px",
|
|
65
|
+
mt: "xxxs",
|
|
66
|
+
mb: "15px",
|
|
67
|
+
"data-testid": labelDataTestId || "leftnav-itemlabel",
|
|
68
|
+
labelOverflow,
|
|
69
|
+
children: labelOverflow === "truncate" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, {
|
|
70
|
+
value: label,
|
|
71
|
+
placement: "bottom-start"
|
|
72
|
+
}) : label
|
|
73
|
+
}),
|
|
74
|
+
/* @__PURE__ */ jsx(Grid, {
|
|
75
|
+
mt: "xxxs",
|
|
76
|
+
pr: "xxs2",
|
|
77
|
+
"data-testid": "leftnav-right-component",
|
|
78
|
+
children: RightComponent && /* @__PURE__ */ jsx(RightComponent, {
|
|
79
|
+
ctx,
|
|
80
|
+
item
|
|
81
|
+
})
|
|
82
|
+
})
|
|
83
|
+
]
|
|
84
|
+
});
|
|
76
85
|
};
|
|
77
86
|
export {
|
|
78
87
|
ItemLink
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemLink/index.tsx"],
|
|
4
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, labelOverflow: itemLabelOverflow },\n CollapsedComponent = () => null,\n },\n ctx,\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow, openedItem },\n selectedItem,\n selectedParent,\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\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,YAAY,WAAW;
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,mBAAmB;AACnC,OAAO,UAAU;AACjB,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAE7B,SAAS,mBAAmB;AAG5B,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,iBAAiB,eAAe,kBAAkB;AAAA,MACrF,qBAAqB,MAAM;AAAA,IAC7B;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH,cAAc,EAAE,eAAe,sBAAsB,WAAW;AAAA,MAChE;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,qBAAqB;AAE3C,QAAM,aAAa,iBAAiB,QAAQ,mBAAmB;AAE/D,QAAM,cAAc;AAAA,IAClB,CAAC,WAAW,CAAC,UAAe,CAAC,SAAS,qBAAqB,UAAU,EAAE,KAAK,IAAI;AAAA,IAChF,CAAC,YAAY,UAAU;AAAA,EACzB;AAEA,SACE,qBAAC;AAAA,IACC,MAAM;AAAA,MACJ,GAAG;AAAA,MACH,UAAU;AAAA,QACR,WAAW,OAAO,UAAU,WAAW,QAAQ;AAAA,QAC/C,UAAU;AAAA,QACV,GAAG,KAAK;AAAA,QACR,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA;AAAA,IAEA;AAAA,0BAAC;AAAA,QAAK,MAAM,CAAC,MAAM;AAAA,QAAG,QAAO;AAAA,QAAM,IAAI;AAAA,QAAG,cAAa;AAAA,QAAS,eAAY;AAAA,QAC1E,8BAAC;AAAA,UAAmB;AAAA,UAAY;AAAA,SAAU;AAAA,OAC5C;AAAA,MACA,oBAAC;AAAA,QACC,IAAG;AAAA,QACH,IAAG;AAAA,QACH,IAAG;AAAA,QACH,eAAa,mBAAmB;AAAA,QAChC;AAAA,QAEC,4BAAkB,aAAa,oBAAC;AAAA,UAA2B,OAAO;AAAA,UAAO,WAAU;AAAA,SAAe,IAAK;AAAA,OAC1G;AAAA,MACA,oBAAC;AAAA,QAAK,IAAG;AAAA,QAAO,IAAG;AAAA,QAAO,eAAY;AAAA,QACnC,4BAAkB,oBAAC;AAAA,UAAe;AAAA,UAAU;AAAA,SAAY;AAAA,OAC3D;AAAA;AAAA,GACF;AAEJ;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import Grid from "@elliemae/ds-grid";
|
|
4
4
|
import { ItemRenderer } from "../../exported-related/index";
|
|
5
5
|
import { StyledLabel, StyledRightLabel, StyledVerticalSeparator } from "./styled";
|
|
@@ -12,37 +12,51 @@ const ItemSection = (props) => {
|
|
|
12
12
|
ctx,
|
|
13
13
|
ctx: { setFocusedItem }
|
|
14
14
|
} = props;
|
|
15
|
-
return /* @__PURE__ */
|
|
15
|
+
return /* @__PURE__ */ jsxs(ItemRenderer, {
|
|
16
16
|
item: {
|
|
17
17
|
...item,
|
|
18
18
|
itemOpts: { ...item.itemOpts, selectable: false, focuseable: false },
|
|
19
19
|
CollapsedComponent: null
|
|
20
20
|
},
|
|
21
21
|
minHeight: "32px",
|
|
22
|
-
paddingTop: "8px"
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
22
|
+
paddingTop: "8px",
|
|
23
|
+
children: [
|
|
24
|
+
/* @__PURE__ */ jsxs(Grid, {
|
|
25
|
+
cols: ["min-content", "auto", "min-content", "auto"],
|
|
26
|
+
pl: "xxs",
|
|
27
|
+
alignItems: "center",
|
|
28
|
+
children: [
|
|
29
|
+
LeftComponent ? /* @__PURE__ */ jsx(LeftComponent, {
|
|
30
|
+
ctx,
|
|
31
|
+
item
|
|
32
|
+
}) : /* @__PURE__ */ jsx("div", {}),
|
|
33
|
+
/* @__PURE__ */ jsx(StyledLabel, {
|
|
34
|
+
"data-testid": labelDataTestId || "leftnav-section-item-label",
|
|
35
|
+
children: label
|
|
36
|
+
}),
|
|
37
|
+
/* @__PURE__ */ jsx(StyledVerticalSeparator, {}),
|
|
38
|
+
/* @__PURE__ */ jsx(StyledRightLabel, {
|
|
39
|
+
children: labelRightSection
|
|
40
|
+
})
|
|
41
|
+
]
|
|
42
|
+
}),
|
|
43
|
+
/* @__PURE__ */ jsx(Grid, {
|
|
44
|
+
ml: "auto",
|
|
45
|
+
onFocus: (e) => {
|
|
46
|
+
setFocusedItem(null);
|
|
47
|
+
e.stopPropagation();
|
|
48
|
+
},
|
|
49
|
+
onKeyDown: (e) => e.stopPropagation(),
|
|
50
|
+
pr: "xxs2",
|
|
51
|
+
alignItems: "center",
|
|
52
|
+
"data-testid": "leftnav-right-component",
|
|
53
|
+
children: RightComponent && /* @__PURE__ */ jsx(RightComponent, {
|
|
54
|
+
ctx,
|
|
55
|
+
item
|
|
56
|
+
})
|
|
57
|
+
})
|
|
58
|
+
]
|
|
59
|
+
});
|
|
46
60
|
};
|
|
47
61
|
export {
|
|
48
62
|
ItemSection
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemSection/index.tsx"],
|
|
4
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,YAAY,WAAW;ACAvB
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,OAAO,UAAU;AACjB,SAAS,oBAAoB;AAE7B,SAAS,aAAa,kBAAkB,+BAA+B;AAEhE,MAAM,cAAc,CAAC,UAAuC;AACjE,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU,EAAE,OAAO,eAAe,gBAAgB,mBAAmB,gBAAgB;AAAA,IACvF;AAAA,IACA;AAAA,IACA,KAAK,EAAE,eAAe;AAAA,EACxB,IAAI;AAEJ,SACE,qBAAC;AAAA,IACC,MAAM;AAAA,MACJ,GAAG;AAAA,MACH,UAAU,EAAE,GAAG,KAAK,UAAU,YAAY,OAAO,YAAY,MAAM;AAAA,MACnE,oBAAoB;AAAA,IACtB;AAAA,IACA,WAAU;AAAA,IACV,YAAW;AAAA,IAEX;AAAA,2BAAC;AAAA,QAAK,MAAM,CAAC,eAAe,QAAQ,eAAe,MAAM;AAAA,QAAG,IAAG;AAAA,QAAM,YAAW;AAAA,QAC7E;AAAA,0BAAgB,oBAAC;AAAA,YAAc;AAAA,YAAU;AAAA,WAAY,IAAK,oBAAC,SAAI;AAAA,UAChE,oBAAC;AAAA,YAAY,eAAa,mBAAmB;AAAA,YAA+B;AAAA,WAAM;AAAA,UAClF,oBAAC,2BAAwB;AAAA,UACzB,oBAAC;AAAA,YAAkB;AAAA,WAAkB;AAAA;AAAA,OACvC;AAAA,MACA,oBAAC;AAAA,QACC,IAAG;AAAA,QACH,SAAS,CAAC,MAAM;AACd,yBAAe,IAAI;AACnB,YAAE,gBAAgB;AAAA,QACpB;AAAA,QACA,WAAW,CAAC,MAAM,EAAE,gBAAgB;AAAA,QACpC,IAAG;AAAA,QACH,YAAW;AAAA,QACX,eAAY;AAAA,QAEX,4BAAkB,oBAAC;AAAA,UAAe;AAAA,UAAU;AAAA,SAAY;AAAA,OAC3D;AAAA;AAAA,GACF;AAEJ;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { styled } from "@elliemae/ds-system";
|
|
4
4
|
import { ItemRenderer } from "../../exported-related/index";
|
|
5
5
|
const StyledSeparator = styled.div`
|
|
@@ -12,7 +12,7 @@ const StyledSeparator = styled.div`
|
|
|
12
12
|
`;
|
|
13
13
|
const ItemSeparator = (props) => {
|
|
14
14
|
const { item } = props;
|
|
15
|
-
return /* @__PURE__ */
|
|
15
|
+
return /* @__PURE__ */ jsx(ItemRenderer, {
|
|
16
16
|
item: {
|
|
17
17
|
...item,
|
|
18
18
|
itemOpts: {
|
|
@@ -23,10 +23,11 @@ const ItemSeparator = (props) => {
|
|
|
23
23
|
CollapsedComponent: null
|
|
24
24
|
},
|
|
25
25
|
minHeight: "1px",
|
|
26
|
-
paddingTop: "0px"
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
paddingTop: "0px",
|
|
27
|
+
children: /* @__PURE__ */ jsx(StyledSeparator, {
|
|
28
|
+
"data-testid": "leftnav-separator-subitem"
|
|
29
|
+
})
|
|
30
|
+
});
|
|
30
31
|
};
|
|
31
32
|
export {
|
|
32
33
|
ItemSeparator
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemSeparator/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { ItemRenderer } from '../../exported-related/index';\nimport type { ComponentProps } from '../../index.d';\n\nconst StyledSeparator = styled.div`\n height: 1px;\n background-color: ${(props) => props.theme.colors.neutral[100]};\n width: auto;\n margin: ${(props) => props.theme.space.xxxs} 0;\n margin-left: ${(props) => props.theme.space.xxxs};\n grid-column: span 3;\n`;\n\nexport const ItemSeparator = (props: ComponentProps): JSX.Element => {\n const { item } = props;\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ...item.itemOpts,\n selectable: false,\n focuseable: false,\n },\n CollapsedComponent: null,\n }}\n minHeight=\"1px\"\n paddingTop=\"0px\"\n >\n <StyledSeparator data-testid=\"leftnav-separator-subitem\" />\n </ItemRenderer>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAG7B,MAAM,kBAAkB,OAAO;AAAA;AAAA,sBAET,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,YAEhD,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,iBACxB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAIvC,MAAM,gBAAgB,CAAC,UAAuC;AACnE,QAAM,EAAE,KAAK,IAAI;AACjB,SACE,oBAAC;AAAA,IACC,MAAM;AAAA,MACJ,GAAG;AAAA,MACH,UAAU;AAAA,QACR,GAAG,KAAK;AAAA,QACR,YAAY;AAAA,QACZ,YAAY;AAAA,MACd;AAAA,MACA,oBAAoB;AAAA,IACtB;AAAA,IACA,WAAU;AAAA,IACV,YAAW;AAAA,IAEX,8BAAC;AAAA,MAAgB,eAAY;AAAA,KAA4B;AAAA,GAC3D;AAEJ;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|