@elliemae/ds-left-navigation-tree 0.0.0-stage → 3.80.0-next.38

package/dist/esm/config/useTreeModel.js

@@ -0,0 +1,90 @@
+import * as React from "react";
+import { useMemo, useState } from "react";
+import { LEFT_NAVIGATION_TREE_ITEM_TYPES, LEFT_NAVIGATION_TREE_REGION_FOCUSES } from "../constants/index.js";
+import { useInternalStore, usePropsStore } from "./store.js";
+import {
+  buildTreeIndex,
+  getAncestorIds,
+  getDocumentOrder,
+  getRowPaddings,
+  getRailIds,
+  getTabStopChainId,
+  getVisibleIds,
+  resolveFallbackTarget,
+  resolveIsOpen
+} from "./treeModel.js";
+const useTreeModel = () => {
+  const items = usePropsStore((state) => state.items);
+  const expanded = usePropsStore((state) => state.expanded);
+  const selectedItem = usePropsStore((state) => state.selectedItem);
+  const selectedParent = usePropsStore((state) => state.selectedParent);
+  const headerItem = usePropsStore((state) => state.HeaderComponent);
+  const openedItem = usePropsStore((state) => state.openedItem);
+  const toggles = useInternalStore((state) => state.toggles);
+  const internalSelectedItem = useInternalStore((state) => state.internalSelectedItem);
+  const [seed] = useState(
+    () => new Set(getAncestorIds(buildTreeIndex(items), selectedItem ?? internalSelectedItem))
+  );
+  return useMemo(() => {
+    const index = buildTreeIndex(items);
+    const isRail = !expanded;
+    const isHeaderOpen = !!headerItem && openedItem === headerItem.dsId;
+    const openIds = /* @__PURE__ */ new Set();
+    index.forEach((info) => {
+      if (resolveIsOpen(info, toggles, seed)) openIds.add(info.id);
+    });
+    let visibleIds = [];
+    if (isRail) visibleIds = getRailIds(items);
+    else visibleIds = getVisibleIds(index, items, (id) => openIds.has(id));
+    const visible = new Set(visibleIds);
+    const currentId = selectedItem !== void 0 ? selectedItem : internalSelectedItem;
+    const currentLeafId = currentId && index.get(currentId)?.item.type === LEFT_NAVIGATION_TREE_ITEM_TYPES.LEAF ? currentId : null;
+    const selectedParentIds = new Set(
+      selectedParent !== void 0 ? [selectedParent] : getAncestorIds(index, currentLeafId)
+    );
+    const documentOrder = getDocumentOrder(index, items);
+    const cache = { key: null, target: null };
+    const resolveFocusTarget = (focusRegion, focusedItemId) => {
+      if (focusRegion !== LEFT_NAVIGATION_TREE_REGION_FOCUSES.TREE || !focusedItemId) return null;
+      if (visible.has(focusedItemId)) return { kind: "item", id: focusedItemId };
+      if (cache.key !== focusedItemId) {
+        cache.key = focusedItemId;
+        cache.target = resolveFallbackTarget({
+          index,
+          documentOrder,
+          visibleIds,
+          lostId: focusedItemId,
+          currentId: currentLeafId
+        });
+      }
+      return cache.target;
+    };
+    return {
+      items,
+      index,
+      rowPaddings: getRowPaddings(index),
+      isRail,
+      headerItem,
+      isHeaderOpen,
+      openIds,
+      visibleIds,
+      currentId,
+      currentLeafId,
+      selectedParentIds,
+      chainTabStopId: getTabStopChainId(index, visibleIds, currentLeafId),
+      resolveFocusTarget
+    };
+  }, [items, expanded, headerItem, openedItem, toggles, seed, selectedItem, internalSelectedItem, selectedParent]);
+};
+const useItemFocusState = (model, id) => useInternalStore((state) => {
+  const target = model.resolveFocusTarget(state.focusRegion, state.focusedItemId);
+  if (target?.kind === "item") return target.id === id ? "focus-target" : "none";
+  return model.chainTabStopId === id ? "tab-stop" : "none";
+});
+const useIsFooterFocusTarget = (model) => useInternalStore((state) => model.resolveFocusTarget(state.focusRegion, state.focusedItemId)?.kind === "footer");
+export {
+  useIsFooterFocusTarget,
+  useItemFocusState,
+  useTreeModel
+};
+//# sourceMappingURL=useTreeModel.js.map

