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

package/dist/esm/parts/TreeItem.js

@@ -0,0 +1,149 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2, { useCallback, useContext } from "react";
+import { ArrowheadDown, ArrowheadRight, ChevronSmallDown, ChevronSmallRight } from "@elliemae/ds-icons";
+import { ROW_PADDING, hasChildren, hasLeadingArrow } from "../config/treeModel.js";
+import { useItemFocusState } from "../config/useTreeModel.js";
+import { TreeContext } from "./TreeContext.js";
+import {
+  StyledArrowContainer,
+  StyledGroup,
+  StyledItem,
+  StyledItemLabel,
+  StyledItemRow,
+  StyledLeftContainer,
+  StyledRightContainer
+} from "./styled.js";
+const ARROW_COLOR = ["brand-primary", "800"];
+const TreeItemArrow = ({
+  isLeading,
+  isOpen,
+  getOwnerProps,
+  getOwnerPropsArguments
+}) => {
+  const Arrowhead = isOpen ? ArrowheadDown : ArrowheadRight;
+  const Chevron = isOpen ? ChevronSmallDown : ChevronSmallRight;
+  return /* @__PURE__ */ jsx(
+    StyledArrowContainer,
+    {
+      "aria-hidden": "true",
+      isLeading,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: isLeading ? /* @__PURE__ */ jsx(Arrowhead, { size: "s", color: ARROW_COLOR }) : /* @__PURE__ */ jsx(Chevron, { size: "m", color: ARROW_COLOR })
+    }
+  );
+};
+const TreeItem = React2.memo(({ id }) => {
+  const { model, handlers, getOwnerProps, labelOverflow, getElementId } = useContext(TreeContext);
+  const info = model.index.get(id);
+  const isParent = hasChildren(info);
+  const isOpen = model.openIds.has(id);
+  const isCurrent = model.currentLeafId === id;
+  const isSelectedParent = model.selectedParentIds.has(id);
+  const focusState = useItemFocusState(model, id);
+  const level = info?.level ?? 1;
+  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, isOpen, isCurrent }),
+    [item, level, isOpen, isCurrent]
+  );
+  if (!info || !item) return null;
+  const { label, RightComponent } = item.itemOpts ?? {};
+  const { CollapsedComponent } = item;
+  const labelId = getElementId("label", id);
+  const leadingArrow = hasLeadingArrow(info);
+  const isOpenSection = level === 1 && isParent && isOpen && !!CollapsedComponent;
+  const descriptionId = getElementId("description", id);
+  return /* @__PURE__ */ jsxs(
+    StyledItem,
+    {
+      isOpenSection,
+      role: "treeitem",
+      "aria-level": level,
+      "aria-expanded": isParent ? isOpen : void 0,
+      "aria-current": isCurrent ? "page" : void 0,
+      "aria-labelledby": labelId,
+      "aria-describedby": RightComponent ? descriptionId : void 0,
+      tabIndex: focusState === "none" ? -1 : 0,
+      "data-dsid": id,
+      "data-type": item.type,
+      "data-selected": isCurrent,
+      "data-selectedparent": isSelectedParent,
+      "data-opened": isParent ? isOpen : void 0,
+      innerRef: focusRef,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: [
+        /* @__PURE__ */ jsxs(
+          StyledItemRow,
+          {
+            "data-row": true,
+            rowPadding: model.rowPaddings.get(id) ?? ROW_PADDING,
+            isTall: level === 1 && !!CollapsedComponent,
+            isSticky: isOpenSection,
+            isCurrent,
+            isSelectedParent,
+            onClick: handleClick,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: [
+              CollapsedComponent ? /* @__PURE__ */ jsx(StyledLeftContainer, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ jsx(CollapsedComponent, { item }) }) : null,
+              leadingArrow ? /* @__PURE__ */ jsx(
+                TreeItemArrow,
+                {
+                  isLeading: leadingArrow,
+                  isOpen,
+                  getOwnerProps,
+                  getOwnerPropsArguments
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                StyledItemLabel,
+                {
+                  id: labelId,
+                  isTall: level === 1 && !!CollapsedComponent,
+                  labelOverflow: item.itemOpts?.labelOverflow ?? labelOverflow,
+                  getOwnerProps,
+                  getOwnerPropsArguments,
+                  children: label
+                }
+              ),
+              RightComponent ? /* @__PURE__ */ jsx(
+                StyledRightContainer,
+                {
+                  id: descriptionId,
+                  getOwnerProps,
+                  getOwnerPropsArguments,
+                  children: /* @__PURE__ */ jsx(RightComponent, { item })
+                }
+              ) : null,
+              isParent && !leadingArrow ? /* @__PURE__ */ jsx(
+                TreeItemArrow,
+                {
+                  isLeading: leadingArrow,
+                  isOpen,
+                  getOwnerProps,
+                  getOwnerPropsArguments
+                }
+              ) : null
+            ]
+          }
+        ),
+        isParent && isOpen ? /* @__PURE__ */ jsx(StyledGroup, { role: "group", getOwnerProps, getOwnerPropsArguments, children: info.childIds.map((childId) => /* @__PURE__ */ jsx(TreeItem, { id: childId }, childId)) }) : null
+      ]
+    }
+  );
+});
+TreeItem.displayName = "DSLeftNavigationTree.TreeItem";
+export {
+  TreeItem
+};
+//# sourceMappingURL=TreeItem.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TreeItem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { ArrowheadDown, ArrowheadRight, ChevronSmallDown, ChevronSmallRight } from '@elliemae/ds-icons';\nimport { ROW_PADDING, hasChildren, hasLeadingArrow } from '../config/treeModel.js';\nimport { useItemFocusState } from '../config/useTreeModel.js';\nimport { TreeContext } from './TreeContext.js';\nimport {\n  StyledArrowContainer,\n  StyledGroup,\n  StyledItem,\n  StyledItemLabel,\n  StyledItemRow,\n  StyledLeftContainer,\n  StyledRightContainer,\n} from './styled.js';\n\nconst ARROW_COLOR = ['brand-primary', '800'] as ['brand-primary', '800'];\n\n/** Parents without an icon lead with an arrowhead; parents with an icon trail a chevron (spec \"forward chevron\"). */\nconst TreeItemArrow = ({\n  isLeading,\n  isOpen,\n  getOwnerProps,\n  getOwnerPropsArguments,\n}: {\n  isLeading: boolean;\n  isOpen: boolean;\n  getOwnerProps: () => object;\n  getOwnerPropsArguments: () => object;\n}) => {\n  const Arrowhead = isOpen ? ArrowheadDown : ArrowheadRight;\n  const Chevron = isOpen ? ChevronSmallDown : ChevronSmallRight;\n  return (\n    <StyledArrowContainer\n      aria-hidden=\"true\"\n      isLeading={isLeading}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {isLeading ? <Arrowhead size=\"s\" color={ARROW_COLOR} /> : <Chevron size=\"m\" color={ARROW_COLOR} />}\n    </StyledArrowContainer>\n  );\n};\n\nexport const TreeItem = React.memo(({ id }: { id: string }) => {\n  const { model, handlers, getOwnerProps, labelOverflow, getElementId } = useContext(TreeContext);\n  const info = model.index.get(id);\n  const isParent = hasChildren(info);\n  const isOpen = model.openIds.has(id);\n  const isCurrent = model.currentLeafId === id;\n  const isSelectedParent = model.selectedParentIds.has(id);\n  const focusState = useItemFocusState(model, id);\n  const level = info?.level ?? 1;\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(\n    () => ({ item, level, isOpen, isCurrent }),\n    [item, level, isOpen, isCurrent],\n  );\n\n  if (!info || !item) return null;\n  const { label, RightComponent } = item.itemOpts ?? {};\n  const { CollapsedComponent } = item;\n  const labelId = getElementId('label', id);\n  const leadingArrow = hasLeadingArrow(info);\n  /** Spec \"Expand in place\": an open root section (a parent with an icon) and its children show the full-height bar. */\n  const isOpenSection = level === 1 && isParent && isOpen && !!CollapsedComponent;\n  const descriptionId = getElementId('description', id);\n\n  return (\n    <StyledItem\n      isOpenSection={isOpenSection}\n      role=\"treeitem\"\n      aria-level={level}\n      aria-expanded={isParent ? isOpen : undefined}\n      aria-current={isCurrent ? 'page' : undefined}\n      aria-labelledby={labelId}\n      aria-describedby={RightComponent ? descriptionId : undefined}\n      tabIndex={focusState === 'none' ? -1 : 0}\n      data-dsid={id}\n      data-type={item.type}\n      data-selected={isCurrent}\n      data-selectedparent={isSelectedParent}\n      data-opened={isParent ? isOpen : undefined}\n      innerRef={focusRef}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledItemRow\n        data-row\n        rowPadding={model.rowPaddings.get(id) ?? ROW_PADDING}\n        isTall={level === 1 && !!CollapsedComponent}\n        isSticky={isOpenSection}\n        isCurrent={isCurrent}\n        isSelectedParent={isSelectedParent}\n        onClick={handleClick}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {CollapsedComponent ? (\n          <StyledLeftContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            <CollapsedComponent item={item} />\n          </StyledLeftContainer>\n        ) : null}\n        {leadingArrow ? (\n          <TreeItemArrow\n            isLeading={leadingArrow}\n            isOpen={isOpen}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        ) : null}\n        <StyledItemLabel\n          id={labelId}\n          isTall={level === 1 && !!CollapsedComponent}\n          labelOverflow={item.itemOpts?.labelOverflow ?? labelOverflow}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {label}\n        </StyledItemLabel>\n        {RightComponent ? (\n          <StyledRightContainer\n            id={descriptionId}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <RightComponent item={item} />\n          </StyledRightContainer>\n        ) : null}\n        {isParent && !leadingArrow ? (\n          <TreeItemArrow\n            isLeading={leadingArrow}\n            isOpen={isOpen}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        ) : null}\n      </StyledItemRow>\n      {isParent && isOpen ? (\n        <StyledGroup role=\"group\" getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          {info.childIds.map((childId) => (\n            <TreeItem key={childId} id={childId} />\n          ))}\n        </StyledGroup>\n      ) : null}\n    </StyledItem>\n  );\n});\n\nTreeItem.displayName = 'DSLeftNavigationTree.TreeItem';\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/esm/parts/TreeRoot.js

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { LEFT_NAVIGATION_TREE_ITEM_TYPES } from "../constants/index.js";
+import { TreeContext } from "./TreeContext.js";
+import { TreeItem } from "./TreeItem.js";
+import { RailItem } from "./RailItem.js";
+import { StyledItemSeparator, StyledSectionContainer, StyledSectionLabel, StyledTree } from "./styled.js";
+const TreeRoot = ({ nameProps }) => {
+  const { model, handlers, getOwnerProps, getElementId } = useContext(TreeContext);
+  if (model.visibleIds.length === 0) return null;
+  const isHeaderContent = !!model.headerItem && model.isHeaderOpen && !model.isRail;
+  const treeNameProps = isHeaderContent && model.headerItem ? { "aria-labelledby": getElementId("label", model.headerItem.dsId) } : nameProps;
+  const renderRootEntries = () => model.items.map((item) => {
+    if (item.type === LEFT_NAVIGATION_TREE_ITEM_TYPES.SEPARATOR) {
+      return /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx(StyledItemSeparator, { "aria-hidden": "true", getOwnerProps }) }, item.dsId);
+    }
+    if (item.type === LEFT_NAVIGATION_TREE_ITEM_TYPES.SECTION) {
+      const sectionLabelId = getElementId("section", item.dsId);
+      const childIds = (item.itemOpts?.items ?? []).map((child) => child.dsId).filter((id) => model.index.has(id));
+      return /* @__PURE__ */ jsxs("li", { role: "none", children: [
+        /* @__PURE__ */ jsx(StyledSectionLabel, { id: sectionLabelId, "aria-hidden": "true", getOwnerProps, children: item.itemOpts?.label }),
+        /* @__PURE__ */ jsx(StyledSectionContainer, { role: "group", "aria-labelledby": sectionLabelId, getOwnerProps, children: childIds.map((id) => /* @__PURE__ */ jsx(TreeItem, { id }, id)) })
+      ] }, item.dsId);
+    }
+    return model.index.has(item.dsId) ? /* @__PURE__ */ jsx(TreeItem, { id: item.dsId }, item.dsId) : null;
+  });
+  return /* @__PURE__ */ jsx(
+    StyledTree,
+    {
+      id: getElementId("tree", "root"),
+      role: "tree",
+      isHeaderContent,
+      ...treeNameProps,
+      onKeyDown: handlers.onTreeKeyDown,
+      onFocus: handlers.onTreeFocus,
+      onBlur: handlers.onTreeBlur,
+      getOwnerProps,
+      children: model.isRail ? model.visibleIds.map((id) => /* @__PURE__ */ jsx(RailItem, { id }, id)) : renderRootEntries()
+    }
+  );
+};
+export {
+  TreeRoot
+};
+//# sourceMappingURL=TreeRoot.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TreeRoot.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { LEFT_NAVIGATION_TREE_ITEM_TYPES } from '../constants/index.js';\nimport { TreeContext } from './TreeContext.js';\nimport { TreeItem } from './TreeItem.js';\nimport { RailItem } from './RailItem.js';\nimport { StyledItemSeparator, StyledSectionContainer, StyledSectionLabel, StyledTree } from './styled.js';\n\ntype NameProps = { 'aria-label'?: string; 'aria-labelledby'?: string };\n\nexport const TreeRoot = ({ nameProps }: { nameProps: NameProps }) => {\n  const { model, handlers, getOwnerProps, getElementId } = useContext(TreeContext);\n  if (model.visibleIds.length === 0) return null;\n  /** While the header is open the tree shows its content, so it takes the header's name instead of the landmark's. */\n  const isHeaderContent = !!model.headerItem && model.isHeaderOpen && !model.isRail;\n  const treeNameProps =\n    isHeaderContent && model.headerItem\n      ? { 'aria-labelledby': getElementId('label', model.headerItem.dsId) }\n      : nameProps;\n\n  const renderRootEntries = () =>\n    model.items.map((item) => {\n      if (item.type === LEFT_NAVIGATION_TREE_ITEM_TYPES.SEPARATOR) {\n        return (\n          <li key={item.dsId} role=\"none\">\n            <StyledItemSeparator aria-hidden=\"true\" getOwnerProps={getOwnerProps} />\n          </li>\n        );\n      }\n      if (item.type === LEFT_NAVIGATION_TREE_ITEM_TYPES.SECTION) {\n        const sectionLabelId = getElementId('section', item.dsId);\n        const childIds = (item.itemOpts?.items ?? []).map((child) => child.dsId).filter((id) => model.index.has(id));\n        return (\n          <li key={item.dsId} role=\"none\">\n            <StyledSectionLabel id={sectionLabelId} aria-hidden=\"true\" getOwnerProps={getOwnerProps}>\n              {item.itemOpts?.label}\n            </StyledSectionLabel>\n            <StyledSectionContainer role=\"group\" aria-labelledby={sectionLabelId} getOwnerProps={getOwnerProps}>\n              {childIds.map((id) => (\n                <TreeItem key={id} id={id} />\n              ))}\n            </StyledSectionContainer>\n          </li>\n        );\n      }\n      return model.index.has(item.dsId) ? <TreeItem key={item.dsId} id={item.dsId} /> : null;\n    });\n\n  return (\n    <StyledTree\n      id={getElementId('tree', 'root')}\n      role=\"tree\"\n      isHeaderContent={isHeaderContent}\n      {...treeNameProps}\n      onKeyDown={handlers.onTreeKeyDown}\n      onFocus={handlers.onTreeFocus}\n      onBlur={handlers.onTreeBlur}\n      getOwnerProps={getOwnerProps}\n    >\n      {model.isRail ? model.visibleIds.map((id) => <RailItem key={id} id={id} />) : renderRootEntries()}\n    </StyledTree>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACwBX,cAQF,YARE;AAxBZ,SAAgB,kBAAkB;AAClC,SAAS,uCAAuC;AAChD,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,qBAAqB,wBAAwB,oBAAoB,kBAAkB;AAIrF,MAAM,WAAW,CAAC,EAAE,UAAU,MAAgC;AACnE,QAAM,EAAE,OAAO,UAAU,eAAe,aAAa,IAAI,WAAW,WAAW;AAC/E,MAAI,MAAM,WAAW,WAAW,EAAG,QAAO;AAE1C,QAAM,kBAAkB,CAAC,CAAC,MAAM,cAAc,MAAM,gBAAgB,CAAC,MAAM;AAC3E,QAAM,gBACJ,mBAAmB,MAAM,aACrB,EAAE,mBAAmB,aAAa,SAAS,MAAM,WAAW,IAAI,EAAE,IAClE;AAEN,QAAM,oBAAoB,MACxB,MAAM,MAAM,IAAI,CAAC,SAAS;AACxB,QAAI,KAAK,SAAS,gCAAgC,WAAW;AAC3D,aACE,oBAAC,QAAmB,MAAK,QACvB,8BAAC,uBAAoB,eAAY,QAAO,eAA8B,KAD/D,KAAK,IAEd;AAAA,IAEJ;AACA,QAAI,KAAK,SAAS,gCAAgC,SAAS;AACzD,YAAM,iBAAiB,aAAa,WAAW,KAAK,IAAI;AACxD,YAAM,YAAY,KAAK,UAAU,SAAS,CAAC,GAAG,IAAI,CAAC,UAAU,MAAM,IAAI,EAAE,OAAO,CAAC,OAAO,MAAM,MAAM,IAAI,EAAE,CAAC;AAC3G,aACE,qBAAC,QAAmB,MAAK,QACvB;AAAA,4BAAC,sBAAmB,IAAI,gBAAgB,eAAY,QAAO,eACxD,eAAK,UAAU,OAClB;AAAA,QACA,oBAAC,0BAAuB,MAAK,SAAQ,mBAAiB,gBAAgB,eACnE,mBAAS,IAAI,CAAC,OACb,oBAAC,YAAkB,MAAJ,EAAY,CAC5B,GACH;AAAA,WARO,KAAK,IASd;AAAA,IAEJ;AACA,WAAO,MAAM,MAAM,IAAI,KAAK,IAAI,IAAI,oBAAC,YAAyB,IAAI,KAAK,QAApB,KAAK,IAAqB,IAAK;AAAA,EACpF,CAAC;AAEH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,aAAa,QAAQ,MAAM;AAAA,MAC/B,MAAK;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,SAAS;AAAA,MACpB,SAAS,SAAS;AAAA,MAClB,QAAQ,SAAS;AAAA,MACjB;AAAA,MAEC,gBAAM,SAAS,MAAM,WAAW,IAAI,CAAC,OAAO,oBAAC,YAAkB,MAAJ,EAAY,CAAE,IAAI,kBAAkB;AAAA;AAAA,EAClG;AAEJ;",
+  "names": []
+}

