@elliemae/ds-menu-button 3.46.0-rc.1 → 3.46.0-rc.10

package/dist/cjs/parts/DSMenuBehaviouralContextProvider/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSMenuBehaviouralContextProvider/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { type DSMenuButtonT, MenuBehaviouralLayerPropTypes } from '../../react-desc-prop-types.js';\n\nexport declare namespace DSMenuBehaviouralContextProviderT {\n  /*\n   * everything that is specifically added in this namespace declaration and is not part of the original component\n   * is because the original component is an \"opinionated widget\" that offloads a chunk of responsibilities from dev to dimsum\n   * as such, the widget generates those interfaces,\n   *  but the app developer is not supposed to know about them\n   *    untill they go atomic composition (this namespace)\n   */\n  export interface RequiredProps extends DSMenuButtonT.MenuBehaviouralLayerRequiredProps {\n    buttonDOMNodeRef: React.MutableRefObject<HTMLElement | null>;\n    optionsTree: DSMenuButtonT.MenuNode;\n    children: TypescriptHelpersT.ReactChildrenComplete;\n    focusableNodes: DSMenuButtonT.PseudoFocusableMenuNodes[];\n  }\n\n  export interface DefaultProps extends DSMenuButtonT.MenuBehaviouralLayerDefaultProps {}\n\n  export interface OptionalProps extends DSMenuButtonT.MenuBehaviouralLayerOptionalProps {}\n  export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, RequiredProps {}\n}\n\nexport const defaultProps: DSMenuBehaviouralContextProviderT.DefaultProps = {};\n\nexport const DSMenuBehaviouralContextProviderPropTypes: DSPropTypesSchema<DSMenuBehaviouralContextProviderT.Props> = {\n  buttonDOMNodeRef: PropTypes.object.description(\n    'The DOM node of the button as a mutable Refs (required for performance reasons)',\n  ).isRequired,\n  children: PropTypes.node.description('the menu trigger and the menu components').isRequired,\n  optionsTree: PropTypes.object.description('DSTree node to build branches from').isRequired,\n  focusableNodes: PropTypes.arrayOf(PropTypes.object).description(\n    'an array of nodes that can receive pseudoFocus, obtainable via ds-tree flatten + filter(isFocusable)',\n  ).isRequired,\n  ...MenuBehaviouralLayerPropTypes,\n};\n\nexport const DSMenuBehaviouralContextProviderPropTypesSchema =\n  DSMenuBehaviouralContextProviderPropTypes as unknown as ValidationMap<DSMenuBehaviouralContextProviderT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAA0B;AAE1B,mCAAkE;AAyB3D,MAAM,eAA+D,CAAC;AAEtE,MAAM,4CAAwG;AAAA,EACnH,kBAAkB,kCAAU,OAAO;AAAA,IACjC;AAAA,EACF,EAAE;AAAA,EACF,UAAU,kCAAU,KAAK,YAAY,0CAA0C,EAAE;AAAA,EACjF,aAAa,kCAAU,OAAO,YAAY,oCAAoC,EAAE;AAAA,EAChF,gBAAgB,kCAAU,QAAQ,kCAAU,MAAM,EAAE;AAAA,IAClD;AAAA,EACF,EAAE;AAAA,EACF,GAAG;AACL;AAEO,MAAM,kDACX;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { type DSMenuButtonT, MenuBehaviouralLayerPropTypes } from '../../react-desc-prop-types.js';\n\nexport declare namespace DSMenuBehaviouralContextProviderT {\n  /*\n   * everything that is specifically added in this namespace declaration and is not part of the original component\n   * is because the original component is an \"opinionated widget\" that offloads a chunk of responsibilities from dev to dimsum\n   * as such, the widget generates those interfaces,\n   *  but the app developer is not supposed to know about them\n   *    untill they go atomic composition (this namespace)\n   */\n  export interface RequiredProps extends DSMenuButtonT.MenuBehaviouralLayerRequiredProps {\n    buttonDOMNodeRef: React.MutableRefObject<HTMLElement | null>;\n    optionsTree: DSMenuButtonT.MenuNode;\n    children: TypescriptHelpersT.ReactChildrenComplete;\n    focusableNodes: DSMenuButtonT.PseudoFocusableMenuNodes[];\n  }\n\n  export interface DefaultProps extends DSMenuButtonT.MenuBehaviouralLayerDefaultProps {}\n\n  export interface OptionalProps extends DSMenuButtonT.MenuBehaviouralLayerOptionalProps {\n    selectedNodes?: DSMenuButtonT.SelectionableMenuNodes[];\n  }\n  export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, RequiredProps {}\n}\n\nexport const defaultProps: DSMenuBehaviouralContextProviderT.DefaultProps = {};\n\nexport const DSMenuBehaviouralContextProviderPropTypes: DSPropTypesSchema<DSMenuBehaviouralContextProviderT.Props> = {\n  buttonDOMNodeRef: PropTypes.object.description(\n    'The DOM node of the button as a mutable Refs (required for performance reasons)',\n  ).isRequired,\n  children: PropTypes.node.description('the menu trigger and the menu components').isRequired,\n  optionsTree: PropTypes.object.description('DSTree node to build branches from').isRequired,\n  focusableNodes: PropTypes.arrayOf(PropTypes.object).description(\n    'an array of nodes that can receive pseudoFocus, obtainable via ds-tree flatten + filter(isFocusable)',\n  ).isRequired,\n  selectedNodes: PropTypes.arrayOf(PropTypes.object).description(\n    'an array of tree-nodes that have to be marked as selected in the GUI, required if the menu has selectionable items',\n  ),\n  ...MenuBehaviouralLayerPropTypes,\n};\n\nexport const DSMenuBehaviouralContextProviderPropTypesSchema =\n  DSMenuBehaviouralContextProviderPropTypes as unknown as ValidationMap<DSMenuBehaviouralContextProviderT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAA0B;AAE1B,mCAAkE;AA2B3D,MAAM,eAA+D,CAAC;AAEtE,MAAM,4CAAwG;AAAA,EACnH,kBAAkB,kCAAU,OAAO;AAAA,IACjC;AAAA,EACF,EAAE;AAAA,EACF,UAAU,kCAAU,KAAK,YAAY,0CAA0C,EAAE;AAAA,EACjF,aAAa,kCAAU,OAAO,YAAY,oCAAoC,EAAE;AAAA,EAChF,gBAAgB,kCAAU,QAAQ,kCAAU,MAAM,EAAE;AAAA,IAClD;AAAA,EACF,EAAE;AAAA,EACF,eAAe,kCAAU,QAAQ,kCAAU,MAAM,EAAE;AAAA,IACjD;AAAA,EACF;AAAA,EACA,GAAG;AACL;AAEO,MAAM,kDACX;",
   "names": []
 }

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