package/dist/esm/config/useTreeModel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTreeModel.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { useMemo, useState } from 'react';\nimport { LEFT_NAVIGATION_TREE_ITEM_TYPES, LEFT_NAVIGATION_TREE_REGION_FOCUSES } from '../constants/index.js';\nimport type { DSLeftNavigationTreeT } from '../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from './store.js';\nimport {\n  type FocusTarget,\n  type TreeIndex,\n  buildTreeIndex,\n  getAncestorIds,\n  getDocumentOrder,\n  getRowPaddings,\n  getRailIds,\n  getTabStopChainId,\n  getVisibleIds,\n  resolveFallbackTarget,\n  resolveIsOpen,\n} from './treeModel.js';\n\nexport type TreeModel = {\n  items: readonly DSLeftNavigationTreeT.Item[];\n  index: TreeIndex;\n  isRail: boolean;\n  headerItem: DSLeftNavigationTreeT.Item | undefined;\n  isHeaderOpen: boolean;\n  openIds: ReadonlySet<string>;\n  visibleIds: string[];\n  currentId: string | null;\n  currentLeafId: string | null;\n  selectedParentIds: ReadonlySet<string>;\n  chainTabStopId: string | null;\n  resolveFocusTarget: (focusRegion: string, focusedItemId: string | null) => FocusTarget;\n  rowPaddings: ReadonlyMap<string, number>;\n};\n\nexport const useTreeModel = (): TreeModel => {\n  const items = usePropsStore((state) => state.items);\n  const expanded = usePropsStore((state) => state.expanded);\n  const selectedItem = usePropsStore((state) => state.selectedItem);\n  const selectedParent = usePropsStore((state) => state.selectedParent);\n  const headerItem = usePropsStore((state) => state.HeaderComponent);\n  const openedItem = usePropsStore((state) => state.openedItem);\n\n  const toggles = useInternalStore((state) => state.toggles);\n  const internalSelectedItem = useInternalStore((state) => state.internalSelectedItem);\n\n  /**\n   * Captured once from the first render's props: ancestors of the initial current page start open.\n   * Later selection changes never reopen branches (the tab stop falls back to the nearest visible ancestor).\n   */\n  const [seed] = useState<ReadonlySet<string>>(\n    () => new Set(getAncestorIds(buildTreeIndex(items), selectedItem ?? internalSelectedItem)),\n  );\n\n  return useMemo(() => {\n    const index = buildTreeIndex(items);\n    const isRail = !expanded;\n    const isHeaderOpen = !!headerItem && openedItem === headerItem.dsId;\n\n    const openIds = new Set<string>();\n    index.forEach((info) => {\n      if (resolveIsOpen(info, toggles, seed)) openIds.add(info.id);\n    });\n\n    let visibleIds: string[] = [];\n    if (isRail) visibleIds = getRailIds(items);\n    else visibleIds = getVisibleIds(index, items, (id) => openIds.has(id));\n    const visible = new Set(visibleIds);\n\n    const currentId = selectedItem !== undefined ? selectedItem : internalSelectedItem;\n    const currentLeafId =\n      currentId && index.get(currentId)?.item.type === LEFT_NAVIGATION_TREE_ITEM_TYPES.LEAF ? currentId : null;\n    const selectedParentIds: ReadonlySet<string> = new Set(\n      selectedParent !== undefined ? [selectedParent] : getAncestorIds(index, currentLeafId),\n    );\n\n    const documentOrder = getDocumentOrder(index, items);\n    const cache: { key: string | null; target: FocusTarget } = { key: null, target: null };\n    /**\n     * Derived from the store by each item's own selector, so a focus move re-renders only the items whose\n     * flags change. Cached because every rendered item calls it with the same arguments on each store update.\n     */\n    const resolveFocusTarget = (focusRegion: string, focusedItemId: string | null): FocusTarget => {\n      if (focusRegion !== LEFT_NAVIGATION_TREE_REGION_FOCUSES.TREE || !focusedItemId) return null;\n      if (visible.has(focusedItemId)) return { kind: 'item', id: focusedItemId };\n      if (cache.key !== focusedItemId) {\n        cache.key = focusedItemId;\n        cache.target = resolveFallbackTarget({\n          index,\n          documentOrder,\n          visibleIds,\n          lostId: focusedItemId,\n          currentId: currentLeafId,\n        });\n      }\n      return cache.target;\n    };\n\n    return {\n      items,\n      index,\n      rowPaddings: getRowPaddings(index),\n      isRail,\n      headerItem,\n      isHeaderOpen,\n      openIds,\n      visibleIds,\n      currentId,\n      currentLeafId,\n      selectedParentIds,\n      chainTabStopId: getTabStopChainId(index, visibleIds, currentLeafId),\n      resolveFocusTarget,\n    };\n  }, [items, expanded, headerItem, openedItem, toggles, seed, selectedItem, internalSelectedItem, selectedParent]);\n};\n\nexport type ItemFocusState = 'focus-target' | 'tab-stop' | 'none';\n\n/** Primitive per-item result: the item re-renders only when its own focus state changes. */\nexport const useItemFocusState = (model: TreeModel, id: string): ItemFocusState =>\n  useInternalStore((state) => {\n    const target = model.resolveFocusTarget(state.focusRegion, state.focusedItemId);\n    if (target?.kind === 'item') return target.id === id ? 'focus-target' : 'none';\n    return model.chainTabStopId === id ? 'tab-stop' : 'none';\n  });\n\nexport const useIsFooterFocusTarget = (model: TreeModel): boolean =>\n  useInternalStore((state) => model.resolveFocusTarget(state.focusRegion, state.focusedItemId)?.kind === 'footer');\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/config/useValidateProps.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { DSLeftNavigationTreeName } from "../constants/index.js";
+const useValidateProps = (props, propTypes) => {
+  useValidateTypescriptPropTypes(props, propTypes, DSLeftNavigationTreeName);
+};
+export {
+  useValidateProps
+};
+//# sourceMappingURL=useValidateProps.js.map

