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

package/dist/cjs/parts/MainContent.js

@@ -0,0 +1,95 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MainContent_exports = {};
+__export(MainContent_exports, {
+  MainContent: () => MainContent
+});
+module.exports = __toCommonJS(MainContent_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_store = require("../config/store.js");
+var import_useTreeModel = require("../config/useTreeModel.js");
+var import_useTreeHandlers = require("../config/useTreeHandlers.js");
+var import_constants = require("../constants/index.js");
+var import_react_desc_prop_types = require("../react-desc-prop-types.js");
+var import_TreeContext = require("./TreeContext.js");
+var import_TreeRoot = require("./TreeRoot.js");
+var import_Header = require("./Header.js");
+var import_Footer = require("./Footer.js");
+var import_styled = require("./styled.js");
+const MainContent = import_react.default.memo(() => {
+  const propsWithDefault = (0, import_store.usePropsStore)((state) => state);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSLeftNavigationTreePropTypes, import_constants.DSLeftNavigationTreeName);
+  const getOwnerProps = (0, import_store.usePropsStore)((state) => state.get);
+  const expanded = (0, import_store.usePropsStore)((state) => state.expanded);
+  const expandedWidth = (0, import_store.usePropsStore)((state) => state.expandedWidth);
+  const labelOverflow = (0, import_store.usePropsStore)((state) => state.labelOverflow);
+  const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
+  const {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ...globalAttributes
+  } = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
+  const nameProps = (0, import_react.useMemo)(
+    () => ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : { "aria-label": ariaLabel ?? import_constants.LEFT_NAVIGATION_TREE_DEFAULT_LABEL },
+    [ariaLabel, ariaLabelledBy]
+  );
+  const model = (0, import_useTreeModel.useTreeModel)();
+  const handlers = (0, import_useTreeHandlers.useTreeHandlers)(model);
+  const instanceId = (0, import_react.useId)();
+  const getElementId = (0, import_react.useCallback)(
+    (kind, dsId) => `${instanceId}-${kind}-${encodeURIComponent(dsId)}`,
+    [instanceId]
+  );
+  const contextValue = (0, import_react.useMemo)(
+    () => ({ model, handlers, getOwnerProps, labelOverflow, getElementId }),
+    [model, handlers, getOwnerProps, labelOverflow, getElementId]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeContext.TreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_styled.StyledRoot,
+    {
+      expanded,
+      expandedWidth,
+      "data-testid": import_constants.LEFT_NAVIGATION_TREE_DATA_TESTID.ROOT,
+      getOwnerProps,
+      ...globalAttributes,
+      ...xstyledProps,
+      ...nameProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Header.HeaderDisclosure, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeRoot.TreeRoot, { nameProps }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Footer.Footer, {})
+      ]
+    }
+  ) });
+});
+MainContent.displayName = `${import_constants.DSLeftNavigationTreeName}.MainContent`;
+//# sourceMappingURL=MainContent.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/MainContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useCallback, useId, useMemo } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { usePropsStore } from '../config/store.js';\nimport { useTreeModel } from '../config/useTreeModel.js';\nimport { useTreeHandlers } from '../config/useTreeHandlers.js';\nimport {\n  DSLeftNavigationTreeName,\n  LEFT_NAVIGATION_TREE_DATA_TESTID,\n  LEFT_NAVIGATION_TREE_DEFAULT_LABEL,\n} from '../constants/index.js';\nimport { DSLeftNavigationTreePropTypes, type DSLeftNavigationTreeT } from '../react-desc-prop-types.js';\nimport { TreeContext, type TreeContextValue } from './TreeContext.js';\nimport { TreeRoot } from './TreeRoot.js';\nimport { HeaderDisclosure } from './Header.js';\nimport { Footer } from './Footer.js';\nimport { StyledRoot } from './styled.js';\n\nexport const MainContent = React.memo(() => {\n  const propsWithDefault = usePropsStore((state) => state) as DSLeftNavigationTreeT.InternalProps;\n  useValidateTypescriptPropTypes(propsWithDefault, DSLeftNavigationTreePropTypes, DSLeftNavigationTreeName);\n  const getOwnerProps = usePropsStore((state) => state.get);\n  const expanded = usePropsStore((state) => state.expanded);\n  const expandedWidth = usePropsStore((state) => state.expandedWidth);\n  const labelOverflow = usePropsStore((state) => state.labelOverflow);\n\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...globalAttributes\n  } = useGetGlobalAttributes<DSLeftNavigationTreeT.InternalProps, HTMLElement>(propsWithDefault);\n  const nameProps = useMemo(\n    () =>\n      ariaLabelledBy\n        ? { 'aria-labelledby': ariaLabelledBy }\n        : { 'aria-label': ariaLabel ?? LEFT_NAVIGATION_TREE_DEFAULT_LABEL },\n    [ariaLabel, ariaLabelledBy],\n  );\n\n  const model = useTreeModel();\n  const handlers = useTreeHandlers(model);\n\n  const instanceId = useId();\n  const getElementId = useCallback(\n    (kind: string, dsId: string) => `${instanceId}-${kind}-${encodeURIComponent(dsId)}`,\n    [instanceId],\n  );\n\n  const contextValue: TreeContextValue = useMemo(\n    () => ({ model, handlers, getOwnerProps, labelOverflow, getElementId }),\n    [model, handlers, getOwnerProps, labelOverflow, getElementId],\n  );\n\n  return (\n    <TreeContext.Provider value={contextValue}>\n      <StyledRoot\n        expanded={expanded}\n        expandedWidth={expandedWidth}\n        data-testid={LEFT_NAVIGATION_TREE_DATA_TESTID.ROOT}\n        getOwnerProps={getOwnerProps}\n        {...globalAttributes}\n        {...xstyledProps}\n        {...nameProps}\n      >\n        <HeaderDisclosure />\n        <TreeRoot nameProps={nameProps} />\n        <Footer />\n      </StyledRoot>\n    </TreeContext.Provider>\n  );\n});\n\nMainContent.displayName = `${DSLeftNavigationTreeName}.MainContent`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuDjB;AAvDN,mBAAmD;AACnD,8BAA2F;AAC3F,mBAA8B;AAC9B,0BAA6B;AAC7B,6BAAgC;AAChC,uBAIO;AACP,mCAA0E;AAC1E,yBAAmD;AACnD,sBAAyB;AACzB,oBAAiC;AACjC,oBAAuB;AACvB,oBAA2B;AAEpB,MAAM,cAAc,aAAAA,QAAM,KAAK,MAAM;AAC1C,QAAM,uBAAmB,4BAAc,CAAC,UAAU,KAAK;AACvD,8DAA+B,kBAAkB,4DAA+B,yCAAwB;AACxG,QAAM,oBAAgB,4BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,eAAW,4BAAc,CAAC,UAAU,MAAM,QAAQ;AACxD,QAAM,oBAAgB,4BAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,oBAAgB,4BAAc,CAAC,UAAU,MAAM,aAAa;AAElE,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,QAAM;AAAA,IACJ,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,GAAG;AAAA,EACL,QAAI,gDAAyE,gBAAgB;AAC7F,QAAM,gBAAY;AAAA,IAChB,MACE,iBACI,EAAE,mBAAmB,eAAe,IACpC,EAAE,cAAc,aAAa,oDAAmC;AAAA,IACtE,CAAC,WAAW,cAAc;AAAA,EAC5B;AAEA,QAAM,YAAQ,kCAAa;AAC3B,QAAM,eAAW,wCAAgB,KAAK;AAEtC,QAAM,iBAAa,oBAAM;AACzB,QAAM,mBAAe;AAAA,IACnB,CAAC,MAAc,SAAiB,GAAG,UAAU,IAAI,IAAI,IAAI,mBAAmB,IAAI,CAAC;AAAA,IACjF,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,mBAAiC;AAAA,IACrC,OAAO,EAAE,OAAO,UAAU,eAAe,eAAe,aAAa;AAAA,IACrE,CAAC,OAAO,UAAU,eAAe,eAAe,YAAY;AAAA,EAC9D;AAEA,SACE,4CAAC,+BAAY,UAAZ,EAAqB,OAAO,cAC3B;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAa,kDAAiC;AAAA,MAC9C;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,oDAAC,kCAAiB;AAAA,QAClB,4CAAC,4BAAS,WAAsB;AAAA,QAChC,4CAAC,wBAAO;AAAA;AAAA;AAAA,EACV,GACF;AAEJ,CAAC;AAED,YAAY,cAAc,GAAG,yCAAwB;",
+  "names": ["React"]
+}

