@elliemae/ds-left-navigation 3.11.0-next.6 → 3.11.0-rc.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 +0 -1
- package/dist/cjs/constants/constants.js.map +2 -2
- package/dist/cjs/exported-related/ItemRenderer/styled.js +3 -2
- package/dist/cjs/exported-related/ItemRenderer/styled.js.map +2 -2
- package/dist/cjs/parts/LeftNavContent/index.js +5 -7
- package/dist/cjs/parts/LeftNavContent/index.js.map +2 -2
- package/dist/cjs/parts/LeftNavContent/styled.js +1 -12
- package/dist/cjs/parts/LeftNavContent/styled.js.map +2 -2
- package/dist/esm/constants/constants.js +0 -1
- package/dist/esm/constants/constants.js.map +2 -2
- package/dist/esm/exported-related/ItemRenderer/styled.js +3 -2
- package/dist/esm/exported-related/ItemRenderer/styled.js.map +2 -2
- package/dist/esm/parts/LeftNavContent/index.js +6 -9
- package/dist/esm/parts/LeftNavContent/index.js.map +2 -2
- package/dist/esm/parts/LeftNavContent/styled.js +1 -12
- package/dist/esm/parts/LeftNavContent/styled.js.map +2 -2
- package/package.json +8 -8
|
@@ -39,7 +39,6 @@ const DSLeftNavigationSlots = {
|
|
|
39
39
|
HEADER_AREA: "header-area",
|
|
40
40
|
BODY_HEADER_AREA: "body-header-area",
|
|
41
41
|
BODY_ITEMS_AREA: "body-items-area",
|
|
42
|
-
CONTENT_WITH_SCROLLBAR: "content-with-scrollbar",
|
|
43
42
|
FOOTER_MENU: "footer-menu",
|
|
44
43
|
FOOTER_ITEM: "footer-item",
|
|
45
44
|
FOOTER_LABEL: "footer-label",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/constants/constants.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const DSLeftNavigationName = 'DSLeftNavigation';\n\nexport const DSLeftNavigationSlots = {\n ROOT: 'root',\n\n AREAS_CONTAINER: 'areas-container',\n BODY_AREAS_CONTAINER: 'body-areas-container',\n FOOTER_AREA: 'footer-area',\n LOADER_WRAPPER: 'loader-wrapper',\n HEADER_AREA: 'header-area',\n BODY_HEADER_AREA: 'body-header-area',\n BODY_ITEMS_AREA: 'body-items-area',\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,uBAAuB;AAE7B,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EAEN,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,
|
|
4
|
+
"sourcesContent": ["export const DSLeftNavigationName = 'DSLeftNavigation';\n\nexport const DSLeftNavigationSlots = {\n ROOT: 'root',\n\n AREAS_CONTAINER: 'areas-container',\n BODY_AREAS_CONTAINER: 'body-areas-container',\n FOOTER_AREA: 'footer-area',\n LOADER_WRAPPER: 'loader-wrapper',\n HEADER_AREA: 'header-area',\n BODY_HEADER_AREA: 'body-header-area',\n BODY_ITEMS_AREA: 'body-items-area',\n\n FOOTER_MENU: 'footer-menu',\n FOOTER_ITEM: 'footer-item',\n FOOTER_LABEL: 'footer-label',\n FOOTER_SEPARATOR: 'footer-separator',\n FOOTER_MENU_COLLAPSE: 'footer-menu-collapse',\n\n NOTIFICATIONS_CONTAINER: 'notifications-container',\n\n ITEM_SEPARATOR: 'item-separator',\n\n SECTION_LABEL: 'section-label',\n SECTION_RIGHT_LABEL: 'section-right-label',\n VERTICAL_SEPARATOR: 'vertical-separator',\n SECTION_CONTAINER: 'section-container',\n\n ITEM_LABEL: 'item-label',\n LEFT_CONTAINER: 'left-container',\n BOTTOM_CONTAINER: 'bottom-container',\n RIGHT_CONTAINER: 'right-container',\n ITEM_DATE: 'item-date',\n ITEM_CHEVRON_BACK: 'item-chevron-back',\n\n ITEM: 'item',\n COLLAPSED_CONTAINER: 'collapsed-container',\n ARROW_CONTAINER: 'arrow-container',\n ITEM_BORDER_BOTTOM: 'item-border-bottom',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,uBAAuB;AAE7B,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EAEN,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EAEjB,aAAa;AAAA,EACb,aAAa;AAAA,EACb,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,sBAAsB;AAAA,EAEtB,yBAAyB;AAAA,EAEzB,gBAAgB;AAAA,EAEhB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EAEnB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,mBAAmB;AAAA,EAEnB,MAAM;AAAA,EACN,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,oBAAoB;AACtB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -91,10 +91,11 @@ const StyledBorderBottom = (0, import_ds_system.styled)("div", {
|
|
|
91
91
|
name: import_constants.DSLeftNavigationName,
|
|
92
92
|
slot: import_constants.DSLeftNavigationSlots.ITEM_BORDER_BOTTOM
|
|
93
93
|
})`
|
|
94
|
-
margin-left: ${({ opened }) => opened ? "
|
|
94
|
+
margin-left: ${({ opened }) => opened ? "12px" : "-4px"};
|
|
95
95
|
margin-right: ${({ borderBottomMr }) => borderBottomMr};
|
|
96
|
+
margin-top: 1px;
|
|
96
97
|
height: 1px;
|
|
97
|
-
width: calc(100% - ${({ borderBottomMr }) => borderBottomMr} - ${({ opened }) => opened ? "
|
|
98
|
+
width: calc(100% - ${({ borderBottomMr }) => borderBottomMr} - ${({ opened }) => opened ? "12px" : "-4px"});
|
|
98
99
|
background-color: #e0e3e8;
|
|
99
100
|
grid-column: span 3;
|
|
100
101
|
align-self: end;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/ItemRenderer/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable indent */\nimport Grid from '@elliemae/ds-grid';\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants';\n\ninterface ItemProps {\n selected: boolean;\n selectable: boolean;\n opened: boolean;\n theme: Theme;\n shadowStyle: (theme: Theme) => string;\n}\n\nexport const borderOutside = (color: string, weight = 2): string => `&:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: ${weight}px solid ${color};\n pointer-events: none;\n}`;\n\nconst getItemBackground = ({ selectable, opened, selected, theme }: ItemProps) => {\n if (!selectable) return 'white';\n if (selected && !opened) return theme.colors.brand[200];\n return theme.colors.neutral['000'];\n};\n\nconst getItemHoverBackground = ({ selectable, opened, selected, theme }: ItemProps) => {\n if (!selectable) return 'white';\n if (selected && !opened) return theme.colors.brand[200];\n return theme.colors.brand['200'];\n};\n\nexport const StyledItem = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM })<\n { minHeight: string } & ItemProps\n>`\n position: relative;\n cursor: ${(props) => (props.selectable && !props.opened ? 'pointer' : 'auto')};\n min-height: ${(props) => props.minHeight};\n\n background: ${getItemBackground};\n\n ${(props) => (props.selected && !props.opened ? borderOutside(props.theme.colors.brand[500], 1) : '')}\n\n :hover {\n background: ${getItemHoverBackground};\n }\n\n :active {\n background: ${({ selectable, theme }) => (selectable ? theme.colors.brand[200] : 'white')};\n }\n\n ${(props) => props.shadowStyle(props.theme)};\n\n outline: none;\n\n :focus {\n ${(props) => borderOutside(props.theme.colors.brand[700])}\n }\n`;\n\nexport const StyledCollapsedContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.COLLAPSED_CONTAINER,\n})``;\n\nexport const StyledBorderBottom = styled('div', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.ITEM_BORDER_BOTTOM,\n})<{ opened: boolean; borderBottomMr?: string }>`\n margin-left: ${({ opened }) => (opened ? '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,qBAAiB;AACjB,uBAAmC;AACnC,uBAA4D;AAUrD,MAAM,gBAAgB,CAAC,OAAe,SAAS,MAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOxD,kBAAkB;AAAA;AAAA;AAI9B,MAAM,oBAAoB,CAAC,EAAE,YAAY,QAAQ,UAAU,MAAM,MAAiB;AAChF,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,YAAY,CAAC;AAAQ,WAAO,MAAM,OAAO,MAAM;AACnD,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAEA,MAAM,yBAAyB,CAAC,EAAE,YAAY,QAAQ,UAAU,MAAM,MAAiB;AACrF,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,YAAY,CAAC;AAAQ,WAAO,MAAM,OAAO,MAAM;AACnD,SAAO,MAAM,OAAO,MAAM;AAC5B;AAEO,MAAM,iBAAa,yBAAO,eAAAA,SAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,KAAK,CAAC;AAAA;AAAA,YAI3F,CAAC,UAAW,MAAM,cAAc,CAAC,MAAM,SAAS,YAAY;AAAA,gBACxD,CAAC,UAAU,MAAM;AAAA;AAAA,gBAEjB;AAAA;AAAA,IAEZ,CAAC,UAAW,MAAM,YAAY,CAAC,MAAM,SAAS,cAAc,MAAM,MAAM,OAAO,MAAM,MAAM,CAAC,IAAI;AAAA;AAAA;AAAA,kBAGlF;AAAA;AAAA;AAAA;AAAA,kBAIA,CAAC,EAAE,YAAY,MAAM,MAAO,aAAa,MAAM,OAAO,MAAM,OAAO;AAAA;AAAA;AAAA,IAGjF,CAAC,UAAU,MAAM,YAAY,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,MAKtC,CAAC,UAAU,cAAc,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA;AAAA;AAIrD,MAAM,+BAA2B,yBAAO,eAAAA,SAAM;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,yBAAqB,yBAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,iBACgB,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,kBAClC,CAAC,EAAE,eAAe,MAAM;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable indent */\nimport Grid from '@elliemae/ds-grid';\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants';\n\ninterface ItemProps {\n selected: boolean;\n selectable: boolean;\n opened: boolean;\n theme: Theme;\n shadowStyle: (theme: Theme) => string;\n}\n\nexport const borderOutside = (color: string, weight = 2): string => `&:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: ${weight}px solid ${color};\n pointer-events: none;\n}`;\n\nconst getItemBackground = ({ selectable, opened, selected, theme }: ItemProps) => {\n if (!selectable) return 'white';\n if (selected && !opened) return theme.colors.brand[200];\n return theme.colors.neutral['000'];\n};\n\nconst getItemHoverBackground = ({ selectable, opened, selected, theme }: ItemProps) => {\n if (!selectable) return 'white';\n if (selected && !opened) return theme.colors.brand[200];\n return theme.colors.brand['200'];\n};\n\nexport const StyledItem = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM })<\n { minHeight: string } & ItemProps\n>`\n position: relative;\n cursor: ${(props) => (props.selectable && !props.opened ? 'pointer' : 'auto')};\n min-height: ${(props) => props.minHeight};\n\n background: ${getItemBackground};\n\n ${(props) => (props.selected && !props.opened ? borderOutside(props.theme.colors.brand[500], 1) : '')}\n\n :hover {\n background: ${getItemHoverBackground};\n }\n\n :active {\n background: ${({ selectable, theme }) => (selectable ? theme.colors.brand[200] : 'white')};\n }\n\n ${(props) => props.shadowStyle(props.theme)};\n\n outline: none;\n\n :focus {\n ${(props) => borderOutside(props.theme.colors.brand[700])}\n }\n`;\n\nexport const StyledCollapsedContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.COLLAPSED_CONTAINER,\n})``;\n\nexport const StyledBorderBottom = styled('div', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.ITEM_BORDER_BOTTOM,\n})<{ opened: boolean; borderBottomMr?: string }>`\n margin-left: ${({ opened }) => (opened ? '12px' : '-4px')};\n margin-right: ${({ borderBottomMr }) => borderBottomMr};\n margin-top: 1px;\n height: 1px;\n width: calc(100% - ${({ borderBottomMr }) => borderBottomMr} - ${({ opened }) => (opened ? '12px' : '-4px')});\n background-color: #e0e3e8;\n grid-column: span 3;\n align-self: end;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,qBAAiB;AACjB,uBAAmC;AACnC,uBAA4D;AAUrD,MAAM,gBAAgB,CAAC,OAAe,SAAS,MAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOxD,kBAAkB;AAAA;AAAA;AAI9B,MAAM,oBAAoB,CAAC,EAAE,YAAY,QAAQ,UAAU,MAAM,MAAiB;AAChF,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,YAAY,CAAC;AAAQ,WAAO,MAAM,OAAO,MAAM;AACnD,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAEA,MAAM,yBAAyB,CAAC,EAAE,YAAY,QAAQ,UAAU,MAAM,MAAiB;AACrF,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,YAAY,CAAC;AAAQ,WAAO,MAAM,OAAO,MAAM;AACnD,SAAO,MAAM,OAAO,MAAM;AAC5B;AAEO,MAAM,iBAAa,yBAAO,eAAAA,SAAM,EAAE,MAAM,uCAAsB,MAAM,uCAAsB,KAAK,CAAC;AAAA;AAAA,YAI3F,CAAC,UAAW,MAAM,cAAc,CAAC,MAAM,SAAS,YAAY;AAAA,gBACxD,CAAC,UAAU,MAAM;AAAA;AAAA,gBAEjB;AAAA;AAAA,IAEZ,CAAC,UAAW,MAAM,YAAY,CAAC,MAAM,SAAS,cAAc,MAAM,MAAM,OAAO,MAAM,MAAM,CAAC,IAAI;AAAA;AAAA;AAAA,kBAGlF;AAAA;AAAA;AAAA;AAAA,kBAIA,CAAC,EAAE,YAAY,MAAM,MAAO,aAAa,MAAM,OAAO,MAAM,OAAO;AAAA;AAAA;AAAA,IAGjF,CAAC,UAAU,MAAM,YAAY,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,MAKtC,CAAC,UAAU,cAAc,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA;AAAA;AAIrD,MAAM,+BAA2B,yBAAO,eAAAA,SAAM;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,yBAAqB,yBAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,iBACgB,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,kBAClC,CAAC,EAAE,eAAe,MAAM;AAAA;AAAA;AAAA,uBAGnB,CAAC,EAAE,eAAe,MAAM,oBAAoB,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": ["Grid"]
|
|
7
7
|
}
|
|
@@ -46,7 +46,7 @@ const LeftNavInnerContent = () => {
|
|
|
46
46
|
children: [
|
|
47
47
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLeftNavHeaderArea, {
|
|
48
48
|
"data-testid": "leftnav-header-area",
|
|
49
|
-
selected: HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId),
|
|
49
|
+
selected: !!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId),
|
|
50
50
|
children: HeaderComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OutOfTheBoxMapItem.OutOfTheBoxMapItem, {
|
|
51
51
|
item: HeaderComponent
|
|
52
52
|
}) : null
|
|
@@ -57,7 +57,7 @@ const LeftNavInnerContent = () => {
|
|
|
57
57
|
children: [
|
|
58
58
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLeftNavBodyHeaderArea, {
|
|
59
59
|
"data-testid": "leftnav-body-header-area",
|
|
60
|
-
selected: BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId),
|
|
60
|
+
selected: !!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId),
|
|
61
61
|
children: BodyHeaderComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OutOfTheBoxMapItem.OutOfTheBoxMapItem, {
|
|
62
62
|
item: BodyHeaderComponent
|
|
63
63
|
}) : null
|
|
@@ -66,11 +66,9 @@ const LeftNavInnerContent = () => {
|
|
|
66
66
|
selected: !withoutBodyShadow && openedItem !== null,
|
|
67
67
|
"data-testid": "leftnav-body-items-area",
|
|
68
68
|
tabIndex: -1,
|
|
69
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}, item.dsId))
|
|
73
|
-
})
|
|
69
|
+
children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OutOfTheBoxMapItem.OutOfTheBoxMapItem, {
|
|
70
|
+
item
|
|
71
|
+
}, item.dsId))
|
|
74
72
|
})
|
|
75
73
|
]
|
|
76
74
|
})
|
|
@@ -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 React from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-utilities';\nimport { LeftNavContext } from '../../LeftNavigationContext';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem';\nimport {\n StyledLeftNavExpandAnimationWrapper,\n StyledLeftNavAreasContainer,\n StyledLeftNavHeaderArea,\n StyledLeftNavBodyAreasContainer,\n StyledLeftNavBodyHeaderArea,\n StyledLeftNavBodyItemsArea,\n StyledLeftNavContentWithScrollbar,\n} from './styled';\nimport { LeftNavLoading } from '../LeftNavLoading';\n\nconst leftNavScreenReaderInstructions =\n 'Left Navigation. You can navigate through the items using the Up/Down arrows. ' +\n 'To expand or select an item, use the Enter/Return or Space keys. ' +\n 'Expandable items can also be opened/closed with the Right/Left arrows. ' +\n 'The Home and End keys will take you to the first and last item respectively.';\n\nconst LeftNavInnerContent = () => {\n const {\n leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow },\n selectedItem,\n } = React.useContext(LeftNavContext);\n return (\n <>\n <StyledLeftNavHeaderArea\n data-testid=\"leftnav-header-area\"\n selected={HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId as string)}\n >\n {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}\n </StyledLeftNavHeaderArea>\n <StyledLeftNavBodyAreasContainer cols={['1fr']} rows={['auto', '1fr']}>\n <StyledLeftNavBodyHeaderArea\n data-testid=\"leftnav-body-header-area\"\n selected={BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId as string)}\n >\n {BodyHeaderComponent ? <OutOfTheBoxMapItem item={BodyHeaderComponent} /> : null}\n </StyledLeftNavBodyHeaderArea>\n <StyledLeftNavBodyItemsArea\n selected={!withoutBodyShadow && openedItem !== null}\n data-testid=\"leftnav-body-items-area\"\n tabIndex={-1}\n >\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkB;AAClB,0BAAuC;AACvC,mCAA+B;AAC/B,+BAAkC;AAClC,gCAAmC;AACnC,oBAQO;AACP,4BAA+B;AAE/B,MAAM,kCACJ;AAKF,MAAM,sBAAsB,MAAM;AAChC,QAAM;AAAA,IACJ,cAAc,EAAE,iBAAiB,qBAAqB,YAAY,OAAO,kBAAkB;AAAA,IAC3F;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,2CAAc;AACnC,SACE;AAAA,IACE;AAAA,kDAAC;AAAA,QACC,eAAY;AAAA,QACZ,UAAU,mBAAmB,CAAC,cAAc,UAAU,EAAE,SAAS,gBAAgB,IAAc;AAAA,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-utilities';\nimport { LeftNavContext } from '../../LeftNavigationContext';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem';\nimport {\n StyledLeftNavExpandAnimationWrapper,\n StyledLeftNavAreasContainer,\n StyledLeftNavHeaderArea,\n StyledLeftNavBodyAreasContainer,\n StyledLeftNavBodyHeaderArea,\n StyledLeftNavBodyItemsArea,\n StyledLeftNavContentWithScrollbar,\n} from './styled';\nimport { LeftNavLoading } from '../LeftNavLoading';\n\nconst leftNavScreenReaderInstructions =\n 'Left Navigation. You can navigate through the items using the Up/Down arrows. ' +\n 'To expand or select an item, use the Enter/Return or Space keys. ' +\n 'Expandable items can also be opened/closed with the Right/Left arrows. ' +\n 'The Home and End keys will take you to the first and last item respectively.';\n\nconst LeftNavInnerContent = () => {\n const {\n leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow },\n selectedItem,\n } = React.useContext(LeftNavContext);\n return (\n <>\n <StyledLeftNavHeaderArea\n data-testid=\"leftnav-header-area\"\n selected={!!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId as string)}\n >\n {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}\n </StyledLeftNavHeaderArea>\n <StyledLeftNavBodyAreasContainer cols={['1fr']} rows={['auto', '1fr']}>\n <StyledLeftNavBodyHeaderArea\n data-testid=\"leftnav-body-header-area\"\n selected={!!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId as string)}\n >\n {BodyHeaderComponent ? <OutOfTheBoxMapItem item={BodyHeaderComponent} /> : null}\n </StyledLeftNavBodyHeaderArea>\n <StyledLeftNavBodyItemsArea\n selected={!withoutBodyShadow && openedItem !== null}\n data-testid=\"leftnav-body-items-area\"\n tabIndex={-1}\n >\n {items.map((item) => (\n <OutOfTheBoxMapItem item={item} key={item.dsId} />\n ))}\n </StyledLeftNavBodyItemsArea>\n </StyledLeftNavBodyAreasContainer>\n </>\n );\n};\n\nconst LeftNavContent: React.ComponentType = () => {\n const {\n expandedForAnimation,\n leftNavProps: { expanded, expandedWidth, footerLabel, onFooterExpand, onFooterClose, loading },\n leftNavProps,\n } = React.useContext(LeftNavContext);\n\n const globalProps = useGetGlobalAttributes(leftNavProps);\n\n return (\n <StyledLeftNavExpandAnimationWrapper\n expandedWidth={expandedWidth}\n expanded={expanded}\n data-testid=\"leftnav-component\"\n aria-label={leftNavScreenReaderInstructions}\n role=\"menu\"\n {...globalProps}\n >\n <StyledLeftNavAreasContainer\n expandedWidth={expandedWidth}\n expanded={expandedForAnimation}\n rows={['auto', '1fr', 'auto']}\n cols={['1fr']}\n >\n {loading && <LeftNavLoading expanded={expandedForAnimation} />}\n {!loading && <LeftNavInnerContent />}\n <LeftNavFooterItem footerLabel={footerLabel} onFooterExpand={onFooterExpand} onFooterClose={onFooterClose} />\n </StyledLeftNavAreasContainer>\n </StyledLeftNavExpandAnimationWrapper>\n );\n};\n\nexport default LeftNavContent;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkB;AAClB,0BAAuC;AACvC,mCAA+B;AAC/B,+BAAkC;AAClC,gCAAmC;AACnC,oBAQO;AACP,4BAA+B;AAE/B,MAAM,kCACJ;AAKF,MAAM,sBAAsB,MAAM;AAChC,QAAM;AAAA,IACJ,cAAc,EAAE,iBAAiB,qBAAqB,YAAY,OAAO,kBAAkB;AAAA,IAC3F;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,2CAAc;AACnC,SACE;AAAA,IACE;AAAA,kDAAC;AAAA,QACC,eAAY;AAAA,QACZ,UAAU,CAAC,CAAC,mBAAmB,CAAC,cAAc,UAAU,EAAE,SAAS,gBAAgB,IAAc;AAAA,QAEhG,4BAAkB,4CAAC;AAAA,UAAmB,MAAM;AAAA,SAAiB,IAAK;AAAA,OACrE;AAAA,MACA,6CAAC;AAAA,QAAgC,MAAM,CAAC,KAAK;AAAA,QAAG,MAAM,CAAC,QAAQ,KAAK;AAAA,QAClE;AAAA,sDAAC;AAAA,YACC,eAAY;AAAA,YACZ,UAAU,CAAC,CAAC,uBAAuB,CAAC,cAAc,UAAU,EAAE,SAAS,oBAAoB,IAAc;AAAA,YAExG,gCAAsB,4CAAC;AAAA,cAAmB,MAAM;AAAA,aAAqB,IAAK;AAAA,WAC7E;AAAA,UACA,4CAAC;AAAA,YACC,UAAU,CAAC,qBAAqB,eAAe;AAAA,YAC/C,eAAY;AAAA,YACZ,UAAU;AAAA,YAET,gBAAM,IAAI,CAAC,SACV,4CAAC;AAAA,cAAmB;AAAA,eAAiB,KAAK,IAAM,CACjD;AAAA,WACH;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;AAEA,MAAM,iBAAsC,MAAM;AAChD,QAAM;AAAA,IACJ;AAAA,IACA,cAAc,EAAE,UAAU,eAAe,aAAa,gBAAgB,eAAe,QAAQ;AAAA,IAC7F;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,2CAAc;AAEnC,QAAM,kBAAc,4CAAuB,YAAY;AAEvD,SACE,4CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ,cAAY;AAAA,IACZ,MAAK;AAAA,IACJ,GAAG;AAAA,IAEJ,uDAAC;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,MAAM,CAAC,KAAK;AAAA,MAEX;AAAA,mBAAW,4CAAC;AAAA,UAAe,UAAU;AAAA,SAAsB;AAAA,QAC3D,CAAC,WAAW,4CAAC,uBAAoB;AAAA,QAClC,4CAAC;AAAA,UAAkB;AAAA,UAA0B;AAAA,UAAgC;AAAA,SAA8B;AAAA;AAAA,KAC7G;AAAA,GACF;AAEJ;AAEA,IAAO,yBAAQ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -28,7 +28,6 @@ __export(styled_exports, {
|
|
|
28
28
|
StyledLeftNavBodyAreasContainer: () => StyledLeftNavBodyAreasContainer,
|
|
29
29
|
StyledLeftNavBodyHeaderArea: () => StyledLeftNavBodyHeaderArea,
|
|
30
30
|
StyledLeftNavBodyItemsArea: () => StyledLeftNavBodyItemsArea,
|
|
31
|
-
StyledLeftNavContentWithScrollbar: () => StyledLeftNavContentWithScrollbar,
|
|
32
31
|
StyledLeftNavExpandAnimationWrapper: () => StyledLeftNavExpandAnimationWrapper,
|
|
33
32
|
StyledLeftNavHeaderArea: () => StyledLeftNavHeaderArea
|
|
34
33
|
});
|
|
@@ -85,7 +84,6 @@ const StyledLeftNavBodyAreasContainer = (0, import_ds_system.styled)(import_ds_g
|
|
|
85
84
|
slot: import_constants.DSLeftNavigationSlots.BODY_AREAS_CONTAINER
|
|
86
85
|
})`
|
|
87
86
|
width: 100%;
|
|
88
|
-
height: 100%;
|
|
89
87
|
`;
|
|
90
88
|
const StyledLeftNavBodyHeaderArea = (0, import_ds_system.styled)("div", {
|
|
91
89
|
name: import_constants.DSLeftNavigationName,
|
|
@@ -99,16 +97,7 @@ const StyledLeftNavBodyItemsArea = (0, import_ds_system.styled)("div", {
|
|
|
99
97
|
slot: import_constants.DSLeftNavigationSlots.BODY_ITEMS_AREA
|
|
100
98
|
})`
|
|
101
99
|
width: 100%;
|
|
102
|
-
max-height: 100%;
|
|
103
|
-
overflow-y: hidden;
|
|
104
|
-
overflow-x: hidden;
|
|
105
|
-
box-shadow: inset 4px 0 0 0 ${(props) => props.selected ? props.theme.colors.brand[400] : "transparent"};
|
|
106
|
-
`;
|
|
107
|
-
const StyledLeftNavContentWithScrollbar = (0, import_ds_system.styled)("div", {
|
|
108
|
-
name: import_constants.DSLeftNavigationName,
|
|
109
|
-
slot: import_constants.DSLeftNavigationSlots.CONTENT_WITH_SCROLLBAR
|
|
110
|
-
})`
|
|
111
|
-
height: 100%;
|
|
112
100
|
overflow: auto;
|
|
101
|
+
box-shadow: inset 4px 0 0 0 ${(props) => props.selected ? props.theme.colors.brand[400] : "transparent"};
|
|
113
102
|
`;
|
|
114
103
|
//# sourceMappingURL=styled.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/LeftNavContent/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { styled, Theme } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants';\n\ntype LeftNavProps = {\n expanded: boolean;\n expandedWidth: string;\n};\n\nconst getLeftShadowStyles = ({\n selected,\n selectedParent,\n theme,\n}: {\n selected: boolean;\n selectedParent
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { styled, Theme } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants';\n\ntype LeftNavProps = {\n expanded: boolean;\n expandedWidth: string;\n};\n\nconst getLeftShadowStyles = ({\n selected,\n selectedParent,\n theme,\n}: {\n selected: boolean;\n selectedParent?: boolean;\n theme: Theme;\n}) => {\n if (!selected && !selectedParent) {\n return `\n box-shadow: inset 4px 0 0 0 transparent;\n :hover {\n box-shadow: inset 4px 0 0 0 ${theme.colors.brand[300]};\n }\n :active {\n box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};\n }\n `;\n }\n return `box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};`;\n};\n\nexport const StyledLeftNavExpandAnimationWrapper = styled('nav', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.ROOT,\n})<LeftNavProps>`\n width: ${(props) => (props.expanded ? props.expandedWidth : '48px')};\n transition: width ${(props) => (props.expanded ? 'ease-out' : 'ease-in')} 350ms;\n box-shadow: -1px 0 0 0 ${(props) => props.theme.colors.neutral[100]};\n border: 1px solid ${(props) => props.theme.colors.neutral[100]};\n overflow: hidden;\n height: 100%;\n position: relative;\n`;\n\nexport const StyledLeftNavAreasContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.AREAS_CONTAINER,\n})<LeftNavProps>`\n width: ${(props) => (props.expanded ? `calc(${props.expandedWidth} - 2px)` : '46px')};\n height: 100%;\n`;\n\nexport const StyledLeftNavHeaderArea = styled('div', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.HEADER_AREA,\n})<{ selected: boolean; selectedParent?: boolean }>`\n ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyAreasContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.BODY_AREAS_CONTAINER,\n})`\n width: 100%;\n`;\n\nexport const StyledLeftNavBodyHeaderArea = styled('div', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.BODY_HEADER_AREA,\n})<{ selected: boolean; selectedParent?: boolean }>`\n width: 100%;\n ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyItemsArea = styled('div', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.BODY_ITEMS_AREA,\n})<{ selected: boolean }>`\n width: 100%;\n overflow: auto;\n box-shadow: inset 4px 0 0 0 ${(props) => (props.selected ? props.theme.colors.brand[400] : 'transparent')};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AACrB,uBAA8B;AAC9B,uBAA4D;AAO5D,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,MAAI,CAAC,YAAY,CAAC,gBAAgB;AAChC,WAAO;AAAA;AAAA;AAAA,sCAG2B,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,sCAGnB,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,EAGvD;AACA,SAAO,+BAA+B,MAAM,OAAO,MAAM;AAC3D;AAEO,MAAM,0CAAsC,yBAAO,OAAO;AAAA,EAC/D,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,WACU,CAAC,UAAW,MAAM,WAAW,MAAM,gBAAgB;AAAA,sBACxC,CAAC,UAAW,MAAM,WAAW,aAAa;AAAA,2BACrC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,sBAC3C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMrD,MAAM,kCAA8B,yBAAO,qBAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,WACU,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAM,yBAAyB;AAAA;AAAA;AAIxE,MAAM,8BAA0B,yBAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,IACG;AAAA;AAGG,MAAM,sCAAkC,yBAAO,qBAAM;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAIM,MAAM,kCAA8B,yBAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA,IAEG;AAAA;AAGG,MAAM,iCAA6B,yBAAO,OAAO;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,gCAG+B,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,OAAO;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -9,7 +9,6 @@ const DSLeftNavigationSlots = {
|
|
|
9
9
|
HEADER_AREA: "header-area",
|
|
10
10
|
BODY_HEADER_AREA: "body-header-area",
|
|
11
11
|
BODY_ITEMS_AREA: "body-items-area",
|
|
12
|
-
CONTENT_WITH_SCROLLBAR: "content-with-scrollbar",
|
|
13
12
|
FOOTER_MENU: "footer-menu",
|
|
14
13
|
FOOTER_ITEM: "footer-item",
|
|
15
14
|
FOOTER_LABEL: "footer-label",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/constants.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSLeftNavigationName = 'DSLeftNavigation';\n\nexport const DSLeftNavigationSlots = {\n ROOT: 'root',\n\n AREAS_CONTAINER: 'areas-container',\n BODY_AREAS_CONTAINER: 'body-areas-container',\n FOOTER_AREA: 'footer-area',\n LOADER_WRAPPER: 'loader-wrapper',\n HEADER_AREA: 'header-area',\n BODY_HEADER_AREA: 'body-header-area',\n BODY_ITEMS_AREA: 'body-items-area',\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,uBAAuB;AAE7B,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EAEN,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSLeftNavigationName = 'DSLeftNavigation';\n\nexport const DSLeftNavigationSlots = {\n ROOT: 'root',\n\n AREAS_CONTAINER: 'areas-container',\n BODY_AREAS_CONTAINER: 'body-areas-container',\n FOOTER_AREA: 'footer-area',\n LOADER_WRAPPER: 'loader-wrapper',\n HEADER_AREA: 'header-area',\n BODY_HEADER_AREA: 'body-header-area',\n BODY_ITEMS_AREA: 'body-items-area',\n\n FOOTER_MENU: 'footer-menu',\n FOOTER_ITEM: 'footer-item',\n FOOTER_LABEL: 'footer-label',\n FOOTER_SEPARATOR: 'footer-separator',\n FOOTER_MENU_COLLAPSE: 'footer-menu-collapse',\n\n NOTIFICATIONS_CONTAINER: 'notifications-container',\n\n ITEM_SEPARATOR: 'item-separator',\n\n SECTION_LABEL: 'section-label',\n SECTION_RIGHT_LABEL: 'section-right-label',\n VERTICAL_SEPARATOR: 'vertical-separator',\n SECTION_CONTAINER: 'section-container',\n\n ITEM_LABEL: 'item-label',\n LEFT_CONTAINER: 'left-container',\n BOTTOM_CONTAINER: 'bottom-container',\n RIGHT_CONTAINER: 'right-container',\n ITEM_DATE: 'item-date',\n ITEM_CHEVRON_BACK: 'item-chevron-back',\n\n ITEM: 'item',\n COLLAPSED_CONTAINER: 'collapsed-container',\n ARROW_CONTAINER: 'arrow-container',\n ITEM_BORDER_BOTTOM: 'item-border-bottom',\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,uBAAuB;AAE7B,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EAEN,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EAEjB,aAAa;AAAA,EACb,aAAa;AAAA,EACb,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,sBAAsB;AAAA,EAEtB,yBAAyB;AAAA,EAEzB,gBAAgB;AAAA,EAEhB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EAEnB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,mBAAmB;AAAA,EAEnB,MAAM;AAAA,EACN,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,oBAAoB;AACtB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -59,10 +59,11 @@ const StyledBorderBottom = styled("div", {
|
|
|
59
59
|
name: DSLeftNavigationName,
|
|
60
60
|
slot: DSLeftNavigationSlots.ITEM_BORDER_BOTTOM
|
|
61
61
|
})`
|
|
62
|
-
margin-left: ${({ opened }) => opened ? "
|
|
62
|
+
margin-left: ${({ opened }) => opened ? "12px" : "-4px"};
|
|
63
63
|
margin-right: ${({ borderBottomMr }) => borderBottomMr};
|
|
64
|
+
margin-top: 1px;
|
|
64
65
|
height: 1px;
|
|
65
|
-
width: calc(100% - ${({ borderBottomMr }) => borderBottomMr} - ${({ opened }) => opened ? "
|
|
66
|
+
width: calc(100% - ${({ borderBottomMr }) => borderBottomMr} - ${({ opened }) => opened ? "12px" : "-4px"});
|
|
66
67
|
background-color: #e0e3e8;
|
|
67
68
|
grid-column: span 3;
|
|
68
69
|
align-self: end;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/ItemRenderer/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport Grid from '@elliemae/ds-grid';\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants';\n\ninterface ItemProps {\n selected: boolean;\n selectable: boolean;\n opened: boolean;\n theme: Theme;\n shadowStyle: (theme: Theme) => string;\n}\n\nexport const borderOutside = (color: string, weight = 2): string => `&:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: ${weight}px solid ${color};\n pointer-events: none;\n}`;\n\nconst getItemBackground = ({ selectable, opened, selected, theme }: ItemProps) => {\n if (!selectable) return 'white';\n if (selected && !opened) return theme.colors.brand[200];\n return theme.colors.neutral['000'];\n};\n\nconst getItemHoverBackground = ({ selectable, opened, selected, theme }: ItemProps) => {\n if (!selectable) return 'white';\n if (selected && !opened) return theme.colors.brand[200];\n return theme.colors.brand['200'];\n};\n\nexport const StyledItem = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM })<\n { minHeight: string } & ItemProps\n>`\n position: relative;\n cursor: ${(props) => (props.selectable && !props.opened ? 'pointer' : 'auto')};\n min-height: ${(props) => props.minHeight};\n\n background: ${getItemBackground};\n\n ${(props) => (props.selected && !props.opened ? borderOutside(props.theme.colors.brand[500], 1) : '')}\n\n :hover {\n background: ${getItemHoverBackground};\n }\n\n :active {\n background: ${({ selectable, theme }) => (selectable ? theme.colors.brand[200] : 'white')};\n }\n\n ${(props) => props.shadowStyle(props.theme)};\n\n outline: none;\n\n :focus {\n ${(props) => borderOutside(props.theme.colors.brand[700])}\n }\n`;\n\nexport const StyledCollapsedContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.COLLAPSED_CONTAINER,\n})``;\n\nexport const StyledBorderBottom = styled('div', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.ITEM_BORDER_BOTTOM,\n})<{ opened: boolean; borderBottomMr?: string }>`\n margin-left: ${({ opened }) => (opened ? '
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,OAAO,UAAU;AACjB,SAAS,cAA0B;AACnC,SAAS,sBAAsB,6BAA6B;AAUrD,MAAM,gBAAgB,CAAC,OAAe,SAAS,MAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOxD,kBAAkB;AAAA;AAAA;AAI9B,MAAM,oBAAoB,CAAC,EAAE,YAAY,QAAQ,UAAU,MAAM,MAAiB;AAChF,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,YAAY,CAAC;AAAQ,WAAO,MAAM,OAAO,MAAM;AACnD,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAEA,MAAM,yBAAyB,CAAC,EAAE,YAAY,QAAQ,UAAU,MAAM,MAAiB;AACrF,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,YAAY,CAAC;AAAQ,WAAO,MAAM,OAAO,MAAM;AACnD,SAAO,MAAM,OAAO,MAAM;AAC5B;AAEO,MAAM,aAAa,OAAO,MAAM,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,KAAK,CAAC;AAAA;AAAA,YAI3F,CAAC,UAAW,MAAM,cAAc,CAAC,MAAM,SAAS,YAAY;AAAA,gBACxD,CAAC,UAAU,MAAM;AAAA;AAAA,gBAEjB;AAAA;AAAA,IAEZ,CAAC,UAAW,MAAM,YAAY,CAAC,MAAM,SAAS,cAAc,MAAM,MAAM,OAAO,MAAM,MAAM,CAAC,IAAI;AAAA;AAAA;AAAA,kBAGlF;AAAA;AAAA;AAAA;AAAA,kBAIA,CAAC,EAAE,YAAY,MAAM,MAAO,aAAa,MAAM,OAAO,MAAM,OAAO;AAAA;AAAA;AAAA,IAGjF,CAAC,UAAU,MAAM,YAAY,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,MAKtC,CAAC,UAAU,cAAc,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA;AAAA;AAIrD,MAAM,2BAA2B,OAAO,MAAM;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,qBAAqB,OAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,iBACgB,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,kBAClC,CAAC,EAAE,eAAe,MAAM;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport Grid from '@elliemae/ds-grid';\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants';\n\ninterface ItemProps {\n selected: boolean;\n selectable: boolean;\n opened: boolean;\n theme: Theme;\n shadowStyle: (theme: Theme) => string;\n}\n\nexport const borderOutside = (color: string, weight = 2): string => `&:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: ${weight}px solid ${color};\n pointer-events: none;\n}`;\n\nconst getItemBackground = ({ selectable, opened, selected, theme }: ItemProps) => {\n if (!selectable) return 'white';\n if (selected && !opened) return theme.colors.brand[200];\n return theme.colors.neutral['000'];\n};\n\nconst getItemHoverBackground = ({ selectable, opened, selected, theme }: ItemProps) => {\n if (!selectable) return 'white';\n if (selected && !opened) return theme.colors.brand[200];\n return theme.colors.brand['200'];\n};\n\nexport const StyledItem = styled(Grid, { name: DSLeftNavigationName, slot: DSLeftNavigationSlots.ITEM })<\n { minHeight: string } & ItemProps\n>`\n position: relative;\n cursor: ${(props) => (props.selectable && !props.opened ? 'pointer' : 'auto')};\n min-height: ${(props) => props.minHeight};\n\n background: ${getItemBackground};\n\n ${(props) => (props.selected && !props.opened ? borderOutside(props.theme.colors.brand[500], 1) : '')}\n\n :hover {\n background: ${getItemHoverBackground};\n }\n\n :active {\n background: ${({ selectable, theme }) => (selectable ? theme.colors.brand[200] : 'white')};\n }\n\n ${(props) => props.shadowStyle(props.theme)};\n\n outline: none;\n\n :focus {\n ${(props) => borderOutside(props.theme.colors.brand[700])}\n }\n`;\n\nexport const StyledCollapsedContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.COLLAPSED_CONTAINER,\n})``;\n\nexport const StyledBorderBottom = styled('div', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.ITEM_BORDER_BOTTOM,\n})<{ opened: boolean; borderBottomMr?: string }>`\n margin-left: ${({ opened }) => (opened ? '12px' : '-4px')};\n margin-right: ${({ borderBottomMr }) => borderBottomMr};\n margin-top: 1px;\n height: 1px;\n width: calc(100% - ${({ borderBottomMr }) => borderBottomMr} - ${({ opened }) => (opened ? '12px' : '-4px')});\n background-color: #e0e3e8;\n grid-column: span 3;\n align-self: end;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,OAAO,UAAU;AACjB,SAAS,cAA0B;AACnC,SAAS,sBAAsB,6BAA6B;AAUrD,MAAM,gBAAgB,CAAC,OAAe,SAAS,MAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOxD,kBAAkB;AAAA;AAAA;AAI9B,MAAM,oBAAoB,CAAC,EAAE,YAAY,QAAQ,UAAU,MAAM,MAAiB;AAChF,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,YAAY,CAAC;AAAQ,WAAO,MAAM,OAAO,MAAM;AACnD,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAEA,MAAM,yBAAyB,CAAC,EAAE,YAAY,QAAQ,UAAU,MAAM,MAAiB;AACrF,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,YAAY,CAAC;AAAQ,WAAO,MAAM,OAAO,MAAM;AACnD,SAAO,MAAM,OAAO,MAAM;AAC5B;AAEO,MAAM,aAAa,OAAO,MAAM,EAAE,MAAM,sBAAsB,MAAM,sBAAsB,KAAK,CAAC;AAAA;AAAA,YAI3F,CAAC,UAAW,MAAM,cAAc,CAAC,MAAM,SAAS,YAAY;AAAA,gBACxD,CAAC,UAAU,MAAM;AAAA;AAAA,gBAEjB;AAAA;AAAA,IAEZ,CAAC,UAAW,MAAM,YAAY,CAAC,MAAM,SAAS,cAAc,MAAM,MAAM,OAAO,MAAM,MAAM,CAAC,IAAI;AAAA;AAAA;AAAA,kBAGlF;AAAA;AAAA;AAAA;AAAA,kBAIA,CAAC,EAAE,YAAY,MAAM,MAAO,aAAa,MAAM,OAAO,MAAM,OAAO;AAAA;AAAA;AAAA,IAGjF,CAAC,UAAU,MAAM,YAAY,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,MAKtC,CAAC,UAAU,cAAc,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA;AAAA;AAIrD,MAAM,2BAA2B,OAAO,MAAM;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,qBAAqB,OAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,iBACgB,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,kBAClC,CAAC,EAAE,eAAe,MAAM;AAAA;AAAA;AAAA,uBAGnB,CAAC,EAAE,eAAe,MAAM,oBAAoB,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -11,8 +11,7 @@ import {
|
|
|
11
11
|
StyledLeftNavHeaderArea,
|
|
12
12
|
StyledLeftNavBodyAreasContainer,
|
|
13
13
|
StyledLeftNavBodyHeaderArea,
|
|
14
|
-
StyledLeftNavBodyItemsArea
|
|
15
|
-
StyledLeftNavContentWithScrollbar
|
|
14
|
+
StyledLeftNavBodyItemsArea
|
|
16
15
|
} from "./styled";
|
|
17
16
|
import { LeftNavLoading } from "../LeftNavLoading";
|
|
18
17
|
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.";
|
|
@@ -25,7 +24,7 @@ const LeftNavInnerContent = () => {
|
|
|
25
24
|
children: [
|
|
26
25
|
/* @__PURE__ */ jsx(StyledLeftNavHeaderArea, {
|
|
27
26
|
"data-testid": "leftnav-header-area",
|
|
28
|
-
selected: HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId),
|
|
27
|
+
selected: !!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId),
|
|
29
28
|
children: HeaderComponent ? /* @__PURE__ */ jsx(OutOfTheBoxMapItem, {
|
|
30
29
|
item: HeaderComponent
|
|
31
30
|
}) : null
|
|
@@ -36,7 +35,7 @@ const LeftNavInnerContent = () => {
|
|
|
36
35
|
children: [
|
|
37
36
|
/* @__PURE__ */ jsx(StyledLeftNavBodyHeaderArea, {
|
|
38
37
|
"data-testid": "leftnav-body-header-area",
|
|
39
|
-
selected: BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId),
|
|
38
|
+
selected: !!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId),
|
|
40
39
|
children: BodyHeaderComponent ? /* @__PURE__ */ jsx(OutOfTheBoxMapItem, {
|
|
41
40
|
item: BodyHeaderComponent
|
|
42
41
|
}) : null
|
|
@@ -45,11 +44,9 @@ const LeftNavInnerContent = () => {
|
|
|
45
44
|
selected: !withoutBodyShadow && openedItem !== null,
|
|
46
45
|
"data-testid": "leftnav-body-items-area",
|
|
47
46
|
tabIndex: -1,
|
|
48
|
-
children: /* @__PURE__ */ jsx(
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}, item.dsId))
|
|
52
|
-
})
|
|
47
|
+
children: items.map((item) => /* @__PURE__ */ jsx(OutOfTheBoxMapItem, {
|
|
48
|
+
item
|
|
49
|
+
}, item.dsId))
|
|
53
50
|
})
|
|
54
51
|
]
|
|
55
52
|
})
|
|
@@ -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 React from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-utilities';\nimport { LeftNavContext } from '../../LeftNavigationContext';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem';\nimport {\n StyledLeftNavExpandAnimationWrapper,\n StyledLeftNavAreasContainer,\n StyledLeftNavHeaderArea,\n StyledLeftNavBodyAreasContainer,\n StyledLeftNavBodyHeaderArea,\n StyledLeftNavBodyItemsArea,\n StyledLeftNavContentWithScrollbar,\n} from './styled';\nimport { LeftNavLoading } from '../LeftNavLoading';\n\nconst leftNavScreenReaderInstructions =\n 'Left Navigation. You can navigate through the items using the Up/Down arrows. ' +\n 'To expand or select an item, use the Enter/Return or Space keys. ' +\n 'Expandable items can also be opened/closed with the Right/Left arrows. ' +\n 'The Home and End keys will take you to the first and last item respectively.';\n\nconst LeftNavInnerContent = () => {\n const {\n leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow },\n selectedItem,\n } = React.useContext(LeftNavContext);\n return (\n <>\n <StyledLeftNavHeaderArea\n data-testid=\"leftnav-header-area\"\n selected={HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId as string)}\n >\n {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}\n </StyledLeftNavHeaderArea>\n <StyledLeftNavBodyAreasContainer cols={['1fr']} rows={['auto', '1fr']}>\n <StyledLeftNavBodyHeaderArea\n data-testid=\"leftnav-body-header-area\"\n selected={BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId as string)}\n >\n {BodyHeaderComponent ? <OutOfTheBoxMapItem item={BodyHeaderComponent} /> : null}\n </StyledLeftNavBodyHeaderArea>\n <StyledLeftNavBodyItemsArea\n selected={!withoutBodyShadow && openedItem !== null}\n data-testid=\"leftnav-body-items-area\"\n tabIndex={-1}\n >\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,YAAW;AAClB,SAAS,8BAA8B;AACvC,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-utilities';\nimport { LeftNavContext } from '../../LeftNavigationContext';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem';\nimport {\n StyledLeftNavExpandAnimationWrapper,\n StyledLeftNavAreasContainer,\n StyledLeftNavHeaderArea,\n StyledLeftNavBodyAreasContainer,\n StyledLeftNavBodyHeaderArea,\n StyledLeftNavBodyItemsArea,\n StyledLeftNavContentWithScrollbar,\n} from './styled';\nimport { LeftNavLoading } from '../LeftNavLoading';\n\nconst leftNavScreenReaderInstructions =\n 'Left Navigation. You can navigate through the items using the Up/Down arrows. ' +\n 'To expand or select an item, use the Enter/Return or Space keys. ' +\n 'Expandable items can also be opened/closed with the Right/Left arrows. ' +\n 'The Home and End keys will take you to the first and last item respectively.';\n\nconst LeftNavInnerContent = () => {\n const {\n leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow },\n selectedItem,\n } = React.useContext(LeftNavContext);\n return (\n <>\n <StyledLeftNavHeaderArea\n data-testid=\"leftnav-header-area\"\n selected={!!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId as string)}\n >\n {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}\n </StyledLeftNavHeaderArea>\n <StyledLeftNavBodyAreasContainer cols={['1fr']} rows={['auto', '1fr']}>\n <StyledLeftNavBodyHeaderArea\n data-testid=\"leftnav-body-header-area\"\n selected={!!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId as string)}\n >\n {BodyHeaderComponent ? <OutOfTheBoxMapItem item={BodyHeaderComponent} /> : null}\n </StyledLeftNavBodyHeaderArea>\n <StyledLeftNavBodyItemsArea\n selected={!withoutBodyShadow && openedItem !== null}\n data-testid=\"leftnav-body-items-area\"\n tabIndex={-1}\n >\n {items.map((item) => (\n <OutOfTheBoxMapItem item={item} key={item.dsId} />\n ))}\n </StyledLeftNavBodyItemsArea>\n </StyledLeftNavBodyAreasContainer>\n </>\n );\n};\n\nconst LeftNavContent: React.ComponentType = () => {\n const {\n expandedForAnimation,\n leftNavProps: { expanded, expandedWidth, footerLabel, onFooterExpand, onFooterClose, loading },\n leftNavProps,\n } = React.useContext(LeftNavContext);\n\n const globalProps = useGetGlobalAttributes(leftNavProps);\n\n return (\n <StyledLeftNavExpandAnimationWrapper\n expandedWidth={expandedWidth}\n expanded={expanded}\n data-testid=\"leftnav-component\"\n aria-label={leftNavScreenReaderInstructions}\n role=\"menu\"\n {...globalProps}\n >\n <StyledLeftNavAreasContainer\n expandedWidth={expandedWidth}\n expanded={expandedForAnimation}\n rows={['auto', '1fr', 'auto']}\n cols={['1fr']}\n >\n {loading && <LeftNavLoading expanded={expandedForAnimation} />}\n {!loading && <LeftNavInnerContent />}\n <LeftNavFooterItem footerLabel={footerLabel} onFooterExpand={onFooterExpand} onFooterClose={onFooterClose} />\n </StyledLeftNavAreasContainer>\n </StyledLeftNavExpandAnimationWrapper>\n );\n};\n\nexport default LeftNavContent;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,YAAW;AAClB,SAAS,8BAA8B;AACvC,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,sBAAsB;AAE/B,MAAM,kCACJ;AAKF,MAAM,sBAAsB,MAAM;AAChC,QAAM;AAAA,IACJ,cAAc,EAAE,iBAAiB,qBAAqB,YAAY,OAAO,kBAAkB;AAAA,IAC3F;AAAA,EACF,IAAIA,OAAM,WAAW,cAAc;AACnC,SACE;AAAA,IACE;AAAA,0BAAC;AAAA,QACC,eAAY;AAAA,QACZ,UAAU,CAAC,CAAC,mBAAmB,CAAC,cAAc,UAAU,EAAE,SAAS,gBAAgB,IAAc;AAAA,QAEhG,4BAAkB,oBAAC;AAAA,UAAmB,MAAM;AAAA,SAAiB,IAAK;AAAA,OACrE;AAAA,MACA,qBAAC;AAAA,QAAgC,MAAM,CAAC,KAAK;AAAA,QAAG,MAAM,CAAC,QAAQ,KAAK;AAAA,QAClE;AAAA,8BAAC;AAAA,YACC,eAAY;AAAA,YACZ,UAAU,CAAC,CAAC,uBAAuB,CAAC,cAAc,UAAU,EAAE,SAAS,oBAAoB,IAAc;AAAA,YAExG,gCAAsB,oBAAC;AAAA,cAAmB,MAAM;AAAA,aAAqB,IAAK;AAAA,WAC7E;AAAA,UACA,oBAAC;AAAA,YACC,UAAU,CAAC,qBAAqB,eAAe;AAAA,YAC/C,eAAY;AAAA,YACZ,UAAU;AAAA,YAET,gBAAM,IAAI,CAAC,SACV,oBAAC;AAAA,cAAmB;AAAA,eAAiB,KAAK,IAAM,CACjD;AAAA,WACH;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;AAEA,MAAM,iBAAsC,MAAM;AAChD,QAAM;AAAA,IACJ;AAAA,IACA,cAAc,EAAE,UAAU,eAAe,aAAa,gBAAgB,eAAe,QAAQ;AAAA,IAC7F;AAAA,EACF,IAAIA,OAAM,WAAW,cAAc;AAEnC,QAAM,cAAc,uBAAuB,YAAY;AAEvD,SACE,oBAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ,cAAY;AAAA,IACZ,MAAK;AAAA,IACJ,GAAG;AAAA,IAEJ,+BAAC;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,MAAM,CAAC,KAAK;AAAA,MAEX;AAAA,mBAAW,oBAAC;AAAA,UAAe,UAAU;AAAA,SAAsB;AAAA,QAC3D,CAAC,WAAW,oBAAC,uBAAoB;AAAA,QAClC,oBAAC;AAAA,UAAkB;AAAA,UAA0B;AAAA,UAAgC;AAAA,SAA8B;AAAA;AAAA,KAC7G;AAAA,GACF;AAEJ;AAEA,IAAO,yBAAQ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -50,7 +50,6 @@ const StyledLeftNavBodyAreasContainer = styled(Grid, {
|
|
|
50
50
|
slot: DSLeftNavigationSlots.BODY_AREAS_CONTAINER
|
|
51
51
|
})`
|
|
52
52
|
width: 100%;
|
|
53
|
-
height: 100%;
|
|
54
53
|
`;
|
|
55
54
|
const StyledLeftNavBodyHeaderArea = styled("div", {
|
|
56
55
|
name: DSLeftNavigationName,
|
|
@@ -64,24 +63,14 @@ const StyledLeftNavBodyItemsArea = styled("div", {
|
|
|
64
63
|
slot: DSLeftNavigationSlots.BODY_ITEMS_AREA
|
|
65
64
|
})`
|
|
66
65
|
width: 100%;
|
|
67
|
-
max-height: 100%;
|
|
68
|
-
overflow-y: hidden;
|
|
69
|
-
overflow-x: hidden;
|
|
70
|
-
box-shadow: inset 4px 0 0 0 ${(props) => props.selected ? props.theme.colors.brand[400] : "transparent"};
|
|
71
|
-
`;
|
|
72
|
-
const StyledLeftNavContentWithScrollbar = styled("div", {
|
|
73
|
-
name: DSLeftNavigationName,
|
|
74
|
-
slot: DSLeftNavigationSlots.CONTENT_WITH_SCROLLBAR
|
|
75
|
-
})`
|
|
76
|
-
height: 100%;
|
|
77
66
|
overflow: auto;
|
|
67
|
+
box-shadow: inset 4px 0 0 0 ${(props) => props.selected ? props.theme.colors.brand[400] : "transparent"};
|
|
78
68
|
`;
|
|
79
69
|
export {
|
|
80
70
|
StyledLeftNavAreasContainer,
|
|
81
71
|
StyledLeftNavBodyAreasContainer,
|
|
82
72
|
StyledLeftNavBodyHeaderArea,
|
|
83
73
|
StyledLeftNavBodyItemsArea,
|
|
84
|
-
StyledLeftNavContentWithScrollbar,
|
|
85
74
|
StyledLeftNavExpandAnimationWrapper,
|
|
86
75
|
StyledLeftNavHeaderArea
|
|
87
76
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/LeftNavContent/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { styled, Theme } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants';\n\ntype LeftNavProps = {\n expanded: boolean;\n expandedWidth: string;\n};\n\nconst getLeftShadowStyles = ({\n selected,\n selectedParent,\n theme,\n}: {\n selected: boolean;\n selectedParent
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AACrB,SAAS,cAAqB;AAC9B,SAAS,sBAAsB,6BAA6B;AAO5D,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,MAAI,CAAC,YAAY,CAAC,gBAAgB;AAChC,WAAO;AAAA;AAAA;AAAA,sCAG2B,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,sCAGnB,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,EAGvD;AACA,SAAO,+BAA+B,MAAM,OAAO,MAAM;AAC3D;AAEO,MAAM,sCAAsC,OAAO,OAAO;AAAA,EAC/D,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,WACU,CAAC,UAAW,MAAM,WAAW,MAAM,gBAAgB;AAAA,sBACxC,CAAC,UAAW,MAAM,WAAW,aAAa;AAAA,2BACrC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,sBAC3C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMrD,MAAM,8BAA8B,OAAO,MAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,WACU,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAM,yBAAyB;AAAA;AAAA;AAIxE,MAAM,0BAA0B,OAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,IACG;AAAA;AAGG,MAAM,kCAAkC,OAAO,MAAM;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { styled, Theme } from '@elliemae/ds-system';\nimport { DSLeftNavigationName, DSLeftNavigationSlots } from '../../constants';\n\ntype LeftNavProps = {\n expanded: boolean;\n expandedWidth: string;\n};\n\nconst getLeftShadowStyles = ({\n selected,\n selectedParent,\n theme,\n}: {\n selected: boolean;\n selectedParent?: boolean;\n theme: Theme;\n}) => {\n if (!selected && !selectedParent) {\n return `\n box-shadow: inset 4px 0 0 0 transparent;\n :hover {\n box-shadow: inset 4px 0 0 0 ${theme.colors.brand[300]};\n }\n :active {\n box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};\n }\n `;\n }\n return `box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};`;\n};\n\nexport const StyledLeftNavExpandAnimationWrapper = styled('nav', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.ROOT,\n})<LeftNavProps>`\n width: ${(props) => (props.expanded ? props.expandedWidth : '48px')};\n transition: width ${(props) => (props.expanded ? 'ease-out' : 'ease-in')} 350ms;\n box-shadow: -1px 0 0 0 ${(props) => props.theme.colors.neutral[100]};\n border: 1px solid ${(props) => props.theme.colors.neutral[100]};\n overflow: hidden;\n height: 100%;\n position: relative;\n`;\n\nexport const StyledLeftNavAreasContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.AREAS_CONTAINER,\n})<LeftNavProps>`\n width: ${(props) => (props.expanded ? `calc(${props.expandedWidth} - 2px)` : '46px')};\n height: 100%;\n`;\n\nexport const StyledLeftNavHeaderArea = styled('div', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.HEADER_AREA,\n})<{ selected: boolean; selectedParent?: boolean }>`\n ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyAreasContainer = styled(Grid, {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.BODY_AREAS_CONTAINER,\n})`\n width: 100%;\n`;\n\nexport const StyledLeftNavBodyHeaderArea = styled('div', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.BODY_HEADER_AREA,\n})<{ selected: boolean; selectedParent?: boolean }>`\n width: 100%;\n ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyItemsArea = styled('div', {\n name: DSLeftNavigationName,\n slot: DSLeftNavigationSlots.BODY_ITEMS_AREA,\n})<{ selected: boolean }>`\n width: 100%;\n overflow: auto;\n box-shadow: inset 4px 0 0 0 ${(props) => (props.selected ? props.theme.colors.brand[400] : 'transparent')};\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AACrB,SAAS,cAAqB;AAC9B,SAAS,sBAAsB,6BAA6B;AAO5D,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,MAAI,CAAC,YAAY,CAAC,gBAAgB;AAChC,WAAO;AAAA;AAAA;AAAA,sCAG2B,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,sCAGnB,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,EAGvD;AACA,SAAO,+BAA+B,MAAM,OAAO,MAAM;AAC3D;AAEO,MAAM,sCAAsC,OAAO,OAAO;AAAA,EAC/D,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,WACU,CAAC,UAAW,MAAM,WAAW,MAAM,gBAAgB;AAAA,sBACxC,CAAC,UAAW,MAAM,WAAW,aAAa;AAAA,2BACrC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,sBAC3C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMrD,MAAM,8BAA8B,OAAO,MAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,WACU,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAM,yBAAyB;AAAA;AAAA;AAIxE,MAAM,0BAA0B,OAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,IACG;AAAA;AAGG,MAAM,kCAAkC,OAAO,MAAM;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAIM,MAAM,8BAA8B,OAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA,IAEG;AAAA;AAGG,MAAM,6BAA6B,OAAO,OAAO;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA,gCAG+B,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,OAAO;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-left-navigation",
|
|
3
|
-
"version": "3.11.0-
|
|
3
|
+
"version": "3.11.0-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Left Navigation",
|
|
6
6
|
"files": [
|
|
@@ -235,13 +235,13 @@
|
|
|
235
235
|
"typeSafety": false
|
|
236
236
|
},
|
|
237
237
|
"dependencies": {
|
|
238
|
-
"@elliemae/ds-circular-progress-indicator": "3.11.0-
|
|
239
|
-
"@elliemae/ds-grid": "3.11.0-
|
|
240
|
-
"@elliemae/ds-icons": "3.11.0-
|
|
241
|
-
"@elliemae/ds-scrollable-container": "3.11.0-
|
|
242
|
-
"@elliemae/ds-system": "3.11.0-
|
|
243
|
-
"@elliemae/ds-truncated-tooltip-text": "3.11.0-
|
|
244
|
-
"@elliemae/ds-utilities": "3.11.0-
|
|
238
|
+
"@elliemae/ds-circular-progress-indicator": "3.11.0-rc.1",
|
|
239
|
+
"@elliemae/ds-grid": "3.11.0-rc.1",
|
|
240
|
+
"@elliemae/ds-icons": "3.11.0-rc.1",
|
|
241
|
+
"@elliemae/ds-scrollable-container": "3.11.0-rc.1",
|
|
242
|
+
"@elliemae/ds-system": "3.11.0-rc.1",
|
|
243
|
+
"@elliemae/ds-truncated-tooltip-text": "3.11.0-rc.1",
|
|
244
|
+
"@elliemae/ds-utilities": "3.11.0-rc.1"
|
|
245
245
|
},
|
|
246
246
|
"devDependencies": {
|
|
247
247
|
"@testing-library/react": "~12.1.3",
|