package/dist/esm/config/useValidateProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSLeftNavigationTreeT } from '../react-desc-prop-types.js';\nimport { DSLeftNavigationTreeName } from '../constants/index.js';\n\nexport const useValidateProps = (\n  props: DSLeftNavigationTreeT.InternalProps,\n  propTypes: ValidationMap<unknown>,\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSLeftNavigationTreeName);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,gCAAgC;AAElC,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,iCAA+B,OAAO,WAAW,wBAAwB;AAC3E;",
+  "names": []
+}

package/dist/esm/constants/index.js

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+const DSLeftNavigationTreeName = "DSLeftnavigationtree";
+const LEFT_NAVIGATION_TREE_ITEM_TYPES = {
+  LEAF: "ds-left-nav-tree-item-leaf",
+  PARENT: "ds-left-nav-tree-item-parent",
+  SECTION: "ds-left-nav-tree-item-section",
+  SEPARATOR: "ds-left-nav-tree-item-separator"
+};
+const LEFT_NAVIGATION_TREE_DEFAULT_LABEL = "Primary";
+const LEFT_NAVIGATION_TREE_REGION_FOCUSES = {
+  RESET: "",
+  TREE: "tree",
+  HEADER: "header",
+  FOOTER: "footer"
+};
+const LEFT_NAVIGATION_TREE_SLOTS = {
+  ROOT: "root",
+  TREE: "tree",
+  ITEM: "item",
+  ITEM_ROW: "item-row",
+  ITEM_LABEL: "item-label",
+  LEFT_CONTAINER: "left-container",
+  COLLAPSED_CONTAINER: "collapsed-container",
+  RIGHT_CONTAINER: "right-container",
+  ARROW_CONTAINER: "arrow-container",
+  GROUP: "group",
+  SECTION_CONTAINER: "section-container",
+  SECTION_LABEL: "section-label",
+  ITEM_SEPARATOR: "item-separator",
+  HEADER_DISCLOSURE: "header-disclosure",
+  FOOTER_MENU: "footer-menu",
+  FOOTER_LABEL: "footer-label",
+  FOOTER_SEPARATOR: "footer-separator",
+  FOOTER_MENU_COLLAPSE: "footer-menu-collapse"
+};
+const LEFT_NAVIGATION_TREE_DATA_TESTID = slotObjectToDataTestIds(
+  DSLeftNavigationTreeName,
+  LEFT_NAVIGATION_TREE_SLOTS
+);
+export {
+  DSLeftNavigationTreeName,
+  LEFT_NAVIGATION_TREE_DATA_TESTID,
+  LEFT_NAVIGATION_TREE_DEFAULT_LABEL,
+  LEFT_NAVIGATION_TREE_ITEM_TYPES,
+  LEFT_NAVIGATION_TREE_REGION_FOCUSES,
+  LEFT_NAVIGATION_TREE_SLOTS
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSLeftNavigationTreeName = 'DSLeftnavigationtree';\n\nexport const LEFT_NAVIGATION_TREE_ITEM_TYPES = {\n  LEAF: 'ds-left-nav-tree-item-leaf',\n  PARENT: 'ds-left-nav-tree-item-parent',\n  SECTION: 'ds-left-nav-tree-item-section',\n  SEPARATOR: 'ds-left-nav-tree-item-separator',\n} as const;\n\nexport const LEFT_NAVIGATION_TREE_DEFAULT_LABEL = 'Primary';\n\n// we are naming this with the ${component_name}_region_focuses convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const LEFT_NAVIGATION_TREE_REGION_FOCUSES = {\n  RESET: '',\n  TREE: 'tree',\n  HEADER: 'header',\n  FOOTER: 'footer',\n} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const LEFT_NAVIGATION_TREE_SLOTS = {\n  ROOT: 'root',\n  TREE: 'tree',\n  ITEM: 'item',\n  ITEM_ROW: 'item-row',\n  ITEM_LABEL: 'item-label',\n  LEFT_CONTAINER: 'left-container',\n  COLLAPSED_CONTAINER: 'collapsed-container',\n  RIGHT_CONTAINER: 'right-container',\n  ARROW_CONTAINER: 'arrow-container',\n  GROUP: 'group',\n  SECTION_CONTAINER: 'section-container',\n  SECTION_LABEL: 'section-label',\n  ITEM_SEPARATOR: 'item-separator',\n  HEADER_DISCLOSURE: 'header-disclosure',\n  FOOTER_MENU: 'footer-menu',\n  FOOTER_LABEL: 'footer-label',\n  FOOTER_SEPARATOR: 'footer-separator',\n  FOOTER_MENU_COLLAPSE: 'footer-menu-collapse',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const LEFT_NAVIGATION_TREE_DATA_TESTID = slotObjectToDataTestIds(\n  DSLeftNavigationTreeName,\n  LEFT_NAVIGATION_TREE_SLOTS,\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,2BAA2B;AAEjC,MAAM,kCAAkC;AAAA,EAC7C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,WAAW;AACb;AAEO,MAAM,qCAAqC;AAG3C,MAAM,sCAAsC;AAAA,EACjD,OAAO;AAAA,EACP,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AACV;AAGO,MAAM,6BAA6B;AAAA,EACxC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,sBAAsB;AACxB;AAGO,MAAM,mCAAmC;AAAA,EAC9C;AAAA,EACA;AACF;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { DSLeftNavigationTree, DSLeftNavigationTreeWithSchema } from "./DSLeftNavigationTree.js";
+import {
+  DSLeftNavigationTreeItemSchema,
+  DSLeftNavigationTreeItemOptsSchema
+} from "./react-desc-prop-types.js";
+import {
+  DSLeftNavigationTreeName,
+  LEFT_NAVIGATION_TREE_ITEM_TYPES,
+  LEFT_NAVIGATION_TREE_REGION_FOCUSES,
+  LEFT_NAVIGATION_TREE_SLOTS,
+  LEFT_NAVIGATION_TREE_DATA_TESTID
+} from "./constants/index.js";
+export {
+  DSLeftNavigationTree,
+  DSLeftNavigationTreeItemOptsSchema,
+  DSLeftNavigationTreeItemSchema,
+  DSLeftNavigationTreeName,
+  DSLeftNavigationTreeWithSchema,
+  LEFT_NAVIGATION_TREE_DATA_TESTID,
+  LEFT_NAVIGATION_TREE_ITEM_TYPES,
+  LEFT_NAVIGATION_TREE_REGION_FOCUSES,
+  LEFT_NAVIGATION_TREE_SLOTS
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport { DSLeftNavigationTree, DSLeftNavigationTreeWithSchema } from './DSLeftNavigationTree.js';\nexport {\n  type DSLeftNavigationTreeT,\n  DSLeftNavigationTreeItemSchema,\n  DSLeftNavigationTreeItemOptsSchema,\n} from './react-desc-prop-types.js';\nexport {\n  DSLeftNavigationTreeName,\n  LEFT_NAVIGATION_TREE_ITEM_TYPES,\n  LEFT_NAVIGATION_TREE_REGION_FOCUSES,\n  LEFT_NAVIGATION_TREE_SLOTS,\n  LEFT_NAVIGATION_TREE_DATA_TESTID,\n} from './constants/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,sBAAsB,sCAAsC;AACrE;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
+  "names": []
+}

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/esm/parts/Footer.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useContext } from "react";
+import { MenuCollapse, MenuExpand } from "@elliemae/ds-icons";
+import { TreeContext } from "./TreeContext.js";
+import { usePropsStore } from "../config/store.js";
+import { useFocusTracker } from "../config/useFocusTracker.js";
+import { useIsFooterFocusTarget } from "../config/useTreeModel.js";
+import { StyledFooterButton, StyledFooterLabel, StyledFooterMenu, StyledFooterSeparator } from "./styled.js";
+const ICON_COLOR = ["brand-primary", "600"];
+const Footer = () => {
+  const { model, getOwnerProps } = useContext(TreeContext);
+  const footerLabel = usePropsStore((state) => state.footerLabel);
+  const onFooterExpand = usePropsStore((state) => state.onFooterExpand);
+  const onFooterClose = usePropsStore((state) => state.onFooterClose);
+  const { trackFocusFooter } = useFocusTracker();
+  const expanded = !model.isRail;
+  const showLabel = expanded && !!footerLabel;
+  const isFocusTarget = useIsFooterFocusTarget(model);
+  const focusRef = useCallback(
+    (node) => {
+      if (node && isFocusTarget) node.focus();
+    },
+    [isFocusTarget]
+  );
+  const handleClick = useCallback(
+    (e) => {
+      if (expanded) onFooterClose(e);
+      else onFooterExpand(e);
+    },
+    [expanded, onFooterClose, onFooterExpand]
+  );
+  return /* @__PURE__ */ jsxs(StyledFooterMenu, { expanded, getOwnerProps, children: [
+    showLabel ? /* @__PURE__ */ jsx(StyledFooterLabel, { getOwnerProps, children: footerLabel }) : null,
+    showLabel ? /* @__PURE__ */ jsx(StyledFooterSeparator, { "aria-hidden": "true", getOwnerProps }) : null,
+    /* @__PURE__ */ jsx(
+      StyledFooterButton,
+      {
+        type: "button",
+        "aria-label": expanded ? "Collapse left navigation" : "Expand left navigation",
+        onClick: handleClick,
+        onFocus: trackFocusFooter,
+        innerRef: focusRef,
+        getOwnerProps,
+        children: expanded ? /* @__PURE__ */ jsx(MenuCollapse, { size: "m", color: ICON_COLOR }) : /* @__PURE__ */ jsx(MenuExpand, { size: "m", color: ICON_COLOR })
+      }
+    )
+  ] });
+};
+export {
+  Footer
+};
+//# sourceMappingURL=Footer.js.map