package/dist/cjs/parts/RailItem.js

@@ -0,0 +1,109 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var RailItem_exports = {};
+__export(RailItem_exports, {
+  RailItem: () => RailItem
+});
+module.exports = __toCommonJS(RailItem_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_treeModel = require("../config/treeModel.js");
+var import_useTreeModel = require("../config/useTreeModel.js");
+var import_TreeContext = require("./TreeContext.js");
+var import_styled = require("./styled.js");
+const HIDDEN_LABEL_STYLE = { display: "none" };
+const RailItem = import_react.default.memo(({ id }) => {
+  const { model, handlers, getOwnerProps, labelOverflow, getElementId } = (0, import_react.useContext)(import_TreeContext.TreeContext);
+  const info = model.index.get(id);
+  const isCurrent = model.currentLeafId === id;
+  const isSelectedParent = model.selectedParentIds.has(id);
+  const focusState = (0, import_useTreeModel.useItemFocusState)(model, id);
+  const item = info?.item;
+  const focusRef = (0, import_react.useCallback)(
+    (node) => {
+      if (node && focusState === "focus-target") node.focus();
+    },
+    [focusState]
+  );
+  const handleClick = (0, import_react.useCallback)((e) => handlers.activate(id, e), [handlers, id]);
+  const getOwnerPropsArguments = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(
+    import_styled.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__ */ (0, import_jsx_runtime.jsxs)(
+        import_styled.StyledItemRow,
+        {
+          "data-row": true,
+          rowPadding: import_treeModel.ROW_PADDING,
+          isTall: true,
+          isSticky: false,
+          isCurrent,
+          isSelectedParent,
+          onClick: handleClick,
+          getOwnerProps,
+          getOwnerPropsArguments,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledCollapsedContainer, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsedComponent, { item }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_styled.StyledItemLabel,
+              {
+                id: labelId,
+                isTall: true,
+                labelOverflow,
+                style: HIDDEN_LABEL_STYLE,
+                getOwnerProps,
+                getOwnerPropsArguments,
+                children: item.itemOpts?.label
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+RailItem.displayName = "DSLeftNavigationTree.RailItem";
+//# sourceMappingURL=RailItem.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/RailItem.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiDjB;AAjDN,mBAA+C;AAC/C,uBAA4B;AAC5B,0BAAkC;AAClC,yBAA4B;AAC5B,oBAAqF;AAErF,MAAM,qBAAqB,EAAE,SAAS,OAAO;AAMtC,MAAM,WAAW,aAAAA,QAAM,KAAK,CAAC,EAAE,GAAG,MAAsB;AAC7D,QAAM,EAAE,OAAO,UAAU,eAAe,eAAe,aAAa,QAAI,yBAAW,8BAAW;AAC9F,QAAM,OAAO,MAAM,MAAM,IAAI,EAAE;AAC/B,QAAM,YAAY,MAAM,kBAAkB;AAC1C,QAAM,mBAAmB,MAAM,kBAAkB,IAAI,EAAE;AACvD,QAAM,iBAAa,uCAAkB,OAAO,EAAE;AAC9C,QAAM,OAAO,MAAM;AAEnB,QAAM,eAAW;AAAA,IACf,CAAC,SAA6B;AAC5B,UAAI,QAAQ,eAAe,eAAgB,MAAK,MAAM;AAAA,IACxD;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,QAAM,kBAAc,0BAAY,CAAC,MAAqC,SAAS,SAAS,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC;AAC9G,QAAM,6BAAyB,0BAAY,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,wDAAC,0CAAyB,eAA8B,wBACtD,sDAAC,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/cjs/parts/TreeContext.js

@@ -0,0 +1,37 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TreeContext_exports = {};
+__export(TreeContext_exports, {
+  TreeContext: () => TreeContext
+});
+module.exports = __toCommonJS(TreeContext_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+const TreeContext = (0, import_react.createContext)({});
+//# sourceMappingURL=TreeContext.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/TreeContext.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { createContext } from 'react';\nimport type { DSLeftNavigationTreeT } from '../react-desc-prop-types.js';\nimport type { TreeModel } from '../config/useTreeModel.js';\nimport type { useTreeHandlers } from '../config/useTreeHandlers.js';\n\nexport type TreeContextValue = {\n  model: TreeModel;\n  handlers: ReturnType<typeof useTreeHandlers>;\n  getOwnerProps: () => object;\n  labelOverflow: DSLeftNavigationTreeT.LabelOverflowT;\n  getElementId: (kind: string, dsId: string) => string;\n};\n\nexport const TreeContext = createContext<TreeContextValue>({} as TreeContextValue);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAavB,MAAM,kBAAc,4BAAgC,CAAC,CAAqB;",
+  "names": []
+}

package/dist/cjs/parts/TreeItem.js

@@ -0,0 +1,171 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TreeItem_exports = {};
+__export(TreeItem_exports, {
+  TreeItem: () => TreeItem
+});
+module.exports = __toCommonJS(TreeItem_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_treeModel = require("../config/treeModel.js");
+var import_useTreeModel = require("../config/useTreeModel.js");
+var import_TreeContext = require("./TreeContext.js");
+var import_styled = require("./styled.js");
+const ARROW_COLOR = ["brand-primary", "800"];
+const TreeItemArrow = ({
+  isLeading,
+  isOpen,
+  getOwnerProps,
+  getOwnerPropsArguments
+}) => {
+  const Arrowhead = isOpen ? import_ds_icons.ArrowheadDown : import_ds_icons.ArrowheadRight;
+  const Chevron = isOpen ? import_ds_icons.ChevronSmallDown : import_ds_icons.ChevronSmallRight;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styled.StyledArrowContainer,
+    {
+      "aria-hidden": "true",
+      isLeading,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: isLeading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Arrowhead, { size: "s", color: ARROW_COLOR }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Chevron, { size: "m", color: ARROW_COLOR })
+    }
+  );
+};
+const TreeItem = import_react.default.memo(({ id }) => {
+  const { model, handlers, getOwnerProps, labelOverflow, getElementId } = (0, import_react.useContext)(import_TreeContext.TreeContext);
+  const info = model.index.get(id);
+  const isParent = (0, import_treeModel.hasChildren)(info);
+  const isOpen = model.openIds.has(id);
+  const isCurrent = model.currentLeafId === id;
+  const isSelectedParent = model.selectedParentIds.has(id);
+  const focusState = (0, import_useTreeModel.useItemFocusState)(model, id);
+  const level = info?.level ?? 1;
+  const item = info?.item;
+  const focusRef = (0, import_react.useCallback)(
+    (node) => {
+      if (node && focusState === "focus-target") node.focus();
+    },
+    [focusState]
+  );
+  const handleClick = (0, import_react.useCallback)((e) => handlers.activate(id, e), [handlers, id]);
+  const getOwnerPropsArguments = (0, import_react.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 = (0, import_treeModel.hasLeadingArrow)(info);
+  const isOpenSection = level === 1 && isParent && isOpen && !!CollapsedComponent;
+  const descriptionId = getElementId("description", id);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_styled.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__ */ (0, import_jsx_runtime.jsxs)(
+          import_styled.StyledItemRow,
+          {
+            "data-row": true,
+            rowPadding: model.rowPaddings.get(id) ?? import_treeModel.ROW_PADDING,
+            isTall: level === 1 && !!CollapsedComponent,
+            isSticky: isOpenSection,
+            isCurrent,
+            isSelectedParent,
+            onClick: handleClick,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: [
+              CollapsedComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLeftContainer, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsedComponent, { item }) }) : null,
+              leadingArrow ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                TreeItemArrow,
+                {
+                  isLeading: leadingArrow,
+                  isOpen,
+                  getOwnerProps,
+                  getOwnerPropsArguments
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_styled.StyledItemLabel,
+                {
+                  id: labelId,
+                  isTall: level === 1 && !!CollapsedComponent,
+                  labelOverflow: item.itemOpts?.labelOverflow ?? labelOverflow,
+                  getOwnerProps,
+                  getOwnerPropsArguments,
+                  children: label
+                }
+              ),
+              RightComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_styled.StyledRightContainer,
+                {
+                  id: descriptionId,
+                  getOwnerProps,
+                  getOwnerPropsArguments,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RightComponent, { item })
+                }
+              ) : null,
+              isParent && !leadingArrow ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                TreeItemArrow,
+                {
+                  isLeading: leadingArrow,
+                  isOpen,
+                  getOwnerProps,
+                  getOwnerPropsArguments
+                }
+              ) : null
+            ]
+          }
+        ),
+        isParent && isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledGroup, { role: "group", getOwnerProps, getOwnerPropsArguments, children: info.childIds.map((childId) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TreeItem, { id: childId }, childId)) }) : null
+      ]
+    }
+  );
+});
+TreeItem.displayName = "DSLeftNavigationTree.TreeItem";
+//# sourceMappingURL=TreeItem.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/TreeItem.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/cjs/parts/TreeRoot.js

