@elliemae/ds-menu-button 3.45.0-rc.0 → 3.45.0-rc.2

package/dist/cjs/parts/DSMenuBehaviouralContextProvider/utils/nodeGettersByCriterias.js

@@ -0,0 +1,144 @@
+"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 nodeGettersByCriterias_exports = {};
+__export(nodeGettersByCriterias_exports, {
+  getAllSingleSelectIdsFromParent: () => getAllSingleSelectIdsFromParent,
+  getChildrenByCriterias: () => getChildrenByCriterias,
+  getFocusableSiblingsList: () => getFocusableSiblingsList,
+  getParentsByCriterias: () => getParentsByCriterias,
+  getSubMenusPath: () => getSubMenusPath
+});
+module.exports = __toCommonJS(nodeGettersByCriterias_exports);
+var React = __toESM(require("react"));
+var import_nodesTypeguardsAndGetters = require("../../../utils/nodesTypeguardsAndGetters.js");
+var import_Errors = require("../constants/Errors.js");
+const getSubMenusPath = (itemNode) => {
+  const subMenuNodesPath = [];
+  itemNode.walkParents((node) => {
+    if (node.dsId === itemNode.dsId) return true;
+    if ((0, import_nodesTypeguardsAndGetters.isWithSubmenuNode)(node)) {
+      subMenuNodesPath.push(node);
+    }
+    return true;
+  });
+  return subMenuNodesPath.reverse();
+};
+const getFocusableSiblingsList = (itemNode) => {
+  const { parent: parentNode } = itemNode;
+  if (!parentNode) {
+    console.log("getFocusableSiblingsList > itemNode", itemNode);
+    throw import_Errors.UNEXPECTED_INTERNAL_ERRORS.NODE_WITHOUT_PARENT;
+  }
+  if (!(0, import_nodesTypeguardsAndGetters.isMenuNodeAllowedToHaveChildren)(parentNode)) {
+    console.log("parentNode", parentNode);
+    console.log("itemNode", itemNode);
+    throw import_Errors.TREE_STRUCTURE_ERRORS.NODE_CANNOT_HAVE_CHILDREN;
+  }
+  const focusableSiblingsNodes = [];
+  let parseableParentNode = parentNode;
+  if ((0, import_nodesTypeguardsAndGetters.isGroup)(parentNode)) {
+    if (!parentNode.parent) {
+      throw import_Errors.TREE_STRUCTURE_ERRORS.GROUP_WITHOUT_PARENT;
+    }
+    parseableParentNode = parentNode.parent;
+  }
+  parseableParentNode.children.forEach((node) => {
+    if ((0, import_nodesTypeguardsAndGetters.isFocusableNode)(node)) {
+      focusableSiblingsNodes.push(node);
+    }
+    if ((0, import_nodesTypeguardsAndGetters.isGroup)(node)) {
+      node.children.forEach((groupChild) => {
+        if ((0, import_nodesTypeguardsAndGetters.isFocusableNode)(groupChild)) {
+          focusableSiblingsNodes.push(groupChild);
+        }
+      });
+    }
+  });
+  return focusableSiblingsNodes;
+};
+const getAllSingleSelectIdsFromParent = (oldestParent) => {
+  const singleSelectionableItemsIds = [];
+  oldestParent.walk((node) => {
+    const typeCastedNode = node;
+    if ((0, import_nodesTypeguardsAndGetters.isSingleSelectNode)(typeCastedNode)) {
+      singleSelectionableItemsIds.push(node.dsId);
+    }
+    return true;
+  });
+  return singleSelectionableItemsIds;
+};
+const getParentsByCriterias = (menuNode) => {
+  let oldestGroupFoundSoFar;
+  const selectionableParentsWithSubmenu = [];
+  const groupParents = [];
+  menuNode.walkParents((node) => {
+    if (node.dsId === menuNode.dsId) return true;
+    const typeCastedNode = node;
+    if ((0, import_nodesTypeguardsAndGetters.isGroup)(typeCastedNode)) {
+      oldestGroupFoundSoFar = typeCastedNode;
+      groupParents.push(oldestGroupFoundSoFar);
+      return true;
+    }
+    if ((0, import_nodesTypeguardsAndGetters.isSelectionableWithSubmenuNode)(typeCastedNode)) {
+      selectionableParentsWithSubmenu.push(typeCastedNode);
+      return true;
+    }
+    return true;
+  });
+  if (!oldestGroupFoundSoFar) {
+    console.log("node:", menuNode);
+    console.log("parent:", menuNode.parent);
+    throw import_Errors.TREE_STRUCTURE_ERRORS.PARENT_NOT_GROUP;
+  }
+  return {
+    oldestGroup: oldestGroupFoundSoFar,
+    selectionableParentsWithSubmenu,
+    groupParents
+  };
+};
+const getChildrenByCriterias = (menuNode) => {
+  const selectionableChilrens = [];
+  const multiSelectionableChilrens = [];
+  menuNode.walk((node) => {
+    if (node.dsId === menuNode.dsId) return true;
+    const typeCastedNode = node;
+    if ((0, import_nodesTypeguardsAndGetters.isSelectionableNode)(typeCastedNode)) {
+      selectionableChilrens.push(typeCastedNode);
+      if ((0, import_nodesTypeguardsAndGetters.isMultipleSelectNode)(typeCastedNode)) {
+        multiSelectionableChilrens.push(typeCastedNode);
+      }
+    }
+    return true;
+  });
+  return {
+    selectionableChilrens,
+    multiSelectionableChilrens
+  };
+};
+//# sourceMappingURL=nodeGettersByCriterias.js.map