package/dist/esm/parts/Footer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Footer.tsx"],
+  "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 ? 'Collapse left navigation' : 'Expand left navigation'}\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACmCnB,SACe,KADf;AAnCJ,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;AAEnC,MAAM,SAAS,MAAM;AAC1B,QAAM,EAAE,OAAO,cAAc,IAAI,WAAW,WAAW;AACvD,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,WAAW,6BAA6B;AAAA,QACpD,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;",
+  "names": []
+}

package/dist/esm/parts/Header.js

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useContext } from "react";
+import { ChevronSmallDown, ChevronSmallRight } from "@elliemae/ds-icons";
+import { TreeContext } from "./TreeContext.js";
+import { usePropsStore } from "../config/store.js";
+import { useFocusTracker } from "../config/useFocusTracker.js";
+import {
+  StyledArrowContainer,
+  StyledCollapsedContainer,
+  StyledHeaderDisclosure,
+  StyledItemLabel,
+  StyledLeftContainer,
+  StyledRightContainer
+} from "./styled.js";
+const HIDDEN_LABEL_STYLE = { display: "none" };
+const CHEVRON_COLOR = ["brand-primary", "800"];
+const HeaderDisclosure = () => {
+  const { model, getOwnerProps, labelOverflow, getElementId } = useContext(TreeContext);
+  const onItemClick = usePropsStore((state) => state.onItemClick);
+  const { trackFocusHeader } = useFocusTracker();
+  const { headerItem, isHeaderOpen, isRail } = model;
+  const handleClick = useCallback(
+    (e) => {
+      if (headerItem) onItemClick(headerItem, e);
+    },
+    [headerItem, onItemClick]
+  );
+  const getOwnerPropsArguments = useCallback(
+    () => ({ item: headerItem, level: 1, isOpen: isHeaderOpen && !isRail, isCurrent: false }),
+    [headerItem, isHeaderOpen, isRail]
+  );
+  if (!headerItem) return null;
+  const { label, RightComponent } = headerItem.itemOpts ?? {};
+  const { CollapsedComponent } = headerItem;
+  const labelId = getElementId("label", headerItem.dsId);
+  const descriptionId = getElementId("description", headerItem.dsId);
+  return /* @__PURE__ */ jsxs(
+    StyledHeaderDisclosure,
+    {
+      type: "button",
+      isRail,
+      isOpen: isHeaderOpen && !isRail,
+      "aria-labelledby": labelId,
+      "aria-describedby": RightComponent && !isRail ? descriptionId : void 0,
+      "aria-expanded": isRail ? void 0 : isHeaderOpen,
+      "aria-controls": isRail || model.visibleIds.length === 0 ? void 0 : getElementId("tree", "root"),
+      onClick: handleClick,
+      onFocus: trackFocusHeader,
+      getOwnerProps,
+      children: [
+        isRail ? /* @__PURE__ */ jsx(StyledCollapsedContainer, { getOwnerProps, getOwnerPropsArguments, children: CollapsedComponent ? /* @__PURE__ */ jsx(CollapsedComponent, { item: headerItem }) : null }) : /* @__PURE__ */ jsx(StyledLeftContainer, { getOwnerProps, getOwnerPropsArguments, children: CollapsedComponent ? /* @__PURE__ */ jsx(CollapsedComponent, { item: headerItem }) : null }),
+        /* @__PURE__ */ jsx(
+          StyledItemLabel,
+          {
+            id: labelId,
+            isTall: true,
+            labelOverflow: headerItem.itemOpts?.labelOverflow ?? labelOverflow,
+            style: isRail ? HIDDEN_LABEL_STYLE : void 0,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: label
+          }
+        ),
+        RightComponent && !isRail ? /* @__PURE__ */ jsx(
+          StyledRightContainer,
+          {
+            id: descriptionId,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: /* @__PURE__ */ jsx(RightComponent, { item: headerItem })
+          }
+        ) : null,
+        isRail ? null : /* @__PURE__ */ jsx(
+          StyledArrowContainer,
+          {
+            "aria-hidden": "true",
+            isLeading: false,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: isHeaderOpen ? /* @__PURE__ */ jsx(ChevronSmallDown, { size: "m", color: CHEVRON_COLOR }) : /* @__PURE__ */ jsx(ChevronSmallRight, { size: "m", color: CHEVRON_COLOR })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  HeaderDisclosure
+};
+//# sourceMappingURL=Header.js.map

package/dist/esm/parts/Header.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Header.tsx"],
+  "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={isRail || model.visibleIds.length === 0 ? undefined : getElementId('tree', 'root')}\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"],
+  "mappings": "AAAA,YAAY,WAAW;AC0CnB,SAc4B,KAd5B;AAzCJ,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,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,UAAU,MAAM,WAAW,WAAW,IAAI,SAAY,aAAa,QAAQ,MAAM;AAAA,MAChG,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;",
+  "names": []
+}

package/dist/esm/parts/MainContent.js

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2, { useCallback, useId, useMemo } from "react";
+import { useGetGlobalAttributes, useGetXstyledProps, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { usePropsStore } from "../config/store.js";
+import { useTreeModel } from "../config/useTreeModel.js";
+import { useTreeHandlers } from "../config/useTreeHandlers.js";
+import {
+  DSLeftNavigationTreeName,
+  LEFT_NAVIGATION_TREE_DATA_TESTID,
+  LEFT_NAVIGATION_TREE_DEFAULT_LABEL
+} from "../constants/index.js";
+import { DSLeftNavigationTreePropTypes } from "../react-desc-prop-types.js";
+import { TreeContext } from "./TreeContext.js";
+import { TreeRoot } from "./TreeRoot.js";
+import { HeaderDisclosure } from "./Header.js";
+import { Footer } from "./Footer.js";
+import { StyledRoot } from "./styled.js";
+const MainContent = React2.memo(() => {
+  const propsWithDefault = usePropsStore((state) => state);
+  useValidateTypescriptPropTypes(propsWithDefault, DSLeftNavigationTreePropTypes, DSLeftNavigationTreeName);
+  const getOwnerProps = usePropsStore((state) => state.get);
+  const expanded = usePropsStore((state) => state.expanded);
+  const expandedWidth = usePropsStore((state) => state.expandedWidth);
+  const labelOverflow = usePropsStore((state) => state.labelOverflow);
+  const xstyledProps = useGetXstyledProps(propsWithDefault);
+  const {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ...globalAttributes
+  } = useGetGlobalAttributes(propsWithDefault);
+  const nameProps = useMemo(
+    () => ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : { "aria-label": ariaLabel ?? LEFT_NAVIGATION_TREE_DEFAULT_LABEL },
+    [ariaLabel, ariaLabelledBy]
+  );
+  const model = useTreeModel();
+  const handlers = useTreeHandlers(model);
+  const instanceId = useId();
+  const getElementId = useCallback(
+    (kind, dsId) => `${instanceId}-${kind}-${encodeURIComponent(dsId)}`,
+    [instanceId]
+  );
+  const contextValue = useMemo(
+    () => ({ model, handlers, getOwnerProps, labelOverflow, getElementId }),
+    [model, handlers, getOwnerProps, labelOverflow, getElementId]
+  );
+  return /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    StyledRoot,
+    {
+      expanded,
+      expandedWidth,
+      "data-testid": LEFT_NAVIGATION_TREE_DATA_TESTID.ROOT,
+      getOwnerProps,
+      ...globalAttributes,
+      ...xstyledProps,
+      ...nameProps,
+      children: [
+        /* @__PURE__ */ jsx(HeaderDisclosure, {}),
+        /* @__PURE__ */ jsx(TreeRoot, { nameProps }),
+        /* @__PURE__ */ jsx(Footer, {})
+      ]
+    }
+  ) });
+});
+MainContent.displayName = `${DSLeftNavigationTreeName}.MainContent`;
+export {
+  MainContent
+};
+//# sourceMappingURL=MainContent.js.map

package/dist/esm/parts/MainContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/MainContent.tsx"],
+  "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACuDjB,SASE,KATF;AAvDN,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,eAAiC;AAAA,IACrC,OAAO,EAAE,OAAO,UAAU,eAAe,eAAe,aAAa;AAAA,IACrE,CAAC,OAAO,UAAU,eAAe,eAAe,YAAY;AAAA,EAC9D;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,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;",
+  "names": ["React"]
+}