@@ -0,0 +1,76 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TreeRoot_exports = {};
+__export(TreeRoot_exports, {
+  TreeRoot: () => TreeRoot
+});
+module.exports = __toCommonJS(TreeRoot_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_constants = require("../constants/index.js");
+var import_TreeContext = require("./TreeContext.js");
+var import_TreeItem = require("./TreeItem.js");
+var import_RailItem = require("./RailItem.js");
+var import_styled = require("./styled.js");
+const TreeRoot = ({ nameProps }) => {
+  const { model, handlers, getOwnerProps, getElementId } = (0, import_react.useContext)(import_TreeContext.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 === import_constants.LEFT_NAVIGATION_TREE_ITEM_TYPES.SEPARATOR) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { role: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledItemSeparator, { "aria-hidden": "true", getOwnerProps }) }, item.dsId);
+    }
+    if (item.type === import_constants.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__ */ (0, import_jsx_runtime.jsxs)("li", { role: "none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSectionLabel, { id: sectionLabelId, "aria-hidden": "true", getOwnerProps, children: item.itemOpts?.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSectionContainer, { role: "group", "aria-labelledby": sectionLabelId, getOwnerProps, children: childIds.map((id) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeItem.TreeItem, { id }, id)) })
+      ] }, item.dsId);
+    }
+    return model.index.has(item.dsId) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeItem.TreeItem, { id: item.dsId }, item.dsId) : null;
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styled.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__ */ (0, import_jsx_runtime.jsx)(import_RailItem.RailItem, { id }, id)) : renderRootEntries()
+    }
+  );
+};
+//# sourceMappingURL=TreeRoot.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/TreeRoot.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwBX;AAxBZ,mBAAkC;AAClC,uBAAgD;AAChD,yBAA4B;AAC5B,sBAAyB;AACzB,sBAAyB;AACzB,oBAA4F;AAIrF,MAAM,WAAW,CAAC,EAAE,UAAU,MAAgC;AACnE,QAAM,EAAE,OAAO,UAAU,eAAe,aAAa,QAAI,yBAAW,8BAAW;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,iDAAgC,WAAW;AAC3D,aACE,4CAAC,QAAmB,MAAK,QACvB,sDAAC,qCAAoB,eAAY,QAAO,eAA8B,KAD/D,KAAK,IAEd;AAAA,IAEJ;AACA,QAAI,KAAK,SAAS,iDAAgC,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,6CAAC,QAAmB,MAAK,QACvB;AAAA,oDAAC,oCAAmB,IAAI,gBAAgB,eAAY,QAAO,eACxD,eAAK,UAAU,OAClB;AAAA,QACA,4CAAC,wCAAuB,MAAK,SAAQ,mBAAiB,gBAAgB,eACnE,mBAAS,IAAI,CAAC,OACb,4CAAC,4BAAkB,MAAJ,EAAY,CAC5B,GACH;AAAA,WARO,KAAK,IASd;AAAA,IAEJ;AACA,WAAO,MAAM,MAAM,IAAI,KAAK,IAAI,IAAI,4CAAC,4BAAyB,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,4CAAC,4BAAkB,MAAJ,EAAY,CAAE,IAAI,kBAAkB;AAAA;AAAA,EAClG;AAEJ;",
+  "names": []
+}