@elliemae/ds-left-navigation 3.22.0-rc.0 → 3.22.0-rc.2
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 +18 -2
- package/dist/cjs/parts/LeftNavContent/index.js.map +2 -2
- package/dist/cjs/parts/LeftNavFooterItem/index.js +11 -2
- package/dist/cjs/parts/LeftNavFooterItem/index.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +1 -0
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/parts/LeftNavContent/index.js +18 -2
- package/dist/esm/parts/LeftNavContent/index.js.map +2 -2
- package/dist/esm/parts/LeftNavFooterItem/index.js +12 -3
- package/dist/esm/parts/LeftNavFooterItem/index.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +1 -0
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/parts/LeftNavFooterItem/index.d.ts +2 -1
- package/dist/types/react-desc-prop-types.d.ts +2 -1
- package/package.json +10 -10
|
@@ -108,7 +108,15 @@ const LeftNavInnerContent = () => {
|
|
|
108
108
|
const LeftNavContent = () => {
|
|
109
109
|
const {
|
|
110
110
|
expandedForAnimation,
|
|
111
|
-
leftNavProps: {
|
|
111
|
+
leftNavProps: {
|
|
112
|
+
expanded,
|
|
113
|
+
expandedWidth,
|
|
114
|
+
FooterLabelComponent,
|
|
115
|
+
footerLabel,
|
|
116
|
+
onFooterExpand,
|
|
117
|
+
onFooterClose,
|
|
118
|
+
loading
|
|
119
|
+
},
|
|
112
120
|
leftNavProps
|
|
113
121
|
} = import_react.default.useContext(import_LeftNavigationContext.LeftNavContext);
|
|
114
122
|
const globalProps = (0, import_ds_props_helpers.useGetGlobalAttributes)(leftNavProps);
|
|
@@ -131,7 +139,15 @@ const LeftNavContent = () => {
|
|
|
131
139
|
children: [
|
|
132
140
|
loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LeftNavLoading.LeftNavLoading, { expanded: expandedForAnimation }),
|
|
133
141
|
!loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LeftNavInnerContent, {}),
|
|
134
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
142
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
143
|
+
import_LeftNavFooterItem.LeftNavFooterItem,
|
|
144
|
+
{
|
|
145
|
+
footerLabel,
|
|
146
|
+
FooterLabelComponent,
|
|
147
|
+
onFooterExpand,
|
|
148
|
+
onFooterClose
|
|
149
|
+
}
|
|
150
|
+
)
|
|
135
151
|
]
|
|
136
152
|
}
|
|
137
153
|
)
|
|
@@ -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-props-helpers';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem/index.js';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem.js';\nimport {\n StyledLeftNavExpandAnimationWrapper,\n StyledLeftNavAreasContainer,\n StyledLeftNavHeaderArea,\n StyledLeftNavBodyAreasContainer,\n StyledLeftNavBodyHeaderArea,\n StyledLeftNavBodyItemsArea,\n} from './styled.js';\nimport { ItemSkeleton } from '../../outOfTheBox/ItemSkeleton/index.js';\nimport { LeftNavLoading } from '../LeftNavLoading/index.js';\nconst leftNavScreenReaderInstructions =\n 'Left Navigation. You can navigate through the items using the Up/Down arrows. ' +\n 'To expand or select an item, use the Enter/Return or Space keys. ' +\n 'Expandable items can also be opened/closed with the Right/Left arrows. ' +\n 'The Home and End keys will take you to the first and last item respectively.';\n\nconst LeftNavInnerContent = () => {\n const {\n leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow, isSkeleton },\n selectedItem,\n } = React.useContext(LeftNavContext);\n return (\n <>\n <StyledLeftNavHeaderArea\n data-testid=\"leftnav-header-area\"\n selected={!!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId as string)}\n role=\"group\"\n >\n {isSkeleton ? (\n <ItemSkeleton item={{ dsId: 'header-skeleton', itemOpts: { skeletonVariant: 'item' } }} hasBorderBottom />\n ) : (\n <> {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}</>\n )}\n </StyledLeftNavHeaderArea>\n <StyledLeftNavBodyAreasContainer cols={['1fr']} rows={['auto', '1fr']} role=\"group\">\n <StyledLeftNavBodyHeaderArea\n data-testid=\"leftnav-body-header-area\"\n selected={!!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId as string)}\n role=\"group\"\n isSkeleton={isSkeleton}\n >\n {isSkeleton ? (\n <ItemSkeleton\n item={{\n dsId: 'body-header-skeleton',\n itemOpts: {\n skeletonVariant: 'item',\n },\n }}\n />\n ) : (\n <>{BodyHeaderComponent ? <OutOfTheBoxMapItem item={BodyHeaderComponent} /> : null}</>\n )}\n </StyledLeftNavBodyHeaderArea>\n <StyledLeftNavBodyItemsArea\n selected={!withoutBodyShadow && openedItem !== null}\n data-testid=\"leftnav-body-items-area\"\n tabIndex={-1}\n role=\"group\"\n isSkeleton={isSkeleton}\n >\n {isSkeleton ? (\n <ItemSkeleton\n item={{\n dsId: 'action-items-skeleton',\n itemOpts: {\n skeletonVariant: 'subitem',\n },\n }}\n />\n ) : (\n <>\n {items.map((item) => (\n <OutOfTheBoxMapItem item={item} key={item.dsId} />\n ))}\n </>\n )}\n </StyledLeftNavBodyItemsArea>\n </StyledLeftNavBodyAreasContainer>\n </>\n );\n};\n\nconst LeftNavContent: React.ComponentType = () => {\n const {\n expandedForAnimation,\n leftNavProps: {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCb;AAlCV,mBAAkB;AAClB,8BAAuC;AACvC,mCAA+B;AAC/B,+BAAkC;AAClC,gCAAmC;AACnC,oBAOO;AACP,0BAA6B;AAC7B,4BAA+B;AAC/B,MAAM,kCACJ;AAKF,MAAM,sBAAsB,MAAM;AAChC,QAAM;AAAA,IACJ,cAAc,EAAE,iBAAiB,qBAAqB,YAAY,OAAO,mBAAmB,WAAW;AAAA,IACvG;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,2CAAc;AACnC,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,UAAU,CAAC,CAAC,mBAAmB,CAAC,cAAc,UAAU,EAAE,SAAS,gBAAgB,IAAc;AAAA,QACjG,MAAK;AAAA,QAEJ,uBACC,4CAAC,oCAAa,MAAM,EAAE,MAAM,mBAAmB,UAAU,EAAE,iBAAiB,OAAO,EAAE,GAAG,iBAAe,MAAC,IAExG,4EAAE;AAAA;AAAA,UAAE,kBAAkB,4CAAC,gDAAmB,MAAM,iBAAiB,IAAK;AAAA,WAAK;AAAA;AAAA,IAE/E;AAAA,IACA,6CAAC,iDAAgC,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,QAAQ,KAAK,GAAG,MAAK,SAC1E;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,UAAU,CAAC,CAAC,uBAAuB,CAAC,cAAc,UAAU,EAAE,SAAS,oBAAoB,IAAc;AAAA,UACzG,MAAK;AAAA,UACL;AAAA,UAEC,uBACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,gBACJ,MAAM;AAAA,gBACN,UAAU;AAAA,kBACR,iBAAiB;AAAA,gBACnB;AAAA,cACF;AAAA;AAAA,UACF,IAEA,2EAAG,gCAAsB,4CAAC,gDAAmB,MAAM,qBAAqB,IAAK,MAAK;AAAA;AAAA,MAEtF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,UAAU,CAAC,qBAAqB,eAAe;AAAA,UAC/C,eAAY;AAAA,UACZ,UAAU;AAAA,UACV,MAAK;AAAA,UACL;AAAA,UAEC,uBACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,gBACJ,MAAM;AAAA,gBACN,UAAU;AAAA,kBACR,iBAAiB;AAAA,gBACnB;AAAA,cACF;AAAA;AAAA,UACF,IAEA,2EACG,gBAAM,IAAI,CAAC,SACV,4CAAC,gDAAmB,QAAiB,KAAK,IAAM,CACjD,GACH;AAAA;AAAA,MAEJ;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,MAAM,iBAAsC,MAAM;AAChD,QAAM;AAAA,IACJ;AAAA,IACA,cAAc,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem/index.js';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem.js';\nimport {\n StyledLeftNavExpandAnimationWrapper,\n StyledLeftNavAreasContainer,\n StyledLeftNavHeaderArea,\n StyledLeftNavBodyAreasContainer,\n StyledLeftNavBodyHeaderArea,\n StyledLeftNavBodyItemsArea,\n} from './styled.js';\nimport { ItemSkeleton } from '../../outOfTheBox/ItemSkeleton/index.js';\nimport { LeftNavLoading } from '../LeftNavLoading/index.js';\nconst leftNavScreenReaderInstructions =\n 'Left Navigation. You can navigate through the items using the Up/Down arrows. ' +\n 'To expand or select an item, use the Enter/Return or Space keys. ' +\n 'Expandable items can also be opened/closed with the Right/Left arrows. ' +\n 'The Home and End keys will take you to the first and last item respectively.';\n\nconst LeftNavInnerContent = () => {\n const {\n leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow, isSkeleton },\n selectedItem,\n } = React.useContext(LeftNavContext);\n return (\n <>\n <StyledLeftNavHeaderArea\n data-testid=\"leftnav-header-area\"\n selected={!!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId as string)}\n role=\"group\"\n >\n {isSkeleton ? (\n <ItemSkeleton item={{ dsId: 'header-skeleton', itemOpts: { skeletonVariant: 'item' } }} hasBorderBottom />\n ) : (\n <> {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}</>\n )}\n </StyledLeftNavHeaderArea>\n <StyledLeftNavBodyAreasContainer cols={['1fr']} rows={['auto', '1fr']} role=\"group\">\n <StyledLeftNavBodyHeaderArea\n data-testid=\"leftnav-body-header-area\"\n selected={!!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId as string)}\n role=\"group\"\n isSkeleton={isSkeleton}\n >\n {isSkeleton ? (\n <ItemSkeleton\n item={{\n dsId: 'body-header-skeleton',\n itemOpts: {\n skeletonVariant: 'item',\n },\n }}\n />\n ) : (\n <>{BodyHeaderComponent ? <OutOfTheBoxMapItem item={BodyHeaderComponent} /> : null}</>\n )}\n </StyledLeftNavBodyHeaderArea>\n <StyledLeftNavBodyItemsArea\n selected={!withoutBodyShadow && openedItem !== null}\n data-testid=\"leftnav-body-items-area\"\n tabIndex={-1}\n role=\"group\"\n isSkeleton={isSkeleton}\n >\n {isSkeleton ? (\n <ItemSkeleton\n item={{\n dsId: 'action-items-skeleton',\n itemOpts: {\n skeletonVariant: 'subitem',\n },\n }}\n />\n ) : (\n <>\n {items.map((item) => (\n <OutOfTheBoxMapItem item={item} key={item.dsId} />\n ))}\n </>\n )}\n </StyledLeftNavBodyItemsArea>\n </StyledLeftNavBodyAreasContainer>\n </>\n );\n};\n\nconst LeftNavContent: React.ComponentType = () => {\n const {\n expandedForAnimation,\n leftNavProps: {\n expanded,\n expandedWidth,\n FooterLabelComponent,\n footerLabel,\n onFooterExpand,\n onFooterClose,\n loading,\n },\n leftNavProps,\n } = React.useContext(LeftNavContext);\n\n const globalProps = useGetGlobalAttributes(leftNavProps);\n\n return (\n <StyledLeftNavExpandAnimationWrapper\n expandedWidth={expandedWidth}\n expanded={expanded}\n data-testid=\"leftnav-component\"\n aria-label={leftNavScreenReaderInstructions}\n {...globalProps}\n >\n <StyledLeftNavAreasContainer\n expandedWidth={expandedWidth}\n expanded={expandedForAnimation}\n rows={loading ? ['1fr', 'auto'] : ['auto', '1fr', 'auto']}\n cols={['1fr']}\n role={'menu'}\n >\n {loading && <LeftNavLoading expanded={expandedForAnimation} />}\n {!loading && <LeftNavInnerContent />}\n <LeftNavFooterItem\n footerLabel={footerLabel}\n FooterLabelComponent={FooterLabelComponent}\n onFooterExpand={onFooterExpand}\n onFooterClose={onFooterClose}\n />\n </StyledLeftNavAreasContainer>\n </StyledLeftNavExpandAnimationWrapper>\n );\n};\n\nexport default LeftNavContent;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -44,7 +44,7 @@ var import_hooks = require("../../hooks/index.js");
|
|
|
44
44
|
var import_LeftNavigationContext = __toESM(require("../../LeftNavigationContext.js"));
|
|
45
45
|
var import_constants = require("../../exported-related/constants.js");
|
|
46
46
|
const LeftNavFooterItem = (props) => {
|
|
47
|
-
const { footerLabel, onFooterExpand = () => null, onFooterClose = () => null } = props;
|
|
47
|
+
const { footerLabel, FooterLabelComponent, onFooterExpand = () => null, onFooterClose = () => null } = props;
|
|
48
48
|
const {
|
|
49
49
|
leftNavProps: { labelOverflow, isSkeleton },
|
|
50
50
|
expandedForAnimation,
|
|
@@ -71,6 +71,15 @@ const LeftNavFooterItem = (props) => {
|
|
|
71
71
|
},
|
|
72
72
|
[handleOnClick]
|
|
73
73
|
);
|
|
74
|
+
const label = (0, import_react.useMemo)(() => {
|
|
75
|
+
if (FooterLabelComponent) {
|
|
76
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FooterLabelComponent, {});
|
|
77
|
+
}
|
|
78
|
+
if (labelOverflow === "truncate") {
|
|
79
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: footerLabel, placement: "bottom-start" });
|
|
80
|
+
}
|
|
81
|
+
return footerLabel;
|
|
82
|
+
}, [footerLabel, FooterLabelComponent, labelOverflow]);
|
|
74
83
|
if (isSkeleton) {
|
|
75
84
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledFooterMenu, { "data-testid": "leftnav-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { height: "48px", justifyContent: "center", alignItems: "center", cols: ["1fr"], p: "xxs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", height: "24px" }) }) }, id);
|
|
76
85
|
}
|
|
@@ -101,7 +110,7 @@ const LeftNavFooterItem = (props) => {
|
|
|
101
110
|
"data-testid": "leftnav-itemlabel",
|
|
102
111
|
labelOverflow,
|
|
103
112
|
"aria-live": "polite",
|
|
104
|
-
children:
|
|
113
|
+
children: label
|
|
105
114
|
}
|
|
106
115
|
),
|
|
107
116
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledFooterSeparator, { mt: "xxxs" }),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/LeftNavFooterItem/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useContext, useCallback } from 'react';\nimport { MenuExpand, MenuCollapse } from '@elliemae/ds-icons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { Grid } from '@elliemae/ds-grid';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport {\n StyledFooterMenu,\n StyledFooterItem,\n StyledFooterLabel,\n StyledFooterSeparator,\n StyledMenuCollapse,\n} from './styled.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\nimport LeftNavigationContext from '../../LeftNavigationContext.js';\nimport { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../../exported-related/constants.js';\n\ntype LeftNavFooterItemProps = {\n footerLabel: string
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport { MenuExpand, MenuCollapse } from '@elliemae/ds-icons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { Grid } from '@elliemae/ds-grid';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport {\n StyledFooterMenu,\n StyledFooterItem,\n StyledFooterLabel,\n StyledFooterSeparator,\n StyledMenuCollapse,\n} from './styled.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\nimport LeftNavigationContext from '../../LeftNavigationContext.js';\nimport { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../../exported-related/constants.js';\n\ntype LeftNavFooterItemProps = {\n footerLabel: string;\n FooterLabelComponent?: React.ComponentType<unknown>;\n onFooterExpand: React.MouseEventHandler & React.KeyboardEventHandler;\n onFooterClose: React.MouseEventHandler & React.KeyboardEventHandler;\n};\n\n// eslint-disable-next-line complexity\nexport const LeftNavFooterItem: React.ComponentType<LeftNavFooterItemProps> = (props) => {\n const { footerLabel, FooterLabelComponent, onFooterExpand = () => null, onFooterClose = () => null } = props;\n const {\n leftNavProps: { labelOverflow, isSkeleton },\n expandedForAnimation,\n setFocusedItem,\n visibleItemsRefs,\n } = useContext(LeftNavigationContext);\n\n const id = FOOTER_DS_ID;\n\n const handleOnClick = expandedForAnimation ? onFooterClose : onFooterExpand;\n\n const onKeyDown = useKeyboardNavigation({\n item: {\n dsId: id,\n itemOpts: {\n selectable: !expandedForAnimation,\n openable: false,\n closable: false,\n },\n },\n onClick: handleOnClick,\n });\n\n const handleMenuCollapseClick = useCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n handleOnClick(e as React.MouseEvent<HTMLButtonElement, MouseEvent>);\n },\n [handleOnClick],\n );\n\n const label = useMemo(() => {\n if (FooterLabelComponent) {\n return <FooterLabelComponent />;\n }\n if (labelOverflow === 'truncate') {\n return <SimpleTruncatedTooltipText value={footerLabel} placement=\"bottom-start\" />;\n }\n return footerLabel;\n }, [footerLabel, FooterLabelComponent, labelOverflow]);\n\n if (isSkeleton) {\n return (\n <StyledFooterMenu key={id} data-testid=\"leftnav-container\">\n <Grid height=\"48px\" justifyContent=\"center\" alignItems=\"center\" cols={['1fr']} p=\"xxs\">\n <DSSkeleton variant=\"rectangular\" height=\"24px\" />\n </Grid>\n </StyledFooterMenu>\n );\n }\n\n return (\n <StyledFooterMenu key={id} data-testid=\"leftnav-container\">\n <StyledFooterItem\n ref={visibleItemsRefs.current[id]}\n tabIndex={expandedForAnimation ? -1 : 0}\n expanded={expandedForAnimation}\n pt=\"xxs2\"\n height={expandedForAnimation ? 'auto' : '48px'}\n alignItems=\"flex-start\"\n pl=\"xxs2\"\n cols={expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']}\n onClick={expandedForAnimation ? () => null : handleOnClick}\n onKeyDown={onKeyDown}\n onFocus={() => setFocusedItem(id)}\n data-testid=\"leftnav-item-container\"\n role=\"menuitem\"\n aria-label={\n expandedForAnimation\n ? `Footer, ${typeof footerLabel === 'string' ? footerLabel : ''}`\n : `Expand left navigation`\n }\n >\n {!expandedForAnimation ? (\n <MenuExpand size=\"m\" color={['brand-primary', '800']} data-testid=\"leftnav-footer-btn\" />\n ) : (\n <>\n <StyledFooterLabel\n mt=\"5px\"\n mr=\"12px\"\n mb=\"16px\"\n data-testid=\"leftnav-itemlabel\"\n labelOverflow={labelOverflow}\n aria-live=\"polite\"\n >\n {label}\n </StyledFooterLabel>\n <StyledFooterSeparator mt=\"xxxs\" />\n <StyledMenuCollapse\n buttonType=\"raw\"\n onClick={handleMenuCollapseClick}\n data-testid=\"leftnav-footer-btn\"\n tabIndex={0}\n onFocus={(e: React.FocusEvent) => {\n e.stopPropagation();\n setFocusedItem(FOOTER_MENU_CLOSE_DS_ID);\n }}\n role=\"button\"\n aria-label=\"Collapse left navigation\"\n >\n <MenuCollapse size=\"m\" color={['brand-primary', '800']} />\n </StyledMenuCollapse>\n </>\n )}\n </StyledFooterItem>\n </StyledFooterMenu>\n );\n};\n\nexport default LeftNavFooterItem;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6DV;AA5Db,mBAAwD;AACxD,sBAAyC;AACzC,yBAA2B;AAC3B,qBAAqB;AAErB,uCAA2C;AAC3C,oBAMO;AACP,mBAAsC;AACtC,mCAAkC;AAClC,uBAAsD;AAU/C,MAAM,oBAAiE,CAAC,UAAU;AACvF,QAAM,EAAE,aAAa,sBAAsB,iBAAiB,MAAM,MAAM,gBAAgB,MAAM,KAAK,IAAI;AACvG,QAAM;AAAA,IACJ,cAAc,EAAE,eAAe,WAAW;AAAA,IAC1C;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,6BAAAA,OAAqB;AAEpC,QAAM,KAAK;AAEX,QAAM,gBAAgB,uBAAuB,gBAAgB;AAE7D,QAAM,gBAAY,oCAAsB;AAAA,IACtC,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,QACR,YAAY,CAAC;AAAA,QACb,UAAU;AAAA,QACV,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,8BAA0B;AAAA,IAC9B,CAAC,MAAgG;AAC/F,QAAE,gBAAgB;AAClB,oBAAc,CAAoD;AAAA,IACpE;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,YAAQ,sBAAQ,MAAM;AAC1B,QAAI,sBAAsB;AACxB,aAAO,4CAAC,wBAAqB;AAAA,IAC/B;AACA,QAAI,kBAAkB,YAAY;AAChC,aAAO,4CAAC,+DAA2B,OAAO,aAAa,WAAU,gBAAe;AAAA,IAClF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,sBAAsB,aAAa,CAAC;AAErD,MAAI,YAAY;AACd,WACE,4CAAC,kCAA0B,eAAY,qBACrC,sDAAC,uBAAK,QAAO,QAAO,gBAAe,UAAS,YAAW,UAAS,MAAM,CAAC,KAAK,GAAG,GAAE,OAC/E,sDAAC,iCAAW,SAAQ,eAAc,QAAO,QAAO,GAClD,KAHqB,EAIvB;AAAA,EAEJ;AAEA,SACE,4CAAC,kCAA0B,eAAY,qBACrC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,iBAAiB,QAAQ,EAAE;AAAA,MAChC,UAAU,uBAAuB,KAAK;AAAA,MACtC,UAAU;AAAA,MACV,IAAG;AAAA,MACH,QAAQ,uBAAuB,SAAS;AAAA,MACxC,YAAW;AAAA,MACX,IAAG;AAAA,MACH,MAAM,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM;AAAA,MAC9D,SAAS,uBAAuB,MAAM,OAAO;AAAA,MAC7C;AAAA,MACA,SAAS,MAAM,eAAe,EAAE;AAAA,MAChC,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,cACE,uBACI,WAAW,OAAO,gBAAgB,WAAW,cAAc,OAC3D;AAAA,MAGL,WAAC,uBACA,4CAAC,8BAAW,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,eAAY,sBAAqB,IAEvF,4EACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAY;AAAA,YACZ;AAAA,YACA,aAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA,QACA,4CAAC,uCAAsB,IAAG,QAAO;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,SAAS;AAAA,YACT,eAAY;AAAA,YACZ,UAAU;AAAA,YACV,SAAS,CAAC,MAAwB;AAChC,gBAAE,gBAAgB;AAClB,6BAAe,wCAAuB;AAAA,YACxC;AAAA,YACA,MAAK;AAAA,YACL,cAAW;AAAA,YAEX,sDAAC,gCAAa,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,QAC1D;AAAA,SACF;AAAA;AAAA,EAEJ,KApDqB,EAqDvB;AAEJ;AAEA,IAAO,4BAAQ;",
|
|
6
6
|
"names": ["LeftNavigationContext"]
|
|
7
7
|
}
|
|
@@ -54,6 +54,7 @@ const leftNavigationProps = {
|
|
|
54
54
|
footerLabel: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.node, import_ds_props_helpers.PropTypes.string]).description(
|
|
55
55
|
"The label to show in the footer item"
|
|
56
56
|
),
|
|
57
|
+
FooterLabelComponent: import_ds_props_helpers.PropTypes.func.description("The component to show in the footer item"),
|
|
57
58
|
onFooterExpand: import_ds_props_helpers.PropTypes.func.description("The function to call when the left-nav is opened via the footer"),
|
|
58
59
|
onFooterClose: import_ds_props_helpers.PropTypes.func.description("The function to call when the left-nav is closed via the footer"),
|
|
59
60
|
onSelectedChange: import_ds_props_helpers.PropTypes.func.description("A callback which triggers when the selected item changes").defaultValue(() => null),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { type Theme } from '@elliemae/ds-system';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\n\nimport { outOfTheBoxTypes } from './outOfTheBox/index.js';\nimport type { ContextProps } from './LeftNavigationContext.js';\n\ntype ColorsKey = keyof Theme['colors'];\n\nexport declare namespace DSLeftNavigationT {\n export type LabelOveflowT = 'wrap' | 'wrapAll' | 'truncate';\n\n export interface DefaultProps {\n expanded: boolean;\n expandedWidth: string;\n openedItem: string | null;\n items: GenericItemItemProps[];\n footerLabel: string
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAoC;AAIpC,yBAAiC;
|
|
4
|
+
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { type Theme } from '@elliemae/ds-system';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\n\nimport { outOfTheBoxTypes } from './outOfTheBox/index.js';\nimport type { ContextProps } from './LeftNavigationContext.js';\n\ntype ColorsKey = keyof Theme['colors'];\n\nexport declare namespace DSLeftNavigationT {\n export type LabelOveflowT = 'wrap' | 'wrapAll' | 'truncate';\n\n export interface DefaultProps {\n expanded: boolean;\n expandedWidth: string;\n openedItem: string | null;\n items: GenericItemItemProps[];\n footerLabel: string;\n labelOverflow: LabelOveflowT;\n onSelectedChange: (item: string | null) => void;\n onFocusChange: (item: string | null) => void;\n onFooterExpand: () => void;\n onFooterClose: () => void;\n onItemClick: (item: GenericItemItemProps, e: React.MouseEvent<HTMLElement>) => void;\n loading: boolean;\n isSkeleton: boolean;\n }\n export interface OptionalProps {\n FooterLabelComponent?: React.ComponentType<unknown>;\n selectedItem?: string | null;\n selectedParent?: string | null;\n disableDefaultSelection?: boolean;\n withoutBodyShadow?: boolean;\n actionRef?: React.RefObject<{ setFocusedItem: React.Dispatch<React.SetStateAction<string | null>> }>;\n HeaderComponent?: GenericItemItemProps;\n BodyHeaderComponent?: GenericItemItemProps;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n XstyledProps {}\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n XstyledProps {}\n\n export type OutOfTheBoxT =\n | 'ds-left-nav-item-header'\n | 'ds-left-nav-item-link'\n | 'ds-left-nav-item-submenu'\n | 'ds-left-nav-item-controlled-drilldown'\n | 'ds-left-nav-item-uncontrolled-drilldown'\n | 'ds-left-nav-item-section'\n | 'ds-left-nav-item-separator'\n | 'ds-left-nav-item-text-label'\n | 'ds-left-nav-item-with-date';\n\n export interface ItemOptsT extends Record<string, unknown> {\n label?: string | JSX.Element;\n labelBold?: boolean;\n labelColor?: [ColorsKey, keyof Theme['colors'][ColorsKey]];\n labelOverflow?: LabelOveflowT;\n labelRightSection?: string | JSX.Element;\n selectable?: boolean;\n focuseable?: boolean;\n startOpened?: boolean;\n isOpened?: boolean;\n openable?: boolean;\n closable?: boolean;\n indent?: number;\n LeftComponent?: React.ComponentType<ComponentProps>;\n RightComponent?: React.ComponentType<ComponentProps>;\n BottomComponent?: React.ComponentType<ComponentProps>;\n ariaLabel?: string;\n ariaRole?: string;\n ariaLive?: string;\n ariaExpanded?: boolean;\n ariaDescribedBy?: string;\n items?: GenericItemItemProps[];\n labelDataTestId?: string;\n skeletonVariant?: 'item' | 'subitem';\n }\n\n export interface ComponentProps {\n item: GenericItemItemProps;\n ctx: ContextProps;\n }\n export interface GenericItemItemProps {\n dsId?: string;\n type?: string;\n CollapsedComponent?: React.ComponentType<ComponentProps> | null;\n Component?: React.ComponentType<ComponentProps>;\n itemOpts: ItemOptsT;\n }\n export interface OutOfTheBoxMapItemT {\n item: GenericItemItemProps;\n }\n export interface ItemRendererT {\n item: GenericItemItemProps;\n subitems?: JSX.Element[];\n minHeight?: string;\n paddingTop?: string;\n onClick?: () => void;\n shadowStyle?: (opened: boolean, type?: string) => (theme: Theme) => string;\n hasBorderBottom?: boolean;\n borderBottomMr?: string;\n children: React.ReactNode;\n }\n}\nexport const leftNavItemProps = {\n type: PropTypes.oneOf(outOfTheBoxTypes).description('out of the box types'),\n dsId: PropTypes.string.description('unique identifier for the left nav item'),\n Component: PropTypes.func.description(\n \"A custom component, receives the item as prop. This is used only when type is not defined or doesn't matches any out-of-the-box\",\n ),\n CollapsedComponent: PropTypes.func.description('A component which is renderer when the left-nav is collapsed'),\n itemOpts: PropTypes.object.description('Item options'),\n};\n\nexport const leftNavigationProps = {\n containerProps: PropTypes.shape({ expandedWidth: PropTypes.string })\n .description('Set of Properties attached to the main container')\n .defaultValue({ expandedWidth: '240px' }),\n expanded: PropTypes.bool.description('Whether to show the left navigation expanded or collapsed').defaultValue(false),\n loading: PropTypes.bool.description('Whether the left-nav is loading').defaultValue(false),\n openedItem: PropTypes.string\n .description('The id of the left navigation item you want to be opened')\n .defaultValue(null),\n footerLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).description(\n 'The label to show in the footer item',\n ),\n FooterLabelComponent: PropTypes.func.description('The component to show in the footer item'),\n onFooterExpand: PropTypes.func.description('The function to call when the left-nav is opened via the footer'),\n onFooterClose: PropTypes.func.description('The function to call when the left-nav is closed via the footer'),\n onSelectedChange: PropTypes.func\n .description('A callback which triggers when the selected item changes')\n .defaultValue(() => null),\n onFocusChange: PropTypes.func\n .description('A callback which triggers when the focused item changes')\n .defaultValue(() => null),\n items: PropTypes.arrayOf(PropTypes.object)\n .description('The array of items you want to render inside the left nav')\n .defaultValue([]),\n disableDefaultSelection: PropTypes.bool\n .description('Whether you do not want to automatically select the first body item')\n .defaultValue(false),\n isSkeleton: PropTypes.bool.description('Whether the component is in skeleton mode').defaultValue(false),\n} as unknown as WeakValidationMap<DSLeftNavigationT.Props>;\n\nconst LeftNavItemProps = () => null;\nLeftNavItemProps.displayName = 'LeftNavItemProps';\nexport const LeftNavItemPropsSchema = describe(LeftNavItemProps);\nLeftNavItemPropsSchema.propTypes = leftNavItemProps;\n\nconst LeftNavItemOptions = () => null;\nLeftNavItemOptions.displayName = 'LeftNavItemOptions';\nexport const LeftNavItemOptionsSchema = describe(LeftNavItemOptions);\nLeftNavItemOptionsSchema.propTypes = leftNavItemProps;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAoC;AAIpC,yBAAiC;AA4G1B,MAAM,mBAAmB;AAAA,EAC9B,MAAM,kCAAU,MAAM,mCAAgB,EAAE,YAAY,sBAAsB;AAAA,EAC1E,MAAM,kCAAU,OAAO,YAAY,yCAAyC;AAAA,EAC5E,WAAW,kCAAU,KAAK;AAAA,IACxB;AAAA,EACF;AAAA,EACA,oBAAoB,kCAAU,KAAK,YAAY,8DAA8D;AAAA,EAC7G,UAAU,kCAAU,OAAO,YAAY,cAAc;AACvD;AAEO,MAAM,sBAAsB;AAAA,EACjC,gBAAgB,kCAAU,MAAM,EAAE,eAAe,kCAAU,OAAO,CAAC,EAChE,YAAY,kDAAkD,EAC9D,aAAa,EAAE,eAAe,QAAQ,CAAC;AAAA,EAC1C,UAAU,kCAAU,KAAK,YAAY,2DAA2D,EAAE,aAAa,KAAK;AAAA,EACpH,SAAS,kCAAU,KAAK,YAAY,iCAAiC,EAAE,aAAa,KAAK;AAAA,EACzF,YAAY,kCAAU,OACnB,YAAY,0DAA0D,EACtE,aAAa,IAAI;AAAA,EACpB,aAAa,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,CAAC,EAAE;AAAA,IACnE;AAAA,EACF;AAAA,EACA,sBAAsB,kCAAU,KAAK,YAAY,0CAA0C;AAAA,EAC3F,gBAAgB,kCAAU,KAAK,YAAY,iEAAiE;AAAA,EAC5G,eAAe,kCAAU,KAAK,YAAY,iEAAiE;AAAA,EAC3G,kBAAkB,kCAAU,KACzB,YAAY,0DAA0D,EACtE,aAAa,MAAM,IAAI;AAAA,EAC1B,eAAe,kCAAU,KACtB,YAAY,yDAAyD,EACrE,aAAa,MAAM,IAAI;AAAA,EAC1B,OAAO,kCAAU,QAAQ,kCAAU,MAAM,EACtC,YAAY,2DAA2D,EACvE,aAAa,CAAC,CAAC;AAAA,EAClB,yBAAyB,kCAAU,KAChC,YAAY,qEAAqE,EACjF,aAAa,KAAK;AAAA,EACrB,YAAY,kCAAU,KAAK,YAAY,2CAA2C,EAAE,aAAa,KAAK;AACxG;AAEA,MAAM,mBAAmB,MAAM;AAC/B,iBAAiB,cAAc;AACxB,MAAM,6BAAyB,kCAAS,gBAAgB;AAC/D,uBAAuB,YAAY;AAEnC,MAAM,qBAAqB,MAAM;AACjC,mBAAmB,cAAc;AAC1B,MAAM,+BAA2B,kCAAS,kBAAkB;AACnE,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -82,7 +82,15 @@ const LeftNavInnerContent = () => {
|
|
|
82
82
|
const LeftNavContent = () => {
|
|
83
83
|
const {
|
|
84
84
|
expandedForAnimation,
|
|
85
|
-
leftNavProps: {
|
|
85
|
+
leftNavProps: {
|
|
86
|
+
expanded,
|
|
87
|
+
expandedWidth,
|
|
88
|
+
FooterLabelComponent,
|
|
89
|
+
footerLabel,
|
|
90
|
+
onFooterExpand,
|
|
91
|
+
onFooterClose,
|
|
92
|
+
loading
|
|
93
|
+
},
|
|
86
94
|
leftNavProps
|
|
87
95
|
} = React2.useContext(LeftNavContext);
|
|
88
96
|
const globalProps = useGetGlobalAttributes(leftNavProps);
|
|
@@ -105,7 +113,15 @@ const LeftNavContent = () => {
|
|
|
105
113
|
children: [
|
|
106
114
|
loading && /* @__PURE__ */ jsx(LeftNavLoading, { expanded: expandedForAnimation }),
|
|
107
115
|
!loading && /* @__PURE__ */ jsx(LeftNavInnerContent, {}),
|
|
108
|
-
/* @__PURE__ */ jsx(
|
|
116
|
+
/* @__PURE__ */ jsx(
|
|
117
|
+
LeftNavFooterItem,
|
|
118
|
+
{
|
|
119
|
+
footerLabel,
|
|
120
|
+
FooterLabelComponent,
|
|
121
|
+
onFooterExpand,
|
|
122
|
+
onFooterClose
|
|
123
|
+
}
|
|
124
|
+
)
|
|
109
125
|
]
|
|
110
126
|
}
|
|
111
127
|
)
|
|
@@ -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-props-helpers';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem/index.js';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem.js';\nimport {\n StyledLeftNavExpandAnimationWrapper,\n StyledLeftNavAreasContainer,\n StyledLeftNavHeaderArea,\n StyledLeftNavBodyAreasContainer,\n StyledLeftNavBodyHeaderArea,\n StyledLeftNavBodyItemsArea,\n} from './styled.js';\nimport { ItemSkeleton } from '../../outOfTheBox/ItemSkeleton/index.js';\nimport { LeftNavLoading } from '../LeftNavLoading/index.js';\nconst leftNavScreenReaderInstructions =\n 'Left Navigation. You can navigate through the items using the Up/Down arrows. ' +\n 'To expand or select an item, use the Enter/Return or Space keys. ' +\n 'Expandable items can also be opened/closed with the Right/Left arrows. ' +\n 'The Home and End keys will take you to the first and last item respectively.';\n\nconst LeftNavInnerContent = () => {\n const {\n leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow, isSkeleton },\n selectedItem,\n } = React.useContext(LeftNavContext);\n return (\n <>\n <StyledLeftNavHeaderArea\n data-testid=\"leftnav-header-area\"\n selected={!!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId as string)}\n role=\"group\"\n >\n {isSkeleton ? (\n <ItemSkeleton item={{ dsId: 'header-skeleton', itemOpts: { skeletonVariant: 'item' } }} hasBorderBottom />\n ) : (\n <> {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}</>\n )}\n </StyledLeftNavHeaderArea>\n <StyledLeftNavBodyAreasContainer cols={['1fr']} rows={['auto', '1fr']} role=\"group\">\n <StyledLeftNavBodyHeaderArea\n data-testid=\"leftnav-body-header-area\"\n selected={!!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId as string)}\n role=\"group\"\n isSkeleton={isSkeleton}\n >\n {isSkeleton ? (\n <ItemSkeleton\n item={{\n dsId: 'body-header-skeleton',\n itemOpts: {\n skeletonVariant: 'item',\n },\n }}\n />\n ) : (\n <>{BodyHeaderComponent ? <OutOfTheBoxMapItem item={BodyHeaderComponent} /> : null}</>\n )}\n </StyledLeftNavBodyHeaderArea>\n <StyledLeftNavBodyItemsArea\n selected={!withoutBodyShadow && openedItem !== null}\n data-testid=\"leftnav-body-items-area\"\n tabIndex={-1}\n role=\"group\"\n isSkeleton={isSkeleton}\n >\n {isSkeleton ? (\n <ItemSkeleton\n item={{\n dsId: 'action-items-skeleton',\n itemOpts: {\n skeletonVariant: 'subitem',\n },\n }}\n />\n ) : (\n <>\n {items.map((item) => (\n <OutOfTheBoxMapItem item={item} key={item.dsId} />\n ))}\n </>\n )}\n </StyledLeftNavBodyItemsArea>\n </StyledLeftNavBodyAreasContainer>\n </>\n );\n};\n\nconst LeftNavContent: React.ComponentType = () => {\n const {\n expandedForAnimation,\n leftNavProps: {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACkCb,SAEA,UAFA,KAEA,YAFA;AAlCV,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,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,MAAM,kCACJ;AAKF,MAAM,sBAAsB,MAAM;AAChC,QAAM;AAAA,IACJ,cAAc,EAAE,iBAAiB,qBAAqB,YAAY,OAAO,mBAAmB,WAAW;AAAA,IACvG;AAAA,EACF,IAAIA,OAAM,WAAW,cAAc;AACnC,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,UAAU,CAAC,CAAC,mBAAmB,CAAC,cAAc,UAAU,EAAE,SAAS,gBAAgB,IAAc;AAAA,QACjG,MAAK;AAAA,QAEJ,uBACC,oBAAC,gBAAa,MAAM,EAAE,MAAM,mBAAmB,UAAU,EAAE,iBAAiB,OAAO,EAAE,GAAG,iBAAe,MAAC,IAExG,iCAAE;AAAA;AAAA,UAAE,kBAAkB,oBAAC,sBAAmB,MAAM,iBAAiB,IAAK;AAAA,WAAK;AAAA;AAAA,IAE/E;AAAA,IACA,qBAAC,mCAAgC,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,QAAQ,KAAK,GAAG,MAAK,SAC1E;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,UAAU,CAAC,CAAC,uBAAuB,CAAC,cAAc,UAAU,EAAE,SAAS,oBAAoB,IAAc;AAAA,UACzG,MAAK;AAAA,UACL;AAAA,UAEC,uBACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,gBACJ,MAAM;AAAA,gBACN,UAAU;AAAA,kBACR,iBAAiB;AAAA,gBACnB;AAAA,cACF;AAAA;AAAA,UACF,IAEA,gCAAG,gCAAsB,oBAAC,sBAAmB,MAAM,qBAAqB,IAAK,MAAK;AAAA;AAAA,MAEtF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,UAAU,CAAC,qBAAqB,eAAe;AAAA,UAC/C,eAAY;AAAA,UACZ,UAAU;AAAA,UACV,MAAK;AAAA,UACL;AAAA,UAEC,uBACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,gBACJ,MAAM;AAAA,gBACN,UAAU;AAAA,kBACR,iBAAiB;AAAA,gBACnB;AAAA,cACF;AAAA;AAAA,UACF,IAEA,gCACG,gBAAM,IAAI,CAAC,SACV,oBAAC,sBAAmB,QAAiB,KAAK,IAAM,CACjD,GACH;AAAA;AAAA,MAEJ;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,MAAM,iBAAsC,MAAM;AAChD,QAAM;AAAA,IACJ;AAAA,IACA,cAAc,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { LeftNavContext } from '../../LeftNavigationContext.js';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem/index.js';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem.js';\nimport {\n StyledLeftNavExpandAnimationWrapper,\n StyledLeftNavAreasContainer,\n StyledLeftNavHeaderArea,\n StyledLeftNavBodyAreasContainer,\n StyledLeftNavBodyHeaderArea,\n StyledLeftNavBodyItemsArea,\n} from './styled.js';\nimport { ItemSkeleton } from '../../outOfTheBox/ItemSkeleton/index.js';\nimport { LeftNavLoading } from '../LeftNavLoading/index.js';\nconst leftNavScreenReaderInstructions =\n 'Left Navigation. You can navigate through the items using the Up/Down arrows. ' +\n 'To expand or select an item, use the Enter/Return or Space keys. ' +\n 'Expandable items can also be opened/closed with the Right/Left arrows. ' +\n 'The Home and End keys will take you to the first and last item respectively.';\n\nconst LeftNavInnerContent = () => {\n const {\n leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow, isSkeleton },\n selectedItem,\n } = React.useContext(LeftNavContext);\n return (\n <>\n <StyledLeftNavHeaderArea\n data-testid=\"leftnav-header-area\"\n selected={!!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId as string)}\n role=\"group\"\n >\n {isSkeleton ? (\n <ItemSkeleton item={{ dsId: 'header-skeleton', itemOpts: { skeletonVariant: 'item' } }} hasBorderBottom />\n ) : (\n <> {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}</>\n )}\n </StyledLeftNavHeaderArea>\n <StyledLeftNavBodyAreasContainer cols={['1fr']} rows={['auto', '1fr']} role=\"group\">\n <StyledLeftNavBodyHeaderArea\n data-testid=\"leftnav-body-header-area\"\n selected={!!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId as string)}\n role=\"group\"\n isSkeleton={isSkeleton}\n >\n {isSkeleton ? (\n <ItemSkeleton\n item={{\n dsId: 'body-header-skeleton',\n itemOpts: {\n skeletonVariant: 'item',\n },\n }}\n />\n ) : (\n <>{BodyHeaderComponent ? <OutOfTheBoxMapItem item={BodyHeaderComponent} /> : null}</>\n )}\n </StyledLeftNavBodyHeaderArea>\n <StyledLeftNavBodyItemsArea\n selected={!withoutBodyShadow && openedItem !== null}\n data-testid=\"leftnav-body-items-area\"\n tabIndex={-1}\n role=\"group\"\n isSkeleton={isSkeleton}\n >\n {isSkeleton ? (\n <ItemSkeleton\n item={{\n dsId: 'action-items-skeleton',\n itemOpts: {\n skeletonVariant: 'subitem',\n },\n }}\n />\n ) : (\n <>\n {items.map((item) => (\n <OutOfTheBoxMapItem item={item} key={item.dsId} />\n ))}\n </>\n )}\n </StyledLeftNavBodyItemsArea>\n </StyledLeftNavBodyAreasContainer>\n </>\n );\n};\n\nconst LeftNavContent: React.ComponentType = () => {\n const {\n expandedForAnimation,\n leftNavProps: {\n expanded,\n expandedWidth,\n FooterLabelComponent,\n footerLabel,\n onFooterExpand,\n onFooterClose,\n loading,\n },\n leftNavProps,\n } = React.useContext(LeftNavContext);\n\n const globalProps = useGetGlobalAttributes(leftNavProps);\n\n return (\n <StyledLeftNavExpandAnimationWrapper\n expandedWidth={expandedWidth}\n expanded={expanded}\n data-testid=\"leftnav-component\"\n aria-label={leftNavScreenReaderInstructions}\n {...globalProps}\n >\n <StyledLeftNavAreasContainer\n expandedWidth={expandedWidth}\n expanded={expandedForAnimation}\n rows={loading ? ['1fr', 'auto'] : ['auto', '1fr', 'auto']}\n cols={['1fr']}\n role={'menu'}\n >\n {loading && <LeftNavLoading expanded={expandedForAnimation} />}\n {!loading && <LeftNavInnerContent />}\n <LeftNavFooterItem\n footerLabel={footerLabel}\n FooterLabelComponent={FooterLabelComponent}\n onFooterExpand={onFooterExpand}\n onFooterClose={onFooterClose}\n />\n </StyledLeftNavAreasContainer>\n </StyledLeftNavExpandAnimationWrapper>\n );\n};\n\nexport default LeftNavContent;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useContext, useCallback } from "react";
|
|
3
|
+
import { useContext, useCallback, useMemo } from "react";
|
|
4
4
|
import { MenuExpand, MenuCollapse } from "@elliemae/ds-icons";
|
|
5
5
|
import { DSSkeleton } from "@elliemae/ds-skeleton";
|
|
6
6
|
import { Grid } from "@elliemae/ds-grid";
|
|
@@ -16,7 +16,7 @@ import { useKeyboardNavigation } from "../../hooks/index.js";
|
|
|
16
16
|
import LeftNavigationContext from "../../LeftNavigationContext.js";
|
|
17
17
|
import { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from "../../exported-related/constants.js";
|
|
18
18
|
const LeftNavFooterItem = (props) => {
|
|
19
|
-
const { footerLabel, onFooterExpand = () => null, onFooterClose = () => null } = props;
|
|
19
|
+
const { footerLabel, FooterLabelComponent, onFooterExpand = () => null, onFooterClose = () => null } = props;
|
|
20
20
|
const {
|
|
21
21
|
leftNavProps: { labelOverflow, isSkeleton },
|
|
22
22
|
expandedForAnimation,
|
|
@@ -43,6 +43,15 @@ const LeftNavFooterItem = (props) => {
|
|
|
43
43
|
},
|
|
44
44
|
[handleOnClick]
|
|
45
45
|
);
|
|
46
|
+
const label = useMemo(() => {
|
|
47
|
+
if (FooterLabelComponent) {
|
|
48
|
+
return /* @__PURE__ */ jsx(FooterLabelComponent, {});
|
|
49
|
+
}
|
|
50
|
+
if (labelOverflow === "truncate") {
|
|
51
|
+
return /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: footerLabel, placement: "bottom-start" });
|
|
52
|
+
}
|
|
53
|
+
return footerLabel;
|
|
54
|
+
}, [footerLabel, FooterLabelComponent, labelOverflow]);
|
|
46
55
|
if (isSkeleton) {
|
|
47
56
|
return /* @__PURE__ */ jsx(StyledFooterMenu, { "data-testid": "leftnav-container", children: /* @__PURE__ */ jsx(Grid, { height: "48px", justifyContent: "center", alignItems: "center", cols: ["1fr"], p: "xxs", children: /* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", height: "24px" }) }) }, id);
|
|
48
57
|
}
|
|
@@ -73,7 +82,7 @@ const LeftNavFooterItem = (props) => {
|
|
|
73
82
|
"data-testid": "leftnav-itemlabel",
|
|
74
83
|
labelOverflow,
|
|
75
84
|
"aria-live": "polite",
|
|
76
|
-
children:
|
|
85
|
+
children: label
|
|
77
86
|
}
|
|
78
87
|
),
|
|
79
88
|
/* @__PURE__ */ jsx(StyledFooterSeparator, { mt: "xxxs" }),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/LeftNavFooterItem/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext, useCallback } from 'react';\nimport { MenuExpand, MenuCollapse } from '@elliemae/ds-icons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { Grid } from '@elliemae/ds-grid';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport {\n StyledFooterMenu,\n StyledFooterItem,\n StyledFooterLabel,\n StyledFooterSeparator,\n StyledMenuCollapse,\n} from './styled.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\nimport LeftNavigationContext from '../../LeftNavigationContext.js';\nimport { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../../exported-related/constants.js';\n\ntype LeftNavFooterItemProps = {\n footerLabel: string
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport { MenuExpand, MenuCollapse } from '@elliemae/ds-icons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { Grid } from '@elliemae/ds-grid';\n\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport {\n StyledFooterMenu,\n StyledFooterItem,\n StyledFooterLabel,\n StyledFooterSeparator,\n StyledMenuCollapse,\n} from './styled.js';\nimport { useKeyboardNavigation } from '../../hooks/index.js';\nimport LeftNavigationContext from '../../LeftNavigationContext.js';\nimport { FOOTER_DS_ID, FOOTER_MENU_CLOSE_DS_ID } from '../../exported-related/constants.js';\n\ntype LeftNavFooterItemProps = {\n footerLabel: string;\n FooterLabelComponent?: React.ComponentType<unknown>;\n onFooterExpand: React.MouseEventHandler & React.KeyboardEventHandler;\n onFooterClose: React.MouseEventHandler & React.KeyboardEventHandler;\n};\n\n// eslint-disable-next-line complexity\nexport const LeftNavFooterItem: React.ComponentType<LeftNavFooterItemProps> = (props) => {\n const { footerLabel, FooterLabelComponent, onFooterExpand = () => null, onFooterClose = () => null } = props;\n const {\n leftNavProps: { labelOverflow, isSkeleton },\n expandedForAnimation,\n setFocusedItem,\n visibleItemsRefs,\n } = useContext(LeftNavigationContext);\n\n const id = FOOTER_DS_ID;\n\n const handleOnClick = expandedForAnimation ? onFooterClose : onFooterExpand;\n\n const onKeyDown = useKeyboardNavigation({\n item: {\n dsId: id,\n itemOpts: {\n selectable: !expandedForAnimation,\n openable: false,\n closable: false,\n },\n },\n onClick: handleOnClick,\n });\n\n const handleMenuCollapseClick = useCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n handleOnClick(e as React.MouseEvent<HTMLButtonElement, MouseEvent>);\n },\n [handleOnClick],\n );\n\n const label = useMemo(() => {\n if (FooterLabelComponent) {\n return <FooterLabelComponent />;\n }\n if (labelOverflow === 'truncate') {\n return <SimpleTruncatedTooltipText value={footerLabel} placement=\"bottom-start\" />;\n }\n return footerLabel;\n }, [footerLabel, FooterLabelComponent, labelOverflow]);\n\n if (isSkeleton) {\n return (\n <StyledFooterMenu key={id} data-testid=\"leftnav-container\">\n <Grid height=\"48px\" justifyContent=\"center\" alignItems=\"center\" cols={['1fr']} p=\"xxs\">\n <DSSkeleton variant=\"rectangular\" height=\"24px\" />\n </Grid>\n </StyledFooterMenu>\n );\n }\n\n return (\n <StyledFooterMenu key={id} data-testid=\"leftnav-container\">\n <StyledFooterItem\n ref={visibleItemsRefs.current[id]}\n tabIndex={expandedForAnimation ? -1 : 0}\n expanded={expandedForAnimation}\n pt=\"xxs2\"\n height={expandedForAnimation ? 'auto' : '48px'}\n alignItems=\"flex-start\"\n pl=\"xxs2\"\n cols={expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']}\n onClick={expandedForAnimation ? () => null : handleOnClick}\n onKeyDown={onKeyDown}\n onFocus={() => setFocusedItem(id)}\n data-testid=\"leftnav-item-container\"\n role=\"menuitem\"\n aria-label={\n expandedForAnimation\n ? `Footer, ${typeof footerLabel === 'string' ? footerLabel : ''}`\n : `Expand left navigation`\n }\n >\n {!expandedForAnimation ? (\n <MenuExpand size=\"m\" color={['brand-primary', '800']} data-testid=\"leftnav-footer-btn\" />\n ) : (\n <>\n <StyledFooterLabel\n mt=\"5px\"\n mr=\"12px\"\n mb=\"16px\"\n data-testid=\"leftnav-itemlabel\"\n labelOverflow={labelOverflow}\n aria-live=\"polite\"\n >\n {label}\n </StyledFooterLabel>\n <StyledFooterSeparator mt=\"xxxs\" />\n <StyledMenuCollapse\n buttonType=\"raw\"\n onClick={handleMenuCollapseClick}\n data-testid=\"leftnav-footer-btn\"\n tabIndex={0}\n onFocus={(e: React.FocusEvent) => {\n e.stopPropagation();\n setFocusedItem(FOOTER_MENU_CLOSE_DS_ID);\n }}\n role=\"button\"\n aria-label=\"Collapse left navigation\"\n >\n <MenuCollapse size=\"m\" color={['brand-primary', '800']} />\n </StyledMenuCollapse>\n </>\n )}\n </StyledFooterItem>\n </StyledFooterMenu>\n );\n};\n\nexport default LeftNavFooterItem;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC6DV,SA2CH,UA3CG,KA2CH,YA3CG;AA5Db,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,YAAY,oBAAoB;AACzC,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAErB,SAAS,kCAAkC;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,OAAO,2BAA2B;AAClC,SAAS,cAAc,+BAA+B;AAU/C,MAAM,oBAAiE,CAAC,UAAU;AACvF,QAAM,EAAE,aAAa,sBAAsB,iBAAiB,MAAM,MAAM,gBAAgB,MAAM,KAAK,IAAI;AACvG,QAAM;AAAA,IACJ,cAAc,EAAE,eAAe,WAAW;AAAA,IAC1C;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,KAAK;AAEX,QAAM,gBAAgB,uBAAuB,gBAAgB;AAE7D,QAAM,YAAY,sBAAsB;AAAA,IACtC,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,QACR,YAAY,CAAC;AAAA,QACb,UAAU;AAAA,QACV,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,0BAA0B;AAAA,IAC9B,CAAC,MAAgG;AAC/F,QAAE,gBAAgB;AAClB,oBAAc,CAAoD;AAAA,IACpE;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,QAAQ,QAAQ,MAAM;AAC1B,QAAI,sBAAsB;AACxB,aAAO,oBAAC,wBAAqB;AAAA,IAC/B;AACA,QAAI,kBAAkB,YAAY;AAChC,aAAO,oBAAC,8BAA2B,OAAO,aAAa,WAAU,gBAAe;AAAA,IAClF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,sBAAsB,aAAa,CAAC;AAErD,MAAI,YAAY;AACd,WACE,oBAAC,oBAA0B,eAAY,qBACrC,8BAAC,QAAK,QAAO,QAAO,gBAAe,UAAS,YAAW,UAAS,MAAM,CAAC,KAAK,GAAG,GAAE,OAC/E,8BAAC,cAAW,SAAQ,eAAc,QAAO,QAAO,GAClD,KAHqB,EAIvB;AAAA,EAEJ;AAEA,SACE,oBAAC,oBAA0B,eAAY,qBACrC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,iBAAiB,QAAQ,EAAE;AAAA,MAChC,UAAU,uBAAuB,KAAK;AAAA,MACtC,UAAU;AAAA,MACV,IAAG;AAAA,MACH,QAAQ,uBAAuB,SAAS;AAAA,MACxC,YAAW;AAAA,MACX,IAAG;AAAA,MACH,MAAM,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM;AAAA,MAC9D,SAAS,uBAAuB,MAAM,OAAO;AAAA,MAC7C;AAAA,MACA,SAAS,MAAM,eAAe,EAAE;AAAA,MAChC,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,cACE,uBACI,WAAW,OAAO,gBAAgB,WAAW,cAAc,OAC3D;AAAA,MAGL,WAAC,uBACA,oBAAC,cAAW,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,eAAY,sBAAqB,IAEvF,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH,eAAY;AAAA,YACZ;AAAA,YACA,aAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA,QACA,oBAAC,yBAAsB,IAAG,QAAO;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,SAAS;AAAA,YACT,eAAY;AAAA,YACZ,UAAU;AAAA,YACV,SAAS,CAAC,MAAwB;AAChC,gBAAE,gBAAgB;AAClB,6BAAe,uBAAuB;AAAA,YACxC;AAAA,YACA,MAAK;AAAA,YACL,cAAW;AAAA,YAEX,8BAAC,gBAAa,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,QAC1D;AAAA,SACF;AAAA;AAAA,EAEJ,KApDqB,EAqDvB;AAEJ;AAEA,IAAO,4BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,7 @@ const leftNavigationProps = {
|
|
|
18
18
|
footerLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).description(
|
|
19
19
|
"The label to show in the footer item"
|
|
20
20
|
),
|
|
21
|
+
FooterLabelComponent: PropTypes.func.description("The component to show in the footer item"),
|
|
21
22
|
onFooterExpand: PropTypes.func.description("The function to call when the left-nav is opened via the footer"),
|
|
22
23
|
onFooterClose: PropTypes.func.description("The function to call when the left-nav is closed via the footer"),
|
|
23
24
|
onSelectedChange: PropTypes.func.description("A callback which triggers when the selected item changes").defaultValue(() => null),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { type Theme } from '@elliemae/ds-system';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\n\nimport { outOfTheBoxTypes } from './outOfTheBox/index.js';\nimport type { ContextProps } from './LeftNavigationContext.js';\n\ntype ColorsKey = keyof Theme['colors'];\n\nexport declare namespace DSLeftNavigationT {\n export type LabelOveflowT = 'wrap' | 'wrapAll' | 'truncate';\n\n export interface DefaultProps {\n expanded: boolean;\n expandedWidth: string;\n openedItem: string | null;\n items: GenericItemItemProps[];\n footerLabel: string
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,gBAAgB;AAIpC,SAAS,wBAAwB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { type Theme } from '@elliemae/ds-system';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\n\nimport { outOfTheBoxTypes } from './outOfTheBox/index.js';\nimport type { ContextProps } from './LeftNavigationContext.js';\n\ntype ColorsKey = keyof Theme['colors'];\n\nexport declare namespace DSLeftNavigationT {\n export type LabelOveflowT = 'wrap' | 'wrapAll' | 'truncate';\n\n export interface DefaultProps {\n expanded: boolean;\n expandedWidth: string;\n openedItem: string | null;\n items: GenericItemItemProps[];\n footerLabel: string;\n labelOverflow: LabelOveflowT;\n onSelectedChange: (item: string | null) => void;\n onFocusChange: (item: string | null) => void;\n onFooterExpand: () => void;\n onFooterClose: () => void;\n onItemClick: (item: GenericItemItemProps, e: React.MouseEvent<HTMLElement>) => void;\n loading: boolean;\n isSkeleton: boolean;\n }\n export interface OptionalProps {\n FooterLabelComponent?: React.ComponentType<unknown>;\n selectedItem?: string | null;\n selectedParent?: string | null;\n disableDefaultSelection?: boolean;\n withoutBodyShadow?: boolean;\n actionRef?: React.RefObject<{ setFocusedItem: React.Dispatch<React.SetStateAction<string | null>> }>;\n HeaderComponent?: GenericItemItemProps;\n BodyHeaderComponent?: GenericItemItemProps;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n XstyledProps {}\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n XstyledProps {}\n\n export type OutOfTheBoxT =\n | 'ds-left-nav-item-header'\n | 'ds-left-nav-item-link'\n | 'ds-left-nav-item-submenu'\n | 'ds-left-nav-item-controlled-drilldown'\n | 'ds-left-nav-item-uncontrolled-drilldown'\n | 'ds-left-nav-item-section'\n | 'ds-left-nav-item-separator'\n | 'ds-left-nav-item-text-label'\n | 'ds-left-nav-item-with-date';\n\n export interface ItemOptsT extends Record<string, unknown> {\n label?: string | JSX.Element;\n labelBold?: boolean;\n labelColor?: [ColorsKey, keyof Theme['colors'][ColorsKey]];\n labelOverflow?: LabelOveflowT;\n labelRightSection?: string | JSX.Element;\n selectable?: boolean;\n focuseable?: boolean;\n startOpened?: boolean;\n isOpened?: boolean;\n openable?: boolean;\n closable?: boolean;\n indent?: number;\n LeftComponent?: React.ComponentType<ComponentProps>;\n RightComponent?: React.ComponentType<ComponentProps>;\n BottomComponent?: React.ComponentType<ComponentProps>;\n ariaLabel?: string;\n ariaRole?: string;\n ariaLive?: string;\n ariaExpanded?: boolean;\n ariaDescribedBy?: string;\n items?: GenericItemItemProps[];\n labelDataTestId?: string;\n skeletonVariant?: 'item' | 'subitem';\n }\n\n export interface ComponentProps {\n item: GenericItemItemProps;\n ctx: ContextProps;\n }\n export interface GenericItemItemProps {\n dsId?: string;\n type?: string;\n CollapsedComponent?: React.ComponentType<ComponentProps> | null;\n Component?: React.ComponentType<ComponentProps>;\n itemOpts: ItemOptsT;\n }\n export interface OutOfTheBoxMapItemT {\n item: GenericItemItemProps;\n }\n export interface ItemRendererT {\n item: GenericItemItemProps;\n subitems?: JSX.Element[];\n minHeight?: string;\n paddingTop?: string;\n onClick?: () => void;\n shadowStyle?: (opened: boolean, type?: string) => (theme: Theme) => string;\n hasBorderBottom?: boolean;\n borderBottomMr?: string;\n children: React.ReactNode;\n }\n}\nexport const leftNavItemProps = {\n type: PropTypes.oneOf(outOfTheBoxTypes).description('out of the box types'),\n dsId: PropTypes.string.description('unique identifier for the left nav item'),\n Component: PropTypes.func.description(\n \"A custom component, receives the item as prop. This is used only when type is not defined or doesn't matches any out-of-the-box\",\n ),\n CollapsedComponent: PropTypes.func.description('A component which is renderer when the left-nav is collapsed'),\n itemOpts: PropTypes.object.description('Item options'),\n};\n\nexport const leftNavigationProps = {\n containerProps: PropTypes.shape({ expandedWidth: PropTypes.string })\n .description('Set of Properties attached to the main container')\n .defaultValue({ expandedWidth: '240px' }),\n expanded: PropTypes.bool.description('Whether to show the left navigation expanded or collapsed').defaultValue(false),\n loading: PropTypes.bool.description('Whether the left-nav is loading').defaultValue(false),\n openedItem: PropTypes.string\n .description('The id of the left navigation item you want to be opened')\n .defaultValue(null),\n footerLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).description(\n 'The label to show in the footer item',\n ),\n FooterLabelComponent: PropTypes.func.description('The component to show in the footer item'),\n onFooterExpand: PropTypes.func.description('The function to call when the left-nav is opened via the footer'),\n onFooterClose: PropTypes.func.description('The function to call when the left-nav is closed via the footer'),\n onSelectedChange: PropTypes.func\n .description('A callback which triggers when the selected item changes')\n .defaultValue(() => null),\n onFocusChange: PropTypes.func\n .description('A callback which triggers when the focused item changes')\n .defaultValue(() => null),\n items: PropTypes.arrayOf(PropTypes.object)\n .description('The array of items you want to render inside the left nav')\n .defaultValue([]),\n disableDefaultSelection: PropTypes.bool\n .description('Whether you do not want to automatically select the first body item')\n .defaultValue(false),\n isSkeleton: PropTypes.bool.description('Whether the component is in skeleton mode').defaultValue(false),\n} as unknown as WeakValidationMap<DSLeftNavigationT.Props>;\n\nconst LeftNavItemProps = () => null;\nLeftNavItemProps.displayName = 'LeftNavItemProps';\nexport const LeftNavItemPropsSchema = describe(LeftNavItemProps);\nLeftNavItemPropsSchema.propTypes = leftNavItemProps;\n\nconst LeftNavItemOptions = () => null;\nLeftNavItemOptions.displayName = 'LeftNavItemOptions';\nexport const LeftNavItemOptionsSchema = describe(LeftNavItemOptions);\nLeftNavItemOptionsSchema.propTypes = leftNavItemProps;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,gBAAgB;AAIpC,SAAS,wBAAwB;AA4G1B,MAAM,mBAAmB;AAAA,EAC9B,MAAM,UAAU,MAAM,gBAAgB,EAAE,YAAY,sBAAsB;AAAA,EAC1E,MAAM,UAAU,OAAO,YAAY,yCAAyC;AAAA,EAC5E,WAAW,UAAU,KAAK;AAAA,IACxB;AAAA,EACF;AAAA,EACA,oBAAoB,UAAU,KAAK,YAAY,8DAA8D;AAAA,EAC7G,UAAU,UAAU,OAAO,YAAY,cAAc;AACvD;AAEO,MAAM,sBAAsB;AAAA,EACjC,gBAAgB,UAAU,MAAM,EAAE,eAAe,UAAU,OAAO,CAAC,EAChE,YAAY,kDAAkD,EAC9D,aAAa,EAAE,eAAe,QAAQ,CAAC;AAAA,EAC1C,UAAU,UAAU,KAAK,YAAY,2DAA2D,EAAE,aAAa,KAAK;AAAA,EACpH,SAAS,UAAU,KAAK,YAAY,iCAAiC,EAAE,aAAa,KAAK;AAAA,EACzF,YAAY,UAAU,OACnB,YAAY,0DAA0D,EACtE,aAAa,IAAI;AAAA,EACpB,aAAa,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE;AAAA,IACnE;AAAA,EACF;AAAA,EACA,sBAAsB,UAAU,KAAK,YAAY,0CAA0C;AAAA,EAC3F,gBAAgB,UAAU,KAAK,YAAY,iEAAiE;AAAA,EAC5G,eAAe,UAAU,KAAK,YAAY,iEAAiE;AAAA,EAC3G,kBAAkB,UAAU,KACzB,YAAY,0DAA0D,EACtE,aAAa,MAAM,IAAI;AAAA,EAC1B,eAAe,UAAU,KACtB,YAAY,yDAAyD,EACrE,aAAa,MAAM,IAAI;AAAA,EAC1B,OAAO,UAAU,QAAQ,UAAU,MAAM,EACtC,YAAY,2DAA2D,EACvE,aAAa,CAAC,CAAC;AAAA,EAClB,yBAAyB,UAAU,KAChC,YAAY,qEAAqE,EACjF,aAAa,KAAK;AAAA,EACrB,YAAY,UAAU,KAAK,YAAY,2CAA2C,EAAE,aAAa,KAAK;AACxG;AAEA,MAAM,mBAAmB,MAAM;AAC/B,iBAAiB,cAAc;AACxB,MAAM,yBAAyB,SAAS,gBAAgB;AAC/D,uBAAuB,YAAY;AAEnC,MAAM,qBAAqB,MAAM;AACjC,mBAAmB,cAAc;AAC1B,MAAM,2BAA2B,SAAS,kBAAkB;AACnE,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
type LeftNavFooterItemProps = {
|
|
3
|
-
footerLabel: string
|
|
3
|
+
footerLabel: string;
|
|
4
|
+
FooterLabelComponent?: React.ComponentType<unknown>;
|
|
4
5
|
onFooterExpand: React.MouseEventHandler & React.KeyboardEventHandler;
|
|
5
6
|
onFooterClose: React.MouseEventHandler & React.KeyboardEventHandler;
|
|
6
7
|
};
|
|
@@ -10,7 +10,7 @@ export declare namespace DSLeftNavigationT {
|
|
|
10
10
|
expandedWidth: string;
|
|
11
11
|
openedItem: string | null;
|
|
12
12
|
items: GenericItemItemProps[];
|
|
13
|
-
footerLabel: string
|
|
13
|
+
footerLabel: string;
|
|
14
14
|
labelOverflow: LabelOveflowT;
|
|
15
15
|
onSelectedChange: (item: string | null) => void;
|
|
16
16
|
onFocusChange: (item: string | null) => void;
|
|
@@ -21,6 +21,7 @@ export declare namespace DSLeftNavigationT {
|
|
|
21
21
|
isSkeleton: boolean;
|
|
22
22
|
}
|
|
23
23
|
interface OptionalProps {
|
|
24
|
+
FooterLabelComponent?: React.ComponentType<unknown>;
|
|
24
25
|
selectedItem?: string | null;
|
|
25
26
|
selectedParent?: string | null;
|
|
26
27
|
disableDefaultSelection?: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-left-navigation",
|
|
3
|
-
"version": "3.22.0-rc.
|
|
3
|
+
"version": "3.22.0-rc.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Left Navigation",
|
|
6
6
|
"files": [
|
|
@@ -235,14 +235,14 @@
|
|
|
235
235
|
"typeSafety": false
|
|
236
236
|
},
|
|
237
237
|
"dependencies": {
|
|
238
|
-
"@elliemae/ds-button-v2": "3.22.0-rc.
|
|
239
|
-
"@elliemae/ds-
|
|
240
|
-
"@elliemae/ds-
|
|
241
|
-
"@elliemae/ds-
|
|
242
|
-
"@elliemae/ds-
|
|
243
|
-
"@elliemae/ds-
|
|
244
|
-
"@elliemae/ds-
|
|
245
|
-
"@elliemae/ds-
|
|
238
|
+
"@elliemae/ds-button-v2": "3.22.0-rc.2",
|
|
239
|
+
"@elliemae/ds-circular-progress-indicator": "3.22.0-rc.2",
|
|
240
|
+
"@elliemae/ds-grid": "3.22.0-rc.2",
|
|
241
|
+
"@elliemae/ds-icons": "3.22.0-rc.2",
|
|
242
|
+
"@elliemae/ds-props-helpers": "3.22.0-rc.2",
|
|
243
|
+
"@elliemae/ds-skeleton": "3.22.0-rc.2",
|
|
244
|
+
"@elliemae/ds-system": "3.22.0-rc.2",
|
|
245
|
+
"@elliemae/ds-truncated-tooltip-text": "3.22.0-rc.2"
|
|
246
246
|
},
|
|
247
247
|
"devDependencies": {
|
|
248
248
|
"@elliemae/pui-cli": "~9.0.0-next.22",
|
|
@@ -251,7 +251,7 @@
|
|
|
251
251
|
"@testing-library/user-event": "~13.5.0",
|
|
252
252
|
"jest-axe": "^7.0.1",
|
|
253
253
|
"styled-components": "~5.3.9",
|
|
254
|
-
"@elliemae/ds-monorepo-devops": "3.22.0-rc.
|
|
254
|
+
"@elliemae/ds-monorepo-devops": "3.22.0-rc.2"
|
|
255
255
|
},
|
|
256
256
|
"peerDependencies": {
|
|
257
257
|
"lodash": "^4.17.21",
|