package/dist/cjs/parts/DSMenuBehaviouralContextProvider/utils/nodeGettersByCriterias.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSMenuBehaviouralContextProvider/utils/nodeGettersByCriterias.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable no-console */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type { DSMenuButtonT } from '../../../react-desc-prop-types.js';\nimport {\n  isFocusableNode,\n  isGroup,\n  isMenuNodeAllowedToHaveChildren,\n  isMultipleSelectNode,\n  isSelectionableNode,\n  isSelectionableWithSubmenuNode,\n  isSingleSelectNode,\n  isWithSubmenuNode,\n} from '../../../utils/nodesTypeguardsAndGetters.js';\nimport { TREE_STRUCTURE_ERRORS, UNEXPECTED_INTERNAL_ERRORS } from '../constants/Errors.js';\n\nexport const getSubMenusPath = (itemNode: DSMenuButtonT.MenuNode) => {\n  const subMenuNodesPath: DSMenuButtonT.WithSubmenuMenuNodes[] = [];\n  itemNode.walkParents((node) => {\n    // discards itself, we want the parents only\n    if (node.dsId === itemNode.dsId) return true;\n    if (isWithSubmenuNode(node)) {\n      subMenuNodesPath.push(node);\n    }\n    return true;\n  });\n  return subMenuNodesPath.reverse();\n};\n\nexport const getFocusableSiblingsList = (itemNode: DSMenuButtonT.MenuNode) => {\n  const { parent: parentNode } = itemNode;\n  if (!parentNode) {\n    console.log('getFocusableSiblingsList > itemNode', itemNode);\n    throw UNEXPECTED_INTERNAL_ERRORS.NODE_WITHOUT_PARENT;\n  }\n  if (!isMenuNodeAllowedToHaveChildren(parentNode)) {\n    // this should be impossible to reach, if this is reached, there is a bug in the code/validation checks\n    console.log('parentNode', parentNode);\n    console.log('itemNode', itemNode);\n    throw TREE_STRUCTURE_ERRORS.NODE_CANNOT_HAVE_CHILDREN;\n  }\n  // each tree depth may be composed of a mix of focusable and non-focusable nodes\n  //  in particular, the parent node may be a group node which is not focusable but it's children are (and are visually siblings)\n  // we need to do our calculations only on top of focusable nodes, and we also need to consider the scenario of a group node\n  const focusableSiblingsNodes: DSMenuButtonT.PseudoFocusableMenuNodes[] = [];\n\n  let parseableParentNode = parentNode;\n  // nesting a group node inside another group node is not allowed\n  //  I could not find a supporting explicit statement in the WCAG standard,\n  //   but given how everything else is defined and graphically represented,\n  //   it's the only logical conclusion.\n  //     Nesting would result in nodes being visually siblings\n  //      but logically non-exclusively selectable,\n  //        which would be a contradiction of the visuals\n  //        so violating the WCAG standard for other reasons\n  if (isGroup(parentNode)) {\n    if (!parentNode.parent) {\n      throw TREE_STRUCTURE_ERRORS.GROUP_WITHOUT_PARENT;\n    }\n    parseableParentNode = parentNode.parent;\n  }\n\n  parseableParentNode.children.forEach((node) => {\n    if (isFocusableNode(node)) {\n      focusableSiblingsNodes.push(node);\n    }\n    // if we encounter a group node we need to add it's children too\n    // (which here is guaranteed because we checked it in the if statement above)\n    if (isGroup(node)) {\n      node.children.forEach((groupChild) => {\n        if (isFocusableNode(groupChild)) {\n          focusableSiblingsNodes.push(groupChild);\n        }\n      });\n    }\n  });\n\n  return focusableSiblingsNodes;\n};\n\n/**\n * This functions walks the tree downwards starting from the oldest shared parent and returns all the single-selectable items ids\n * @param oldestParent - the oldest parent to start the walk from\n * @returns string | number[] - the list of all the single-selectable items ids starting from the oldest shared group\n */\nexport const getAllSingleSelectIdsFromParent = (oldestParent: DSMenuButtonT.MenuNodesAllowedToHaveChildren) => {\n  const singleSelectionableItemsIds: (string | number)[] = [];\n  oldestParent.walk((node) => {\n    // DSTree typescript doesn't understand ethereogeneous subitems, so we need to typecast manually\n    const typeCastedNode = node as unknown as\n      | DSMenuButtonT.SingleSelectionableMenuNodes\n      | DSMenuButtonT.MenuNodeSeparatorItem;\n    // is the node is a single-selectable item, we add it to the list\n    if (isSingleSelectNode(typeCastedNode)) {\n      singleSelectionableItemsIds.push(node.dsId);\n    }\n    // we walk all the tree (from the shared group), we never shortcircuit\n    return true;\n  });\n  return singleSelectionableItemsIds;\n};\n\n/**\n * walk all parents from a given node and gives back multiple supporting datastructures by different criterias\n *\n * @param menuNode\n * @returns {object} - an object holding different datastructures and information about the parents\n * @property {Object} oldestGroup - the oldest shared group\n * @property {Object[]} selectionableParentsWithSubmenu - the single/multiple selection parents with submenu\n * @property {Object[]} groupParents - all the 'groups' encountered while traversing the tree upwards\n */\nexport const getParentsByCriterias = (menuNode: DSMenuButtonT.MenuNode) => {\n  // group\n  let oldestGroupFoundSoFar: DSMenuButtonT.MenuNodeGroupItem;\n  const selectionableParentsWithSubmenu: DSMenuButtonT.SelectionablesWithSubmenuMenuNodes[] = [];\n  const groupParents: DSMenuButtonT.MenuNodeGroupItem[] = [];\n\n  menuNode.walkParents((node) => {\n    // discards itself, we want the parents only\n    if (node.dsId === menuNode.dsId) return true;\n    // DSTree is not able to understand ethereogeneous subitems, so we need to typecast manually\n    const typeCastedNode = node as unknown as DSMenuButtonT.MenuNode;\n\n    if (isGroup(typeCastedNode)) {\n      oldestGroupFoundSoFar = typeCastedNode;\n      groupParents.push(oldestGroupFoundSoFar);\n      // nothing else to do in this walking step, returing true to continue the walk\n      return true;\n    }\n    // we continue checking shared parents untill we see the pattern\n    //  group -> single-select-with-submenu -> group -> ...\n    // the moment the parent of a group is not a single-select-with-submenu we can stop,\n    //  we have found the oldest shared group\n    if (isSelectionableWithSubmenuNode(typeCastedNode)) {\n      selectionableParentsWithSubmenu.push(typeCastedNode);\n      return true;\n    }\n    // the node is not a single-select-with-submenu, we can stop the walk\n    return true;\n  });\n  // if we found no group parent starting from menuNode, the tree is malformed\n  // @ts-expect-error - typescript doesn't understand that \"walkParents\" actually executes the function synchronously\n  //  so it thinks that oldestGroupFoundSoFar was never assigned, it's a false positive\n  if (!oldestGroupFoundSoFar) {\n    console.log('node:', menuNode);\n    console.log('parent:', menuNode.parent);\n    throw TREE_STRUCTURE_ERRORS.PARENT_NOT_GROUP;\n  }\n  return {\n    oldestGroup: oldestGroupFoundSoFar,\n    selectionableParentsWithSubmenu,\n    groupParents,\n  };\n};\n\n/**\n * walk all childrens from a given node and gives back multiple supporting datastructures by different criterias\n *\n * @param menuNode\n * @returns {object} - an object holding different datastructures and information about the children\n * @property {Object[]} selectionableChilrens - the single/multiple selection children (regardless of the presence of a submenu)\n * @property {Object[]} multiSelectionableChilrens - the multiple selection children (regardless of the presence of a submenu)\n */\nexport const getChildrenByCriterias = (menuNode: DSMenuButtonT.MenuNode) => {\n  const selectionableChilrens: DSMenuButtonT.SelectionableMenuNodes[] = [];\n  const multiSelectionableChilrens: DSMenuButtonT.MultipleSelectionableMenuNodes[] = [];\n  menuNode.walk((node) => {\n    // discards itself, we want the children only\n    if (node.dsId === menuNode.dsId) return true;\n    // DSTree is not able to understand ethereogeneous subitems, so we need to typecast manually\n    const typeCastedNode = node as unknown as DSMenuButtonT.MenuNode;\n    if (isSelectionableNode(typeCastedNode)) {\n      selectionableChilrens.push(typeCastedNode);\n      if (isMultipleSelectNode(typeCastedNode)) {\n        multiSelectionableChilrens.push(typeCastedNode);\n      }\n    }\n    // we walk all the tree (from the shared group), we never shortcircuit\n    return true;\n  });\n  return {\n    selectionableChilrens,\n    multiSelectionableChilrens,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/parts/DSMenuBehaviouralContextProvider/utils/singleSelectionHelpers.js

@@ -0,0 +1,44 @@
+"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 singleSelectionHelpers_exports = {};
+__export(singleSelectionHelpers_exports, {
+  getNewSelectionSingleSelect: () => getNewSelectionSingleSelect
+});
+module.exports = __toCommonJS(singleSelectionHelpers_exports);
+var React = __toESM(require("react"));
+var import_nodeGettersByCriterias = require("./nodeGettersByCriterias.js");
+const getNewSelectionSingleSelect = (selectedItems, selectedItem) => {
+  const { oldestGroup, selectionableParentsWithSubmenu } = (0, import_nodeGettersByCriterias.getParentsByCriterias)(selectedItem);
+  const itemsIdsToDeselect = (0, import_nodeGettersByCriterias.getAllSingleSelectIdsFromParent)(oldestGroup);
+  const newSelection = selectedItems.filter((item) => !itemsIdsToDeselect.includes(item.plainItem.dsId));
+  newSelection.push(...selectionableParentsWithSubmenu);
+  newSelection.push(selectedItem);
+  return newSelection;
+};
+//# sourceMappingURL=singleSelectionHelpers.js.map

package/dist/cjs/parts/DSMenuBehaviouralContextProvider/utils/singleSelectionHelpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSMenuBehaviouralContextProvider/utils/singleSelectionHelpers.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { type DSMenuButtonT } from '../../../react-desc-prop-types.js';\nimport { getAllSingleSelectIdsFromParent, getParentsByCriterias } from './nodeGettersByCriterias.js';\n\n/**\n * When a single-selectable item is selected, all other single-selectable items in the same group are deselected;\n *\n * If the (visual) parent is a single-select-with-submenu,\n *  the selection must be propagated because\n *  a single-select within a single-select-with-submenu can't be selected without implying the selection of the parent single-select-with-submenu\n *\n * @param selectedItems - the current selected items\n * @param selectedItem - the newly selected item\n * @returns DSMenuButtonT.SelectionableMenuNodes[] - the new selection\n */\nexport const getNewSelectionSingleSelect = (\n  selectedItems: DSMenuButtonT.SelectionableMenuNodes[],\n  selectedItem: DSMenuButtonT.MenuNodeSingleSelectItem | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem,\n) => {\n  const { oldestGroup, selectionableParentsWithSubmenu } = getParentsByCriterias(selectedItem);\n  const itemsIdsToDeselect = getAllSingleSelectIdsFromParent(oldestGroup);\n  // we remove all the ids of single selection parents from the previous selection\n  const newSelection = selectedItems.filter((item) => !itemsIdsToDeselect.includes(item.plainItem.dsId));\n  // we add all the parents submenus to the selection\n  newSelection.push(...selectionableParentsWithSubmenu);\n  // finally we add the newly selected item\n  newSelection.push(selectedItem);\n\n  return newSelection;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,oCAAuE;AAahE,MAAM,8BAA8B,CACzC,eACA,iBACG;AACH,QAAM,EAAE,aAAa,gCAAgC,QAAI,qDAAsB,YAAY;AAC3F,QAAM,yBAAqB,+DAAgC,WAAW;AAEtE,QAAM,eAAe,cAAc,OAAO,CAAC,SAAS,CAAC,mBAAmB,SAAS,KAAK,UAAU,IAAI,CAAC;AAErG,eAAa,KAAK,GAAG,+BAA+B;AAEpD,eAAa,KAAK,YAAY;AAE9B,SAAO;AACT;",
+  "names": []
+}

package/dist/cjs/parts/DSMenuItemRendererFactory/ActivableMenuItem.js

@@ -0,0 +1,116 @@
+"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 ActivableMenuItem_exports = {};
+__export(ActivableMenuItem_exports, {
+  ActivableMenuItem: () => ActivableMenuItem
+});
+module.exports = __toCommonJS(ActivableMenuItem_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_menu_items_commons = require("@elliemae/ds-menu-items-commons");
+var import_react = __toESM(require("react"));
+var import_MenuBehaviouralContextProviderCTX = require("../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js");
+var import_constants = require("../DSMenuBehaviouralContextProvider/constants/index.js");
+const ActivableMenuItem = ({
+  itemNode
+}) => {
+  const { dsId, plainItem } = itemNode;
+  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
+  const {
+    focusRegion,
+    menuItemEventsHandlers: {
+      handleFocusableMenuItemKeyDown,
+      handleFocusableMenuItemClick,
+      handleFocusableMenuItemOnMouseEnter,
+      handleMenuItemFocusReconciliation
+    }
+  } = import_react.default.useContext(import_MenuBehaviouralContextProviderCTX.MenuBehaviouralContextProviderContext);
+  const gridLayout = import_react.default.useMemo(() => {
+    const cols = LeftDecComponent ? ["min-content", "auto"] : ["auto"];
+    if (secondaryLabel) cols.push("auto");
+    return cols;
+  }, [LeftDecComponent, secondaryLabel]);
+  const focusedRegionPerformanceHelper = import_react.default.useRef(focusRegion);
+  focusedRegionPerformanceHelper.current = focusRegion;
+  const isFocused = focusRegion === import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);
+  const handleFocusOnRender = import_react.default.useCallback(
+    (node) => {
+      if (node && focusRegion === import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
+        node.focus();
+      }
+    },
+    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set
+    [dsId, focusRegion]
+    // we are using the "as='div'", typescript is not able to infer the correct type
+    // the logic here actually receives a ref to a HTMLDivElement,
+    //   but the component must think this is a HTMLLIElement ref callback
+  );
+  const handleOnMouseEnter = import_react.default.useCallback(
+    (e) => {
+      handleFocusableMenuItemOnMouseEnter(itemNode, e);
+    },
+    [handleFocusableMenuItemOnMouseEnter, itemNode]
+  );
+  const handleOnFocusReconciliation = import_react.default.useCallback(() => {
+    handleMenuItemFocusReconciliation(itemNode);
+  }, [handleMenuItemFocusReconciliation, itemNode]);
+  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\s/g, "")}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ds_menu_items_commons.StyledGlobalMenuItemWrapper,
+    {
+      innerRef: handleFocusOnRender,
+      onKeyDown: handleFocusableMenuItemKeyDown,
+      onClick: handleFocusableMenuItemClick,
+      onMouseEnter: handleOnMouseEnter,
+      onFocus: handleOnFocusReconciliation,
+      as: "div",
+      id: `${spacelessDsIdForDom}`,
+      role: "menuitem",
+      tabIndex: isFocused ? 0 : -1,
+      "aria-disabled": disabled,
+      applyAriaDisabled: disabled,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_ds_menu_items_commons.StyledContentWrapper,
+        {
+          cols: gridLayout,
+          minHeight: "16px",
+          gutter: "xxs",
+          alignItems: "center",
+          minWidth: minWidth ?? void 0,
+          children: [
+            LeftDecComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LeftDecComponent, {}) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyleMenuItemLabel, { children: label }),
+            secondaryLabel !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyleMenuItemSecondaryLabel, { children: secondaryLabel })
+          ]
+        }
+      )
+    }
+  );
+};
+//# sourceMappingURL=ActivableMenuItem.js.map