package/dist/esm/parts/styled.js

@@ -0,0 +1,191 @@
+import * as React from "react";
+import { styled } from "@elliemae/ds-system";
+import { DSLeftNavigationTreeName, LEFT_NAVIGATION_TREE_SLOTS } from "../constants/index.js";
+const SLOTS = LEFT_NAVIGATION_TREE_SLOTS;
+const name = DSLeftNavigationTreeName;
+const StyledRoot = styled("nav", { name, slot: SLOTS.ROOT })`
+  display: flex;
+  flex-direction: column;
+  width: ${({ expanded, expandedWidth }) => expanded ? expandedWidth : "48px"};
+  transition: width ${({ expanded }) => expanded ? "ease-out" : "ease-in"} 350ms;
+  height: 100%;
+  overflow: hidden;
+  border: 1px solid ${({ theme }) => theme.colors.neutral[100]};
+  box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[100]};
+  background: ${({ theme }) => theme.colors.neutral["000"]};
+`;
+const StyledTree = styled("ul", { name, slot: SLOTS.TREE })`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  ${({ isHeaderContent, theme }) => isHeaderContent ? `& [data-row], & [data-row]:hover { box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]}; }` : ""}
+`;
+const StyledGroup = styled("ul", { name, slot: SLOTS.GROUP })`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+const StyledSectionContainer = styled("ul", { name, slot: SLOTS.SECTION_CONTAINER })`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+const StyledSectionLabel = styled("span", { name, slot: SLOTS.SECTION_LABEL })`
+  display: block;
+  padding: 8px 12px 4px;
+  font-size: 1rem;
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  color: ${({ theme }) => theme.colors.neutral[700]};
+`;
+const StyledItemSeparator = styled("div", { name, slot: SLOTS.ITEM_SEPARATOR })`
+  height: 1px;
+  margin: 4px 12px;
+  background: ${({ theme }) => theme.colors.neutral[100]};
+`;
+const StyledItem = styled("li", { name, slot: SLOTS.ITEM })`
+  list-style: none;
+  outline: none;
+  ${({ isOpenSection, theme }) => isOpenSection ? `& [data-row], & [data-row]:hover { box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]}; }` : ""}
+  &:focus-visible > [data-row] {
+    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};
+    outline-offset: -2px;
+  }
+`;
+const StyledItemRow = styled("div", { name, slot: SLOTS.ITEM_ROW })`
+  /** Labels wrap: side content aligns to the first line (spec "date is pinned on the right side of the first line"). */
+  --row-first-line: ${({ isTall }) => isTall ? "24px" : "16px"};
+  display: flex;
+  align-items: flex-start;
+  column-gap: 8px;
+  min-height: ${({ isTall }) => isTall ? "48px" : "32px"};
+  padding-block: ${({ isTall }) => isTall ? "12px" : "8px"};
+  box-sizing: border-box;
+  padding-left: ${({ rowPadding }) => `${rowPadding}px`};
+  ${({ isSticky }) => isSticky ? "position: sticky; top: 0; z-index: 1;" : ""}
+  padding-right: 8px;
+  cursor: pointer;
+  background: ${({ isCurrent, theme }) => isCurrent ? theme.colors.brand[200] : theme.colors.neutral["000"]};
+  box-shadow: inset 4px 0 0 0
+    ${({ isCurrent, isSelectedParent, theme }) => isCurrent || isSelectedParent ? theme.colors.brand[500] : "transparent"};
+  ${({ isCurrent, theme }) => isCurrent ? `outline: 1px solid ${theme.colors.brand[500]}; outline-offset: -1px;` : ""}
+  &:hover {
+    background: ${({ theme }) => theme.colors.brand[200]};
+    box-shadow: inset 4px 0 0 0
+      ${({ isCurrent, isSelectedParent, theme }) => isCurrent || isSelectedParent ? theme.colors.brand[500] : theme.colors.brand[300]};
+  }
+`;
+const StyledItemLabel = styled("span", { name, slot: SLOTS.ITEM_LABEL })`
+  font-size: ${({ isTall }) => isTall ? "1.0769rem" : "1rem"};
+  line-height: ${({ isTall }) => isTall ? "17px" : "16px"};
+  padding-block: ${({ isTall }) => isTall ? "3.5px" : "0"};
+  color: ${({ theme }) => theme.colors.neutral[800]};
+  word-break: ${({ labelOverflow }) => labelOverflow === "wrapAll" ? "break-all" : "normal"};
+  overflow-wrap: anywhere;
+  flex: 1;
+  min-width: 0;
+`;
+const StyledLeftContainer = styled("span", { name, slot: SLOTS.LEFT_CONTAINER })`
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--row-first-line, auto);
+`;
+const StyledCollapsedContainer = styled("span", { name, slot: SLOTS.COLLAPSED_CONTAINER })`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--row-first-line, auto);
+`;
+const StyledRightContainer = styled("span", { name, slot: SLOTS.RIGHT_CONTAINER })`
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--row-first-line, auto);
+`;
+const StyledArrowContainer = styled("span", { name, slot: SLOTS.ARROW_CONTAINER })`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  min-height: var(--row-first-line, auto);
+  ${({ isLeading }) => isLeading ? "width: 16px; margin-inline-end: -8px;" : ""}
+`;
+const StyledHeaderDisclosure = styled("button", { name, slot: SLOTS.HEADER_DISCLOSURE })`
+  --row-first-line: 24px;
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+  width: 100%;
+  min-height: 48px;
+  padding: 0 8px 0 12px;
+  border: none;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[100]};
+  background: ${({ theme }) => theme.colors.neutral["000"]};
+  box-shadow: inset 4px 0 0 0 ${({ isOpen, theme }) => isOpen ? theme.colors.brand[500] : "transparent"};
+  text-align: left;
+  font-size: 1.0769rem;
+  color: ${({ theme }) => theme.colors.neutral[800]};
+  cursor: pointer;
+  &:hover {
+    background: ${({ theme }) => theme.colors.brand[200]};
+    box-shadow: inset 4px 0 0 0 ${({ isOpen, theme }) => isOpen ? theme.colors.brand[500] : theme.colors.brand[300]};
+  }
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};
+    outline-offset: -2px;
+  }
+`;
+const StyledFooterMenu = styled("div", { name, slot: SLOTS.FOOTER_MENU })`
+  display: grid;
+  grid-template-columns: ${({ expanded }) => expanded ? "1fr auto auto" : "1fr"};
+  align-items: center;
+  column-gap: 8px;
+  margin-top: auto;
+  min-height: 48px;
+  padding: 0 4px 0 12px;
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};
+`;
+const StyledFooterLabel = styled("span", { name, slot: SLOTS.FOOTER_LABEL })`
+  font-size: 11px;
+  line-height: 14px;
+  color: ${({ theme }) => theme.colors.neutral[500]};
+`;
+const StyledFooterSeparator = styled("span", { name, slot: SLOTS.FOOTER_SEPARATOR })`
+  width: 1px;
+  height: 16px;
+  background: ${({ theme }) => theme.colors.neutral[100]};
+`;
+const StyledFooterButton = styled("button", { name, slot: SLOTS.FOOTER_MENU_COLLAPSE })`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};
+  }
+`;
+export {
+  StyledArrowContainer,
+  StyledCollapsedContainer,
+  StyledFooterButton,
+  StyledFooterLabel,
+  StyledFooterMenu,
+  StyledFooterSeparator,
+  StyledGroup,
+  StyledHeaderDisclosure,
+  StyledItem,
+  StyledItemLabel,
+  StyledItemRow,
+  StyledItemSeparator,
+  StyledLeftContainer,
+  StyledRightContainer,
+  StyledRoot,
+  StyledSectionContainer,
+  StyledSectionLabel,
+  StyledTree
+};
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/styled.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { DSLeftNavigationTreeName, LEFT_NAVIGATION_TREE_SLOTS } from '../constants/index.js';\nimport type { DSLeftNavigationTreeT } from '../react-desc-prop-types.js';\n\nconst SLOTS = LEFT_NAVIGATION_TREE_SLOTS;\nconst name = DSLeftNavigationTreeName;\n\nexport const StyledRoot = styled('nav', { name, slot: SLOTS.ROOT })<{ expanded: boolean; expandedWidth: string }>`\n  display: flex;\n  flex-direction: column;\n  width: ${({ expanded, expandedWidth }) => (expanded ? expandedWidth : '48px')};\n  transition: width ${({ expanded }) => (expanded ? 'ease-out' : 'ease-in')} 350ms;\n  height: 100%;\n  overflow: hidden;\n  border: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n  box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[100]};\n  background: ${({ theme }) => theme.colors.neutral['000']};\n`;\n\nexport const StyledTree = styled('ul', { name, slot: SLOTS.TREE })<{ isHeaderContent: boolean }>`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  ${({ isHeaderContent, theme }) =>\n    isHeaderContent\n      ? `& [data-row], & [data-row]:hover { box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]}; }`\n      : ''}\n`;\n\nexport const StyledGroup = styled('ul', { name, slot: SLOTS.GROUP })`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`;\n\nexport const StyledSectionContainer = styled('ul', { name, slot: SLOTS.SECTION_CONTAINER })`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`;\n\nexport const StyledSectionLabel = styled('span', { name, slot: SLOTS.SECTION_LABEL })`\n  display: block;\n  padding: 8px 12px 4px;\n  font-size: 1rem;\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  color: ${({ theme }) => theme.colors.neutral[700]};\n`;\n\nexport const StyledItemSeparator = styled('div', { name, slot: SLOTS.ITEM_SEPARATOR })`\n  height: 1px;\n  margin: 4px 12px;\n  background: ${({ theme }) => theme.colors.neutral[100]};\n`;\n\n/**\n * The focus ring is drawn on the row of the focused treeitem only: the `li` holds the whole\n * expanded subtree, so an outline on it would surround every descendant row.\n */\nexport const StyledItem = styled('li', { name, slot: SLOTS.ITEM })<{ isOpenSection: boolean }>`\n  list-style: none;\n  outline: none;\n  ${({ isOpenSection, theme }) =>\n    isOpenSection ? `& [data-row], & [data-row]:hover { box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]}; }` : ''}\n  &:focus-visible > [data-row] {\n    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    outline-offset: -2px;\n  }\n`;\n\nexport const StyledItemRow = styled('div', { name, slot: SLOTS.ITEM_ROW })<{\n  rowPadding: number;\n  isTall: boolean;\n  isSticky: boolean;\n  isCurrent: boolean;\n  isSelectedParent: boolean;\n}>`\n  /** Labels wrap: side content aligns to the first line (spec \"date is pinned on the right side of the first line\"). */\n  --row-first-line: ${({ isTall }) => (isTall ? '24px' : '16px')};\n  display: flex;\n  align-items: flex-start;\n  column-gap: 8px;\n  min-height: ${({ isTall }) => (isTall ? '48px' : '32px')};\n  padding-block: ${({ isTall }) => (isTall ? '12px' : '8px')};\n  box-sizing: border-box;\n  padding-left: ${({ rowPadding }) => `${rowPadding}px`};\n  ${({ isSticky }) => (isSticky ? 'position: sticky; top: 0; z-index: 1;' : '')}\n  padding-right: 8px;\n  cursor: pointer;\n  background: ${({ isCurrent, theme }) => (isCurrent ? theme.colors.brand[200] : theme.colors.neutral['000'])};\n  box-shadow: inset 4px 0 0 0\n    ${({ isCurrent, isSelectedParent, theme }) =>\n      isCurrent || isSelectedParent ? theme.colors.brand[500] : 'transparent'};\n  ${({ isCurrent, theme }) => (isCurrent ? `outline: 1px solid ${theme.colors.brand[500]}; outline-offset: -1px;` : '')}\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n    box-shadow: inset 4px 0 0 0\n      ${({ isCurrent, isSelectedParent, theme }) =>\n        isCurrent || isSelectedParent ? theme.colors.brand[500] : theme.colors.brand[300]};\n  }\n`;\n\nexport const StyledItemLabel = styled('span', { name, slot: SLOTS.ITEM_LABEL })<{\n  isTall: boolean;\n  labelOverflow: DSLeftNavigationTreeT.LabelOverflowT;\n}>`\n  font-size: ${({ isTall }) => (isTall ? '1.0769rem' : '1rem')};\n  line-height: ${({ isTall }) => (isTall ? '17px' : '16px')};\n  padding-block: ${({ isTall }) => (isTall ? '3.5px' : '0')};\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  word-break: ${({ labelOverflow }) => (labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n  overflow-wrap: anywhere;\n  flex: 1;\n  min-width: 0;\n`;\n\nexport const StyledLeftContainer = styled('span', { name, slot: SLOTS.LEFT_CONTAINER })`\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--row-first-line, auto);\n`;\n\nexport const StyledCollapsedContainer = styled('span', { name, slot: SLOTS.COLLAPSED_CONTAINER })`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--row-first-line, auto);\n`;\n\nexport const StyledRightContainer = styled('span', { name, slot: SLOTS.RIGHT_CONTAINER })`\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--row-first-line, auto);\n`;\n\nexport const StyledArrowContainer = styled('span', { name, slot: SLOTS.ARROW_CONTAINER })<{ isLeading: boolean }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  min-height: var(--row-first-line, auto);\n  ${({ isLeading }) => (isLeading ? 'width: 16px; margin-inline-end: -8px;' : '')}\n`;\n\nexport const StyledHeaderDisclosure = styled('button', { name, slot: SLOTS.HEADER_DISCLOSURE })<{\n  isRail: boolean;\n  isOpen: boolean;\n}>`\n  --row-first-line: 24px;\n  display: flex;\n  align-items: center;\n  column-gap: 8px;\n  width: 100%;\n  min-height: 48px;\n  padding: 0 8px 0 12px;\n  border: none;\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  box-shadow: inset 4px 0 0 0 ${({ isOpen, theme }) => (isOpen ? theme.colors.brand[500] : 'transparent')};\n  text-align: left;\n  font-size: 1.0769rem;\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  cursor: pointer;\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n    box-shadow: inset 4px 0 0 0 ${({ isOpen, theme }) => (isOpen ? theme.colors.brand[500] : theme.colors.brand[300])};\n  }\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    outline-offset: -2px;\n  }\n`;\nexport const StyledFooterMenu = styled('div', { name, slot: SLOTS.FOOTER_MENU })<{ expanded: boolean }>`\n  display: grid;\n  grid-template-columns: ${({ expanded }) => (expanded ? '1fr auto auto' : '1fr')};\n  align-items: center;\n  column-gap: 8px;\n  margin-top: auto;\n  min-height: 48px;\n  padding: 0 4px 0 12px;\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n`;\n\nexport const StyledFooterLabel = styled('span', { name, slot: SLOTS.FOOTER_LABEL })`\n  font-size: 11px;\n  line-height: 14px;\n  color: ${({ theme }) => theme.colors.neutral[500]};\n`;\n\nexport const StyledFooterSeparator = styled('span', { name, slot: SLOTS.FOOTER_SEPARATOR })`\n  width: 1px;\n  height: 16px;\n  background: ${({ theme }) => theme.colors.neutral[100]};\n`;\n\nexport const StyledFooterButton = styled('button', { name, slot: SLOTS.FOOTER_MENU_COLLAPSE })`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n  }\n`;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/react-desc-prop-types.js

@@ -0,0 +1,105 @@
+import * as React from "react";
+import {
+  PropTypes,
+  describe,
+  getPropsPerSlotPropTypes,
+  globalAttributesPropTypes,
+  xstyledPropTypes
+} from "@elliemae/ds-props-helpers";
+import {
+  DSLeftNavigationTreeName,
+  LEFT_NAVIGATION_TREE_ITEM_TYPES,
+  LEFT_NAVIGATION_TREE_SLOTS
+} from "./constants/index.js";
+const noop = () => null;
+const defaultProps = {
+  items: [],
+  expanded: false,
+  expandedWidth: "240px",
+  labelOverflow: "wrap",
+  footerLabel: "",
+  disableDefaultSelection: false,
+  openedItem: null,
+  onItemClick: noop,
+  onItemOpenedChange: noop,
+  onSelectedChange: noop,
+  onFocusChange: noop,
+  onFooterExpand: noop,
+  onFooterClose: noop
+};
+const DSLeftNavigationTreePropTypes = {
+  ...getPropsPerSlotPropTypes(DSLeftNavigationTreeName, LEFT_NAVIGATION_TREE_SLOTS),
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
+  items: PropTypes.arrayOf(PropTypes.object).description(
+    "The navigation tree with its full hierarchy: parents and sections hold their children in itemOpts.items. Children that are not in the data cannot be reached"
+  ).defaultValue([]),
+  expanded: PropTypes.bool.description("Whether the panel is expanded or collapsed to the icon-only rail").defaultValue(false),
+  expandedWidth: PropTypes.string.description("Width of the panel when expanded").defaultValue("240px"),
+  labelOverflow: PropTypes.oneOf(["wrap", "wrapAll"]).description("How labels wrap").defaultValue("wrap"),
+  footerLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).description("Text shown in the footer next to the collapse button").defaultValue(""),
+  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([null])]).description(
+    'Id of the current page, exposed as aria-current="page" (aria-selected is never set). null means no current page; undefined lets the component track it'
+  ),
+  selectedParent: PropTypes.string.description(
+    "Id of the item that shows the selected-parent indicator. When undefined, every ancestor of the current page shows it"
+  ),
+  disableDefaultSelection: PropTypes.bool.description("Whether opening a parent should only expand it, without making its first page the current page").defaultValue(false),
+  HeaderComponent: PropTypes.object.description(
+    "Item rendered as the header disclosure button above the tree. While it is open, pass its content as items (selecting its first item is up to you), and clear openedItem when the panel collapses so the rail shows your root items. Only dsId, label, CollapsedComponent, RightComponent and labelOverflow are used"
+  ),
+  openedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([null])]).description("Id of the header item when the header is open. Other ids are ignored").defaultValue(null),
+  onItemClick: PropTypes.func.description(
+    "Called when an item or the header is activated with click, Enter or Space. In the collapsed rail, expand the panel from here when the item is a parent. After a page activation, move focus to your content if needed; after a parent activation, leave focus on the parent"
+  ).signature("((item: DSLeftNavigationTreeT.Item, e: React.MouseEvent | React.KeyboardEvent) => void)").defaultValue(() => null),
+  onItemOpenedChange: PropTypes.func.description("Called when a parent requests to open or close").signature(
+    "((item: DSLeftNavigationTreeT.Item, nextIsOpened: boolean, e: React.MouseEvent | React.KeyboardEvent) => void)"
+  ).defaultValue(() => null),
+  onSelectedChange: PropTypes.func.description("Called with the id of the item that becomes the current page").signature("((id: string) => void)").defaultValue(() => null),
+  onFocusChange: PropTypes.func.description("Called with the id of the item that receives focus").signature("((id: string) => void)").defaultValue(() => null),
+  onFooterExpand: PropTypes.func.description("Called when the footer button expands the panel").signature("((e: React.MouseEvent | React.KeyboardEvent) => void)").defaultValue(() => null),
+  onFooterClose: PropTypes.func.description("Called when the footer button collapses the panel. Clear openedItem here if the header is open").signature("((e: React.MouseEvent | React.KeyboardEvent) => void)").defaultValue(() => null)
+};
+const DSLeftNavigationTreePropTypesSchema = DSLeftNavigationTreePropTypes;
+const itemTypes = Object.values(LEFT_NAVIGATION_TREE_ITEM_TYPES);
+const DSLeftNavigationTreeItemPropTypes = {
+  dsId: PropTypes.string.description("Unique identifier of the item").isRequired,
+  type: PropTypes.oneOf(itemTypes).description("Item type: leaf, parent, section or separator").isRequired,
+  CollapsedComponent: PropTypes.func.description(
+    "Icon rendered next to the label and alone in the collapsed rail; root items without it do not appear in the rail. Receives { item }"
+  ).signature("React.ComponentType<{ item: DSLeftNavigationTreeT.Item }>"),
+  itemOpts: PropTypes.object.description("Item options")
+};
+const DSLeftNavigationTreeItemOptsPropTypes = {
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).description(
+    "Visible label and accessible name of the item. Type-ahead only matches labels passed as strings"
+  ),
+  items: PropTypes.arrayOf(PropTypes.object).description("Children of a parent or a section"),
+  isOpened: PropTypes.bool.description(
+    "Controlled open state of a parent. When defined, the component only requests changes through onItemOpenedChange. Keep it defined (or undefined) for the whole life of the item"
+  ),
+  startOpened: PropTypes.bool.description("Open state of an uncontrolled parent until the user opens or closes it"),
+  selectable: PropTypes.bool.description("Whether the leaf can become the current page").defaultValue(true),
+  labelOverflow: PropTypes.oneOf(["wrap", "wrapAll"]).description("Overrides the component labelOverflow"),
+  RightComponent: PropTypes.func.description(
+    "Non-interactive content after the label, exposed as the item description, so it must contain text (give an icon-only badge a visually hidden text). Receives { item }"
+  ).signature("React.ComponentType<{ item: DSLeftNavigationTreeT.Item }>")
+};
+const LeftNavigationTreeItem = () => null;
+LeftNavigationTreeItem.displayName = "LeftNavigationTreeItem";
+const DSLeftNavigationTreeItemSchema = describe(LeftNavigationTreeItem);
+DSLeftNavigationTreeItemSchema.propTypes = DSLeftNavigationTreeItemPropTypes;
+const LeftNavigationTreeItemOpts = () => null;
+LeftNavigationTreeItemOpts.displayName = "LeftNavigationTreeItemOpts";
+const DSLeftNavigationTreeItemOptsSchema = describe(LeftNavigationTreeItemOpts);
+DSLeftNavigationTreeItemOptsSchema.propTypes = DSLeftNavigationTreeItemOptsPropTypes;
+export {
+  DSLeftNavigationTreeItemOptsPropTypes,
+  DSLeftNavigationTreeItemOptsSchema,
+  DSLeftNavigationTreeItemPropTypes,
+  DSLeftNavigationTreeItemSchema,
+  DSLeftNavigationTreePropTypes,
+  DSLeftNavigationTreePropTypesSchema,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  describe,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\nimport {\n  DSLeftNavigationTreeName,\n  LEFT_NAVIGATION_TREE_ITEM_TYPES,\n  LEFT_NAVIGATION_TREE_SLOTS,\n} from './constants/index.js';\nimport type { LEFT_NAVIGATION_TREE_REGION_FOCUSES } from './constants/index.js';\nimport type { useAutoCalculated } from './config/useAutoCalculated.js';\n\nexport declare namespace DSLeftNavigationTreeT {\n  export type ItemType = (typeof LEFT_NAVIGATION_TREE_ITEM_TYPES)[keyof typeof LEFT_NAVIGATION_TREE_ITEM_TYPES];\n\n  export type LabelOverflowT = 'wrap' | 'wrapAll';\n\n  export type InteractionEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;\n\n  export interface ItemComponentProps {\n    item: Item;\n  }\n\n  export interface ItemOpts {\n    label?: string | JSX.Element;\n    items?: readonly Item[];\n    isOpened?: boolean;\n    startOpened?: boolean;\n    selectable?: boolean;\n    labelOverflow?: LabelOverflowT;\n    RightComponent?: React.ComponentType<ItemComponentProps>;\n  }\n\n  export interface Item {\n    dsId: string;\n    type: ItemType;\n    CollapsedComponent?: React.ComponentType<ItemComponentProps> | null;\n    itemOpts?: ItemOpts;\n  }\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    items: readonly Item[];\n    expanded: boolean;\n    expandedWidth: string;\n    labelOverflow: LabelOverflowT;\n    footerLabel: React.ReactNode;\n    disableDefaultSelection: boolean;\n    openedItem: string | null;\n    onItemClick: (item: Item, e: InteractionEvent) => void;\n    onItemOpenedChange: (item: Item, nextIsOpened: boolean, e: InteractionEvent) => void;\n    onSelectedChange: (id: string) => void;\n    onFocusChange: (id: string) => void;\n    onFooterExpand: (e: InteractionEvent) => void;\n    onFooterClose: (e: InteractionEvent) => void;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSLeftNavigationTreeName,\n    typeof LEFT_NAVIGATION_TREE_SLOTS\n  > {\n    selectedItem?: string | null;\n    selectedParent?: string;\n    HeaderComponent?: Item;\n  }\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface ItemSlotArguments {\n    item: Item;\n    level: number;\n    isOpen: boolean;\n    isCurrent: boolean;\n  }\n\n  export type SlotFunctionArguments = {\n    dsLeftnavigationtreeRoot: () => object;\n    dsLeftnavigationtreeTree: () => object;\n    dsLeftnavigationtreeItem: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeItemRow: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeItemLabel: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeLeftContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeCollapsedContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeRightContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeArrowContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeGroup: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeSectionContainer: () => object;\n    dsLeftnavigationtreeSectionLabel: () => object;\n    dsLeftnavigationtreeItemSeparator: () => object;\n    dsLeftnavigationtreeHeaderDisclosure: () => object;\n    dsLeftnavigationtreeFooterMenu: () => object;\n    dsLeftnavigationtreeFooterLabel: () => object;\n    dsLeftnavigationtreeFooterSeparator: () => object;\n    dsLeftnavigationtreeFooterMenuCollapse: () => object;\n  };\n\n  export type FocusRegion =\n    (typeof LEFT_NAVIGATION_TREE_REGION_FOCUSES)[keyof typeof LEFT_NAVIGATION_TREE_REGION_FOCUSES];\n\n  export type InternalAtoms = {\n    focusRegion: FocusRegion;\n    focusedItemId: string | null;\n    toggles: Record<string, boolean>;\n    internalSelectedItem: string | null;\n  };\n\n  export type UseAutoCalculatedT = ReturnType<typeof useAutoCalculated>;\n\n  export type Selectors = Record<string, never>;\n  export type Reducers = Record<string, never>;\n  export type InternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n}\n\nconst noop = () => null;\n\nexport const defaultProps: DSLeftNavigationTreeT.DefaultProps = {\n  items: [],\n  expanded: false,\n  expandedWidth: '240px',\n  labelOverflow: 'wrap',\n  footerLabel: '',\n  disableDefaultSelection: false,\n  openedItem: null,\n  onItemClick: noop,\n  onItemOpenedChange: noop,\n  onSelectedChange: noop,\n  onFocusChange: noop,\n  onFooterExpand: noop,\n  onFooterClose: noop,\n};\n\nexport const DSLeftNavigationTreePropTypes: DSPropTypesSchema<DSLeftNavigationTreeT.Props> = {\n  ...getPropsPerSlotPropTypes(DSLeftNavigationTreeName, LEFT_NAVIGATION_TREE_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  items: PropTypes.arrayOf(PropTypes.object)\n    .description(\n      'The navigation tree with its full hierarchy: parents and sections hold their children in itemOpts.items. Children that are not in the data cannot be reached',\n    )\n    .defaultValue([]),\n  expanded: PropTypes.bool\n    .description('Whether the panel is expanded or collapsed to the icon-only rail')\n    .defaultValue(false),\n  expandedWidth: PropTypes.string.description('Width of the panel when expanded').defaultValue('240px'),\n  labelOverflow: PropTypes.oneOf(['wrap', 'wrapAll']).description('How labels wrap').defaultValue('wrap'),\n  footerLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string])\n    .description('Text shown in the footer next to the collapse button')\n    .defaultValue(''),\n  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([null])]).description(\n    'Id of the current page, exposed as aria-current=\"page\" (aria-selected is never set). null means no current page; undefined lets the component track it',\n  ),\n  selectedParent: PropTypes.string.description(\n    'Id of the item that shows the selected-parent indicator. When undefined, every ancestor of the current page shows it',\n  ),\n  disableDefaultSelection: PropTypes.bool\n    .description('Whether opening a parent should only expand it, without making its first page the current page')\n    .defaultValue(false),\n  HeaderComponent: PropTypes.object.description(\n    'Item rendered as the header disclosure button above the tree. While it is open, pass its content as items (selecting its first item is up to you), and clear openedItem when the panel collapses so the rail shows your root items. Only dsId, label, CollapsedComponent, RightComponent and labelOverflow are used',\n  ),\n  openedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([null])])\n    .description('Id of the header item when the header is open. Other ids are ignored')\n    .defaultValue(null),\n  onItemClick: PropTypes.func\n    .description(\n      'Called when an item or the header is activated with click, Enter or Space. In the collapsed rail, expand the panel from here when the item is a parent. After a page activation, move focus to your content if needed; after a parent activation, leave focus on the parent',\n    )\n    .signature('((item: DSLeftNavigationTreeT.Item, e: React.MouseEvent | React.KeyboardEvent) => void)')\n    .defaultValue(() => null),\n  onItemOpenedChange: PropTypes.func\n    .description('Called when a parent requests to open or close')\n    .signature(\n      '((item: DSLeftNavigationTreeT.Item, nextIsOpened: boolean, e: React.MouseEvent | React.KeyboardEvent) => void)',\n    )\n    .defaultValue(() => null),\n  onSelectedChange: PropTypes.func\n    .description('Called with the id of the item that becomes the current page')\n    .signature('((id: string) => void)')\n    .defaultValue(() => null),\n  onFocusChange: PropTypes.func\n    .description('Called with the id of the item that receives focus')\n    .signature('((id: string) => void)')\n    .defaultValue(() => null),\n  onFooterExpand: PropTypes.func\n    .description('Called when the footer button expands the panel')\n    .signature('((e: React.MouseEvent | React.KeyboardEvent) => void)')\n    .defaultValue(() => null),\n  onFooterClose: PropTypes.func\n    .description('Called when the footer button collapses the panel. Clear openedItem here if the header is open')\n    .signature('((e: React.MouseEvent | React.KeyboardEvent) => void)')\n    .defaultValue(() => null),\n};\n\nexport const DSLeftNavigationTreePropTypesSchema =\n  DSLeftNavigationTreePropTypes as unknown as ValidationMap<DSLeftNavigationTreeT.Props>;\n\nconst itemTypes = Object.values(LEFT_NAVIGATION_TREE_ITEM_TYPES);\n\nexport const DSLeftNavigationTreeItemPropTypes: DSPropTypesSchema<DSLeftNavigationTreeT.Item> = {\n  dsId: PropTypes.string.description('Unique identifier of the item').isRequired,\n  type: PropTypes.oneOf(itemTypes).description('Item type: leaf, parent, section or separator').isRequired,\n  CollapsedComponent: PropTypes.func\n    .description(\n      'Icon rendered next to the label and alone in the collapsed rail; root items without it do not appear in the rail. Receives { item }',\n    )\n    .signature('React.ComponentType<{ item: DSLeftNavigationTreeT.Item }>'),\n  itemOpts: PropTypes.object.description('Item options'),\n};\n\nexport const DSLeftNavigationTreeItemOptsPropTypes: DSPropTypesSchema<DSLeftNavigationTreeT.ItemOpts> = {\n  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).description(\n    'Visible label and accessible name of the item. Type-ahead only matches labels passed as strings',\n  ),\n  items: PropTypes.arrayOf(PropTypes.object).description('Children of a parent or a section'),\n  isOpened: PropTypes.bool.description(\n    'Controlled open state of a parent. When defined, the component only requests changes through onItemOpenedChange. Keep it defined (or undefined) for the whole life of the item',\n  ),\n  startOpened: PropTypes.bool.description('Open state of an uncontrolled parent until the user opens or closes it'),\n  selectable: PropTypes.bool.description('Whether the leaf can become the current page').defaultValue(true),\n  labelOverflow: PropTypes.oneOf(['wrap', 'wrapAll']).description('Overrides the component labelOverflow'),\n  RightComponent: PropTypes.func\n    .description(\n      'Non-interactive content after the label, exposed as the item description, so it must contain text (give an icon-only badge a visually hidden text). Receives { item }',\n    )\n    .signature('React.ComponentType<{ item: DSLeftNavigationTreeT.Item }>'),\n};\n\nconst LeftNavigationTreeItem = () => null;\nLeftNavigationTreeItem.displayName = 'LeftNavigationTreeItem';\nexport const DSLeftNavigationTreeItemSchema = describe(LeftNavigationTreeItem);\nDSLeftNavigationTreeItemSchema.propTypes =\n  DSLeftNavigationTreeItemPropTypes as unknown as ValidationMap<DSLeftNavigationTreeT.Item>;\n\nconst LeftNavigationTreeItemOpts = () => null;\nLeftNavigationTreeItemOpts.displayName = 'LeftNavigationTreeItemOpts';\nexport const DSLeftNavigationTreeItemOptsSchema = describe(LeftNavigationTreeItemOpts);\nDSLeftNavigationTreeItemOptsSchema.propTypes =\n  DSLeftNavigationTreeItemOptsPropTypes as unknown as ValidationMap<DSLeftNavigationTreeT.ItemOpts>;\n"],
+  "mappings": "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",
+  "names": []
+}