@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
|
@@ -7,16 +7,24 @@ const StyledLabel = styled(Grid, {
|
|
|
7
7
|
name: DSLeftNavigationName,
|
|
8
8
|
slot: LEFT_NAVIGATION_SLOTS.ITEM_LABEL
|
|
9
9
|
})`
|
|
10
|
-
font-size: 13px;
|
|
10
|
+
font-size: 1rem; // 13px -> 13/13 = 1rem;
|
|
11
11
|
font-weight: ${(props) => props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular};
|
|
12
12
|
color: ${({ labelColor, theme }) => labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800]};
|
|
13
|
-
line-height: 14px
|
|
13
|
+
line-height: 1.0769rem; // 14px -> 14/13 = 1.0769rem
|
|
14
14
|
word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
|
|
15
|
+
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
16
|
+
font-size: 0.8125rem; // 16px -> 13/16 = 0.8125
|
|
17
|
+
line-height: 0.875rem; // 14px -> 14/16 = 0.875rem
|
|
18
|
+
}
|
|
15
19
|
`;
|
|
16
20
|
const StyledDate = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_DATE })`
|
|
17
|
-
font-size: 12px
|
|
21
|
+
font-size: 0.923rem; // 12px -> 12/13 = 0.9230rem
|
|
18
22
|
color: ${(props) => props.theme.colors.neutral[600]};
|
|
19
|
-
line-height: 14px
|
|
23
|
+
line-height: 1.0769rem; // 14px -> 14/13 = 1.0769rem
|
|
24
|
+
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
25
|
+
font-size: 0.75rem; // 12px -> 12/16 = 0.75rem
|
|
26
|
+
line-height: 0.875rem; // 14px -> 14/16 = 0.875rem
|
|
27
|
+
}
|
|
20
28
|
`;
|
|
21
29
|
const StyledArrowContainer = styled(Grid, {
|
|
22
30
|
name: DSLeftNavigationName,
|
|
@@ -30,10 +38,14 @@ const StyledSectionLabel = styled("span", {
|
|
|
30
38
|
name: DSLeftNavigationName,
|
|
31
39
|
slot: LEFT_NAVIGATION_SLOTS.SECTION_LABEL
|
|
32
40
|
})`
|
|
33
|
-
font-size: 13px
|
|
41
|
+
font-size: 1rem; // 13px -> 13/13 = 1rem
|
|
34
42
|
color: ${(props) => props.theme.colors.neutral[700]};
|
|
35
43
|
margin-left: ${(props) => props.theme.space.xxs};
|
|
36
|
-
line-height: 13px
|
|
44
|
+
line-height: 1rem; // 13px -> 13/13 = 1rem
|
|
45
|
+
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
46
|
+
font-size: 0.8125rem; // 13px -> 13/16 = 0.8125rem
|
|
47
|
+
line-height: 0.8125rem; // 13px -> 13/16 = 0.8125rem
|
|
48
|
+
}
|
|
37
49
|
`;
|
|
38
50
|
const StyledVerticalSeparator = styled("div", {
|
|
39
51
|
name: DSLeftNavigationName,
|
|
@@ -48,8 +60,12 @@ const StyledRightLabel = styled("span", {
|
|
|
48
60
|
name: DSLeftNavigationName,
|
|
49
61
|
slot: LEFT_NAVIGATION_SLOTS.SECTION_RIGHT_LABEL
|
|
50
62
|
})`
|
|
51
|
-
font-size: 12px;
|
|
52
|
-
line-height: 13px
|
|
63
|
+
font-size: 0.923rem; // 12px -> 12/13 = 0.9230rem;
|
|
64
|
+
line-height: 1rem; // 13px -> 13/13 = 1rem
|
|
65
|
+
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
66
|
+
font-size: 0.75rem; // 12px -> 12/16 = 0.75rem
|
|
67
|
+
line-height: 0.8125rem; // 13px -> 13/16 = 0.8125rem
|
|
68
|
+
}
|
|
53
69
|
`;
|
|
54
70
|
const StyledSectionContainer = styled(Grid, {
|
|
55
71
|
name: DSLeftNavigationName,
|
|
@@ -66,9 +82,12 @@ const StyledLeftContainer = styled(Grid, {
|
|
|
66
82
|
slot: LEFT_NAVIGATION_SLOTS.LEFT_CONTAINER
|
|
67
83
|
})``;
|
|
68
84
|
const StyledItemLabel = styled(Grid, { name: DSLeftNavigationName, slot: LEFT_NAVIGATION_SLOTS.ITEM_LABEL })`
|
|
69
|
-
font-size: 14px
|
|
85
|
+
font-size: 1.0769rem; // 14px -> 14/13 = 1.0769rem
|
|
70
86
|
color: ${(props) => props.theme.colors.neutral[800]};
|
|
71
87
|
word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
|
|
88
|
+
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
89
|
+
font-size: 0.875rem; // 14px -> 14/16 = 0.875rem
|
|
90
|
+
}
|
|
72
91
|
`;
|
|
73
92
|
const StyledChevronLeft = styled(DSButtonV2, {
|
|
74
93
|
name: DSLeftNavigationName,
|
|
@@ -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", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,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,OAAQ;AAAA,WACvG,CAAC,EAAE,YAAY,MAAM,MAC5B,aAAa,MAAM,OAAO,WAAW,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,gBAEvE,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc,QAAS;AAAA,uBAChE,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,MAAM,aAAa,OAAO,MAAM,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,UAAU,CAAC;AAAA;AAAA,WAEjG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,uBAE9B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,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,CAAC;AAAA,iBACpC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,uBAE1B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,MAAM,0BAA0B,OAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,cACa,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA,gBAG9B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAGnD,MAAM,mBAAmB,OAAO,QAAQ;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,uBAGsB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,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,CAAC;AAAA,gBACrC,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc,QAAS;AAAA,uBAChE,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAKtD,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,yBAGwB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import React2 from "react";
|
|
4
3
|
import { useGetGlobalAttributes } from "@elliemae/ds-props-helpers";
|
|
4
|
+
import React2 from "react";
|
|
5
5
|
import { LeftNavContext } from "../../LeftNavigationContext.js";
|
|
6
|
+
import { LEFT_NAVIGATION_DATA_TESTID } from "../../constants/constants.js";
|
|
7
|
+
import { ItemSkeleton } from "../../outOfTheBox/ItemSkeleton/index.js";
|
|
6
8
|
import { LeftNavFooterItem } from "../LeftNavFooterItem/index.js";
|
|
9
|
+
import { LeftNavLoading } from "../LeftNavLoading/index.js";
|
|
7
10
|
import { OutOfTheBoxMapItem } from "../OutOfTheBoxMapItem.js";
|
|
8
11
|
import {
|
|
9
|
-
StyledLeftNavExpandAnimationWrapper,
|
|
10
12
|
StyledLeftNavAreasContainer,
|
|
11
|
-
StyledLeftNavHeaderArea,
|
|
12
13
|
StyledLeftNavBodyAreasContainer,
|
|
13
14
|
StyledLeftNavBodyHeaderArea,
|
|
14
|
-
StyledLeftNavBodyItemsArea
|
|
15
|
+
StyledLeftNavBodyItemsArea,
|
|
16
|
+
StyledLeftNavExpandAnimationWrapper,
|
|
17
|
+
StyledLeftNavHeaderArea
|
|
15
18
|
} from "./styled.js";
|
|
16
|
-
import { ItemSkeleton } from "../../outOfTheBox/ItemSkeleton/index.js";
|
|
17
|
-
import { LeftNavLoading } from "../LeftNavLoading/index.js";
|
|
18
19
|
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.";
|
|
19
20
|
const LeftNavInnerContent = () => {
|
|
20
21
|
const {
|
|
@@ -26,6 +27,7 @@ const LeftNavInnerContent = () => {
|
|
|
26
27
|
StyledLeftNavHeaderArea,
|
|
27
28
|
{
|
|
28
29
|
selected: !!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId),
|
|
30
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.HEADER_AREA,
|
|
29
31
|
role: "group",
|
|
30
32
|
children: isSkeleton ? /* @__PURE__ */ jsx(ItemSkeleton, { item: { dsId: "header-skeleton", itemOpts: { skeletonVariant: "item" } }, hasBorderBottom: true }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
31
33
|
" ",
|
|
@@ -33,50 +35,61 @@ const LeftNavInnerContent = () => {
|
|
|
33
35
|
] })
|
|
34
36
|
}
|
|
35
37
|
),
|
|
36
|
-
/* @__PURE__ */ jsxs(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
38
|
+
/* @__PURE__ */ jsxs(
|
|
39
|
+
StyledLeftNavBodyAreasContainer,
|
|
40
|
+
{
|
|
41
|
+
cols: ["1fr"],
|
|
42
|
+
rows: ["auto", "1fr"],
|
|
43
|
+
role: "group",
|
|
44
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.BODY_AREAS_CONTAINER,
|
|
45
|
+
children: [
|
|
46
|
+
/* @__PURE__ */ jsxs(
|
|
47
|
+
StyledLeftNavBodyHeaderArea,
|
|
48
|
+
{
|
|
49
|
+
selected: !!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId),
|
|
50
|
+
role: "group",
|
|
51
|
+
isSkeleton,
|
|
52
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.BODY_HEADER_AREA,
|
|
53
|
+
children: [
|
|
54
|
+
isSkeleton ? /* @__PURE__ */ jsx(
|
|
55
|
+
ItemSkeleton,
|
|
56
|
+
{
|
|
57
|
+
item: {
|
|
58
|
+
dsId: "body-header-skeleton",
|
|
59
|
+
itemOpts: {
|
|
60
|
+
skeletonVariant: "item"
|
|
61
|
+
}
|
|
62
|
+
}
|
|
51
63
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
/* @__PURE__ */ jsx(
|
|
60
|
-
StyledLeftNavBodyItemsArea,
|
|
61
|
-
{
|
|
62
|
-
selected: !withoutBodyShadow && openedItem !== null,
|
|
63
|
-
tabIndex: -1,
|
|
64
|
-
role: "group",
|
|
65
|
-
isSkeleton,
|
|
66
|
-
children: isSkeleton ? /* @__PURE__ */ jsx(
|
|
67
|
-
ItemSkeleton,
|
|
64
|
+
) : null,
|
|
65
|
+
!isSkeleton && BodyHeaderComponent ? /* @__PURE__ */ jsx(OutOfTheBoxMapItem, { item: BodyHeaderComponent }) : null
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
),
|
|
69
|
+
/* @__PURE__ */ jsx(
|
|
70
|
+
StyledLeftNavBodyItemsArea,
|
|
68
71
|
{
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
72
|
+
selected: !withoutBodyShadow && openedItem !== null,
|
|
73
|
+
tabIndex: -1,
|
|
74
|
+
role: "group",
|
|
75
|
+
isSkeleton,
|
|
76
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.BODY_ITEMS_AREA,
|
|
77
|
+
children: isSkeleton ? /* @__PURE__ */ jsx(
|
|
78
|
+
ItemSkeleton,
|
|
79
|
+
{
|
|
80
|
+
item: {
|
|
81
|
+
dsId: "action-items-skeleton",
|
|
82
|
+
itemOpts: {
|
|
83
|
+
skeletonVariant: "subitem"
|
|
84
|
+
}
|
|
85
|
+
}
|
|
73
86
|
}
|
|
74
|
-
}
|
|
87
|
+
) : /* @__PURE__ */ jsx(Fragment, { children: items.map((item) => /* @__PURE__ */ jsx(OutOfTheBoxMapItem, { item }, item.dsId)) })
|
|
75
88
|
}
|
|
76
|
-
)
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
89
|
+
)
|
|
90
|
+
]
|
|
91
|
+
}
|
|
92
|
+
)
|
|
80
93
|
] });
|
|
81
94
|
};
|
|
82
95
|
const LeftNavContent = () => {
|
|
@@ -102,6 +115,7 @@ const LeftNavContent = () => {
|
|
|
102
115
|
expandedWidth,
|
|
103
116
|
expanded,
|
|
104
117
|
"aria-label": leftNavScreenReaderInstructions,
|
|
118
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.ROOT,
|
|
105
119
|
...globalProps,
|
|
106
120
|
getOwnerProps,
|
|
107
121
|
getOwnerPropsArguments,
|
|
@@ -113,6 +127,7 @@ const LeftNavContent = () => {
|
|
|
113
127
|
rows: loading ? ["1fr", "auto"] : ["auto", "1fr", "auto"],
|
|
114
128
|
cols: ["1fr"],
|
|
115
129
|
role: "menu",
|
|
130
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.AREAS_CONTAINER,
|
|
116
131
|
getOwnerProps,
|
|
117
132
|
getOwnerPropsArguments,
|
|
118
133
|
children: [
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/LeftNavContent/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,26 +1,28 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import React2, { useContext, useCallback, useMemo } from "react";
|
|
4
|
-
import { MenuExpand, MenuCollapse } from "@elliemae/ds-icons";
|
|
5
|
-
import { DSSkeleton } from "@elliemae/ds-skeleton";
|
|
6
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
|
+
import { MenuCollapse, MenuExpand } from "@elliemae/ds-icons";
|
|
5
|
+
import { DSSkeleton } from "@elliemae/ds-skeleton";
|
|
6
|
+
import React2, { useCallback, useContext, useMemo } from "react";
|
|
7
7
|
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
8
|
+
import LeftNavigationContext from "../../LeftNavigationContext.js";
|
|
9
|
+
import { LEFT_NAVIGATION_DATA_TESTID } from "../../constants/constants.js";
|
|
10
|
+
import { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from "../../exported-related/constants.js";
|
|
11
|
+
import { useKeyboardNavigation } from "../../hooks/index.js";
|
|
8
12
|
import {
|
|
9
|
-
StyledFooterMenu,
|
|
10
13
|
StyledFooterItem,
|
|
11
14
|
StyledFooterLabel,
|
|
15
|
+
StyledFooterMenu,
|
|
12
16
|
StyledFooterSeparator,
|
|
13
17
|
StyledMenuCollapse
|
|
14
18
|
} from "./styled.js";
|
|
15
|
-
import { useKeyboardNavigation } from "../../hooks/index.js";
|
|
16
|
-
import LeftNavigationContext from "../../LeftNavigationContext.js";
|
|
17
|
-
import { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from "../../exported-related/constants.js";
|
|
18
19
|
const LeftNavFooterItem = (props) => {
|
|
19
20
|
const { footerLabel, FooterLabelComponent, onFooterExpand = () => null, onFooterClose = () => null } = props;
|
|
20
21
|
const {
|
|
21
|
-
leftNavProps: { labelOverflow, isSkeleton, hideFooterPipe },
|
|
22
|
+
leftNavProps: { labelOverflow, isSkeleton, hideFooterPipe, expanded },
|
|
22
23
|
expandedForAnimation,
|
|
23
24
|
setFocusedItem,
|
|
25
|
+
focusedItem,
|
|
24
26
|
visibleItemsRefs,
|
|
25
27
|
leftNavProps
|
|
26
28
|
} = useContext(LeftNavigationContext);
|
|
@@ -54,64 +56,108 @@ const LeftNavFooterItem = (props) => {
|
|
|
54
56
|
}
|
|
55
57
|
return footerLabel;
|
|
56
58
|
}, [footerLabel, FooterLabelComponent, labelOverflow]);
|
|
59
|
+
const postAnimationButtonFocusHandler = useCallback(
|
|
60
|
+
(newHTMLNode) => {
|
|
61
|
+
if (newHTMLNode === null || !expanded) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
if (focusedItem === id) {
|
|
65
|
+
newHTMLNode.focus();
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
[focusedItem, id, expanded]
|
|
69
|
+
);
|
|
57
70
|
if (isSkeleton) {
|
|
58
|
-
return /* @__PURE__ */ jsx(
|
|
71
|
+
return /* @__PURE__ */ jsx(
|
|
72
|
+
StyledFooterMenu,
|
|
73
|
+
{
|
|
74
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.FOOTER_MENU,
|
|
75
|
+
children: /* @__PURE__ */ jsx(Grid, { height: "48px", justifyContent: "center", alignItems: "center", cols: ["1fr"], p: "xxs", children: /* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", height: "24px" }) })
|
|
76
|
+
},
|
|
77
|
+
id
|
|
78
|
+
);
|
|
59
79
|
}
|
|
60
80
|
const getOwnerProps = React2.useCallback(() => leftNavProps, [leftNavProps]);
|
|
61
81
|
const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
|
|
62
|
-
return /* @__PURE__ */ jsx(
|
|
63
|
-
|
|
82
|
+
return /* @__PURE__ */ jsx(
|
|
83
|
+
StyledFooterMenu,
|
|
64
84
|
{
|
|
65
|
-
|
|
66
|
-
tabIndex: expandedForAnimation ? -1 : 0,
|
|
67
|
-
expanded: expandedForAnimation,
|
|
68
|
-
pt: "xxs2",
|
|
69
|
-
height: expandedForAnimation ? "auto" : "48px",
|
|
70
|
-
alignItems: "flex-start",
|
|
71
|
-
pl: "xxs2",
|
|
72
|
-
cols: expandedForAnimation ? ["auto", "1fr", "auto"] : ["38px"],
|
|
73
|
-
onClick: expandedForAnimation ? () => null : handleOnClick,
|
|
74
|
-
onKeyDown,
|
|
75
|
-
onFocus: () => setFocusedItem(id),
|
|
76
|
-
role: "menuitem",
|
|
77
|
-
"aria-label": expandedForAnimation ? `Footer, ${typeof footerLabel === "string" ? footerLabel : ""}` : `Expand left navigation`,
|
|
85
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.FOOTER_MENU,
|
|
78
86
|
getOwnerProps,
|
|
79
87
|
getOwnerPropsArguments,
|
|
80
|
-
children:
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
88
|
+
children: /* @__PURE__ */ jsx(
|
|
89
|
+
StyledFooterItem,
|
|
90
|
+
{
|
|
91
|
+
innerRef: visibleItemsRefs.current[id],
|
|
92
|
+
tabIndex: expandedForAnimation ? -1 : 0,
|
|
93
|
+
expanded: expandedForAnimation,
|
|
94
|
+
pt: "xxs2",
|
|
95
|
+
height: expandedForAnimation ? "auto" : "48px",
|
|
96
|
+
alignItems: "flex-start",
|
|
97
|
+
pl: "xxs2",
|
|
98
|
+
cols: expandedForAnimation ? ["auto", "1fr", "auto"] : ["38px"],
|
|
99
|
+
onClick: expandedForAnimation ? () => null : handleOnClick,
|
|
100
|
+
onKeyDown,
|
|
101
|
+
onFocus: () => setFocusedItem(id),
|
|
102
|
+
role: "menuitem",
|
|
103
|
+
"aria-label": expandedForAnimation ? `Footer, ${typeof footerLabel === "string" ? footerLabel : ""}` : `Expand left navigation`,
|
|
104
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.FOOTER_ITEM,
|
|
105
|
+
getOwnerProps,
|
|
106
|
+
getOwnerPropsArguments,
|
|
107
|
+
children: !expandedForAnimation ? /* @__PURE__ */ jsx(
|
|
108
|
+
MenuExpand,
|
|
109
|
+
{
|
|
110
|
+
size: "m",
|
|
111
|
+
color: ["brand-primary", "800"],
|
|
112
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.FOOTER_BTN
|
|
113
|
+
}
|
|
114
|
+
) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
115
|
+
/* @__PURE__ */ jsx(
|
|
116
|
+
StyledFooterLabel,
|
|
117
|
+
{
|
|
118
|
+
mt: "5px",
|
|
119
|
+
mr: "12px",
|
|
120
|
+
mb: "16px",
|
|
121
|
+
labelOverflow,
|
|
122
|
+
"aria-live": "polite",
|
|
123
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.ITEM_LABEL,
|
|
124
|
+
getOwnerProps,
|
|
125
|
+
getOwnerPropsArguments,
|
|
126
|
+
children: label
|
|
127
|
+
}
|
|
128
|
+
),
|
|
129
|
+
!hideFooterPipe ? /* @__PURE__ */ jsx(
|
|
130
|
+
StyledFooterSeparator,
|
|
131
|
+
{
|
|
132
|
+
mt: "xxxs",
|
|
133
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.FOOTER_SEPARATOR
|
|
134
|
+
}
|
|
135
|
+
) : /* @__PURE__ */ jsx("div", {}),
|
|
136
|
+
/* @__PURE__ */ jsx(
|
|
137
|
+
StyledMenuCollapse,
|
|
138
|
+
{
|
|
139
|
+
innerRef: postAnimationButtonFocusHandler,
|
|
140
|
+
buttonType: "raw",
|
|
141
|
+
onClick: handleMenuCollapseClick,
|
|
142
|
+
tabIndex: 0,
|
|
143
|
+
onFocus: (e) => {
|
|
144
|
+
e.stopPropagation();
|
|
145
|
+
setFocusedItem(FOOTER_MENU_CLOSE_DS_ID);
|
|
146
|
+
},
|
|
147
|
+
role: "button",
|
|
148
|
+
"aria-label": "Collapse left navigation",
|
|
149
|
+
"data-testid": LEFT_NAVIGATION_DATA_TESTID.FOOTER_BTN,
|
|
150
|
+
getOwnerProps,
|
|
151
|
+
getOwnerPropsArguments,
|
|
152
|
+
children: /* @__PURE__ */ jsx(MenuCollapse, { size: "m", color: ["brand-primary", "800"] })
|
|
153
|
+
}
|
|
154
|
+
)
|
|
155
|
+
] })
|
|
156
|
+
}
|
|
157
|
+
)
|
|
158
|
+
},
|
|
159
|
+
id
|
|
160
|
+
);
|
|
115
161
|
};
|
|
116
162
|
var LeftNavFooterItem_default = LeftNavFooterItem;
|
|
117
163
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/LeftNavFooterItem/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react-hooks/rules-of-hooks */\n/* eslint-disable max-lines */\nimport
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|