@elliemae/ds-left-navigation 3.16.0-next.1 → 3.16.0-next.3
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/LeftNavigation.js +2 -2
- package/dist/cjs/LeftNavigation.js.map +2 -2
- package/dist/cjs/exported-related/ItemRenderer/index.js.map +2 -2
- package/dist/cjs/parts/LeftNavContent/index.js +2 -2
- package/dist/cjs/parts/LeftNavContent/index.js.map +2 -2
- package/dist/cjs/prop-types.js +19 -19
- package/dist/cjs/prop-types.js.map +2 -2
- package/dist/esm/LeftNavigation.js +1 -1
- package/dist/esm/LeftNavigation.js.map +1 -1
- package/dist/esm/exported-related/ItemRenderer/index.js.map +2 -2
- package/dist/esm/parts/LeftNavContent/index.js +1 -1
- package/dist/esm/parts/LeftNavContent/index.js.map +1 -1
- package/dist/esm/prop-types.js +1 -1
- package/dist/esm/prop-types.js.map +1 -1
- package/dist/types/LeftNavigation.d.ts +12 -12
- package/dist/types/prop-types.d.ts +18 -18
- package/package.json +9 -8
|
@@ -30,7 +30,7 @@ __export(LeftNavigation_exports, {
|
|
|
30
30
|
module.exports = __toCommonJS(LeftNavigation_exports);
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
|
-
var
|
|
33
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
34
34
|
var import_prop_types = require("./prop-types");
|
|
35
35
|
var import_LeftNavigationContext = __toESM(require("./LeftNavigationContext"));
|
|
36
36
|
var import_useLeftNavConfig = require("./configs/useLeftNavConfig");
|
|
@@ -42,6 +42,6 @@ const LeftNavigation = (props) => {
|
|
|
42
42
|
LeftNavigation.propTypes = import_prop_types.leftNavigationProps;
|
|
43
43
|
LeftNavigation.defaultProps = import_LeftNavigationContext.defaultProps;
|
|
44
44
|
LeftNavigation.displayName = "LeftNavigation";
|
|
45
|
-
const LeftNavigationWithSchema = (0,
|
|
45
|
+
const LeftNavigationWithSchema = (0, import_ds_props_helpers.describe)(LeftNavigation).description("Left Navigation");
|
|
46
46
|
LeftNavigationWithSchema.propTypes = import_prop_types.leftNavigationProps;
|
|
47
47
|
//# sourceMappingURL=LeftNavigation.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/LeftNavigation.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADajB;AAZN,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { leftNavigationProps } from './prop-types';\nimport LeftNavigationContext, { defaultProps } from './LeftNavigationContext';\nimport { useLeftNavConfig } from './configs/useLeftNavConfig';\nimport LeftNavContent from './parts/LeftNavContent';\nimport type { LeftNavProps } from './index.d';\n\nexport const LeftNavigation = (props: LeftNavProps): JSX.Element => {\n const leftNavConfig = useLeftNavConfig(props);\n\n return (\n <LeftNavigationContext.Provider value={leftNavConfig}>\n <LeftNavContent />\n </LeftNavigationContext.Provider>\n );\n};\n\nLeftNavigation.propTypes = leftNavigationProps;\nLeftNavigation.defaultProps = defaultProps;\nLeftNavigation.displayName = 'LeftNavigation';\nexport const LeftNavigationWithSchema = describe(LeftNavigation).description('Left Navigation');\nLeftNavigationWithSchema.propTypes = leftNavigationProps;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADajB;AAZN,8BAAyB;AACzB,wBAAoC;AACpC,mCAAoD;AACpD,8BAAiC;AACjC,4BAA2B;AAGpB,MAAM,iBAAiB,CAAC,UAAqC;AAClE,QAAM,oBAAgB,0CAAiB,KAAK;AAE5C,SACE,4CAAC,6BAAAA,QAAsB,UAAtB,EAA+B,OAAO,eACrC,sDAAC,sBAAAC,SAAA,EAAe,GAClB;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,eAAe;AAC9B,eAAe,cAAc;AACtB,MAAM,+BAA2B,kCAAS,cAAc,EAAE,YAAY,iBAAiB;AAC9F,yBAAyB,YAAY;",
|
|
6
6
|
"names": ["LeftNavigationContext", "LeftNavContent"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/ItemRenderer/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { StyledItem, StyledCollapsedContainer, StyledBorderBottom } from './styled';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { StyledItem, StyledCollapsedContainer, StyledBorderBottom } from './styled';\nimport type { ItemRendererT } from '../../index.d';\nimport { LeftNavContext } from '../../LeftNavigationContext';\nimport { usePropsWithDefaults } from './usePropsWithDefaults';\nimport { useKeyboardNavigation } from '../../hooks';\n\nexport const ItemRenderer: React.ComponentType<ItemRendererT> = (props) => {\n const propsWithDefault = usePropsWithDefaults(props);\n const {\n item,\n item: {\n dsId,\n itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaLive, ariaExpanded, ariaDescribedBy },\n CollapsedComponent,\n },\n subitems,\n minHeight,\n paddingTop,\n onClick,\n shadowStyle,\n hasBorderBottom,\n borderBottomMr,\n children,\n } = propsWithDefault;\n\n const ctx = useContext(LeftNavContext);\n const {\n leftNavProps: { onItemClick, openedItem },\n expandedForAnimation,\n selectedParent,\n selectedItem,\n setSelectedItem,\n setFocusedItem,\n visibleItemsRefs,\n } = ctx;\n\n const opened = dsId === openedItem;\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n if (onClick) onClick(); // used by uncontrolled drilldowns\n onItemClick(item, e);\n if (selectable) setSelectedItem(item.dsId as string);\n },\n [onItemClick, item, setSelectedItem, selectable, onClick],\n );\n\n const handleFocus = useCallback(() => {\n if (focuseable) setFocusedItem(dsId as string);\n }, [dsId, setFocusedItem, focuseable]);\n\n const onKeyDown = useKeyboardNavigation({\n item,\n onClick: handleOnClick,\n });\n\n const cols = useMemo(() => (expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']), [expandedForAnimation]);\n const isSelected = useMemo(() => selectedItem === dsId, [selectedItem, dsId]);\n\n if (!expandedForAnimation && !CollapsedComponent) {\n return null;\n }\n\n return (\n <>\n <StyledItem\n ref={visibleItemsRefs.current[dsId]}\n pt={paddingTop}\n pl={indent === undefined ? 'xxxs' : `${indent}px`}\n minHeight={minHeight}\n shadowStyle={shadowStyle(opened, item.type)}\n alignItems=\"flex-start\"\n cols={cols}\n onClick={!opened ? handleOnClick : () => null}\n onKeyDown={onKeyDown}\n selectable={selectable}\n selected={isSelected}\n selectedParent={selectedParent === dsId}\n opened={opened}\n onFocus={handleFocus}\n data-testid=\"leftnav-item-container\"\n tabIndex={focuseable ? 0 : -1}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n role={ariaRole}\n data-selected={isSelected}\n data-selectedparent={selectedParent === dsId}\n data-opened={opened}\n data-type={item.type}\n aria-label={ariaLabel}\n aria-live={ariaLive}\n >\n {!expandedForAnimation ? (\n <StyledCollapsedContainer data-testid=\"leftnav-leftcomponent\" justifyContent=\"center\">\n {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n </StyledCollapsedContainer>\n ) : (\n children\n )}\n {hasBorderBottom && <StyledBorderBottom opened={opened} borderBottomMr={borderBottomMr} />}\n </StyledItem>\n {subitems}\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmEnB;AAjEJ,mBAAwD;AACxD,oBAAyE;AAEzE,mCAA+B;AAC/B,kCAAqC;AACrC,mBAAsC;AAE/B,MAAM,eAAmD,CAAC,UAAU;AACzE,QAAM,uBAAmB,kDAAqB,KAAK;AACnD,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,YAAY,YAAY,QAAQ,WAAW,UAAU,UAAU,cAAc,gBAAgB;AAAA,MACzG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,UAAM,yBAAW,2CAAc;AACrC,QAAM;AAAA,IACJ,cAAc,EAAE,aAAa,WAAW;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,SAAS;AAExB,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAqC;AACpC,UAAI;AAAS,gBAAQ;AACrB,kBAAY,MAAM,CAAC;AACnB,UAAI;AAAY,wBAAgB,KAAK,IAAc;AAAA,IACrD;AAAA,IACA,CAAC,aAAa,MAAM,iBAAiB,YAAY,OAAO;AAAA,EAC1D;AAEA,QAAM,kBAAc,0BAAY,MAAM;AACpC,QAAI;AAAY,qBAAe,IAAc;AAAA,EAC/C,GAAG,CAAC,MAAM,gBAAgB,UAAU,CAAC;AAErC,QAAM,gBAAY,oCAAsB;AAAA,IACtC;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,WAAO,sBAAQ,MAAO,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM,GAAI,CAAC,oBAAoB,CAAC;AAC9G,QAAM,iBAAa,sBAAQ,MAAM,iBAAiB,MAAM,CAAC,cAAc,IAAI,CAAC;AAE5E,MAAI,CAAC,wBAAwB,CAAC,oBAAoB;AAChD,WAAO;AAAA,EACT;AAEA,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,iBAAiB,QAAQ;AAAA,QAC9B,IAAI;AAAA,QACJ,IAAI,WAAW,SAAY,SAAS,GAAG;AAAA,QACvC;AAAA,QACA,aAAa,YAAY,QAAQ,KAAK,IAAI;AAAA,QAC1C,YAAW;AAAA,QACX;AAAA,QACA,SAAS,CAAC,SAAS,gBAAgB,MAAM;AAAA,QACzC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,gBAAgB,mBAAmB;AAAA,QACnC;AAAA,QACA,SAAS;AAAA,QACT,eAAY;AAAA,QACZ,UAAU,aAAa,IAAI;AAAA,QAC3B,oBAAkB;AAAA,QAClB,iBAAe;AAAA,QACf,MAAM;AAAA,QACN,iBAAe;AAAA,QACf,uBAAqB,mBAAmB;AAAA,QACxC,eAAa;AAAA,QACb,aAAW,KAAK;AAAA,QAChB,cAAY;AAAA,QACZ,aAAW;AAAA,QAEV;AAAA,WAAC,uBACA,4CAAC,0CAAyB,eAAY,yBAAwB,gBAAe,UAC1E,gCAAsB,4CAAC,sBAAmB,MAAY,KAAU,GACnE,IAEA;AAAA,UAED,mBAAmB,4CAAC,oCAAmB,QAAgB,gBAAgC;AAAA;AAAA;AAAA,IAC1F;AAAA,IACC;AAAA,KACH;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -30,7 +30,7 @@ module.exports = __toCommonJS(LeftNavContent_exports);
|
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
31
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
32
|
var import_react = __toESM(require("react"));
|
|
33
|
-
var
|
|
33
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
34
34
|
var import_LeftNavigationContext = require("../../LeftNavigationContext");
|
|
35
35
|
var import_LeftNavFooterItem = require("../LeftNavFooterItem");
|
|
36
36
|
var import_OutOfTheBoxMapItem = require("../OutOfTheBoxMapItem");
|
|
@@ -78,7 +78,7 @@ const LeftNavContent = () => {
|
|
|
78
78
|
leftNavProps: { expanded, expandedWidth, footerLabel, onFooterExpand, onFooterClose, loading },
|
|
79
79
|
leftNavProps
|
|
80
80
|
} = import_react.default.useContext(import_LeftNavigationContext.LeftNavContext);
|
|
81
|
-
const globalProps = (0,
|
|
81
|
+
const globalProps = (0, import_ds_props_helpers.useGetGlobalAttributes)(leftNavProps);
|
|
82
82
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
83
83
|
import_styled.StyledLeftNavExpandAnimationWrapper,
|
|
84
84
|
{
|
|
@@ -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-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4BnB;AA5BJ,mBAAkB;AAClB,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { LeftNavContext } from '../../LeftNavigationContext';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem';\nimport {\n StyledLeftNavExpandAnimationWrapper,\n StyledLeftNavAreasContainer,\n StyledLeftNavHeaderArea,\n StyledLeftNavBodyAreasContainer,\n StyledLeftNavBodyHeaderArea,\n StyledLeftNavBodyItemsArea,\n StyledLeftNavContentWithScrollbar,\n} from './styled';\nimport { LeftNavLoading } from '../LeftNavLoading';\n\nconst leftNavScreenReaderInstructions =\n 'Left Navigation. You can navigate through the items using the Up/Down arrows. ' +\n 'To expand or select an item, use the Enter/Return or Space keys. ' +\n 'Expandable items can also be opened/closed with the Right/Left arrows. ' +\n 'The Home and End keys will take you to the first and last item respectively.';\n\nconst LeftNavInnerContent = () => {\n const {\n leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow },\n selectedItem,\n } = React.useContext(LeftNavContext);\n return (\n <>\n <StyledLeftNavHeaderArea\n data-testid=\"leftnav-header-area\"\n selected={!!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId as string)}\n >\n {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}\n </StyledLeftNavHeaderArea>\n <StyledLeftNavBodyAreasContainer cols={['1fr']} rows={['auto', '1fr']}>\n <StyledLeftNavBodyHeaderArea\n data-testid=\"leftnav-body-header-area\"\n selected={!!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId as string)}\n >\n {BodyHeaderComponent ? <OutOfTheBoxMapItem item={BodyHeaderComponent} /> : null}\n </StyledLeftNavBodyHeaderArea>\n <StyledLeftNavBodyItemsArea\n selected={!withoutBodyShadow && openedItem !== null}\n data-testid=\"leftnav-body-items-area\"\n tabIndex={-1}\n >\n {items.map((item) => (\n <OutOfTheBoxMapItem item={item} key={item.dsId} />\n ))}\n </StyledLeftNavBodyItemsArea>\n </StyledLeftNavBodyAreasContainer>\n </>\n );\n};\n\nconst LeftNavContent: React.ComponentType = () => {\n const {\n expandedForAnimation,\n leftNavProps: { expanded, expandedWidth, footerLabel, onFooterExpand, onFooterClose, loading },\n leftNavProps,\n } = React.useContext(LeftNavContext);\n\n const globalProps = useGetGlobalAttributes(leftNavProps);\n\n return (\n <StyledLeftNavExpandAnimationWrapper\n expandedWidth={expandedWidth}\n expanded={expanded}\n data-testid=\"leftnav-component\"\n aria-label={leftNavScreenReaderInstructions}\n role=\"menu\"\n {...globalProps}\n >\n <StyledLeftNavAreasContainer\n expandedWidth={expandedWidth}\n expanded={expandedForAnimation}\n rows={['auto', '1fr', 'auto']}\n cols={['1fr']}\n >\n {loading && <LeftNavLoading expanded={expandedForAnimation} />}\n {!loading && <LeftNavInnerContent />}\n <LeftNavFooterItem footerLabel={footerLabel} onFooterExpand={onFooterExpand} onFooterClose={onFooterClose} />\n </StyledLeftNavAreasContainer>\n </StyledLeftNavExpandAnimationWrapper>\n );\n};\n\nexport default LeftNavContent;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4BnB;AA5BJ,mBAAkB;AAClB,8BAAuC;AACvC,mCAA+B;AAC/B,+BAAkC;AAClC,gCAAmC;AACnC,oBAQO;AACP,4BAA+B;AAE/B,MAAM,kCACJ;AAKF,MAAM,sBAAsB,MAAM;AAChC,QAAM;AAAA,IACJ,cAAc,EAAE,iBAAiB,qBAAqB,YAAY,OAAO,kBAAkB;AAAA,IAC3F;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,2CAAc;AACnC,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,UAAU,CAAC,CAAC,mBAAmB,CAAC,cAAc,UAAU,EAAE,SAAS,gBAAgB,IAAc;AAAA,QAEhG,4BAAkB,4CAAC,gDAAmB,MAAM,iBAAiB,IAAK;AAAA;AAAA,IACrE;AAAA,IACA,6CAAC,iDAAgC,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,QAAQ,KAAK,GAClE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,UAAU,CAAC,CAAC,uBAAuB,CAAC,cAAc,UAAU,EAAE,SAAS,oBAAoB,IAAc;AAAA,UAExG,gCAAsB,4CAAC,gDAAmB,MAAM,qBAAqB,IAAK;AAAA;AAAA,MAC7E;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,UAAU,CAAC,qBAAqB,eAAe;AAAA,UAC/C,eAAY;AAAA,UACZ,UAAU;AAAA,UAET,gBAAM,IAAI,CAAC,SACV,4CAAC,gDAAmB,QAAiB,KAAK,IAAM,CACjD;AAAA;AAAA,MACH;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,MAAM,iBAAsC,MAAM;AAChD,QAAM;AAAA,IACJ;AAAA,IACA,cAAc,EAAE,UAAU,eAAe,aAAa,gBAAgB,eAAe,QAAQ;AAAA,IAC7F;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,2CAAc;AAEnC,QAAM,kBAAc,gDAAuB,YAAY;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAY;AAAA,MACZ,cAAY;AAAA,MACZ,MAAK;AAAA,MACJ,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,UAAU;AAAA,UACV,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,UAC5B,MAAM,CAAC,KAAK;AAAA,UAEX;AAAA,uBAAW,4CAAC,wCAAe,UAAU,sBAAsB;AAAA,YAC3D,CAAC,WAAW,4CAAC,uBAAoB;AAAA,YAClC,4CAAC,8CAAkB,aAA0B,gBAAgC,eAA8B;AAAA;AAAA;AAAA,MAC7G;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,yBAAQ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/cjs/prop-types.js
CHANGED
|
@@ -31,36 +31,36 @@ __export(prop_types_exports, {
|
|
|
31
31
|
});
|
|
32
32
|
module.exports = __toCommonJS(prop_types_exports);
|
|
33
33
|
var React = __toESM(require("react"));
|
|
34
|
-
var
|
|
34
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
35
35
|
var import_outOfTheBox = require("./outOfTheBox");
|
|
36
36
|
const leftNavItemProps = {
|
|
37
|
-
type:
|
|
38
|
-
dsId:
|
|
39
|
-
Component:
|
|
37
|
+
type: import_ds_props_helpers.PropTypes.oneOf(import_outOfTheBox.outOfTheBoxTypes).description("out of the box types"),
|
|
38
|
+
dsId: import_ds_props_helpers.PropTypes.string.description("unique identifier for the left nav item"),
|
|
39
|
+
Component: import_ds_props_helpers.PropTypes.func.description(
|
|
40
40
|
"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"
|
|
41
41
|
),
|
|
42
|
-
CollapsedComponent:
|
|
43
|
-
itemOpts:
|
|
42
|
+
CollapsedComponent: import_ds_props_helpers.PropTypes.func.description("A component which is renderer when the left-nav is collapsed"),
|
|
43
|
+
itemOpts: import_ds_props_helpers.PropTypes.object.description("Item options")
|
|
44
44
|
};
|
|
45
45
|
const leftNavigationProps = {
|
|
46
|
-
containerProps:
|
|
47
|
-
expanded:
|
|
48
|
-
loading:
|
|
49
|
-
openedItem:
|
|
50
|
-
footerLabel:
|
|
51
|
-
onFooterExpand:
|
|
52
|
-
onFooterClose:
|
|
53
|
-
onSelectedChange:
|
|
54
|
-
onFocusChange:
|
|
55
|
-
items:
|
|
56
|
-
disableDefaultSelection:
|
|
46
|
+
containerProps: import_ds_props_helpers.PropTypes.shape({ expandedWidth: import_ds_props_helpers.PropTypes.string }).description("Set of Properties attached to the main container").defaultValue({ expandedWidth: "240px" }),
|
|
47
|
+
expanded: import_ds_props_helpers.PropTypes.bool.description("Whether to show the left navigation expanded or collapsed").defaultValue(false),
|
|
48
|
+
loading: import_ds_props_helpers.PropTypes.bool.description("Whether the left-nav is loading").defaultValue(false),
|
|
49
|
+
openedItem: import_ds_props_helpers.PropTypes.string.description("The id of the left navigation item you want to be opened").defaultValue(null),
|
|
50
|
+
footerLabel: import_ds_props_helpers.PropTypes.string.description("The label to show in the footer item"),
|
|
51
|
+
onFooterExpand: import_ds_props_helpers.PropTypes.func.description("The function to call when the left-nav is opened via the footer"),
|
|
52
|
+
onFooterClose: import_ds_props_helpers.PropTypes.func.description("The function to call when the left-nav is closed via the footer"),
|
|
53
|
+
onSelectedChange: import_ds_props_helpers.PropTypes.func.description("A callback which triggers when the selected item changes").defaultValue(() => null),
|
|
54
|
+
onFocusChange: import_ds_props_helpers.PropTypes.func.description("A callback which triggers when the focused item changes").defaultValue(() => null),
|
|
55
|
+
items: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.object).description("The array of items you want to render inside the left nav").defaultValue([]),
|
|
56
|
+
disableDefaultSelection: import_ds_props_helpers.PropTypes.bool.description("Whether you do not want to automatically select the first body item").defaultValue(false)
|
|
57
57
|
};
|
|
58
58
|
const LeftNavItemProps = () => null;
|
|
59
59
|
LeftNavItemProps.displayName = "LeftNavItemProps";
|
|
60
|
-
const LeftNavItemPropsSchema = (0,
|
|
60
|
+
const LeftNavItemPropsSchema = (0, import_ds_props_helpers.describe)(LeftNavItemProps);
|
|
61
61
|
LeftNavItemPropsSchema.propTypes = leftNavItemProps;
|
|
62
62
|
const LeftNavItemOptions = () => null;
|
|
63
63
|
LeftNavItemOptions.displayName = "LeftNavItemOptions";
|
|
64
|
-
const LeftNavItemOptionsSchema = (0,
|
|
64
|
+
const LeftNavItemOptionsSchema = (0, import_ds_props_helpers.describe)(LeftNavItemOptions);
|
|
65
65
|
LeftNavItemOptionsSchema.propTypes = leftNavItemProps;
|
|
66
66
|
//# sourceMappingURL=prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { PropTypes, describe } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { outOfTheBoxTypes } from './outOfTheBox';\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.string.description('The label 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};\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;ADAvB,8BAAoC;AACpC,yBAAiC;AAE1B,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,OAAO,YAAY,sCAAsC;AAAA,EAChF,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;AACvB;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
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { describe } from "@elliemae/ds-
|
|
3
|
+
import { describe } from "@elliemae/ds-props-helpers";
|
|
4
4
|
import { leftNavigationProps } from "./prop-types";
|
|
5
5
|
import LeftNavigationContext, { defaultProps } from "./LeftNavigationContext";
|
|
6
6
|
import { useLeftNavConfig } from "./configs/useLeftNavConfig";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/LeftNavigation.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { leftNavigationProps } from './prop-types';\nimport LeftNavigationContext, { defaultProps } from './LeftNavigationContext';\nimport { useLeftNavConfig } from './configs/useLeftNavConfig';\nimport LeftNavContent from './parts/LeftNavContent';\nimport type { LeftNavProps } from './index.d';\n\nexport const LeftNavigation = (props: LeftNavProps): JSX.Element => {\n const leftNavConfig = useLeftNavConfig(props);\n\n return (\n <LeftNavigationContext.Provider value={leftNavConfig}>\n <LeftNavContent />\n </LeftNavigationContext.Provider>\n );\n};\n\nLeftNavigation.propTypes = leftNavigationProps;\nLeftNavigation.defaultProps = defaultProps;\nLeftNavigation.displayName = 'LeftNavigation';\nexport const LeftNavigationWithSchema = describe(LeftNavigation).description('Left Navigation');\nLeftNavigationWithSchema.propTypes = leftNavigationProps;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACajB;AAZN,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;AACpC,OAAO,yBAAyB,oBAAoB;AACpD,SAAS,wBAAwB;AACjC,OAAO,oBAAoB;AAGpB,MAAM,iBAAiB,CAAC,UAAqC;AAClE,QAAM,gBAAgB,iBAAiB,KAAK;AAE5C,SACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,eACrC,8BAAC,kBAAe,GAClB;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,eAAe;AAC9B,eAAe,cAAc;AACtB,MAAM,2BAA2B,SAAS,cAAc,EAAE,YAAY,iBAAiB;AAC9F,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/ItemRenderer/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { StyledItem, StyledCollapsedContainer, StyledBorderBottom } from './styled';\
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { StyledItem, StyledCollapsedContainer, StyledBorderBottom } from './styled';\nimport type { ItemRendererT } from '../../index.d';\nimport { LeftNavContext } from '../../LeftNavigationContext';\nimport { usePropsWithDefaults } from './usePropsWithDefaults';\nimport { useKeyboardNavigation } from '../../hooks';\n\nexport const ItemRenderer: React.ComponentType<ItemRendererT> = (props) => {\n const propsWithDefault = usePropsWithDefaults(props);\n const {\n item,\n item: {\n dsId,\n itemOpts: { selectable, focuseable, indent, ariaLabel, ariaRole, ariaLive, ariaExpanded, ariaDescribedBy },\n CollapsedComponent,\n },\n subitems,\n minHeight,\n paddingTop,\n onClick,\n shadowStyle,\n hasBorderBottom,\n borderBottomMr,\n children,\n } = propsWithDefault;\n\n const ctx = useContext(LeftNavContext);\n const {\n leftNavProps: { onItemClick, openedItem },\n expandedForAnimation,\n selectedParent,\n selectedItem,\n setSelectedItem,\n setFocusedItem,\n visibleItemsRefs,\n } = ctx;\n\n const opened = dsId === openedItem;\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n if (onClick) onClick(); // used by uncontrolled drilldowns\n onItemClick(item, e);\n if (selectable) setSelectedItem(item.dsId as string);\n },\n [onItemClick, item, setSelectedItem, selectable, onClick],\n );\n\n const handleFocus = useCallback(() => {\n if (focuseable) setFocusedItem(dsId as string);\n }, [dsId, setFocusedItem, focuseable]);\n\n const onKeyDown = useKeyboardNavigation({\n item,\n onClick: handleOnClick,\n });\n\n const cols = useMemo(() => (expandedForAnimation ? ['auto', '1fr', 'auto'] : ['38px']), [expandedForAnimation]);\n const isSelected = useMemo(() => selectedItem === dsId, [selectedItem, dsId]);\n\n if (!expandedForAnimation && !CollapsedComponent) {\n return null;\n }\n\n return (\n <>\n <StyledItem\n ref={visibleItemsRefs.current[dsId]}\n pt={paddingTop}\n pl={indent === undefined ? 'xxxs' : `${indent}px`}\n minHeight={minHeight}\n shadowStyle={shadowStyle(opened, item.type)}\n alignItems=\"flex-start\"\n cols={cols}\n onClick={!opened ? handleOnClick : () => null}\n onKeyDown={onKeyDown}\n selectable={selectable}\n selected={isSelected}\n selectedParent={selectedParent === dsId}\n opened={opened}\n onFocus={handleFocus}\n data-testid=\"leftnav-item-container\"\n tabIndex={focuseable ? 0 : -1}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n role={ariaRole}\n data-selected={isSelected}\n data-selectedparent={selectedParent === dsId}\n data-opened={opened}\n data-type={item.type}\n aria-label={ariaLabel}\n aria-live={ariaLive}\n >\n {!expandedForAnimation ? (\n <StyledCollapsedContainer data-testid=\"leftnav-leftcomponent\" justifyContent=\"center\">\n {CollapsedComponent && <CollapsedComponent item={item} ctx={ctx} />}\n </StyledCollapsedContainer>\n ) : (\n children\n )}\n {hasBorderBottom && <StyledBorderBottom opened={opened} borderBottomMr={borderBottomMr} />}\n </StyledItem>\n {subitems}\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACmEnB,mBA8B+B,KA7B7B,YADF;AAjEJ,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,YAAY,0BAA0B,0BAA0B;AAEzE,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AAE/B,MAAM,eAAmD,CAAC,UAAU;AACzE,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,MACA,UAAU,EAAE,YAAY,YAAY,QAAQ,WAAW,UAAU,UAAU,cAAc,gBAAgB;AAAA,MACzG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,WAAW,cAAc;AACrC,QAAM;AAAA,IACJ,cAAc,EAAE,aAAa,WAAW;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,SAAS;AAExB,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAqC;AACpC,UAAI;AAAS,gBAAQ;AACrB,kBAAY,MAAM,CAAC;AACnB,UAAI;AAAY,wBAAgB,KAAK,IAAc;AAAA,IACrD;AAAA,IACA,CAAC,aAAa,MAAM,iBAAiB,YAAY,OAAO;AAAA,EAC1D;AAEA,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI;AAAY,qBAAe,IAAc;AAAA,EAC/C,GAAG,CAAC,MAAM,gBAAgB,UAAU,CAAC;AAErC,QAAM,YAAY,sBAAsB;AAAA,IACtC;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,OAAO,QAAQ,MAAO,uBAAuB,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC,MAAM,GAAI,CAAC,oBAAoB,CAAC;AAC9G,QAAM,aAAa,QAAQ,MAAM,iBAAiB,MAAM,CAAC,cAAc,IAAI,CAAC;AAE5E,MAAI,CAAC,wBAAwB,CAAC,oBAAoB;AAChD,WAAO;AAAA,EACT;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,iBAAiB,QAAQ;AAAA,QAC9B,IAAI;AAAA,QACJ,IAAI,WAAW,SAAY,SAAS,GAAG;AAAA,QACvC;AAAA,QACA,aAAa,YAAY,QAAQ,KAAK,IAAI;AAAA,QAC1C,YAAW;AAAA,QACX;AAAA,QACA,SAAS,CAAC,SAAS,gBAAgB,MAAM;AAAA,QACzC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,gBAAgB,mBAAmB;AAAA,QACnC;AAAA,QACA,SAAS;AAAA,QACT,eAAY;AAAA,QACZ,UAAU,aAAa,IAAI;AAAA,QAC3B,oBAAkB;AAAA,QAClB,iBAAe;AAAA,QACf,MAAM;AAAA,QACN,iBAAe;AAAA,QACf,uBAAqB,mBAAmB;AAAA,QACxC,eAAa;AAAA,QACb,aAAW,KAAK;AAAA,QAChB,cAAY;AAAA,QACZ,aAAW;AAAA,QAEV;AAAA,WAAC,uBACA,oBAAC,4BAAyB,eAAY,yBAAwB,gBAAe,UAC1E,gCAAsB,oBAAC,sBAAmB,MAAY,KAAU,GACnE,IAEA;AAAA,UAED,mBAAmB,oBAAC,sBAAmB,QAAgB,gBAAgC;AAAA;AAAA;AAAA,IAC1F;AAAA,IACC;AAAA,KACH;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import React2 from "react";
|
|
4
|
-
import { useGetGlobalAttributes } from "@elliemae/ds-
|
|
4
|
+
import { useGetGlobalAttributes } from "@elliemae/ds-props-helpers";
|
|
5
5
|
import { LeftNavContext } from "../../LeftNavigationContext";
|
|
6
6
|
import { LeftNavFooterItem } from "../LeftNavFooterItem";
|
|
7
7
|
import { OutOfTheBoxMapItem } from "../OutOfTheBoxMapItem";
|
|
@@ -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-
|
|
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';\nimport { LeftNavFooterItem } from '../LeftNavFooterItem';\nimport { OutOfTheBoxMapItem } from '../OutOfTheBoxMapItem';\nimport {\n StyledLeftNavExpandAnimationWrapper,\n StyledLeftNavAreasContainer,\n StyledLeftNavHeaderArea,\n StyledLeftNavBodyAreasContainer,\n StyledLeftNavBodyHeaderArea,\n StyledLeftNavBodyItemsArea,\n StyledLeftNavContentWithScrollbar,\n} from './styled';\nimport { LeftNavLoading } from '../LeftNavLoading';\n\nconst leftNavScreenReaderInstructions =\n 'Left Navigation. You can navigate through the items using the Up/Down arrows. ' +\n 'To expand or select an item, use the Enter/Return or Space keys. ' +\n 'Expandable items can also be opened/closed with the Right/Left arrows. ' +\n 'The Home and End keys will take you to the first and last item respectively.';\n\nconst LeftNavInnerContent = () => {\n const {\n leftNavProps: { HeaderComponent, BodyHeaderComponent, openedItem, items, withoutBodyShadow },\n selectedItem,\n } = React.useContext(LeftNavContext);\n return (\n <>\n <StyledLeftNavHeaderArea\n data-testid=\"leftnav-header-area\"\n selected={!!HeaderComponent && [selectedItem, openedItem].includes(HeaderComponent.dsId as string)}\n >\n {HeaderComponent ? <OutOfTheBoxMapItem item={HeaderComponent} /> : null}\n </StyledLeftNavHeaderArea>\n <StyledLeftNavBodyAreasContainer cols={['1fr']} rows={['auto', '1fr']}>\n <StyledLeftNavBodyHeaderArea\n data-testid=\"leftnav-body-header-area\"\n selected={!!BodyHeaderComponent && [selectedItem, openedItem].includes(BodyHeaderComponent.dsId as string)}\n >\n {BodyHeaderComponent ? <OutOfTheBoxMapItem item={BodyHeaderComponent} /> : null}\n </StyledLeftNavBodyHeaderArea>\n <StyledLeftNavBodyItemsArea\n selected={!withoutBodyShadow && openedItem !== null}\n data-testid=\"leftnav-body-items-area\"\n tabIndex={-1}\n >\n {items.map((item) => (\n <OutOfTheBoxMapItem item={item} key={item.dsId} />\n ))}\n </StyledLeftNavBodyItemsArea>\n </StyledLeftNavBodyAreasContainer>\n </>\n );\n};\n\nconst LeftNavContent: React.ComponentType = () => {\n const {\n expandedForAnimation,\n leftNavProps: { expanded, expandedWidth, footerLabel, onFooterExpand, onFooterClose, loading },\n leftNavProps,\n } = React.useContext(LeftNavContext);\n\n const globalProps = useGetGlobalAttributes(leftNavProps);\n\n return (\n <StyledLeftNavExpandAnimationWrapper\n expandedWidth={expandedWidth}\n expanded={expanded}\n data-testid=\"leftnav-component\"\n aria-label={leftNavScreenReaderInstructions}\n role=\"menu\"\n {...globalProps}\n >\n <StyledLeftNavAreasContainer\n expandedWidth={expandedWidth}\n expanded={expandedForAnimation}\n rows={['auto', '1fr', 'auto']}\n cols={['1fr']}\n >\n {loading && <LeftNavLoading expanded={expandedForAnimation} />}\n {!loading && <LeftNavInnerContent />}\n <LeftNavFooterItem footerLabel={footerLabel} onFooterExpand={onFooterExpand} onFooterClose={onFooterClose} />\n </StyledLeftNavAreasContainer>\n </StyledLeftNavExpandAnimationWrapper>\n );\n};\n\nexport default LeftNavContent;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;AC4BnB,mBAKuB,KAErB,YAPF;AA5BJ,OAAOA,YAAW;AAClB,SAAS,8BAA8B;AACvC,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,sBAAsB;AAE/B,MAAM,kCACJ;AAKF,MAAM,sBAAsB,MAAM;AAChC,QAAM;AAAA,IACJ,cAAc,EAAE,iBAAiB,qBAAqB,YAAY,OAAO,kBAAkB;AAAA,IAC3F;AAAA,EACF,IAAIA,OAAM,WAAW,cAAc;AACnC,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,UAAU,CAAC,CAAC,mBAAmB,CAAC,cAAc,UAAU,EAAE,SAAS,gBAAgB,IAAc;AAAA,QAEhG,4BAAkB,oBAAC,sBAAmB,MAAM,iBAAiB,IAAK;AAAA;AAAA,IACrE;AAAA,IACA,qBAAC,mCAAgC,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,QAAQ,KAAK,GAClE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,UAAU,CAAC,CAAC,uBAAuB,CAAC,cAAc,UAAU,EAAE,SAAS,oBAAoB,IAAc;AAAA,UAExG,gCAAsB,oBAAC,sBAAmB,MAAM,qBAAqB,IAAK;AAAA;AAAA,MAC7E;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,UAAU,CAAC,qBAAqB,eAAe;AAAA,UAC/C,eAAY;AAAA,UACZ,UAAU;AAAA,UAET,gBAAM,IAAI,CAAC,SACV,oBAAC,sBAAmB,QAAiB,KAAK,IAAM,CACjD;AAAA;AAAA,MACH;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,MAAM,iBAAsC,MAAM;AAChD,QAAM;AAAA,IACJ;AAAA,IACA,cAAc,EAAE,UAAU,eAAe,aAAa,gBAAgB,eAAe,QAAQ;AAAA,IAC7F;AAAA,EACF,IAAIA,OAAM,WAAW,cAAc;AAEnC,QAAM,cAAc,uBAAuB,YAAY;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAY;AAAA,MACZ,cAAY;AAAA,MACZ,MAAK;AAAA,MACJ,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,UAAU;AAAA,UACV,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,UAC5B,MAAM,CAAC,KAAK;AAAA,UAEX;AAAA,uBAAW,oBAAC,kBAAe,UAAU,sBAAsB;AAAA,YAC3D,CAAC,WAAW,oBAAC,uBAAoB;AAAA,YAClC,oBAAC,qBAAkB,aAA0B,gBAAgC,eAA8B;AAAA;AAAA;AAAA,MAC7G;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,yBAAQ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/esm/prop-types.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { PropTypes, describe } from "@elliemae/ds-
|
|
2
|
+
import { PropTypes, describe } from "@elliemae/ds-props-helpers";
|
|
3
3
|
import { outOfTheBoxTypes } from "./outOfTheBox";
|
|
4
4
|
const leftNavItemProps = {
|
|
5
5
|
type: PropTypes.oneOf(outOfTheBoxTypes).description("out of the box types"),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, describe } from '@elliemae/ds-
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { outOfTheBoxTypes } from './outOfTheBox';\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.string.description('The label 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};\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
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,gBAAgB;AACpC,SAAS,wBAAwB;AAE1B,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,OAAO,YAAY,sCAAsC;AAAA,EAChF,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;AACvB;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
|
}
|
|
@@ -2,19 +2,19 @@ import type { LeftNavProps } from './index.d';
|
|
|
2
2
|
export declare const LeftNavigation: {
|
|
3
3
|
(props: LeftNavProps): JSX.Element;
|
|
4
4
|
propTypes: {
|
|
5
|
-
containerProps: import("@elliemae/ds-
|
|
6
|
-
expanded: import("@elliemae/ds-
|
|
7
|
-
loading: import("@elliemae/ds-
|
|
8
|
-
openedItem: import("@elliemae/ds-
|
|
9
|
-
footerLabel: import("@elliemae/ds-
|
|
10
|
-
onFooterExpand: import("@elliemae/ds-
|
|
11
|
-
onFooterClose: import("@elliemae/ds-
|
|
12
|
-
onSelectedChange: import("@elliemae/ds-
|
|
13
|
-
onFocusChange: import("@elliemae/ds-
|
|
14
|
-
items: import("@elliemae/ds-
|
|
15
|
-
disableDefaultSelection: import("@elliemae/ds-
|
|
5
|
+
containerProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
6
|
+
expanded: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
7
|
+
loading: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
8
|
+
openedItem: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
9
|
+
footerLabel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
10
|
+
onFooterExpand: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
11
|
+
onFooterClose: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
12
|
+
onSelectedChange: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
13
|
+
onFocusChange: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
14
|
+
items: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
15
|
+
disableDefaultSelection: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
16
16
|
};
|
|
17
17
|
defaultProps: LeftNavProps;
|
|
18
18
|
displayName: string;
|
|
19
19
|
};
|
|
20
|
-
export declare const LeftNavigationWithSchema: import("@elliemae/ds-
|
|
20
|
+
export declare const LeftNavigationWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<LeftNavProps>;
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
export declare const leftNavItemProps: {
|
|
2
|
-
type: import("@elliemae/ds-
|
|
3
|
-
dsId: import("@elliemae/ds-
|
|
4
|
-
Component: import("@elliemae/ds-
|
|
5
|
-
CollapsedComponent: import("@elliemae/ds-
|
|
6
|
-
itemOpts: import("@elliemae/ds-
|
|
2
|
+
type: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
3
|
+
dsId: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
4
|
+
Component: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
5
|
+
CollapsedComponent: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
6
|
+
itemOpts: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
7
7
|
};
|
|
8
8
|
export declare const leftNavigationProps: {
|
|
9
|
-
containerProps: import("@elliemae/ds-
|
|
10
|
-
expanded: import("@elliemae/ds-
|
|
11
|
-
loading: import("@elliemae/ds-
|
|
12
|
-
openedItem: import("@elliemae/ds-
|
|
13
|
-
footerLabel: import("@elliemae/ds-
|
|
14
|
-
onFooterExpand: import("@elliemae/ds-
|
|
15
|
-
onFooterClose: import("@elliemae/ds-
|
|
16
|
-
onSelectedChange: import("@elliemae/ds-
|
|
17
|
-
onFocusChange: import("@elliemae/ds-
|
|
18
|
-
items: import("@elliemae/ds-
|
|
19
|
-
disableDefaultSelection: import("@elliemae/ds-
|
|
9
|
+
containerProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
10
|
+
expanded: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
11
|
+
loading: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
12
|
+
openedItem: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
13
|
+
footerLabel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
14
|
+
onFooterExpand: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
15
|
+
onFooterClose: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
16
|
+
onSelectedChange: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
17
|
+
onFocusChange: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
18
|
+
items: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
19
|
+
disableDefaultSelection: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
20
20
|
};
|
|
21
|
-
export declare const LeftNavItemPropsSchema: import("@elliemae/ds-
|
|
22
|
-
export declare const LeftNavItemOptionsSchema: import("@elliemae/ds-
|
|
21
|
+
export declare const LeftNavItemPropsSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<unknown>;
|
|
22
|
+
export declare const LeftNavItemOptionsSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<unknown>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-left-navigation",
|
|
3
|
-
"version": "3.16.0-next.
|
|
3
|
+
"version": "3.16.0-next.3",
|
|
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.16.0-next.
|
|
239
|
-
"@elliemae/ds-
|
|
240
|
-
"@elliemae/ds-
|
|
241
|
-
"@elliemae/ds-
|
|
242
|
-
"@elliemae/ds-
|
|
243
|
-
"@elliemae/ds-
|
|
238
|
+
"@elliemae/ds-circular-progress-indicator": "3.16.0-next.3",
|
|
239
|
+
"@elliemae/ds-grid": "3.16.0-next.3",
|
|
240
|
+
"@elliemae/ds-icons": "3.16.0-next.3",
|
|
241
|
+
"@elliemae/ds-props-helpers": "3.16.0-next.3",
|
|
242
|
+
"@elliemae/ds-system": "3.16.0-next.3",
|
|
243
|
+
"@elliemae/ds-truncated-tooltip-text": "3.16.0-next.3",
|
|
244
|
+
"@elliemae/ds-utilities": "3.16.0-next.3"
|
|
244
245
|
},
|
|
245
246
|
"devDependencies": {
|
|
246
247
|
"@testing-library/react": "~12.1.3",
|
|
@@ -260,7 +261,7 @@
|
|
|
260
261
|
"dts": "node ../../scripts/dts.mjs",
|
|
261
262
|
"dev": "node ../../scripts/build/build.js -w",
|
|
262
263
|
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
263
|
-
"dev:build": "pnpm --filter {.}... build
|
|
264
|
+
"dev:build": "pnpm --filter {.}... build",
|
|
264
265
|
"dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
|
|
265
266
|
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
266
267
|
}
|