@elliemae/ds-menu-button 3.46.0-rc.3 → 3.46.0-rc.4

package/dist/cjs/config/useMenuButton.js

@@ -41,7 +41,10 @@ var import_useOptionsArrayToDsTree = require("../utils/useOptionsArrayToDsTree.j
 var import_useSplitInherithedProps = require("./useSplitInherithedProps.js");
 var import_useValidateProps = require("./useValidateProps.js");
 const useMenuButton = (propsFromUser) => {
-  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(
+    propsFromUser,
+    import_react_desc_prop_types.menuSpecificDefaultProps
+  );
   (0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSMenuButtonPropTypes);
   const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
   const instanceUid = import_react.default.useMemo(() => `menu-button${(0, import_uid.uid)(5)}`, []);
@@ -49,7 +52,8 @@ const useMenuButton = (propsFromUser) => {
   const optionsArray = Array.isArray(appOptions) ? appOptions : [];
   const treeRootNodeFromOptionsArrayIfArray = (0, import_useOptionsArrayToDsTree.useOptionsArrayToDsTree)({
     options: optionsArray,
-    instanceUid
+    instanceUid,
+    propsWithDefault
     // this typecast is a safe type reconciliation, typescript checks they are compatible
     // this typecast let us avoid to have to do the ` | OtherCompatibleType` dance
   }).getRoot();

package/dist/cjs/config/useMenuButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useMenuButton.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\nimport { useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { DSMenuButtonPropTypes, defaultProps, type DSMenuButtonT } from '../react-desc-prop-types.js';\nimport { getFocusableNodes } from '../utils/nodesTypeguardsAndGetters.js';\nimport { useOptionsArrayToDsTree } from '../utils/useOptionsArrayToDsTree.js';\nimport { useSplitInherithedProps } from './useSplitInherithedProps.js';\nimport { useValidateProps } from './useValidateProps.js';\nexport interface MenuButtonCTX extends ReturnType<typeof useSplitInherithedProps> {\n  propsWithDefault: DSMenuButtonT.InternalProps;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useMenuButton = (propsFromUser: DSMenuButtonT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSMenuButtonT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSMenuButtonPropTypes);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const instanceUid = React.useMemo(() => `menu-button${uid(5)}`, []);\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n\n  // =============================================================================\n  // React hooks can't be invoked conditionally...\n  // =============================================================================\n\n  // As per intended WIDGET API, user can provide options as an array of \"items\" or an array of \"nodes\"\n  // we do the conversion from \"items\" to \"nodes\" here,\n  //   because the `parts` require the \"nodes\" extra properties to handle the logic and rendering\n  const { options: appOptions } = propsWithDefault;\n  const optionsArray: DSMenuButtonT.MenuItemInterface[] = Array.isArray(appOptions) ? appOptions : [];\n\n  const treeRootNodeFromOptionsArrayIfArray = useOptionsArrayToDsTree({\n    options: optionsArray,\n    instanceUid,\n    // this typecast is a safe type reconciliation, typescript checks they are compatible\n    // this typecast let us avoid to have to do the ` | OtherCompatibleType` dance\n  }).getRoot() as DSMenuButtonT.MenuNode;\n  const treeRootNode = React.useMemo(\n    () => (Array.isArray(appOptions) ? treeRootNodeFromOptionsArrayIfArray : appOptions),\n    [appOptions, treeRootNodeFromOptionsArrayIfArray],\n  );\n\n  // =============================================================================\n  // We calculate the focusableNodes from the treeRootNode.plainChildren via getFocusableNodes\n  // =============================================================================\n  const focusableNodes = React.useMemo(() => getFocusableNodes(treeRootNode), [treeRootNode]);\n  const splitInherithedProps = useSplitInherithedProps({\n    propsWithDefault,\n    focusableNodes,\n    treeRootNode,\n  });\n\n  return React.useMemo<MenuButtonCTX>(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      ...splitInherithedProps,\n    }),\n    [propsWithDefault, xstyledProps, instanceUid, splitInherithedProps],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAiE;AACjE,mBAAkB;AAClB,iBAAoB;AACpB,mCAAwE;AACxE,uCAAkC;AAClC,qCAAwC;AACxC,qCAAwC;AACxC,8BAAiC;AAO1B,MAAM,gBAAgB,CAAC,kBAAuC;AAInE,QAAM,uBAAmB,sDAA0D,eAAe,yCAAY;AAC9G,gDAAiB,kBAAkB,kDAAqB;AAIxD,QAAM,mBAAe,4CAAmB,gBAAgB;AAKxD,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,kBAAc,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAYlE,QAAM,EAAE,SAAS,WAAW,IAAI;AAChC,QAAM,eAAkD,MAAM,QAAQ,UAAU,IAAI,aAAa,CAAC;AAElG,QAAM,0CAAsC,wDAAwB;AAAA,IAClE,SAAS;AAAA,IACT;AAAA;AAAA;AAAA,EAGF,CAAC,EAAE,QAAQ;AACX,QAAM,eAAe,aAAAA,QAAM;AAAA,IACzB,MAAO,MAAM,QAAQ,UAAU,IAAI,sCAAsC;AAAA,IACzE,CAAC,YAAY,mCAAmC;AAAA,EAClD;AAKA,QAAM,iBAAiB,aAAAA,QAAM,QAAQ,UAAM,oDAAkB,YAAY,GAAG,CAAC,YAAY,CAAC;AAC1F,QAAM,2BAAuB,wDAAwB;AAAA,IACnD;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,kBAAkB,cAAc,aAAa,oBAAoB;AAAA,EACpE;AACF;",
+  "sourcesContent": ["/* eslint-disable max-statements */\nimport { useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { DSMenuButtonPropTypes, menuSpecificDefaultProps, type DSMenuButtonT } from '../react-desc-prop-types.js';\nimport { getFocusableNodes } from '../utils/nodesTypeguardsAndGetters.js';\nimport { useOptionsArrayToDsTree } from '../utils/useOptionsArrayToDsTree.js';\nimport { useSplitInherithedProps } from './useSplitInherithedProps.js';\nimport { useValidateProps } from './useValidateProps.js';\nexport interface MenuButtonCTX extends ReturnType<typeof useSplitInherithedProps> {\n  propsWithDefault: DSMenuButtonT.InternalProps;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useMenuButton = (propsFromUser: DSMenuButtonT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSMenuButtonT.InternalProps>(\n    propsFromUser,\n    menuSpecificDefaultProps,\n  );\n  useValidateProps(propsWithDefault, DSMenuButtonPropTypes);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const instanceUid = React.useMemo(() => `menu-button${uid(5)}`, []);\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n\n  // =============================================================================\n  // React hooks can't be invoked conditionally...\n  // =============================================================================\n\n  // As per intended WIDGET API, user can provide options as an array of \"items\" or an array of \"nodes\"\n  // we do the conversion from \"items\" to \"nodes\" here,\n  //   because the `parts` require the \"nodes\" extra properties to handle the logic and rendering\n  const { options: appOptions } = propsWithDefault;\n  const optionsArray: DSMenuButtonT.MenuItemInterface[] = Array.isArray(appOptions) ? appOptions : [];\n\n  const treeRootNodeFromOptionsArrayIfArray = useOptionsArrayToDsTree({\n    options: optionsArray,\n    instanceUid,\n    propsWithDefault,\n    // this typecast is a safe type reconciliation, typescript checks they are compatible\n    // this typecast let us avoid to have to do the ` | OtherCompatibleType` dance\n  }).getRoot() as DSMenuButtonT.MenuNode;\n  const treeRootNode = React.useMemo(\n    () => (Array.isArray(appOptions) ? treeRootNodeFromOptionsArrayIfArray : appOptions),\n    [appOptions, treeRootNodeFromOptionsArrayIfArray],\n  );\n\n  // =============================================================================\n  // We calculate the focusableNodes from the treeRootNode.plainChildren via getFocusableNodes\n  // =============================================================================\n  const focusableNodes = React.useMemo(() => getFocusableNodes(treeRootNode), [treeRootNode]);\n  const splitInherithedProps = useSplitInherithedProps({\n    propsWithDefault,\n    focusableNodes,\n    treeRootNode,\n  });\n\n  return React.useMemo<MenuButtonCTX>(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      ...splitInherithedProps,\n    }),\n    [propsWithDefault, xstyledProps, instanceUid, splitInherithedProps],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAiE;AACjE,mBAAkB;AAClB,iBAAoB;AACpB,mCAAoF;AACpF,uCAAkC;AAClC,qCAAwC;AACxC,qCAAwC;AACxC,8BAAiC;AAO1B,MAAM,gBAAgB,CAAC,kBAAuC;AAInE,QAAM,uBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,gDAAiB,kBAAkB,kDAAqB;AAIxD,QAAM,mBAAe,4CAAmB,gBAAgB;AAKxD,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,kBAAc,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAYlE,QAAM,EAAE,SAAS,WAAW,IAAI;AAChC,QAAM,eAAkD,MAAM,QAAQ,UAAU,IAAI,aAAa,CAAC;AAElG,QAAM,0CAAsC,wDAAwB;AAAA,IAClE,SAAS;AAAA,IACT;AAAA,IACA;AAAA;AAAA;AAAA,EAGF,CAAC,EAAE,QAAQ;AACX,QAAM,eAAe,aAAAA,QAAM;AAAA,IACzB,MAAO,MAAM,QAAQ,UAAU,IAAI,sCAAsC;AAAA,IACzE,CAAC,YAAY,mCAAmC;AAAA,EAClD;AAKA,QAAM,iBAAiB,aAAAA,QAAM,QAAQ,UAAM,oDAAkB,YAAY,GAAG,CAAC,YAAY,CAAC;AAC1F,QAAM,2BAAuB,wDAAwB;AAAA,IACnD;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,kBAAkB,cAAc,aAAa,oBAAoB;AAAA,EACpE;AACF;",
   "names": ["React"]
 }

package/dist/cjs/config/useSplitInherithedProps.js

@@ -78,6 +78,8 @@ const useSplitInherithedProps = ({
     onActivateItem,
     onOpen,
     onClose,
+    maxHeight,
+    // this is not shared with anything at all, it's instead a property of the "root" node, each node (with a submenu) can have its own maxHeight
     ...buttonInheritedProps
   } = propsWithDefault;
   const innerRefSnatchingNode = import_react.default.useCallback(

package/dist/cjs/config/useSplitInherithedProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useSplitInherithedProps.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* *******************************************************\n * From official source definition\n *\n * Menu Button Pattern\n *  About This Pattern:\n *    A menu button is a button\n *      that opens a menu\n *         (as described in the Menu and Menubar Pattern).\n *\n * Since the menu button is a button, it inherits all the props from the Button component.\n * Since the menu button MUST have a menu, it also have a set of specific props used to handle the menu.\n * Because we build with atomic composition in mind, the \"logic layer\" is separated and has a yet another set of props.\n *\n * This is effectively an OOP \"extension\" of the Button component,\n *  so it has the same props,\n *  BUT also a few more to handle the specific behavior of the menu.\n *\n * this hooks is meant to take all the DSMenuButtonT.InternalProps with default already merged\n * and spit out menuSpecificProps & buttonInheritedProps\n ******************************************************* */\nimport {} from '@elliemae/ds-system';\nimport React from 'react';\nimport { type DSMenuButtonT } from '../react-desc-prop-types.js';\nimport { isSelectionableNode, isObjectAMenuNode } from '../utils/nodesTypeguardsAndGetters.js';\nimport { resolveRef } from '../utils/resolveRef.js';\n\n/**\n * Converts selected options to a map of selected nodes.\n * @param {DSMenuButtonT.SelectionableMenuNodes[]} selectedItems - The selected options, as provided by the user (either items or nodes).\n * @param {DSMenuButtonT.MenuNode} treeRootNode - The root node of the menu tree.\n * @returns {DSMenuButtonT.SelectionableMenuNodes[]} - The map of selected nodes.\n * @throws Will throw an error if a selected option is not found in the tree.\n */\nconst convertSelectedOptionsToNodes = (\n  selectedItems: DSMenuButtonT.SelectionableMenuNodes[] | DSMenuButtonT.SelectionableMenuItemInterface[],\n  treeRootNode: DSMenuButtonT.MenuNode,\n): DSMenuButtonT.SelectionableMenuNodes[] => {\n  const convertedSelection: DSMenuButtonT.SelectionableMenuNodes[] = [];\n\n  selectedItems.forEach((selectedItem) => {\n    const needsConversion = !isObjectAMenuNode(selectedItem);\n    if (!needsConversion) {\n      convertedSelection.push(selectedItem);\n      return;\n    }\n\n    const { dsId } = selectedItem;\n    const selectedNode = treeRootNode.findNode((node: DSMenuButtonT.MenuNode) => node.dsId === dsId);\n    if (!selectedNode) {\n      throw new Error(`Selected option with dsId ${dsId} not found in the menu tree.`);\n    }\n    if (!isSelectionableNode(selectedNode)) {\n      console.warn(`Selected option with dsId ${dsId} is not a selectionable node and will be ignored.`);\n      return;\n    }\n    convertedSelection.push(selectedNode);\n  });\n\n  return convertedSelection;\n};\n\ntype UseSplitInherithedPropsConfig = {\n  propsWithDefault: DSMenuButtonT.InternalProps;\n  focusableNodes: DSMenuButtonT.PseudoFocusableMenuNodes[];\n  treeRootNode: DSMenuButtonT.MenuNode;\n};\nexport const useSplitInherithedProps = ({\n  propsWithDefault,\n  focusableNodes,\n  treeRootNode,\n}: UseSplitInherithedPropsConfig) => {\n  const buttonDOMNodeRef = React.useRef<HTMLElement | null>(null);\n  // when this component has been wrote\n  // =============================================================================\n  // MENU BUTTON props are:\n  // Required\n  //  optionsTree, menuSpecificProps\n  // Default (we already have a value because props for this hook are already merged with default props)\n  //  onClickOutside, onOptionClick, openedSubmenus, onSubmenuToggle, isLoading, isSkeleton, selectedOptions\n  // Optional (may or may not be present)\n  //  ItemRenderer\n  // =============================================================================\n  //  Props for the DSMenuBehaviouralContextProvider\n  // =============================================================================\n  // Required\n  //  selectedItems, onItemSelected, onActivateItem,\n  // Optional\n  //  onDisplayedSubmenuChange, onOpen, onClose\n\n  const {\n    options,\n    onClickOutside,\n    onOptionClick,\n    openedSubmenus,\n    onSubmenuToggle,\n    isLoading,\n    isSkeleton,\n    ItemRenderer,\n    innerRef,\n    selectedItems,\n    onDisplayedSubmenuChange,\n    onItemSelected,\n    onActivateItem,\n    onOpen,\n    onClose,\n    ...buttonInheritedProps\n  } = propsWithDefault;\n\n  // the button is allowed to receive innerRef, but we also need to invoke the setButtonDOMNode to store the button node\n  // so we create a functional ref to do both\n  const innerRefSnatchingNode: Required<DSMenuButtonT.Props>['innerRef'] = React.useCallback(\n    (node: HTMLButtonElement) => {\n      buttonDOMNodeRef.current = node;\n      if (innerRef) {\n        resolveRef(innerRef, node);\n      }\n    },\n    [innerRef],\n  );\n  // in the WIDGET API, the user can provide selectedItems as an array of \"items\" or an array of \"nodes\"\n  //  the component needs the \"nodes\" to handle the logic and rendering & accessibility\n  //  if the user provides \"items\", we convert them to \"nodes\" here\n  const selectedNodesMap = React.useMemo(() => {\n    if (selectedItems) {\n      return convertSelectedOptionsToNodes(selectedItems, treeRootNode);\n    }\n    return [];\n  }, [selectedItems, treeRootNode]);\n\n  const menuSpecificProps = React.useMemo(\n    () => ({\n      options,\n      onClickOutside,\n      onOptionClick,\n      openedSubmenus,\n      onSubmenuToggle,\n      isLoading,\n      isSkeleton,\n      ItemRenderer,\n    }),\n    [options, onClickOutside, onOptionClick, openedSubmenus, onSubmenuToggle, isLoading, isSkeleton, ItemRenderer],\n  );\n\n  return React.useMemo(\n    () => ({\n      menuBehaviouralLayerProps: {\n        buttonDOMNodeRef,\n        selectedNodes: selectedNodesMap,\n        focusableNodes,\n        optionsTree: treeRootNode,\n        onDisplayedSubmenuChange,\n        onItemSelected,\n        onActivateItem,\n        onOpen,\n        onClose,\n      },\n      opinionatedButtonProps: {\n        ...(buttonInheritedProps as DSMenuButtonT.ButtonInheritedProps),\n        innerRef: innerRefSnatchingNode,\n        menuSpecificProps,\n      },\n    }),\n    [\n      selectedNodesMap,\n      focusableNodes,\n      treeRootNode,\n      onDisplayedSubmenuChange,\n      onItemSelected,\n      onActivateItem,\n      onOpen,\n      onClose,\n      buttonInheritedProps,\n      innerRefSnatchingNode,\n      menuSpecificProps,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBvB,mBAAkB;AAElB,uCAAuD;AACvD,wBAA2B;AAS3B,MAAM,gCAAgC,CACpC,eACA,iBAC2C;AAC3C,QAAM,qBAA6D,CAAC;AAEpE,gBAAc,QAAQ,CAAC,iBAAiB;AACtC,UAAM,kBAAkB,KAAC,oDAAkB,YAAY;AACvD,QAAI,CAAC,iBAAiB;AACpB,yBAAmB,KAAK,YAAY;AACpC;AAAA,IACF;AAEA,UAAM,EAAE,KAAK,IAAI;AACjB,UAAM,eAAe,aAAa,SAAS,CAAC,SAAiC,KAAK,SAAS,IAAI;AAC/F,QAAI,CAAC,cAAc;AACjB,YAAM,IAAI,MAAM,6BAA6B,IAAI,8BAA8B;AAAA,IACjF;AACA,QAAI,KAAC,sDAAoB,YAAY,GAAG;AACtC,cAAQ,KAAK,6BAA6B,IAAI,mDAAmD;AACjG;AAAA,IACF;AACA,uBAAmB,KAAK,YAAY;AAAA,EACtC,CAAC;AAED,SAAO;AACT;AAOO,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,MAAqC;AACnC,QAAM,mBAAmB,aAAAA,QAAM,OAA2B,IAAI;AAkB9D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAIJ,QAAM,wBAAmE,aAAAA,QAAM;AAAA,IAC7E,CAAC,SAA4B;AAC3B,uBAAiB,UAAU;AAC3B,UAAI,UAAU;AACZ,0CAAW,UAAU,IAAI;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAIA,QAAM,mBAAmB,aAAAA,QAAM,QAAQ,MAAM;AAC3C,QAAI,eAAe;AACjB,aAAO,8BAA8B,eAAe,YAAY;AAAA,IAClE;AACA,WAAO,CAAC;AAAA,EACV,GAAG,CAAC,eAAe,YAAY,CAAC;AAEhC,QAAM,oBAAoB,aAAAA,QAAM;AAAA,IAC9B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,SAAS,gBAAgB,eAAe,gBAAgB,iBAAiB,WAAW,YAAY,YAAY;AAAA,EAC/G;AAEA,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL,2BAA2B;AAAA,QACzB;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,wBAAwB;AAAA,QACtB,GAAI;AAAA,QACJ,UAAU;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* *******************************************************\n * From official source definition\n *\n * Menu Button Pattern\n *  About This Pattern:\n *    A menu button is a button\n *      that opens a menu\n *         (as described in the Menu and Menubar Pattern).\n *\n * Since the menu button is a button, it inherits all the props from the Button component.\n * Since the menu button MUST have a menu, it also have a set of specific props used to handle the menu.\n * Because we build with atomic composition in mind, the \"logic layer\" is separated and has a yet another set of props.\n *\n * This is effectively an OOP \"extension\" of the Button component,\n *  so it has the same props,\n *  BUT also a few more to handle the specific behavior of the menu.\n *\n * this hooks is meant to take all the DSMenuButtonT.InternalProps with default already merged\n * and spit out menuSpecificProps & buttonInheritedProps\n ******************************************************* */\nimport {} from '@elliemae/ds-system';\nimport React from 'react';\nimport { type DSMenuButtonT } from '../react-desc-prop-types.js';\nimport { isSelectionableNode, isObjectAMenuNode } from '../utils/nodesTypeguardsAndGetters.js';\nimport { resolveRef } from '../utils/resolveRef.js';\n\n/**\n * Converts selected options to a map of selected nodes.\n * @param {DSMenuButtonT.SelectionableMenuNodes[]} selectedItems - The selected options, as provided by the user (either items or nodes).\n * @param {DSMenuButtonT.MenuNode} treeRootNode - The root node of the menu tree.\n * @returns {DSMenuButtonT.SelectionableMenuNodes[]} - The map of selected nodes.\n * @throws Will throw an error if a selected option is not found in the tree.\n */\nconst convertSelectedOptionsToNodes = (\n  selectedItems: DSMenuButtonT.SelectionableMenuNodes[] | DSMenuButtonT.SelectionableMenuItemInterface[],\n  treeRootNode: DSMenuButtonT.MenuNode,\n): DSMenuButtonT.SelectionableMenuNodes[] => {\n  const convertedSelection: DSMenuButtonT.SelectionableMenuNodes[] = [];\n\n  selectedItems.forEach((selectedItem) => {\n    const needsConversion = !isObjectAMenuNode(selectedItem);\n    if (!needsConversion) {\n      convertedSelection.push(selectedItem);\n      return;\n    }\n\n    const { dsId } = selectedItem;\n    const selectedNode = treeRootNode.findNode((node: DSMenuButtonT.MenuNode) => node.dsId === dsId);\n    if (!selectedNode) {\n      throw new Error(`Selected option with dsId ${dsId} not found in the menu tree.`);\n    }\n    if (!isSelectionableNode(selectedNode)) {\n      // eslint-disable-next-line no-console\n      console.warn(`Selected option with dsId ${dsId} is not a selectionable node and will be ignored.`);\n      return;\n    }\n    convertedSelection.push(selectedNode);\n  });\n\n  return convertedSelection;\n};\n\ntype UseSplitInherithedPropsConfig = {\n  propsWithDefault: DSMenuButtonT.InternalProps;\n  focusableNodes: DSMenuButtonT.PseudoFocusableMenuNodes[];\n  treeRootNode: DSMenuButtonT.MenuNode;\n};\nexport const useSplitInherithedProps = ({\n  propsWithDefault,\n  focusableNodes,\n  treeRootNode,\n}: UseSplitInherithedPropsConfig) => {\n  const buttonDOMNodeRef = React.useRef<HTMLElement | null>(null);\n  // when this component has been wrote\n  // =============================================================================\n  // MENU BUTTON props are:\n  // Required\n  //  optionsTree, menuSpecificProps\n  // Default (we already have a value because props for this hook are already merged with default props)\n  //  onClickOutside, onOptionClick, openedSubmenus, onSubmenuToggle, isLoading, isSkeleton, selectedOptions\n  // Optional (may or may not be present)\n  //  ItemRenderer\n  // =============================================================================\n  //  Props for the DSMenuBehaviouralContextProvider\n  // =============================================================================\n  // Required\n  //  selectedItems, onItemSelected, onActivateItem,\n  // Optional\n  //  onDisplayedSubmenuChange, onOpen, onClose\n\n  const {\n    options,\n    onClickOutside,\n    onOptionClick,\n    openedSubmenus,\n    onSubmenuToggle,\n    isLoading,\n    isSkeleton,\n    ItemRenderer,\n    innerRef,\n    selectedItems,\n    onDisplayedSubmenuChange,\n    onItemSelected,\n    onActivateItem,\n    onOpen,\n    onClose,\n    maxHeight, // this is not shared with anything at all, it's instead a property of the \"root\" node, each node (with a submenu) can have its own maxHeight\n    ...buttonInheritedProps\n  } = propsWithDefault;\n\n  // the button is allowed to receive innerRef, but we also need to invoke the setButtonDOMNode to store the button node\n  // so we create a functional ref to do both\n  const innerRefSnatchingNode: Required<DSMenuButtonT.Props>['innerRef'] = React.useCallback(\n    (node: HTMLButtonElement) => {\n      buttonDOMNodeRef.current = node;\n      if (innerRef) {\n        resolveRef(innerRef, node);\n      }\n    },\n    [innerRef],\n  );\n  // in the WIDGET API, the user can provide selectedItems as an array of \"items\" or an array of \"nodes\"\n  //  the component needs the \"nodes\" to handle the logic and rendering & accessibility\n  //  if the user provides \"items\", we convert them to \"nodes\" here\n  const selectedNodesMap = React.useMemo(() => {\n    if (selectedItems) {\n      return convertSelectedOptionsToNodes(selectedItems, treeRootNode);\n    }\n    return [];\n  }, [selectedItems, treeRootNode]);\n\n  const menuSpecificProps = React.useMemo(\n    () => ({\n      options,\n      onClickOutside,\n      onOptionClick,\n      openedSubmenus,\n      onSubmenuToggle,\n      isLoading,\n      isSkeleton,\n      ItemRenderer,\n    }),\n    [options, onClickOutside, onOptionClick, openedSubmenus, onSubmenuToggle, isLoading, isSkeleton, ItemRenderer],\n  );\n\n  return React.useMemo(\n    () => ({\n      menuBehaviouralLayerProps: {\n        buttonDOMNodeRef,\n        selectedNodes: selectedNodesMap,\n        focusableNodes,\n        optionsTree: treeRootNode,\n        onDisplayedSubmenuChange,\n        onItemSelected,\n        onActivateItem,\n        onOpen,\n        onClose,\n      },\n      opinionatedButtonProps: {\n        ...(buttonInheritedProps as DSMenuButtonT.ButtonInheritedProps),\n        innerRef: innerRefSnatchingNode,\n        menuSpecificProps,\n      },\n    }),\n    [\n      selectedNodesMap,\n      focusableNodes,\n      treeRootNode,\n      onDisplayedSubmenuChange,\n      onItemSelected,\n      onActivateItem,\n      onOpen,\n      onClose,\n      buttonInheritedProps,\n      innerRefSnatchingNode,\n      menuSpecificProps,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBvB,mBAAkB;AAElB,uCAAuD;AACvD,wBAA2B;AAS3B,MAAM,gCAAgC,CACpC,eACA,iBAC2C;AAC3C,QAAM,qBAA6D,CAAC;AAEpE,gBAAc,QAAQ,CAAC,iBAAiB;AACtC,UAAM,kBAAkB,KAAC,oDAAkB,YAAY;AACvD,QAAI,CAAC,iBAAiB;AACpB,yBAAmB,KAAK,YAAY;AACpC;AAAA,IACF;AAEA,UAAM,EAAE,KAAK,IAAI;AACjB,UAAM,eAAe,aAAa,SAAS,CAAC,SAAiC,KAAK,SAAS,IAAI;AAC/F,QAAI,CAAC,cAAc;AACjB,YAAM,IAAI,MAAM,6BAA6B,IAAI,8BAA8B;AAAA,IACjF;AACA,QAAI,KAAC,sDAAoB,YAAY,GAAG;AAEtC,cAAQ,KAAK,6BAA6B,IAAI,mDAAmD;AACjG;AAAA,IACF;AACA,uBAAmB,KAAK,YAAY;AAAA,EACtC,CAAC;AAED,SAAO;AACT;AAOO,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,MAAqC;AACnC,QAAM,mBAAmB,aAAAA,QAAM,OAA2B,IAAI;AAkB9D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAIJ,QAAM,wBAAmE,aAAAA,QAAM;AAAA,IAC7E,CAAC,SAA4B;AAC3B,uBAAiB,UAAU;AAC3B,UAAI,UAAU;AACZ,0CAAW,UAAU,IAAI;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAIA,QAAM,mBAAmB,aAAAA,QAAM,QAAQ,MAAM;AAC3C,QAAI,eAAe;AACjB,aAAO,8BAA8B,eAAe,YAAY;AAAA,IAClE;AACA,WAAO,CAAC;AAAA,EACV,GAAG,CAAC,eAAe,YAAY,CAAC;AAEhC,QAAM,oBAAoB,aAAAA,QAAM;AAAA,IAC9B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,SAAS,gBAAgB,eAAe,gBAAgB,iBAAiB,WAAW,YAAY,YAAY;AAAA,EAC/G;AAEA,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL,2BAA2B;AAAA,QACzB;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,wBAAwB;AAAA,QACtB,GAAI;AAAA,QACJ,UAAU;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["React"]
 }

package/dist/cjs/parts/DSFlyoutMenu/DSFlyoutMenu.js

@@ -39,19 +39,25 @@ var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_system = require("@elliemae/ds-system");
 var import_react = __toESM(require("react"));
+var import_react_desc_prop_types = require("../../react-desc-prop-types.js");
 var import_MenuBehaviouralContextProviderCTX = require("../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js");
 var import_DSMenuItemRendererFactory = require("../DSMenuItemRendererFactory/index.js");
 var import_useFlyoutMenu = require("./config/useFlyoutMenu.js");
 var import_constants = require("./constants/index.js");
-var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+var import_react_desc_prop_types2 = require("./react-desc-prop-types.js");
 var import_nodesTypeguardsAndGetters = require("../../utils/nodesTypeguardsAndGetters.js");
-const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSFlyoutMenuName, slot: import_constants.FLYOUT_MENU_SLOTS.ROOT })`
-  min-width: 150px;
+const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
+  name: import_constants.DSFlyoutMenuName,
+  slot: import_constants.FLYOUT_MENU_SLOTS.ROOT
+})`
+  min-width: 1px;
   background-color: white;
   padding: ${({ theme }) => theme.space.xxxs} 0;
   ${import_ds_system.xStyledCommonProps}
 `;
 const StyledMenu = (0, import_ds_system.styled)("div", { name: import_constants.DSFlyoutMenuName, slot: import_constants.FLYOUT_MENU_SLOTS.LIST_WRAPPER })`
+  max-height: ${({ $maxHeight }) => typeof $maxHeight === "number" ? `${$maxHeight}px` : $maxHeight};
+  overflow-y: auto;
   padding: 0;
   margin: 0;
 `;
@@ -89,19 +95,27 @@ const DSFlyoutMenu = (props) => {
       context: floatingContext,
       onAnimationStartTriggered: handleAnimationStartTrigger,
       onAnimationEnd: handleAnimationEnd,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledWrapper, { getOwnerProps: () => propsWithDefault, getOwnerPropsArguments: () => ({}), ...xstyledProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledMenu, { role: "menu", innerRef: handleRefChange, children: itemNode.children.map((optionNode) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_DSMenuItemRendererFactory.DSMenuItemRendererFactory,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledWrapper, { getOwnerProps: () => propsWithDefault, getOwnerPropsArguments: () => ({}), ...xstyledProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        StyledMenu,
         {
-          itemNode: optionNode,
-          ItemRenderer,
-          FlyoutMenuCircularDepInject: didAnimationEnd ? DSFlyoutMenu : NoComponentPlaceholder
-        },
-        `flyout-menu-item-${optionNode.dsId}-${instanceUid}`
-      )) }) })
+          role: "menu",
+          innerRef: handleRefChange,
+          $maxHeight: itemNode.plainItem.maxHeight ?? import_react_desc_prop_types.menuSpecificDefaultProps.maxHeight,
+          children: itemNode.children.map((optionNode) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_DSMenuItemRendererFactory.DSMenuItemRendererFactory,
+            {
+              itemNode: optionNode,
+              ItemRenderer,
+              FlyoutMenuCircularDepInject: didAnimationEnd ? DSFlyoutMenu : NoComponentPlaceholder
+            },
+            `flyout-menu-item-${optionNode.dsId}-${instanceUid}`
+          ))
+        }
+      ) })
     }
   );
 };
 DSFlyoutMenu.displayName = import_constants.DSFlyoutMenuName;
 const DSFlyoutMenuWithSchema = (0, import_ds_props_helpers.describe)(DSFlyoutMenu);
-DSFlyoutMenuWithSchema.propTypes = import_react_desc_prop_types.DSFlyoutMenuPropTypesSchema;
+DSFlyoutMenuWithSchema.propTypes = import_react_desc_prop_types2.DSFlyoutMenuPropTypesSchema;
 //# sourceMappingURL=DSFlyoutMenu.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSFlyoutMenu/DSFlyoutMenu.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { DSMenuItemRendererFactory } from '../DSMenuItemRendererFactory/index.js';\nimport { useFlyoutMenu } from './config/useFlyoutMenu.js';\nimport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './constants/index.js';\nimport { DSFlyoutMenuPropTypesSchema, type DSFlyoutMenuT } from './react-desc-prop-types.js';\nimport { isRootNode } from '../../utils/nodesTypeguardsAndGetters.js';\n\nconst StyledWrapper = styled(Grid, { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.ROOT })`\n  min-width: 150px;\n  background-color: white;\n  padding: ${({ theme }) => theme.space.xxxs} 0;\n  ${xStyledCommonProps}\n`;\n\nconst StyledMenu = styled('div', { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.LIST_WRAPPER })`\n  padding: 0;\n  margin: 0;\n`;\n\nconst NoComponentPlaceholder = () => null;\n\nconst DSFlyoutMenu: React.ComponentType<DSFlyoutMenuT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps } = useFlyoutMenu(props);\n  const {\n    instanceUid,\n    globalEventsHelpers: { mainMenuRef, handleSubmenusRefChange },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const [didAnimationEnd, setDidAnimationEnd] = React.useState(false);\n\n  const { setFloatingRef, floatingStyles, floatingContext, ItemRenderer, isMenuOpen, itemNode } = propsWithDefault;\n\n  const handleRefChange = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (isRootNode(itemNode)) {\n        mainMenuRef.current = node;\n        return;\n      }\n      handleSubmenusRefChange(node, itemNode.dsId);\n    },\n    [handleSubmenusRefChange, itemNode, mainMenuRef],\n  );\n\n  const handleAnimationStartTrigger = React.useCallback(() => {\n    setDidAnimationEnd(false);\n  }, []);\n  const handleAnimationEnd = React.useCallback(() => {\n    setDidAnimationEnd(true);\n  }, []);\n\n  return (\n    <FloatingWrapper\n      innerRef={setFloatingRef}\n      floatingStyles={floatingStyles}\n      isOpen={isMenuOpen}\n      context={floatingContext}\n      onAnimationStartTriggered={handleAnimationStartTrigger}\n      onAnimationEnd={handleAnimationEnd}\n    >\n      <StyledWrapper getOwnerProps={() => propsWithDefault} getOwnerPropsArguments={() => ({})} {...xstyledProps}>\n        <StyledMenu role=\"menu\" innerRef={handleRefChange}>\n          {itemNode.children.map((optionNode) => (\n            <DSMenuItemRendererFactory\n              key={`flyout-menu-item-${optionNode.dsId}-${instanceUid}`}\n              // DSTree doesn't support children having a polymorphic type, so we need to cast it manually\n              itemNode={optionNode as DSMenuButtonT.MenuNode}\n              ItemRenderer={ItemRenderer}\n              //  we are passing the DSFlyoutMenu component as a prop to the DSMenuItemRendererFactory\n              //    this solves the circular-ish dependency\n              //  the conditional `didAnimationEnd` solves the visual artefact of nested FloatingWrapper wrongly positioned due to animation\n              FlyoutMenuCircularDepInject={didAnimationEnd ? DSFlyoutMenu : NoComponentPlaceholder}\n            />\n          ))}\n        </StyledMenu>\n      </StyledWrapper>\n    </FloatingWrapper>\n  );\n};\n\nDSFlyoutMenu.displayName = DSFlyoutMenuName;\nconst DSFlyoutMenuWithSchema = describe(DSFlyoutMenu);\nDSFlyoutMenuWithSchema.propTypes = DSFlyoutMenuPropTypesSchema;\n\nexport { DSFlyoutMenu, DSFlyoutMenuWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmEX;AAnEZ,iCAAgC;AAChC,qBAAqB;AACrB,8BAAyB;AACzB,uBAA2C;AAC3C,mBAAkB;AAElB,+CAAsD;AACtD,uCAA0C;AAC1C,2BAA8B;AAC9B,uBAAoD;AACpD,mCAAgE;AAChE,uCAA2B;AAE3B,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,mCAAkB,MAAM,mCAAkB,KAAK,CAAC;AAAA;AAAA;AAAA,aAG9E,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,IACxC,mCAAkB;AAAA;AAGtB,MAAM,iBAAa,yBAAO,OAAO,EAAE,MAAM,mCAAkB,MAAM,mCAAkB,aAAa,CAAC;AAAA;AAAA;AAAA;AAKjG,MAAM,yBAAyB,MAAM;AAErC,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,kBAAkB,aAAa,QAAI,oCAAc,KAAK;AAC9D,QAAM;AAAA,IACJ;AAAA,IACA,qBAAqB,EAAE,aAAa,wBAAwB;AAAA,EAC9D,IAAI,aAAAA,QAAM,WAAW,8EAAqC;AAC1D,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,aAAAA,QAAM,SAAS,KAAK;AAElE,QAAM,EAAE,gBAAgB,gBAAgB,iBAAiB,cAAc,YAAY,SAAS,IAAI;AAEhG,QAAM,kBAAkB,aAAAA,QAAM;AAAA,IAC5B,CAAC,SAAyB;AACxB,cAAI,6CAAW,QAAQ,GAAG;AACxB,oBAAY,UAAU;AACtB;AAAA,MACF;AACA,8BAAwB,MAAM,SAAS,IAAI;AAAA,IAC7C;AAAA,IACA,CAAC,yBAAyB,UAAU,WAAW;AAAA,EACjD;AAEA,QAAM,8BAA8B,aAAAA,QAAM,YAAY,MAAM;AAC1D,uBAAmB,KAAK;AAAA,EAC1B,GAAG,CAAC,CAAC;AACL,QAAM,qBAAqB,aAAAA,QAAM,YAAY,MAAM;AACjD,uBAAmB,IAAI;AAAA,EACzB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,2BAA2B;AAAA,MAC3B,gBAAgB;AAAA,MAEhB,sDAAC,iBAAc,eAAe,MAAM,kBAAkB,wBAAwB,OAAO,CAAC,IAAK,GAAG,cAC5F,sDAAC,cAAW,MAAK,QAAO,UAAU,iBAC/B,mBAAS,SAAS,IAAI,CAAC,eACtB;AAAA,QAAC;AAAA;AAAA,UAGC,UAAU;AAAA,UACV;AAAA,UAIA,6BAA6B,kBAAkB,eAAe;AAAA;AAAA,QAPzD,oBAAoB,WAAW,IAAI,IAAI,WAAW;AAAA,MAQzD,CACD,GACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
-  "names": ["React"]
+  "sourcesContent": ["import { FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport React from 'react';\nimport { type DSMenuButtonT, menuSpecificDefaultProps } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { DSMenuItemRendererFactory } from '../DSMenuItemRendererFactory/index.js';\nimport { useFlyoutMenu } from './config/useFlyoutMenu.js';\nimport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './constants/index.js';\nimport { DSFlyoutMenuPropTypesSchema, type DSFlyoutMenuT } from './react-desc-prop-types.js';\nimport { isRootNode } from '../../utils/nodesTypeguardsAndGetters.js';\n\nconst StyledWrapper = styled(Grid, {\n  name: DSFlyoutMenuName,\n  slot: FLYOUT_MENU_SLOTS.ROOT,\n})`\n  min-width: 1px;\n  background-color: white;\n  padding: ${({ theme }) => theme.space.xxxs} 0;\n  ${xStyledCommonProps}\n`;\n\nconst StyledMenu = styled('div', { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.LIST_WRAPPER })<{\n  $maxHeight: string | number;\n}>`\n  max-height: ${({ $maxHeight }) => (typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight)};\n  overflow-y: auto;\n  padding: 0;\n  margin: 0;\n`;\n\nconst NoComponentPlaceholder = () => null;\n\nconst DSFlyoutMenu: React.ComponentType<DSFlyoutMenuT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps } = useFlyoutMenu(props);\n  const {\n    instanceUid,\n    globalEventsHelpers: { mainMenuRef, handleSubmenusRefChange },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const [didAnimationEnd, setDidAnimationEnd] = React.useState(false);\n\n  const { setFloatingRef, floatingStyles, floatingContext, ItemRenderer, isMenuOpen, itemNode } = propsWithDefault;\n\n  const handleRefChange = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (isRootNode(itemNode)) {\n        mainMenuRef.current = node;\n        return;\n      }\n      handleSubmenusRefChange(node, itemNode.dsId);\n    },\n    [handleSubmenusRefChange, itemNode, mainMenuRef],\n  );\n\n  const handleAnimationStartTrigger = React.useCallback(() => {\n    setDidAnimationEnd(false);\n  }, []);\n  const handleAnimationEnd = React.useCallback(() => {\n    setDidAnimationEnd(true);\n  }, []);\n\n  return (\n    <FloatingWrapper\n      innerRef={setFloatingRef}\n      floatingStyles={floatingStyles}\n      isOpen={isMenuOpen}\n      context={floatingContext}\n      onAnimationStartTriggered={handleAnimationStartTrigger}\n      onAnimationEnd={handleAnimationEnd}\n    >\n      <StyledWrapper getOwnerProps={() => propsWithDefault} getOwnerPropsArguments={() => ({})} {...xstyledProps}>\n        <StyledMenu\n          role=\"menu\"\n          innerRef={handleRefChange}\n          $maxHeight={itemNode.plainItem.maxHeight ?? menuSpecificDefaultProps.maxHeight}\n        >\n          {itemNode.children.map((optionNode) => (\n            <DSMenuItemRendererFactory\n              key={`flyout-menu-item-${optionNode.dsId}-${instanceUid}`}\n              // DSTree doesn't support children having a polymorphic type, so we need to cast it manually\n              itemNode={optionNode as DSMenuButtonT.MenuNode}\n              ItemRenderer={ItemRenderer}\n              //  we are passing the DSFlyoutMenu component as a prop to the DSMenuItemRendererFactory\n              //    this solves the circular-ish dependency\n              //  the conditional `didAnimationEnd` solves the visual artefact of nested FloatingWrapper wrongly positioned due to animation\n              FlyoutMenuCircularDepInject={didAnimationEnd ? DSFlyoutMenu : NoComponentPlaceholder}\n            />\n          ))}\n        </StyledMenu>\n      </StyledWrapper>\n    </FloatingWrapper>\n  );\n};\n\nDSFlyoutMenu.displayName = DSFlyoutMenuName;\nconst DSFlyoutMenuWithSchema = describe(DSFlyoutMenu);\nDSFlyoutMenuWithSchema.propTypes = DSFlyoutMenuPropTypesSchema;\n\nexport { DSFlyoutMenu, DSFlyoutMenuWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8EX;AA9EZ,iCAAgC;AAChC,qBAAqB;AACrB,8BAAyB;AACzB,uBAA2C;AAC3C,mBAAkB;AAClB,mCAA6D;AAC7D,+CAAsD;AACtD,uCAA0C;AAC1C,2BAA8B;AAC9B,uBAAoD;AACpD,IAAAA,gCAAgE;AAChE,uCAA2B;AAE3B,MAAM,oBAAgB,yBAAO,qBAAM;AAAA,EACjC,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,aAGY,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,IACxC,mCAAkB;AAAA;AAGtB,MAAM,iBAAa,yBAAO,OAAO,EAAE,MAAM,mCAAkB,MAAM,mCAAkB,aAAa,CAAC;AAAA,gBAGjF,CAAC,EAAE,WAAW,MAAO,OAAO,eAAe,WAAW,GAAG,UAAU,OAAO,UAAW;AAAA;AAAA;AAAA;AAAA;AAMrG,MAAM,yBAAyB,MAAM;AAErC,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,kBAAkB,aAAa,QAAI,oCAAc,KAAK;AAC9D,QAAM;AAAA,IACJ;AAAA,IACA,qBAAqB,EAAE,aAAa,wBAAwB;AAAA,EAC9D,IAAI,aAAAC,QAAM,WAAW,8EAAqC;AAC1D,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,aAAAA,QAAM,SAAS,KAAK;AAElE,QAAM,EAAE,gBAAgB,gBAAgB,iBAAiB,cAAc,YAAY,SAAS,IAAI;AAEhG,QAAM,kBAAkB,aAAAA,QAAM;AAAA,IAC5B,CAAC,SAAyB;AACxB,cAAI,6CAAW,QAAQ,GAAG;AACxB,oBAAY,UAAU;AACtB;AAAA,MACF;AACA,8BAAwB,MAAM,SAAS,IAAI;AAAA,IAC7C;AAAA,IACA,CAAC,yBAAyB,UAAU,WAAW;AAAA,EACjD;AAEA,QAAM,8BAA8B,aAAAA,QAAM,YAAY,MAAM;AAC1D,uBAAmB,KAAK;AAAA,EAC1B,GAAG,CAAC,CAAC;AACL,QAAM,qBAAqB,aAAAA,QAAM,YAAY,MAAM;AACjD,uBAAmB,IAAI;AAAA,EACzB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,2BAA2B;AAAA,MAC3B,gBAAgB;AAAA,MAEhB,sDAAC,iBAAc,eAAe,MAAM,kBAAkB,wBAAwB,OAAO,CAAC,IAAK,GAAG,cAC5F;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,YAAY,SAAS,UAAU,aAAa,sDAAyB;AAAA,UAEpE,mBAAS,SAAS,IAAI,CAAC,eACtB;AAAA,YAAC;AAAA;AAAA,cAGC,UAAU;AAAA,cACV;AAAA,cAIA,6BAA6B,kBAAkB,eAAe;AAAA;AAAA,YAPzD,oBAAoB,WAAW,IAAI,IAAI,WAAW;AAAA,UAQzD,CACD;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "names": ["import_react_desc_prop_types", "React"]
 }

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

@@ -37,7 +37,7 @@ var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react_desc_prop_types = require("../../react-desc-prop-types.js");
 var import_constants = require("./constants/index.js");
-const defaultProps = { ...import_react_desc_prop_types.defaultProps };
+const defaultProps = { ...import_react_desc_prop_types.menuSpecificDefaultProps };
 const DSFlyoutMenuPropTypes = {
   itemNode: import_ds_props_helpers.PropTypes.object.description("The parent menu node to render the menu from").isRequired,
   setFloatingRef: import_ds_props_helpers.PropTypes.func.description(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSFlyoutMenu/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 {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { type useFloatingContext } from '@elliemae/ds-floating-context';\nimport {\n  DSMenuSpecificPropTypes,\n  defaultProps as menuSpecificDefaultProps,\n  type DSMenuButtonT,\n} from '../../react-desc-prop-types.js';\nimport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './constants/index.js';\n\nexport declare namespace DSFlyoutMenuT {\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.MenuSpecificRequiredProps {\n    isMenuOpen: boolean;\n    itemNode:\n      | DSMenuButtonT.MenuNodeWithSubmenuItem\n      | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem\n      | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem\n      | DSMenuButtonT.MenuNodeActivableWithSubmenuItem\n      | DSMenuButtonT.MenuNodeRootItem;\n    setFloatingRef: ReturnType<typeof useFloatingContext>['refs']['setFloating'];\n    floatingStyles: ReturnType<typeof useFloatingContext>['floatingStyles'];\n    floatingContext: ReturnType<typeof useFloatingContext>['context'];\n  }\n\n  export interface DefaultProps extends DSMenuButtonT.MenuSpecifiDefaultProps {}\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFlyoutMenuName, typeof FLYOUT_MENU_SLOTS>,\n      DSMenuButtonT.MenuSpecificOptionalProps {}\n\n  export interface Props extends RequiredProps, Partial<DefaultProps>, OptionalProps {}\n\n  export interface InternalProps extends RequiredProps, DefaultProps, OptionalProps {}\n}\n\nexport const defaultProps: DSFlyoutMenuT.DefaultProps = { ...menuSpecificDefaultProps };\n\nexport const DSFlyoutMenuPropTypes: DSPropTypesSchema<DSFlyoutMenuT.Props> = {\n  itemNode: PropTypes.object.description('The parent menu node to render the menu from').isRequired,\n  setFloatingRef: PropTypes.func.description(\n    'The function to set the ref of the floating element (from useFloatingContext.refs.setFloating)',\n  ).isRequired,\n  floatingStyles: PropTypes.object.description(\n    'The styles to apply to the floating element to correctly position it (from useFloatingContext.floatingStyles)',\n  ).isRequired,\n  floatingContext: PropTypes.object.description(\n    'The context object from useFloatingContext, used to allow FloatingWrapper correct functionality',\n  ).isRequired,\n  // anchorNode: PropTypes.instanceOf(HTMLElement).isRequired,\n  isMenuOpen: PropTypes.bool.description('Wheter or not this particular instance of the flyout menu is open')\n    .isRequired,\n  ...getPropsPerSlotPropTypes(DSFlyoutMenuName, FLYOUT_MENU_SLOTS),\n  ...globalAttributesPropTypes,\n  // this component is meant to be used from a ds-menu-button compliant API,\n  //  for this reason we want to inherit the DSMenuButton props interface that relates to the menu and not the button...\n  ...DSMenuSpecificPropTypes,\n  ...xstyledPropTypes,\n};\n\nexport const DSFlyoutMenuPropTypesSchema = DSFlyoutMenuPropTypes as unknown as ValidationMap<DSFlyoutMenuT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAGP,mCAIO;AACP,uBAAoD;AAkC7C,MAAM,eAA2C,EAAE,GAAG,6BAAAA,aAAyB;AAE/E,MAAM,wBAAgE;AAAA,EAC3E,UAAU,kCAAU,OAAO,YAAY,8CAA8C,EAAE;AAAA,EACvF,gBAAgB,kCAAU,KAAK;AAAA,IAC7B;AAAA,EACF,EAAE;AAAA,EACF,gBAAgB,kCAAU,OAAO;AAAA,IAC/B;AAAA,EACF,EAAE;AAAA,EACF,iBAAiB,kCAAU,OAAO;AAAA,IAChC;AAAA,EACF,EAAE;AAAA;AAAA,EAEF,YAAY,kCAAU,KAAK,YAAY,mEAAmE,EACvG;AAAA,EACH,OAAG,kDAAyB,mCAAkB,kCAAiB;AAAA,EAC/D,GAAG;AAAA;AAAA;AAAA,EAGH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,8BAA8B;",
-  "names": ["menuSpecificDefaultProps"]
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { type useFloatingContext } from '@elliemae/ds-floating-context';\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSMenuSpecificPropTypes, menuSpecificDefaultProps, type DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './constants/index.js';\n\nexport declare namespace DSFlyoutMenuT {\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.MenuSpecificRequiredProps {\n    isMenuOpen: boolean;\n    itemNode:\n      | DSMenuButtonT.MenuNodeWithSubmenuItem\n      | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem\n      | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem\n      | DSMenuButtonT.MenuNodeActivableWithSubmenuItem\n      | DSMenuButtonT.MenuNodeRootItem;\n    setFloatingRef: ReturnType<typeof useFloatingContext>['refs']['setFloating'];\n    floatingStyles: ReturnType<typeof useFloatingContext>['floatingStyles'];\n    floatingContext: ReturnType<typeof useFloatingContext>['context'];\n  }\n\n  export interface DefaultProps extends DSMenuButtonT.MenuSpecifiDefaultProps {}\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFlyoutMenuName, typeof FLYOUT_MENU_SLOTS>,\n      DSMenuButtonT.MenuSpecificOptionalProps {}\n\n  export interface Props extends RequiredProps, Partial<DefaultProps>, OptionalProps {}\n\n  export interface InternalProps extends RequiredProps, DefaultProps, OptionalProps {}\n}\n\nexport const defaultProps: DSFlyoutMenuT.DefaultProps = { ...menuSpecificDefaultProps };\n\nexport const DSFlyoutMenuPropTypes: DSPropTypesSchema<DSFlyoutMenuT.Props> = {\n  itemNode: PropTypes.object.description('The parent menu node to render the menu from').isRequired,\n  setFloatingRef: PropTypes.func.description(\n    'The function to set the ref of the floating element (from useFloatingContext.refs.setFloating)',\n  ).isRequired,\n  floatingStyles: PropTypes.object.description(\n    'The styles to apply to the floating element to correctly position it (from useFloatingContext.floatingStyles)',\n  ).isRequired,\n  floatingContext: PropTypes.object.description(\n    'The context object from useFloatingContext, used to allow FloatingWrapper correct functionality',\n  ).isRequired,\n  // anchorNode: PropTypes.instanceOf(HTMLElement).isRequired,\n  isMenuOpen: PropTypes.bool.description('Wheter or not this particular instance of the flyout menu is open')\n    .isRequired,\n  ...getPropsPerSlotPropTypes(DSFlyoutMenuName, FLYOUT_MENU_SLOTS),\n  ...globalAttributesPropTypes,\n  // this component is meant to be used from a ds-menu-button compliant API,\n  //  for this reason we want to inherit the DSMenuButton props interface that relates to the menu and not the button...\n  ...DSMenuSpecificPropTypes,\n  ...xstyledPropTypes,\n};\n\nexport const DSFlyoutMenuPropTypesSchema = DSFlyoutMenuPropTypes as unknown as ValidationMap<DSFlyoutMenuT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AAEP,mCAAsF;AACtF,uBAAoD;AAkC7C,MAAM,eAA2C,EAAE,GAAG,sDAAyB;AAE/E,MAAM,wBAAgE;AAAA,EAC3E,UAAU,kCAAU,OAAO,YAAY,8CAA8C,EAAE;AAAA,EACvF,gBAAgB,kCAAU,KAAK;AAAA,IAC7B;AAAA,EACF,EAAE;AAAA,EACF,gBAAgB,kCAAU,OAAO;AAAA,IAC/B;AAAA,EACF,EAAE;AAAA,EACF,iBAAiB,kCAAU,OAAO;AAAA,IAChC;AAAA,EACF,EAAE;AAAA;AAAA,EAEF,YAAY,kCAAU,KAAK,YAAY,mEAAmE,EACvG;AAAA,EACH,OAAG,kDAAyB,mCAAkB,kCAAiB;AAAA,EAC/D,GAAG;AAAA;AAAA;AAAA,EAGH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,8BAA8B;",
+  "names": []
 }

package/dist/cjs/parts/DSMenuBehaviouralContextProvider/config/useFocusTracker.js

@@ -32,6 +32,7 @@ __export(useFocusTracker_exports, {
 });
 module.exports = __toCommonJS(useFocusTracker_exports);
 var React = __toESM(require("react"));
+var import_lodash = require("lodash");
 var import_react = __toESM(require("react"));
 var import_nodesTypeguardsAndGetters = require("../../../utils/nodesTypeguardsAndGetters.js");
 var import_Errors = require("../constants/Errors.js");
@@ -44,24 +45,34 @@ const useFocusTracker = () => {
   const focusedElementItemNode = import_react.default.useRef(
     null
   );
-  const trackFocusTrigger = import_react.default.useCallback(() => {
-    setFocusRegion(import_constants.MENU_FOCUS_REGIONS.TRIGGER);
-    focusedRegionPerformanceHelper.current = import_constants.MENU_FOCUS_REGIONS.TRIGGER;
-    focusedElementItemNode.current = null;
-    return null;
-  }, []);
-  const trackFocusNode = import_react.default.useCallback((nodeToFocus) => {
-    const newFocusRegion = import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(nodeToFocus.dsId);
-    setFocusRegion(newFocusRegion);
-    focusedRegionPerformanceHelper.current = newFocusRegion;
-    focusedElementItemNode.current = nodeToFocus;
-  }, []);
-  const trackFocusRegionReset = import_react.default.useCallback(() => {
-    setFocusRegion(import_constants.MENU_FOCUS_REGIONS.RESET);
-    focusedRegionPerformanceHelper.current = import_constants.MENU_FOCUS_REGIONS.RESET;
-    focusedElementItemNode.current = null;
-    return null;
-  }, []);
+  const racingConditionDebounceTrackFocus = import_react.default.useCallback(
+    (0, import_lodash.throttle)(
+      (newFocusRegion, focusNode) => {
+        setFocusRegion(newFocusRegion);
+        focusedRegionPerformanceHelper.current = newFocusRegion;
+        focusedElementItemNode.current = focusNode;
+        return focusNode;
+      },
+      50,
+      { leading: true, trailing: true }
+    ),
+    []
+  );
+  const trackFocusTrigger = import_react.default.useCallback(
+    () => racingConditionDebounceTrackFocus(import_constants.MENU_FOCUS_REGIONS.TRIGGER, null),
+    [racingConditionDebounceTrackFocus]
+  );
+  const trackFocusNode = import_react.default.useCallback(
+    (nodeToFocus) => {
+      const newFocusRegion = import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(nodeToFocus.dsId);
+      racingConditionDebounceTrackFocus(newFocusRegion, nodeToFocus);
+    },
+    [racingConditionDebounceTrackFocus]
+  );
+  const trackFocusRegionReset = import_react.default.useCallback(
+    () => racingConditionDebounceTrackFocus(import_constants.MENU_FOCUS_REGIONS.RESET, null),
+    [racingConditionDebounceTrackFocus]
+  );
   const trackFocusFirstChildItem = import_react.default.useCallback(
     (itemNode) => {
       if (!(0, import_nodesTypeguardsAndGetters.isMenuNodeAllowedToHaveChildren)(itemNode)) {
@@ -78,10 +89,9 @@ const useFocusTracker = () => {
         throw new Error("No focusable nodes found in the children of the item node");
       }
       const newFocusedNode = focusableChildrenNodes[0];
-      trackFocusNode(newFocusedNode);
-      return newFocusedNode;
+      return racingConditionDebounceTrackFocus(import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(newFocusedNode.dsId), newFocusedNode);
     },
-    [trackFocusNode]
+    [racingConditionDebounceTrackFocus]
   );
   const trackFocusLastChildItem = import_react.default.useCallback(
     (itemNode) => {
@@ -98,10 +108,12 @@ const useFocusTracker = () => {
         console.log("focus last child item > itemNode", itemNode);
         throw new Error("No focusable nodes found in the children of the item node");
       }
-      trackFocusNode(focusableChildrenNodes[focusableChildrenNodes.length - 1]);
-      return focusableChildrenNodes[focusableChildrenNodes.length - 1];
+      return racingConditionDebounceTrackFocus(
+        import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(focusableChildrenNodes[focusableChildrenNodes.length - 1].dsId),
+        focusableChildrenNodes[focusableChildrenNodes.length - 1]
+      );
     },
-    [trackFocusNode]
+    [racingConditionDebounceTrackFocus]
   );
   const trackFocusNextItem = import_react.default.useCallback(
     (itemNode) => {
@@ -109,10 +121,9 @@ const useFocusTracker = () => {
       const currIndex = focusableSiblingsNodes.findIndex((node) => node.dsId === itemNode.dsId);
       const nextIndex = currIndex + 1 < focusableSiblingsNodes.length ? currIndex + 1 : 0;
       const newFocusedNode = focusableSiblingsNodes[nextIndex];
-      trackFocusNode(newFocusedNode);
-      return newFocusedNode;
+      return racingConditionDebounceTrackFocus(import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(newFocusedNode.dsId), newFocusedNode);
     },
-    [trackFocusNode]
+    [racingConditionDebounceTrackFocus]
   );
   const trackFocusPreviousItem = import_react.default.useCallback(
     (itemNode) => {
@@ -120,10 +131,9 @@ const useFocusTracker = () => {
       const currIndex = focusableSiblingsNodes.findIndex((node) => node.dsId === itemNode.dsId);
       const previousIndex = currIndex - 1 >= 0 ? currIndex - 1 : focusableSiblingsNodes.length - 1;
       const newFocusNode = focusableSiblingsNodes[previousIndex];
-      trackFocusNode(newFocusNode);
-      return newFocusNode;
+      return racingConditionDebounceTrackFocus(import_constants.MENU_FOCUS_REGIONS.ITEM_BY_DSID(newFocusNode.dsId), newFocusNode);
     },
-    [trackFocusNode]
+    [racingConditionDebounceTrackFocus]
   );
   const trackFocusParentItem = import_react.default.useCallback(
     (itemNode) => {

package/dist/cjs/parts/DSMenuBehaviouralContextProvider/config/useFocusTracker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/DSMenuBehaviouralContextProvider/config/useFocusTracker.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-console */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../../react-desc-prop-types.js';\nimport {\n  isFocusableNode,\n  isGroup,\n  isMenuNodeAllowedToHaveChildren,\n  isRootNode,\n} from '../../../utils/nodesTypeguardsAndGetters.js';\nimport { TREE_STRUCTURE_ERRORS } from '../constants/Errors.js';\nimport { MENU_FOCUS_REGIONS } from '../constants/index.js';\nimport { getFocusableSiblingsList } from '../utils/nodeGettersByCriterias.js';\n\ntype MenuFocusRegionsValues = (typeof MENU_FOCUS_REGIONS)[keyof typeof MENU_FOCUS_REGIONS];\n// if MenuFocusRegionsValues may be a string or a function that returns a string, we want only the resolved strings\ntype ValidRegionsValues<T extends MenuFocusRegionsValues = MenuFocusRegionsValues> = T extends string\n  ? T\n  : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  T extends (...args: any) => any\n  ? ReturnType<T>\n  : never;\n\nexport const useFocusTracker = () => {\n  const [focusRegion, setFocusRegion] = React.useState<ValidRegionsValues>('');\n  // we want to keep the focus region trackers as stable as possible to avoid unnecessary re-renders\n  //  there is no need to change the trackers reference when the focus region changes,\n  //   since changing the focus region is always triggered by a final user interaction (so after reacts reconciliation)\n  const focusedRegionPerformanceHelper = React.useRef('') as React.MutableRefObject<ValidRegionsValues>;\n  const preventBlurReset = React.useRef(false);\n\n  const focusedElementItemNode = React.useRef(\n    null,\n  ) as React.MutableRefObject<DSMenuButtonT.PseudoFocusableMenuNodes | null>;\n  const trackFocusTrigger = React.useCallback(() => {\n    setFocusRegion(MENU_FOCUS_REGIONS.TRIGGER);\n    focusedRegionPerformanceHelper.current = MENU_FOCUS_REGIONS.TRIGGER;\n    focusedElementItemNode.current = null;\n\n    return null;\n  }, []);\n  const trackFocusNode = React.useCallback((nodeToFocus: DSMenuButtonT.PseudoFocusableMenuNodes) => {\n    const newFocusRegion = MENU_FOCUS_REGIONS.ITEM_BY_DSID(nodeToFocus.dsId);\n    setFocusRegion(newFocusRegion);\n    focusedRegionPerformanceHelper.current = newFocusRegion;\n    // eslint-disable-next-line prefer-destructuring\n    focusedElementItemNode.current = nodeToFocus;\n  }, []);\n\n  const trackFocusRegionReset = React.useCallback(() => {\n    setFocusRegion(MENU_FOCUS_REGIONS.RESET);\n    focusedRegionPerformanceHelper.current = MENU_FOCUS_REGIONS.RESET;\n    focusedElementItemNode.current = null;\n    return null;\n  }, []);\n\n  const trackFocusFirstChildItem = React.useCallback(\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes) => {\n      if (!isMenuNodeAllowedToHaveChildren(itemNode)) {\n        console.log('focus first child item > itemNode', itemNode);\n        throw TREE_STRUCTURE_ERRORS.NODE_CANNOT_HAVE_CHILDREN;\n      }\n      if (itemNode.children.length === 0) {\n        console.log(itemNode);\n        throw new Error('No children found in the item node');\n      }\n      const focusableChildrenNodes = getFocusableSiblingsList(itemNode.children[0]);\n      if (focusableChildrenNodes.length === 0) {\n        console.log('focus first child item > itemNode', itemNode);\n        throw new Error('No focusable nodes found in the children of the item node');\n      }\n\n      const newFocusedNode = focusableChildrenNodes[0];\n      trackFocusNode(newFocusedNode);\n      return newFocusedNode;\n    },\n    [trackFocusNode],\n  );\n\n  const trackFocusLastChildItem = React.useCallback(\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes) => {\n      if (!isMenuNodeAllowedToHaveChildren(itemNode)) {\n        console.log('focus last child item > itemNode', itemNode);\n        throw new Error('Item node is not allowed to have children');\n      }\n      if (itemNode.children.length === 0) {\n        console.log(itemNode);\n        throw new Error('No children found in the item node');\n      }\n      const focusableChildrenNodes = getFocusableSiblingsList(itemNode.children[0]);\n      if (focusableChildrenNodes.length === 0) {\n        console.log('focus last child item > itemNode', itemNode);\n        throw new Error('No focusable nodes found in the children of the item node');\n      }\n      trackFocusNode(focusableChildrenNodes[focusableChildrenNodes.length - 1]);\n      return focusableChildrenNodes[focusableChildrenNodes.length - 1];\n    },\n    [trackFocusNode],\n  );\n\n  const trackFocusNextItem = React.useCallback(\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes) => {\n      const focusableSiblingsNodes = getFocusableSiblingsList(itemNode);\n      // we find the current item node index in the focusableSiblingsNodes array\n      const currIndex = focusableSiblingsNodes.findIndex((node) => node.dsId === itemNode.dsId);\n\n      const nextIndex = currIndex + 1 < focusableSiblingsNodes.length ? currIndex + 1 : 0;\n      const newFocusedNode = focusableSiblingsNodes[nextIndex];\n      trackFocusNode(newFocusedNode);\n\n      return newFocusedNode;\n    },\n    [trackFocusNode],\n  );\n\n  const trackFocusPreviousItem = React.useCallback(\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes) => {\n      const focusableSiblingsNodes = getFocusableSiblingsList(itemNode);\n      // we find the current item node index in the focusableSiblingsNodes array\n      const currIndex = focusableSiblingsNodes.findIndex((node) => node.dsId === itemNode.dsId);\n\n      const previousIndex = currIndex - 1 >= 0 ? currIndex - 1 : focusableSiblingsNodes.length - 1;\n      const newFocusNode = focusableSiblingsNodes[previousIndex];\n      trackFocusNode(newFocusNode);\n      return newFocusNode;\n    },\n    [trackFocusNode],\n  );\n\n  const trackFocusParentItem = React.useCallback(\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes) => {\n      const { parent } = itemNode;\n      // this typecast is required because we are reading the parent property from the itemNode\n      // while this function can receive any PseudoFocusableMenuNodes,\n      //   the parent property may be a non-pseudo focusable node (specifically when the parent property is group node)\n      const parentNode = parent;\n      if (!parentNode) {\n        console.log('focus parent item', { itemNode, parentNode });\n        throw new Error(`No parent node found for the item node`);\n      }\n\n      let nodeToFocus: DSMenuButtonT.PseudoFocusableMenuNodes | null = parentNode;\n      // if parent is SingleSelectGroupNode then we can't focus it\n      if (isGroup(parentNode)) {\n        const groupParent = parentNode.parent;\n        if (!isFocusableNode(groupParent) && !isRootNode(groupParent)) {\n          console.log('focus parent item', { itemNode, parentNode, groupParent });\n          throw new Error('No focusable parent node found for the item node');\n        }\n        nodeToFocus = groupParent;\n      }\n\n      const focusableNode = isRootNode(nodeToFocus) ? null : nodeToFocus;\n      const newFocusNode = focusableNode;\n      if (!newFocusNode) trackFocusTrigger();\n      else trackFocusNode(newFocusNode);\n\n      return focusableNode;\n    },\n    [trackFocusNode, trackFocusTrigger],\n  );\n\n  return React.useMemo(\n    () => ({\n      preventBlurReset,\n      focusRegion,\n      focusedElementItemNode,\n      trackFocusTrigger,\n      trackFocusNode,\n      trackFocusRegionReset,\n      trackFocusFirstChildItem,\n      trackFocusLastChildItem,\n      trackFocusNextItem,\n      trackFocusPreviousItem,\n      trackFocusParentItem,\n    }),\n    [\n      focusRegion,\n      trackFocusFirstChildItem,\n      trackFocusLastChildItem,\n      trackFocusNextItem,\n      trackFocusNode,\n      trackFocusParentItem,\n      trackFocusPreviousItem,\n      trackFocusRegionReset,\n      trackFocusTrigger,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable no-console */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { throttle } from 'lodash';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../../react-desc-prop-types.js';\nimport {\n  isFocusableNode,\n  isGroup,\n  isMenuNodeAllowedToHaveChildren,\n  isRootNode,\n} from '../../../utils/nodesTypeguardsAndGetters.js';\nimport { TREE_STRUCTURE_ERRORS } from '../constants/Errors.js';\nimport { MENU_FOCUS_REGIONS } from '../constants/index.js';\nimport { getFocusableSiblingsList } from '../utils/nodeGettersByCriterias.js';\n\ntype MenuFocusRegionsValues = (typeof MENU_FOCUS_REGIONS)[keyof typeof MENU_FOCUS_REGIONS];\n// if MenuFocusRegionsValues may be a string or a function that returns a string, we want only the resolved strings\ntype ValidRegionsValues<T extends MenuFocusRegionsValues = MenuFocusRegionsValues> = T extends string\n  ? T\n  : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  T extends (...args: any) => any\n  ? ReturnType<T>\n  : never;\n\nexport const useFocusTracker = () => {\n  const [focusRegion, setFocusRegion] = React.useState<ValidRegionsValues>('');\n  // we want to keep the focus region trackers as stable as possible to avoid unnecessary re-renders\n  //  there is no need to change the trackers reference when the focus region changes,\n  //   since changing the focus region is always triggered by a final user interaction (so after reacts reconciliation)\n  const focusedRegionPerformanceHelper = React.useRef('') as React.MutableRefObject<ValidRegionsValues>;\n  const preventBlurReset = React.useRef(false);\n\n  const focusedElementItemNode = React.useRef(\n    null,\n  ) as React.MutableRefObject<DSMenuButtonT.PseudoFocusableMenuNodes | null>;\n\n  // typescript with debounce doesn't work well, so we need to disable the exhaustive deps rule here\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const racingConditionDebounceTrackFocus = React.useCallback(\n    throttle(\n      (newFocusRegion: ValidRegionsValues, focusNode: DSMenuButtonT.PseudoFocusableMenuNodes | null) => {\n        setFocusRegion(newFocusRegion);\n        focusedRegionPerformanceHelper.current = newFocusRegion;\n        focusedElementItemNode.current = focusNode;\n\n        return focusNode;\n      },\n      50,\n      { leading: true, trailing: true },\n    ),\n    [],\n  );\n\n  const trackFocusTrigger = React.useCallback(\n    () => racingConditionDebounceTrackFocus(MENU_FOCUS_REGIONS.TRIGGER, null),\n    [racingConditionDebounceTrackFocus],\n  );\n\n  const trackFocusNode = React.useCallback(\n    (nodeToFocus: DSMenuButtonT.PseudoFocusableMenuNodes) => {\n      const newFocusRegion = MENU_FOCUS_REGIONS.ITEM_BY_DSID(nodeToFocus.dsId);\n      racingConditionDebounceTrackFocus(newFocusRegion, nodeToFocus);\n    },\n    [racingConditionDebounceTrackFocus],\n  );\n\n  const trackFocusRegionReset = React.useCallback(\n    () => racingConditionDebounceTrackFocus(MENU_FOCUS_REGIONS.RESET, null),\n    [racingConditionDebounceTrackFocus],\n  );\n\n  const trackFocusFirstChildItem = React.useCallback(\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes) => {\n      if (!isMenuNodeAllowedToHaveChildren(itemNode)) {\n        console.log('focus first child item > itemNode', itemNode);\n        throw TREE_STRUCTURE_ERRORS.NODE_CANNOT_HAVE_CHILDREN;\n      }\n      if (itemNode.children.length === 0) {\n        console.log(itemNode);\n        throw new Error('No children found in the item node');\n      }\n      const focusableChildrenNodes = getFocusableSiblingsList(itemNode.children[0]);\n      if (focusableChildrenNodes.length === 0) {\n        console.log('focus first child item > itemNode', itemNode);\n        throw new Error('No focusable nodes found in the children of the item node');\n      }\n\n      const newFocusedNode = focusableChildrenNodes[0];\n      return racingConditionDebounceTrackFocus(MENU_FOCUS_REGIONS.ITEM_BY_DSID(newFocusedNode.dsId), newFocusedNode);\n    },\n    [racingConditionDebounceTrackFocus],\n  );\n\n  const trackFocusLastChildItem = React.useCallback(\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes) => {\n      if (!isMenuNodeAllowedToHaveChildren(itemNode)) {\n        console.log('focus last child item > itemNode', itemNode);\n        throw new Error('Item node is not allowed to have children');\n      }\n      if (itemNode.children.length === 0) {\n        console.log(itemNode);\n        throw new Error('No children found in the item node');\n      }\n      const focusableChildrenNodes = getFocusableSiblingsList(itemNode.children[0]);\n      if (focusableChildrenNodes.length === 0) {\n        console.log('focus last child item > itemNode', itemNode);\n        throw new Error('No focusable nodes found in the children of the item node');\n      }\n      return racingConditionDebounceTrackFocus(\n        MENU_FOCUS_REGIONS.ITEM_BY_DSID(focusableChildrenNodes[focusableChildrenNodes.length - 1].dsId),\n        focusableChildrenNodes[focusableChildrenNodes.length - 1],\n      );\n    },\n    [racingConditionDebounceTrackFocus],\n  );\n\n  const trackFocusNextItem = React.useCallback(\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes) => {\n      const focusableSiblingsNodes = getFocusableSiblingsList(itemNode);\n      // we find the current item node index in the focusableSiblingsNodes array\n      const currIndex = focusableSiblingsNodes.findIndex((node) => node.dsId === itemNode.dsId);\n\n      const nextIndex = currIndex + 1 < focusableSiblingsNodes.length ? currIndex + 1 : 0;\n      const newFocusedNode = focusableSiblingsNodes[nextIndex];\n      return racingConditionDebounceTrackFocus(MENU_FOCUS_REGIONS.ITEM_BY_DSID(newFocusedNode.dsId), newFocusedNode);\n    },\n    [racingConditionDebounceTrackFocus],\n  );\n\n  const trackFocusPreviousItem = React.useCallback(\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes) => {\n      const focusableSiblingsNodes = getFocusableSiblingsList(itemNode);\n      // we find the current item node index in the focusableSiblingsNodes array\n      const currIndex = focusableSiblingsNodes.findIndex((node) => node.dsId === itemNode.dsId);\n\n      const previousIndex = currIndex - 1 >= 0 ? currIndex - 1 : focusableSiblingsNodes.length - 1;\n      const newFocusNode = focusableSiblingsNodes[previousIndex];\n      return racingConditionDebounceTrackFocus(MENU_FOCUS_REGIONS.ITEM_BY_DSID(newFocusNode.dsId), newFocusNode);\n    },\n    [racingConditionDebounceTrackFocus],\n  );\n\n  const trackFocusParentItem = React.useCallback(\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes) => {\n      const { parent } = itemNode;\n      // this typecast is required because we are reading the parent property from the itemNode\n      // while this function can receive any PseudoFocusableMenuNodes,\n      //   the parent property may be a non-pseudo focusable node (specifically when the parent property is group node)\n      const parentNode = parent;\n      if (!parentNode) {\n        console.log('focus parent item', { itemNode, parentNode });\n        throw new Error(`No parent node found for the item node`);\n      }\n\n      let nodeToFocus: DSMenuButtonT.PseudoFocusableMenuNodes | null = parentNode;\n      // if parent is SingleSelectGroupNode then we can't focus it\n      if (isGroup(parentNode)) {\n        const groupParent = parentNode.parent;\n        if (!isFocusableNode(groupParent) && !isRootNode(groupParent)) {\n          console.log('focus parent item', { itemNode, parentNode, groupParent });\n          throw new Error('No focusable parent node found for the item node');\n        }\n        nodeToFocus = groupParent;\n      }\n\n      const focusableNode = isRootNode(nodeToFocus) ? null : nodeToFocus;\n      const newFocusNode = focusableNode;\n      if (!newFocusNode) trackFocusTrigger();\n      else trackFocusNode(newFocusNode);\n\n      return focusableNode;\n    },\n    [trackFocusNode, trackFocusTrigger],\n  );\n\n  return React.useMemo(\n    () => ({\n      preventBlurReset,\n      focusRegion,\n      focusedElementItemNode,\n      trackFocusTrigger,\n      trackFocusNode,\n      trackFocusRegionReset,\n      trackFocusFirstChildItem,\n      trackFocusLastChildItem,\n      trackFocusNextItem,\n      trackFocusPreviousItem,\n      trackFocusParentItem,\n    }),\n    [\n      focusRegion,\n      trackFocusFirstChildItem,\n      trackFocusLastChildItem,\n      trackFocusNextItem,\n      trackFocusNode,\n      trackFocusParentItem,\n      trackFocusPreviousItem,\n      trackFocusRegionReset,\n      trackFocusTrigger,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/cjs/parts/DSMenuBehaviouralContextProvider/config/useMenuBehaviouralContextProvider.js

@@ -35,12 +35,12 @@ var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_uid = require("uid");
 var import_react_desc_prop_types = require("../react-desc-prop-types.js");
+var import_useAdvancedValidation = require("./useAdvancedValidation.js");
 var import_useFocusTracker = require("./useFocusTracker.js");
 var import_useGlobalEvents = require("./useGlobalEvents.js");
 var import_useMenuItemEventsHandlers = require("./useMenuItemEventsHandlers.js");
 var import_useMenuOpenStatus = require("./useMenuOpenStatus.js");
 var import_useValidateProps = require("./useValidateProps.js");
-var import_useAdvancedValidation = require("./useAdvancedValidation.js");
 const useMenuBehaviouralContextProvider = (propsFromUser) => {
   const propsWithDefault = import_react.default.useMemo(
     () => ({

package/dist/cjs/parts/DSMenuBehaviouralContextProvider/config/useMenuBehaviouralContextProvider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/DSMenuBehaviouralContextProvider/config/useMenuBehaviouralContextProvider.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { uid } from 'uid';\nimport type { DSMenuButtonT } from '../../../react-desc-prop-types.js';\nimport {\n  DSMenuBehaviouralContextProviderPropTypesSchema,\n  defaultProps,\n  type DSMenuBehaviouralContextProviderT,\n} from '../react-desc-prop-types.js';\nimport { useFocusTracker } from './useFocusTracker.js';\nimport { useGlobalEvents } from './useGlobalEvents.js';\nimport { useMenuItemEventsHandlers } from './useMenuItemEventsHandlers.js';\nimport { useMenuOpenStatus } from './useMenuOpenStatus.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useAdvancedValidation } from './useAdvancedValidation.js';\n\nexport interface MenuBehaviouralContextProviderCTX\n  extends ReturnType<typeof useFocusTracker>,\n    ReturnType<typeof useMenuOpenStatus> {\n  propsWithDefault: DSMenuBehaviouralContextProviderT.InternalProps;\n  instanceUid: string;\n  menuItemEventsHandlers: ReturnType<typeof useMenuItemEventsHandlers>;\n  openedSubItems: DSMenuButtonT.WithSubmenuMenuNodes[];\n  handleChangeOpenedSubItems: Required<DSMenuButtonT.MenuBehaviouralLayerOptionalProps>['onDisplayedSubmenuChange'];\n  globalEventsHelpers: ReturnType<typeof useGlobalEvents>;\n}\n\nexport const useMenuBehaviouralContextProvider = (propsFromUser: DSMenuBehaviouralContextProviderT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  // the component deals with HTML DOM elements,\n  //  Deep compare of HTML DOM elements is pointless and extremely costly\n  //  for this specific case, we are better of not using `useMemoMergePropsWithDefault`\n  const propsWithDefault = React.useMemo(\n    () => ({\n      ...defaultProps,\n      ...propsFromUser,\n    }),\n    [propsFromUser],\n  ) as DSMenuBehaviouralContextProviderT.InternalProps;\n  useValidateProps(propsWithDefault, DSMenuBehaviouralContextProviderPropTypesSchema);\n\n  // =============================================================================\n  // SPECIAL VALIDATIONS\n  // =============================================================================\n  useAdvancedValidation({ propsWithDefault });\n\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  // NO XSTYLED PROPS\n  // this is 100% a pure logic context provider, it's not a visual component\n\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const { onDisplayedSubmenuChange } = propsWithDefault;\n  const instanceUid = React.useMemo(() => `ds-menu-behavioural-context-provider-${uid(5)}`, []);\n  const [openedSubItems, setOpenedSubItems] = React.useState<DSMenuButtonT.WithSubmenuMenuNodes[]>([]);\n\n  const handleChangeOpenedSubItems = React.useCallback<\n    Required<DSMenuButtonT.MenuBehaviouralLayerOptionalProps>['onDisplayedSubmenuChange']\n  >(\n    (newOpenedItems, metainfo) => {\n      setOpenedSubItems(newOpenedItems);\n      onDisplayedSubmenuChange?.(newOpenedItems, metainfo);\n    },\n    [onDisplayedSubmenuChange],\n  );\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const focusTrackers = useFocusTracker();\n  const menuOpenStatus = useMenuOpenStatus({ propsWithDefault, focusTrackers });\n\n  // why item events handlers declared in the menu behaviour context provider and not in the menu item itself?\n  //  1 - each menu item depending on it's own type (single select, multiple select, with submenu) will have different behaviours\n  //      having each menu item to declare it's own events handlers would make the single event handler way easier to create per se\n  //      BUT we would lose the big picture of how the menu items are interacting with each other\n  //  2 - having each item to declare it's own event handler repeatdly is a waste of resources (even if it's a useless micro-optimization, it hurts me)\n  const menuItemEventsHandlers = useMenuItemEventsHandlers({\n    propsWithDefault,\n    focusTrackers,\n    menuOpenStatus,\n    handleChangeOpenedSubItems,\n  });\n\n  // handle \"onClickOutside\" + on window blur...\n  // the helpers contain a way to register the submenu refs/mainmenu refs, used in checking \"if click is outside\"\n  const globalEventsHelpers = useGlobalEvents({ menuOpenStatus, handleChangeOpenedSubItems, propsWithDefault });\n\n  return React.useMemo<MenuBehaviouralContextProviderCTX>(\n    () => ({\n      propsWithDefault,\n      instanceUid,\n      ...focusTrackers,\n      ...menuOpenStatus,\n      menuItemEventsHandlers,\n      openedSubItems,\n      handleChangeOpenedSubItems,\n      globalEventsHelpers,\n    }),\n    [\n      propsWithDefault,\n      instanceUid,\n      focusTrackers,\n      menuOpenStatus,\n      menuItemEventsHandlers,\n      openedSubItems,\n      handleChangeOpenedSubItems,\n      globalEventsHelpers,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,iBAAoB;AAEpB,mCAIO;AACP,6BAAgC;AAChC,6BAAgC;AAChC,uCAA0C;AAC1C,+BAAkC;AAClC,8BAAiC;AACjC,mCAAsC;AAa/B,MAAM,oCAAoC,CAAC,kBAA2D;AAO3G,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AACA,gDAAiB,kBAAkB,4EAA+C;AAKlF,0DAAsB,EAAE,iBAAiB,CAAC;AAY1C,QAAM,EAAE,yBAAyB,IAAI;AACrC,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,4CAAwC,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAC5F,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,aAAAA,QAAM,SAA+C,CAAC,CAAC;AAEnG,QAAM,6BAA6B,aAAAA,QAAM;AAAA,IAGvC,CAAC,gBAAgB,aAAa;AAC5B,wBAAkB,cAAc;AAChC,iCAA2B,gBAAgB,QAAQ;AAAA,IACrD;AAAA,IACA,CAAC,wBAAwB;AAAA,EAC3B;AAKA,QAAM,oBAAgB,wCAAgB;AACtC,QAAM,qBAAiB,4CAAkB,EAAE,kBAAkB,cAAc,CAAC;AAO5E,QAAM,6BAAyB,4DAA0B;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,0BAAsB,wCAAgB,EAAE,gBAAgB,4BAA4B,iBAAiB,CAAC;AAE5G,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import React from 'react';\nimport { uid } from 'uid';\nimport type { DSMenuButtonT } from '../../../react-desc-prop-types.js';\nimport {\n  DSMenuBehaviouralContextProviderPropTypesSchema,\n  defaultProps,\n  type DSMenuBehaviouralContextProviderT,\n} from '../react-desc-prop-types.js';\nimport { useAdvancedValidation } from './useAdvancedValidation.js';\nimport { useFocusTracker } from './useFocusTracker.js';\nimport { useGlobalEvents } from './useGlobalEvents.js';\nimport { useMenuItemEventsHandlers } from './useMenuItemEventsHandlers.js';\nimport { useMenuOpenStatus } from './useMenuOpenStatus.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface MenuBehaviouralContextProviderCTX\n  extends ReturnType<typeof useFocusTracker>,\n    ReturnType<typeof useMenuOpenStatus> {\n  propsWithDefault: DSMenuBehaviouralContextProviderT.InternalProps;\n  instanceUid: string;\n  menuItemEventsHandlers: ReturnType<typeof useMenuItemEventsHandlers>;\n  openedSubItems: DSMenuButtonT.WithSubmenuMenuNodes[];\n  handleChangeOpenedSubItems: Required<DSMenuButtonT.MenuBehaviouralLayerOptionalProps>['onDisplayedSubmenuChange'];\n  globalEventsHelpers: ReturnType<typeof useGlobalEvents>;\n}\n\nexport const useMenuBehaviouralContextProvider = (propsFromUser: DSMenuBehaviouralContextProviderT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  // the component deals with HTML DOM elements,\n  //  Deep compare of HTML DOM elements is pointless and extremely costly\n  //  for this specific case, we are better of not using `useMemoMergePropsWithDefault`\n  const propsWithDefault = React.useMemo(\n    () => ({\n      ...defaultProps,\n      ...propsFromUser,\n    }),\n    [propsFromUser],\n  ) as DSMenuBehaviouralContextProviderT.InternalProps;\n  useValidateProps(propsWithDefault, DSMenuBehaviouralContextProviderPropTypesSchema);\n\n  // =============================================================================\n  // SPECIAL VALIDATIONS\n  // =============================================================================\n  useAdvancedValidation({ propsWithDefault });\n\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  // NO XSTYLED PROPS\n  // this is 100% a pure logic context provider, it's not a visual component\n\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const { onDisplayedSubmenuChange } = propsWithDefault;\n  const instanceUid = React.useMemo(() => `ds-menu-behavioural-context-provider-${uid(5)}`, []);\n  const [openedSubItems, setOpenedSubItems] = React.useState<DSMenuButtonT.WithSubmenuMenuNodes[]>([]);\n\n  const handleChangeOpenedSubItems = React.useCallback<\n    Required<DSMenuButtonT.MenuBehaviouralLayerOptionalProps>['onDisplayedSubmenuChange']\n  >(\n    (newOpenedItems, metainfo) => {\n      setOpenedSubItems(newOpenedItems);\n      onDisplayedSubmenuChange?.(newOpenedItems, metainfo);\n    },\n    [onDisplayedSubmenuChange],\n  );\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const focusTrackers = useFocusTracker();\n  const menuOpenStatus = useMenuOpenStatus({ propsWithDefault, focusTrackers });\n\n  // why item events handlers declared in the menu behaviour context provider and not in the menu item itself?\n  //  1 - each menu item depending on it's own type (single select, multiple select, with submenu) will have different behaviours\n  //      having each menu item to declare it's own events handlers would make the single event handler way easier to create per se\n  //      BUT we would lose the big picture of how the menu items are interacting with each other\n  //  2 - having each item to declare it's own event handler repeatdly is a waste of resources (even if it's a useless micro-optimization, it hurts me)\n  const menuItemEventsHandlers = useMenuItemEventsHandlers({\n    propsWithDefault,\n    focusTrackers,\n    menuOpenStatus,\n    handleChangeOpenedSubItems,\n  });\n\n  // handle \"onClickOutside\" + on window blur...\n  // the helpers contain a way to register the submenu refs/mainmenu refs, used in checking \"if click is outside\"\n  const globalEventsHelpers = useGlobalEvents({ menuOpenStatus, handleChangeOpenedSubItems, propsWithDefault });\n\n  return React.useMemo<MenuBehaviouralContextProviderCTX>(\n    () => ({\n      propsWithDefault,\n      instanceUid,\n      ...focusTrackers,\n      ...menuOpenStatus,\n      menuItemEventsHandlers,\n      openedSubItems,\n      handleChangeOpenedSubItems,\n      globalEventsHelpers,\n    }),\n    [\n      propsWithDefault,\n      instanceUid,\n      focusTrackers,\n      menuOpenStatus,\n      menuItemEventsHandlers,\n      openedSubItems,\n      handleChangeOpenedSubItems,\n      globalEventsHelpers,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,iBAAoB;AAEpB,mCAIO;AACP,mCAAsC;AACtC,6BAAgC;AAChC,6BAAgC;AAChC,uCAA0C;AAC1C,+BAAkC;AAClC,8BAAiC;AAa1B,MAAM,oCAAoC,CAAC,kBAA2D;AAO3G,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AACA,gDAAiB,kBAAkB,4EAA+C;AAKlF,0DAAsB,EAAE,iBAAiB,CAAC;AAY1C,QAAM,EAAE,yBAAyB,IAAI;AACrC,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,4CAAwC,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAC5F,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,aAAAA,QAAM,SAA+C,CAAC,CAAC;AAEnG,QAAM,6BAA6B,aAAAA,QAAM;AAAA,IAGvC,CAAC,gBAAgB,aAAa;AAC5B,wBAAkB,cAAc;AAChC,iCAA2B,gBAAgB,QAAQ;AAAA,IACrD;AAAA,IACA,CAAC,wBAAwB;AAAA,EAC3B;AAKA,QAAM,oBAAgB,wCAAgB;AACtC,QAAM,qBAAiB,4CAAkB,EAAE,kBAAkB,cAAc,CAAC;AAO5E,QAAM,6BAAyB,4DAA0B;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,0BAAsB,wCAAgB,EAAE,gBAAgB,4BAA4B,iBAAiB,CAAC;AAE5G,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["React"]
 }

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
 }) => {
@@ -61,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]

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      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      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    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;AD+EjB;AA9EN,mCAKO;AACP,mBAAkB;AAElB,+CAAsD;AACtD,uBAAmC;AAE5B,MAAM,oBAA4F,CAAC;AAAA,EACxG;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,OAAO,gBAAgB,gBAAgB,kBAAkB,UAAU,SAAS,IAAI;AAExF,QAAM;AAAA,IACJ;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,8EAAqC;AAE1D,QAAM,aAAa,aAAAA,QAAM,QAAQ,MAAM;AACrC,UAAM,OAAO,mBAAmB,CAAC,eAAe,MAAM,IAAI,CAAC,MAAM;AACjE,QAAI,eAAgB,MAAK,KAAK,MAAM;AACpC,WAAO;AAAA,EACT,GAAG,CAAC,kBAAkB,cAAc,CAAC;AAErC,QAAM,iCAAiC,aAAAA,QAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,YAAY,gBAAgB,oCAAmB,aAAa,IAAI;AAEtE,QAAM,sBAAsB,aAAAA,QAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,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,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;",
+  "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",
@@ -80,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]