@elliemae/ds-left-navigation-tree 3.80.0-next.58 → 3.80.0-next.60
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/Footer.js +5 -2
- package/dist/cjs/parts/Footer.js.map +2 -2
- package/dist/cjs/parts/Header.js +2 -1
- package/dist/cjs/parts/Header.js.map +2 -2
- package/dist/cjs/parts/MainContent.js +4 -2
- package/dist/cjs/parts/MainContent.js.map +2 -2
- package/dist/cjs/parts/TreeContext.js.map +2 -2
- package/dist/esm/parts/Footer.js +5 -2
- package/dist/esm/parts/Footer.js.map +2 -2
- package/dist/esm/parts/Header.js +2 -1
- package/dist/esm/parts/Header.js.map +2 -2
- package/dist/esm/parts/MainContent.js +4 -2
- package/dist/esm/parts/MainContent.js.map +2 -2
- package/dist/esm/parts/TreeContext.js.map +2 -2
- package/dist/types/parts/TreeContext.d.ts +2 -0
- package/package.json +11 -11
package/dist/cjs/parts/Footer.js
CHANGED
|
@@ -41,8 +41,9 @@ var import_useFocusTracker = require("../config/useFocusTracker.js");
|
|
|
41
41
|
var import_useTreeModel = require("../config/useTreeModel.js");
|
|
42
42
|
var import_styled = require("./styled.js");
|
|
43
43
|
const ICON_COLOR = ["brand-primary", "600"];
|
|
44
|
+
const FOOTER_TOGGLE_LABEL = "Show/hide details";
|
|
44
45
|
const Footer = () => {
|
|
45
|
-
const { model, getOwnerProps } = (0, import_react.useContext)(import_TreeContext.TreeContext);
|
|
46
|
+
const { model, getOwnerProps, rootId } = (0, import_react.useContext)(import_TreeContext.TreeContext);
|
|
46
47
|
const footerLabel = (0, import_store.usePropsStore)((state) => state.footerLabel);
|
|
47
48
|
const onFooterExpand = (0, import_store.usePropsStore)((state) => state.onFooterExpand);
|
|
48
49
|
const onFooterClose = (0, import_store.usePropsStore)((state) => state.onFooterClose);
|
|
@@ -70,7 +71,9 @@ const Footer = () => {
|
|
|
70
71
|
import_styled.StyledFooterButton,
|
|
71
72
|
{
|
|
72
73
|
type: "button",
|
|
73
|
-
"aria-label":
|
|
74
|
+
"aria-label": FOOTER_TOGGLE_LABEL,
|
|
75
|
+
"aria-expanded": expanded,
|
|
76
|
+
"aria-controls": rootId,
|
|
74
77
|
onClick: handleClick,
|
|
75
78
|
onFocus: trackFocusFooter,
|
|
76
79
|
innerRef: focusRef,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/Footer.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, useContext } from 'react';\nimport { MenuCollapse, MenuExpand } from '@elliemae/ds-icons';\nimport { TreeContext } from './TreeContext.js';\nimport { usePropsStore } from '../config/store.js';\nimport { useFocusTracker } from '../config/useFocusTracker.js';\nimport { useIsFooterFocusTarget } from '../config/useTreeModel.js';\nimport { StyledFooterButton, StyledFooterLabel, StyledFooterMenu, StyledFooterSeparator } from './styled.js';\n\nconst ICON_COLOR = ['brand-primary', '600'] as ['brand-primary', '600'];\n\nexport const Footer = () => {\n const { model, getOwnerProps } = useContext(TreeContext);\n const footerLabel = usePropsStore((state) => state.footerLabel);\n const onFooterExpand = usePropsStore((state) => state.onFooterExpand);\n const onFooterClose = usePropsStore((state) => state.onFooterClose);\n const { trackFocusFooter } = useFocusTracker();\n const expanded = !model.isRail;\n const showLabel = expanded && !!footerLabel;\n const isFocusTarget = useIsFooterFocusTarget(model);\n\n const focusRef = useCallback(\n (node: HTMLElement | null) => {\n if (node && isFocusTarget) node.focus();\n },\n [isFocusTarget],\n );\n const handleClick = useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n if (expanded) onFooterClose(e);\n else onFooterExpand(e);\n },\n [expanded, onFooterClose, onFooterExpand],\n );\n\n return (\n <StyledFooterMenu expanded={expanded} getOwnerProps={getOwnerProps}>\n {showLabel ? <StyledFooterLabel getOwnerProps={getOwnerProps}>{footerLabel}</StyledFooterLabel> : null}\n {showLabel ? <StyledFooterSeparator aria-hidden=\"true\" getOwnerProps={getOwnerProps} /> : null}\n <StyledFooterButton\n type=\"button\"\n aria-label={expanded
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useContext } from 'react';\nimport { MenuCollapse, MenuExpand } from '@elliemae/ds-icons';\nimport { TreeContext } from './TreeContext.js';\nimport { usePropsStore } from '../config/store.js';\nimport { useFocusTracker } from '../config/useFocusTracker.js';\nimport { useIsFooterFocusTarget } from '../config/useTreeModel.js';\nimport { StyledFooterButton, StyledFooterLabel, StyledFooterMenu, StyledFooterSeparator } from './styled.js';\n\nconst ICON_COLOR = ['brand-primary', '600'] as ['brand-primary', '600'];\n\n/**\n * The toggle keeps one name in both states: the state is `aria-expanded`, and it controls the whole navigation (icons stay visible in the rail, only the labels show or hide).\n */\nconst FOOTER_TOGGLE_LABEL = 'Show/hide details';\n\nexport const Footer = () => {\n const { model, getOwnerProps, rootId } = useContext(TreeContext);\n const footerLabel = usePropsStore((state) => state.footerLabel);\n const onFooterExpand = usePropsStore((state) => state.onFooterExpand);\n const onFooterClose = usePropsStore((state) => state.onFooterClose);\n const { trackFocusFooter } = useFocusTracker();\n const expanded = !model.isRail;\n const showLabel = expanded && !!footerLabel;\n const isFocusTarget = useIsFooterFocusTarget(model);\n\n const focusRef = useCallback(\n (node: HTMLElement | null) => {\n if (node && isFocusTarget) node.focus();\n },\n [isFocusTarget],\n );\n const handleClick = useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n if (expanded) onFooterClose(e);\n else onFooterExpand(e);\n },\n [expanded, onFooterClose, onFooterExpand],\n );\n\n return (\n <StyledFooterMenu expanded={expanded} getOwnerProps={getOwnerProps}>\n {showLabel ? <StyledFooterLabel getOwnerProps={getOwnerProps}>{footerLabel}</StyledFooterLabel> : null}\n {showLabel ? <StyledFooterSeparator aria-hidden=\"true\" getOwnerProps={getOwnerProps} /> : null}\n <StyledFooterButton\n type=\"button\"\n aria-label={FOOTER_TOGGLE_LABEL}\n aria-expanded={expanded}\n aria-controls={rootId}\n onClick={handleClick}\n onFocus={trackFocusFooter}\n innerRef={focusRef}\n getOwnerProps={getOwnerProps}\n >\n {expanded ? <MenuCollapse size=\"m\" color={ICON_COLOR} /> : <MenuExpand size=\"m\" color={ICON_COLOR} />}\n </StyledFooterButton>\n </StyledFooterMenu>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwCnB;AAxCJ,mBAA+C;AAC/C,sBAAyC;AACzC,yBAA4B;AAC5B,mBAA8B;AAC9B,6BAAgC;AAChC,0BAAuC;AACvC,oBAA+F;AAE/F,MAAM,aAAa,CAAC,iBAAiB,KAAK;AAK1C,MAAM,sBAAsB;AAErB,MAAM,SAAS,MAAM;AAC1B,QAAM,EAAE,OAAO,eAAe,OAAO,QAAI,yBAAW,8BAAW;AAC/D,QAAM,kBAAc,4BAAc,CAAC,UAAU,MAAM,WAAW;AAC9D,QAAM,qBAAiB,4BAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,oBAAgB,4BAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,EAAE,iBAAiB,QAAI,wCAAgB;AAC7C,QAAM,WAAW,CAAC,MAAM;AACxB,QAAM,YAAY,YAAY,CAAC,CAAC;AAChC,QAAM,oBAAgB,4CAAuB,KAAK;AAElD,QAAM,eAAW;AAAA,IACf,CAAC,SAA6B;AAC5B,UAAI,QAAQ,cAAe,MAAK,MAAM;AAAA,IACxC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AACA,QAAM,kBAAc;AAAA,IAClB,CAAC,MAAqC;AACpC,UAAI,SAAU,eAAc,CAAC;AAAA,UACxB,gBAAe,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,UAAU,eAAe,cAAc;AAAA,EAC1C;AAEA,SACE,6CAAC,kCAAiB,UAAoB,eACnC;AAAA,gBAAY,4CAAC,mCAAkB,eAA+B,uBAAY,IAAuB;AAAA,IACjG,YAAY,4CAAC,uCAAsB,eAAY,QAAO,eAA8B,IAAK;AAAA,IAC1F;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV;AAAA,QAEC,qBAAW,4CAAC,gCAAa,MAAK,KAAI,OAAO,YAAY,IAAK,4CAAC,8BAAW,MAAK,KAAI,OAAO,YAAY;AAAA;AAAA,IACrG;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/parts/Header.js
CHANGED
|
@@ -61,6 +61,7 @@ const HeaderDisclosure = () => {
|
|
|
61
61
|
const { CollapsedComponent } = headerItem;
|
|
62
62
|
const labelId = getElementId("label", headerItem.dsId);
|
|
63
63
|
const descriptionId = getElementId("description", headerItem.dsId);
|
|
64
|
+
const treeId = isRail || model.visibleIds.length === 0 ? void 0 : getElementId("tree", "root");
|
|
64
65
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
65
66
|
import_styled.StyledHeaderDisclosure,
|
|
66
67
|
{
|
|
@@ -70,7 +71,7 @@ const HeaderDisclosure = () => {
|
|
|
70
71
|
"aria-labelledby": labelId,
|
|
71
72
|
"aria-describedby": RightComponent && !isRail ? descriptionId : void 0,
|
|
72
73
|
"aria-expanded": isRail ? void 0 : isHeaderOpen,
|
|
73
|
-
"aria-controls":
|
|
74
|
+
"aria-controls": treeId,
|
|
74
75
|
onClick: handleClick,
|
|
75
76
|
onFocus: trackFocusHeader,
|
|
76
77
|
getOwnerProps,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/Header.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { ChevronSmallDown, ChevronSmallRight } from '@elliemae/ds-icons';\nimport { TreeContext } from './TreeContext.js';\nimport { usePropsStore } from '../config/store.js';\nimport { useFocusTracker } from '../config/useFocusTracker.js';\nimport {\n StyledArrowContainer,\n StyledCollapsedContainer,\n StyledHeaderDisclosure,\n StyledItemLabel,\n StyledLeftContainer,\n StyledRightContainer,\n} from './styled.js';\n\nconst HIDDEN_LABEL_STYLE = { display: 'none' };\nconst CHEVRON_COLOR = ['brand-primary', '800'] as ['brand-primary', '800'];\n\nexport const HeaderDisclosure = () => {\n const { model, getOwnerProps, labelOverflow, getElementId } = useContext(TreeContext);\n const onItemClick = usePropsStore((state) => state.onItemClick);\n const { trackFocusHeader } = useFocusTracker();\n const { headerItem, isHeaderOpen, isRail } = model;\n\n const handleClick = useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n if (headerItem) onItemClick(headerItem, e);\n },\n [headerItem, onItemClick],\n );\n const getOwnerPropsArguments = useCallback(\n () => ({ item: headerItem, level: 1, isOpen: isHeaderOpen && !isRail, isCurrent: false }),\n [headerItem, isHeaderOpen, isRail],\n );\n\n if (!headerItem) return null;\n const { label, RightComponent } = headerItem.itemOpts ?? {};\n const { CollapsedComponent } = headerItem;\n const labelId = getElementId('label', headerItem.dsId);\n const descriptionId = getElementId('description', headerItem.dsId);\n\n return (\n <StyledHeaderDisclosure\n type=\"button\"\n isRail={isRail}\n isOpen={isHeaderOpen && !isRail}\n aria-labelledby={labelId}\n aria-describedby={RightComponent && !isRail ? descriptionId : undefined}\n aria-expanded={isRail ? undefined : isHeaderOpen}\n aria-controls={
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { ChevronSmallDown, ChevronSmallRight } from '@elliemae/ds-icons';\nimport { TreeContext } from './TreeContext.js';\nimport { usePropsStore } from '../config/store.js';\nimport { useFocusTracker } from '../config/useFocusTracker.js';\nimport {\n StyledArrowContainer,\n StyledCollapsedContainer,\n StyledHeaderDisclosure,\n StyledItemLabel,\n StyledLeftContainer,\n StyledRightContainer,\n} from './styled.js';\n\nconst HIDDEN_LABEL_STYLE = { display: 'none' };\nconst CHEVRON_COLOR = ['brand-primary', '800'] as ['brand-primary', '800'];\n\nexport const HeaderDisclosure = () => {\n const { model, getOwnerProps, labelOverflow, getElementId } = useContext(TreeContext);\n const onItemClick = usePropsStore((state) => state.onItemClick);\n const { trackFocusHeader } = useFocusTracker();\n const { headerItem, isHeaderOpen, isRail } = model;\n\n const handleClick = useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n if (headerItem) onItemClick(headerItem, e);\n },\n [headerItem, onItemClick],\n );\n const getOwnerPropsArguments = useCallback(\n () => ({ item: headerItem, level: 1, isOpen: isHeaderOpen && !isRail, isCurrent: false }),\n [headerItem, isHeaderOpen, isRail],\n );\n\n if (!headerItem) return null;\n const { label, RightComponent } = headerItem.itemOpts ?? {};\n const { CollapsedComponent } = headerItem;\n const labelId = getElementId('label', headerItem.dsId);\n const descriptionId = getElementId('description', headerItem.dsId);\n\n const treeId = isRail || model.visibleIds.length === 0 ? undefined : getElementId('tree', 'root');\n\n return (\n <StyledHeaderDisclosure\n type=\"button\"\n isRail={isRail}\n isOpen={isHeaderOpen && !isRail}\n aria-labelledby={labelId}\n aria-describedby={RightComponent && !isRail ? descriptionId : undefined}\n aria-expanded={isRail ? undefined : isHeaderOpen}\n aria-controls={treeId}\n onClick={handleClick}\n onFocus={trackFocusHeader}\n getOwnerProps={getOwnerProps}\n >\n {isRail ? (\n <StyledCollapsedContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {CollapsedComponent ? <CollapsedComponent item={headerItem} /> : null}\n </StyledCollapsedContainer>\n ) : (\n <StyledLeftContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {CollapsedComponent ? <CollapsedComponent item={headerItem} /> : null}\n </StyledLeftContainer>\n )}\n <StyledItemLabel\n id={labelId}\n isTall\n labelOverflow={headerItem.itemOpts?.labelOverflow ?? labelOverflow}\n style={isRail ? HIDDEN_LABEL_STYLE : undefined}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {label}\n </StyledItemLabel>\n {RightComponent && !isRail ? (\n <StyledRightContainer\n id={descriptionId}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <RightComponent item={headerItem} />\n </StyledRightContainer>\n ) : null}\n {isRail ? null : (\n <StyledArrowContainer\n aria-hidden=\"true\"\n isLeading={false}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {isHeaderOpen ? (\n <ChevronSmallDown size=\"m\" color={CHEVRON_COLOR} />\n ) : (\n <ChevronSmallRight size=\"m\" color={CHEVRON_COLOR} />\n )}\n </StyledArrowContainer>\n )}\n </StyledHeaderDisclosure>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4CnB;AA3CJ,mBAA+C;AAC/C,sBAAoD;AACpD,yBAA4B;AAC5B,mBAA8B;AAC9B,6BAAgC;AAChC,oBAOO;AAEP,MAAM,qBAAqB,EAAE,SAAS,OAAO;AAC7C,MAAM,gBAAgB,CAAC,iBAAiB,KAAK;AAEtC,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,OAAO,eAAe,eAAe,aAAa,QAAI,yBAAW,8BAAW;AACpF,QAAM,kBAAc,4BAAc,CAAC,UAAU,MAAM,WAAW;AAC9D,QAAM,EAAE,iBAAiB,QAAI,wCAAgB;AAC7C,QAAM,EAAE,YAAY,cAAc,OAAO,IAAI;AAE7C,QAAM,kBAAc;AAAA,IAClB,CAAC,MAAqC;AACpC,UAAI,WAAY,aAAY,YAAY,CAAC;AAAA,IAC3C;AAAA,IACA,CAAC,YAAY,WAAW;AAAA,EAC1B;AACA,QAAM,6BAAyB;AAAA,IAC7B,OAAO,EAAE,MAAM,YAAY,OAAO,GAAG,QAAQ,gBAAgB,CAAC,QAAQ,WAAW,MAAM;AAAA,IACvF,CAAC,YAAY,cAAc,MAAM;AAAA,EACnC;AAEA,MAAI,CAAC,WAAY,QAAO;AACxB,QAAM,EAAE,OAAO,eAAe,IAAI,WAAW,YAAY,CAAC;AAC1D,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,UAAU,aAAa,SAAS,WAAW,IAAI;AACrD,QAAM,gBAAgB,aAAa,eAAe,WAAW,IAAI;AAEjE,QAAM,SAAS,UAAU,MAAM,WAAW,WAAW,IAAI,SAAY,aAAa,QAAQ,MAAM;AAEhG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,QAAQ,gBAAgB,CAAC;AAAA,MACzB,mBAAiB;AAAA,MACjB,oBAAkB,kBAAkB,CAAC,SAAS,gBAAgB;AAAA,MAC9D,iBAAe,SAAS,SAAY;AAAA,MACpC,iBAAe;AAAA,MACf,SAAS;AAAA,MACT,SAAS;AAAA,MACT;AAAA,MAEC;AAAA,iBACC,4CAAC,0CAAyB,eAA8B,wBACrD,+BAAqB,4CAAC,sBAAmB,MAAM,YAAY,IAAK,MACnE,IAEA,4CAAC,qCAAoB,eAA8B,wBAChD,+BAAqB,4CAAC,sBAAmB,MAAM,YAAY,IAAK,MACnE;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,QAAM;AAAA,YACN,eAAe,WAAW,UAAU,iBAAiB;AAAA,YACrD,OAAO,SAAS,qBAAqB;AAAA,YACrC;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACC,kBAAkB,CAAC,SAClB;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YACA;AAAA,YAEA,sDAAC,kBAAe,MAAM,YAAY;AAAA;AAAA,QACpC,IACE;AAAA,QACH,SAAS,OACR;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAW;AAAA,YACX;AAAA,YACA;AAAA,YAEC,yBACC,4CAAC,oCAAiB,MAAK,KAAI,OAAO,eAAe,IAEjD,4CAAC,qCAAkB,MAAK,KAAI,OAAO,eAAe;AAAA;AAAA,QAEtD;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -69,9 +69,10 @@ const MainContent = import_react.default.memo(() => {
|
|
|
69
69
|
(kind, dsId) => `${instanceId}-${kind}-${encodeURIComponent(dsId)}`,
|
|
70
70
|
[instanceId]
|
|
71
71
|
);
|
|
72
|
+
const rootId = globalAttributes.id ?? getElementId("root", "nav");
|
|
72
73
|
const contextValue = (0, import_react.useMemo)(
|
|
73
|
-
() => ({ model, handlers, getOwnerProps, labelOverflow, getElementId }),
|
|
74
|
-
[model, handlers, getOwnerProps, labelOverflow, getElementId]
|
|
74
|
+
() => ({ model, handlers, getOwnerProps, labelOverflow, getElementId, rootId }),
|
|
75
|
+
[model, handlers, getOwnerProps, labelOverflow, getElementId, rootId]
|
|
75
76
|
);
|
|
76
77
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeContext.TreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
77
78
|
import_styled.StyledRoot,
|
|
@@ -83,6 +84,7 @@ const MainContent = import_react.default.memo(() => {
|
|
|
83
84
|
...globalAttributes,
|
|
84
85
|
...xstyledProps,
|
|
85
86
|
...nameProps,
|
|
87
|
+
id: rootId,
|
|
86
88
|
children: [
|
|
87
89
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Header.HeaderDisclosure, {}),
|
|
88
90
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeRoot.TreeRoot, { nameProps }),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/MainContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, useId, useMemo } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { usePropsStore } from '../config/store.js';\nimport { useTreeModel } from '../config/useTreeModel.js';\nimport { useTreeHandlers } from '../config/useTreeHandlers.js';\nimport {\n DSLeftNavigationTreeName,\n LEFT_NAVIGATION_TREE_DATA_TESTID,\n LEFT_NAVIGATION_TREE_DEFAULT_LABEL,\n} from '../constants/index.js';\nimport { DSLeftNavigationTreePropTypes, type DSLeftNavigationTreeT } from '../react-desc-prop-types.js';\nimport { TreeContext, type TreeContextValue } from './TreeContext.js';\nimport { TreeRoot } from './TreeRoot.js';\nimport { HeaderDisclosure } from './Header.js';\nimport { Footer } from './Footer.js';\nimport { StyledRoot } from './styled.js';\n\nexport const MainContent = React.memo(() => {\n const propsWithDefault = usePropsStore((state) => state) as DSLeftNavigationTreeT.InternalProps;\n useValidateTypescriptPropTypes(propsWithDefault, DSLeftNavigationTreePropTypes, DSLeftNavigationTreeName);\n const getOwnerProps = usePropsStore((state) => state.get);\n const expanded = usePropsStore((state) => state.expanded);\n const expandedWidth = usePropsStore((state) => state.expandedWidth);\n const labelOverflow = usePropsStore((state) => state.labelOverflow);\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n ...globalAttributes\n } = useGetGlobalAttributes<DSLeftNavigationTreeT.InternalProps, HTMLElement>(propsWithDefault);\n const nameProps = useMemo(\n () =>\n ariaLabelledBy\n ? { 'aria-labelledby': ariaLabelledBy }\n : { 'aria-label': ariaLabel ?? LEFT_NAVIGATION_TREE_DEFAULT_LABEL },\n [ariaLabel, ariaLabelledBy],\n );\n\n const model = useTreeModel();\n const handlers = useTreeHandlers(model);\n\n const instanceId = useId();\n const getElementId = useCallback(\n (kind: string, dsId: string) => `${instanceId}-${kind}-${encodeURIComponent(dsId)}`,\n [instanceId],\n );\n\n const contextValue: TreeContextValue = useMemo(\n () => ({ model, handlers, getOwnerProps, labelOverflow, getElementId }),\n [model, handlers, getOwnerProps, labelOverflow, getElementId],\n );\n\n return (\n <TreeContext.Provider value={contextValue}>\n <StyledRoot\n expanded={expanded}\n expandedWidth={expandedWidth}\n data-testid={LEFT_NAVIGATION_TREE_DATA_TESTID.ROOT}\n getOwnerProps={getOwnerProps}\n {...globalAttributes}\n {...xstyledProps}\n {...nameProps}\n >\n <HeaderDisclosure />\n <TreeRoot nameProps={nameProps} />\n <Footer />\n </StyledRoot>\n </TreeContext.Provider>\n );\n});\n\nMainContent.displayName = `${DSLeftNavigationTreeName}.MainContent`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useId, useMemo } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { usePropsStore } from '../config/store.js';\nimport { useTreeModel } from '../config/useTreeModel.js';\nimport { useTreeHandlers } from '../config/useTreeHandlers.js';\nimport {\n DSLeftNavigationTreeName,\n LEFT_NAVIGATION_TREE_DATA_TESTID,\n LEFT_NAVIGATION_TREE_DEFAULT_LABEL,\n} from '../constants/index.js';\nimport { DSLeftNavigationTreePropTypes, type DSLeftNavigationTreeT } from '../react-desc-prop-types.js';\nimport { TreeContext, type TreeContextValue } from './TreeContext.js';\nimport { TreeRoot } from './TreeRoot.js';\nimport { HeaderDisclosure } from './Header.js';\nimport { Footer } from './Footer.js';\nimport { StyledRoot } from './styled.js';\n\nexport const MainContent = React.memo(() => {\n const propsWithDefault = usePropsStore((state) => state) as DSLeftNavigationTreeT.InternalProps;\n useValidateTypescriptPropTypes(propsWithDefault, DSLeftNavigationTreePropTypes, DSLeftNavigationTreeName);\n const getOwnerProps = usePropsStore((state) => state.get);\n const expanded = usePropsStore((state) => state.expanded);\n const expandedWidth = usePropsStore((state) => state.expandedWidth);\n const labelOverflow = usePropsStore((state) => state.labelOverflow);\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n ...globalAttributes\n } = useGetGlobalAttributes<DSLeftNavigationTreeT.InternalProps, HTMLElement>(propsWithDefault);\n const nameProps = useMemo(\n () =>\n ariaLabelledBy\n ? { 'aria-labelledby': ariaLabelledBy }\n : { 'aria-label': ariaLabel ?? LEFT_NAVIGATION_TREE_DEFAULT_LABEL },\n [ariaLabel, ariaLabelledBy],\n );\n\n const model = useTreeModel();\n const handlers = useTreeHandlers(model);\n\n const instanceId = useId();\n const getElementId = useCallback(\n (kind: string, dsId: string) => `${instanceId}-${kind}-${encodeURIComponent(dsId)}`,\n [instanceId],\n );\n\n const rootId = globalAttributes.id ?? getElementId('root', 'nav');\n\n const contextValue: TreeContextValue = useMemo(\n () => ({ model, handlers, getOwnerProps, labelOverflow, getElementId, rootId }),\n [model, handlers, getOwnerProps, labelOverflow, getElementId, rootId],\n );\n\n return (\n <TreeContext.Provider value={contextValue}>\n <StyledRoot\n expanded={expanded}\n expandedWidth={expandedWidth}\n data-testid={LEFT_NAVIGATION_TREE_DATA_TESTID.ROOT}\n getOwnerProps={getOwnerProps}\n {...globalAttributes}\n {...xstyledProps}\n {...nameProps}\n id={rootId}\n >\n <HeaderDisclosure />\n <TreeRoot nameProps={nameProps} />\n <Footer />\n </StyledRoot>\n </TreeContext.Provider>\n );\n});\n\nMainContent.displayName = `${DSLeftNavigationTreeName}.MainContent`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyDjB;AAzDN,mBAAmD;AACnD,8BAA2F;AAC3F,mBAA8B;AAC9B,0BAA6B;AAC7B,6BAAgC;AAChC,uBAIO;AACP,mCAA0E;AAC1E,yBAAmD;AACnD,sBAAyB;AACzB,oBAAiC;AACjC,oBAAuB;AACvB,oBAA2B;AAEpB,MAAM,cAAc,aAAAA,QAAM,KAAK,MAAM;AAC1C,QAAM,uBAAmB,4BAAc,CAAC,UAAU,KAAK;AACvD,8DAA+B,kBAAkB,4DAA+B,yCAAwB;AACxG,QAAM,oBAAgB,4BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,eAAW,4BAAc,CAAC,UAAU,MAAM,QAAQ;AACxD,QAAM,oBAAgB,4BAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,oBAAgB,4BAAc,CAAC,UAAU,MAAM,aAAa;AAElE,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,QAAM;AAAA,IACJ,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,GAAG;AAAA,EACL,QAAI,gDAAyE,gBAAgB;AAC7F,QAAM,gBAAY;AAAA,IAChB,MACE,iBACI,EAAE,mBAAmB,eAAe,IACpC,EAAE,cAAc,aAAa,oDAAmC;AAAA,IACtE,CAAC,WAAW,cAAc;AAAA,EAC5B;AAEA,QAAM,YAAQ,kCAAa;AAC3B,QAAM,eAAW,wCAAgB,KAAK;AAEtC,QAAM,iBAAa,oBAAM;AACzB,QAAM,mBAAe;AAAA,IACnB,CAAC,MAAc,SAAiB,GAAG,UAAU,IAAI,IAAI,IAAI,mBAAmB,IAAI,CAAC;AAAA,IACjF,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,SAAS,iBAAiB,MAAM,aAAa,QAAQ,KAAK;AAEhE,QAAM,mBAAiC;AAAA,IACrC,OAAO,EAAE,OAAO,UAAU,eAAe,eAAe,cAAc,OAAO;AAAA,IAC7E,CAAC,OAAO,UAAU,eAAe,eAAe,cAAc,MAAM;AAAA,EACtE;AAEA,SACE,4CAAC,+BAAY,UAAZ,EAAqB,OAAO,cAC3B;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAa,kDAAiC;AAAA,MAC9C;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,IAAI;AAAA,MAEJ;AAAA,oDAAC,kCAAiB;AAAA,QAClB,4CAAC,4BAAS,WAAsB;AAAA,QAChC,4CAAC,wBAAO;AAAA;AAAA;AAAA,EACV,GACF;AAEJ,CAAC;AAED,YAAY,cAAc,GAAG,yCAAwB;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/TreeContext.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { createContext } from 'react';\nimport type { DSLeftNavigationTreeT } from '../react-desc-prop-types.js';\nimport type { TreeModel } from '../config/useTreeModel.js';\nimport type { useTreeHandlers } from '../config/useTreeHandlers.js';\n\nexport type TreeContextValue = {\n model: TreeModel;\n handlers: ReturnType<typeof useTreeHandlers>;\n getOwnerProps: () => object;\n labelOverflow: DSLeftNavigationTreeT.LabelOverflowT;\n getElementId: (kind: string, dsId: string) => string;\n};\n\nexport const TreeContext = createContext<TreeContextValue>({} as TreeContextValue);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;
|
|
4
|
+
"sourcesContent": ["import { createContext } from 'react';\nimport type { DSLeftNavigationTreeT } from '../react-desc-prop-types.js';\nimport type { TreeModel } from '../config/useTreeModel.js';\nimport type { useTreeHandlers } from '../config/useTreeHandlers.js';\n\nexport type TreeContextValue = {\n model: TreeModel;\n handlers: ReturnType<typeof useTreeHandlers>;\n getOwnerProps: () => object;\n labelOverflow: DSLeftNavigationTreeT.LabelOverflowT;\n getElementId: (kind: string, dsId: string) => string;\n /** Default id of the navigation landmark, the element the footer toggle controls. */\n rootId: string;\n};\n\nexport const TreeContext = createContext<TreeContextValue>({} as TreeContextValue);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAevB,MAAM,kBAAc,4BAAgC,CAAC,CAAqB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/parts/Footer.js
CHANGED
|
@@ -8,8 +8,9 @@ import { useFocusTracker } from "../config/useFocusTracker.js";
|
|
|
8
8
|
import { useIsFooterFocusTarget } from "../config/useTreeModel.js";
|
|
9
9
|
import { StyledFooterButton, StyledFooterLabel, StyledFooterMenu, StyledFooterSeparator } from "./styled.js";
|
|
10
10
|
const ICON_COLOR = ["brand-primary", "600"];
|
|
11
|
+
const FOOTER_TOGGLE_LABEL = "Show/hide details";
|
|
11
12
|
const Footer = () => {
|
|
12
|
-
const { model, getOwnerProps } = useContext(TreeContext);
|
|
13
|
+
const { model, getOwnerProps, rootId } = useContext(TreeContext);
|
|
13
14
|
const footerLabel = usePropsStore((state) => state.footerLabel);
|
|
14
15
|
const onFooterExpand = usePropsStore((state) => state.onFooterExpand);
|
|
15
16
|
const onFooterClose = usePropsStore((state) => state.onFooterClose);
|
|
@@ -37,7 +38,9 @@ const Footer = () => {
|
|
|
37
38
|
StyledFooterButton,
|
|
38
39
|
{
|
|
39
40
|
type: "button",
|
|
40
|
-
"aria-label":
|
|
41
|
+
"aria-label": FOOTER_TOGGLE_LABEL,
|
|
42
|
+
"aria-expanded": expanded,
|
|
43
|
+
"aria-controls": rootId,
|
|
41
44
|
onClick: handleClick,
|
|
42
45
|
onFocus: trackFocusFooter,
|
|
43
46
|
innerRef: focusRef,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Footer.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext } from 'react';\nimport { MenuCollapse, MenuExpand } from '@elliemae/ds-icons';\nimport { TreeContext } from './TreeContext.js';\nimport { usePropsStore } from '../config/store.js';\nimport { useFocusTracker } from '../config/useFocusTracker.js';\nimport { useIsFooterFocusTarget } from '../config/useTreeModel.js';\nimport { StyledFooterButton, StyledFooterLabel, StyledFooterMenu, StyledFooterSeparator } from './styled.js';\n\nconst ICON_COLOR = ['brand-primary', '600'] as ['brand-primary', '600'];\n\nexport const Footer = () => {\n const { model, getOwnerProps } = useContext(TreeContext);\n const footerLabel = usePropsStore((state) => state.footerLabel);\n const onFooterExpand = usePropsStore((state) => state.onFooterExpand);\n const onFooterClose = usePropsStore((state) => state.onFooterClose);\n const { trackFocusFooter } = useFocusTracker();\n const expanded = !model.isRail;\n const showLabel = expanded && !!footerLabel;\n const isFocusTarget = useIsFooterFocusTarget(model);\n\n const focusRef = useCallback(\n (node: HTMLElement | null) => {\n if (node && isFocusTarget) node.focus();\n },\n [isFocusTarget],\n );\n const handleClick = useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n if (expanded) onFooterClose(e);\n else onFooterExpand(e);\n },\n [expanded, onFooterClose, onFooterExpand],\n );\n\n return (\n <StyledFooterMenu expanded={expanded} getOwnerProps={getOwnerProps}>\n {showLabel ? <StyledFooterLabel getOwnerProps={getOwnerProps}>{footerLabel}</StyledFooterLabel> : null}\n {showLabel ? <StyledFooterSeparator aria-hidden=\"true\" getOwnerProps={getOwnerProps} /> : null}\n <StyledFooterButton\n type=\"button\"\n aria-label={expanded
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext } from 'react';\nimport { MenuCollapse, MenuExpand } from '@elliemae/ds-icons';\nimport { TreeContext } from './TreeContext.js';\nimport { usePropsStore } from '../config/store.js';\nimport { useFocusTracker } from '../config/useFocusTracker.js';\nimport { useIsFooterFocusTarget } from '../config/useTreeModel.js';\nimport { StyledFooterButton, StyledFooterLabel, StyledFooterMenu, StyledFooterSeparator } from './styled.js';\n\nconst ICON_COLOR = ['brand-primary', '600'] as ['brand-primary', '600'];\n\n/**\n * The toggle keeps one name in both states: the state is `aria-expanded`, and it controls the whole navigation (icons stay visible in the rail, only the labels show or hide).\n */\nconst FOOTER_TOGGLE_LABEL = 'Show/hide details';\n\nexport const Footer = () => {\n const { model, getOwnerProps, rootId } = useContext(TreeContext);\n const footerLabel = usePropsStore((state) => state.footerLabel);\n const onFooterExpand = usePropsStore((state) => state.onFooterExpand);\n const onFooterClose = usePropsStore((state) => state.onFooterClose);\n const { trackFocusFooter } = useFocusTracker();\n const expanded = !model.isRail;\n const showLabel = expanded && !!footerLabel;\n const isFocusTarget = useIsFooterFocusTarget(model);\n\n const focusRef = useCallback(\n (node: HTMLElement | null) => {\n if (node && isFocusTarget) node.focus();\n },\n [isFocusTarget],\n );\n const handleClick = useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n if (expanded) onFooterClose(e);\n else onFooterExpand(e);\n },\n [expanded, onFooterClose, onFooterExpand],\n );\n\n return (\n <StyledFooterMenu expanded={expanded} getOwnerProps={getOwnerProps}>\n {showLabel ? <StyledFooterLabel getOwnerProps={getOwnerProps}>{footerLabel}</StyledFooterLabel> : null}\n {showLabel ? <StyledFooterSeparator aria-hidden=\"true\" getOwnerProps={getOwnerProps} /> : null}\n <StyledFooterButton\n type=\"button\"\n aria-label={FOOTER_TOGGLE_LABEL}\n aria-expanded={expanded}\n aria-controls={rootId}\n onClick={handleClick}\n onFocus={trackFocusFooter}\n innerRef={focusRef}\n getOwnerProps={getOwnerProps}\n >\n {expanded ? <MenuCollapse size=\"m\" color={ICON_COLOR} /> : <MenuExpand size=\"m\" color={ICON_COLOR} />}\n </StyledFooterButton>\n </StyledFooterMenu>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACwCnB,SACe,KADf;AAxCJ,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,cAAc,kBAAkB;AACzC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,8BAA8B;AACvC,SAAS,oBAAoB,mBAAmB,kBAAkB,6BAA6B;AAE/F,MAAM,aAAa,CAAC,iBAAiB,KAAK;AAK1C,MAAM,sBAAsB;AAErB,MAAM,SAAS,MAAM;AAC1B,QAAM,EAAE,OAAO,eAAe,OAAO,IAAI,WAAW,WAAW;AAC/D,QAAM,cAAc,cAAc,CAAC,UAAU,MAAM,WAAW;AAC9D,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,EAAE,iBAAiB,IAAI,gBAAgB;AAC7C,QAAM,WAAW,CAAC,MAAM;AACxB,QAAM,YAAY,YAAY,CAAC,CAAC;AAChC,QAAM,gBAAgB,uBAAuB,KAAK;AAElD,QAAM,WAAW;AAAA,IACf,CAAC,SAA6B;AAC5B,UAAI,QAAQ,cAAe,MAAK,MAAM;AAAA,IACxC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AACA,QAAM,cAAc;AAAA,IAClB,CAAC,MAAqC;AACpC,UAAI,SAAU,eAAc,CAAC;AAAA,UACxB,gBAAe,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,UAAU,eAAe,cAAc;AAAA,EAC1C;AAEA,SACE,qBAAC,oBAAiB,UAAoB,eACnC;AAAA,gBAAY,oBAAC,qBAAkB,eAA+B,uBAAY,IAAuB;AAAA,IACjG,YAAY,oBAAC,yBAAsB,eAAY,QAAO,eAA8B,IAAK;AAAA,IAC1F;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV;AAAA,QAEC,qBAAW,oBAAC,gBAAa,MAAK,KAAI,OAAO,YAAY,IAAK,oBAAC,cAAW,MAAK,KAAI,OAAO,YAAY;AAAA;AAAA,IACrG;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/parts/Header.js
CHANGED
|
@@ -35,6 +35,7 @@ const HeaderDisclosure = () => {
|
|
|
35
35
|
const { CollapsedComponent } = headerItem;
|
|
36
36
|
const labelId = getElementId("label", headerItem.dsId);
|
|
37
37
|
const descriptionId = getElementId("description", headerItem.dsId);
|
|
38
|
+
const treeId = isRail || model.visibleIds.length === 0 ? void 0 : getElementId("tree", "root");
|
|
38
39
|
return /* @__PURE__ */ jsxs(
|
|
39
40
|
StyledHeaderDisclosure,
|
|
40
41
|
{
|
|
@@ -44,7 +45,7 @@ const HeaderDisclosure = () => {
|
|
|
44
45
|
"aria-labelledby": labelId,
|
|
45
46
|
"aria-describedby": RightComponent && !isRail ? descriptionId : void 0,
|
|
46
47
|
"aria-expanded": isRail ? void 0 : isHeaderOpen,
|
|
47
|
-
"aria-controls":
|
|
48
|
+
"aria-controls": treeId,
|
|
48
49
|
onClick: handleClick,
|
|
49
50
|
onFocus: trackFocusHeader,
|
|
50
51
|
getOwnerProps,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Header.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { ChevronSmallDown, ChevronSmallRight } from '@elliemae/ds-icons';\nimport { TreeContext } from './TreeContext.js';\nimport { usePropsStore } from '../config/store.js';\nimport { useFocusTracker } from '../config/useFocusTracker.js';\nimport {\n StyledArrowContainer,\n StyledCollapsedContainer,\n StyledHeaderDisclosure,\n StyledItemLabel,\n StyledLeftContainer,\n StyledRightContainer,\n} from './styled.js';\n\nconst HIDDEN_LABEL_STYLE = { display: 'none' };\nconst CHEVRON_COLOR = ['brand-primary', '800'] as ['brand-primary', '800'];\n\nexport const HeaderDisclosure = () => {\n const { model, getOwnerProps, labelOverflow, getElementId } = useContext(TreeContext);\n const onItemClick = usePropsStore((state) => state.onItemClick);\n const { trackFocusHeader } = useFocusTracker();\n const { headerItem, isHeaderOpen, isRail } = model;\n\n const handleClick = useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n if (headerItem) onItemClick(headerItem, e);\n },\n [headerItem, onItemClick],\n );\n const getOwnerPropsArguments = useCallback(\n () => ({ item: headerItem, level: 1, isOpen: isHeaderOpen && !isRail, isCurrent: false }),\n [headerItem, isHeaderOpen, isRail],\n );\n\n if (!headerItem) return null;\n const { label, RightComponent } = headerItem.itemOpts ?? {};\n const { CollapsedComponent } = headerItem;\n const labelId = getElementId('label', headerItem.dsId);\n const descriptionId = getElementId('description', headerItem.dsId);\n\n return (\n <StyledHeaderDisclosure\n type=\"button\"\n isRail={isRail}\n isOpen={isHeaderOpen && !isRail}\n aria-labelledby={labelId}\n aria-describedby={RightComponent && !isRail ? descriptionId : undefined}\n aria-expanded={isRail ? undefined : isHeaderOpen}\n aria-controls={
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { ChevronSmallDown, ChevronSmallRight } from '@elliemae/ds-icons';\nimport { TreeContext } from './TreeContext.js';\nimport { usePropsStore } from '../config/store.js';\nimport { useFocusTracker } from '../config/useFocusTracker.js';\nimport {\n StyledArrowContainer,\n StyledCollapsedContainer,\n StyledHeaderDisclosure,\n StyledItemLabel,\n StyledLeftContainer,\n StyledRightContainer,\n} from './styled.js';\n\nconst HIDDEN_LABEL_STYLE = { display: 'none' };\nconst CHEVRON_COLOR = ['brand-primary', '800'] as ['brand-primary', '800'];\n\nexport const HeaderDisclosure = () => {\n const { model, getOwnerProps, labelOverflow, getElementId } = useContext(TreeContext);\n const onItemClick = usePropsStore((state) => state.onItemClick);\n const { trackFocusHeader } = useFocusTracker();\n const { headerItem, isHeaderOpen, isRail } = model;\n\n const handleClick = useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n if (headerItem) onItemClick(headerItem, e);\n },\n [headerItem, onItemClick],\n );\n const getOwnerPropsArguments = useCallback(\n () => ({ item: headerItem, level: 1, isOpen: isHeaderOpen && !isRail, isCurrent: false }),\n [headerItem, isHeaderOpen, isRail],\n );\n\n if (!headerItem) return null;\n const { label, RightComponent } = headerItem.itemOpts ?? {};\n const { CollapsedComponent } = headerItem;\n const labelId = getElementId('label', headerItem.dsId);\n const descriptionId = getElementId('description', headerItem.dsId);\n\n const treeId = isRail || model.visibleIds.length === 0 ? undefined : getElementId('tree', 'root');\n\n return (\n <StyledHeaderDisclosure\n type=\"button\"\n isRail={isRail}\n isOpen={isHeaderOpen && !isRail}\n aria-labelledby={labelId}\n aria-describedby={RightComponent && !isRail ? descriptionId : undefined}\n aria-expanded={isRail ? undefined : isHeaderOpen}\n aria-controls={treeId}\n onClick={handleClick}\n onFocus={trackFocusHeader}\n getOwnerProps={getOwnerProps}\n >\n {isRail ? (\n <StyledCollapsedContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {CollapsedComponent ? <CollapsedComponent item={headerItem} /> : null}\n </StyledCollapsedContainer>\n ) : (\n <StyledLeftContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {CollapsedComponent ? <CollapsedComponent item={headerItem} /> : null}\n </StyledLeftContainer>\n )}\n <StyledItemLabel\n id={labelId}\n isTall\n labelOverflow={headerItem.itemOpts?.labelOverflow ?? labelOverflow}\n style={isRail ? HIDDEN_LABEL_STYLE : undefined}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {label}\n </StyledItemLabel>\n {RightComponent && !isRail ? (\n <StyledRightContainer\n id={descriptionId}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <RightComponent item={headerItem} />\n </StyledRightContainer>\n ) : null}\n {isRail ? null : (\n <StyledArrowContainer\n aria-hidden=\"true\"\n isLeading={false}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {isHeaderOpen ? (\n <ChevronSmallDown size=\"m\" color={CHEVRON_COLOR} />\n ) : (\n <ChevronSmallRight size=\"m\" color={CHEVRON_COLOR} />\n )}\n </StyledArrowContainer>\n )}\n </StyledHeaderDisclosure>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC4CnB,SAc4B,KAd5B;AA3CJ,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,kBAAkB,yBAAyB;AACpD,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,qBAAqB,EAAE,SAAS,OAAO;AAC7C,MAAM,gBAAgB,CAAC,iBAAiB,KAAK;AAEtC,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,OAAO,eAAe,eAAe,aAAa,IAAI,WAAW,WAAW;AACpF,QAAM,cAAc,cAAc,CAAC,UAAU,MAAM,WAAW;AAC9D,QAAM,EAAE,iBAAiB,IAAI,gBAAgB;AAC7C,QAAM,EAAE,YAAY,cAAc,OAAO,IAAI;AAE7C,QAAM,cAAc;AAAA,IAClB,CAAC,MAAqC;AACpC,UAAI,WAAY,aAAY,YAAY,CAAC;AAAA,IAC3C;AAAA,IACA,CAAC,YAAY,WAAW;AAAA,EAC1B;AACA,QAAM,yBAAyB;AAAA,IAC7B,OAAO,EAAE,MAAM,YAAY,OAAO,GAAG,QAAQ,gBAAgB,CAAC,QAAQ,WAAW,MAAM;AAAA,IACvF,CAAC,YAAY,cAAc,MAAM;AAAA,EACnC;AAEA,MAAI,CAAC,WAAY,QAAO;AACxB,QAAM,EAAE,OAAO,eAAe,IAAI,WAAW,YAAY,CAAC;AAC1D,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,UAAU,aAAa,SAAS,WAAW,IAAI;AACrD,QAAM,gBAAgB,aAAa,eAAe,WAAW,IAAI;AAEjE,QAAM,SAAS,UAAU,MAAM,WAAW,WAAW,IAAI,SAAY,aAAa,QAAQ,MAAM;AAEhG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,QAAQ,gBAAgB,CAAC;AAAA,MACzB,mBAAiB;AAAA,MACjB,oBAAkB,kBAAkB,CAAC,SAAS,gBAAgB;AAAA,MAC9D,iBAAe,SAAS,SAAY;AAAA,MACpC,iBAAe;AAAA,MACf,SAAS;AAAA,MACT,SAAS;AAAA,MACT;AAAA,MAEC;AAAA,iBACC,oBAAC,4BAAyB,eAA8B,wBACrD,+BAAqB,oBAAC,sBAAmB,MAAM,YAAY,IAAK,MACnE,IAEA,oBAAC,uBAAoB,eAA8B,wBAChD,+BAAqB,oBAAC,sBAAmB,MAAM,YAAY,IAAK,MACnE;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,QAAM;AAAA,YACN,eAAe,WAAW,UAAU,iBAAiB;AAAA,YACrD,OAAO,SAAS,qBAAqB;AAAA,YACrC;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACC,kBAAkB,CAAC,SAClB;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YACA;AAAA,YAEA,8BAAC,kBAAe,MAAM,YAAY;AAAA;AAAA,QACpC,IACE;AAAA,QACH,SAAS,OACR;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAW;AAAA,YACX;AAAA,YACA;AAAA,YAEC,yBACC,oBAAC,oBAAiB,MAAK,KAAI,OAAO,eAAe,IAEjD,oBAAC,qBAAkB,MAAK,KAAI,OAAO,eAAe;AAAA;AAAA,QAEtD;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -40,9 +40,10 @@ const MainContent = React2.memo(() => {
|
|
|
40
40
|
(kind, dsId) => `${instanceId}-${kind}-${encodeURIComponent(dsId)}`,
|
|
41
41
|
[instanceId]
|
|
42
42
|
);
|
|
43
|
+
const rootId = globalAttributes.id ?? getElementId("root", "nav");
|
|
43
44
|
const contextValue = useMemo(
|
|
44
|
-
() => ({ model, handlers, getOwnerProps, labelOverflow, getElementId }),
|
|
45
|
-
[model, handlers, getOwnerProps, labelOverflow, getElementId]
|
|
45
|
+
() => ({ model, handlers, getOwnerProps, labelOverflow, getElementId, rootId }),
|
|
46
|
+
[model, handlers, getOwnerProps, labelOverflow, getElementId, rootId]
|
|
46
47
|
);
|
|
47
48
|
return /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
|
|
48
49
|
StyledRoot,
|
|
@@ -54,6 +55,7 @@ const MainContent = React2.memo(() => {
|
|
|
54
55
|
...globalAttributes,
|
|
55
56
|
...xstyledProps,
|
|
56
57
|
...nameProps,
|
|
58
|
+
id: rootId,
|
|
57
59
|
children: [
|
|
58
60
|
/* @__PURE__ */ jsx(HeaderDisclosure, {}),
|
|
59
61
|
/* @__PURE__ */ jsx(TreeRoot, { nameProps }),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/MainContent.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useId, useMemo } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { usePropsStore } from '../config/store.js';\nimport { useTreeModel } from '../config/useTreeModel.js';\nimport { useTreeHandlers } from '../config/useTreeHandlers.js';\nimport {\n DSLeftNavigationTreeName,\n LEFT_NAVIGATION_TREE_DATA_TESTID,\n LEFT_NAVIGATION_TREE_DEFAULT_LABEL,\n} from '../constants/index.js';\nimport { DSLeftNavigationTreePropTypes, type DSLeftNavigationTreeT } from '../react-desc-prop-types.js';\nimport { TreeContext, type TreeContextValue } from './TreeContext.js';\nimport { TreeRoot } from './TreeRoot.js';\nimport { HeaderDisclosure } from './Header.js';\nimport { Footer } from './Footer.js';\nimport { StyledRoot } from './styled.js';\n\nexport const MainContent = React.memo(() => {\n const propsWithDefault = usePropsStore((state) => state) as DSLeftNavigationTreeT.InternalProps;\n useValidateTypescriptPropTypes(propsWithDefault, DSLeftNavigationTreePropTypes, DSLeftNavigationTreeName);\n const getOwnerProps = usePropsStore((state) => state.get);\n const expanded = usePropsStore((state) => state.expanded);\n const expandedWidth = usePropsStore((state) => state.expandedWidth);\n const labelOverflow = usePropsStore((state) => state.labelOverflow);\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n ...globalAttributes\n } = useGetGlobalAttributes<DSLeftNavigationTreeT.InternalProps, HTMLElement>(propsWithDefault);\n const nameProps = useMemo(\n () =>\n ariaLabelledBy\n ? { 'aria-labelledby': ariaLabelledBy }\n : { 'aria-label': ariaLabel ?? LEFT_NAVIGATION_TREE_DEFAULT_LABEL },\n [ariaLabel, ariaLabelledBy],\n );\n\n const model = useTreeModel();\n const handlers = useTreeHandlers(model);\n\n const instanceId = useId();\n const getElementId = useCallback(\n (kind: string, dsId: string) => `${instanceId}-${kind}-${encodeURIComponent(dsId)}`,\n [instanceId],\n );\n\n const contextValue: TreeContextValue = useMemo(\n () => ({ model, handlers, getOwnerProps, labelOverflow, getElementId }),\n [model, handlers, getOwnerProps, labelOverflow, getElementId],\n );\n\n return (\n <TreeContext.Provider value={contextValue}>\n <StyledRoot\n expanded={expanded}\n expandedWidth={expandedWidth}\n data-testid={LEFT_NAVIGATION_TREE_DATA_TESTID.ROOT}\n getOwnerProps={getOwnerProps}\n {...globalAttributes}\n {...xstyledProps}\n {...nameProps}\n >\n <HeaderDisclosure />\n <TreeRoot nameProps={nameProps} />\n <Footer />\n </StyledRoot>\n </TreeContext.Provider>\n );\n});\n\nMainContent.displayName = `${DSLeftNavigationTreeName}.MainContent`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useId, useMemo } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { usePropsStore } from '../config/store.js';\nimport { useTreeModel } from '../config/useTreeModel.js';\nimport { useTreeHandlers } from '../config/useTreeHandlers.js';\nimport {\n DSLeftNavigationTreeName,\n LEFT_NAVIGATION_TREE_DATA_TESTID,\n LEFT_NAVIGATION_TREE_DEFAULT_LABEL,\n} from '../constants/index.js';\nimport { DSLeftNavigationTreePropTypes, type DSLeftNavigationTreeT } from '../react-desc-prop-types.js';\nimport { TreeContext, type TreeContextValue } from './TreeContext.js';\nimport { TreeRoot } from './TreeRoot.js';\nimport { HeaderDisclosure } from './Header.js';\nimport { Footer } from './Footer.js';\nimport { StyledRoot } from './styled.js';\n\nexport const MainContent = React.memo(() => {\n const propsWithDefault = usePropsStore((state) => state) as DSLeftNavigationTreeT.InternalProps;\n useValidateTypescriptPropTypes(propsWithDefault, DSLeftNavigationTreePropTypes, DSLeftNavigationTreeName);\n const getOwnerProps = usePropsStore((state) => state.get);\n const expanded = usePropsStore((state) => state.expanded);\n const expandedWidth = usePropsStore((state) => state.expandedWidth);\n const labelOverflow = usePropsStore((state) => state.labelOverflow);\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n ...globalAttributes\n } = useGetGlobalAttributes<DSLeftNavigationTreeT.InternalProps, HTMLElement>(propsWithDefault);\n const nameProps = useMemo(\n () =>\n ariaLabelledBy\n ? { 'aria-labelledby': ariaLabelledBy }\n : { 'aria-label': ariaLabel ?? LEFT_NAVIGATION_TREE_DEFAULT_LABEL },\n [ariaLabel, ariaLabelledBy],\n );\n\n const model = useTreeModel();\n const handlers = useTreeHandlers(model);\n\n const instanceId = useId();\n const getElementId = useCallback(\n (kind: string, dsId: string) => `${instanceId}-${kind}-${encodeURIComponent(dsId)}`,\n [instanceId],\n );\n\n const rootId = globalAttributes.id ?? getElementId('root', 'nav');\n\n const contextValue: TreeContextValue = useMemo(\n () => ({ model, handlers, getOwnerProps, labelOverflow, getElementId, rootId }),\n [model, handlers, getOwnerProps, labelOverflow, getElementId, rootId],\n );\n\n return (\n <TreeContext.Provider value={contextValue}>\n <StyledRoot\n expanded={expanded}\n expandedWidth={expandedWidth}\n data-testid={LEFT_NAVIGATION_TREE_DATA_TESTID.ROOT}\n getOwnerProps={getOwnerProps}\n {...globalAttributes}\n {...xstyledProps}\n {...nameProps}\n id={rootId}\n >\n <HeaderDisclosure />\n <TreeRoot nameProps={nameProps} />\n <Footer />\n </StyledRoot>\n </TreeContext.Provider>\n );\n});\n\nMainContent.displayName = `${DSLeftNavigationTreeName}.MainContent`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACyDjB,SAUE,KAVF;AAzDN,OAAOA,UAAS,aAAa,OAAO,eAAe;AACnD,SAAS,wBAAwB,oBAAoB,sCAAsC;AAC3F,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qCAAiE;AAC1E,SAAS,mBAA0C;AACnD,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAEpB,MAAM,cAAcA,OAAM,KAAK,MAAM;AAC1C,QAAM,mBAAmB,cAAc,CAAC,UAAU,KAAK;AACvD,iCAA+B,kBAAkB,+BAA+B,wBAAwB;AACxG,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,WAAW,cAAc,CAAC,UAAU,MAAM,QAAQ;AACxD,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAElE,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM;AAAA,IACJ,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,GAAG;AAAA,EACL,IAAI,uBAAyE,gBAAgB;AAC7F,QAAM,YAAY;AAAA,IAChB,MACE,iBACI,EAAE,mBAAmB,eAAe,IACpC,EAAE,cAAc,aAAa,mCAAmC;AAAA,IACtE,CAAC,WAAW,cAAc;AAAA,EAC5B;AAEA,QAAM,QAAQ,aAAa;AAC3B,QAAM,WAAW,gBAAgB,KAAK;AAEtC,QAAM,aAAa,MAAM;AACzB,QAAM,eAAe;AAAA,IACnB,CAAC,MAAc,SAAiB,GAAG,UAAU,IAAI,IAAI,IAAI,mBAAmB,IAAI,CAAC;AAAA,IACjF,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,SAAS,iBAAiB,MAAM,aAAa,QAAQ,KAAK;AAEhE,QAAM,eAAiC;AAAA,IACrC,OAAO,EAAE,OAAO,UAAU,eAAe,eAAe,cAAc,OAAO;AAAA,IAC7E,CAAC,OAAO,UAAU,eAAe,eAAe,cAAc,MAAM;AAAA,EACtE;AAEA,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,cAC3B;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAa,iCAAiC;AAAA,MAC9C;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,IAAI;AAAA,MAEJ;AAAA,4BAAC,oBAAiB;AAAA,QAClB,oBAAC,YAAS,WAAsB;AAAA,QAChC,oBAAC,UAAO;AAAA;AAAA;AAAA,EACV,GACF;AAEJ,CAAC;AAED,YAAY,cAAc,GAAG,wBAAwB;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TreeContext.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport type { DSLeftNavigationTreeT } from '../react-desc-prop-types.js';\nimport type { TreeModel } from '../config/useTreeModel.js';\nimport type { useTreeHandlers } from '../config/useTreeHandlers.js';\n\nexport type TreeContextValue = {\n model: TreeModel;\n handlers: ReturnType<typeof useTreeHandlers>;\n getOwnerProps: () => object;\n labelOverflow: DSLeftNavigationTreeT.LabelOverflowT;\n getElementId: (kind: string, dsId: string) => string;\n};\n\nexport const TreeContext = createContext<TreeContextValue>({} as TreeContextValue);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport type { DSLeftNavigationTreeT } from '../react-desc-prop-types.js';\nimport type { TreeModel } from '../config/useTreeModel.js';\nimport type { useTreeHandlers } from '../config/useTreeHandlers.js';\n\nexport type TreeContextValue = {\n model: TreeModel;\n handlers: ReturnType<typeof useTreeHandlers>;\n getOwnerProps: () => object;\n labelOverflow: DSLeftNavigationTreeT.LabelOverflowT;\n getElementId: (kind: string, dsId: string) => string;\n /** Default id of the navigation landmark, the element the footer toggle controls. */\n rootId: string;\n};\n\nexport const TreeContext = createContext<TreeContextValue>({} as TreeContextValue);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAevB,MAAM,cAAc,cAAgC,CAAC,CAAqB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -7,5 +7,7 @@ export type TreeContextValue = {
|
|
|
7
7
|
getOwnerProps: () => object;
|
|
8
8
|
labelOverflow: DSLeftNavigationTreeT.LabelOverflowT;
|
|
9
9
|
getElementId: (kind: string, dsId: string) => string;
|
|
10
|
+
/** Default id of the navigation landmark, the element the footer toggle controls. */
|
|
11
|
+
rootId: string;
|
|
10
12
|
};
|
|
11
13
|
export declare const TreeContext: import("react").Context<TreeContextValue>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-left-navigation-tree",
|
|
3
|
-
"version": "3.80.0-next.
|
|
3
|
+
"version": "3.80.0-next.60",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Left Navigation Tree",
|
|
6
6
|
"files": [
|
|
@@ -36,24 +36,24 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-icons": "3.80.0-next.
|
|
40
|
-
"@elliemae/ds-props-helpers": "3.80.0-next.
|
|
41
|
-
"@elliemae/ds-system": "3.80.0-next.
|
|
42
|
-
"@elliemae/ds-zustand-helpers": "3.80.0-next.
|
|
39
|
+
"@elliemae/ds-icons": "3.80.0-next.60",
|
|
40
|
+
"@elliemae/ds-props-helpers": "3.80.0-next.60",
|
|
41
|
+
"@elliemae/ds-system": "3.80.0-next.60",
|
|
42
|
+
"@elliemae/ds-zustand-helpers": "3.80.0-next.60",
|
|
43
43
|
"@xstyled/styled-components": "~3.8.1"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@elliemae/ds-monorepo-devops": "3.80.0-next.
|
|
47
|
-
"@elliemae/ds-test-utils": "3.80.0-next.
|
|
48
|
-
"@elliemae/ds-typescript-helpers": "3.80.0-next.
|
|
46
|
+
"@elliemae/ds-monorepo-devops": "3.80.0-next.60",
|
|
47
|
+
"@elliemae/ds-test-utils": "3.80.0-next.60",
|
|
48
|
+
"@elliemae/ds-typescript-helpers": "3.80.0-next.60",
|
|
49
49
|
"@playwright/experimental-ct-react": "1.61.1",
|
|
50
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
51
|
+
"@testing-library/react": "^16.0.1",
|
|
52
|
+
"@testing-library/user-event": "~14.6.1",
|
|
50
53
|
"jest": "^30.0.0",
|
|
51
54
|
"styled-components": "~5.3.11"
|
|
52
55
|
},
|
|
53
56
|
"peerDependencies": {
|
|
54
|
-
"@testing-library/jest-dom": "^6.6.3",
|
|
55
|
-
"@testing-library/react": "^16.0.1",
|
|
56
|
-
"@testing-library/user-event": "~14.6.1",
|
|
57
57
|
"react": "^18.3.1",
|
|
58
58
|
"react-dom": "^18.3.1",
|
|
59
59
|
"styled-components": "~5.3.11"
|