@elliemae/ds-left-navigation 3.16.0-next.16 → 3.16.0-next.18
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/exported-related/ChevronItem/index.js +1 -1
- package/dist/cjs/exported-related/ChevronItem/index.js.map +2 -2
- package/dist/cjs/exported-related/Icon/index.js +1 -1
- package/dist/cjs/exported-related/Icon/index.js.map +2 -2
- package/dist/cjs/exported-related/ItemRenderer/index.js +2 -3
- package/dist/cjs/exported-related/ItemRenderer/index.js.map +2 -2
- package/dist/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js +1 -2
- package/dist/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js.map +2 -2
- package/dist/cjs/exported-related/OpenWindowItem/index.js +1 -1
- package/dist/cjs/exported-related/OpenWindowItem/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemHeader/index.js +4 -5
- package/dist/cjs/outOfTheBox/ItemHeader/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemLink/index.js +0 -1
- package/dist/cjs/outOfTheBox/ItemLink/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemSeparator/index.js +1 -0
- package/dist/cjs/outOfTheBox/ItemSeparator/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemSubmenu/index.js +4 -4
- package/dist/cjs/outOfTheBox/ItemSubmenu/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/styled.js +3 -3
- package/dist/cjs/outOfTheBox/styled.js.map +2 -2
- package/dist/cjs/parts/LeftNavContent/index.js +6 -3
- package/dist/cjs/parts/LeftNavContent/index.js.map +2 -2
- package/dist/cjs/parts/LeftNavFooterItem/index.js +4 -4
- package/dist/cjs/parts/LeftNavFooterItem/index.js.map +2 -2
- package/dist/cjs/parts/LeftNavFooterItem/styled.js +4 -4
- package/dist/cjs/parts/LeftNavFooterItem/styled.js.map +2 -2
- package/dist/cjs/parts/LeftNavLoading/index.js +7 -9
- package/dist/cjs/parts/LeftNavLoading/index.js.map +3 -3
- package/dist/esm/exported-related/ChevronItem/index.js +1 -1
- package/dist/esm/exported-related/ChevronItem/index.js.map +2 -2
- package/dist/esm/exported-related/Icon/index.js +1 -1
- package/dist/esm/exported-related/Icon/index.js.map +2 -2
- package/dist/esm/exported-related/ItemRenderer/index.js +2 -3
- package/dist/esm/exported-related/ItemRenderer/index.js.map +2 -2
- package/dist/esm/exported-related/ItemRenderer/usePropsWithDefaults.js +1 -2
- package/dist/esm/exported-related/ItemRenderer/usePropsWithDefaults.js.map +2 -2
- package/dist/esm/exported-related/OpenWindowItem/index.js +1 -1
- package/dist/esm/exported-related/OpenWindowItem/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemHeader/index.js +6 -7
- package/dist/esm/outOfTheBox/ItemHeader/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemLink/index.js +0 -1
- package/dist/esm/outOfTheBox/ItemLink/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemSeparator/index.js +1 -0
- package/dist/esm/outOfTheBox/ItemSeparator/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemSubmenu/index.js +6 -6
- package/dist/esm/outOfTheBox/ItemSubmenu/index.js.map +2 -2
- package/dist/esm/outOfTheBox/styled.js +3 -3
- package/dist/esm/outOfTheBox/styled.js.map +2 -2
- package/dist/esm/parts/LeftNavContent/index.js +6 -3
- package/dist/esm/parts/LeftNavContent/index.js.map +2 -2
- package/dist/esm/parts/LeftNavFooterItem/index.js +5 -5
- package/dist/esm/parts/LeftNavFooterItem/index.js.map +2 -2
- package/dist/esm/parts/LeftNavFooterItem/styled.js +4 -4
- package/dist/esm/parts/LeftNavFooterItem/styled.js.map +2 -2
- package/dist/esm/parts/LeftNavLoading/index.js +7 -9
- package/dist/esm/parts/LeftNavLoading/index.js.map +2 -2
- package/dist/types/outOfTheBox/styled.d.ts +1 -1
- package/dist/types/parts/LeftNavFooterItem/styled.d.ts +1 -1
- package/dist/types/tests/a11y/axe-collapsed.test.d.ts +1 -0
- package/dist/types/tests/a11y/axe-expanded.test.d.ts +1 -0
- package/dist/types/tests/a11y/axe-opened.test.d.ts +1 -0
- package/package.json +9 -8
|
@@ -37,8 +37,8 @@ __export(styled_exports, {
|
|
|
37
37
|
module.exports = __toCommonJS(styled_exports);
|
|
38
38
|
var React = __toESM(require("react"));
|
|
39
39
|
var import_ds_system = require("@elliemae/ds-system");
|
|
40
|
+
var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
|
40
41
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
41
|
-
var import_ds_icons = require("@elliemae/ds-icons");
|
|
42
42
|
var import_common = require("../../common/index.js");
|
|
43
43
|
var import_constants = require("../../constants/index.js");
|
|
44
44
|
const StyledFooterMenu = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSLeftNavigationName, slot: import_constants.DSLeftNavigationSlots.FOOTER_MENU })`
|
|
@@ -89,14 +89,14 @@ const StyledFooterSeparator = (0, import_ds_system.styled)(import_ds_grid.Grid,
|
|
|
89
89
|
width: 1px;
|
|
90
90
|
background-color: ${(props) => props.theme.colors.neutral[100]};
|
|
91
91
|
`;
|
|
92
|
-
const StyledMenuCollapse = (0, import_ds_system.styled)(
|
|
92
|
+
const StyledMenuCollapse = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, {
|
|
93
93
|
name: import_constants.DSLeftNavigationName,
|
|
94
94
|
slot: import_constants.DSLeftNavigationSlots.FOOTER_MENU_COLLAPSE
|
|
95
95
|
})`
|
|
96
|
+
padding: 0;
|
|
96
97
|
margin: 0 12px;
|
|
97
|
-
cursor: pointer;
|
|
98
98
|
:focus {
|
|
99
|
-
outline: 2px solid ${(props) => props.theme.colors.brand[
|
|
99
|
+
outline: 2px solid ${(props) => props.theme.colors.brand[800]};
|
|
100
100
|
}
|
|
101
101
|
`;
|
|
102
102
|
//# sourceMappingURL=styled.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/LeftNavFooterItem/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AACrB,
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { getLeftBorderStyle, getItemBackgroundStyle } from '../../common/index.js';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants/index.js';\n\nexport const StyledFooterMenu = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.FOOTER_MENU })`\n width: 100%;\n margin-top: auto;\n background: ${(props) => props.theme.colors.neutral['000']};\n\n border-top: 1px solid ${(props) => props.theme.colors.neutral[100]};\n`;\n\nexport const StyledFooterItem = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.FOOTER_ITEM })<{\n expanded: boolean;\n opened: boolean;\n selected: boolean;\n}>`\n position: relative;\n ${getLeftBorderStyle}\n\n min-height: 48px;\n cursor: ${(props) => (props.expanded ? 'auto' : 'pointer')};\n\n ${getItemBackgroundStyle}\n\n outline: none;\n\n :focus {\n &:before {\n content: '';\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0px;\n border: 2px solid ${(props) => props.theme.colors.brand[600]};\n pointer-events: none;\n }\n }\n`;\n\nexport const StyledFooterLabel = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.FOOTER_LABEL,\n})<{ labelOverflow: string }>`\n font-size: 11px;\n color: ${(props) => props.theme.colors.neutral[500]};\n line-height: 14px;\n word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n`;\n\nexport const StyledFooterSeparator = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.FOOTER_SEPARATOR,\n})`\n height: 16px;\n width: 1px;\n background-color: ${(props) => props.theme.colors.neutral[100]};\n`;\n\nexport const StyledMenuCollapse = styled(DSButtonV2, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.FOOTER_MENU_COLLAPSE,\n})`\n padding: 0;\n margin: 0 12px;\n :focus {\n outline: 2px solid ${(props) => props.theme.colors.brand[800]};\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,0BAA2B;AAC3B,qBAAqB;AACrB,oBAA2D;AAC3D,uBAA4D;AAErD,MAAM,uBAAmB,yBAAO,qBAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,YAAY,CAAC;AAAA;AAAA;AAAA,gBAGpG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA,0BAEjC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG5D,MAAM,uBAAmB,yBAAO,qBAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,YAAY,CAAC;AAAA;AAAA,IAMhH;AAAA;AAAA;AAAA,YAGQ,CAAC,UAAW,MAAM,WAAW,SAAS;AAAA;AAAA,IAE9C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYsB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAM1D,MAAM,wBAAoB,yBAAO,qBAAM;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,gBAEpC,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc;AAAA;AAGvE,MAAM,4BAAwB,yBAAO,qBAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,sBAGqB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAGxD,MAAM,yBAAqB,yBAAO,gCAAY;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA,yBAIwB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,25 +33,23 @@ __export(LeftNavLoading_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(LeftNavLoading_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
var import_ds_circular_progress_indicator =
|
|
36
|
+
var import_ds_circular_progress_indicator = require("@elliemae/ds-circular-progress-indicator");
|
|
37
37
|
var import_ds_grid = __toESM(require("@elliemae/ds-grid"));
|
|
38
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
39
39
|
var import_constants = require("../../constants/index.js");
|
|
40
40
|
const StyledLoaderWrapper = (0, import_ds_system.styled)(import_ds_grid.default, { name: import_constants.DSLeftNavigationName, slot: import_constants.DSLeftNavigationSlots.LOADER_WRAPPER })`
|
|
41
|
-
grid-area: left-nav-body;
|
|
42
41
|
height: 100%;
|
|
43
42
|
place-items: center;
|
|
44
43
|
z-index: 0;
|
|
45
44
|
background-color: white;
|
|
46
45
|
`;
|
|
47
|
-
const LeftNavLoading = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledLoaderWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
48
|
-
import_ds_circular_progress_indicator.
|
|
46
|
+
const LeftNavLoading = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledLoaderWrapper, { role: "menuitem", "aria-label": "Loading...", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
47
|
+
import_ds_circular_progress_indicator.DSCircularIndeterminateIndicator,
|
|
49
48
|
{
|
|
50
|
-
size: expanded ? "
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
showTooltip: !expanded
|
|
49
|
+
size: expanded ? "l" : "s",
|
|
50
|
+
text: "Loading...",
|
|
51
|
+
showText: expanded,
|
|
52
|
+
withTooltip: !expanded
|
|
55
53
|
}
|
|
56
54
|
) });
|
|
57
55
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/LeftNavLoading/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
6
|
-
"names": ["Grid"
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport Grid from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants/index.js';\n\nconst StyledLoaderWrapper = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.LOADER_WRAPPER })`\n height: 100%;\n place-items: center;\n z-index: 0;\n background-color: white;\n`;\n\nexport const LeftNavLoading: React.ComponentType<{ expanded: boolean }> = ({ expanded }) => (\n <StyledLoaderWrapper role=\"menuitem\" aria-label=\"Loading...\">\n <DSCircularIndeterminateIndicator\n size={expanded ? 'l' : 's'}\n text=\"Loading...\"\n showText={expanded}\n withTooltip={!expanded}\n />\n </StyledLoaderWrapper>\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADenB;AAdJ,4CAAiD;AACjD,qBAAiB;AACjB,uBAAuB;AACvB,uBAA4D;AAE5D,MAAM,0BAAsB,yBAAO,eAAAA,SAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5G,MAAM,iBAA6D,CAAC,EAAE,SAAS,MACpF,4CAAC,uBAAoB,MAAK,YAAW,cAAW,cAC9C;AAAA,EAAC;AAAA;AAAA,IACC,MAAM,WAAW,MAAM;AAAA,IACvB,MAAK;AAAA,IACL,UAAU;AAAA,IACV,aAAa,CAAC;AAAA;AAChB,GACF;",
|
|
6
|
+
"names": ["Grid"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { ChevronSmallRight } from "@elliemae/ds-icons";
|
|
4
|
-
const ChevronItem = (props) => /* @__PURE__ */ jsx(ChevronSmallRight, { size: "m", color: ["brand-primary", 800], ...props });
|
|
4
|
+
const ChevronItem = (props) => /* @__PURE__ */ jsx(ChevronSmallRight, { size: "m", color: ["brand-primary", "800"], ...props });
|
|
5
5
|
var ChevronItem_default = ChevronItem;
|
|
6
6
|
export {
|
|
7
7
|
ChevronItem,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/ChevronItem/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ChevronSmallRight } from '@elliemae/ds-icons';\n\nexport const ChevronItem = (props: unknown): JSX.Element => (\n <ChevronSmallRight size=\"m\" color={['brand-primary', 800]} {...props} />\n);\n\nexport default ChevronItem;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIrB;AAHF,SAAS,yBAAyB;AAE3B,MAAM,cAAc,CAAC,UAC1B,oBAAC,qBAAkB,MAAK,KAAI,OAAO,CAAC,iBAAiB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ChevronSmallRight } from '@elliemae/ds-icons';\n\nexport const ChevronItem = (props: unknown): JSX.Element => (\n <ChevronSmallRight size=\"m\" color={['brand-primary', '800']} {...props} />\n);\n\nexport default ChevronItem;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIrB;AAHF,SAAS,yBAAyB;AAE3B,MAAM,cAAc,CAAC,UAC1B,oBAAC,qBAAkB,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAI,GAAG,OAAO;AAG1E,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -12,7 +12,7 @@ const AugmentedIcon = (Icon2) => styled(Icon2)`
|
|
|
12
12
|
`;
|
|
13
13
|
const Icon = (IconComponent) => function(props) {
|
|
14
14
|
const StyledComponent = AugmentedIcon(IconComponent);
|
|
15
|
-
return /* @__PURE__ */ jsx(StyledComponent, { color: ["brand-primary", 800], tabIndex: 0, ...props });
|
|
15
|
+
return /* @__PURE__ */ jsx(StyledComponent, { color: ["brand-primary", "800"], tabIndex: 0, ...props });
|
|
16
16
|
};
|
|
17
17
|
export {
|
|
18
18
|
Icon
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/Icon/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\n\nconst AugmentedIcon = (Icon: React.ComponentType<{ color: unknown; tabIndex: number }>) => styled(Icon)`\n cursor: pointer;\n\n outline: 0;\n :focus,\n :active {\n outline: 1px solid #1e79c2;\n }\n`;\n\nexport const Icon = (IconComponent: React.ComponentType<{ color: unknown; tabIndex: number }>) =>\n function (props: unknown): JSX.Element {\n const StyledComponent = AugmentedIcon(IconComponent);\n return <StyledComponent color={['brand-primary', 800]} tabIndex={0} {...props} />;\n };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACgBZ;AAfX,SAAS,cAAc;AAEvB,MAAM,gBAAgB,CAACA,UAAoE,OAAOA,KAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU/F,MAAM,OAAO,CAAC,kBACnB,SAAU,OAA6B;AACrC,QAAM,kBAAkB,cAAc,aAAa;AACnD,SAAO,oBAAC,mBAAgB,OAAO,CAAC,iBAAiB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\n\nconst AugmentedIcon = (Icon: React.ComponentType<{ color: unknown; tabIndex: number }>) => styled(Icon)`\n cursor: pointer;\n\n outline: 0;\n :focus,\n :active {\n outline: 1px solid #1e79c2;\n }\n`;\n\nexport const Icon = (IconComponent: React.ComponentType<{ color: unknown; tabIndex: number }>) =>\n function (props: unknown): JSX.Element {\n const StyledComponent = AugmentedIcon(IconComponent);\n return <StyledComponent color={['brand-primary', '800']} tabIndex={0} {...props} />;\n };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACgBZ;AAfX,SAAS,cAAc;AAEvB,MAAM,gBAAgB,CAACA,UAAoE,OAAOA,KAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU/F,MAAM,OAAO,CAAC,kBACnB,SAAU,OAA6B;AACrC,QAAM,kBAAkB,cAAc,aAAa;AACnD,SAAO,oBAAC,mBAAgB,OAAO,CAAC,iBAAiB,KAAK,GAAG,UAAU,GAAI,GAAG,OAAO;AACnF;",
|
|
6
6
|
"names": ["Icon"]
|
|
7
7
|
}
|
|
@@ -11,7 +11,7 @@ const ItemRenderer = (props) => {
|
|
|
11
11
|
item,
|
|
12
12
|
item: {
|
|
13
13
|
dsId,
|
|
14
|
-
itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole,
|
|
14
|
+
itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaExpanded, ariaDescribedBy },
|
|
15
15
|
CollapsedComponent
|
|
16
16
|
},
|
|
17
17
|
subitems,
|
|
@@ -76,7 +76,7 @@ const ItemRenderer = (props) => {
|
|
|
76
76
|
opened,
|
|
77
77
|
onFocus: handleFocus,
|
|
78
78
|
"data-testid": "leftnav-item-container",
|
|
79
|
-
tabIndex: focuseable ? 0 :
|
|
79
|
+
tabIndex: focuseable ? 0 : void 0,
|
|
80
80
|
"aria-describedby": ariaDescribedBy,
|
|
81
81
|
"aria-expanded": ariaExpanded,
|
|
82
82
|
role: ariaRole,
|
|
@@ -85,7 +85,6 @@ const ItemRenderer = (props) => {
|
|
|
85
85
|
"data-opened": opened,
|
|
86
86
|
"data-type": item.type,
|
|
87
87
|
"aria-label": ariaLabel,
|
|
88
|
-
"aria-live": ariaLive,
|
|
89
88
|
children: [
|
|
90
89
|
!expandedForAnimation ? /* @__PURE__ */ jsx(StyledCollapsedContainer, { "data-testid": "leftnav-leftcomponent", justifyContent: "center", children: CollapsedComponent && /* @__PURE__ */ jsx(CollapsedComponent, { item, ctx }) }) : children,
|
|
91
90
|
hasBorderBottom && /* @__PURE__ */ jsx(StyledBorderBottom, { opened, borderBottomMr })
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/ItemRenderer/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { StyledItem, StyledCollapsedContainer, StyledBorderBottom } from './styled.js';\nimport type { ItemRendererT } from '../../index.d';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { usePropsWithDefaults } from './usePropsWithDefaults.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\n\nexport const ItemRenderer: React.ComponentType<ItemRendererT> = (props) => {\n const propsWithDefault = usePropsWithDefaults(props);\n const {\n item,\n item: {\n dsId,\n itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACmEnB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { StyledItem, StyledCollapsedContainer, StyledBorderBottom } from './styled.js';\nimport type { ItemRendererT } from '../../index.d';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { usePropsWithDefaults } from './usePropsWithDefaults.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\n\nexport const ItemRenderer: React.ComponentType<ItemRendererT> = (props) => {\n const propsWithDefault = usePropsWithDefaults(props);\n const {\n item,\n item: {\n dsId,\n itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaExpanded, ariaDescribedBy },\n CollapsedComponent,\n },\n subitems,\n minHeight,\n paddingTop,\n onClick,\n shadowStyle,\n hasBorderBottom,\n borderBottomMr,\n children,\n } = propsWithDefault;\n\n const ctx = useContext(LeftNavContext);\n const {\n leftNavProps: { onItemClick, openedItem },\n expandedForAnimation,\n selectedParent,\n selectedItem,\n setSelectedItem,\n setFocusedItem,\n visibleItemsRefs,\n } = ctx;\n\n const opened = dsId === openedItem;\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n if (onClick) onClick(); // used by uncontrolled drilldowns\n onItemClick(item, e);\n if (selectable) setSelectedItem(item.dsId as string);\n },\n [onItemClick, item, setSelectedItem, selectable, onClick],\n );\n\n const handleFocus = useCallback(() => {\n if (focuseable) setFocusedItem(dsId as string);\n }, [dsId, setFocusedItem, focuseable]);\n\n const onKeyDown = useKeyboardNavigation({\n item,\n onClick: handleOnClick,\n });\n\n const cols = useMemo(() => (expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']), [expandedForAnimation]);\n const isSelected = useMemo(() => selectedItem === dsId, [selectedItem, dsId]);\n\n if (!expandedForAnimation && !CollapsedComponent) {\n return null;\n }\n\n return (\n <>\n <StyledItem\n ref={visibleItemsRefs.current[dsId]}\n pt={paddingTop}\n pl={indent === undefined ? 'xxxs' : `${indent}px`}\n minHeight={minHeight}\n shadowStyle={shadowStyle(opened, item.type)}\n alignItems=\"flex-start\"\n cols={cols}\n onClick={!opened ? handleOnClick : () => null}\n onKeyDown={onKeyDown}\n selectable={selectable}\n selected={isSelected}\n selectedParent={selectedParent === dsId}\n opened={opened}\n onFocus={handleFocus}\n data-testid=\"leftnav-item-container\"\n tabIndex={focuseable ? 0 : undefined}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n role={ariaRole}\n data-selected={isSelected}\n data-selectedparent={selectedParent === dsId}\n data-opened={opened}\n data-type={item.type}\n aria-label={ariaLabel}\n >\n {!expandedForAnimation ? (\n <StyledCollapsedContainer data-testid=\"leftnav-leftcomponent\" justifyContent=\"center\">\n {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n </StyledCollapsedContainer>\n ) : (\n children\n )}\n {hasBorderBottom && <StyledBorderBottom opened={opened} borderBottomMr={borderBottomMr} />}\n </StyledItem>\n {subitems}\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACmEnB,mBA6B+B,KA5B7B,YADF;AAjEJ,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,YAAY,0BAA0B,0BAA0B;AAEzE,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AAE/B,MAAM,eAAmD,CAAC,UAAU;AACzE,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,YAAY,YAAY,QAAQ,WAAW,UAAU,cAAc,gBAAgB;AAAA,MAC/F;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,WAAW,cAAc;AACrC,QAAM;AAAA,IACJ,cAAc,EAAE,aAAa,WAAW;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,SAAS;AAExB,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAqC;AACpC,UAAI;AAAS,gBAAQ;AACrB,kBAAY,MAAM,CAAC;AACnB,UAAI;AAAY,wBAAgB,KAAK,IAAc;AAAA,IACrD;AAAA,IACA,CAAC,aAAa,MAAM,iBAAiB,YAAY,OAAO;AAAA,EAC1D;AAEA,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI;AAAY,qBAAe,IAAc;AAAA,EAC/C,GAAG,CAAC,MAAM,gBAAgB,UAAU,CAAC;AAErC,QAAM,YAAY,sBAAsB;AAAA,IACtC;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,OAAO,QAAQ,MAAO,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM,GAAI,CAAC,oBAAoB,CAAC;AAC9G,QAAM,aAAa,QAAQ,MAAM,iBAAiB,MAAM,CAAC,cAAc,IAAI,CAAC;AAE5E,MAAI,CAAC,wBAAwB,CAAC,oBAAoB;AAChD,WAAO;AAAA,EACT;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,iBAAiB,QAAQ,IAAI;AAAA,QAClC,IAAI;AAAA,QACJ,IAAI,WAAW,SAAY,SAAS,GAAG;AAAA,QACvC;AAAA,QACA,aAAa,YAAY,QAAQ,KAAK,IAAI;AAAA,QAC1C,YAAW;AAAA,QACX;AAAA,QACA,SAAS,CAAC,SAAS,gBAAgB,MAAM;AAAA,QACzC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,gBAAgB,mBAAmB;AAAA,QACnC;AAAA,QACA,SAAS;AAAA,QACT,eAAY;AAAA,QACZ,UAAU,aAAa,IAAI;AAAA,QAC3B,oBAAkB;AAAA,QAClB,iBAAe;AAAA,QACf,MAAM;AAAA,QACN,iBAAe;AAAA,QACf,uBAAqB,mBAAmB;AAAA,QACxC,eAAa;AAAA,QACb,aAAW,KAAK;AAAA,QAChB,cAAY;AAAA,QAEX;AAAA,WAAC,uBACA,oBAAC,4BAAyB,eAAY,yBAAwB,gBAAe,UAC1E,gCAAsB,oBAAC,sBAAmB,MAAY,KAAU,GACnE,IAEA;AAAA,UAED,mBAAmB,oBAAC,sBAAmB,QAAgB,gBAAgC;AAAA;AAAA;AAAA,IAC1F;AAAA,IACC;AAAA,KACH;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/ItemRenderer/usePropsWithDefaults.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport type { ItemOptsT, ItemRendererT } from '../../index.d';\n\nconst itemDefaultProps: ItemOptsT = {\n label: '',\n labelOverflow: 'truncate',\n selectable: true,\n focuseable: true,\n openable: false,\n closable: false,\n ariaLabel:
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AAGxB,MAAM,mBAA8B;AAAA,EAClC,OAAO;AAAA,EACP,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport type { ItemOptsT, ItemRendererT } from '../../index.d';\n\nconst itemDefaultProps: ItemOptsT = {\n label: '',\n labelOverflow: 'truncate',\n selectable: true,\n focuseable: true,\n openable: false,\n closable: false,\n ariaLabel: undefined,\n ariaRole: 'menuitem',\n ariaExpanded: undefined,\n ariaDescribedBy: undefined,\n};\n\nconst itemWithoutShadows = ['ds-left-nav-item-header', 'ds-left-nav-item-link', 'ds-left-nav-item-submenu'];\n\n// Make use Item props with defaults\nexport const usePropsWithDefaults = (props: ItemRendererT): Required<ItemRendererT> => {\n const propsWithDefault = useMemo(() => {\n const itemWithDefaults = {\n CollapsedComponent: () => null,\n ...props.item,\n itemOpts: { ...itemDefaultProps, ...props.item.itemOpts },\n };\n return {\n minHeight: '48px',\n paddingTop: '12px',\n subitems: [],\n shadowStyle: (opened: boolean, type: string) => () =>\n `box-shadow: ${\n opened || !itemWithoutShadows.includes(type) ? 'inset 4px 0 0 0 #52A6EC' : 'inset 4px 0 0 0 white'\n }`,\n hasBorderBottom: false,\n borderBottomMr: '0px',\n ...props,\n item: itemWithDefaults,\n };\n }, [props]);\n\n return propsWithDefault as Required<ItemRendererT>;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AAGxB,MAAM,mBAA8B;AAAA,EAClC,OAAO;AAAA,EACP,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,cAAc;AAAA,EACd,iBAAiB;AACnB;AAEA,MAAM,qBAAqB,CAAC,2BAA2B,yBAAyB,0BAA0B;AAGnG,MAAM,uBAAuB,CAAC,UAAkD;AACrF,QAAM,mBAAmB,QAAQ,MAAM;AACrC,UAAM,mBAAmB;AAAA,MACvB,oBAAoB,MAAM;AAAA,MAC1B,GAAG,MAAM;AAAA,MACT,UAAU,EAAE,GAAG,kBAAkB,GAAG,MAAM,KAAK,SAAS;AAAA,IAC1D;AACA,WAAO;AAAA,MACL,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,UAAU,CAAC;AAAA,MACX,aAAa,CAAC,QAAiB,SAAiB,MAC9C,eACE,UAAU,CAAC,mBAAmB,SAAS,IAAI,IAAI,4BAA4B;AAAA,MAE/E,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,GAAG;AAAA,MACH,MAAM;AAAA,IACR;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -8,7 +8,7 @@ const StyledOpenWindow = styled(OpenWindowIcon)`
|
|
|
8
8
|
outline: 1px solid ${(props) => props.theme.colors.brand[800]};
|
|
9
9
|
}
|
|
10
10
|
`;
|
|
11
|
-
const OpenWindow = (props) => /* @__PURE__ */ jsx(StyledOpenWindow, { size: "s", color: ["brand-primary", 800], ...props });
|
|
11
|
+
const OpenWindow = (props) => /* @__PURE__ */ jsx(StyledOpenWindow, { size: "s", color: ["brand-primary", "800"], ...props });
|
|
12
12
|
var OpenWindowItem_default = OpenWindow;
|
|
13
13
|
export {
|
|
14
14
|
OpenWindow,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/OpenWindowItem/index.tsx"],
|
|
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;ACYrB;AAXF,SAAS,cAAc;AACvB,SAAS,cAAc,sBAAsB;AAE7C,MAAM,mBAAmB,OAAO,cAAc;AAAA;AAAA;AAAA,yBAGrB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAIzD,MAAM,aAAa,CAAC,UACzB,oBAAC,oBAAiB,MAAK,KAAI,OAAO,CAAC,iBAAiB,
|
|
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;ACYrB;AAXF,SAAS,cAAc;AACvB,SAAS,cAAc,sBAAsB;AAE7C,MAAM,mBAAmB,OAAO,cAAc;AAAA;AAAA;AAAA,yBAGrB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAIzD,MAAM,aAAa,CAAC,UACzB,oBAAC,oBAAiB,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAI,GAAG,OAAO;AAGzE,IAAO,yBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useCallback } from "react";
|
|
4
|
+
import { ChevronSmallLeft } from "@elliemae/ds-icons";
|
|
4
5
|
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
5
6
|
import { ItemRenderer } from "../../exported-related/index.js";
|
|
6
7
|
import {
|
|
7
8
|
StyledItemLabel,
|
|
8
|
-
StyledChevronLeft,
|
|
9
9
|
StyledBottomContainer,
|
|
10
10
|
StyledLeftContainer,
|
|
11
|
-
StyledRightContainer
|
|
11
|
+
StyledRightContainer,
|
|
12
|
+
StyledChevronLeft
|
|
12
13
|
} from "../styled.js";
|
|
13
14
|
import { CHEVRON_BACK_DS_ID } from "../../exported-related/constants.js";
|
|
14
15
|
const notOpenedShadowStyle = (isSelected) => (theme) => `
|
|
@@ -77,19 +78,17 @@ const ItemHeader = (props) => {
|
|
|
77
78
|
opened && /* @__PURE__ */ jsx(
|
|
78
79
|
StyledChevronLeft,
|
|
79
80
|
{
|
|
80
|
-
|
|
81
|
-
color: ["brand-primary", 800],
|
|
81
|
+
buttonType: "raw",
|
|
82
82
|
onClick: (e) => {
|
|
83
83
|
onItemClick(item, e);
|
|
84
84
|
},
|
|
85
85
|
"data-testid": "leftnav-leftcomponent-chevron",
|
|
86
|
-
tabIndex: 0,
|
|
87
86
|
onFocus: (e) => {
|
|
88
87
|
e.stopPropagation();
|
|
89
88
|
setFocusedItem(CHEVRON_BACK_DS_ID);
|
|
90
89
|
},
|
|
91
|
-
|
|
92
|
-
"
|
|
90
|
+
"aria-label": `Close ${ariaLabel}`,
|
|
91
|
+
children: /* @__PURE__ */ jsx(ChevronSmallLeft, { size: "m", color: ["brand-primary", "800"] })
|
|
93
92
|
}
|
|
94
93
|
),
|
|
95
94
|
CollapsedComponent && /* @__PURE__ */ jsx(CollapsedComponent, { item, ctx })
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { Theme } from '@elliemae/ds-system';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { ComponentProps } from '../../index.d';\nimport {\n StyledItemLabel,\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useCallback } from 'react';\nimport { ChevronSmallLeft } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { Theme } from '@elliemae/ds-system';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { ComponentProps } from '../../index.d';\nimport {\n StyledItemLabel,\n StyledBottomContainer,\n StyledLeftContainer,\n StyledRightContainer,\n StyledChevronLeft,\n} from '../styled.js';\nimport { CHEVRON_BACK_DS_ID } from '../../exported-related/constants.js';\n\nconst notOpenedShadowStyle = (isSelected: boolean) => (theme: Theme) =>\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}, category` : 'category');\n\n const isSelected = selectedItem === dsId || selectedParent === dsId;\n\n const shadowStyle = useCallback(\n (opened_: boolean) => (theme: Theme) =>\n !opened_ ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n [isSelected],\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 <StyledLeftContainer\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 buttonType=\"raw\"\n onClick={(e: React.MouseEvent<HTMLElement>) => {\n onItemClick(item, e);\n }}\n data-testid=\"leftnav-leftcomponent-chevron\"\n onFocus={(e: React.FocusEvent) => {\n e.stopPropagation();\n setFocusedItem(CHEVRON_BACK_DS_ID);\n }}\n aria-label={`Close ${ariaLabel}`}\n >\n <ChevronSmallLeft size=\"m\" color={['brand-primary', '800']} />\n </StyledChevronLeft>\n )}\n {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n </StyledLeftContainer>\n <StyledItemLabel\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 </StyledItemLabel>\n <StyledRightContainer\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 </StyledRightContainer>\n {BottomComponent && (\n <StyledBottomContainer\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 </StyledBottomContainer>\n )}\n </ItemRenderer>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { Theme } from '@elliemae/ds-system';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { ComponentProps } from '../../index.d';\nimport { StyledItemLabel, StyledLeftContainer, StyledRightContainer } from '../styled.js';\n\nconst notOpenedShadowStyle = (isSelected: boolean) => (theme: Theme) =>\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 },\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_: boolean) => (theme: Theme) =>\n !opened_ ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n [isSelected],\n );\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ariaLabel: typeof label === 'string' ? label : '',\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACgDnB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React, { useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { Theme } from '@elliemae/ds-system';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { ComponentProps } from '../../index.d';\nimport { StyledItemLabel, StyledLeftContainer, StyledRightContainer } from '../styled.js';\n\nconst notOpenedShadowStyle = (isSelected: boolean) => (theme: Theme) =>\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 },\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_: boolean) => (theme: Theme) =>\n !opened_ ? notOpenedShadowStyle(isSelected)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n [isSelected],\n );\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ariaLabel: typeof label === 'string' ? label : '',\n ...item.itemOpts,\n selectable: true,\n },\n }}\n shadowStyle={shadowStyle}\n >\n <StyledLeftContainer cols={['38px']} gutter=\"1px\" justifyItems=\"center\" data-testid=\"leftnav-leftcomponent\">\n {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n </StyledLeftContainer>\n <StyledItemLabel\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 </StyledItemLabel>\n <StyledRightContainer mt=\"xxxs\" pr=\"xxs2\" data-testid=\"leftnav-right-component\">\n {RightComponent && <RightComponent ctx={ctx} item={item} />}\n </StyledRightContainer>\n </ItemRenderer>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACgDnB,SAY2B,KAZ3B;AA/CJ,SAAgB,mBAAmB;AACnC,SAAS,kCAAkC;AAE3C,SAAS,oBAAoB;AAE7B,SAAS,iBAAiB,qBAAqB,4BAA4B;AAE3E,MAAM,uBAAuB,CAAC,eAAwB,CAAC,UACrD;AAAA,gCAC8B,aAAa,MAAM,OAAO,MAAM,GAAG,IAAI;AAAA;AAAA;AAAA,kCAGrC,aAAa,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA,kCAI7D,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAIjD,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,qBAAqB;AAAA,MACpD;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI;AAEJ,QAAM,gBAAgB,qBAAqB;AAE3C,QAAM,aAAa,iBAAiB,QAAQ,mBAAmB;AAE/D,QAAM,cAAc;AAAA,IAClB,CAAC,YAAqB,CAAC,UACrB,CAAC,UAAU,qBAAqB,UAAU,EAAE,KAAK,IAAI;AAAA,IACvD,CAAC,UAAU;AAAA,EACb;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU;AAAA,UACR,WAAW,OAAO,UAAU,WAAW,QAAQ;AAAA,UAC/C,GAAG,KAAK;AAAA,UACR,YAAY;AAAA,QACd;AAAA,MACF;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,uBAAoB,MAAM,CAAC,MAAM,GAAG,QAAO,OAAM,cAAa,UAAS,eAAY,yBACjF,gCAAsB,oBAAC,sBAAmB,MAAY,KAAU,GACnE;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAa,mBAAmB;AAAA,YAChC;AAAA,YAEC,4BAAkB,aAAa,oBAAC,8BAA2B,OAAO,OAAO,WAAU,gBAAe,IAAK;AAAA;AAAA,QAC1G;AAAA,QACA,oBAAC,wBAAqB,IAAG,QAAO,IAAG,QAAO,eAAY,2BACnD,4BAAkB,oBAAC,kBAAe,KAAU,MAAY,GAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemSeparator/index.tsx"],
|
|
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.js';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants/index.js';\nimport type { ComponentProps } from '../../index.d';\n\nconst StyledSeparator = styled('div', { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM_SEPARATOR })`\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;
|
|
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.js';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants/index.js';\nimport type { ComponentProps } from '../../index.d';\n\nconst StyledSeparator = styled('div', { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM_SEPARATOR })`\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 ariaRole: 'separator',\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;ACgCjB;AA/BN,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB,6BAA6B;AAG5D,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,eAAe,CAAC;AAAA;AAAA,sBAE1F,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,YAEnD,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;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,GAAG;AAAA,QACH,UAAU;AAAA,UACR,GAAG,KAAK;AAAA,UACR,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,YAAY;AAAA,QACd;AAAA,QACA,oBAAoB;AAAA,MACtB;AAAA,MACA,WAAU;AAAA,MACV,YAAW;AAAA,MAEX,8BAAC,mBAAgB,eAAY,6BAA4B;AAAA;AAAA,EAC3D;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useCallback } from "react";
|
|
4
|
+
import { ChevronSmallLeft } from "@elliemae/ds-icons";
|
|
4
5
|
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
5
6
|
import { ItemRenderer } from "../../exported-related/index.js";
|
|
6
7
|
import { CHEVRON_BACK_DS_ID } from "../../exported-related/constants.js";
|
|
7
8
|
import {
|
|
8
9
|
StyledLeftContainer,
|
|
9
|
-
StyledChevronLeft,
|
|
10
10
|
StyledItemLabel,
|
|
11
11
|
StyledBottomContainer,
|
|
12
|
-
StyledRightContainer
|
|
12
|
+
StyledRightContainer,
|
|
13
|
+
StyledChevronLeft
|
|
13
14
|
} from "../styled.js";
|
|
14
15
|
const notOpenedShadowStyle = (isSelected) => (theme) => `
|
|
15
16
|
box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : "transparent"};
|
|
@@ -77,8 +78,7 @@ const ItemSubmenu = (props) => {
|
|
|
77
78
|
opened && /* @__PURE__ */ jsx(
|
|
78
79
|
StyledChevronLeft,
|
|
79
80
|
{
|
|
80
|
-
|
|
81
|
-
color: ["brand-primary", 800],
|
|
81
|
+
buttonType: "raw",
|
|
82
82
|
onClick: (e) => {
|
|
83
83
|
onItemClick(item, e);
|
|
84
84
|
},
|
|
@@ -88,8 +88,8 @@ const ItemSubmenu = (props) => {
|
|
|
88
88
|
e.stopPropagation();
|
|
89
89
|
setFocusedItem(CHEVRON_BACK_DS_ID);
|
|
90
90
|
},
|
|
91
|
-
|
|
92
|
-
"
|
|
91
|
+
"aria-label": `Close ${ariaLabel}`,
|
|
92
|
+
children: /* @__PURE__ */ jsx(ChevronSmallLeft, { size: "m", color: ["brand-primary", "800"] })
|
|
93
93
|
}
|
|
94
94
|
),
|
|
95
95
|
CollapsedComponent && /* @__PURE__ */ jsx(CollapsedComponent, { item, ctx })
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemSubmenu/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable indent */\nimport React, { useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { Theme } from '@elliemae/ds-system';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { ComponentProps } from '../../index.d';\nimport { CHEVRON_BACK_DS_ID } from '../../exported-related/constants.js';\nimport {\n StyledLeftContainer,\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable indent */\nimport React, { useCallback } from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallLeft } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { Theme } from '@elliemae/ds-system';\nimport { ItemRenderer } from '../../exported-related/index.js';\nimport type { ComponentProps } from '../../index.d';\nimport { CHEVRON_BACK_DS_ID } from '../../exported-related/constants.js';\nimport {\n StyledLeftContainer,\n StyledItemLabel,\n StyledBottomContainer,\n StyledRightContainer,\n StyledChevronLeft,\n} from '../styled.js';\n\nconst notOpenedShadowStyle = (isSelected: boolean) => (theme: Theme) =>\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_: boolean) => (theme: Theme) =>\n !opened_\n ? notOpenedShadowStyle(isSelected || selectedParent === dsId)(theme)\n : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n [dsId, isSelected, selectedParent],\n );\n\n const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? `${label}, category` : 'category');\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 <StyledLeftContainer\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 buttonType=\"raw\"\n onClick={(e: React.MouseEvent<HTMLElement>) => {\n onItemClick(item, e);\n }}\n data-testid=\"leftnav-leftcomponent-chevron\"\n tabIndex={0}\n onFocus={(e: React.FocusEvent) => {\n e.stopPropagation();\n setFocusedItem(CHEVRON_BACK_DS_ID);\n }}\n aria-label={`Close ${ariaLabel}`}\n >\n <ChevronSmallLeft size=\"m\" color={['brand-primary', '800']} />\n </StyledChevronLeft>\n )}\n {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n </StyledLeftContainer>\n <StyledItemLabel\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 </StyledItemLabel>\n <StyledRightContainer\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 </StyledRightContainer>\n {BottomComponent && (\n <StyledBottomContainer\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 </StyledBottomContainer>\n )}\n </ItemRenderer>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { styled } from "@elliemae/ds-system";
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
|
-
import {
|
|
4
|
+
import { DSButtonV2 } from "@elliemae/ds-button-v2";
|
|
5
5
|
import { DSLeftNavigationName, DSLeftNavigationSlots } from "../constants/index.js";
|
|
6
6
|
const StyledLabel = styled(Grid, {
|
|
7
7
|
name: DSLeftNavigationName,
|
|
@@ -70,11 +70,11 @@ const StyledItemLabel = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftN
|
|
|
70
70
|
color: ${(props) => props.theme.colors.neutral[800]};
|
|
71
71
|
word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
|
|
72
72
|
`;
|
|
73
|
-
const StyledChevronLeft = styled(
|
|
73
|
+
const StyledChevronLeft = styled(DSButtonV2, {
|
|
74
74
|
name: DSLeftNavigationName,
|
|
75
75
|
slot: DSLeftNavigationSlots.ITEM_CHEVRON_BACK
|
|
76
76
|
})`
|
|
77
|
-
|
|
77
|
+
padding: 0;
|
|
78
78
|
:focus {
|
|
79
79
|
outline: 2px solid ${(props) => props.theme.colors.brand[800]};
|
|
80
80
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/outOfTheBox/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, type Theme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAA0B;AACnC,SAAS,YAAY;AACrB,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, type Theme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../constants/index.js';\n\ntype ColorsKey = keyof Theme['colors'];\n\ninterface StyledLabelT {\n labelBold?: boolean;\n labelOverflow?: string;\n labelColor?: [ColorsKey, keyof Theme['colors'][ColorsKey]];\n}\n\nexport const StyledLabel = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.ITEM_LABEL,\n})<StyledLabelT>`\n font-size: 13px;\n font-weight: ${(props) => (props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular)};\n color: ${({ labelColor, theme }) =>\n labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800]};\n line-height: 14px;\n word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n`;\n\nexport const StyledDate = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM_DATE })`\n font-size: 12px;\n color: ${(props) => props.theme.colors.neutral[600]};\n line-height: 14px;\n`;\n\nexport const StyledArrowContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.ARROW_CONTAINER,\n})``;\n\nexport const StyledRightContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.RIGHT_CONTAINER,\n})``;\n\nexport const StyledSectionLabel = styled('span', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.SECTION_LABEL,\n})`\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 name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.VERTICAL_SEPARATOR,\n})`\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 name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.SECTION_RIGHT_LABEL,\n})`\n font-size: 12px;\n line-height: 13px;\n`;\n\nexport const StyledSectionContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.SECTION_CONTAINER,\n})``;\n\nexport const StyledBottomContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.BOTTOM_CONTAINER,\n})`\n grid-column: span 3;\n`;\n\nexport const StyledLeftContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.LEFT_CONTAINER,\n})``;\n\nexport const StyledItemLabel = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM_LABEL })<{\n labelOverflow: string;\n}>`\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(DSButtonV2, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.ITEM_CHEVRON_BACK,\n})`\n padding: 0;\n :focus {\n outline: 2px solid ${(props) => props.theme.colors.brand[800]};\n }\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAA0B;AACnC,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB,6BAA6B;AAUrD,MAAM,cAAc,OAAO,MAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA,iBAEgB,CAAC,UAAW,MAAM,YAAY,MAAM,MAAM,YAAY,WAAW,MAAM,MAAM,YAAY;AAAA,WAC/F,CAAC,EAAE,YAAY,MAAM,MAC5B,aAAa,MAAM,OAAO,WAAW,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,gBAEtE,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc;AAAA;AAGvE,MAAM,aAAa,OAAO,MAAM,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,UAAU,CAAC;AAAA;AAAA,WAEjG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAI7C,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,qBAAqB,OAAO,QAAQ;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,iBACnC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAIvC,MAAM,0BAA0B,OAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,cACa,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,gBAG3B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAGlD,MAAM,mBAAmB,OAAO,QAAQ;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,yBAAyB,OAAO,MAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,wBAAwB,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAIM,MAAM,sBAAsB,OAAO,MAAM;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,kBAAkB,OAAO,MAAM,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,WAAW,CAAC;AAAA;AAAA,WAIvG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,gBACpC,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc;AAAA;AAGvE,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,yBAGwB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|