package/dist/esm/parts/RailItem.js

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2, { useCallback, useContext } from "react";
+import { ROW_PADDING } from "../config/treeModel.js";
+import { useItemFocusState } from "../config/useTreeModel.js";
+import { TreeContext } from "./TreeContext.js";
+import { StyledCollapsedContainer, StyledItem, StyledItemLabel, StyledItemRow } from "./styled.js";
+const HIDDEN_LABEL_STYLE = { display: "none" };
+const RailItem = React2.memo(({ id }) => {
+  const { model, handlers, getOwnerProps, labelOverflow, getElementId } = useContext(TreeContext);
+  const info = model.index.get(id);
+  const isCurrent = model.currentLeafId === id;
+  const isSelectedParent = model.selectedParentIds.has(id);
+  const focusState = useItemFocusState(model, id);
+  const item = info?.item;
+  const focusRef = useCallback(
+    (node) => {
+      if (node && focusState === "focus-target") node.focus();
+    },
+    [focusState]
+  );
+  const handleClick = useCallback((e) => handlers.activate(id, e), [handlers, id]);
+  const getOwnerPropsArguments = useCallback(() => ({ item, level: 1, isOpen: false, isCurrent }), [item, isCurrent]);
+  if (!info || !item?.CollapsedComponent) return null;
+  const { CollapsedComponent } = item;
+  const labelId = getElementId("label", id);
+  return /* @__PURE__ */ jsx(
+    StyledItem,
+    {
+      isOpenSection: false,
+      role: "treeitem",
+      "aria-level": 1,
+      "aria-current": isCurrent ? "page" : void 0,
+      "aria-labelledby": labelId,
+      tabIndex: focusState === "none" ? -1 : 0,
+      "data-dsid": id,
+      "data-type": item.type,
+      "data-selected": isCurrent,
+      "data-selectedparent": isSelectedParent,
+      innerRef: focusRef,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: /* @__PURE__ */ jsxs(
+        StyledItemRow,
+        {
+          "data-row": true,
+          rowPadding: ROW_PADDING,
+          isTall: true,
+          isSticky: false,
+          isCurrent,
+          isSelectedParent,
+          onClick: handleClick,
+          getOwnerProps,
+          getOwnerPropsArguments,
+          children: [
+            /* @__PURE__ */ jsx(StyledCollapsedContainer, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ jsx(CollapsedComponent, { item }) }),
+            /* @__PURE__ */ jsx(
+              StyledItemLabel,
+              {
+                id: labelId,
+                isTall: true,
+                labelOverflow,
+                style: HIDDEN_LABEL_STYLE,
+                getOwnerProps,
+                getOwnerPropsArguments,
+                children: item.itemOpts?.label
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+RailItem.displayName = "DSLeftNavigationTree.RailItem";
+export {
+  RailItem
+};
+//# sourceMappingURL=RailItem.js.map

package/dist/esm/parts/RailItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/RailItem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext } from 'react';\nimport { ROW_PADDING } from '../config/treeModel.js';\nimport { useItemFocusState } from '../config/useTreeModel.js';\nimport { TreeContext } from './TreeContext.js';\nimport { StyledCollapsedContainer, StyledItem, StyledItemLabel, StyledItemRow } from './styled.js';\n\nconst HIDDEN_LABEL_STYLE = { display: 'none' };\n\n/**\n * Collapsed-rail node: an icon-only end treeitem. The label stays in the DOM with display: none\n * because it is the aria-labelledby target (hidden targets still name the element, and are not read twice).\n */\nexport const RailItem = React.memo(({ id }: { id: string }) => {\n  const { model, handlers, getOwnerProps, labelOverflow, getElementId } = useContext(TreeContext);\n  const info = model.index.get(id);\n  const isCurrent = model.currentLeafId === id;\n  const isSelectedParent = model.selectedParentIds.has(id);\n  const focusState = useItemFocusState(model, id);\n  const item = info?.item;\n\n  const focusRef = useCallback(\n    (node: HTMLElement | null) => {\n      if (node && focusState === 'focus-target') node.focus();\n    },\n    [focusState],\n  );\n  const handleClick = useCallback((e: React.MouseEvent<HTMLElement>) => handlers.activate(id, e), [handlers, id]);\n  const getOwnerPropsArguments = useCallback(() => ({ item, level: 1, isOpen: false, isCurrent }), [item, isCurrent]);\n\n  if (!info || !item?.CollapsedComponent) return null;\n  const { CollapsedComponent } = item;\n  const labelId = getElementId('label', id);\n\n  return (\n    <StyledItem\n      isOpenSection={false}\n      role=\"treeitem\"\n      aria-level={1}\n      aria-current={isCurrent ? 'page' : undefined}\n      aria-labelledby={labelId}\n      tabIndex={focusState === 'none' ? -1 : 0}\n      data-dsid={id}\n      data-type={item.type}\n      data-selected={isCurrent}\n      data-selectedparent={isSelectedParent}\n      innerRef={focusRef}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledItemRow\n        data-row\n        rowPadding={ROW_PADDING}\n        isTall\n        isSticky={false}\n        isCurrent={isCurrent}\n        isSelectedParent={isSelectedParent}\n        onClick={handleClick}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledCollapsedContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          <CollapsedComponent item={item} />\n        </StyledCollapsedContainer>\n        <StyledItemLabel\n          id={labelId}\n          isTall\n          labelOverflow={labelOverflow}\n          style={HIDDEN_LABEL_STYLE}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {item.itemOpts?.label}\n        </StyledItemLabel>\n      </StyledItemRow>\n    </StyledItem>\n  );\n});\n\nRailItem.displayName = 'DSLeftNavigationTree.RailItem';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiDjB,SAYI,KAZJ;AAjDN,OAAOA,UAAS,aAAa,kBAAkB;AAC/C,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B,YAAY,iBAAiB,qBAAqB;AAErF,MAAM,qBAAqB,EAAE,SAAS,OAAO;AAMtC,MAAM,WAAWA,OAAM,KAAK,CAAC,EAAE,GAAG,MAAsB;AAC7D,QAAM,EAAE,OAAO,UAAU,eAAe,eAAe,aAAa,IAAI,WAAW,WAAW;AAC9F,QAAM,OAAO,MAAM,MAAM,IAAI,EAAE;AAC/B,QAAM,YAAY,MAAM,kBAAkB;AAC1C,QAAM,mBAAmB,MAAM,kBAAkB,IAAI,EAAE;AACvD,QAAM,aAAa,kBAAkB,OAAO,EAAE;AAC9C,QAAM,OAAO,MAAM;AAEnB,QAAM,WAAW;AAAA,IACf,CAAC,SAA6B;AAC5B,UAAI,QAAQ,eAAe,eAAgB,MAAK,MAAM;AAAA,IACxD;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,QAAM,cAAc,YAAY,CAAC,MAAqC,SAAS,SAAS,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC;AAC9G,QAAM,yBAAyB,YAAY,OAAO,EAAE,MAAM,OAAO,GAAG,QAAQ,OAAO,UAAU,IAAI,CAAC,MAAM,SAAS,CAAC;AAElH,MAAI,CAAC,QAAQ,CAAC,MAAM,mBAAoB,QAAO;AAC/C,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,UAAU,aAAa,SAAS,EAAE;AAExC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe;AAAA,MACf,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,gBAAc,YAAY,SAAS;AAAA,MACnC,mBAAiB;AAAA,MACjB,UAAU,eAAe,SAAS,KAAK;AAAA,MACvC,aAAW;AAAA,MACX,aAAW,KAAK;AAAA,MAChB,iBAAe;AAAA,MACf,uBAAqB;AAAA,MACrB,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,YAAQ;AAAA,UACR,YAAY;AAAA,UACZ,QAAM;AAAA,UACN,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,4BAAyB,eAA8B,wBACtD,8BAAC,sBAAmB,MAAY,GAClC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAI;AAAA,gBACJ,QAAM;AAAA,gBACN;AAAA,gBACA,OAAO;AAAA,gBACP;AAAA,gBACA;AAAA,gBAEC,eAAK,UAAU;AAAA;AAAA,YAClB;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,SAAS,cAAc;",
+  "names": ["React"]
+}

package/dist/esm/parts/TreeContext.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { createContext } from "react";
+const TreeContext = createContext({});
+export {
+  TreeContext
+};
+//# sourceMappingURL=TreeContext.js.map

package/dist/esm/parts/TreeContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TreeContext.ts"],
+  "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAavB,MAAM,cAAc,cAAgC,CAAC,CAAqB;",
+  "names": []
+}