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

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  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;AAQlE,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, 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;",
   "names": ["React"]
 }

package/dist/cjs/config/useSplitInherithedProps.js

@@ -33,7 +33,29 @@ __export(useSplitInherithedProps_exports, {
 module.exports = __toCommonJS(useSplitInherithedProps_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
+var import_nodesTypeguardsAndGetters = require("../utils/nodesTypeguardsAndGetters.js");
 var import_resolveRef = require("../utils/resolveRef.js");
+const convertSelectedOptionsToNodes = (selectedItems, treeRootNode) => {
+  const convertedSelection = [];
+  selectedItems.forEach((selectedItem) => {
+    const needsConversion = !(0, import_nodesTypeguardsAndGetters.isObjectAMenuNode)(selectedItem);
+    if (!needsConversion) {
+      convertedSelection.push(selectedItem);
+      return;
+    }
+    const { dsId } = selectedItem;
+    const selectedNode = treeRootNode.findNode((node) => node.dsId === dsId);
+    if (!selectedNode) {
+      throw new Error(`Selected option with dsId ${dsId} not found in the menu tree.`);
+    }
+    if (!(0, import_nodesTypeguardsAndGetters.isSelectionableNode)(selectedNode)) {
+      console.warn(`Selected option with dsId ${dsId} is not a selectionable node and will be ignored.`);
+      return;
+    }
+    convertedSelection.push(selectedNode);
+  });
+  return convertedSelection;
+};
 const useSplitInherithedProps = ({
   propsWithDefault,
   focusableNodes,
@@ -48,7 +70,6 @@ const useSplitInherithedProps = ({
     onSubmenuToggle,
     isLoading,
     isSkeleton,
-    selectedOptions,
     ItemRenderer,
     innerRef,
     selectedItems,
@@ -68,6 +89,12 @@ const useSplitInherithedProps = ({
     },
     [innerRef]
   );
+  const selectedNodesMap = import_react.default.useMemo(() => {
+    if (selectedItems) {
+      return convertSelectedOptionsToNodes(selectedItems, treeRootNode);
+    }
+    return [];
+  }, [selectedItems, treeRootNode]);
   const menuSpecificProps = import_react.default.useMemo(
     () => ({
       options,
@@ -77,26 +104,15 @@ const useSplitInherithedProps = ({
       onSubmenuToggle,
       isLoading,
       isSkeleton,
-      selectedOptions,
       ItemRenderer
     }),
-    [
-      options,
-      onClickOutside,
-      onOptionClick,
-      openedSubmenus,
-      onSubmenuToggle,
-      isLoading,
-      isSkeleton,
-      selectedOptions,
-      ItemRenderer
-    ]
+    [options, onClickOutside, onOptionClick, openedSubmenus, onSubmenuToggle, isLoading, isSkeleton, ItemRenderer]
   );
   return import_react.default.useMemo(
     () => ({
       menuBehaviouralLayerProps: {
         buttonDOMNodeRef,
-        selectedItems,
+        selectedNodes: selectedNodesMap,
         focusableNodes,
         optionsTree: treeRootNode,
         onDisplayedSubmenuChange,
@@ -112,7 +128,7 @@ const useSplitInherithedProps = ({
       }
     }),
     [
-      selectedItems,
+      selectedNodesMap,
       focusableNodes,
       treeRootNode,
       onDisplayedSubmenuChange,

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 { resolveRef } from '../utils/resolveRef.js';\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    selectedOptions,\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  const menuSpecificProps = React.useMemo(\n    () => ({\n      options,\n      onClickOutside,\n      onOptionClick,\n      openedSubmenus,\n      onSubmenuToggle,\n      isLoading,\n      isSkeleton,\n      selectedOptions,\n      ItemRenderer,\n    }),\n    [\n      options,\n      onClickOutside,\n      onOptionClick,\n      openedSubmenus,\n      onSubmenuToggle,\n      isLoading,\n      isSkeleton,\n      selectedOptions,\n      ItemRenderer,\n    ],\n  );\n\n  return React.useMemo(\n    () => ({\n      menuBehaviouralLayerProps: {\n        buttonDOMNodeRef,\n        selectedItems,\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      selectedItems,\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,wBAA2B;AAOpB,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,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;AACA,QAAM,oBAAoB,aAAAA,QAAM;AAAA,IAC9B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;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,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL,2BAA2B;AAAA,QACzB;AAAA,QACA;AAAA,QACA;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      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;",
   "names": ["React"]
 }

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

@@ -55,12 +55,14 @@ const StyledMenu = (0, import_ds_system.styled)("div", { name: import_constants.
   padding: 0;
   margin: 0;
 `;
+const NoComponentPlaceholder = () => null;
 const DSFlyoutMenu = (props) => {
   const { propsWithDefault, xstyledProps } = (0, import_useFlyoutMenu.useFlyoutMenu)(props);
   const {
     instanceUid,
     globalEventsHelpers: { mainMenuRef, handleSubmenusRefChange }
   } = import_react.default.useContext(import_MenuBehaviouralContextProviderCTX.MenuBehaviouralContextProviderContext);
+  const [didAnimationEnd, setDidAnimationEnd] = import_react.default.useState(false);
   const { setFloatingRef, floatingStyles, floatingContext, ItemRenderer, isMenuOpen, itemNode } = propsWithDefault;
   const handleRefChange = import_react.default.useCallback(
     (node) => {
@@ -72,6 +74,12 @@ const DSFlyoutMenu = (props) => {
     },
     [handleSubmenusRefChange, itemNode, mainMenuRef]
   );
+  const handleAnimationStartTrigger = import_react.default.useCallback(() => {
+    setDidAnimationEnd(false);
+  }, []);
+  const handleAnimationEnd = import_react.default.useCallback(() => {
+    setDidAnimationEnd(true);
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ds_floating_context.FloatingWrapper,
     {
@@ -79,12 +87,14 @@ const DSFlyoutMenu = (props) => {
       floatingStyles,
       isOpen: isMenuOpen,
       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,
         {
           itemNode: optionNode,
           ItemRenderer,
-          FlyoutMenuCircularDepInject: DSFlyoutMenu
+          FlyoutMenuCircularDepInject: didAnimationEnd ? DSFlyoutMenu : NoComponentPlaceholder
         },
         `flyout-menu-item-${optionNode.dsId}-${instanceUid}`
       )) }) })

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 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\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  return (\n    <FloatingWrapper\n      innerRef={setFloatingRef}\n      floatingStyles={floatingStyles}\n      isOpen={isMenuOpen}\n      context={floatingContext}\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              FlyoutMenuCircularDepInject={DSFlyoutMenu}\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;ADuDX;AAvDZ,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,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;AAE1D,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,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,QAAQ;AAAA,MACR,SAAS;AAAA,MAET,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,UAGA,6BAA6B;AAAA;AAAA,QANxB,oBAAoB,WAAW,IAAI,IAAI,WAAW;AAAA,MAOzD,CACD,GACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "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"]
 }

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

@@ -35,7 +35,7 @@ var React = __toESM(require("react"));
 var import_react = require("react");
 var import_nodesTypeguardsAndGetters = require("../../../utils/nodesTypeguardsAndGetters.js");
 const useAdvancedValidation = ({ propsWithDefault }) => {
-  const { onActivateItem, onItemSelected, selectedItems, optionsTree } = propsWithDefault;
+  const { onActivateItem, onItemSelected, selectedNodes, optionsTree } = propsWithDefault;
   (0, import_react.useEffect)(() => {
     const allNodes = optionsTree.flatten();
     const nodesByDsId = {};
@@ -76,11 +76,11 @@ The dsId must be unique.`
         "DSMenuButton:\nSome items are activable, but onActivateItem is not provided.\n\nYou must provide onActivateItem to handle activation."
       );
     }
-    if (hasSelection && (!onItemSelected || !selectedItems)) {
+    if (hasSelection && (!onItemSelected || !selectedNodes)) {
       throw new Error(
-        "DSMenuButton:\nSome items are selectionable, but onItemSelected or selectedItems are not provided.\n\nYou must provide onItemSelected and selectedItems to handle selection."
+        "DSMenuButton:\nSome items are selectionable, but onItemSelected or selectedNodes are not provided.\n\nYou must provide onItemSelected and selectedNodes to handle selection."
       );
     }
-  }, [onActivateItem, onItemSelected, selectedItems, optionsTree]);
+  }, [onActivateItem, onItemSelected, selectedNodes, optionsTree]);
 };
 //# sourceMappingURL=useAdvancedValidation.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/DSMenuBehaviouralContextProvider/config/useAdvancedValidation.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useEffect } from 'react';\nimport { type DSMenuButtonT } from '../../../react-desc-prop-types.js';\nimport { type DSMenuBehaviouralContextProviderT } from '../react-desc-prop-types.js';\nimport { isActivableNode, isSelectionableNode } from '../../../utils/nodesTypeguardsAndGetters.js';\n\ntype UseAdvancedValidationConfigT = {\n  propsWithDefault: DSMenuBehaviouralContextProviderT.InternalProps;\n};\nexport const useAdvancedValidation = ({ propsWithDefault }: UseAdvancedValidationConfigT): void => {\n  const { onActivateItem, onItemSelected, selectedItems, optionsTree } = propsWithDefault;\n  // =============================================================================\n  // SPECIAL VALIDATIONS\n  // =============================================================================\n  //   We iterate onces, validate everything in one go for performance reasons\n  // =============================================================================\n  // - No repeated dsId\n  //   (only validating focusableNodes may work, but to avoid complexity we validate the whole tree)\n  // - if any item is \"selectionable\", selection IoC props must be provided\n  // - if any item is \"activable\",    activation IoC props must be provided\n  // =============================================================================\n  // we want to validate only when dependencies change, should improve performance if app is using memoization\n  //  and be virtually a free overhead if the app is not using memoization\n  // =============================================================================\n  useEffect(() => {\n    const allNodes = optionsTree.flatten();\n    const nodesByDsId: { [key: DSMenuButtonT.MenuNode['dsId']]: DSMenuButtonT.MenuNode[] } = {};\n    const duplicatedIdsNodes: { [key: DSMenuButtonT.MenuNode['dsId']]: DSMenuButtonT.MenuNode[] } = {};\n    let hasActivation = false;\n    let hasSelection = false;\n    let hasDuplicateDsId = false;\n    allNodes.forEach((node) => {\n      const { dsId } = node;\n      if (!Array.isArray(nodesByDsId[dsId])) {\n        nodesByDsId[dsId] = [node];\n      } else {\n        nodesByDsId[dsId].push(node);\n        hasDuplicateDsId = true;\n        duplicatedIdsNodes[dsId] = nodesByDsId[dsId];\n      }\n\n      if (isActivableNode(node)) {\n        hasActivation = true;\n      }\n      if (isSelectionableNode(node)) {\n        hasSelection = true;\n      }\n    });\n    if (hasDuplicateDsId) {\n      // eslint-disable-next-line no-console\n      console.log('duplicatedIdsNodes', duplicatedIdsNodes);\n      throw new Error(\n        `DSMenuButton:\\nThe following dsId are repeated:\\n${Object.keys(duplicatedIdsNodes).join(\n          '\\n',\n        )}\\n\\nThe dsId must be unique.`,\n      );\n    }\n    if (hasActivation && !onActivateItem) {\n      throw new Error(\n        'DSMenuButton:\\nSome items are activable, but onActivateItem is not provided.\\n\\nYou must provide onActivateItem to handle activation.',\n      );\n    }\n    if (hasSelection && (!onItemSelected || !selectedItems)) {\n      throw new Error(\n        'DSMenuButton:\\nSome items are selectionable, but onItemSelected or selectedItems are not provided.\\n\\nYou must provide onItemSelected and selectedItems to handle selection.',\n      );\n    }\n  }, [onActivateItem, onItemSelected, selectedItems, optionsTree]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import { useEffect } from 'react';\nimport { type DSMenuButtonT } from '../../../react-desc-prop-types.js';\nimport { type DSMenuBehaviouralContextProviderT } from '../react-desc-prop-types.js';\nimport { isActivableNode, isSelectionableNode } from '../../../utils/nodesTypeguardsAndGetters.js';\n\ntype UseAdvancedValidationConfigT = {\n  propsWithDefault: DSMenuBehaviouralContextProviderT.InternalProps;\n};\nexport const useAdvancedValidation = ({ propsWithDefault }: UseAdvancedValidationConfigT): void => {\n  const { onActivateItem, onItemSelected, selectedNodes, optionsTree } = propsWithDefault;\n  // =============================================================================\n  // SPECIAL VALIDATIONS\n  // =============================================================================\n  //   We iterate onces, validate everything in one go for performance reasons\n  // =============================================================================\n  // - No repeated dsId\n  //   (only validating focusableNodes may work, but to avoid complexity we validate the whole tree)\n  // - if any item is \"selectionable\", selection IoC props must be provided\n  // - if any item is \"activable\",    activation IoC props must be provided\n  // =============================================================================\n  // we want to validate only when dependencies change, should improve performance if app is using memoization\n  //  and be virtually a free overhead if the app is not using memoization\n  // =============================================================================\n  useEffect(() => {\n    const allNodes = optionsTree.flatten();\n    const nodesByDsId: { [key: DSMenuButtonT.MenuNode['dsId']]: DSMenuButtonT.MenuNode[] } = {};\n    const duplicatedIdsNodes: { [key: DSMenuButtonT.MenuNode['dsId']]: DSMenuButtonT.MenuNode[] } = {};\n    let hasActivation = false;\n    let hasSelection = false;\n    let hasDuplicateDsId = false;\n    allNodes.forEach((node) => {\n      const { dsId } = node;\n      if (!Array.isArray(nodesByDsId[dsId])) {\n        nodesByDsId[dsId] = [node];\n      } else {\n        nodesByDsId[dsId].push(node);\n        hasDuplicateDsId = true;\n        duplicatedIdsNodes[dsId] = nodesByDsId[dsId];\n      }\n\n      if (isActivableNode(node)) {\n        hasActivation = true;\n      }\n      if (isSelectionableNode(node)) {\n        hasSelection = true;\n      }\n    });\n    if (hasDuplicateDsId) {\n      // eslint-disable-next-line no-console\n      console.log('duplicatedIdsNodes', duplicatedIdsNodes);\n      throw new Error(\n        `DSMenuButton:\\nThe following dsId are repeated:\\n${Object.keys(duplicatedIdsNodes).join(\n          '\\n',\n        )}\\n\\nThe dsId must be unique.`,\n      );\n    }\n    if (hasActivation && !onActivateItem) {\n      throw new Error(\n        'DSMenuButton:\\nSome items are activable, but onActivateItem is not provided.\\n\\nYou must provide onActivateItem to handle activation.',\n      );\n    }\n    if (hasSelection && (!onItemSelected || !selectedNodes)) {\n      throw new Error(\n        'DSMenuButton:\\nSome items are selectionable, but onItemSelected or selectedNodes are not provided.\\n\\nYou must provide onItemSelected and selectedNodes to handle selection.',\n      );\n    }\n  }, [onActivateItem, onItemSelected, selectedNodes, optionsTree]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0B;AAG1B,uCAAqD;AAK9C,MAAM,wBAAwB,CAAC,EAAE,iBAAiB,MAA0C;AACjG,QAAM,EAAE,gBAAgB,gBAAgB,eAAe,YAAY,IAAI;AAcvE,8BAAU,MAAM;AACd,UAAM,WAAW,YAAY,QAAQ;AACrC,UAAM,cAAmF,CAAC;AAC1F,UAAM,qBAA0F,CAAC;AACjG,QAAI,gBAAgB;AACpB,QAAI,eAAe;AACnB,QAAI,mBAAmB;AACvB,aAAS,QAAQ,CAAC,SAAS;AACzB,YAAM,EAAE,KAAK,IAAI;AACjB,UAAI,CAAC,MAAM,QAAQ,YAAY,IAAI,CAAC,GAAG;AACrC,oBAAY,IAAI,IAAI,CAAC,IAAI;AAAA,MAC3B,OAAO;AACL,oBAAY,IAAI,EAAE,KAAK,IAAI;AAC3B,2BAAmB;AACnB,2BAAmB,IAAI,IAAI,YAAY,IAAI;AAAA,MAC7C;AAEA,cAAI,kDAAgB,IAAI,GAAG;AACzB,wBAAgB;AAAA,MAClB;AACA,cAAI,sDAAoB,IAAI,GAAG;AAC7B,uBAAe;AAAA,MACjB;AAAA,IACF,CAAC;AACD,QAAI,kBAAkB;AAEpB,cAAQ,IAAI,sBAAsB,kBAAkB;AACpD,YAAM,IAAI;AAAA,QACR;AAAA;AAAA,EAAoD,OAAO,KAAK,kBAAkB,EAAE;AAAA,UAClF;AAAA,QACF,CAAC;AAAA;AAAA;AAAA,MACH;AAAA,IACF;AACA,QAAI,iBAAiB,CAAC,gBAAgB;AACpC,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAAA,IACF;AACA,QAAI,iBAAiB,CAAC,kBAAkB,CAAC,gBAAgB;AACvD,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,gBAAgB,gBAAgB,eAAe,WAAW,CAAC;AACjE;",
   "names": []
 }

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

@@ -44,7 +44,7 @@ const useMenuItemEventsHandlers = ({
   menuOpenStatus,
   handleChangeOpenedSubItems
 }) => {
-  const { onItemSelected, onActivateItem, selectedItems } = propsWithDefault;
+  const { onItemSelected, onActivateItem, selectedNodes } = propsWithDefault;
   const { onOpinionatedClose } = menuOpenStatus;
   const {
     trackFocusFirstChildItem,
@@ -95,10 +95,10 @@ const useMenuItemEventsHandlers = ({
         trackFocusFirstChildItem(pseudoFocusedItemNode);
       } else {
         if ((0, import_nodesTypeguardsAndGetters.isMultipleSelectNode)(pseudoFocusedItemNode)) {
-          const newSelection = (0, import_multipleSelectionHelpers.getNewSelectionMultipleSelect)(selectedItems, pseudoFocusedItemNode);
+          const newSelection = (0, import_multipleSelectionHelpers.getNewSelectionMultipleSelect)(selectedNodes, pseudoFocusedItemNode);
           onItemSelected(newSelection, { itemNode: pseudoFocusedItemNode, event });
         } else if ((0, import_nodesTypeguardsAndGetters.isSingleSelectNode)(pseudoFocusedItemNode)) {
-          const newSelection = (0, import_singleSelectionHelpers.getNewSelectionSingleSelect)(selectedItems, pseudoFocusedItemNode);
+          const newSelection = (0, import_singleSelectionHelpers.getNewSelectionSingleSelect)(selectedNodes, pseudoFocusedItemNode);
           onItemSelected(newSelection, { itemNode: pseudoFocusedItemNode, event });
         } else {
           onActivateItem(pseudoFocusedItemNode, { itemNode: pseudoFocusedItemNode, event });
@@ -114,7 +114,7 @@ const useMenuItemEventsHandlers = ({
       openSubmenu,
       handleChangeOpenedSubItems,
       onOpinionatedClose,
-      selectedItems,
+      selectedNodes,
       onItemSelected,
       onActivateItem
     ]
@@ -127,12 +127,12 @@ const useMenuItemEventsHandlers = ({
         return;
       }
       if ((0, import_nodesTypeguardsAndGetters.isMultipleSelectNode)(pseudoFocusedItemNode)) {
-        const newSelection = (0, import_multipleSelectionHelpers.getNewSelectionMultipleSelect)(selectedItems, pseudoFocusedItemNode);
+        const newSelection = (0, import_multipleSelectionHelpers.getNewSelectionMultipleSelect)(selectedNodes, pseudoFocusedItemNode);
         onItemSelected(newSelection, { itemNode: pseudoFocusedItemNode, event });
         return;
       }
       if ((0, import_nodesTypeguardsAndGetters.isSingleSelectNode)(pseudoFocusedItemNode)) {
-        const newSelection = (0, import_singleSelectionHelpers.getNewSelectionSingleSelect)(selectedItems, pseudoFocusedItemNode);
+        const newSelection = (0, import_singleSelectionHelpers.getNewSelectionSingleSelect)(selectedNodes, pseudoFocusedItemNode);
         onItemSelected(newSelection, { itemNode: pseudoFocusedItemNode, event });
         return;
       }
@@ -148,7 +148,7 @@ const useMenuItemEventsHandlers = ({
       onOpinionatedClose,
       trackFocusFirstChildItem,
       openSubmenu,
-      selectedItems,
+      selectedNodes,
       onItemSelected
     ]
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/DSMenuBehaviouralContextProvider/config/useMenuItemEventsHandlers.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-console */\n/* eslint-disable max-lines */\n// in this files the returns are not useless, they are used to clearly demark the intended behavior shortcircuit for the next developer that reads the code\n/* eslint-disable no-useless-return */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport React from 'react';\nimport { type DSMenuButtonT } from '../../../react-desc-prop-types.js';\nimport {\n  isFocusableNode,\n  isMultipleSelectNode,\n  isRootNode,\n  isSingleSelectNode,\n  isWithSubmenuNode,\n  isWithSubmenuOnlyNode,\n} from '../../../utils/nodesTypeguardsAndGetters.js';\nimport { FORBIDDEN_BEHAVIOURS, UNEXPECTED_INTERNAL_ERRORS } from '../constants/Errors.js';\nimport { type DSMenuBehaviouralContextProviderT } from '../react-desc-prop-types.js';\nimport { getNewSelectionMultipleSelect } from '../utils/multipleSelectionHelpers.js';\nimport { getSubMenusPath } from '../utils/nodeGettersByCriterias.js';\nimport { getNewSelectionSingleSelect } from '../utils/singleSelectionHelpers.js';\nimport type { useFocusTracker } from './useFocusTracker.js';\nimport type { useMenuOpenStatus } from './useMenuOpenStatus.js';\n\ntype ItemKeydownHelpersArgs = {\n  pseudoFocusedItemNode: DSMenuButtonT.PseudoFocusableMenuNodes;\n  event?: React.KeyboardEvent | React.MouseEvent;\n};\ntype SubmenuChangeMetainfo = {\n  itemNode: DSMenuButtonT.PseudoFocusableMenuNodes;\n  event?: React.SyntheticEvent;\n};\n\ntype UseMenuItemEventsHandlersConfig = {\n  propsWithDefault: DSMenuBehaviouralContextProviderT.InternalProps;\n  focusTrackers: ReturnType<typeof useFocusTracker>;\n  menuOpenStatus: ReturnType<typeof useMenuOpenStatus>;\n  handleChangeOpenedSubItems: Required<DSMenuButtonT.MenuBehaviouralLayerOptionalProps>['onDisplayedSubmenuChange'];\n};\n\nexport const useMenuItemEventsHandlers = ({\n  propsWithDefault,\n  focusTrackers,\n  menuOpenStatus,\n  handleChangeOpenedSubItems,\n}: UseMenuItemEventsHandlersConfig) => {\n  const { onItemSelected, onActivateItem, selectedItems } = propsWithDefault;\n  const { onOpinionatedClose } = menuOpenStatus;\n  const {\n    trackFocusFirstChildItem,\n    trackFocusLastChildItem,\n    trackFocusNextItem,\n    trackFocusPreviousItem,\n    trackFocusParentItem,\n    trackFocusNode,\n    focusedElementItemNode,\n  } = focusTrackers;\n\n  const openSubmenu = React.useCallback(\n    ({\n      itemNode,\n      event,\n    }: {\n      itemNode: DSMenuButtonT.WithSubmenuMenuNodes;\n      event?: React.KeyboardEvent | React.MouseEvent | React.FocusEvent;\n    }) => {\n      if (!isWithSubmenuNode(itemNode)) {\n        console.log('openSubmenu -> itemNode:', itemNode);\n        throw FORBIDDEN_BEHAVIOURS.TRYING_TO_OPEN_SUBMENU_OF_NODE_WITHOUT_SUBMENU;\n      }\n      const subMenuNodesPath = getSubMenusPath(itemNode);\n      const metainfo: SubmenuChangeMetainfo = { itemNode, event };\n      const newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[] = [...subMenuNodesPath, itemNode];\n      handleChangeOpenedSubItems(newOpenedItems, metainfo);\n    },\n    [handleChangeOpenedSubItems],\n  );\n  const closeCurrentSubmenu = React.useCallback(\n    ({\n      itemNode,\n      event,\n    }: {\n      itemNode: DSMenuButtonT.PseudoFocusableMenuNodes;\n      event?: React.KeyboardEvent | React.MouseEvent;\n    }) => {\n      const metainfo: SubmenuChangeMetainfo = { itemNode, event };\n      const subMenuNodesPath = getSubMenusPath(itemNode);\n      // if length is 0, it means the parent is the root node, so we close all the submenus\n      if (subMenuNodesPath.length === 0) {\n        handleChangeOpenedSubItems([], metainfo);\n        return { currentSubmenuWasMainMenu: true };\n      }\n\n      // we want to close current submenu, so we pop the last element\n      //  getSubMenusPath guarantees the order by walkParents + reverse at the end\n      subMenuNodesPath.pop();\n      handleChangeOpenedSubItems(subMenuNodesPath, metainfo);\n      return { currentSubmenuWasMainMenu: false };\n    },\n    [handleChangeOpenedSubItems],\n  );\n  /*\n   * 13th August 2024:\n   * https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/\n   * Additional roles, states, and properties needed for the menu element are described in the Menu and Menubar Pattern.\n   * https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n   * Because menubar and menu elements are composite widgets as described in the practice for Keyboard Navigation Inside Components,\n   *  Tab and Shift + Tab do not move focus among the items in the menu.\n   *  Instead, the keyboard commands described in this section enable users to move focus among the elements in a menubar or menu.\n   * Tab and Shift + Tab:\n   *   - Move focus into a menubar <- Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n   *   - When focus is on a menuitem in a menu or menubar, move focus out of the menu or menubar, and close all menus and submenus.\n   *     ************************************************************************************************************************************\n   *     this will be implemented by not setting document.activeElement to the menuitem but keeping it on the trigger button\n   *          why? because there is no javascript API to trigger a \"tab\"/\"shift+tab\" navigation and any algorithm trying to do so is fragile\n   *          also, this is enforced by w3.org too as per:\n   *     ************************************************************************************************************************************\n   *   Note that Tab and Shift + Tab do not move focus into a menu.\n   *     Unlike a menubar, a menu is not visually persistent,\n   *     and authors are responsible for ensuring focus moves to an item inside of a menu when the menu opens.\n   *\n   */\n  const handleMenuItemEnterKeyDown = React.useCallback(\n    ({ pseudoFocusedItemNode, event }: ItemKeydownHelpersArgs) => {\n      // Enter:\n      //   - When focus is on a menuitem that has a submenu, opens the submenu and places focus on its first item.\n      //   ...\n      if (isWithSubmenuOnlyNode(pseudoFocusedItemNode)) {\n        openSubmenu({ itemNode: pseudoFocusedItemNode, event });\n        trackFocusFirstChildItem(pseudoFocusedItemNode);\n      } else {\n        //  - Otherwise, activates the item...\n\n        //  ----------------------------------\n        //  4. Although it is recommended that authors avoid doing so,\n        //     some implementations of navigation menubars may have menuitem elements that both perform a function and open a submenu.\n        //     In such implementations, Enter and Space perform a navigation function,\n        //     e.g., load new content, while Down Arrow, in a horizontal menubar, opens the submenu associated with that same menuitem.\n        //   ---------------------------------\n        //   Based on an investigation, the above statement is not specific to \"navigation\" nor to ONLY \"menubars\", it really is about \"menuitems\" in general\n        //   as long as the role=\"menuitem\" & aria-haspopup=\"${id-of-the-submenu}\" & aria-expanded=\"${true/false}\" (& aria-orientation=\"vertical/horizontal\" if non-default)\n        //   are set, the Screen Readers will provide the same announcement for the menuitem regardless of the parent role\n\n        // \"activation\" is a concept,\n        //  WCAG here implies that for menuitemscheckbox and menuitemsradio this triggers the selection\n        //  for menuitems (that doesn't fit selection nor submenus) it triggers the action\n        //  this also triggers enter -> single-select-item-with-submenu as expected\n        if (isMultipleSelectNode(pseudoFocusedItemNode)) {\n          // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n          // useAdvancedValidation guarantees the non-null in this \"if\" branch\n          const newSelection = getNewSelectionMultipleSelect(selectedItems!, pseudoFocusedItemNode);\n          onItemSelected!(newSelection, { itemNode: pseudoFocusedItemNode, event });\n        } else if (isSingleSelectNode(pseudoFocusedItemNode)) {\n          // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n          // useAdvancedValidation guarantees the non-null in this \"if\" branch\n          const newSelection = getNewSelectionSingleSelect(selectedItems!, pseudoFocusedItemNode);\n          onItemSelected!(newSelection, { itemNode: pseudoFocusedItemNode, event });\n        } else {\n          // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n          // useAdvancedValidation guarantees the non-null in this \"if\" branch\n          onActivateItem!(pseudoFocusedItemNode, { itemNode: pseudoFocusedItemNode, event });\n        }\n        // ... and closes the menu.\n        const metainfo: SubmenuChangeMetainfo = { itemNode: pseudoFocusedItemNode, event };\n        const newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[] = [];\n        handleChangeOpenedSubItems(newOpenedItems, metainfo);\n        onOpinionatedClose();\n      }\n    },\n    [\n      trackFocusFirstChildItem,\n      openSubmenu,\n      handleChangeOpenedSubItems,\n      onOpinionatedClose,\n      selectedItems,\n      onItemSelected,\n      onActivateItem,\n    ],\n  );\n  const handleMenuItemSpaceKeyDown = React.useCallback(\n    ({ pseudoFocusedItemNode, event }: ItemKeydownHelpersArgs) => {\n      // Space:\n      // [X] (Optional): When focus is on a menuitem that has a submenu, opens the submenu and places focus on its first item.\n      //  ----------------------------------\n      //  4. Although it is recommended that authors avoid doing so,\n      //     some implementations of navigation menubars may have menuitem elements that both perform a function and open a submenu.\n      //     In such implementations, Enter and Space perform a navigation function,\n      //     e.g., load new content, while Down Arrow, in a horizontal menubar, opens the submenu associated with that same menuitem.\n      //   ---------------------------------\n      //   Based on an investigation, the above statement is not specific to \"navigation\" nor to ONLY \"menubars\", it really is about \"menuitems\" in general\n      //   as long as the role=\"menuitem\" & aria-haspopup=\"${id-of-the-submenu}\" & aria-expanded=\"${true/false}\" (& aria-orientation=\"vertical/horizontal\" if non-default)\n      //   are set, the Screen Readers will provide the same announcement for the menuitem regardless of the parent role\n      if (isWithSubmenuOnlyNode(pseudoFocusedItemNode)) {\n        openSubmenu({ itemNode: pseudoFocusedItemNode, event });\n        trackFocusFirstChildItem(pseudoFocusedItemNode);\n        return;\n      }\n      // [X] (Optional): When focus is on a menuitemcheckbox, changes the state without closing the menu.\n      if (isMultipleSelectNode(pseudoFocusedItemNode)) {\n        // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n        // useAdvancedValidation guarantees the non-null in this \"if\" branch\n        const newSelection = getNewSelectionMultipleSelect(selectedItems!, pseudoFocusedItemNode);\n        onItemSelected!(newSelection, { itemNode: pseudoFocusedItemNode, event });\n        return;\n      }\n      // [X] (Optional): When focus is on a menuitemradio that is not checked, without closing the menu,\n      //   checks the focused menuitemradio and unchecks any other checked menuitemradio element in the same group.\n      if (isSingleSelectNode(pseudoFocusedItemNode)) {\n        // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n        // useAdvancedValidation guarantees the non-null in this \"if\" branch\n        const newSelection = getNewSelectionSingleSelect(selectedItems!, pseudoFocusedItemNode);\n        onItemSelected!(newSelection, { itemNode: pseudoFocusedItemNode, event });\n        return;\n      }\n      // [X] (Optional): When focus is on a menuitem that does not have a submenu, activates the menuitem and closes the menu.\n      onActivateItem?.(pseudoFocusedItemNode, { itemNode: pseudoFocusedItemNode, event });\n\n      const metainfo: SubmenuChangeMetainfo = { itemNode: pseudoFocusedItemNode, event };\n      const newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[] = [];\n      handleChangeOpenedSubItems(newOpenedItems, metainfo);\n      onOpinionatedClose();\n    },\n    [\n      onActivateItem,\n      handleChangeOpenedSubItems,\n      onOpinionatedClose,\n      trackFocusFirstChildItem,\n      openSubmenu,\n      selectedItems,\n      onItemSelected,\n    ],\n  );\n  const handleMenuItemRightArrowKeyDown = React.useCallback(\n    ({ pseudoFocusedItemNode, event }: ItemKeydownHelpersArgs) => {\n      // Right Arrow:\n      // [N/A] When focus is in a menubar, moves focus to the next item, optionally wrapping from the last to the first.\n      //  /\\ Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n\n      // [X] When focus is in a menu and on a menuitem that has a submenu, opens the submenu and places focus on its first item.\n      // [N/A] When focus is in a menu and on an item that does not have a submenu, performs the following 3 actions:\n      //    [N/A] Closes the submenu and any parent menus.\n      //    [N/A] Moves focus to the next item in the menubar.\n      //  /\\ Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n\n      // [X] If focus is now on a menuitem with a submenu, either:\n      //   [X] (Recommended) opens the submenu of that menuitem without moving focus into the submenu,\n      //    /\\ we choose the recommended option\n      //    OR\n      //   [N/A] opens the submenu of that menuitem and places focus on the first item in the submenu.\n      //   ***********************************************************\n      //   Dimsum implements IoC, if APP side for whatever reason wants to open the new sub sub menu,\n      //    it's up to them to listen to the pseudo focus event and open the sub sub menu\n      //   ***********************************************************\n      if (isWithSubmenuNode(pseudoFocusedItemNode)) {\n        openSubmenu({ itemNode: pseudoFocusedItemNode, event });\n        trackFocusFirstChildItem(pseudoFocusedItemNode);\n        return;\n      }\n      // Note that if the menubar were not present, e.g., the menus were opened from a menubutton,\n      //    Right Arrow would not do anything when focus is on an item that does not have a submenu.\n      return;\n    },\n    [openSubmenu, trackFocusFirstChildItem],\n  );\n\n  const handleMenuItemLeftArrowKeyDown = React.useCallback(\n    ({ pseudoFocusedItemNode, event }: ItemKeydownHelpersArgs) => {\n      // Left Arrow:\n      // [N/A] When focus is in a menubar, moves focus to the previous item, optionally wrapping from the first to the last.\n      //  /\\ Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n\n      // [X] When focus is in a submenu of an item in a menu, closes the submenu and returns focus to the parent menuitem.\n      const { currentSubmenuWasMainMenu } = closeCurrentSubmenu({ itemNode: pseudoFocusedItemNode, event });\n      if (!currentSubmenuWasMainMenu) {\n        trackFocusParentItem(pseudoFocusedItemNode);\n      }\n\n      // [N/A] When focus is in a submenu of an item in a menubar, performs the following 3 actions:\n      //     [N/A] Closes the submenu.\n      //     [N/A] Moves focus to the previous item in the menubar.\n      //     [N/A] If focus is now on a menuitem with a submenu, either:\n      //       (Recommended) opens the submenu of that menuitem without moving focus into the submenu,\n      //           or\n      //        opens the submenu of that menuitem and places focus on the first item in the submenu.\n      //  /\\ Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n    },\n    [closeCurrentSubmenu, trackFocusParentItem],\n  );\n\n  const handleFocusableMenuItemKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (event) => {\n      const pseudoFocusedItemNode = focusedElementItemNode.current;\n      // if there is no focused item, we can't handle the logics\n      if (pseudoFocusedItemNode === null) throw UNEXPECTED_INTERNAL_ERRORS.FOCUSED_ITEM_NODE_NOT_SET;\n      // if the item contains an `onKeyDown` prop, we trigger it\n      if (pseudoFocusedItemNode.plainItem.onKeyDown) pseudoFocusedItemNode.plainItem.onKeyDown(event);\n\n      // Down Arrow:\n      // [N/A] When focus is on a menuitem in a menubar, and that menuitem has a submenu, opens the submenu and places focus on the first item in the submenu.\n      //    /\\ Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n      // [X] When focus is in a menu, moves focus to the next item,\n      //     [X] optionally wrapping from the last to the first.\n      if (event.key === 'ArrowDown') {\n        event?.preventDefault(); // if scrollbar are present, this keydown event should not interact with the scrollbar\n        trackFocusNextItem(pseudoFocusedItemNode);\n        return;\n      }\n      // Up Arrow:\n      // [X] When focus is in a menu, moves focus to the previous item,\n      //    [X] optionally wrapping from the first to the last.\n      // [N/A] (Optional): When focus is on a menuitem in a menubar, and that menuitem has a submenu, opens the submenu and places focus on the last item in the submenu.\n      //    /\\ Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n      if (event.key === 'ArrowUp') {\n        event?.preventDefault(); // if scrollbar are present, this keydown event should not interact with the scrollbar\n        trackFocusPreviousItem(pseudoFocusedItemNode);\n        return;\n      }\n      // Left Arrow:\n      if (event.key === 'ArrowLeft') {\n        event?.preventDefault(); // if scrollbar are present, this keydown event should not interact with the scrollbar\n        handleMenuItemLeftArrowKeyDown({ pseudoFocusedItemNode, event });\n        return;\n      }\n      // Home: If arrow key wrapping is not supported, moves focus to the first item in the current menu or menubar.\n      if (event.key === 'Home') {\n        if (!pseudoFocusedItemNode.parent) {\n          console.log('handleFocusableMenuItemKeyDown -> Home > focused item node', pseudoFocusedItemNode);\n          // should be impossible, at most the .parent is the root node, which is not able to trigger this event\n          throw UNEXPECTED_INTERNAL_ERRORS.FOCUSED_ITEM_HAS_NO_PARENT;\n        }\n        trackFocusFirstChildItem(pseudoFocusedItemNode.parent);\n        return;\n      }\n      // End: If arrow key wrapping is not supported, moves focus to the last item in the current menu or menubar.\n      if (event.key === 'End') {\n        if (!pseudoFocusedItemNode.parent) {\n          console.log('handleFocusableMenuItemKeyDown -> Home > focused item node', pseudoFocusedItemNode);\n          // should be impossible, at most the .parent is the root node, which is not able to trigger this event\n          throw UNEXPECTED_INTERNAL_ERRORS.FOCUSED_ITEM_HAS_NO_PARENT;\n        }\n        trackFocusLastChildItem(pseudoFocusedItemNode.parent);\n        return;\n      }\n      // Escape: Close the menu that contains focus and return focus to the element or context, e.g., menu button or parent menuitem, from which the menu was opened\n      if (event.key === 'Escape') {\n        const { currentSubmenuWasMainMenu } = closeCurrentSubmenu({ itemNode: pseudoFocusedItemNode, event });\n        trackFocusParentItem(pseudoFocusedItemNode);\n        // if the menu we are trying to close is the main menu, we adittionally close the main menu itself\n        if (currentSubmenuWasMainMenu) {\n          // if parent is the root node, we close also the main menu\n          onOpinionatedClose();\n        }\n        return;\n      }\n      /* ************************************************************************************\n       * ******* ACTIVATION & SUBMENU keys doesn't apply if the item is \"disabled\" **********\n       * ************************************************************************************ */\n      if (pseudoFocusedItemNode.plainItem.disabled) return;\n      // Enter:\n      if (event.key === 'Enter') {\n        handleMenuItemEnterKeyDown({ pseudoFocusedItemNode, event });\n        return;\n      }\n      // Space:\n      if (event.key === ' ') {\n        event?.preventDefault(); // if scrollbar are present, this keydown event should not interact with the scrollbar\n        handleMenuItemSpaceKeyDown({ pseudoFocusedItemNode, event });\n        return;\n      }\n      // Right Arrow:\n      if (event.key === 'ArrowRight') {\n        event?.preventDefault(); // if scrollbar are present, this keydown event should not interact with the scrollbar\n        handleMenuItemRightArrowKeyDown({ pseudoFocusedItemNode, event });\n        return;\n      }\n    },\n    [\n      focusedElementItemNode,\n      handleMenuItemEnterKeyDown,\n      handleMenuItemSpaceKeyDown,\n      trackFocusNextItem,\n      trackFocusPreviousItem,\n      handleMenuItemRightArrowKeyDown,\n      handleMenuItemLeftArrowKeyDown,\n      trackFocusFirstChildItem,\n      trackFocusLastChildItem,\n      closeCurrentSubmenu,\n      trackFocusParentItem,\n      onOpinionatedClose,\n    ],\n  );\n  const handleFocusableMenuItemClick = React.useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      const pseudoFocusedItemNode = focusedElementItemNode.current;\n      if (pseudoFocusedItemNode === null) throw UNEXPECTED_INTERNAL_ERRORS.FOCUSED_ITEM_NODE_NOT_SET;\n      // if the item is disabled, we don't do anything\n      if (pseudoFocusedItemNode.plainItem.disabled) return;\n      // we need to handle which submenu needs to close automagically based on the click\n      // starting from the itemNode, we check:\n      //   - the parent of the itemNode is root?\n      //     -  yes -> we close all the submenus\n      const parentMenuNode = pseudoFocusedItemNode.parent;\n      if (isRootNode(parentMenuNode)) {\n        const metainfo: SubmenuChangeMetainfo = { itemNode: pseudoFocusedItemNode, event };\n        const newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[] = [];\n        handleChangeOpenedSubItems(newOpenedItems, metainfo);\n      } else {\n        //     -  no  -> we close all the submenus that are not in the path to the root of the itemNode\n        // this is necessary on click because the user can still interact with other (visual) depths of the menu\n        // during keyboard navigation, the user is limited to the current (visual) depth\n        const newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[] = [...getSubMenusPath(pseudoFocusedItemNode)];\n        //     - if the clicked node has a submenu, keep it open\n        if (isWithSubmenuNode(pseudoFocusedItemNode)) {\n          newOpenedItems.push(pseudoFocusedItemNode);\n        }\n        const metainfo: SubmenuChangeMetainfo = { itemNode: pseudoFocusedItemNode, event };\n        handleChangeOpenedSubItems(newOpenedItems, metainfo);\n      }\n\n      // to all effects and purposes, the click event is the same as the space key\n      //  the main difference between enter and space is that\n      //   - enter ALWAYS closes the menu excepts for submenus\n      //   - space closes the menu if \"activable\", selections doesn't, submenus doesn't\n      handleMenuItemSpaceKeyDown({ pseudoFocusedItemNode, event });\n      // if the item contains an `onClick` prop, we trigger it\n      if (pseudoFocusedItemNode.plainItem.onClick) pseudoFocusedItemNode.plainItem.onClick(event);\n    },\n    [focusedElementItemNode, handleMenuItemSpaceKeyDown, handleChangeOpenedSubItems],\n  );\n\n  // the \"menu-button\" widget is an opinionated widget with a specific behaviour to follow when a focusable item is \"focused\"\n  //   this function achieve the opinionated \"focus an item\" opinionated behaviour (regardless of why the item is focused)\n  const opinionatedFocusBehaviour = React.useCallback(\n    // we currently know only one \"event\" that can trigger this opinionated behaviour\n    //   - focus      => React.FocusEvent <-- triggered by ATs \"focus mode\" or \"virtual cursor\" navigation\n    //      NOTE:\n    //           mouseEnter => React.MouseEvent\n    //      still ends up calling this function, but as a side effect of mouse-enter focusing the item, not as the main event\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes, event: React.FocusEvent) => {\n      if (!isFocusableNode(itemNode)) {\n        console.log('handleFocusableMenuItemOnMouseEnter > itemNode:', itemNode);\n        throw FORBIDDEN_BEHAVIOURS.TRYING_TO_FOCUS_NON_FOCUSABLE_NODE;\n      }\n      // on hover -> we track the hovered item as the focused one on top of which events should work on\n      trackFocusNode(itemNode);\n      if (!isWithSubmenuNode(itemNode)) {\n        // if the item has nosubmenu we close all the siblings submenus\n        const subMenuNodesPath = getSubMenusPath(itemNode);\n        const metainfo: SubmenuChangeMetainfo = { itemNode, event };\n        const newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[] = [...subMenuNodesPath];\n        handleChangeOpenedSubItems(newOpenedItems, metainfo);\n        return;\n      }\n      // if the item is disabled, we don't open the submenu, and there is nothing else to do\n      if (itemNode.plainItem.disabled) return;\n      // if not disabled and it has a submenu, we open it, and there is nothing else to do\n      openSubmenu({ itemNode, event });\n    },\n    [handleChangeOpenedSubItems, openSubmenu, trackFocusNode],\n  );\n\n  // when an item is hovered, we focus it\n  //   this effectively achieves:\n  //     - the item is focused (it trigger the handleFocusableMenuItemNativeFocusEvent function because render runs node.focus())\n  //     - if the user presses a keyboard key, the interaction will work starting from the (hovered hence focused) item\n  const handleFocusableMenuItemOnMouseEnter = React.useCallback(\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes) => {\n      if (!isFocusableNode(itemNode)) {\n        console.log('handleFocusableMenuItemOnMouseEnter > itemNode:', itemNode);\n        throw FORBIDDEN_BEHAVIOURS.TRYING_TO_FOCUS_NON_FOCUSABLE_NODE;\n      }\n      // on hover -> we track the hovered item as the focused one on top of which events should work on\n      trackFocusNode(itemNode);\n    },\n    [trackFocusNode],\n  );\n\n  const handleFocusableMenuItemNativeFocusEvent = React.useCallback(\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes, event: React.FocusEvent) => {\n      opinionatedFocusBehaviour(itemNode, event);\n    },\n    [opinionatedFocusBehaviour],\n  );\n\n  return React.useMemo(\n    () => ({\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    }),\n    [\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemNativeFocusEvent,\n      handleFocusableMenuItemOnMouseEnter,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable no-console */\n/* eslint-disable max-lines */\n// in this files the returns are not useless, they are used to clearly demark the intended behavior shortcircuit for the next developer that reads the code\n/* eslint-disable no-useless-return */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport React from 'react';\nimport { type DSMenuButtonT } from '../../../react-desc-prop-types.js';\nimport {\n  isFocusableNode,\n  isMultipleSelectNode,\n  isRootNode,\n  isSingleSelectNode,\n  isWithSubmenuNode,\n  isWithSubmenuOnlyNode,\n} from '../../../utils/nodesTypeguardsAndGetters.js';\nimport { FORBIDDEN_BEHAVIOURS, UNEXPECTED_INTERNAL_ERRORS } from '../constants/Errors.js';\nimport { type DSMenuBehaviouralContextProviderT } from '../react-desc-prop-types.js';\nimport { getNewSelectionMultipleSelect } from '../utils/multipleSelectionHelpers.js';\nimport { getSubMenusPath } from '../utils/nodeGettersByCriterias.js';\nimport { getNewSelectionSingleSelect } from '../utils/singleSelectionHelpers.js';\nimport type { useFocusTracker } from './useFocusTracker.js';\nimport type { useMenuOpenStatus } from './useMenuOpenStatus.js';\n\ntype ItemKeydownHelpersArgs = {\n  pseudoFocusedItemNode: DSMenuButtonT.PseudoFocusableMenuNodes;\n  event?: React.KeyboardEvent | React.MouseEvent;\n};\ntype SubmenuChangeMetainfo = {\n  itemNode: DSMenuButtonT.PseudoFocusableMenuNodes;\n  event?: React.SyntheticEvent;\n};\n\ntype UseMenuItemEventsHandlersConfig = {\n  propsWithDefault: DSMenuBehaviouralContextProviderT.InternalProps;\n  focusTrackers: ReturnType<typeof useFocusTracker>;\n  menuOpenStatus: ReturnType<typeof useMenuOpenStatus>;\n  handleChangeOpenedSubItems: Required<DSMenuButtonT.MenuBehaviouralLayerOptionalProps>['onDisplayedSubmenuChange'];\n};\n\nexport const useMenuItemEventsHandlers = ({\n  propsWithDefault,\n  focusTrackers,\n  menuOpenStatus,\n  handleChangeOpenedSubItems,\n}: UseMenuItemEventsHandlersConfig) => {\n  const { onItemSelected, onActivateItem, selectedNodes } = propsWithDefault;\n  const { onOpinionatedClose } = menuOpenStatus;\n  const {\n    trackFocusFirstChildItem,\n    trackFocusLastChildItem,\n    trackFocusNextItem,\n    trackFocusPreviousItem,\n    trackFocusParentItem,\n    trackFocusNode,\n    focusedElementItemNode,\n  } = focusTrackers;\n\n  const openSubmenu = React.useCallback(\n    ({\n      itemNode,\n      event,\n    }: {\n      itemNode: DSMenuButtonT.WithSubmenuMenuNodes;\n      event?: React.KeyboardEvent | React.MouseEvent | React.FocusEvent;\n    }) => {\n      if (!isWithSubmenuNode(itemNode)) {\n        console.log('openSubmenu -> itemNode:', itemNode);\n        throw FORBIDDEN_BEHAVIOURS.TRYING_TO_OPEN_SUBMENU_OF_NODE_WITHOUT_SUBMENU;\n      }\n      const subMenuNodesPath = getSubMenusPath(itemNode);\n      const metainfo: SubmenuChangeMetainfo = { itemNode, event };\n      const newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[] = [...subMenuNodesPath, itemNode];\n      handleChangeOpenedSubItems(newOpenedItems, metainfo);\n    },\n    [handleChangeOpenedSubItems],\n  );\n  const closeCurrentSubmenu = React.useCallback(\n    ({\n      itemNode,\n      event,\n    }: {\n      itemNode: DSMenuButtonT.PseudoFocusableMenuNodes;\n      event?: React.KeyboardEvent | React.MouseEvent;\n    }) => {\n      const metainfo: SubmenuChangeMetainfo = { itemNode, event };\n      const subMenuNodesPath = getSubMenusPath(itemNode);\n      // if length is 0, it means the parent is the root node, so we close all the submenus\n      if (subMenuNodesPath.length === 0) {\n        handleChangeOpenedSubItems([], metainfo);\n        return { currentSubmenuWasMainMenu: true };\n      }\n\n      // we want to close current submenu, so we pop the last element\n      //  getSubMenusPath guarantees the order by walkParents + reverse at the end\n      subMenuNodesPath.pop();\n      handleChangeOpenedSubItems(subMenuNodesPath, metainfo);\n      return { currentSubmenuWasMainMenu: false };\n    },\n    [handleChangeOpenedSubItems],\n  );\n  /*\n   * 13th August 2024:\n   * https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/\n   * Additional roles, states, and properties needed for the menu element are described in the Menu and Menubar Pattern.\n   * https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n   * Because menubar and menu elements are composite widgets as described in the practice for Keyboard Navigation Inside Components,\n   *  Tab and Shift + Tab do not move focus among the items in the menu.\n   *  Instead, the keyboard commands described in this section enable users to move focus among the elements in a menubar or menu.\n   * Tab and Shift + Tab:\n   *   - Move focus into a menubar <- Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n   *   - When focus is on a menuitem in a menu or menubar, move focus out of the menu or menubar, and close all menus and submenus.\n   *     ************************************************************************************************************************************\n   *     this will be implemented by not setting document.activeElement to the menuitem but keeping it on the trigger button\n   *          why? because there is no javascript API to trigger a \"tab\"/\"shift+tab\" navigation and any algorithm trying to do so is fragile\n   *          also, this is enforced by w3.org too as per:\n   *     ************************************************************************************************************************************\n   *   Note that Tab and Shift + Tab do not move focus into a menu.\n   *     Unlike a menubar, a menu is not visually persistent,\n   *     and authors are responsible for ensuring focus moves to an item inside of a menu when the menu opens.\n   *\n   */\n  const handleMenuItemEnterKeyDown = React.useCallback(\n    ({ pseudoFocusedItemNode, event }: ItemKeydownHelpersArgs) => {\n      // Enter:\n      //   - When focus is on a menuitem that has a submenu, opens the submenu and places focus on its first item.\n      //   ...\n      if (isWithSubmenuOnlyNode(pseudoFocusedItemNode)) {\n        openSubmenu({ itemNode: pseudoFocusedItemNode, event });\n        trackFocusFirstChildItem(pseudoFocusedItemNode);\n      } else {\n        //  - Otherwise, activates the item...\n\n        //  ----------------------------------\n        //  4. Although it is recommended that authors avoid doing so,\n        //     some implementations of navigation menubars may have menuitem elements that both perform a function and open a submenu.\n        //     In such implementations, Enter and Space perform a navigation function,\n        //     e.g., load new content, while Down Arrow, in a horizontal menubar, opens the submenu associated with that same menuitem.\n        //   ---------------------------------\n        //   Based on an investigation, the above statement is not specific to \"navigation\" nor to ONLY \"menubars\", it really is about \"menuitems\" in general\n        //   as long as the role=\"menuitem\" & aria-haspopup=\"${id-of-the-submenu}\" & aria-expanded=\"${true/false}\" (& aria-orientation=\"vertical/horizontal\" if non-default)\n        //   are set, the Screen Readers will provide the same announcement for the menuitem regardless of the parent role\n\n        // \"activation\" is a concept,\n        //  WCAG here implies that for menuitemscheckbox and menuitemsradio this triggers the selection\n        //  for menuitems (that doesn't fit selection nor submenus) it triggers the action\n        //  this also triggers enter -> single-select-item-with-submenu as expected\n        if (isMultipleSelectNode(pseudoFocusedItemNode)) {\n          // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n          // useAdvancedValidation guarantees the non-null in this \"if\" branch\n          const newSelection = getNewSelectionMultipleSelect(selectedNodes!, pseudoFocusedItemNode);\n          onItemSelected!(newSelection, { itemNode: pseudoFocusedItemNode, event });\n        } else if (isSingleSelectNode(pseudoFocusedItemNode)) {\n          // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n          // useAdvancedValidation guarantees the non-null in this \"if\" branch\n          const newSelection = getNewSelectionSingleSelect(selectedNodes!, pseudoFocusedItemNode);\n          onItemSelected!(newSelection, { itemNode: pseudoFocusedItemNode, event });\n        } else {\n          // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n          // useAdvancedValidation guarantees the non-null in this \"if\" branch\n          onActivateItem!(pseudoFocusedItemNode, { itemNode: pseudoFocusedItemNode, event });\n        }\n        // ... and closes the menu.\n        const metainfo: SubmenuChangeMetainfo = { itemNode: pseudoFocusedItemNode, event };\n        const newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[] = [];\n        handleChangeOpenedSubItems(newOpenedItems, metainfo);\n        onOpinionatedClose();\n      }\n    },\n    [\n      trackFocusFirstChildItem,\n      openSubmenu,\n      handleChangeOpenedSubItems,\n      onOpinionatedClose,\n      selectedNodes,\n      onItemSelected,\n      onActivateItem,\n    ],\n  );\n  const handleMenuItemSpaceKeyDown = React.useCallback(\n    ({ pseudoFocusedItemNode, event }: ItemKeydownHelpersArgs) => {\n      // Space:\n      // [X] (Optional): When focus is on a menuitem that has a submenu, opens the submenu and places focus on its first item.\n      //  ----------------------------------\n      //  4. Although it is recommended that authors avoid doing so,\n      //     some implementations of navigation menubars may have menuitem elements that both perform a function and open a submenu.\n      //     In such implementations, Enter and Space perform a navigation function,\n      //     e.g., load new content, while Down Arrow, in a horizontal menubar, opens the submenu associated with that same menuitem.\n      //   ---------------------------------\n      //   Based on an investigation, the above statement is not specific to \"navigation\" nor to ONLY \"menubars\", it really is about \"menuitems\" in general\n      //   as long as the role=\"menuitem\" & aria-haspopup=\"${id-of-the-submenu}\" & aria-expanded=\"${true/false}\" (& aria-orientation=\"vertical/horizontal\" if non-default)\n      //   are set, the Screen Readers will provide the same announcement for the menuitem regardless of the parent role\n      if (isWithSubmenuOnlyNode(pseudoFocusedItemNode)) {\n        openSubmenu({ itemNode: pseudoFocusedItemNode, event });\n        trackFocusFirstChildItem(pseudoFocusedItemNode);\n        return;\n      }\n      // [X] (Optional): When focus is on a menuitemcheckbox, changes the state without closing the menu.\n      if (isMultipleSelectNode(pseudoFocusedItemNode)) {\n        // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n        // useAdvancedValidation guarantees the non-null in this \"if\" branch\n        const newSelection = getNewSelectionMultipleSelect(selectedNodes!, pseudoFocusedItemNode);\n        onItemSelected!(newSelection, { itemNode: pseudoFocusedItemNode, event });\n        return;\n      }\n      // [X] (Optional): When focus is on a menuitemradio that is not checked, without closing the menu,\n      //   checks the focused menuitemradio and unchecks any other checked menuitemradio element in the same group.\n      if (isSingleSelectNode(pseudoFocusedItemNode)) {\n        // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n        // useAdvancedValidation guarantees the non-null in this \"if\" branch\n        const newSelection = getNewSelectionSingleSelect(selectedNodes!, pseudoFocusedItemNode);\n        onItemSelected!(newSelection, { itemNode: pseudoFocusedItemNode, event });\n        return;\n      }\n      // [X] (Optional): When focus is on a menuitem that does not have a submenu, activates the menuitem and closes the menu.\n      onActivateItem?.(pseudoFocusedItemNode, { itemNode: pseudoFocusedItemNode, event });\n\n      const metainfo: SubmenuChangeMetainfo = { itemNode: pseudoFocusedItemNode, event };\n      const newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[] = [];\n      handleChangeOpenedSubItems(newOpenedItems, metainfo);\n      onOpinionatedClose();\n    },\n    [\n      onActivateItem,\n      handleChangeOpenedSubItems,\n      onOpinionatedClose,\n      trackFocusFirstChildItem,\n      openSubmenu,\n      selectedNodes,\n      onItemSelected,\n    ],\n  );\n  const handleMenuItemRightArrowKeyDown = React.useCallback(\n    ({ pseudoFocusedItemNode, event }: ItemKeydownHelpersArgs) => {\n      // Right Arrow:\n      // [N/A] When focus is in a menubar, moves focus to the next item, optionally wrapping from the last to the first.\n      //  /\\ Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n\n      // [X] When focus is in a menu and on a menuitem that has a submenu, opens the submenu and places focus on its first item.\n      // [N/A] When focus is in a menu and on an item that does not have a submenu, performs the following 3 actions:\n      //    [N/A] Closes the submenu and any parent menus.\n      //    [N/A] Moves focus to the next item in the menubar.\n      //  /\\ Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n\n      // [X] If focus is now on a menuitem with a submenu, either:\n      //   [X] (Recommended) opens the submenu of that menuitem without moving focus into the submenu,\n      //    /\\ we choose the recommended option\n      //    OR\n      //   [N/A] opens the submenu of that menuitem and places focus on the first item in the submenu.\n      //   ***********************************************************\n      //   Dimsum implements IoC, if APP side for whatever reason wants to open the new sub sub menu,\n      //    it's up to them to listen to the pseudo focus event and open the sub sub menu\n      //   ***********************************************************\n      if (isWithSubmenuNode(pseudoFocusedItemNode)) {\n        openSubmenu({ itemNode: pseudoFocusedItemNode, event });\n        trackFocusFirstChildItem(pseudoFocusedItemNode);\n        return;\n      }\n      // Note that if the menubar were not present, e.g., the menus were opened from a menubutton,\n      //    Right Arrow would not do anything when focus is on an item that does not have a submenu.\n      return;\n    },\n    [openSubmenu, trackFocusFirstChildItem],\n  );\n\n  const handleMenuItemLeftArrowKeyDown = React.useCallback(\n    ({ pseudoFocusedItemNode, event }: ItemKeydownHelpersArgs) => {\n      // Left Arrow:\n      // [N/A] When focus is in a menubar, moves focus to the previous item, optionally wrapping from the first to the last.\n      //  /\\ Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n\n      // [X] When focus is in a submenu of an item in a menu, closes the submenu and returns focus to the parent menuitem.\n      const { currentSubmenuWasMainMenu } = closeCurrentSubmenu({ itemNode: pseudoFocusedItemNode, event });\n      if (!currentSubmenuWasMainMenu) {\n        trackFocusParentItem(pseudoFocusedItemNode);\n      }\n\n      // [N/A] When focus is in a submenu of an item in a menubar, performs the following 3 actions:\n      //     [N/A] Closes the submenu.\n      //     [N/A] Moves focus to the previous item in the menubar.\n      //     [N/A] If focus is now on a menuitem with a submenu, either:\n      //       (Recommended) opens the submenu of that menuitem without moving focus into the submenu,\n      //           or\n      //        opens the submenu of that menuitem and places focus on the first item in the submenu.\n      //  /\\ Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n    },\n    [closeCurrentSubmenu, trackFocusParentItem],\n  );\n\n  const handleFocusableMenuItemKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (event) => {\n      const pseudoFocusedItemNode = focusedElementItemNode.current;\n      // if there is no focused item, we can't handle the logics\n      if (pseudoFocusedItemNode === null) throw UNEXPECTED_INTERNAL_ERRORS.FOCUSED_ITEM_NODE_NOT_SET;\n      // if the item contains an `onKeyDown` prop, we trigger it\n      if (pseudoFocusedItemNode.plainItem.onKeyDown) pseudoFocusedItemNode.plainItem.onKeyDown(event);\n\n      // Down Arrow:\n      // [N/A] When focus is on a menuitem in a menubar, and that menuitem has a submenu, opens the submenu and places focus on the first item in the submenu.\n      //    /\\ Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n      // [X] When focus is in a menu, moves focus to the next item,\n      //     [X] optionally wrapping from the last to the first.\n      if (event.key === 'ArrowDown') {\n        event?.preventDefault(); // if scrollbar are present, this keydown event should not interact with the scrollbar\n        trackFocusNextItem(pseudoFocusedItemNode);\n        return;\n      }\n      // Up Arrow:\n      // [X] When focus is in a menu, moves focus to the previous item,\n      //    [X] optionally wrapping from the first to the last.\n      // [N/A] (Optional): When focus is on a menuitem in a menubar, and that menuitem has a submenu, opens the submenu and places focus on the last item in the submenu.\n      //    /\\ Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n      if (event.key === 'ArrowUp') {\n        event?.preventDefault(); // if scrollbar are present, this keydown event should not interact with the scrollbar\n        trackFocusPreviousItem(pseudoFocusedItemNode);\n        return;\n      }\n      // Left Arrow:\n      if (event.key === 'ArrowLeft') {\n        event?.preventDefault(); // if scrollbar are present, this keydown event should not interact with the scrollbar\n        handleMenuItemLeftArrowKeyDown({ pseudoFocusedItemNode, event });\n        return;\n      }\n      // Home: If arrow key wrapping is not supported, moves focus to the first item in the current menu or menubar.\n      if (event.key === 'Home') {\n        if (!pseudoFocusedItemNode.parent) {\n          console.log('handleFocusableMenuItemKeyDown -> Home > focused item node', pseudoFocusedItemNode);\n          // should be impossible, at most the .parent is the root node, which is not able to trigger this event\n          throw UNEXPECTED_INTERNAL_ERRORS.FOCUSED_ITEM_HAS_NO_PARENT;\n        }\n        trackFocusFirstChildItem(pseudoFocusedItemNode.parent);\n        return;\n      }\n      // End: If arrow key wrapping is not supported, moves focus to the last item in the current menu or menubar.\n      if (event.key === 'End') {\n        if (!pseudoFocusedItemNode.parent) {\n          console.log('handleFocusableMenuItemKeyDown -> Home > focused item node', pseudoFocusedItemNode);\n          // should be impossible, at most the .parent is the root node, which is not able to trigger this event\n          throw UNEXPECTED_INTERNAL_ERRORS.FOCUSED_ITEM_HAS_NO_PARENT;\n        }\n        trackFocusLastChildItem(pseudoFocusedItemNode.parent);\n        return;\n      }\n      // Escape: Close the menu that contains focus and return focus to the element or context, e.g., menu button or parent menuitem, from which the menu was opened\n      if (event.key === 'Escape') {\n        const { currentSubmenuWasMainMenu } = closeCurrentSubmenu({ itemNode: pseudoFocusedItemNode, event });\n        trackFocusParentItem(pseudoFocusedItemNode);\n        // if the menu we are trying to close is the main menu, we adittionally close the main menu itself\n        if (currentSubmenuWasMainMenu) {\n          // if parent is the root node, we close also the main menu\n          onOpinionatedClose();\n        }\n        return;\n      }\n      /* ************************************************************************************\n       * ******* ACTIVATION & SUBMENU keys doesn't apply if the item is \"disabled\" **********\n       * ************************************************************************************ */\n      if (pseudoFocusedItemNode.plainItem.disabled) return;\n      // Enter:\n      if (event.key === 'Enter') {\n        handleMenuItemEnterKeyDown({ pseudoFocusedItemNode, event });\n        return;\n      }\n      // Space:\n      if (event.key === ' ') {\n        event?.preventDefault(); // if scrollbar are present, this keydown event should not interact with the scrollbar\n        handleMenuItemSpaceKeyDown({ pseudoFocusedItemNode, event });\n        return;\n      }\n      // Right Arrow:\n      if (event.key === 'ArrowRight') {\n        event?.preventDefault(); // if scrollbar are present, this keydown event should not interact with the scrollbar\n        handleMenuItemRightArrowKeyDown({ pseudoFocusedItemNode, event });\n        return;\n      }\n    },\n    [\n      focusedElementItemNode,\n      handleMenuItemEnterKeyDown,\n      handleMenuItemSpaceKeyDown,\n      trackFocusNextItem,\n      trackFocusPreviousItem,\n      handleMenuItemRightArrowKeyDown,\n      handleMenuItemLeftArrowKeyDown,\n      trackFocusFirstChildItem,\n      trackFocusLastChildItem,\n      closeCurrentSubmenu,\n      trackFocusParentItem,\n      onOpinionatedClose,\n    ],\n  );\n  const handleFocusableMenuItemClick = React.useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      const pseudoFocusedItemNode = focusedElementItemNode.current;\n      if (pseudoFocusedItemNode === null) throw UNEXPECTED_INTERNAL_ERRORS.FOCUSED_ITEM_NODE_NOT_SET;\n      // if the item is disabled, we don't do anything\n      if (pseudoFocusedItemNode.plainItem.disabled) return;\n      // we need to handle which submenu needs to close automagically based on the click\n      // starting from the itemNode, we check:\n      //   - the parent of the itemNode is root?\n      //     -  yes -> we close all the submenus\n      const parentMenuNode = pseudoFocusedItemNode.parent;\n      if (isRootNode(parentMenuNode)) {\n        const metainfo: SubmenuChangeMetainfo = { itemNode: pseudoFocusedItemNode, event };\n        const newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[] = [];\n        handleChangeOpenedSubItems(newOpenedItems, metainfo);\n      } else {\n        //     -  no  -> we close all the submenus that are not in the path to the root of the itemNode\n        // this is necessary on click because the user can still interact with other (visual) depths of the menu\n        // during keyboard navigation, the user is limited to the current (visual) depth\n        const newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[] = [...getSubMenusPath(pseudoFocusedItemNode)];\n        //     - if the clicked node has a submenu, keep it open\n        if (isWithSubmenuNode(pseudoFocusedItemNode)) {\n          newOpenedItems.push(pseudoFocusedItemNode);\n        }\n        const metainfo: SubmenuChangeMetainfo = { itemNode: pseudoFocusedItemNode, event };\n        handleChangeOpenedSubItems(newOpenedItems, metainfo);\n      }\n\n      // to all effects and purposes, the click event is the same as the space key\n      //  the main difference between enter and space is that\n      //   - enter ALWAYS closes the menu excepts for submenus\n      //   - space closes the menu if \"activable\", selections doesn't, submenus doesn't\n      handleMenuItemSpaceKeyDown({ pseudoFocusedItemNode, event });\n      // if the item contains an `onClick` prop, we trigger it\n      if (pseudoFocusedItemNode.plainItem.onClick) pseudoFocusedItemNode.plainItem.onClick(event);\n    },\n    [focusedElementItemNode, handleMenuItemSpaceKeyDown, handleChangeOpenedSubItems],\n  );\n\n  // the \"menu-button\" widget is an opinionated widget with a specific behaviour to follow when a focusable item is \"focused\"\n  //   this function achieve the opinionated \"focus an item\" opinionated behaviour (regardless of why the item is focused)\n  const opinionatedFocusBehaviour = React.useCallback(\n    // we currently know only one \"event\" that can trigger this opinionated behaviour\n    //   - focus      => React.FocusEvent <-- triggered by ATs \"focus mode\" or \"virtual cursor\" navigation\n    //      NOTE:\n    //           mouseEnter => React.MouseEvent\n    //      still ends up calling this function, but as a side effect of mouse-enter focusing the item, not as the main event\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes, event: React.FocusEvent) => {\n      if (!isFocusableNode(itemNode)) {\n        console.log('handleFocusableMenuItemOnMouseEnter > itemNode:', itemNode);\n        throw FORBIDDEN_BEHAVIOURS.TRYING_TO_FOCUS_NON_FOCUSABLE_NODE;\n      }\n      // on hover -> we track the hovered item as the focused one on top of which events should work on\n      trackFocusNode(itemNode);\n      if (!isWithSubmenuNode(itemNode)) {\n        // if the item has nosubmenu we close all the siblings submenus\n        const subMenuNodesPath = getSubMenusPath(itemNode);\n        const metainfo: SubmenuChangeMetainfo = { itemNode, event };\n        const newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[] = [...subMenuNodesPath];\n        handleChangeOpenedSubItems(newOpenedItems, metainfo);\n        return;\n      }\n      // if the item is disabled, we don't open the submenu, and there is nothing else to do\n      if (itemNode.plainItem.disabled) return;\n      // if not disabled and it has a submenu, we open it, and there is nothing else to do\n      openSubmenu({ itemNode, event });\n    },\n    [handleChangeOpenedSubItems, openSubmenu, trackFocusNode],\n  );\n\n  // when an item is hovered, we focus it\n  //   this effectively achieves:\n  //     - the item is focused (it trigger the handleFocusableMenuItemNativeFocusEvent function because render runs node.focus())\n  //     - if the user presses a keyboard key, the interaction will work starting from the (hovered hence focused) item\n  const handleFocusableMenuItemOnMouseEnter = React.useCallback(\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes) => {\n      if (!isFocusableNode(itemNode)) {\n        console.log('handleFocusableMenuItemOnMouseEnter > itemNode:', itemNode);\n        throw FORBIDDEN_BEHAVIOURS.TRYING_TO_FOCUS_NON_FOCUSABLE_NODE;\n      }\n      // on hover -> we track the hovered item as the focused one on top of which events should work on\n      trackFocusNode(itemNode);\n    },\n    [trackFocusNode],\n  );\n\n  const handleFocusableMenuItemNativeFocusEvent = React.useCallback(\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes, event: React.FocusEvent) => {\n      opinionatedFocusBehaviour(itemNode, event);\n    },\n    [opinionatedFocusBehaviour],\n  );\n\n  return React.useMemo(\n    () => ({\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    }),\n    [\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemNativeFocusEvent,\n      handleFocusableMenuItemOnMouseEnter,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": "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",
   "names": ["React"]
 }

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

@@ -46,6 +46,9 @@ const DSMenuBehaviouralContextProviderPropTypes = {
   focusableNodes: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.object).description(
     "an array of nodes that can receive pseudoFocus, obtainable via ds-tree flatten + filter(isFocusable)"
   ).isRequired,
+  selectedNodes: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.object).description(
+    "an array of tree-nodes that have to be marked as selected in the GUI, required if the menu has selectionable items"
+  ),
   ...import_react_desc_prop_types.MenuBehaviouralLayerPropTypes
 };
 const DSMenuBehaviouralContextProviderPropTypesSchema = DSMenuBehaviouralContextProviderPropTypes;

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

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