package/dist/cjs/parts/DSMenuItemRendererFactory/ActivableMenuItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/DSMenuItemRendererFactory/ActivableMenuItem.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\n\nexport const ActivableMenuItem: React.ComponentType<{ itemNode: DSMenuButtonT.MenuNodeActivableItem }> = ({\n  itemNode,\n}) => {\n  const { dsId, plainItem } = itemNode;\n  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n  const {\n    focusRegion,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleMenuItemFocusReconciliation,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'auto'] : ['auto'];\n    if (secondaryLabel) cols.push('auto');\n    return cols;\n  }, [LeftDecComponent, secondaryLabel]);\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n        node.focus();\n      }\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemOnMouseEnter(itemNode, e);\n    },\n    [handleFocusableMenuItemOnMouseEnter, itemNode],\n  );\n  const handleOnFocusReconciliation = React.useCallback(() => {\n    handleMenuItemFocusReconciliation(itemNode);\n  }, [handleMenuItemFocusReconciliation, itemNode]);\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      innerRef={handleFocusOnRender}\n      onKeyDown={handleFocusableMenuItemKeyDown}\n      onClick={handleFocusableMenuItemClick}\n      onMouseEnter={handleOnMouseEnter}\n      onFocus={handleOnFocusReconciliation}\n      as=\"div\"\n      id={`${spacelessDsIdForDom}`}\n      role=\"menuitem\"\n      tabIndex={isFocused ? 0 : -1}\n      aria-disabled={disabled}\n      applyAriaDisabled={disabled}\n    >\n      <StyledContentWrapper\n        cols={gridLayout}\n        minHeight=\"16px\"\n        gutter=\"xxs\"\n        alignItems=\"center\"\n        minWidth={minWidth ?? undefined}\n      >\n        {LeftDecComponent ? <LeftDecComponent /> : null}\n        <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n        {secondaryLabel !== undefined && <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>}\n      </StyledContentWrapper>\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6EjB;AA5EN,mCAKO;AACP,mBAAkB;AAElB,+CAAsD;AACtD,uBAAmC;AAE5B,MAAM,oBAA4F,CAAC;AAAA,EACxG;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,OAAO,gBAAgB,gBAAgB,kBAAkB,UAAU,SAAS,IAAI;AAExF,QAAM;AAAA,IACJ;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,8EAAqC;AAE1D,QAAM,aAAa,aAAAA,QAAM,QAAQ,MAAM;AACrC,UAAM,OAAO,mBAAmB,CAAC,eAAe,MAAM,IAAI,CAAC,MAAM;AACjE,QAAI,eAAgB,MAAK,KAAK,MAAM;AACpC,WAAO;AAAA,EACT,GAAG,CAAC,kBAAkB,cAAc,CAAC;AAErC,QAAM,iCAAiC,aAAAA,QAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,YAAY,gBAAgB,oCAAmB,aAAa,IAAI;AAEtE,QAAM,sBAAsB,aAAAA,QAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,UAAI,QAAQ,gBAAgB,oCAAmB,aAAa,IAAI,GAAG;AACjE,aAAK,MAAM;AAAA,MACb;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA,EAIpB;AACA,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,MAAM;AACL,0CAAoC,UAAU,CAAC;AAAA,IACjD;AAAA,IACA,CAAC,qCAAqC,QAAQ;AAAA,EAChD;AACA,QAAM,8BAA8B,aAAAA,QAAM,YAAY,MAAM;AAC1D,sCAAkC,QAAQ;AAAA,EAC5C,GAAG,CAAC,mCAAmC,QAAQ,CAAC;AAEhD,QAAM,sBAAsB,gBAAgB,GAAG,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC;AAExE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MACT,cAAc;AAAA,MACd,SAAS;AAAA,MACT,IAAG;AAAA,MACH,IAAI,GAAG,mBAAmB;AAAA,MAC1B,MAAK;AAAA,MACL,UAAU,YAAY,IAAI;AAAA,MAC1B,iBAAe;AAAA,MACf,mBAAmB;AAAA,MAEnB;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACV,QAAO;AAAA,UACP,YAAW;AAAA,UACX,UAAU,YAAY;AAAA,UAErB;AAAA,+BAAmB,4CAAC,oBAAiB,IAAK;AAAA,YAC3C,4CAAC,mDAAoB,iBAAM;AAAA,YAC1B,mBAAmB,UAAa,4CAAC,4DAA6B,0BAAe;AAAA;AAAA;AAAA,MAChF;AAAA;AAAA,EACF;AAEJ;",
+  "names": ["React"]
+}

