@elliemae/ds-left-navigation 3.51.0-rc.8 → 3.51.1
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/constants/constants.js +95 -24
- package/dist/cjs/constants/constants.js.map +2 -2
- package/dist/cjs/exported-related/ItemRenderer/index.js +20 -4
- package/dist/cjs/exported-related/ItemRenderer/index.js.map +2 -2
- package/dist/cjs/exported-related/Notifications/index.js +46 -9
- package/dist/cjs/exported-related/Notifications/index.js.map +2 -2
- package/dist/cjs/index.js +6 -6
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemControlledDrilldown/index.js +46 -10
- package/dist/cjs/outOfTheBox/ItemControlledDrilldown/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemHeader/index.js +4 -0
- package/dist/cjs/outOfTheBox/ItemHeader/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemLink/index.js +19 -2
- package/dist/cjs/outOfTheBox/ItemLink/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemSection/index.js +27 -6
- package/dist/cjs/outOfTheBox/ItemSection/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemSeparator/index.js +6 -1
- package/dist/cjs/outOfTheBox/ItemSeparator/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemSkeleton/index.js +12 -1
- package/dist/cjs/outOfTheBox/ItemSkeleton/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemSubmenu/index.js +9 -5
- package/dist/cjs/outOfTheBox/ItemSubmenu/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemTextLabel/index.js +1 -1
- package/dist/cjs/outOfTheBox/ItemTextLabel/index.js.map +1 -1
- package/dist/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js +36 -11
- package/dist/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/ItemWithDate/index.js +23 -6
- package/dist/cjs/outOfTheBox/ItemWithDate/index.js.map +2 -2
- package/dist/cjs/outOfTheBox/styled.js +28 -9
- package/dist/cjs/outOfTheBox/styled.js.map +2 -2
- package/dist/cjs/parts/LeftNavContent/index.js +58 -43
- package/dist/cjs/parts/LeftNavContent/index.js.map +2 -2
- package/dist/cjs/parts/LeftNavFooterItem/index.js +104 -58
- package/dist/cjs/parts/LeftNavFooterItem/index.js.map +3 -3
- package/dist/esm/constants/constants.js +95 -24
- package/dist/esm/constants/constants.js.map +2 -2
- package/dist/esm/exported-related/ItemRenderer/index.js +21 -5
- package/dist/esm/exported-related/ItemRenderer/index.js.map +2 -2
- package/dist/esm/exported-related/Notifications/index.js +48 -11
- package/dist/esm/exported-related/Notifications/index.js.map +2 -2
- package/dist/esm/index.js +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemControlledDrilldown/index.js +47 -11
- package/dist/esm/outOfTheBox/ItemControlledDrilldown/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemHeader/index.js +4 -0
- package/dist/esm/outOfTheBox/ItemHeader/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemLink/index.js +19 -2
- package/dist/esm/outOfTheBox/ItemLink/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemSection/index.js +27 -6
- package/dist/esm/outOfTheBox/ItemSection/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemSeparator/index.js +7 -2
- package/dist/esm/outOfTheBox/ItemSeparator/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemSkeleton/index.js +12 -1
- package/dist/esm/outOfTheBox/ItemSkeleton/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemSubmenu/index.js +11 -7
- package/dist/esm/outOfTheBox/ItemSubmenu/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemTextLabel/index.js +1 -1
- package/dist/esm/outOfTheBox/ItemTextLabel/index.js.map +1 -1
- package/dist/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js +37 -12
- package/dist/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +2 -2
- package/dist/esm/outOfTheBox/ItemWithDate/index.js +24 -7
- package/dist/esm/outOfTheBox/ItemWithDate/index.js.map +2 -2
- package/dist/esm/outOfTheBox/styled.js +28 -9
- package/dist/esm/outOfTheBox/styled.js.map +2 -2
- package/dist/esm/parts/LeftNavContent/index.js +61 -46
- package/dist/esm/parts/LeftNavContent/index.js.map +2 -2
- package/dist/esm/parts/LeftNavFooterItem/index.js +105 -59
- package/dist/esm/parts/LeftNavFooterItem/index.js.map +2 -2
- package/dist/types/constants/constants.d.ts +81 -45
- package/package.json +10 -10
|
@@ -51,16 +51,24 @@ const StyledLabel = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
|
51
51
|
name: import_constants.DSLeftNavigationName,
|
|
52
52
|
slot: import_constants.LEFT_NAVIGATION_SLOTS.ITEM_LABEL
|
|
53
53
|
})`
|
|
54
|
-
font-size: 13px;
|
|
54
|
+
font-size: 1rem; // 13px -> 13/13 = 1rem;
|
|
55
55
|
font-weight: ${(props) => props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular};
|
|
56
56
|
color: ${({ labelColor, theme }) => labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800]};
|
|
57
|
-
line-height: 14px
|
|
57
|
+
line-height: 1.0769rem; // 14px -> 14/13 = 1.0769rem
|
|
58
58
|
word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
|
|
59
|
+
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
60
|
+
font-size: 0.8125rem; // 16px -> 13/16 = 0.8125
|
|
61
|
+
line-height: 0.875rem; // 14px -> 14/16 = 0.875rem
|
|
62
|
+
}
|
|
59
63
|
`;
|
|
60
64
|
const StyledDate = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSLeftNavigationName, slot: import_constants.LEFT_NAVIGATION_SLOTS.ITEM_DATE })`
|
|
61
|
-
font-size: 12px
|
|
65
|
+
font-size: 0.923rem; // 12px -> 12/13 = 0.9230rem
|
|
62
66
|
color: ${(props) => props.theme.colors.neutral[600]};
|
|
63
|
-
line-height: 14px
|
|
67
|
+
line-height: 1.0769rem; // 14px -> 14/13 = 1.0769rem
|
|
68
|
+
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
69
|
+
font-size: 0.75rem; // 12px -> 12/16 = 0.75rem
|
|
70
|
+
line-height: 0.875rem; // 14px -> 14/16 = 0.875rem
|
|
71
|
+
}
|
|
64
72
|
`;
|
|
65
73
|
const StyledArrowContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
66
74
|
name: import_constants.DSLeftNavigationName,
|
|
@@ -74,10 +82,14 @@ const StyledSectionLabel = (0, import_ds_system.styled)("span", {
|
|
|
74
82
|
name: import_constants.DSLeftNavigationName,
|
|
75
83
|
slot: import_constants.LEFT_NAVIGATION_SLOTS.SECTION_LABEL
|
|
76
84
|
})`
|
|
77
|
-
font-size: 13px
|
|
85
|
+
font-size: 1rem; // 13px -> 13/13 = 1rem
|
|
78
86
|
color: ${(props) => props.theme.colors.neutral[700]};
|
|
79
87
|
margin-left: ${(props) => props.theme.space.xxs};
|
|
80
|
-
line-height: 13px
|
|
88
|
+
line-height: 1rem; // 13px -> 13/13 = 1rem
|
|
89
|
+
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
90
|
+
font-size: 0.8125rem; // 13px -> 13/16 = 0.8125rem
|
|
91
|
+
line-height: 0.8125rem; // 13px -> 13/16 = 0.8125rem
|
|
92
|
+
}
|
|
81
93
|
`;
|
|
82
94
|
const StyledVerticalSeparator = (0, import_ds_system.styled)("div", {
|
|
83
95
|
name: import_constants.DSLeftNavigationName,
|
|
@@ -92,8 +104,12 @@ const StyledRightLabel = (0, import_ds_system.styled)("span", {
|
|
|
92
104
|
name: import_constants.DSLeftNavigationName,
|
|
93
105
|
slot: import_constants.LEFT_NAVIGATION_SLOTS.SECTION_RIGHT_LABEL
|
|
94
106
|
})`
|
|
95
|
-
font-size: 12px;
|
|
96
|
-
line-height: 13px
|
|
107
|
+
font-size: 0.923rem; // 12px -> 12/13 = 0.9230rem;
|
|
108
|
+
line-height: 1rem; // 13px -> 13/13 = 1rem
|
|
109
|
+
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
110
|
+
font-size: 0.75rem; // 12px -> 12/16 = 0.75rem
|
|
111
|
+
line-height: 0.8125rem; // 13px -> 13/16 = 0.8125rem
|
|
112
|
+
}
|
|
97
113
|
`;
|
|
98
114
|
const StyledSectionContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
99
115
|
name: import_constants.DSLeftNavigationName,
|
|
@@ -110,9 +126,12 @@ const StyledLeftContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
|
110
126
|
slot: import_constants.LEFT_NAVIGATION_SLOTS.LEFT_CONTAINER
|
|
111
127
|
})``;
|
|
112
128
|
const StyledItemLabel = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSLeftNavigationName, slot: import_constants.LEFT_NAVIGATION_SLOTS.ITEM_LABEL })`
|
|
113
|
-
font-size: 14px
|
|
129
|
+
font-size: 1.0769rem; // 14px -> 14/13 = 1.0769rem
|
|
114
130
|
color: ${(props) => props.theme.colors.neutral[800]};
|
|
115
131
|
word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
|
|
132
|
+
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
133
|
+
font-size: 0.875rem; // 14px -> 14/16 = 0.875rem
|
|
134
|
+
}
|
|
116
135
|
`;
|
|
117
136
|
const StyledChevronLeft = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, {
|
|
118
137
|
name: import_constants.DSLeftNavigationName,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/outOfTheBox/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-return */\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSLeftNavigationName, LEFT_NAVIGATION_SLOTS } from '../constants/constants.js';\nimport type { DSLeftNavigationT } from '../react-desc-prop-types.js';\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: LEFT_NAVIGATION_SLOTS.ITEM_LABEL,\n})<StyledLabelT>`\n font-size: 1rem; // 13px -> 13/13 = 1rem;\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: 1.0769rem; // 14px -> 14/13 = 1.0769rem\n word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.8125rem; // 16px -> 13/16 = 0.8125\n line-height: 0.875rem; // 14px -> 14/16 = 0.875rem\n }\n`;\n\nexport const StyledDate = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_DATE })`\n font-size: 0.923rem; // 12px -> 12/13 = 0.9230rem\n color: ${(props) => props.theme.colors.neutral[600]};\n line-height: 1.0769rem; // 14px -> 14/13 = 1.0769rem\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.75rem; // 12px -> 12/16 = 0.75rem\n line-height: 0.875rem; // 14px -> 14/16 = 0.875rem\n }\n`;\n\nexport const StyledArrowContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.ARROW_CONTAINER,\n})``;\n\nexport const StyledRightContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.RIGHT_CONTAINER,\n})``;\n\nexport const StyledSectionLabel = styled('span', {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.SECTION_LABEL,\n})`\n font-size: 1rem; // 13px -> 13/13 = 1rem\n color: ${(props) => props.theme.colors.neutral[700]};\n margin-left: ${(props) => props.theme.space.xxs};\n line-height: 1rem; // 13px -> 13/13 = 1rem\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.8125rem; // 13px -> 13/16 = 0.8125rem\n line-height: 0.8125rem; // 13px -> 13/16 = 0.8125rem\n }\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.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: LEFT_NAVIGATION_SLOTS.SECTION_RIGHT_LABEL,\n})`\n font-size: 0.923rem; // 12px -> 12/13 = 0.9230rem;\n line-height: 1rem; // 13px -> 13/13 = 1rem\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.75rem; // 12px -> 12/16 = 0.75rem\n line-height: 0.8125rem; // 13px -> 13/16 = 0.8125rem\n }\n`;\n\nexport const StyledSectionContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.SECTION_CONTAINER,\n})``;\n\nexport const StyledBottomContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.BOTTOM_CONTAINER,\n})`\n grid-column: span 3;\n`;\n\nexport const StyledLeftContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.LEFT_CONTAINER,\n})``;\n\nexport const StyledItemLabel = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_LABEL })<{\n labelOverflow?: DSLeftNavigationT.LabelOveflowT;\n}>`\n font-size: 1.0769rem; // 14px -> 14/13 = 1.0769rem\n color: ${(props) => props.theme.colors.neutral[800]};\n word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.875rem; // 14px -> 14/16 = 0.875rem\n }\n`;\n\nexport const StyledChevronLeft = styled(DSButtonV2, {\n name: DSLeftNavigationName,\n slot: LEFT_NAVIGATION_SLOTS.ITEM_CHEVRON_BACK,\n})`\n padding: 0;\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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,14 +33,15 @@ __export(LeftNavContent_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(LeftNavContent_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
var import_react = __toESM(require("react"));
|
|
37
36
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
37
|
+
var import_react = __toESM(require("react"));
|
|
38
38
|
var import_LeftNavigationContext = require("../../LeftNavigationContext.js");
|
|
39
|
+
var import_constants = require("../../constants/constants.js");
|
|
40
|
+
var import_ItemSkeleton = require("../../outOfTheBox/ItemSkeleton/index.js");
|
|
39
41
|
var import_LeftNavFooterItem = require("../LeftNavFooterItem/index.js");
|
|
42
|
+
var import_LeftNavLoading = require("../LeftNavLoading/index.js");
|
|
40
43
|
var import_OutOfTheBoxMapItem = require("../OutOfTheBoxMapItem.js");
|
|
41
44
|
var import_styled = require("./styled.js");
|
|
42
|
-
var import_ItemSkeleton = require("../../outOfTheBox/ItemSkeleton/index.js");
|
|
43
|
-
var import_LeftNavLoading = require("../LeftNavLoading/index.js");
|
|
44
45
|
const leftNavScreenReaderInstructions = "Left Navigation. You can navigate through the items using the Up/Down arrows. To expand or select an item, use the Enter/Return or Space keys. Expandable items can also be opened/closed with the Right/Left arrows. The Home and End keys will take you to the first and last item respectively.";
|
|
45
46
|
const LeftNavInnerContent = () => {
|
|
46
47
|
const {
|
|
@@ -52,6 +53,7 @@ const LeftNavInnerContent = () => {
|
|
|
52
53
|
import_styled.StyledLeftNavHeaderArea,
|
|
53
54
|
{
|
|
54
55
|
selected: !!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId),
|
|
56
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.HEADER_AREA,
|
|
55
57
|
role: "group",
|
|
56
58
|
children: isSkeleton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemSkeleton.ItemSkeleton, { item: { dsId: "header-skeleton", itemOpts: { skeletonVariant: "item" } }, hasBorderBottom: true }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
57
59
|
" ",
|
|
@@ -59,50 +61,61 @@ const LeftNavInnerContent = () => {
|
|
|
59
61
|
] })
|
|
60
62
|
}
|
|
61
63
|
),
|
|
62
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
64
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
65
|
+
import_styled.StyledLeftNavBodyAreasContainer,
|
|
66
|
+
{
|
|
67
|
+
cols: ["1fr"],
|
|
68
|
+
rows: ["auto", "1fr"],
|
|
69
|
+
role: "group",
|
|
70
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.BODY_AREAS_CONTAINER,
|
|
71
|
+
children: [
|
|
72
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
73
|
+
import_styled.StyledLeftNavBodyHeaderArea,
|
|
74
|
+
{
|
|
75
|
+
selected: !!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId),
|
|
76
|
+
role: "group",
|
|
77
|
+
isSkeleton,
|
|
78
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.BODY_HEADER_AREA,
|
|
79
|
+
children: [
|
|
80
|
+
isSkeleton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
81
|
+
import_ItemSkeleton.ItemSkeleton,
|
|
82
|
+
{
|
|
83
|
+
item: {
|
|
84
|
+
dsId: "body-header-skeleton",
|
|
85
|
+
itemOpts: {
|
|
86
|
+
skeletonVariant: "item"
|
|
87
|
+
}
|
|
88
|
+
}
|
|
77
89
|
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
86
|
-
import_styled.StyledLeftNavBodyItemsArea,
|
|
87
|
-
{
|
|
88
|
-
selected: !withoutBodyShadow && openedItem !== null,
|
|
89
|
-
tabIndex: -1,
|
|
90
|
-
role: "group",
|
|
91
|
-
isSkeleton,
|
|
92
|
-
children: isSkeleton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
93
|
-
import_ItemSkeleton.ItemSkeleton,
|
|
90
|
+
) : null,
|
|
91
|
+
!isSkeleton && BodyHeaderComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OutOfTheBoxMapItem.OutOfTheBoxMapItem, { item: BodyHeaderComponent }) : null
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
),
|
|
95
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
96
|
+
import_styled.StyledLeftNavBodyItemsArea,
|
|
94
97
|
{
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
98
|
+
selected: !withoutBodyShadow && openedItem !== null,
|
|
99
|
+
tabIndex: -1,
|
|
100
|
+
role: "group",
|
|
101
|
+
isSkeleton,
|
|
102
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.BODY_ITEMS_AREA,
|
|
103
|
+
children: isSkeleton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
104
|
+
import_ItemSkeleton.ItemSkeleton,
|
|
105
|
+
{
|
|
106
|
+
item: {
|
|
107
|
+
dsId: "action-items-skeleton",
|
|
108
|
+
itemOpts: {
|
|
109
|
+
skeletonVariant: "subitem"
|
|
110
|
+
}
|
|
111
|
+
}
|
|
99
112
|
}
|
|
100
|
-
}
|
|
113
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OutOfTheBoxMapItem.OutOfTheBoxMapItem, { item }, item.dsId)) })
|
|
101
114
|
}
|
|
102
|
-
)
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
115
|
+
)
|
|
116
|
+
]
|
|
117
|
+
}
|
|
118
|
+
)
|
|
106
119
|
] });
|
|
107
120
|
};
|
|
108
121
|
const LeftNavContent = () => {
|
|
@@ -128,6 +141,7 @@ const LeftNavContent = () => {
|
|
|
128
141
|
expandedWidth,
|
|
129
142
|
expanded,
|
|
130
143
|
"aria-label": leftNavScreenReaderInstructions,
|
|
144
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.ROOT,
|
|
131
145
|
...globalProps,
|
|
132
146
|
getOwnerProps,
|
|
133
147
|
getOwnerPropsArguments,
|
|
@@ -139,6 +153,7 @@ const LeftNavContent = () => {
|
|
|
139
153
|
rows: loading ? ["1fr", "auto"] : ["auto", "1fr", "auto"],
|
|
140
154
|
cols: ["1fr"],
|
|
141
155
|
role: "menu",
|
|
156
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.AREAS_CONTAINER,
|
|
142
157
|
getOwnerProps,
|
|
143
158
|
getOwnerPropsArguments,
|
|
144
159
|
children: [
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/LeftNavContent/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { ItemSkeleton } from '../../outOfTheBox/ItemSkeleton/index.js';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem/index.js';\nimport { LeftNavLoading } from '../LeftNavLoading/index.js';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem.js';\nimport {\n StyledLeftNavAreasContainer,\n StyledLeftNavBodyAreasContainer,\n StyledLeftNavBodyHeaderArea,\n StyledLeftNavBodyItemsArea,\n StyledLeftNavExpandAnimationWrapper,\n StyledLeftNavHeaderArea,\n} from './styled.js';\nconst leftNavScreenReaderInstructions =\n 'Left Navigation. You can navigate through the items using the Up/Down arrows. ' +\n 'To expand or select an item, use the Enter/Return or Space keys. ' +\n 'Expandable items can also be opened/closed with the Right/Left arrows. ' +\n 'The Home and End keys will take you to the first and last item respectively.';\n\nconst LeftNavInnerContent = () => {\n const {\n leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow, isSkeleton },\n selectedItem,\n } = React.useContext(LeftNavContext);\n return (\n <>\n <StyledLeftNavHeaderArea\n selected={!!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId as string)}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.HEADER_AREA} // https://jira.elliemae.io/browse/PUI-15589\n role=\"group\"\n >\n {isSkeleton ? (\n <ItemSkeleton item={{ dsId: 'header-skeleton', itemOpts: { skeletonVariant: 'item' } }} hasBorderBottom />\n ) : (\n <> {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}</>\n )}\n </StyledLeftNavHeaderArea>\n <StyledLeftNavBodyAreasContainer\n cols={['1fr']}\n rows={['auto', '1fr']}\n role=\"group\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.BODY_AREAS_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n >\n <StyledLeftNavBodyHeaderArea\n selected={!!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId as string)}\n role=\"group\"\n isSkeleton={isSkeleton}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.BODY_HEADER_AREA} // https://jira.elliemae.io/browse/PUI-15589\n >\n {isSkeleton ? (\n <ItemSkeleton\n item={{\n dsId: 'body-header-skeleton',\n itemOpts: {\n skeletonVariant: 'item',\n },\n }}\n />\n ) : null}\n {!isSkeleton && BodyHeaderComponent ? <OutOfTheBoxMapItem item={BodyHeaderComponent} /> : null}\n </StyledLeftNavBodyHeaderArea>\n <StyledLeftNavBodyItemsArea\n selected={!withoutBodyShadow && openedItem !== null}\n tabIndex={-1}\n role=\"group\"\n isSkeleton={isSkeleton}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.BODY_ITEMS_AREA} // https://jira.elliemae.io/browse/PUI-15589\n >\n {isSkeleton ? (\n <ItemSkeleton\n item={{\n dsId: 'action-items-skeleton',\n itemOpts: {\n skeletonVariant: 'subitem',\n },\n }}\n />\n ) : (\n <>\n {items.map((item) => (\n <OutOfTheBoxMapItem item={item} key={item.dsId} />\n ))}\n </>\n )}\n </StyledLeftNavBodyItemsArea>\n </StyledLeftNavBodyAreasContainer>\n </>\n );\n};\n\n// original props from previous dev\nconst LeftNavContent: React.ComponentType = () => {\n const {\n expandedForAnimation,\n leftNavProps: {\n expanded,\n expandedWidth,\n FooterLabelComponent,\n footerLabel,\n onFooterExpand,\n onFooterClose,\n loading,\n },\n leftNavProps,\n } = React.useContext(LeftNavContext);\n\n const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n const globalProps = useGetGlobalAttributes(leftNavProps);\n\n return (\n <StyledLeftNavExpandAnimationWrapper\n expandedWidth={expandedWidth}\n expanded={expanded}\n aria-label={leftNavScreenReaderInstructions}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.ROOT} // https://jira.elliemae.io/browse/PUI-15589\n {...globalProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledLeftNavAreasContainer\n expandedWidth={expandedWidth}\n expanded={expandedForAnimation}\n rows={loading ? ['1fr', 'auto'] : ['auto', '1fr', 'auto']}\n cols={['1fr']}\n role=\"menu\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.AREAS_CONTAINER} // https://jira.elliemae.io/browse/PUI-15589\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {loading && <LeftNavLoading expanded={expandedForAnimation} />}\n {!loading && <LeftNavInnerContent />}\n <LeftNavFooterItem\n footerLabel={footerLabel}\n FooterLabelComponent={FooterLabelComponent}\n onFooterExpand={onFooterExpand}\n onFooterClose={onFooterClose}\n />\n </StyledLeftNavAreasContainer>\n </StyledLeftNavExpandAnimationWrapper>\n );\n};\n\nexport default LeftNavContent;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -34,25 +34,27 @@ __export(LeftNavFooterItem_exports, {
|
|
|
34
34
|
module.exports = __toCommonJS(LeftNavFooterItem_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
|
-
var
|
|
37
|
+
var import_ds_grid = require("@elliemae/ds-grid");
|
|
38
38
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
39
39
|
var import_ds_skeleton = require("@elliemae/ds-skeleton");
|
|
40
|
-
var
|
|
40
|
+
var import_react = __toESM(require("react"));
|
|
41
41
|
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
42
|
-
var import_styled = require("./styled.js");
|
|
43
|
-
var import_hooks = require("../../hooks/index.js");
|
|
44
42
|
var import_LeftNavigationContext = __toESM(require("../../LeftNavigationContext.js"));
|
|
45
|
-
var import_constants = require("../../
|
|
43
|
+
var import_constants = require("../../constants/constants.js");
|
|
44
|
+
var import_constants2 = require("../../exported-related/constants.js");
|
|
45
|
+
var import_hooks = require("../../hooks/index.js");
|
|
46
|
+
var import_styled = require("./styled.js");
|
|
46
47
|
const LeftNavFooterItem = (props) => {
|
|
47
48
|
const { footerLabel, FooterLabelComponent, onFooterExpand = () => null, onFooterClose = () => null } = props;
|
|
48
49
|
const {
|
|
49
|
-
leftNavProps: { labelOverflow, isSkeleton, hideFooterPipe },
|
|
50
|
+
leftNavProps: { labelOverflow, isSkeleton, hideFooterPipe, expanded },
|
|
50
51
|
expandedForAnimation,
|
|
51
52
|
setFocusedItem,
|
|
53
|
+
focusedItem,
|
|
52
54
|
visibleItemsRefs,
|
|
53
55
|
leftNavProps
|
|
54
56
|
} = (0, import_react.useContext)(import_LeftNavigationContext.default);
|
|
55
|
-
const id =
|
|
57
|
+
const id = import_constants2.FOOTER_DS_ID;
|
|
56
58
|
const handleOnClick = expandedForAnimation ? onFooterClose : onFooterExpand;
|
|
57
59
|
const onKeyDown = (0, import_hooks.useKeyboardNavigation)({
|
|
58
60
|
item: {
|
|
@@ -82,64 +84,108 @@ const LeftNavFooterItem = (props) => {
|
|
|
82
84
|
}
|
|
83
85
|
return footerLabel;
|
|
84
86
|
}, [footerLabel, FooterLabelComponent, labelOverflow]);
|
|
87
|
+
const postAnimationButtonFocusHandler = (0, import_react.useCallback)(
|
|
88
|
+
(newHTMLNode) => {
|
|
89
|
+
if (newHTMLNode === null || !expanded) {
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
92
|
+
if (focusedItem === id) {
|
|
93
|
+
newHTMLNode.focus();
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
[focusedItem, id, expanded]
|
|
97
|
+
);
|
|
85
98
|
if (isSkeleton) {
|
|
86
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
99
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
100
|
+
import_styled.StyledFooterMenu,
|
|
101
|
+
{
|
|
102
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.FOOTER_MENU,
|
|
103
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { height: "48px", justifyContent: "center", alignItems: "center", cols: ["1fr"], p: "xxs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", height: "24px" }) })
|
|
104
|
+
},
|
|
105
|
+
id
|
|
106
|
+
);
|
|
87
107
|
}
|
|
88
108
|
const getOwnerProps = import_react.default.useCallback(() => leftNavProps, [leftNavProps]);
|
|
89
109
|
const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
|
|
90
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
91
|
-
import_styled.
|
|
110
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
111
|
+
import_styled.StyledFooterMenu,
|
|
92
112
|
{
|
|
93
|
-
|
|
94
|
-
tabIndex: expandedForAnimation ? -1 : 0,
|
|
95
|
-
expanded: expandedForAnimation,
|
|
96
|
-
pt: "xxs2",
|
|
97
|
-
height: expandedForAnimation ? "auto" : "48px",
|
|
98
|
-
alignItems: "flex-start",
|
|
99
|
-
pl: "xxs2",
|
|
100
|
-
cols: expandedForAnimation ? ["auto", "1fr", "auto"] : ["38px"],
|
|
101
|
-
onClick: expandedForAnimation ? () => null : handleOnClick,
|
|
102
|
-
onKeyDown,
|
|
103
|
-
onFocus: () => setFocusedItem(id),
|
|
104
|
-
role: "menuitem",
|
|
105
|
-
"aria-label": expandedForAnimation ? `Footer, ${typeof footerLabel === "string" ? footerLabel : ""}` : `Expand left navigation`,
|
|
113
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.FOOTER_MENU,
|
|
106
114
|
getOwnerProps,
|
|
107
115
|
getOwnerPropsArguments,
|
|
108
|
-
children:
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
116
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
117
|
+
import_styled.StyledFooterItem,
|
|
118
|
+
{
|
|
119
|
+
innerRef: visibleItemsRefs.current[id],
|
|
120
|
+
tabIndex: expandedForAnimation ? -1 : 0,
|
|
121
|
+
expanded: expandedForAnimation,
|
|
122
|
+
pt: "xxs2",
|
|
123
|
+
height: expandedForAnimation ? "auto" : "48px",
|
|
124
|
+
alignItems: "flex-start",
|
|
125
|
+
pl: "xxs2",
|
|
126
|
+
cols: expandedForAnimation ? ["auto", "1fr", "auto"] : ["38px"],
|
|
127
|
+
onClick: expandedForAnimation ? () => null : handleOnClick,
|
|
128
|
+
onKeyDown,
|
|
129
|
+
onFocus: () => setFocusedItem(id),
|
|
130
|
+
role: "menuitem",
|
|
131
|
+
"aria-label": expandedForAnimation ? `Footer, ${typeof footerLabel === "string" ? footerLabel : ""}` : `Expand left navigation`,
|
|
132
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.FOOTER_ITEM,
|
|
133
|
+
getOwnerProps,
|
|
134
|
+
getOwnerPropsArguments,
|
|
135
|
+
children: !expandedForAnimation ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
136
|
+
import_ds_icons.MenuExpand,
|
|
137
|
+
{
|
|
138
|
+
size: "m",
|
|
139
|
+
color: ["brand-primary", "800"],
|
|
140
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.FOOTER_BTN
|
|
141
|
+
}
|
|
142
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
143
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
144
|
+
import_styled.StyledFooterLabel,
|
|
145
|
+
{
|
|
146
|
+
mt: "5px",
|
|
147
|
+
mr: "12px",
|
|
148
|
+
mb: "16px",
|
|
149
|
+
labelOverflow,
|
|
150
|
+
"aria-live": "polite",
|
|
151
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL,
|
|
152
|
+
getOwnerProps,
|
|
153
|
+
getOwnerPropsArguments,
|
|
154
|
+
children: label
|
|
155
|
+
}
|
|
156
|
+
),
|
|
157
|
+
!hideFooterPipe ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
158
|
+
import_styled.StyledFooterSeparator,
|
|
159
|
+
{
|
|
160
|
+
mt: "xxxs",
|
|
161
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.FOOTER_SEPARATOR
|
|
162
|
+
}
|
|
163
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
|
|
164
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
165
|
+
import_styled.StyledMenuCollapse,
|
|
166
|
+
{
|
|
167
|
+
innerRef: postAnimationButtonFocusHandler,
|
|
168
|
+
buttonType: "raw",
|
|
169
|
+
onClick: handleMenuCollapseClick,
|
|
170
|
+
tabIndex: 0,
|
|
171
|
+
onFocus: (e) => {
|
|
172
|
+
e.stopPropagation();
|
|
173
|
+
setFocusedItem(import_constants2.FOOTER_MENU_CLOSE_DS_ID);
|
|
174
|
+
},
|
|
175
|
+
role: "button",
|
|
176
|
+
"aria-label": "Collapse left navigation",
|
|
177
|
+
"data-testid": import_constants.LEFT_NAVIGATION_DATA_TESTID.FOOTER_BTN,
|
|
178
|
+
getOwnerProps,
|
|
179
|
+
getOwnerPropsArguments,
|
|
180
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MenuCollapse, { size: "m", color: ["brand-primary", "800"] })
|
|
181
|
+
}
|
|
182
|
+
)
|
|
183
|
+
] })
|
|
184
|
+
}
|
|
185
|
+
)
|
|
186
|
+
},
|
|
187
|
+
id
|
|
188
|
+
);
|
|
143
189
|
};
|
|
144
190
|
var LeftNavFooterItem_default = LeftNavFooterItem;
|
|
145
191
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/LeftNavFooterItem/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react-hooks/rules-of-hooks */\n/* eslint-disable max-lines */\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
6
|
-
"names": ["LeftNavigationContext", "React"]
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react-hooks/rules-of-hooks */\n/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { MenuCollapse, MenuExpand } from '@elliemae/ds-icons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport React, { useCallback, useContext, useMemo } from 'react';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport LeftNavigationContext from '../../LeftNavigationContext.js';\nimport { LEFT_NAVIGATION_DATA_TESTID } from '../../constants/constants.js';\nimport { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../../exported-related/constants.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\nimport {\n StyledFooterItem,\n StyledFooterLabel,\n StyledFooterMenu,\n StyledFooterSeparator,\n StyledMenuCollapse,\n} from './styled.js';\n\ntype LeftNavFooterItemProps = {\n footerLabel: string;\n FooterLabelComponent?: React.ComponentType<unknown>;\n onFooterExpand: React.MouseEventHandler & React.KeyboardEventHandler;\n onFooterClose: React.MouseEventHandler & React.KeyboardEventHandler;\n};\n\n// eslint-disable-next-line complexity\nexport const LeftNavFooterItem: React.ComponentType<LeftNavFooterItemProps> = (props) => {\n const { footerLabel, FooterLabelComponent, onFooterExpand = () => null, onFooterClose = () => null } = props;\n const {\n leftNavProps: { labelOverflow, isSkeleton, hideFooterPipe, expanded },\n expandedForAnimation,\n setFocusedItem,\n focusedItem,\n visibleItemsRefs,\n leftNavProps,\n } = useContext(LeftNavigationContext);\n const id = FOOTER_DS_ID;\n\n const handleOnClick = expandedForAnimation ? onFooterClose : onFooterExpand;\n\n const onKeyDown = useKeyboardNavigation({\n item: {\n dsId: id,\n itemOpts: {\n selectable: !expandedForAnimation,\n openable: false,\n closable: false,\n },\n },\n onClick: handleOnClick,\n });\n\n const handleMenuCollapseClick = useCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n handleOnClick(e as React.MouseEvent<HTMLButtonElement, MouseEvent>);\n setFocusedItem(id);\n },\n [handleOnClick, id, setFocusedItem],\n );\n\n const label = useMemo(() => {\n if (FooterLabelComponent) {\n return <FooterLabelComponent />;\n }\n if (labelOverflow === 'truncate') {\n return <SimpleTruncatedTooltipText value={footerLabel} placement=\"bottom-start\" />;\n }\n return footerLabel;\n }, [footerLabel, FooterLabelComponent, labelOverflow]);\n\n const postAnimationButtonFocusHandler = useCallback(\n (newHTMLNode: HTMLButtonElement | null) => {\n if (newHTMLNode === null || !expanded) {\n return;\n }\n if (focusedItem === id) {\n newHTMLNode.focus();\n }\n },\n [focusedItem, id, expanded],\n );\n\n if (isSkeleton) {\n return (\n <StyledFooterMenu\n key={id}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_MENU} // https://jira.elliemae.io/browse/PUI-15589\n >\n <Grid height=\"48px\" justifyContent=\"center\" alignItems=\"center\" cols={['1fr']} p=\"xxs\">\n <DSSkeleton variant=\"rectangular\" height=\"24px\" />\n </Grid>\n </StyledFooterMenu>\n );\n }\n\n const getOwnerProps = React.useCallback(() => leftNavProps, [leftNavProps]);\n\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n return (\n <StyledFooterMenu\n key={id}\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_MENU} // https://jira.elliemae.io/browse/PUI-15589\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledFooterItem\n innerRef={visibleItemsRefs.current[id]}\n tabIndex={expandedForAnimation ? -1 : 0}\n expanded={expandedForAnimation}\n pt=\"xxs2\"\n height={expandedForAnimation ? 'auto' : '48px'}\n alignItems=\"flex-start\"\n pl=\"xxs2\"\n cols={expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']}\n onClick={expandedForAnimation ? () => null : handleOnClick}\n onKeyDown={onKeyDown}\n onFocus={() => setFocusedItem(id)}\n role=\"menuitem\"\n aria-label={\n expandedForAnimation\n ? `Footer, ${typeof footerLabel === 'string' ? footerLabel : ''}`\n : `Expand left navigation`\n }\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_ITEM} // https://jira.elliemae.io/browse/PUI-15589\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {!expandedForAnimation ? (\n <MenuExpand\n size=\"m\"\n color={['brand-primary', '800']}\n // https://jira.elliemae.io/browse/PUI-15589\n // VERY SPECIAL CASE, THE SLOT FOOTER_BTN GOES TO THE ICON WHEN COLLAPSED, TO THE BTN WHEN EXPANDED\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_BTN}\n />\n ) : (\n <>\n <StyledFooterLabel\n mt=\"5px\"\n mr=\"12px\"\n mb=\"16px\"\n labelOverflow={labelOverflow}\n aria-live=\"polite\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL} // https://jira.elliemae.io/browse/PUI-15589\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {label}\n </StyledFooterLabel>\n {!hideFooterPipe ? (\n <StyledFooterSeparator\n mt=\"xxxs\"\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_SEPARATOR} // https://jira.elliemae.io/browse/PUI-15589\n />\n ) : (\n <div></div>\n )}\n <StyledMenuCollapse\n innerRef={postAnimationButtonFocusHandler}\n buttonType=\"raw\"\n onClick={handleMenuCollapseClick}\n tabIndex={0}\n onFocus={(e: React.FocusEvent) => {\n e.stopPropagation();\n setFocusedItem(FOOTER_MENU_CLOSE_DS_ID);\n }}\n role=\"button\"\n aria-label=\"Collapse left navigation\"\n // VERY SPECIAL CASE, THE SLOT FOOTER_BTN GOES TO THE ICON WHEN COLLAPSED, TO THE BTN WHEN EXPANDED\n data-testid={LEFT_NAVIGATION_DATA_TESTID.FOOTER_BTN}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <MenuCollapse size=\"m\" color={['brand-primary', '800']} />\n </StyledMenuCollapse>\n </>\n )}\n </StyledFooterItem>\n </StyledFooterMenu>\n );\n};\n\nexport default LeftNavFooterItem;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["import_constants", "LeftNavigationContext", "React"]
|
|
7
7
|
}
|