@elliemae/ds-left-navigation 3.1.4 → 3.1.5-rc.10
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/parts/LeftNavContent/index.js +1 -2
- package/dist/cjs/parts/LeftNavContent/index.js.map +2 -2
- package/dist/cjs/parts/LeftNavContent/styled.js +15 -0
- package/dist/cjs/parts/LeftNavContent/styled.js.map +2 -2
- package/dist/esm/parts/LeftNavContent/index.js +3 -3
- package/dist/esm/parts/LeftNavContent/index.js.map +2 -2
- package/dist/esm/parts/LeftNavContent/styled.js +20 -1
- package/dist/esm/parts/LeftNavContent/styled.js.map +2 -2
- package/package.json +8 -7
- package/dist/cjs/parts/LeftNavContentWithScrollbar/index.js +0 -108
- package/dist/cjs/parts/LeftNavContentWithScrollbar/index.js.map +0 -7
- package/dist/esm/parts/LeftNavContentWithScrollbar/index.js +0 -88
- package/dist/esm/parts/LeftNavContentWithScrollbar/index.js.map +0 -7
|
@@ -27,7 +27,6 @@ var React = __toESM(require("react"));
|
|
|
27
27
|
var import_react = __toESM(require("react"));
|
|
28
28
|
var import_LeftNavigationContext = require("../../LeftNavigationContext");
|
|
29
29
|
var import_LeftNavFooterItem = require("../LeftNavFooterItem");
|
|
30
|
-
var import_LeftNavContentWithScrollbar = require("../LeftNavContentWithScrollbar");
|
|
31
30
|
var import_OutOfTheBoxMapItem = require("../OutOfTheBoxMapItem");
|
|
32
31
|
var import_styled = require("./styled");
|
|
33
32
|
var import_LeftNavLoading = require("../LeftNavLoading");
|
|
@@ -51,7 +50,7 @@ const LeftNavInnerContent = () => {
|
|
|
51
50
|
selected: !withoutBodyShadow && openedItem !== null,
|
|
52
51
|
"data-testid": "leftnav-body-items-area",
|
|
53
52
|
tabIndex: -1
|
|
54
|
-
}, /* @__PURE__ */ import_react.default.createElement(
|
|
53
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledLeftNavContentWithScrollbar, null, items.map((item) => /* @__PURE__ */ import_react.default.createElement(import_OutOfTheBoxMapItem.OutOfTheBoxMapItem, {
|
|
55
54
|
item,
|
|
56
55
|
key: item.dsId
|
|
57
56
|
}))))));
|
|
@@ -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 { LeftNavContext } from '../../LeftNavigationContext';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,mCAA+B;AAC/B,+BAAkC;AAClC,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\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 StyledLeftNavFooterArea,\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)}\n >\n {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}\n </StyledLeftNavHeaderArea>\n <StyledLeftNavBodyAreasContainer>\n <StyledLeftNavBodyHeaderArea\n data-testid=\"leftnav-body-header-area\"\n selected={BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId)}\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 <StyledLeftNavContentWithScrollbar>\n {items.map((item) => (\n <OutOfTheBoxMapItem item={item} key={item.dsId} />\n ))}\n </StyledLeftNavContentWithScrollbar>\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 } = React.useContext(LeftNavContext);\n\n return (\n <StyledLeftNavExpandAnimationWrapper\n expandedWidth={expandedWidth}\n expanded={expanded}\n data-testid=\"leftnav-component\"\n aria-label={leftNavScreenReaderInstructions}\n >\n <StyledLeftNavAreasContainer expandedWidth={expandedWidth} expanded={expandedForAnimation}>\n {loading && <LeftNavLoading expanded={expandedForAnimation} />}\n {!loading && <LeftNavInnerContent />}\n <StyledLeftNavFooterArea>\n <LeftNavFooterItem footerLabel={footerLabel} onFooterExpand={onFooterExpand} onFooterClose={onFooterClose} />\n </StyledLeftNavFooterArea>\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,mBAAkB;AAClB,mCAA+B;AAC/B,+BAAkC;AAClC,gCAAmC;AACnC,oBASO;AACP,4BAA+B;AAE/B,MAAM,kCACJ;AAKF,MAAM,sBAAsB,MAAM;AAChC,QAAM;AAAA,IACJ,cAAc,EAAE,iBAAiB,qBAAqB,YAAY,OAAO;AAAA,IACzE;AAAA,MACE,qBAAM,WAAW,2CAAc;AACnC,SACE,wFACE,mDAAC;AAAA,IACC,eAAY;AAAA,IACZ,UAAU,mBAAmB,CAAC,cAAc,UAAU,EAAE,SAAS,gBAAgB,IAAI;AAAA,KAEpF,kBAAkB,mDAAC;AAAA,IAAmB,MAAM;AAAA,GAAiB,IAAK,IACrE,GACA,mDAAC,qDACC,mDAAC;AAAA,IACC,eAAY;AAAA,IACZ,UAAU,uBAAuB,CAAC,cAAc,UAAU,EAAE,SAAS,oBAAoB,IAAI;AAAA,KAE5F,sBAAsB,mDAAC;AAAA,IAAmB,MAAM;AAAA,GAAqB,IAAK,IAC7E,GACA,mDAAC;AAAA,IACC,UAAU,CAAC,qBAAqB,eAAe;AAAA,IAC/C,eAAY;AAAA,IACZ,UAAU;AAAA,KAEV,mDAAC,uDACE,MAAM,IAAI,CAAC,SACV,mDAAC;AAAA,IAAmB;AAAA,IAAY,KAAK,KAAK;AAAA,GAAM,CACjD,CACH,CACF,CACF,CACF;AAEJ;AAEA,MAAM,iBAAsC,MAAM;AAChD,QAAM;AAAA,IACJ;AAAA,IACA,cAAc,EAAE,UAAU,eAAe,aAAa,gBAAgB,eAAe;AAAA,MACnF,qBAAM,WAAW,2CAAc;AAEnC,SACE,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ,cAAY;AAAA,KAEZ,mDAAC;AAAA,IAA4B;AAAA,IAA8B,UAAU;AAAA,KAClE,WAAW,mDAAC;AAAA,IAAe,UAAU;AAAA,GAAsB,GAC3D,CAAC,WAAW,mDAAC,yBAAoB,GAClC,mDAAC,6CACC,mDAAC;AAAA,IAAkB;AAAA,IAA0B;AAAA,IAAgC;AAAA,GAA8B,CAC7G,CACF,CACF;AAEJ;AAEA,IAAO,yBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -24,6 +24,7 @@ __export(styled_exports, {
|
|
|
24
24
|
StyledLeftNavBodyAreasContainer: () => StyledLeftNavBodyAreasContainer,
|
|
25
25
|
StyledLeftNavBodyHeaderArea: () => StyledLeftNavBodyHeaderArea,
|
|
26
26
|
StyledLeftNavBodyItemsArea: () => StyledLeftNavBodyItemsArea,
|
|
27
|
+
StyledLeftNavContentWithScrollbar: () => StyledLeftNavContentWithScrollbar,
|
|
27
28
|
StyledLeftNavExpandAnimationWrapper: () => StyledLeftNavExpandAnimationWrapper,
|
|
28
29
|
StyledLeftNavFooterArea: () => StyledLeftNavFooterArea,
|
|
29
30
|
StyledLeftNavHeaderArea: () => StyledLeftNavHeaderArea
|
|
@@ -31,6 +32,7 @@ __export(styled_exports, {
|
|
|
31
32
|
module.exports = __toCommonJS(styled_exports);
|
|
32
33
|
var React = __toESM(require("react"));
|
|
33
34
|
var import_ds_system = require("@elliemae/ds-system");
|
|
35
|
+
var import_ds_scrollable_container = require("@elliemae/ds-scrollable-container");
|
|
34
36
|
const getLeftShadowStyles = ({
|
|
35
37
|
selected,
|
|
36
38
|
selectedParent,
|
|
@@ -103,4 +105,17 @@ const StyledLeftNavFooterArea = import_ds_system.styled.div`
|
|
|
103
105
|
width: 100%;
|
|
104
106
|
grid-area: left-nav-footer;
|
|
105
107
|
`;
|
|
108
|
+
const allSlotsCombined = Object.values(import_ds_scrollable_container.DSScrollableContainerSlots).map((slot) => `.${import_ds_scrollable_container.DSScrollableContainerName}-${slot}`).join(", ");
|
|
109
|
+
const inheritBoxShadowCss = import_ds_system.css`
|
|
110
|
+
box-shadow: inherit;
|
|
111
|
+
`;
|
|
112
|
+
const StyledLeftNavContentWithScrollbar = (0, import_ds_system.styled)(import_ds_scrollable_container.DSScrollableContainer)`
|
|
113
|
+
&,
|
|
114
|
+
.${import_ds_scrollable_container.DSScrollableContainerName}-${import_ds_scrollable_container.DSScrollableContainerSlots.HOST} {
|
|
115
|
+
height: 100%;
|
|
116
|
+
}
|
|
117
|
+
${allSlotsCombined} {
|
|
118
|
+
${inheritBoxShadowCss}
|
|
119
|
+
}
|
|
120
|
+
`;
|
|
106
121
|
//# 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 { styled } from '@elliemae/ds-system';\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: any;\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<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`;\nexport const StyledLeftNavAreasContainer = styled.div<LeftNavProps>`\n position: absolute;\n width: ${(props) => (props.expanded ? `calc(${props.expandedWidth} - 2px)` : '46px')};\n height: 100%;\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: auto 1fr auto;\n grid-template-areas:\n 'left-nav-header'\n 'left-nav-body'\n 'left-nav-footer';\n`;\n\nexport const StyledLeftNavHeaderArea = styled.div<{ selected: boolean }>`\n grid-area: left-nav-header;\n ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyAreasContainer = styled.div`\n position: absolute;\n width: 100%;\n height: 100%;\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: auto 1fr;\n grid-template-areas:\n 'left-nav-body-header'\n 'left-nav-body-body';\n grid-area: left-nav-body;\n`;\n\nexport const StyledLeftNavBodyHeaderArea = styled.div<{ selected: boolean }>`\n width: 100%;\n grid-area: left-nav-body-header;\n ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyItemsArea = styled.div<{ selected: boolean }>`\n width: 100%;\n grid-area: left-nav-body-body;\n max-height: 100%;\n overflow-y: hidden;\n overflow-x: hidden;\n box-shadow: inset 4px 0 0 0 ${(props) => (props.selected ? props.theme.colors.brand[400] : 'transparent')};\n`;\n\nexport const StyledLeftNavFooterArea = styled.div`\n width: 100%;\n grid-area: left-nav-footer;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { css, styled } from '@elliemae/ds-system';\nimport {\n DSScrollableContainer,\n DSScrollableContainerName,\n DSScrollableContainerSlots,\n} from '@elliemae/ds-scrollable-container';\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: any;\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<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`;\nexport const StyledLeftNavAreasContainer = styled.div<LeftNavProps>`\n position: absolute;\n width: ${(props) => (props.expanded ? `calc(${props.expandedWidth} - 2px)` : '46px')};\n height: 100%;\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: auto 1fr auto;\n grid-template-areas:\n 'left-nav-header'\n 'left-nav-body'\n 'left-nav-footer';\n`;\n\nexport const StyledLeftNavHeaderArea = styled.div<{ selected: boolean }>`\n grid-area: left-nav-header;\n ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyAreasContainer = styled.div`\n position: absolute;\n width: 100%;\n height: 100%;\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: auto 1fr;\n grid-template-areas:\n 'left-nav-body-header'\n 'left-nav-body-body';\n grid-area: left-nav-body;\n`;\n\nexport const StyledLeftNavBodyHeaderArea = styled.div<{ selected: boolean }>`\n width: 100%;\n grid-area: left-nav-body-header;\n ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyItemsArea = styled.div<{ selected: boolean }>`\n width: 100%;\n grid-area: left-nav-body-body;\n max-height: 100%;\n overflow-y: hidden;\n overflow-x: hidden;\n box-shadow: inset 4px 0 0 0 ${(props) => (props.selected ? props.theme.colors.brand[400] : 'transparent')};\n`;\n\nexport const StyledLeftNavFooterArea = styled.div`\n width: 100%;\n grid-area: left-nav-footer;\n`;\n\nconst allSlotsCombined = Object.values(DSScrollableContainerSlots)\n .map((slot) => `.${DSScrollableContainerName}-${slot}`)\n .join(', ');\n\nconst inheritBoxShadowCss = css`\n box-shadow: inherit;\n`;\n\nexport const StyledLeftNavContentWithScrollbar = styled(DSScrollableContainer)`\n &,\n .${DSScrollableContainerName}-${DSScrollableContainerSlots.HOST} {\n height: 100%;\n }\n ${allSlotsCombined} {\n ${inheritBoxShadowCss}\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,qCAIO;AAOP,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,MAKI;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,wBAAO;AAAA,WAC/C,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;AAKrD,MAAM,8BAA8B,wBAAO;AAAA;AAAA,WAEvC,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWxE,MAAM,0BAA0B,wBAAO;AAAA;AAAA,IAE1C;AAAA;AAGG,MAAM,kCAAkC,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa/C,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA,IAG9C;AAAA;AAGG,MAAM,6BAA6B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAMjB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,OAAO;AAAA;AAGtF,MAAM,0BAA0B,wBAAO;AAAA;AAAA;AAAA;AAK9C,MAAM,mBAAmB,OAAO,OAAO,yDAA0B,EAC9D,IAAI,CAAC,SAAS,IAAI,4DAA6B,MAAM,EACrD,KAAK,IAAI;AAEZ,MAAM,sBAAsB;AAAA;AAAA;AAIrB,MAAM,oCAAoC,6BAAO,oDAAqB;AAAA;AAAA,KAExE,4DAA6B,0DAA2B;AAAA;AAAA;AAAA,IAGzD;AAAA,MACE;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,7 +2,6 @@ import * as React from "react";
|
|
|
2
2
|
import React2 from "react";
|
|
3
3
|
import { LeftNavContext } from "../../LeftNavigationContext";
|
|
4
4
|
import { LeftNavFooterItem } from "../LeftNavFooterItem";
|
|
5
|
-
import { LeftNavContentWithScrollbar } from "../LeftNavContentWithScrollbar";
|
|
6
5
|
import { OutOfTheBoxMapItem } from "../OutOfTheBoxMapItem";
|
|
7
6
|
import {
|
|
8
7
|
StyledLeftNavExpandAnimationWrapper,
|
|
@@ -11,7 +10,8 @@ import {
|
|
|
11
10
|
StyledLeftNavBodyAreasContainer,
|
|
12
11
|
StyledLeftNavBodyHeaderArea,
|
|
13
12
|
StyledLeftNavBodyItemsArea,
|
|
14
|
-
StyledLeftNavFooterArea
|
|
13
|
+
StyledLeftNavFooterArea,
|
|
14
|
+
StyledLeftNavContentWithScrollbar
|
|
15
15
|
} from "./styled";
|
|
16
16
|
import { LeftNavLoading } from "../LeftNavLoading";
|
|
17
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.";
|
|
@@ -34,7 +34,7 @@ const LeftNavInnerContent = () => {
|
|
|
34
34
|
selected: !withoutBodyShadow && openedItem !== null,
|
|
35
35
|
"data-testid": "leftnav-body-items-area",
|
|
36
36
|
tabIndex: -1
|
|
37
|
-
}, /* @__PURE__ */ React2.createElement(
|
|
37
|
+
}, /* @__PURE__ */ React2.createElement(StyledLeftNavContentWithScrollbar, null, items.map((item) => /* @__PURE__ */ React2.createElement(OutOfTheBoxMapItem, {
|
|
38
38
|
item,
|
|
39
39
|
key: item.dsId
|
|
40
40
|
}))))));
|
|
@@ -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 { LeftNavContext } from '../../LeftNavigationContext';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem';\nimport {
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\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 StyledLeftNavFooterArea,\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)}\n >\n {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}\n </StyledLeftNavHeaderArea>\n <StyledLeftNavBodyAreasContainer>\n <StyledLeftNavBodyHeaderArea\n data-testid=\"leftnav-body-header-area\"\n selected={BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId)}\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 <StyledLeftNavContentWithScrollbar>\n {items.map((item) => (\n <OutOfTheBoxMapItem item={item} key={item.dsId} />\n ))}\n </StyledLeftNavContentWithScrollbar>\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 } = React.useContext(LeftNavContext);\n\n return (\n <StyledLeftNavExpandAnimationWrapper\n expandedWidth={expandedWidth}\n expanded={expanded}\n data-testid=\"leftnav-component\"\n aria-label={leftNavScreenReaderInstructions}\n >\n <StyledLeftNavAreasContainer expandedWidth={expandedWidth} expanded={expandedForAnimation}>\n {loading && <LeftNavLoading expanded={expandedForAnimation} />}\n {!loading && <LeftNavInnerContent />}\n <StyledLeftNavFooterArea>\n <LeftNavFooterItem footerLabel={footerLabel} onFooterExpand={onFooterExpand} onFooterClose={onFooterClose} />\n </StyledLeftNavFooterArea>\n </StyledLeftNavAreasContainer>\n </StyledLeftNavExpandAnimationWrapper>\n );\n};\n\nexport default LeftNavContent;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;AAEA,MAAM,kCACJ;AAKF,MAAM,sBAAsB,MAAM;AAChC,QAAM;AAAA,IACJ,cAAc,EAAE,iBAAiB,qBAAqB,YAAY,OAAO;AAAA,IACzE;AAAA,MACE,OAAM,WAAW,cAAc;AACnC,SACE,4DACE,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,UAAU,mBAAmB,CAAC,cAAc,UAAU,EAAE,SAAS,gBAAgB,IAAI;AAAA,KAEpF,kBAAkB,qCAAC;AAAA,IAAmB,MAAM;AAAA,GAAiB,IAAK,IACrE,GACA,qCAAC,uCACC,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,UAAU,uBAAuB,CAAC,cAAc,UAAU,EAAE,SAAS,oBAAoB,IAAI;AAAA,KAE5F,sBAAsB,qCAAC;AAAA,IAAmB,MAAM;AAAA,GAAqB,IAAK,IAC7E,GACA,qCAAC;AAAA,IACC,UAAU,CAAC,qBAAqB,eAAe;AAAA,IAC/C,eAAY;AAAA,IACZ,UAAU;AAAA,KAEV,qCAAC,yCACE,MAAM,IAAI,CAAC,SACV,qCAAC;AAAA,IAAmB;AAAA,IAAY,KAAK,KAAK;AAAA,GAAM,CACjD,CACH,CACF,CACF,CACF;AAEJ;AAEA,MAAM,iBAAsC,MAAM;AAChD,QAAM;AAAA,IACJ;AAAA,IACA,cAAc,EAAE,UAAU,eAAe,aAAa,gBAAgB,eAAe;AAAA,MACnF,OAAM,WAAW,cAAc;AAEnC,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ,cAAY;AAAA,KAEZ,qCAAC;AAAA,IAA4B;AAAA,IAA8B,UAAU;AAAA,KAClE,WAAW,qCAAC;AAAA,IAAe,UAAU;AAAA,GAAsB,GAC3D,CAAC,WAAW,qCAAC,yBAAoB,GAClC,qCAAC,+BACC,qCAAC;AAAA,IAAkB;AAAA,IAA0B;AAAA,IAAgC;AAAA,GAA8B,CAC7G,CACF,CACF;AAEJ;AAEA,IAAO,yBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { styled } from "@elliemae/ds-system";
|
|
2
|
+
import { css, styled } from "@elliemae/ds-system";
|
|
3
|
+
import {
|
|
4
|
+
DSScrollableContainer,
|
|
5
|
+
DSScrollableContainerName,
|
|
6
|
+
DSScrollableContainerSlots
|
|
7
|
+
} from "@elliemae/ds-scrollable-container";
|
|
3
8
|
const getLeftShadowStyles = ({
|
|
4
9
|
selected,
|
|
5
10
|
selectedParent,
|
|
@@ -72,11 +77,25 @@ const StyledLeftNavFooterArea = styled.div`
|
|
|
72
77
|
width: 100%;
|
|
73
78
|
grid-area: left-nav-footer;
|
|
74
79
|
`;
|
|
80
|
+
const allSlotsCombined = Object.values(DSScrollableContainerSlots).map((slot) => `.${DSScrollableContainerName}-${slot}`).join(", ");
|
|
81
|
+
const inheritBoxShadowCss = css`
|
|
82
|
+
box-shadow: inherit;
|
|
83
|
+
`;
|
|
84
|
+
const StyledLeftNavContentWithScrollbar = styled(DSScrollableContainer)`
|
|
85
|
+
&,
|
|
86
|
+
.${DSScrollableContainerName}-${DSScrollableContainerSlots.HOST} {
|
|
87
|
+
height: 100%;
|
|
88
|
+
}
|
|
89
|
+
${allSlotsCombined} {
|
|
90
|
+
${inheritBoxShadowCss}
|
|
91
|
+
}
|
|
92
|
+
`;
|
|
75
93
|
export {
|
|
76
94
|
StyledLeftNavAreasContainer,
|
|
77
95
|
StyledLeftNavBodyAreasContainer,
|
|
78
96
|
StyledLeftNavBodyHeaderArea,
|
|
79
97
|
StyledLeftNavBodyItemsArea,
|
|
98
|
+
StyledLeftNavContentWithScrollbar,
|
|
80
99
|
StyledLeftNavExpandAnimationWrapper,
|
|
81
100
|
StyledLeftNavFooterArea,
|
|
82
101
|
StyledLeftNavHeaderArea
|
|
@@ -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 { styled } from '@elliemae/ds-system';\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: any;\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<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`;\nexport const StyledLeftNavAreasContainer = styled.div<LeftNavProps>`\n position: absolute;\n width: ${(props) => (props.expanded ? `calc(${props.expandedWidth} - 2px)` : '46px')};\n height: 100%;\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: auto 1fr auto;\n grid-template-areas:\n 'left-nav-header'\n 'left-nav-body'\n 'left-nav-footer';\n`;\n\nexport const StyledLeftNavHeaderArea = styled.div<{ selected: boolean }>`\n grid-area: left-nav-header;\n ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyAreasContainer = styled.div`\n position: absolute;\n width: 100%;\n height: 100%;\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: auto 1fr;\n grid-template-areas:\n 'left-nav-body-header'\n 'left-nav-body-body';\n grid-area: left-nav-body;\n`;\n\nexport const StyledLeftNavBodyHeaderArea = styled.div<{ selected: boolean }>`\n width: 100%;\n grid-area: left-nav-body-header;\n ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyItemsArea = styled.div<{ selected: boolean }>`\n width: 100%;\n grid-area: left-nav-body-body;\n max-height: 100%;\n overflow-y: hidden;\n overflow-x: hidden;\n box-shadow: inset 4px 0 0 0 ${(props) => (props.selected ? props.theme.colors.brand[400] : 'transparent')};\n`;\n\nexport const StyledLeftNavFooterArea = styled.div`\n width: 100%;\n grid-area: left-nav-footer;\n`;\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css, styled } from '@elliemae/ds-system';\nimport {\n DSScrollableContainer,\n DSScrollableContainerName,\n DSScrollableContainerSlots,\n} from '@elliemae/ds-scrollable-container';\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: any;\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<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`;\nexport const StyledLeftNavAreasContainer = styled.div<LeftNavProps>`\n position: absolute;\n width: ${(props) => (props.expanded ? `calc(${props.expandedWidth} - 2px)` : '46px')};\n height: 100%;\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: auto 1fr auto;\n grid-template-areas:\n 'left-nav-header'\n 'left-nav-body'\n 'left-nav-footer';\n`;\n\nexport const StyledLeftNavHeaderArea = styled.div<{ selected: boolean }>`\n grid-area: left-nav-header;\n ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyAreasContainer = styled.div`\n position: absolute;\n width: 100%;\n height: 100%;\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: auto 1fr;\n grid-template-areas:\n 'left-nav-body-header'\n 'left-nav-body-body';\n grid-area: left-nav-body;\n`;\n\nexport const StyledLeftNavBodyHeaderArea = styled.div<{ selected: boolean }>`\n width: 100%;\n grid-area: left-nav-body-header;\n ${getLeftShadowStyles}\n`;\n\nexport const StyledLeftNavBodyItemsArea = styled.div<{ selected: boolean }>`\n width: 100%;\n grid-area: left-nav-body-body;\n max-height: 100%;\n overflow-y: hidden;\n overflow-x: hidden;\n box-shadow: inset 4px 0 0 0 ${(props) => (props.selected ? props.theme.colors.brand[400] : 'transparent')};\n`;\n\nexport const StyledLeftNavFooterArea = styled.div`\n width: 100%;\n grid-area: left-nav-footer;\n`;\n\nconst allSlotsCombined = Object.values(DSScrollableContainerSlots)\n .map((slot) => `.${DSScrollableContainerName}-${slot}`)\n .join(', ');\n\nconst inheritBoxShadowCss = css`\n box-shadow: inherit;\n`;\n\nexport const StyledLeftNavContentWithScrollbar = styled(DSScrollableContainer)`\n &,\n .${DSScrollableContainerName}-${DSScrollableContainerSlots.HOST} {\n height: 100%;\n }\n ${allSlotsCombined} {\n ${inheritBoxShadowCss}\n }\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAAA;AAAA;AAAA;AAAA;AAWA,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,MAKI;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;AAAA,WAC/C,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;AAKrD,MAAM,8BAA8B,OAAO;AAAA;AAAA,WAEvC,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWxE,MAAM,0BAA0B,OAAO;AAAA;AAAA,IAE1C;AAAA;AAGG,MAAM,kCAAkC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa/C,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA,IAG9C;AAAA;AAGG,MAAM,6BAA6B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAMjB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,OAAO;AAAA;AAGtF,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;AAK9C,MAAM,mBAAmB,OAAO,OAAO,0BAA0B,EAC9D,IAAI,CAAC,SAAS,IAAI,6BAA6B,MAAM,EACrD,KAAK,IAAI;AAEZ,MAAM,sBAAsB;AAAA;AAAA;AAIrB,MAAM,oCAAoC,OAAO,qBAAqB;AAAA;AAAA,KAExE,6BAA6B,2BAA2B;AAAA;AAAA;AAAA,IAGzD;AAAA,MACE;AAAA;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.1.
|
|
3
|
+
"version": "3.1.5-rc.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Left Navigation",
|
|
6
6
|
"files": [
|
|
@@ -235,12 +235,13 @@
|
|
|
235
235
|
"typeSafety": false
|
|
236
236
|
},
|
|
237
237
|
"dependencies": {
|
|
238
|
-
"@elliemae/ds-circular-progress-indicator": "3.1.
|
|
239
|
-
"@elliemae/ds-grid": "3.1.
|
|
240
|
-
"@elliemae/ds-icons": "3.1.
|
|
241
|
-
"@elliemae/ds-
|
|
242
|
-
"@elliemae/ds-
|
|
243
|
-
"@elliemae/ds-
|
|
238
|
+
"@elliemae/ds-circular-progress-indicator": "3.1.5-rc.10",
|
|
239
|
+
"@elliemae/ds-grid": "3.1.5-rc.10",
|
|
240
|
+
"@elliemae/ds-icons": "3.1.5-rc.10",
|
|
241
|
+
"@elliemae/ds-scrollable-container": "3.1.5-rc.10",
|
|
242
|
+
"@elliemae/ds-system": "3.1.5-rc.10",
|
|
243
|
+
"@elliemae/ds-truncated-tooltip-text": "3.1.5-rc.10",
|
|
244
|
+
"@elliemae/ds-utilities": "3.1.5-rc.10",
|
|
244
245
|
"overlayscrollbars": "1.13.1"
|
|
245
246
|
},
|
|
246
247
|
"devDependencies": {
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
-
var __spreadValues = (a, b) => {
|
|
11
|
-
for (var prop in b || (b = {}))
|
|
12
|
-
if (__hasOwnProp.call(b, prop))
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
if (__getOwnPropSymbols)
|
|
15
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
-
if (__propIsEnum.call(b, prop))
|
|
17
|
-
__defNormalProp(a, prop, b[prop]);
|
|
18
|
-
}
|
|
19
|
-
return a;
|
|
20
|
-
};
|
|
21
|
-
var __export = (target, all) => {
|
|
22
|
-
for (var name in all)
|
|
23
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
24
|
-
};
|
|
25
|
-
var __copyProps = (to, from, except, desc) => {
|
|
26
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
27
|
-
for (let key of __getOwnPropNames(from))
|
|
28
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
29
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
30
|
-
}
|
|
31
|
-
return to;
|
|
32
|
-
};
|
|
33
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
34
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
35
|
-
var LeftNavContentWithScrollbar_exports = {};
|
|
36
|
-
__export(LeftNavContentWithScrollbar_exports, {
|
|
37
|
-
LeftNavContentWithScrollbar: () => LeftNavContentWithScrollbar
|
|
38
|
-
});
|
|
39
|
-
module.exports = __toCommonJS(LeftNavContentWithScrollbar_exports);
|
|
40
|
-
var React = __toESM(require("react"));
|
|
41
|
-
var import_react = __toESM(require("react"));
|
|
42
|
-
var import_OverlayScrollbars = require("overlayscrollbars/css/OverlayScrollbars.css");
|
|
43
|
-
var import_overlayscrollbars = __toESM(require("overlayscrollbars"));
|
|
44
|
-
var import_ds_system = require("@elliemae/ds-system");
|
|
45
|
-
const StyledHandle = import_ds_system.styled.div`
|
|
46
|
-
width: 6px;
|
|
47
|
-
border: 1px solid rgba(0, 0, 0, 0);
|
|
48
|
-
background-color: rgba(105, 116, 137, 0.5) !important;
|
|
49
|
-
border-radius: 7px;
|
|
50
|
-
|
|
51
|
-
:hover {
|
|
52
|
-
background-color: rgba(105, 116, 137, 0.7) !important;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
:active {
|
|
56
|
-
background-color: rgba(105, 116, 137, 0.7) !important;
|
|
57
|
-
}
|
|
58
|
-
`;
|
|
59
|
-
const options = {
|
|
60
|
-
className: "os-theme-dark",
|
|
61
|
-
scrollbars: {
|
|
62
|
-
autoHide: "leave",
|
|
63
|
-
autoHideDelay: 0
|
|
64
|
-
}
|
|
65
|
-
};
|
|
66
|
-
const LeftNavContentWithScrollbar = (props) => {
|
|
67
|
-
const { children } = props;
|
|
68
|
-
const inheritBoxShadow = { boxShadow: "inherit" };
|
|
69
|
-
const [osInstance, setOsInstance] = (0, import_react.useState)();
|
|
70
|
-
const osTargetRef = (0, import_react.useRef)(null);
|
|
71
|
-
(0, import_react.useEffect)(() => {
|
|
72
|
-
const nextOsInstance = (0, import_overlayscrollbars.default)(osTargetRef.current, options);
|
|
73
|
-
setOsInstance(nextOsInstance);
|
|
74
|
-
}, [osInstance]);
|
|
75
|
-
return /* @__PURE__ */ import_react.default.createElement("div", {
|
|
76
|
-
className: "os-host",
|
|
77
|
-
style: __spreadValues({ height: "100%" }, inheritBoxShadow),
|
|
78
|
-
tabIndex: -1,
|
|
79
|
-
ref: osTargetRef
|
|
80
|
-
}, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
81
|
-
className: "os-resize-observer-host"
|
|
82
|
-
}), /* @__PURE__ */ import_react.default.createElement("div", {
|
|
83
|
-
className: "os-padding",
|
|
84
|
-
style: inheritBoxShadow
|
|
85
|
-
}, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
86
|
-
className: "os-viewport",
|
|
87
|
-
style: inheritBoxShadow
|
|
88
|
-
}, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
89
|
-
className: "os-content",
|
|
90
|
-
style: inheritBoxShadow,
|
|
91
|
-
"aria-hidden": true
|
|
92
|
-
}, children))), /* @__PURE__ */ import_react.default.createElement("div", {
|
|
93
|
-
className: "os-scrollbar os-scrollbar-horizontal "
|
|
94
|
-
}, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
95
|
-
className: "os-scrollbar-track"
|
|
96
|
-
}, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
97
|
-
className: "os-scrollbar-handle"
|
|
98
|
-
}))), /* @__PURE__ */ import_react.default.createElement("div", {
|
|
99
|
-
className: "os-scrollbar os-scrollbar-vertical"
|
|
100
|
-
}, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
101
|
-
className: "os-scrollbar-track"
|
|
102
|
-
}, /* @__PURE__ */ import_react.default.createElement(StyledHandle, {
|
|
103
|
-
className: "os-scrollbar-handle"
|
|
104
|
-
}))), /* @__PURE__ */ import_react.default.createElement("div", {
|
|
105
|
-
className: "os-scrollbar-corner"
|
|
106
|
-
}));
|
|
107
|
-
};
|
|
108
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/parts/LeftNavContentWithScrollbar/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useEffect, useRef, useState } from 'react';\nimport 'overlayscrollbars/css/OverlayScrollbars.css';\nimport OverlayScrollbars, { Options } from 'overlayscrollbars';\nimport { styled } from '@elliemae/ds-system';\n\nexport interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {\n children?: React.ReactNode;\n}\n\nconst StyledHandle = styled.div`\n width: 6px;\n border: 1px solid rgba(0, 0, 0, 0);\n background-color: rgba(105, 116, 137, 0.5) !important;\n border-radius: 7px;\n\n :hover {\n background-color: rgba(105, 116, 137, 0.7) !important;\n }\n\n :active {\n background-color: rgba(105, 116, 137, 0.7) !important;\n }\n`;\n\nconst options: Options = {\n className: 'os-theme-dark',\n scrollbars: {\n autoHide: 'leave',\n autoHideDelay: 0,\n },\n};\n\nexport const LeftNavContentWithScrollbar: React.ComponentType<OverlayScrollbarsComponentProps> = (props) => {\n const { children } = props;\n\n const inheritBoxShadow = { boxShadow: 'inherit' };\n const [osInstance, setOsInstance] = useState<OverlayScrollbars>();\n const osTargetRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const nextOsInstance: OverlayScrollbars = OverlayScrollbars(osTargetRef.current, options);\n setOsInstance(nextOsInstance);\n }, [osInstance]);\n\n return (\n <div className=\"os-host\" style={{ height: '100%', ...inheritBoxShadow }} tabIndex={-1} ref={osTargetRef}>\n <div className=\"os-resize-observer-host\" />\n <div className=\"os-padding\" style={inheritBoxShadow}>\n <div className=\"os-viewport\" style={inheritBoxShadow}>\n <div className=\"os-content\" style={inheritBoxShadow} aria-hidden>\n {children}\n </div>\n </div>\n </div>\n <div className=\"os-scrollbar os-scrollbar-horizontal \">\n <div className=\"os-scrollbar-track\">\n <div className=\"os-scrollbar-handle\" />\n </div>\n </div>\n <div className=\"os-scrollbar os-scrollbar-vertical\">\n <div className=\"os-scrollbar-track\">\n <StyledHandle className=\"os-scrollbar-handle\"></StyledHandle>\n </div>\n </div>\n <div className=\"os-scrollbar-corner\" />\n </div>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAmD;AACnD,+BAAO;AACP,+BAA2C;AAC3C,uBAAuB;AAMvB,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe5B,MAAM,UAAmB;AAAA,EACvB,WAAW;AAAA,EACX,YAAY;AAAA,IACV,UAAU;AAAA,IACV,eAAe;AAAA,EACjB;AACF;AAEO,MAAM,8BAAoF,CAAC,UAAU;AAC1G,QAAM,EAAE,aAAa;AAErB,QAAM,mBAAmB,EAAE,WAAW,UAAU;AAChD,QAAM,CAAC,YAAY,iBAAiB,2BAA4B;AAChE,QAAM,cAAc,yBAAuB,IAAI;AAE/C,8BAAU,MAAM;AACd,UAAM,iBAAoC,sCAAkB,YAAY,SAAS,OAAO;AACxF,kBAAc,cAAc;AAAA,EAC9B,GAAG,CAAC,UAAU,CAAC;AAEf,SACE,mDAAC;AAAA,IAAI,WAAU;AAAA,IAAU,OAAO,iBAAE,QAAQ,UAAW;AAAA,IAAoB,UAAU;AAAA,IAAI,KAAK;AAAA,KAC1F,mDAAC;AAAA,IAAI,WAAU;AAAA,GAA0B,GACzC,mDAAC;AAAA,IAAI,WAAU;AAAA,IAAa,OAAO;AAAA,KACjC,mDAAC;AAAA,IAAI,WAAU;AAAA,IAAc,OAAO;AAAA,KAClC,mDAAC;AAAA,IAAI,WAAU;AAAA,IAAa,OAAO;AAAA,IAAkB,eAAW;AAAA,KAC7D,QACH,CACF,CACF,GACA,mDAAC;AAAA,IAAI,WAAU;AAAA,KACb,mDAAC;AAAA,IAAI,WAAU;AAAA,KACb,mDAAC;AAAA,IAAI,WAAU;AAAA,GAAsB,CACvC,CACF,GACA,mDAAC;AAAA,IAAI,WAAU;AAAA,KACb,mDAAC;AAAA,IAAI,WAAU;AAAA,KACb,mDAAC;AAAA,IAAa,WAAU;AAAA,GAAsB,CAChD,CACF,GACA,mDAAC;AAAA,IAAI,WAAU;AAAA,GAAsB,CACvC;AAEJ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
-
var __spreadValues = (a, b) => {
|
|
7
|
-
for (var prop in b || (b = {}))
|
|
8
|
-
if (__hasOwnProp.call(b, prop))
|
|
9
|
-
__defNormalProp(a, prop, b[prop]);
|
|
10
|
-
if (__getOwnPropSymbols)
|
|
11
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
-
if (__propIsEnum.call(b, prop))
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
}
|
|
15
|
-
return a;
|
|
16
|
-
};
|
|
17
|
-
import * as React from "react";
|
|
18
|
-
import React2, { useEffect, useRef, useState } from "react";
|
|
19
|
-
import "overlayscrollbars/css/OverlayScrollbars.css";
|
|
20
|
-
import OverlayScrollbars from "overlayscrollbars";
|
|
21
|
-
import { styled } from "@elliemae/ds-system";
|
|
22
|
-
const StyledHandle = styled.div`
|
|
23
|
-
width: 6px;
|
|
24
|
-
border: 1px solid rgba(0, 0, 0, 0);
|
|
25
|
-
background-color: rgba(105, 116, 137, 0.5) !important;
|
|
26
|
-
border-radius: 7px;
|
|
27
|
-
|
|
28
|
-
:hover {
|
|
29
|
-
background-color: rgba(105, 116, 137, 0.7) !important;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
:active {
|
|
33
|
-
background-color: rgba(105, 116, 137, 0.7) !important;
|
|
34
|
-
}
|
|
35
|
-
`;
|
|
36
|
-
const options = {
|
|
37
|
-
className: "os-theme-dark",
|
|
38
|
-
scrollbars: {
|
|
39
|
-
autoHide: "leave",
|
|
40
|
-
autoHideDelay: 0
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
const LeftNavContentWithScrollbar = (props) => {
|
|
44
|
-
const { children } = props;
|
|
45
|
-
const inheritBoxShadow = { boxShadow: "inherit" };
|
|
46
|
-
const [osInstance, setOsInstance] = useState();
|
|
47
|
-
const osTargetRef = useRef(null);
|
|
48
|
-
useEffect(() => {
|
|
49
|
-
const nextOsInstance = OverlayScrollbars(osTargetRef.current, options);
|
|
50
|
-
setOsInstance(nextOsInstance);
|
|
51
|
-
}, [osInstance]);
|
|
52
|
-
return /* @__PURE__ */ React2.createElement("div", {
|
|
53
|
-
className: "os-host",
|
|
54
|
-
style: __spreadValues({ height: "100%" }, inheritBoxShadow),
|
|
55
|
-
tabIndex: -1,
|
|
56
|
-
ref: osTargetRef
|
|
57
|
-
}, /* @__PURE__ */ React2.createElement("div", {
|
|
58
|
-
className: "os-resize-observer-host"
|
|
59
|
-
}), /* @__PURE__ */ React2.createElement("div", {
|
|
60
|
-
className: "os-padding",
|
|
61
|
-
style: inheritBoxShadow
|
|
62
|
-
}, /* @__PURE__ */ React2.createElement("div", {
|
|
63
|
-
className: "os-viewport",
|
|
64
|
-
style: inheritBoxShadow
|
|
65
|
-
}, /* @__PURE__ */ React2.createElement("div", {
|
|
66
|
-
className: "os-content",
|
|
67
|
-
style: inheritBoxShadow,
|
|
68
|
-
"aria-hidden": true
|
|
69
|
-
}, children))), /* @__PURE__ */ React2.createElement("div", {
|
|
70
|
-
className: "os-scrollbar os-scrollbar-horizontal "
|
|
71
|
-
}, /* @__PURE__ */ React2.createElement("div", {
|
|
72
|
-
className: "os-scrollbar-track"
|
|
73
|
-
}, /* @__PURE__ */ React2.createElement("div", {
|
|
74
|
-
className: "os-scrollbar-handle"
|
|
75
|
-
}))), /* @__PURE__ */ React2.createElement("div", {
|
|
76
|
-
className: "os-scrollbar os-scrollbar-vertical"
|
|
77
|
-
}, /* @__PURE__ */ React2.createElement("div", {
|
|
78
|
-
className: "os-scrollbar-track"
|
|
79
|
-
}, /* @__PURE__ */ React2.createElement(StyledHandle, {
|
|
80
|
-
className: "os-scrollbar-handle"
|
|
81
|
-
}))), /* @__PURE__ */ React2.createElement("div", {
|
|
82
|
-
className: "os-scrollbar-corner"
|
|
83
|
-
}));
|
|
84
|
-
};
|
|
85
|
-
export {
|
|
86
|
-
LeftNavContentWithScrollbar
|
|
87
|
-
};
|
|
88
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/LeftNavContentWithScrollbar/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useEffect, useRef, useState } from 'react';\nimport 'overlayscrollbars/css/OverlayScrollbars.css';\nimport OverlayScrollbars, { Options } from 'overlayscrollbars';\nimport { styled } from '@elliemae/ds-system';\n\nexport interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {\n children?: React.ReactNode;\n}\n\nconst StyledHandle = styled.div`\n width: 6px;\n border: 1px solid rgba(0, 0, 0, 0);\n background-color: rgba(105, 116, 137, 0.5) !important;\n border-radius: 7px;\n\n :hover {\n background-color: rgba(105, 116, 137, 0.7) !important;\n }\n\n :active {\n background-color: rgba(105, 116, 137, 0.7) !important;\n }\n`;\n\nconst options: Options = {\n className: 'os-theme-dark',\n scrollbars: {\n autoHide: 'leave',\n autoHideDelay: 0,\n },\n};\n\nexport const LeftNavContentWithScrollbar: React.ComponentType<OverlayScrollbarsComponentProps> = (props) => {\n const { children } = props;\n\n const inheritBoxShadow = { boxShadow: 'inherit' };\n const [osInstance, setOsInstance] = useState<OverlayScrollbars>();\n const osTargetRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const nextOsInstance: OverlayScrollbars = OverlayScrollbars(osTargetRef.current, options);\n setOsInstance(nextOsInstance);\n }, [osInstance]);\n\n return (\n <div className=\"os-host\" style={{ height: '100%', ...inheritBoxShadow }} tabIndex={-1} ref={osTargetRef}>\n <div className=\"os-resize-observer-host\" />\n <div className=\"os-padding\" style={inheritBoxShadow}>\n <div className=\"os-viewport\" style={inheritBoxShadow}>\n <div className=\"os-content\" style={inheritBoxShadow} aria-hidden>\n {children}\n </div>\n </div>\n </div>\n <div className=\"os-scrollbar os-scrollbar-horizontal \">\n <div className=\"os-scrollbar-track\">\n <div className=\"os-scrollbar-handle\" />\n </div>\n </div>\n <div className=\"os-scrollbar os-scrollbar-vertical\">\n <div className=\"os-scrollbar-track\">\n <StyledHandle className=\"os-scrollbar-handle\"></StyledHandle>\n </div>\n </div>\n <div className=\"os-scrollbar-corner\" />\n </div>\n );\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AAMA,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe5B,MAAM,UAAmB;AAAA,EACvB,WAAW;AAAA,EACX,YAAY;AAAA,IACV,UAAU;AAAA,IACV,eAAe;AAAA,EACjB;AACF;AAEO,MAAM,8BAAoF,CAAC,UAAU;AAC1G,QAAM,EAAE,aAAa;AAErB,QAAM,mBAAmB,EAAE,WAAW,UAAU;AAChD,QAAM,CAAC,YAAY,iBAAiB,SAA4B;AAChE,QAAM,cAAc,OAAuB,IAAI;AAE/C,YAAU,MAAM;AACd,UAAM,iBAAoC,kBAAkB,YAAY,SAAS,OAAO;AACxF,kBAAc,cAAc;AAAA,EAC9B,GAAG,CAAC,UAAU,CAAC;AAEf,SACE,qCAAC;AAAA,IAAI,WAAU;AAAA,IAAU,OAAO,iBAAE,QAAQ,UAAW;AAAA,IAAoB,UAAU;AAAA,IAAI,KAAK;AAAA,KAC1F,qCAAC;AAAA,IAAI,WAAU;AAAA,GAA0B,GACzC,qCAAC;AAAA,IAAI,WAAU;AAAA,IAAa,OAAO;AAAA,KACjC,qCAAC;AAAA,IAAI,WAAU;AAAA,IAAc,OAAO;AAAA,KAClC,qCAAC;AAAA,IAAI,WAAU;AAAA,IAAa,OAAO;AAAA,IAAkB,eAAW;AAAA,KAC7D,QACH,CACF,CACF,GACA,qCAAC;AAAA,IAAI,WAAU;AAAA,KACb,qCAAC;AAAA,IAAI,WAAU;AAAA,KACb,qCAAC;AAAA,IAAI,WAAU;AAAA,GAAsB,CACvC,CACF,GACA,qCAAC;AAAA,IAAI,WAAU;AAAA,KACb,qCAAC;AAAA,IAAI,WAAU;AAAA,KACb,qCAAC;AAAA,IAAa,WAAU;AAAA,GAAsB,CAChD,CACF,GACA,qCAAC;AAAA,IAAI,WAAU;AAAA,GAAsB,CACvC;AAEJ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|