package/dist/cjs/parts/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.js

@@ -0,0 +1,159 @@
+"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 ActivableWithSubmenuMenuItem_exports = {};
+__export(ActivableWithSubmenuMenuItem_exports, {
+  ActivableWithSubmenuMenuItem: () => ActivableWithSubmenuMenuItem
+});
+module.exports = __toCommonJS(ActivableWithSubmenuMenuItem_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_menu_items_commons = require("@elliemae/ds-menu-items-commons");
+var import_react = __toESM(require("react"));
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
+var import_MenuBehaviouralContextProviderCTX = require("../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js");
+var import_constants = require("../DSMenuBehaviouralContextProvider/constants/index.js");
+const placementOrderPreference = [
+  "right-start",
+  "right-start",
+  "right",
+  "left-start",
+  "left-end",
+  "left"
+];
+const ActivableWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
+  const { dsId, plainItem } = itemNode;
+  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
+  const floatingContext = (0, import_ds_floating_context.useFloatingContext)({
+    placement: placementOrderPreference[0],
+    placementOrderPreference,
+    animationDuration: 100,
+    customOffset: [0, 0]
+  });
+  const {
+    refs: { setReference }
+  } = floatingContext;
+  const {
+    focusRegion,
+    openedSubItems,
+    menuItemEventsHandlers: {
+      handleFocusableMenuItemKeyDown,
+      handleFocusableMenuItemClick,
+      handleFocusableMenuItemOnMouseEnter,
+      handleMenuItemFocusReconciliation
+    }
+  } = import_react.default.useContext(import_MenuBehaviouralContextProviderCTX.MenuBehaviouralContextProviderContext);
+  const gridLayout = import_react.default.useMemo(() => {
+    const cols = LeftDecComponent ? ["min-content", "auto"] : ["auto"];
+    if (secondaryLabel) cols.push("auto");
+    return cols;
+  }, [LeftDecComponent, secondaryLabel]);
+  const focusedRegionPerformanceHelper = import_react.default.useRef(focusRegion);
+  focusedRegionPerformanceHelper.current = focusRegion;
+  const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);
+  const isFocused = focusRegion === import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);
+  const handleFocusOnRender = import_react.default.useCallback(
+    (node) => {
+      setReference(node);
+      if (node && focusRegion === import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
+        node.focus();
+      }
+    },
+    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set
+    [dsId, focusRegion, setReference]
+    // we are using the "as='div'", typescript is not able to infer the correct type
+    // the logic here actually receives a ref to a HTMLDivElement,
+    //   but the component must think this is a HTMLLIElement ref callback
+  );
+  const handleOnMouseEnter = import_react.default.useCallback(
+    (e) => {
+      handleFocusableMenuItemOnMouseEnter(itemNode, e);
+    },
+    [handleFocusableMenuItemOnMouseEnter, itemNode]
+  );
+  const handleOnFocusReconciliation = import_react.default.useCallback(() => {
+    handleMenuItemFocusReconciliation(itemNode);
+  }, [handleMenuItemFocusReconciliation, itemNode]);
+  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\s/g, "")}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ds_menu_items_commons.StyledGlobalMenuItemWrapper,
+      {
+        innerRef: handleFocusOnRender,
+        onKeyDown: handleFocusableMenuItemKeyDown,
+        onClick: handleFocusableMenuItemClick,
+        onMouseEnter: handleOnMouseEnter,
+        onFocus: handleOnFocusReconciliation,
+        as: "div",
+        id: `${spacelessDsIdForDom}`,
+        tabIndex: isFocused ? 0 : -1,
+        role: "menuitem",
+        "aria-controls": (
+          /* ********************************************************************************************************************
+           * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls
+           *    The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.
+           * ********************************************************************************************************************
+           * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM
+           *  so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error
+           * ******************************************************************************************************************** */
+          isExpanded ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\s/g, "")}`).join(" ") : void 0
+        ),
+        "aria-haspopup": "menu",
+        "aria-expanded": isExpanded,
+        "aria-disabled": disabled,
+        applyAriaDisabled: disabled,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_ds_menu_items_commons.StyledContentWrapper,
+          {
+            cols: gridLayout,
+            minHeight: "16px",
+            gutter: "xxs",
+            alignItems: "center",
+            minWidth: minWidth ?? void 0,
+            children: [
+              LeftDecComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LeftDecComponent, {}) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyleMenuItemLabel, { children: label }),
+              secondaryLabel !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyleMenuItemSecondaryLabel, { children: secondaryLabel })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      FlyoutMenuCircularDepInject,
+      {
+        isMenuOpen: isExpanded,
+        floatingContext: floatingContext.context,
+        floatingStyles: floatingContext.floatingStyles,
+        setFloatingRef: floatingContext.refs.setFloating,
+        itemNode
+      }
+    )
+  ] });
+};
+//# sourceMappingURL=ActivableWithSubmenuMenuItem.js.map

package/dist/cjs/parts/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n  'right-start',\n  'right-start',\n  'right',\n  'left-start',\n  'left-end',\n  'left',\n];\nexport const ActivableWithSubmenuMenuItem: React.ComponentType<{\n  itemNode: DSMenuButtonT.MenuNodeActivableWithSubmenuItem;\n  FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n  const { dsId, plainItem } = itemNode;\n  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n  const floatingContext = useFloatingContext({\n    placement: placementOrderPreference[0],\n    placementOrderPreference,\n    animationDuration: 100,\n    customOffset: [0, 0],\n  });\n  const {\n    refs: { setReference },\n  } = floatingContext;\n\n  const {\n    focusRegion,\n    openedSubItems,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleMenuItemFocusReconciliation,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'auto'] : ['auto'];\n    if (secondaryLabel) cols.push('auto');\n    return cols;\n  }, [LeftDecComponent, secondaryLabel]);\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      setReference(node);\n      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n        node.focus();\n      }\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion, setReference],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemOnMouseEnter(itemNode, e);\n    },\n    [handleFocusableMenuItemOnMouseEnter, itemNode],\n  );\n  const handleOnFocusReconciliation = React.useCallback(() => {\n    handleMenuItemFocusReconciliation(itemNode);\n  }, [handleMenuItemFocusReconciliation, itemNode]);\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n  return (\n    <>\n      <StyledGlobalMenuItemWrapper\n        innerRef={handleFocusOnRender}\n        onKeyDown={handleFocusableMenuItemKeyDown}\n        onClick={handleFocusableMenuItemClick}\n        onMouseEnter={handleOnMouseEnter}\n        onFocus={handleOnFocusReconciliation}\n        as=\"div\"\n        id={`${spacelessDsIdForDom}`}\n        tabIndex={isFocused ? 0 : -1}\n        role=\"menuitem\"\n        aria-controls={\n          /* ********************************************************************************************************************\n           * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n           *    The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n           * ********************************************************************************************************************\n           * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n           *  so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n           * ******************************************************************************************************************** */\n          isExpanded\n            ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n            : undefined\n        }\n        aria-haspopup=\"menu\"\n        aria-expanded={isExpanded}\n        aria-disabled={disabled}\n        applyAriaDisabled={disabled}\n      >\n        <StyledContentWrapper\n          cols={gridLayout}\n          minHeight=\"16px\"\n          gutter=\"xxs\"\n          alignItems=\"center\"\n          minWidth={minWidth ?? undefined}\n        >\n          {LeftDecComponent ? <LeftDecComponent /> : null}\n          <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n          {secondaryLabel !== undefined && <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>}\n        </StyledContentWrapper>\n      </StyledGlobalMenuItemWrapper>\n      <FlyoutMenuCircularDepInject\n        isMenuOpen={isExpanded}\n        floatingContext={floatingContext.context}\n        floatingStyles={floatingContext.floatingStyles}\n        setFloatingRef={floatingContext.refs.setFloating}\n        itemNode={itemNode}\n      />\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsFnB;AArFJ,mCAKO;AACP,mBAAkB;AAClB,iCAAgE;AAEhE,+CAAsD;AACtD,uBAAmC;AAEnC,MAAM,2BAA+F;AAAA,EACnG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACO,MAAM,+BAGR,CAAC,EAAE,UAAU,4BAA4B,MAAM;AAClD,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,OAAO,gBAAgB,gBAAgB,kBAAkB,UAAU,SAAS,IAAI;AACxF,QAAM,sBAAkB,+CAAmB;AAAA,IACzC,WAAW,yBAAyB,CAAC;AAAA,IACrC;AAAA,IACA,mBAAmB;AAAA,IACnB,cAAc,CAAC,GAAG,CAAC;AAAA,EACrB,CAAC;AACD,QAAM;AAAA,IACJ,MAAM,EAAE,aAAa;AAAA,EACvB,IAAI;AAEJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,8EAAqC;AAE1D,QAAM,aAAa,aAAAA,QAAM,QAAQ,MAAM;AACrC,UAAM,OAAO,mBAAmB,CAAC,eAAe,MAAM,IAAI,CAAC,MAAM;AACjE,QAAI,eAAgB,MAAK,KAAK,MAAM;AACpC,WAAO;AAAA,EACT,GAAG,CAAC,kBAAkB,cAAc,CAAC;AAErC,QAAM,iCAAiC,aAAAA,QAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,aAAa,eAAe,KAAK,CAAC,wBAAwB,oBAAoB,SAAS,IAAI;AACjG,QAAM,YAAY,gBAAgB,oCAAmB,aAAa,IAAI;AAEtE,QAAM,sBAAsB,aAAAA,QAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,mBAAa,IAAI;AACjB,UAAI,QAAQ,gBAAgB,oCAAmB,aAAa,IAAI,GAAG;AACjE,aAAK,MAAM;AAAA,MACb;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,MAAM,aAAa,YAAY;AAAA;AAAA;AAAA;AAAA,EAIlC;AAEA,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,MAAM;AACL,0CAAoC,UAAU,CAAC;AAAA,IACjD;AAAA,IACA,CAAC,qCAAqC,QAAQ;AAAA,EAChD;AACA,QAAM,8BAA8B,aAAAA,QAAM,YAAY,MAAM;AAC1D,sCAAkC,QAAQ;AAAA,EAC5C,GAAG,CAAC,mCAAmC,QAAQ,CAAC;AAEhD,QAAM,sBAAsB,gBAAgB,GAAG,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC;AACxE,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,WAAW;AAAA,QACX,SAAS;AAAA,QACT,cAAc;AAAA,QACd,SAAS;AAAA,QACT,IAAG;AAAA,QACH,IAAI,GAAG,mBAAmB;AAAA,QAC1B,UAAU,YAAY,IAAI;AAAA,QAC1B,MAAK;AAAA,QACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQE,aACI,SAAS,cAAc,IAAI,CAAC,UAAU,gBAAgB,GAAG,MAAM,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,IACpG;AAAA;AAAA,QAEN,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,mBAAmB;AAAA,QAEnB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,YACV,QAAO;AAAA,YACP,YAAW;AAAA,YACX,UAAU,YAAY;AAAA,YAErB;AAAA,iCAAmB,4CAAC,oBAAiB,IAAK;AAAA,cAC3C,4CAAC,mDAAoB,iBAAM;AAAA,cAC1B,mBAAmB,UAAa,4CAAC,4DAA6B,0BAAe;AAAA;AAAA;AAAA,QAChF;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY;AAAA,QACZ,iBAAiB,gBAAgB;AAAA,QACjC,gBAAgB,gBAAgB;AAAA,QAChC,gBAAgB,gBAAgB,KAAK;AAAA,QACrC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "names": ["React"]
+}