@@ -38,13 +38,13 @@ var import_Errors = require("../constants/Errors.js");
 var import_nodeGettersByCriterias = require("./nodeGettersByCriterias.js");
 const getIsMultipleSelectNodeWithSubmenuSelected = ({
   itemNode,
-  selectedItems
+  selectedNodes
 }) => {
-  if (selectedItems.length === 0) return false;
+  if (selectedNodes.length === 0) return false;
   const { multiSelectionableChilrens } = (0, import_nodeGettersByCriterias.getChildrenByCriterias)(itemNode);
   const selectedMultiChildren = [];
   let isSelectedItself = false;
-  selectedItems.forEach((itemMarkesAsSelected) => {
+  selectedNodes.forEach((itemMarkesAsSelected) => {
     if (itemMarkesAsSelected.dsId === itemNode.dsId) isSelectedItself = true;
     if ((0, import_nodesTypeguardsAndGetters.isMultipleSelectNode)(itemMarkesAsSelected)) {
       if (multiSelectionableChilrens.some((child) => child.dsId === itemMarkesAsSelected.dsId))
@@ -57,9 +57,9 @@ const getIsMultipleSelectNodeWithSubmenuSelected = ({
   if (selectedMultiChildren.length !== multiSelectionableChilrens.length) return "mixed";
   return true;
 };
-const getNewSelectionForMultipleSelectOnlyNode = (selectedItems, selectedItem) => {
-  const isDeselectingItem = selectedItems.find((item) => item.dsId === selectedItem.dsId) ?? false;
-  let newSelection = isDeselectingItem ? selectedItems.filter(({ dsId }) => dsId !== selectedItem.dsId) : [...selectedItems, selectedItem];
+const getNewSelectionForMultipleSelectOnlyNode = (selectedNodes, selectedItem) => {
+  const isDeselectingItem = selectedNodes.find((item) => item.dsId === selectedItem.dsId) ?? false;
+  let newSelection = isDeselectingItem ? selectedNodes.filter(({ dsId }) => dsId !== selectedItem.dsId) : [...selectedNodes, selectedItem];
   const notSelectedMultiParents = [];
   const selectedMultiParents = [];
   const multiParentsToDeselect = [];
@@ -72,7 +72,7 @@ const getNewSelectionForMultipleSelectOnlyNode = (selectedItems, selectedItem) =
         selectedMultiParents.push(typedParent);
         const isParentSelected = getIsMultipleSelectNodeWithSubmenuSelected({
           itemNode: typedParent,
-          selectedItems: newSelection
+          selectedNodes: newSelection
         });
         if (isParentSelected === false) multiParentsToDeselect.push(typedParent);
       } else notSelectedMultiParents.push(typedParent);
@@ -86,13 +86,13 @@ const getNewSelectionForMultipleSelectOnlyNode = (selectedItems, selectedItem) =
   }
   return newSelection;
 };
-const getNewSelectionForMultipleSelectionWithSubmenuNode = (selectedItems, selectedItem) => {
+const getNewSelectionForMultipleSelectionWithSubmenuNode = (selectedNodes, selectedItem) => {
   const currentStatus = getIsMultipleSelectNodeWithSubmenuSelected({
     itemNode: selectedItem,
-    selectedItems
+    selectedNodes
   });
   const isDeselectingItem = currentStatus === true;
-  let newSelection = isDeselectingItem ? selectedItems.filter(({ dsId }) => dsId !== selectedItem.dsId) : [...selectedItems, selectedItem];
+  let newSelection = isDeselectingItem ? selectedNodes.filter(({ dsId }) => dsId !== selectedItem.dsId) : [...selectedNodes, selectedItem];
   selectedItem.walk((child) => {
     const typedChild = child;
     if (isDeselectingItem) {
@@ -114,7 +114,7 @@ const getNewSelectionForMultipleSelectionWithSubmenuNode = (selectedItems, selec
         selectedMultiParents.push(typedParent);
         const isParentSelected = getIsMultipleSelectNodeWithSubmenuSelected({
           itemNode: typedParent,
-          selectedItems: newSelection
+          selectedNodes: newSelection
         });
         if (isParentSelected === false) multiParentsToDeselect.push(typedParent);
       } else notSelectedMultiParents.push(typedParent);
@@ -128,11 +128,11 @@ const getNewSelectionForMultipleSelectionWithSubmenuNode = (selectedItems, selec
   }
   return newSelection;
 };
-const getNewSelectionMultipleSelect = (selectedItems, selectedItem) => {
+const getNewSelectionMultipleSelect = (selectedNodes, selectedItem) => {
   if ((0, import_nodesTypeguardsAndGetters.isMultipleSelectOnlyNode)(selectedItem))
-    return getNewSelectionForMultipleSelectOnlyNode(selectedItems, selectedItem);
+    return getNewSelectionForMultipleSelectOnlyNode(selectedNodes, selectedItem);
   if ((0, import_nodesTypeguardsAndGetters.isMultipleSelectWithSubmenuNode)(selectedItem))
-    return getNewSelectionForMultipleSelectionWithSubmenuNode(selectedItems, selectedItem);
+    return getNewSelectionForMultipleSelectionWithSubmenuNode(selectedNodes, selectedItem);
   console.log(selectedItem);
   throw import_Errors.UNEXPECTED_INTERNAL_ERRORS.CALCULATING_MULTI_SELECTION_OF_NON_MULTI_SELECTION_NODE;
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/DSMenuBehaviouralContextProvider/utils/multipleSelectionHelpers.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-console */\n/* eslint-disable max-statements */\nimport { type DSMenuButtonT } from '../../../react-desc-prop-types.js';\nimport {\n  isMultipleSelectNode,\n  isMultipleSelectOnlyNode,\n  isMultipleSelectWithSubmenuNode,\n} from '../../../utils/nodesTypeguardsAndGetters.js';\nimport { UNEXPECTED_INTERNAL_ERRORS } from '../constants/Errors.js';\nimport { getChildrenByCriterias } from './nodeGettersByCriterias.js';\n\nexport const getIsMultipleSelectNodeWithSubmenuSelected = ({\n  itemNode,\n  selectedItems,\n}: {\n  itemNode: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem;\n  selectedItems: DSMenuButtonT.SelectionableMenuNodes[];\n}) => {\n  // no selected items, nothing is selected <- this is not selected neither, nothing else to check\n  if (selectedItems.length === 0) return false;\n\n  const { multiSelectionableChilrens } = getChildrenByCriterias(itemNode);\n  const selectedMultiChildren: DSMenuButtonT.MultipleSelectionableMenuNodes[] = [];\n  let isSelectedItself = false;\n  selectedItems.forEach((itemMarkesAsSelected) => {\n    if (itemMarkesAsSelected.dsId === itemNode.dsId) isSelectedItself = true;\n    if (isMultipleSelectNode(itemMarkesAsSelected)) {\n      // we reduce scenarios of O(n*m), if the node is not a multi-selectable node, we don't iterate the multiSelectionable childrens\n      if (multiSelectionableChilrens.some((child) => child.dsId === itemMarkesAsSelected.dsId))\n        selectedMultiChildren.push(itemMarkesAsSelected);\n    }\n  });\n  // console.group(`${itemNode.dsId} > getting \"selected\" (true/false/mixed) status`);\n  // console.log({\n  //   itemNode: itemNode.dsId,\n  //   selectedItems: selectedItems.map((itm) => itm.dsId),\n  //   multiSelectionableChilrens: multiSelectionableChilrens.map((itm) => itm.dsId),\n  //   selectedMultiChildren: selectedMultiChildren.map((itm) => itm.dsId),\n  //   isSelectedItself,\n  // });\n  // console.groupEnd();\n  // if it's not marked as selected, it's not selected.\n  if (!isSelectedItself) return false;\n  // if the node doesn't even have multi children, to calculate 'mixed' status upon (it may still have radios)\n  //  (and is selected itself), it's selected\n  if (multiSelectionableChilrens.length === 0) return true;\n\n  // multi children exist and the node is selected\n  //  it can be\n  //    true if all the multi children are selected\n  //    mixed if not all the multi children are selected\n  //    false if all the multi children are not selected\n\n  // multi children exist but none are selected at all?\n  if (selectedMultiChildren.length === 0) return false;\n  // any multi children is not selected?\n  if (selectedMultiChildren.length !== multiSelectionableChilrens.length) return 'mixed';\n  // there is a multi selection, and everything is selected\n  return true;\n};\n\nconst getNewSelectionForMultipleSelectOnlyNode = (\n  selectedItems: DSMenuButtonT.SelectionableMenuNodes[],\n  selectedItem: DSMenuButtonT.MenuNodeMultipleSelectItem,\n) => {\n  const isDeselectingItem = selectedItems.find((item) => item.dsId === selectedItem.dsId) ?? false;\n\n  let newSelection = isDeselectingItem\n    ? selectedItems.filter(({ dsId }) => dsId !== selectedItem.dsId)\n    : [...selectedItems, selectedItem];\n  const notSelectedMultiParents: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem[] = [];\n  const selectedMultiParents: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem[] = [];\n  const multiParentsToDeselect: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem[] = [];\n\n  // we walk the parents and track info about them\n  selectedItem.walkParents((parent) => {\n    // discard ourself, only interested in the parents\n    if (parent.dsId === selectedItem.dsId) return true;\n    // DSTree typescripst doesn't understand ethereogenic nodes, so we need to typecast\n    const typedParent = parent as unknown as DSMenuButtonT.MenuNode;\n    if (isMultipleSelectWithSubmenuNode(typedParent)) {\n      // before we add the parent, we need to check if it's already in the selection\n      const isAlreadySelected = newSelection.find((item) => item.dsId === typedParent.dsId);\n      if (isAlreadySelected) {\n        selectedMultiParents.push(typedParent);\n        // we check if the parent is mixed or should be false (so we can deselect it)\n        const isParentSelected = getIsMultipleSelectNodeWithSubmenuSelected({\n          itemNode: typedParent,\n          selectedItems: newSelection,\n        });\n        if (isParentSelected === false) multiParentsToDeselect.push(typedParent);\n      } else notSelectedMultiParents.push(typedParent);\n    }\n    return true;\n  });\n\n  if (isDeselectingItem) {\n    // if we are deselecting:\n    //  we need to remove the parent nodes that are not selected anymore\n    //   (they transition from mixed to not selected because of this item deselection)\n    newSelection = newSelection.filter(({ dsId }) => !multiParentsToDeselect.some((parent) => parent.dsId === dsId));\n  } else {\n    // if we are selecting:\n    //  we need to add the parent nodes that are not selected yet\n    //   (they transition from not selected to mixed because of this item selection)\n    newSelection.push(...notSelectedMultiParents);\n  }\n\n  return newSelection;\n};\n\nconst getNewSelectionForMultipleSelectionWithSubmenuNode = (\n  selectedItems: DSMenuButtonT.SelectionableMenuNodes[],\n  selectedItem: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem,\n) => {\n  // when selecting/deselecting a node with a submenu, we need to consider the hierarchy of the selection starting from here\n  //  both upwards and downwards\n  // - upwards\n  //   we have to check if any multi-selectable-with-submenu parent transition from not selected to mixed || mixed to selected\n  // - downwards\n  //   - Deselect\n  //     we have to deselect all the selectable children (regarless of the depth of the children and kind of selection)\n  //   - Select\n  //     we have to select all the multi-selectable children that are not selected yet (both with and without submenu)\n\n  // console.group(`${selectedItem.dsId} > getting new selection`);\n  const currentStatus = getIsMultipleSelectNodeWithSubmenuSelected({\n    itemNode: selectedItem,\n    selectedItems,\n  });\n  const isDeselectingItem = currentStatus === true;\n\n  let newSelection = isDeselectingItem\n    ? selectedItems.filter(({ dsId }) => dsId !== selectedItem.dsId)\n    : [...selectedItems, selectedItem];\n\n  // console.log(\n  //   'starting newSelection',\n  //   newSelection.map(({ dsId }) => dsId),\n  // );\n\n  // we walk the children first and update the new selection accordingly\n  //  (it's important we first traverse the children, so we can update the selection of the parents accordingly to the new selection)\n  selectedItem.walk((child) => {\n    // DSTree typescripst doesn't understand ethereogenic nodes, so we need to typecast\n    const typedChild = child as unknown as DSMenuButtonT.SelectionableMenuNodes;\n    if (isDeselectingItem) {\n      // if we are deselecting, we need to remove the children from the selection\n      newSelection = newSelection.filter(({ dsId }) => dsId !== typedChild.dsId);\n    } else if (isMultipleSelectNode(typedChild) && !newSelection.find((item) => item.dsId === typedChild.dsId)) {\n      // if we are selecting, we need to add all the multi children to the selection (if they are not already there)\n      // (we don't do anything with single-selectable nodes, they are not affected by this operation by definition)\n      newSelection.push(typedChild);\n    }\n    return true;\n  });\n\n  // console.log(\n  //   'newSelection after applying logic to children, pre parents traversal',\n  //   newSelection.map(({ dsId }) => dsId),\n  // );\n\n  // now newSelection has the correct information about the node itself and its children\n  // we need to update the parents accordingly\n\n  const notSelectedMultiParents: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem[] = [];\n  const selectedMultiParents: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem[] = [];\n  const multiParentsToDeselect: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem[] = [];\n  // we walk the parents and track info about them\n  selectedItem.walkParents((parent) => {\n    // discard ourself, only interested in the parents\n    if (parent.dsId === selectedItem.dsId) return true;\n    // DSTree typescripst doesn't understand ethereogenic nodes, so we need to typecast\n    const typedParent = parent as unknown as DSMenuButtonT.MenuNode;\n    if (isMultipleSelectWithSubmenuNode(typedParent)) {\n      // before we add the parent, we need to check if it's already in the selection\n      const isAlreadySelected = newSelection.find((item) => item.dsId === typedParent.dsId);\n      if (isAlreadySelected) {\n        selectedMultiParents.push(typedParent);\n        // we check if the parent is mixed or should be false (so we can deselect it)\n        const isParentSelected = getIsMultipleSelectNodeWithSubmenuSelected({\n          itemNode: typedParent,\n          selectedItems: newSelection,\n        });\n        if (isParentSelected === false) multiParentsToDeselect.push(typedParent);\n      } else notSelectedMultiParents.push(typedParent);\n    }\n    return true;\n  });\n\n  // console.log(\n  //   'parents info > notSelectedMultiParents',\n  //   notSelectedMultiParents.map(({ dsId }) => dsId),\n  // );\n  // console.log(\n  //   'parents info > selectedMultiParents',\n  //   selectedMultiParents.map(({ dsId }) => dsId),\n  // );\n  // console.log(\n  //   'parents info > multiParentsToDeselect',\n  //   multiParentsToDeselect.map(({ dsId }) => dsId),\n  // );\n\n  // finally we use the info we gathered to update the selection\n  if (isDeselectingItem) {\n    // if we are deselecting:\n    //  we need to remove the parent nodes that are not selected anymore\n    //   (they transition from mixed to not selected because of this item deselection)\n    newSelection = newSelection.filter(({ dsId }) => !multiParentsToDeselect.some((parent) => parent.dsId === dsId));\n  } else {\n    // if we are selecting:\n    //  we need to add the parent nodes that are not selected yet\n    //   (they transition from not selected to mixed because of this item selection)\n    newSelection.push(...notSelectedMultiParents);\n  }\n\n  // console.log(\n  //   'final newSelection',\n  //   newSelection.map(({ dsId }) => dsId),\n  // );\n\n  // console.groupEnd();\n  return newSelection;\n};\n\nexport const getNewSelectionMultipleSelect = (\n  selectedItems: DSMenuButtonT.SelectionableMenuNodes[],\n  selectedItem: DSMenuButtonT.MultipleSelectionableMenuNodes,\n) => {\n  // depending on if we are selecting/deselecting an item with/without submenu, we need to handle the selection differently\n  if (isMultipleSelectOnlyNode(selectedItem))\n    return getNewSelectionForMultipleSelectOnlyNode(selectedItems, selectedItem);\n\n  if (isMultipleSelectWithSubmenuNode(selectedItem))\n    return getNewSelectionForMultipleSelectionWithSubmenuNode(selectedItems, selectedItem);\n\n  // if we reach this point, we are in an invalid state, we should never reach here\n  console.log(selectedItem);\n  throw UNEXPECTED_INTERNAL_ERRORS.CALCULATING_MULTI_SELECTION_OF_NON_MULTI_SELECTION_NODE;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable no-console */\n/* eslint-disable max-statements */\nimport { type DSMenuButtonT } from '../../../react-desc-prop-types.js';\nimport {\n  isMultipleSelectNode,\n  isMultipleSelectOnlyNode,\n  isMultipleSelectWithSubmenuNode,\n} from '../../../utils/nodesTypeguardsAndGetters.js';\nimport { UNEXPECTED_INTERNAL_ERRORS } from '../constants/Errors.js';\nimport { getChildrenByCriterias } from './nodeGettersByCriterias.js';\n\nexport const getIsMultipleSelectNodeWithSubmenuSelected = ({\n  itemNode,\n  selectedNodes,\n}: {\n  itemNode: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem;\n  selectedNodes: DSMenuButtonT.SelectionableMenuNodes[];\n}) => {\n  // no selected items, nothing is selected <- this is not selected neither, nothing else to check\n  if (selectedNodes.length === 0) return false;\n\n  const { multiSelectionableChilrens } = getChildrenByCriterias(itemNode);\n  const selectedMultiChildren: DSMenuButtonT.MultipleSelectionableMenuNodes[] = [];\n  let isSelectedItself = false;\n  selectedNodes.forEach((itemMarkesAsSelected) => {\n    if (itemMarkesAsSelected.dsId === itemNode.dsId) isSelectedItself = true;\n    if (isMultipleSelectNode(itemMarkesAsSelected)) {\n      // we reduce scenarios of O(n*m), if the node is not a multi-selectable node, we don't iterate the multiSelectionable childrens\n      if (multiSelectionableChilrens.some((child) => child.dsId === itemMarkesAsSelected.dsId))\n        selectedMultiChildren.push(itemMarkesAsSelected);\n    }\n  });\n  // console.group(`${itemNode.dsId} > getting \"selected\" (true/false/mixed) status`);\n  // console.log({\n  //   itemNode: itemNode.dsId,\n  //   selectedNodes: selectedNodes.map((itm) => itm.dsId),\n  //   multiSelectionableChilrens: multiSelectionableChilrens.map((itm) => itm.dsId),\n  //   selectedMultiChildren: selectedMultiChildren.map((itm) => itm.dsId),\n  //   isSelectedItself,\n  // });\n  // console.groupEnd();\n  // if it's not marked as selected, it's not selected.\n  if (!isSelectedItself) return false;\n  // if the node doesn't even have multi children, to calculate 'mixed' status upon (it may still have radios)\n  //  (and is selected itself), it's selected\n  if (multiSelectionableChilrens.length === 0) return true;\n\n  // multi children exist and the node is selected\n  //  it can be\n  //    true if all the multi children are selected\n  //    mixed if not all the multi children are selected\n  //    false if all the multi children are not selected\n\n  // multi children exist but none are selected at all?\n  if (selectedMultiChildren.length === 0) return false;\n  // any multi children is not selected?\n  if (selectedMultiChildren.length !== multiSelectionableChilrens.length) return 'mixed';\n  // there is a multi selection, and everything is selected\n  return true;\n};\n\nconst getNewSelectionForMultipleSelectOnlyNode = (\n  selectedNodes: DSMenuButtonT.SelectionableMenuNodes[],\n  selectedItem: DSMenuButtonT.MenuNodeMultipleSelectItem,\n) => {\n  const isDeselectingItem = selectedNodes.find((item) => item.dsId === selectedItem.dsId) ?? false;\n\n  let newSelection = isDeselectingItem\n    ? selectedNodes.filter(({ dsId }) => dsId !== selectedItem.dsId)\n    : [...selectedNodes, selectedItem];\n  const notSelectedMultiParents: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem[] = [];\n  const selectedMultiParents: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem[] = [];\n  const multiParentsToDeselect: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem[] = [];\n\n  // we walk the parents and track info about them\n  selectedItem.walkParents((parent) => {\n    // discard ourself, only interested in the parents\n    if (parent.dsId === selectedItem.dsId) return true;\n    // DSTree typescripst doesn't understand ethereogenic nodes, so we need to typecast\n    const typedParent = parent as unknown as DSMenuButtonT.MenuNode;\n    if (isMultipleSelectWithSubmenuNode(typedParent)) {\n      // before we add the parent, we need to check if it's already in the selection\n      const isAlreadySelected = newSelection.find((item) => item.dsId === typedParent.dsId);\n      if (isAlreadySelected) {\n        selectedMultiParents.push(typedParent);\n        // we check if the parent is mixed or should be false (so we can deselect it)\n        const isParentSelected = getIsMultipleSelectNodeWithSubmenuSelected({\n          itemNode: typedParent,\n          selectedNodes: newSelection,\n        });\n        if (isParentSelected === false) multiParentsToDeselect.push(typedParent);\n      } else notSelectedMultiParents.push(typedParent);\n    }\n    return true;\n  });\n\n  if (isDeselectingItem) {\n    // if we are deselecting:\n    //  we need to remove the parent nodes that are not selected anymore\n    //   (they transition from mixed to not selected because of this item deselection)\n    newSelection = newSelection.filter(({ dsId }) => !multiParentsToDeselect.some((parent) => parent.dsId === dsId));\n  } else {\n    // if we are selecting:\n    //  we need to add the parent nodes that are not selected yet\n    //   (they transition from not selected to mixed because of this item selection)\n    newSelection.push(...notSelectedMultiParents);\n  }\n\n  return newSelection;\n};\n\nconst getNewSelectionForMultipleSelectionWithSubmenuNode = (\n  selectedNodes: DSMenuButtonT.SelectionableMenuNodes[],\n  selectedItem: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem,\n) => {\n  // when selecting/deselecting a node with a submenu, we need to consider the hierarchy of the selection starting from here\n  //  both upwards and downwards\n  // - upwards\n  //   we have to check if any multi-selectable-with-submenu parent transition from not selected to mixed || mixed to selected\n  // - downwards\n  //   - Deselect\n  //     we have to deselect all the selectable children (regarless of the depth of the children and kind of selection)\n  //   - Select\n  //     we have to select all the multi-selectable children that are not selected yet (both with and without submenu)\n\n  // console.group(`${selectedItem.dsId} > getting new selection`);\n  const currentStatus = getIsMultipleSelectNodeWithSubmenuSelected({\n    itemNode: selectedItem,\n    selectedNodes,\n  });\n  const isDeselectingItem = currentStatus === true;\n\n  let newSelection = isDeselectingItem\n    ? selectedNodes.filter(({ dsId }) => dsId !== selectedItem.dsId)\n    : [...selectedNodes, selectedItem];\n\n  // console.log(\n  //   'starting newSelection',\n  //   newSelection.map(({ dsId }) => dsId),\n  // );\n\n  // we walk the children first and update the new selection accordingly\n  //  (it's important we first traverse the children, so we can update the selection of the parents accordingly to the new selection)\n  selectedItem.walk((child) => {\n    // DSTree typescripst doesn't understand ethereogenic nodes, so we need to typecast\n    const typedChild = child as unknown as DSMenuButtonT.SelectionableMenuNodes;\n    if (isDeselectingItem) {\n      // if we are deselecting, we need to remove the children from the selection\n      newSelection = newSelection.filter(({ dsId }) => dsId !== typedChild.dsId);\n    } else if (isMultipleSelectNode(typedChild) && !newSelection.find((item) => item.dsId === typedChild.dsId)) {\n      // if we are selecting, we need to add all the multi children to the selection (if they are not already there)\n      // (we don't do anything with single-selectable nodes, they are not affected by this operation by definition)\n      newSelection.push(typedChild);\n    }\n    return true;\n  });\n\n  // console.log(\n  //   'newSelection after applying logic to children, pre parents traversal',\n  //   newSelection.map(({ dsId }) => dsId),\n  // );\n\n  // now newSelection has the correct information about the node itself and its children\n  // we need to update the parents accordingly\n\n  const notSelectedMultiParents: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem[] = [];\n  const selectedMultiParents: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem[] = [];\n  const multiParentsToDeselect: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem[] = [];\n  // we walk the parents and track info about them\n  selectedItem.walkParents((parent) => {\n    // discard ourself, only interested in the parents\n    if (parent.dsId === selectedItem.dsId) return true;\n    // DSTree typescripst doesn't understand ethereogenic nodes, so we need to typecast\n    const typedParent = parent as unknown as DSMenuButtonT.MenuNode;\n    if (isMultipleSelectWithSubmenuNode(typedParent)) {\n      // before we add the parent, we need to check if it's already in the selection\n      const isAlreadySelected = newSelection.find((item) => item.dsId === typedParent.dsId);\n      if (isAlreadySelected) {\n        selectedMultiParents.push(typedParent);\n        // we check if the parent is mixed or should be false (so we can deselect it)\n        const isParentSelected = getIsMultipleSelectNodeWithSubmenuSelected({\n          itemNode: typedParent,\n          selectedNodes: newSelection,\n        });\n        if (isParentSelected === false) multiParentsToDeselect.push(typedParent);\n      } else notSelectedMultiParents.push(typedParent);\n    }\n    return true;\n  });\n\n  // console.log(\n  //   'parents info > notSelectedMultiParents',\n  //   notSelectedMultiParents.map(({ dsId }) => dsId),\n  // );\n  // console.log(\n  //   'parents info > selectedMultiParents',\n  //   selectedMultiParents.map(({ dsId }) => dsId),\n  // );\n  // console.log(\n  //   'parents info > multiParentsToDeselect',\n  //   multiParentsToDeselect.map(({ dsId }) => dsId),\n  // );\n\n  // finally we use the info we gathered to update the selection\n  if (isDeselectingItem) {\n    // if we are deselecting:\n    //  we need to remove the parent nodes that are not selected anymore\n    //   (they transition from mixed to not selected because of this item deselection)\n    newSelection = newSelection.filter(({ dsId }) => !multiParentsToDeselect.some((parent) => parent.dsId === dsId));\n  } else {\n    // if we are selecting:\n    //  we need to add the parent nodes that are not selected yet\n    //   (they transition from not selected to mixed because of this item selection)\n    newSelection.push(...notSelectedMultiParents);\n  }\n\n  // console.log(\n  //   'final newSelection',\n  //   newSelection.map(({ dsId }) => dsId),\n  // );\n\n  // console.groupEnd();\n  return newSelection;\n};\n\nexport const getNewSelectionMultipleSelect = (\n  selectedNodes: DSMenuButtonT.SelectionableMenuNodes[],\n  selectedItem: DSMenuButtonT.MultipleSelectionableMenuNodes,\n) => {\n  // depending on if we are selecting/deselecting an item with/without submenu, we need to handle the selection differently\n  if (isMultipleSelectOnlyNode(selectedItem))\n    return getNewSelectionForMultipleSelectOnlyNode(selectedNodes, selectedItem);\n\n  if (isMultipleSelectWithSubmenuNode(selectedItem))\n    return getNewSelectionForMultipleSelectionWithSubmenuNode(selectedNodes, selectedItem);\n\n  // if we reach this point, we are in an invalid state, we should never reach here\n  console.log(selectedItem);\n  throw UNEXPECTED_INTERNAL_ERRORS.CALCULATING_MULTI_SELECTION_OF_NON_MULTI_SELECTION_NODE;\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": "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",
   "names": []
 }

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

@@ -33,10 +33,10 @@ __export(singleSelectionHelpers_exports, {
 module.exports = __toCommonJS(singleSelectionHelpers_exports);
 var React = __toESM(require("react"));
 var import_nodeGettersByCriterias = require("./nodeGettersByCriterias.js");
-const getNewSelectionSingleSelect = (selectedItems, selectedItem) => {
+const getNewSelectionSingleSelect = (selectedNodes, 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));
+  const newSelection = selectedNodes.filter((item) => !itemsIdsToDeselect.includes(item.plainItem.dsId));
   newSelection.push(...selectionableParentsWithSubmenu);
   newSelection.push(selectedItem);
   return newSelection;

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

@@ -1,7 +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"],
+  "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 selectedNodes - the current selected items\n * @param selectedItem - the newly selected item\n * @returns DSMenuButtonT.SelectionableMenuNodes[] - the new selection\n */\nexport const getNewSelectionSingleSelect = (\n  selectedNodes: 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 = selectedNodes.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

@@ -37,6 +37,7 @@ 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");
+var import_focusNodeRacingConditionSolved = require("./focusNodeRacingConditionSolved.js");
 const ActivableMenuItem = ({
   itemNode
 }) => {
@@ -47,7 +48,8 @@ const ActivableMenuItem = ({
     menuItemEventsHandlers: {
       handleFocusableMenuItemKeyDown,
       handleFocusableMenuItemClick,
-      handleFocusableMenuItemOnMouseEnter
+      handleFocusableMenuItemOnMouseEnter,
+      handleFocusableMenuItemNativeFocusEvent
     }
   } = import_react.default.useContext(import_MenuBehaviouralContextProviderCTX.MenuBehaviouralContextProviderContext);
   const gridLayout = import_react.default.useMemo(() => {
@@ -60,11 +62,9 @@ const ActivableMenuItem = ({
   const isFocused = focusRegion === import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);
   const handleFocusOnRender = import_react.default.useCallback(
     (node) => {
-      setTimeout(() => {
-        if (node && focusRegion === import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
-          node.focus();
-        }
-      });
+      if (node && focusRegion === import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
+        (0, import_focusNodeRacingConditionSolved.focusNodeRacingConditionSolved)(node);
+      }
     },
     // we need to change the callback reference every time the focusRegion changes or else the focus will not be set
     [dsId, focusRegion]
@@ -72,11 +72,14 @@ const ActivableMenuItem = ({
     // 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(
+  const handleOnMouseEnter = import_react.default.useCallback(() => {
+    handleFocusableMenuItemOnMouseEnter(itemNode);
+  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);
+  const handleOnFocus = import_react.default.useCallback(
     (e) => {
-      handleFocusableMenuItemOnMouseEnter(itemNode, e);
+      handleFocusableMenuItemNativeFocusEvent(itemNode, e);
     },
-    [handleFocusableMenuItemOnMouseEnter, itemNode]
+    [handleFocusableMenuItemNativeFocusEvent, itemNode]
   );
   const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\s/g, "")}`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -86,6 +89,7 @@ const ActivableMenuItem = ({
       onKeyDown: handleFocusableMenuItemKeyDown,
       onClick: handleFocusableMenuItemClick,
       onMouseEnter: handleOnMouseEnter,
+      onFocus: handleOnFocus,
       as: "div",
       id: `${spacelessDsIdForDom}`,
       role: "menuitem",

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

@@ -1,7 +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    },\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      setTimeout(() => {\n        if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n          node.focus();\n        }\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\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      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 && (\n          <StyleMenuItemSecondaryLabel disabled={disabled}>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n        )}\n      </StyledContentWrapper>\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0EjB;AAzEN,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,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,iBAAW,MAAM;AACf,YAAI,QAAQ,gBAAgB,oCAAmB,aAAa,IAAI,GAAG;AACjE,eAAK,MAAM;AAAA,QACb;AAAA,MACF,CAAC;AAAA,IACH;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;AAEA,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,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,UAClB,4CAAC,4DAA4B,UAAqB,0BAAe;AAAA;AAAA;AAAA,MAErE;AAAA;AAAA,EACF;AAEJ;",
+  "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';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.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      handleFocusableMenuItemNativeFocusEvent,\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        focusNodeRacingConditionSolved(node);\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    handleFocusableMenuItemOnMouseEnter(itemNode);\n  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n  const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n    },\n    [handleFocusableMenuItemNativeFocusEvent, itemNode],\n  );\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={handleOnFocus}\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 && (\n          <StyleMenuItemSecondaryLabel disabled={disabled}>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n        )}\n      </StyledContentWrapper>\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8EjB;AA7EN,mCAKO;AACP,mBAAkB;AAElB,+CAAsD;AACtD,uBAAmC;AACnC,4CAA+C;AAExC,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,kFAA+B,IAAI;AAAA,MACrC;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA,EAIpB;AACA,QAAM,qBAAqB,aAAAA,QAAM,YAAqD,MAAM;AAC1F,wCAAoC,QAAQ;AAAA,EAC9C,GAAG,CAAC,qCAAqC,QAAQ,CAAC;AAClD,QAAM,gBAAgB,aAAAA,QAAM;AAAA,IAC1B,CAAC,MAAM;AACL,8CAAwC,UAAU,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,yCAAyC,QAAQ;AAAA,EACpD;AAEA,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,UAClB,4CAAC,4DAA4B,UAAqB,0BAAe;AAAA;AAAA;AAAA,MAErE;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React"]
 }

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

@@ -38,6 +38,7 @@ 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");
+var import_focusNodeRacingConditionSolved = require("./focusNodeRacingConditionSolved.js");
 const placementOrderPreference = [
   "right-start",
   "right-start",
@@ -64,7 +65,8 @@ const ActivableWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject })
     menuItemEventsHandlers: {
       handleFocusableMenuItemKeyDown,
       handleFocusableMenuItemClick,
-      handleFocusableMenuItemOnMouseEnter
+      handleFocusableMenuItemOnMouseEnter,
+      handleFocusableMenuItemNativeFocusEvent
     }
   } = import_react.default.useContext(import_MenuBehaviouralContextProviderCTX.MenuBehaviouralContextProviderContext);
   const gridLayout = import_react.default.useMemo(() => {
@@ -79,11 +81,9 @@ const ActivableWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject })
   const handleFocusOnRender = import_react.default.useCallback(
     (node) => {
       setReference(node);
-      setTimeout(() => {
-        if (node && focusRegion === import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
-          node.focus();
-        }
-      });
+      if (node && focusRegion === import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
+        (0, import_focusNodeRacingConditionSolved.focusNodeRacingConditionSolved)(node);
+      }
     },
     // we need to change the callback reference every time the focusRegion changes or else the focus will not be set
     [dsId, focusRegion, setReference]
@@ -91,11 +91,14 @@ const ActivableWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject })
     // 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(
+  const handleOnMouseEnter = import_react.default.useCallback(() => {
+    handleFocusableMenuItemOnMouseEnter(itemNode);
+  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);
+  const handleOnFocus = import_react.default.useCallback(
     (e) => {
-      handleFocusableMenuItemOnMouseEnter(itemNode, e);
+      handleFocusableMenuItemNativeFocusEvent(itemNode, e);
     },
-    [handleFocusableMenuItemOnMouseEnter, itemNode]
+    [handleFocusableMenuItemNativeFocusEvent, itemNode]
   );
   const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\s/g, "")}`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
@@ -106,6 +109,7 @@ const ActivableWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject })
         onKeyDown: handleFocusableMenuItemKeyDown,
         onClick: handleFocusableMenuItemClick,
         onMouseEnter: handleOnMouseEnter,
+        onFocus: handleOnFocus,
         as: "div",
         id: `${spacelessDsIdForDom}`,
         tabIndex: isFocused ? 0 : -1,

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

@@ -1,7 +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    },\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      setTimeout(() => {\n        if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n          node.focus();\n        }\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\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        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 && (\n            <StyleMenuItemSecondaryLabel disabled={disabled}>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n          )}\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": "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",
+  "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';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\n\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      handleFocusableMenuItemNativeFocusEvent,\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        focusNodeRacingConditionSolved(node);\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    handleFocusableMenuItemOnMouseEnter(itemNode);\n  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n  const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n    },\n    [handleFocusableMenuItemNativeFocusEvent, itemNode],\n  );\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={handleOnFocus}\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 && (\n            <StyleMenuItemSecondaryLabel disabled={disabled}>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n          )}\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": "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",
   "names": ["React"]
 }

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

@@ -35,20 +35,21 @@ module.exports = __toCommonJS(DSMenuItemRendererFactory_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_menu_items_commons = require("@elliemae/ds-menu-items-commons");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_system = require("@elliemae/ds-system");
-var import_useMenuItemRendererFactory = require("./config/useMenuItemRendererFactory.js");
-var import_constants = require("./constants/index.js");
-var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+var import_nodesTypeguardsAndGetters = require("../../utils/nodesTypeguardsAndGetters.js");
 var import_ActivableMenuItem = require("./ActivableMenuItem.js");
+var import_ActivableWithSubmenuMenuItem = require("./ActivableWithSubmenuMenuItem.js");
+var import_MultipleSelectMenuItem = require("./MultipleSelectMenuItem.js");
+var import_MultipleSelectWithSubmenuMenuItem = require("./MultipleSelectWithSubmenuMenuItem.js");
 var import_SingleSelectMenuItem = require("./SingleSelectMenuItem.js");
 var import_SingleSelectWithSubmenuMenuItem = require("./SingleSelectWithSubmenuMenuItem.js");
-var import_MultipleSelectMenuItem = require("./MultipleSelectMenuItem.js");
+var import_SkeletonMenuItem = require("./SkeletonMenuItem.js");
 var import_WithSubmenuMenuItem = require("./WithSubmenuMenuItem.js");
-var import_MultipleSelectWithSubmenuMenuItem = require("./MultipleSelectWithSubmenuMenuItem.js");
-var import_ActivableWithSubmenuMenuItem = require("./ActivableWithSubmenuMenuItem.js");
-var import_nodesTypeguardsAndGetters = require("../../utils/nodesTypeguardsAndGetters.js");
+var import_useMenuItemRendererFactory = require("./config/useMenuItemRendererFactory.js");
+var import_constants = require("./constants/index.js");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 const StyledGroupLabelWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
   name: import_constants.DSMenuItemRendererFactoryName,
   slot: import_constants.MENU_ITEM_RENDERER_FACTORY_SLOTS.GROUP_LABEL_WRAPPER
@@ -67,7 +68,7 @@ const DSMenuItemRendererFactory = (props) => {
   if (ItemRenderer) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemRenderer, { itemNode });
   if ((0, import_nodesTypeguardsAndGetters.isSeparatorNode)(itemNode))
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyledSeparatorWrapper, { as: "div", role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyledSeparator, {}) });
-  if ((0, import_nodesTypeguardsAndGetters.isSkeletonNode)(itemNode)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: "loading..." });
+  if ((0, import_nodesTypeguardsAndGetters.isSkeletonNode)(itemNode)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonMenuItem.SkeletonMenuItem, { itemNode });
   if ((0, import_nodesTypeguardsAndGetters.isActivableNode)(itemNode)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActivableMenuItem.ActivableMenuItem, { itemNode });
   if ((0, import_nodesTypeguardsAndGetters.isMultipleSelectOnlyNode)(itemNode)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MultipleSelectMenuItem.MultipleSelectMenuItem, { itemNode });
   if ((0, import_nodesTypeguardsAndGetters.isSingleSelectOnlyNode)(itemNode)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SingleSelectMenuItem.SingleSelectMenuItem, { itemNode });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSMenuItemRendererFactory/DSMenuItemRendererFactory.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { StyledGroupLabel, StyledSeparator, StyledSeparatorWrapper } from '@elliemae/ds-menu-items-commons';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { useMenuItemRendererFactory } from './config/useMenuItemRendererFactory.js';\nimport { DSMenuItemRendererFactoryName, MENU_ITEM_RENDERER_FACTORY_SLOTS } from './constants/index.js';\nimport { DSMenuItemRendererFactoryPropTypesSchema, type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { ActivableMenuItem } from './ActivableMenuItem.js';\nimport { SingleSelectMenuItem } from './SingleSelectMenuItem.js';\nimport { SingleSelectWithSubmenuMenuItem } from './SingleSelectWithSubmenuMenuItem.js';\nimport { MultipleSelectMenuItem } from './MultipleSelectMenuItem.js';\nimport { WithSubmenuMenuItem } from './WithSubmenuMenuItem.js';\nimport { MultipleSelectWithSubmenuMenuItem } from './MultipleSelectWithSubmenuMenuItem.js';\nimport { ActivableWithSubmenuMenuItem } from './ActivableWithSubmenuMenuItem.js';\nimport {\n  isActivableNode,\n  isSkeletonNode,\n  isMultipleSelectOnlyNode,\n  isSingleSelectOnlyNode,\n  isSeparatorNode,\n  isGroup,\n  isWithSubmenuOnlyNode,\n  isSingleSelectNodeWithSubmenu,\n  isMultipleSelectWithSubmenuNode,\n  isActivableWithSubmenuNode,\n} from '../../utils/nodesTypeguardsAndGetters.js';\n\nconst StyledGroupLabelWrapper = styled(Grid, {\n  name: DSMenuItemRendererFactoryName,\n  slot: MENU_ITEM_RENDERER_FACTORY_SLOTS.GROUP_LABEL_WRAPPER,\n})`\n  padding: ${({ theme }) => theme.space.xxxs} ${({ theme }) => theme.space.xs};\n`;\n\nconst StyledLabelWithLeftDecWrapper = styled(Grid, {\n  name: DSMenuItemRendererFactoryName,\n  slot: MENU_ITEM_RENDERER_FACTORY_SLOTS.LABEL_WITH_LEFT_DEC_WRAPPER,\n})`\n  padding-left: ${({ theme }) => theme.space.xxs};\n`;\n\nconst DSMenuItemRendererFactory: React.ComponentType<DSMenuItemRendererFactoryT.Props> = (props) => {\n  const { propsWithDefault, instanceUid } = useMenuItemRendererFactory(props);\n  const { itemNode, ItemRenderer, FlyoutMenuCircularDepInject } = propsWithDefault;\n\n  if (ItemRenderer) return <ItemRenderer itemNode={itemNode} />;\n\n  if (isSeparatorNode(itemNode))\n    return (\n      <StyledSeparatorWrapper as=\"div\" role=\"presentation\">\n        <StyledSeparator />\n      </StyledSeparatorWrapper>\n    );\n  if (isSkeletonNode(itemNode)) return <li>loading...</li>;\n  if (isActivableNode(itemNode)) return <ActivableMenuItem itemNode={itemNode} />;\n  if (isMultipleSelectOnlyNode(itemNode)) return <MultipleSelectMenuItem itemNode={itemNode} />;\n  if (isSingleSelectOnlyNode(itemNode)) return <SingleSelectMenuItem itemNode={itemNode} />;\n\n  if (isWithSubmenuOnlyNode(itemNode))\n    return <WithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />;\n  if (isSingleSelectNodeWithSubmenu(itemNode))\n    return (\n      <SingleSelectWithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />\n    );\n  if (isMultipleSelectWithSubmenuNode(itemNode))\n    return (\n      <MultipleSelectWithSubmenuMenuItem\n        itemNode={itemNode}\n        FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject}\n      />\n    );\n  if (isActivableWithSubmenuNode(itemNode))\n    return (\n      <ActivableWithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />\n    );\n\n  // defined in this file to avoid to have to inject the ItemRendererFactory prop in the \"GroupMenuItem\" component\n  //  if we eventually move this to a separate file,\n  //     we will have to inject the ItemRendererFactory prop in the \"GroupMenuItem\" component to avoid circular dependencies\n  if (isGroup(itemNode)) {\n    const { leftDecoration: LeftDecComponent, label, minWidth } = itemNode.plainItem;\n    const spacelessIdForGroup = label ? `label-${label.replace(/\\s/g, '')}` : undefined;\n\n    return (\n      <div role=\"group\" aria-labelledby={spacelessIdForGroup} style={minWidth ? { minWidth } : {}}>\n        {label ? (\n          <StyledGroupLabelWrapper cols={LeftDecComponent ? ['min-content', '1fr'] : ['1fr']}>\n            {LeftDecComponent ? <LeftDecComponent /> : null}\n            <StyledGroupLabel role=\"presentation\" id={spacelessIdForGroup}>\n              {LeftDecComponent ? <StyledLabelWithLeftDecWrapper>{label}</StyledLabelWithLeftDecWrapper> : label}\n            </StyledGroupLabel>\n          </StyledGroupLabelWrapper>\n        ) : null}\n        {itemNode.children.map((subItemNode) => (\n          <DSMenuItemRendererFactory\n            key={`item-factory-${subItemNode.dsId}-${instanceUid}`}\n            itemNode={subItemNode}\n            FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject}\n          />\n        ))}\n      </div>\n    );\n  }\n\n  // if we get here either\n  // - a new type of item has been added and this component wasn't updated\n  //   -> update this component to handle the new type\n  // - developer provided an invalid type for the item\n  //   -> developer should fix the item type\n  // ----------\n  // the following rule is disabled because this is LITERALLY an error throwing section,\n  //    of course typescript thinks type is never, that's why we are throwing an error...\n  // ----------\n  // eslint-disable-next-line @typescript-eslint/restrict-template-expressions\n  throw new Error(`Invalid item type: ${JSON.stringify(itemNode)}`);\n};\n\nDSMenuItemRendererFactory.displayName = DSMenuItemRendererFactoryName;\nconst DSMenuItemRendererFactoryWithSchema = describe(DSMenuItemRendererFactory);\nDSMenuItemRendererFactoryWithSchema.propTypes = DSMenuItemRendererFactoryPropTypesSchema;\n\nexport { DSMenuItemRendererFactory, DSMenuItemRendererFactoryWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+CI;AA9C3B,qBAAqB;AACrB,8BAAyB;AACzB,mCAA0E;AAC1E,uBAAuB;AAEvB,wCAA2C;AAC3C,uBAAgF;AAChF,mCAA0F;AAC1F,+BAAkC;AAClC,kCAAqC;AACrC,6CAAgD;AAChD,oCAAuC;AACvC,iCAAoC;AACpC,+CAAkD;AAClD,0CAA6C;AAC7C,uCAWO;AAEP,MAAM,8BAA0B,yBAAO,qBAAM;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,kDAAiC;AACzC,CAAC;AAAA,aACY,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI,IAAI,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAG7E,MAAM,oCAAgC,yBAAO,qBAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,kDAAiC;AACzC,CAAC;AAAA,kBACiB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA;AAGhD,MAAM,4BAAmF,CAAC,UAAU;AAClG,QAAM,EAAE,kBAAkB,YAAY,QAAI,8DAA2B,KAAK;AAC1E,QAAM,EAAE,UAAU,cAAc,4BAA4B,IAAI;AAEhE,MAAI,aAAc,QAAO,4CAAC,gBAAa,UAAoB;AAE3D,UAAI,kDAAgB,QAAQ;AAC1B,WACE,4CAAC,uDAAuB,IAAG,OAAM,MAAK,gBACpC,sDAAC,gDAAgB,GACnB;AAEJ,UAAI,iDAAe,QAAQ,EAAG,QAAO,4CAAC,QAAG,wBAAU;AACnD,UAAI,kDAAgB,QAAQ,EAAG,QAAO,4CAAC,8CAAkB,UAAoB;AAC7E,UAAI,2DAAyB,QAAQ,EAAG,QAAO,4CAAC,wDAAuB,UAAoB;AAC3F,UAAI,yDAAuB,QAAQ,EAAG,QAAO,4CAAC,oDAAqB,UAAoB;AAEvF,UAAI,wDAAsB,QAAQ;AAChC,WAAO,4CAAC,kDAAoB,UAAoB,6BAA0D;AAC5G,UAAI,gEAA8B,QAAQ;AACxC,WACE,4CAAC,0EAAgC,UAAoB,6BAA0D;AAEnH,UAAI,kEAAgC,QAAQ;AAC1C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA;AAAA,IACF;AAEJ,UAAI,6DAA2B,QAAQ;AACrC,WACE,4CAAC,oEAA6B,UAAoB,6BAA0D;AAMhH,UAAI,0CAAQ,QAAQ,GAAG;AACrB,UAAM,EAAE,gBAAgB,kBAAkB,OAAO,SAAS,IAAI,SAAS;AACvE,UAAM,sBAAsB,QAAQ,SAAS,MAAM,QAAQ,OAAO,EAAE,CAAC,KAAK;AAE1E,WACE,6CAAC,SAAI,MAAK,SAAQ,mBAAiB,qBAAqB,OAAO,WAAW,EAAE,SAAS,IAAI,CAAC,GACvF;AAAA,cACC,6CAAC,2BAAwB,MAAM,mBAAmB,CAAC,eAAe,KAAK,IAAI,CAAC,KAAK,GAC9E;AAAA,2BAAmB,4CAAC,oBAAiB,IAAK;AAAA,QAC3C,4CAAC,iDAAiB,MAAK,gBAAe,IAAI,qBACvC,6BAAmB,4CAAC,iCAA+B,iBAAM,IAAmC,OAC/F;AAAA,SACF,IACE;AAAA,MACH,SAAS,SAAS,IAAI,CAAC,gBACtB;AAAA,QAAC;AAAA;AAAA,UAEC,UAAU;AAAA,UACV;AAAA;AAAA,QAFK,gBAAgB,YAAY,IAAI,IAAI,WAAW;AAAA,MAGtD,CACD;AAAA,OACH;AAAA,EAEJ;AAYA,QAAM,IAAI,MAAM,sBAAsB,KAAK,UAAU,QAAQ,CAAC,EAAE;AAClE;AAEA,0BAA0B,cAAc;AACxC,MAAM,0CAAsC,kCAAS,yBAAyB;AAC9E,oCAAoC,YAAY;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledGroupLabel, StyledSeparator, StyledSeparatorWrapper } from '@elliemae/ds-menu-items-commons';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport {\n  isActivableNode,\n  isActivableWithSubmenuNode,\n  isGroup,\n  isMultipleSelectOnlyNode,\n  isMultipleSelectWithSubmenuNode,\n  isSeparatorNode,\n  isSingleSelectNodeWithSubmenu,\n  isSingleSelectOnlyNode,\n  isSkeletonNode,\n  isWithSubmenuOnlyNode,\n} from '../../utils/nodesTypeguardsAndGetters.js';\nimport { ActivableMenuItem } from './ActivableMenuItem.js';\nimport { ActivableWithSubmenuMenuItem } from './ActivableWithSubmenuMenuItem.js';\nimport { MultipleSelectMenuItem } from './MultipleSelectMenuItem.js';\nimport { MultipleSelectWithSubmenuMenuItem } from './MultipleSelectWithSubmenuMenuItem.js';\nimport { SingleSelectMenuItem } from './SingleSelectMenuItem.js';\nimport { SingleSelectWithSubmenuMenuItem } from './SingleSelectWithSubmenuMenuItem.js';\nimport { SkeletonMenuItem } from './SkeletonMenuItem.js';\nimport { WithSubmenuMenuItem } from './WithSubmenuMenuItem.js';\nimport { useMenuItemRendererFactory } from './config/useMenuItemRendererFactory.js';\nimport { DSMenuItemRendererFactoryName, MENU_ITEM_RENDERER_FACTORY_SLOTS } from './constants/index.js';\nimport { DSMenuItemRendererFactoryPropTypesSchema, type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\n\nconst StyledGroupLabelWrapper = styled(Grid, {\n  name: DSMenuItemRendererFactoryName,\n  slot: MENU_ITEM_RENDERER_FACTORY_SLOTS.GROUP_LABEL_WRAPPER,\n})`\n  padding: ${({ theme }) => theme.space.xxxs} ${({ theme }) => theme.space.xs};\n`;\n\nconst StyledLabelWithLeftDecWrapper = styled(Grid, {\n  name: DSMenuItemRendererFactoryName,\n  slot: MENU_ITEM_RENDERER_FACTORY_SLOTS.LABEL_WITH_LEFT_DEC_WRAPPER,\n})`\n  padding-left: ${({ theme }) => theme.space.xxs};\n`;\n\nconst DSMenuItemRendererFactory: React.ComponentType<DSMenuItemRendererFactoryT.Props> = (props) => {\n  const { propsWithDefault, instanceUid } = useMenuItemRendererFactory(props);\n  const { itemNode, ItemRenderer, FlyoutMenuCircularDepInject } = propsWithDefault;\n\n  if (ItemRenderer) return <ItemRenderer itemNode={itemNode} />;\n\n  if (isSeparatorNode(itemNode))\n    return (\n      <StyledSeparatorWrapper as=\"div\" role=\"presentation\">\n        <StyledSeparator />\n      </StyledSeparatorWrapper>\n    );\n  if (isSkeletonNode(itemNode)) return <SkeletonMenuItem itemNode={itemNode} />;\n  if (isActivableNode(itemNode)) return <ActivableMenuItem itemNode={itemNode} />;\n  if (isMultipleSelectOnlyNode(itemNode)) return <MultipleSelectMenuItem itemNode={itemNode} />;\n  if (isSingleSelectOnlyNode(itemNode)) return <SingleSelectMenuItem itemNode={itemNode} />;\n\n  if (isWithSubmenuOnlyNode(itemNode))\n    return <WithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />;\n  if (isSingleSelectNodeWithSubmenu(itemNode))\n    return (\n      <SingleSelectWithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />\n    );\n  if (isMultipleSelectWithSubmenuNode(itemNode))\n    return (\n      <MultipleSelectWithSubmenuMenuItem\n        itemNode={itemNode}\n        FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject}\n      />\n    );\n  if (isActivableWithSubmenuNode(itemNode))\n    return (\n      <ActivableWithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />\n    );\n\n  // defined in this file to avoid to have to inject the ItemRendererFactory prop in the \"GroupMenuItem\" component\n  //  if we eventually move this to a separate file,\n  //     we will have to inject the ItemRendererFactory prop in the \"GroupMenuItem\" component to avoid circular dependencies\n  if (isGroup(itemNode)) {\n    const { leftDecoration: LeftDecComponent, label, minWidth } = itemNode.plainItem;\n    const spacelessIdForGroup = label ? `label-${label.replace(/\\s/g, '')}` : undefined;\n\n    return (\n      <div role=\"group\" aria-labelledby={spacelessIdForGroup} style={minWidth ? { minWidth } : {}}>\n        {label ? (\n          <StyledGroupLabelWrapper cols={LeftDecComponent ? ['min-content', '1fr'] : ['1fr']}>\n            {LeftDecComponent ? <LeftDecComponent /> : null}\n            <StyledGroupLabel role=\"presentation\" id={spacelessIdForGroup}>\n              {LeftDecComponent ? <StyledLabelWithLeftDecWrapper>{label}</StyledLabelWithLeftDecWrapper> : label}\n            </StyledGroupLabel>\n          </StyledGroupLabelWrapper>\n        ) : null}\n        {itemNode.children.map((subItemNode) => (\n          <DSMenuItemRendererFactory\n            key={`item-factory-${subItemNode.dsId}-${instanceUid}`}\n            itemNode={subItemNode}\n            FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject}\n          />\n        ))}\n      </div>\n    );\n  }\n\n  // if we get here either\n  // - a new type of item has been added and this component wasn't updated\n  //   -> update this component to handle the new type\n  // - developer provided an invalid type for the item\n  //   -> developer should fix the item type\n  // ----------\n  // the following rule is disabled because this is LITERALLY an error throwing section,\n  //    of course typescript thinks type is never, that's why we are throwing an error...\n  // ----------\n  // eslint-disable-next-line @typescript-eslint/restrict-template-expressions\n  throw new Error(`Invalid item type: ${JSON.stringify(itemNode)}`);\n};\n\nDSMenuItemRendererFactory.displayName = DSMenuItemRendererFactoryName;\nconst DSMenuItemRendererFactoryWithSchema = describe(DSMenuItemRendererFactory);\nDSMenuItemRendererFactoryWithSchema.propTypes = DSMenuItemRendererFactoryPropTypesSchema;\n\nexport { DSMenuItemRendererFactory, DSMenuItemRendererFactoryWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDI;AA/C3B,qBAAqB;AACrB,mCAA0E;AAC1E,8BAAyB;AACzB,uBAAuB;AAEvB,uCAWO;AACP,+BAAkC;AAClC,0CAA6C;AAC7C,oCAAuC;AACvC,+CAAkD;AAClD,kCAAqC;AACrC,6CAAgD;AAChD,8BAAiC;AACjC,iCAAoC;AACpC,wCAA2C;AAC3C,uBAAgF;AAChF,mCAA0F;AAE1F,MAAM,8BAA0B,yBAAO,qBAAM;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,kDAAiC;AACzC,CAAC;AAAA,aACY,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI,IAAI,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAG7E,MAAM,oCAAgC,yBAAO,qBAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,kDAAiC;AACzC,CAAC;AAAA,kBACiB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA;AAGhD,MAAM,4BAAmF,CAAC,UAAU;AAClG,QAAM,EAAE,kBAAkB,YAAY,QAAI,8DAA2B,KAAK;AAC1E,QAAM,EAAE,UAAU,cAAc,4BAA4B,IAAI;AAEhE,MAAI,aAAc,QAAO,4CAAC,gBAAa,UAAoB;AAE3D,UAAI,kDAAgB,QAAQ;AAC1B,WACE,4CAAC,uDAAuB,IAAG,OAAM,MAAK,gBACpC,sDAAC,gDAAgB,GACnB;AAEJ,UAAI,iDAAe,QAAQ,EAAG,QAAO,4CAAC,4CAAiB,UAAoB;AAC3E,UAAI,kDAAgB,QAAQ,EAAG,QAAO,4CAAC,8CAAkB,UAAoB;AAC7E,UAAI,2DAAyB,QAAQ,EAAG,QAAO,4CAAC,wDAAuB,UAAoB;AAC3F,UAAI,yDAAuB,QAAQ,EAAG,QAAO,4CAAC,oDAAqB,UAAoB;AAEvF,UAAI,wDAAsB,QAAQ;AAChC,WAAO,4CAAC,kDAAoB,UAAoB,6BAA0D;AAC5G,UAAI,gEAA8B,QAAQ;AACxC,WACE,4CAAC,0EAAgC,UAAoB,6BAA0D;AAEnH,UAAI,kEAAgC,QAAQ;AAC1C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA;AAAA,IACF;AAEJ,UAAI,6DAA2B,QAAQ;AACrC,WACE,4CAAC,oEAA6B,UAAoB,6BAA0D;AAMhH,UAAI,0CAAQ,QAAQ,GAAG;AACrB,UAAM,EAAE,gBAAgB,kBAAkB,OAAO,SAAS,IAAI,SAAS;AACvE,UAAM,sBAAsB,QAAQ,SAAS,MAAM,QAAQ,OAAO,EAAE,CAAC,KAAK;AAE1E,WACE,6CAAC,SAAI,MAAK,SAAQ,mBAAiB,qBAAqB,OAAO,WAAW,EAAE,SAAS,IAAI,CAAC,GACvF;AAAA,cACC,6CAAC,2BAAwB,MAAM,mBAAmB,CAAC,eAAe,KAAK,IAAI,CAAC,KAAK,GAC9E;AAAA,2BAAmB,4CAAC,oBAAiB,IAAK;AAAA,QAC3C,4CAAC,iDAAiB,MAAK,gBAAe,IAAI,qBACvC,6BAAmB,4CAAC,iCAA+B,iBAAM,IAAmC,OAC/F;AAAA,SACF,IACE;AAAA,MACH,SAAS,SAAS,IAAI,CAAC,gBACtB;AAAA,QAAC;AAAA;AAAA,UAEC,UAAU;AAAA,UACV;AAAA;AAAA,QAFK,gBAAgB,YAAY,IAAI,IAAI,WAAW;AAAA,MAGtD,CACD;AAAA,OACH;AAAA,EAEJ;AAYA,QAAM,IAAI,MAAM,sBAAsB,KAAK,UAAU,QAAQ,CAAC,EAAE;AAClE;AAEA,0BAA0B,cAAc;AACxC,MAAM,0CAAsC,kCAAS,yBAAyB;AAC9E,oCAAoC,YAAY;",
   "names": []
 }

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

@@ -39,6 +39,7 @@ 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");
+var import_focusNodeRacingConditionSolved = require("./focusNodeRacingConditionSolved.js");
 const LeftBoxlessCheckbox = import_react.default.memo(({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { width: "16px", children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Checkmark, { size: "s", color: ["brand-primary", "600"] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}) }));
 const MultipleSelectMenuItem = ({ itemNode }) => {
   const { dsId, plainItem } = itemNode;
@@ -49,10 +50,11 @@ const MultipleSelectMenuItem = ({ itemNode }) => {
     menuItemEventsHandlers: {
       handleFocusableMenuItemKeyDown,
       handleFocusableMenuItemClick,
-      handleFocusableMenuItemOnMouseEnter
+      handleFocusableMenuItemOnMouseEnter,
+      handleFocusableMenuItemNativeFocusEvent
     }
   } = import_react.default.useContext(import_MenuBehaviouralContextProviderCTX.MenuBehaviouralContextProviderContext);
-  const { selectedItems } = propsWithDefault;
+  const { selectedNodes } = propsWithDefault;
   const gridLayout = import_react.default.useMemo(() => {
     const cols = LeftDecComponent ? ["min-content", "min-content", "auto"] : ["min-content", "auto"];
     if (secondaryLabel) cols.push("auto");
@@ -61,14 +63,12 @@ const MultipleSelectMenuItem = ({ itemNode }) => {
   const focusedRegionPerformanceHelper = import_react.default.useRef(focusRegion);
   focusedRegionPerformanceHelper.current = focusRegion;
   const isFocused = focusRegion === import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);
-  const isSelected = selectedItems.some((itemMarkesAsSelected) => itemMarkesAsSelected.dsId === dsId);
+  const isSelected = selectedNodes.some((itemMarkesAsSelected) => itemMarkesAsSelected.dsId === dsId);
   const handleFocusOnRender = import_react.default.useCallback(
     (node) => {
-      setTimeout(() => {
-        if (node && focusRegion === import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
-          node.focus();
-        }
-      });
+      if (node && focusRegion === import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
+        (0, import_focusNodeRacingConditionSolved.focusNodeRacingConditionSolved)(node);
+      }
     },
     // we need to change the callback reference every time the focusRegion changes or else the focus will not be set
     [dsId, focusRegion]
@@ -76,11 +76,14 @@ const MultipleSelectMenuItem = ({ itemNode }) => {
     // 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(
+  const handleOnMouseEnter = import_react.default.useCallback(() => {
+    handleFocusableMenuItemOnMouseEnter(itemNode);
+  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);
+  const handleOnFocus = import_react.default.useCallback(
     (e) => {
-      handleFocusableMenuItemOnMouseEnter(itemNode, e);
+      handleFocusableMenuItemNativeFocusEvent(itemNode, e);
     },
-    [handleFocusableMenuItemOnMouseEnter, itemNode]
+    [handleFocusableMenuItemNativeFocusEvent, itemNode]
   );
   const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\s/g, "")}`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -90,6 +93,7 @@ const MultipleSelectMenuItem = ({ itemNode }) => {
       onKeyDown: handleFocusableMenuItemKeyDown,
       onClick: handleFocusableMenuItemClick,
       onMouseEnter: handleOnMouseEnter,
+      onFocus: handleOnFocus,
       as: "div",
       id: `${spacelessDsIdForDom}`,
       tabIndex: isFocused ? 0 : -1,