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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSMenuBehaviouralContextProvider/config/useAdvancedValidation.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAG1B,SAAS,iBAAiB,2BAA2B;AAK9C,MAAM,wBAAwB,CAAC,EAAE,iBAAiB,MAA0C;AACjG,QAAM,EAAE,gBAAgB,gBAAgB,eAAe,YAAY,IAAI;AAcvE,YAAU,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,UAAI,gBAAgB,IAAI,GAAG;AACzB,wBAAgB;AAAA,MAClB;AACA,UAAI,oBAAoB,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/esm/parts/DSMenuBehaviouralContextProvider/config/useMenuItemEventsHandlers.js

@@ -18,7 +18,7 @@ const useMenuItemEventsHandlers = ({
   menuOpenStatus,
   handleChangeOpenedSubItems
 }) => {
-  const { onItemSelected, onActivateItem, selectedItems } = propsWithDefault;
+  const { onItemSelected, onActivateItem, selectedNodes } = propsWithDefault;
   const { onOpinionatedClose } = menuOpenStatus;
   const {
     trackFocusFirstChildItem,
@@ -69,10 +69,10 @@ const useMenuItemEventsHandlers = ({
         trackFocusFirstChildItem(pseudoFocusedItemNode);
       } else {
         if (isMultipleSelectNode(pseudoFocusedItemNode)) {
-          const newSelection = getNewSelectionMultipleSelect(selectedItems, pseudoFocusedItemNode);
+          const newSelection = getNewSelectionMultipleSelect(selectedNodes, pseudoFocusedItemNode);
           onItemSelected(newSelection, { itemNode: pseudoFocusedItemNode, event });
         } else if (isSingleSelectNode(pseudoFocusedItemNode)) {
-          const newSelection = getNewSelectionSingleSelect(selectedItems, pseudoFocusedItemNode);
+          const newSelection = getNewSelectionSingleSelect(selectedNodes, pseudoFocusedItemNode);
           onItemSelected(newSelection, { itemNode: pseudoFocusedItemNode, event });
         } else {
           onActivateItem(pseudoFocusedItemNode, { itemNode: pseudoFocusedItemNode, event });
@@ -88,7 +88,7 @@ const useMenuItemEventsHandlers = ({
       openSubmenu,
       handleChangeOpenedSubItems,
       onOpinionatedClose,
-      selectedItems,
+      selectedNodes,
       onItemSelected,
       onActivateItem
     ]
@@ -101,12 +101,12 @@ const useMenuItemEventsHandlers = ({
         return;
       }
       if (isMultipleSelectNode(pseudoFocusedItemNode)) {
-        const newSelection = getNewSelectionMultipleSelect(selectedItems, pseudoFocusedItemNode);
+        const newSelection = getNewSelectionMultipleSelect(selectedNodes, pseudoFocusedItemNode);
         onItemSelected(newSelection, { itemNode: pseudoFocusedItemNode, event });
         return;
       }
       if (isSingleSelectNode(pseudoFocusedItemNode)) {
-        const newSelection = getNewSelectionSingleSelect(selectedItems, pseudoFocusedItemNode);
+        const newSelection = getNewSelectionSingleSelect(selectedNodes, pseudoFocusedItemNode);
         onItemSelected(newSelection, { itemNode: pseudoFocusedItemNode, event });
         return;
       }
@@ -122,7 +122,7 @@ const useMenuItemEventsHandlers = ({
       onOpinionatedClose,
       trackFocusFirstChildItem,
       openSubmenu,
-      selectedItems,
+      selectedNodes,
       onItemSelected
     ]
   );

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

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

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

@@ -11,6 +11,9 @@ const DSMenuBehaviouralContextProviderPropTypes = {
   focusableNodes: PropTypes.arrayOf(PropTypes.object).description(
     "an array of nodes that can receive pseudoFocus, obtainable via ds-tree flatten + filter(isFocusable)"
   ).isRequired,
+  selectedNodes: PropTypes.arrayOf(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"
+  ),
   ...MenuBehaviouralLayerPropTypes
 };
 const DSMenuBehaviouralContextProviderPropTypesSchema = DSMenuBehaviouralContextProviderPropTypes;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuBehaviouralContextProvider/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,iBAAiB;AAE1B,SAA6B,qCAAqC;AAyB3D,MAAM,eAA+D,CAAC;AAEtE,MAAM,4CAAwG;AAAA,EACnH,kBAAkB,UAAU,OAAO;AAAA,IACjC;AAAA,EACF,EAAE;AAAA,EACF,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE;AAAA,EACjF,aAAa,UAAU,OAAO,YAAY,oCAAoC,EAAE;AAAA,EAChF,gBAAgB,UAAU,QAAQ,UAAU,MAAM,EAAE;AAAA,IAClD;AAAA,EACF,EAAE;AAAA,EACF,GAAG;AACL;AAEO,MAAM,kDACX;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,iBAAiB;AAE1B,SAA6B,qCAAqC;AA2B3D,MAAM,eAA+D,CAAC;AAEtE,MAAM,4CAAwG;AAAA,EACnH,kBAAkB,UAAU,OAAO;AAAA,IACjC;AAAA,EACF,EAAE;AAAA,EACF,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE;AAAA,EACjF,aAAa,UAAU,OAAO,YAAY,oCAAoC,EAAE;AAAA,EAChF,gBAAgB,UAAU,QAAQ,UAAU,MAAM,EAAE;AAAA,IAClD;AAAA,EACF,EAAE;AAAA,EACF,eAAe,UAAU,QAAQ,UAAU,MAAM,EAAE;AAAA,IACjD;AAAA,EACF;AAAA,EACA,GAAG;AACL;AAEO,MAAM,kDACX;",
   "names": []
 }

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

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

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

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

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

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { getAllSingleSelectIdsFromParent, getParentsByCriterias } from "./nodeGettersByCriterias.js";
-const getNewSelectionSingleSelect = (selectedItems, selectedItem) => {
+const getNewSelectionSingleSelect = (selectedNodes, selectedItem) => {
   const { oldestGroup, selectionableParentsWithSubmenu } = getParentsByCriterias(selectedItem);
   const itemsIdsToDeselect = getAllSingleSelectIdsFromParent(oldestGroup);
-  const newSelection = selectedItems.filter((item) => !itemsIdsToDeselect.includes(item.plainItem.dsId));
+  const newSelection = selectedNodes.filter((item) => !itemsIdsToDeselect.includes(item.plainItem.dsId));
   newSelection.push(...selectionableParentsWithSubmenu);
   newSelection.push(selectedItem);
   return newSelection;

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

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

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

@@ -25,7 +25,7 @@ const MultipleSelectMenuItem = ({ itemNode }) => {
       handleFocusableMenuItemNativeFocusEvent
     }
   } = React2.useContext(MenuBehaviouralContextProviderContext);
-  const { selectedItems } = propsWithDefault;
+  const { selectedNodes } = propsWithDefault;
   const gridLayout = React2.useMemo(() => {
     const cols = LeftDecComponent ? ["min-content", "min-content", "auto"] : ["min-content", "auto"];
     if (secondaryLabel) cols.push("auto");
@@ -34,7 +34,7 @@ const MultipleSelectMenuItem = ({ itemNode }) => {
   const focusedRegionPerformanceHelper = React2.useRef(focusRegion);
   focusedRegionPerformanceHelper.current = focusRegion;
   const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);
-  const isSelected = selectedItems.some((itemMarkesAsSelected) => itemMarkesAsSelected.dsId === dsId);
+  const isSelected = selectedNodes.some((itemMarkesAsSelected) => itemMarkesAsSelected.dsId === dsId);
   const handleFocusOnRender = React2.useCallback(
     (node) => {
       setTimeout(() => {

package/dist/esm/parts/DSMenuItemRendererFactory/MultipleSelectMenuItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/MultipleSelectMenuItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\n\nconst LeftBoxlessCheckbox = React.memo(({ isSelected }: { isSelected: boolean }) => (\n  <Grid width=\"16px\">{isSelected ? <Checkmark size=\"s\" color={['brand-primary', '600']} /> : <div />}</Grid>\n));\nexport const MultipleSelectMenuItem: React.ComponentType<{\n  itemNode: DSMenuButtonT.MenuNodeMultipleSelectItem;\n}> = ({ itemNode }) => {\n  const { dsId, plainItem } = itemNode;\n  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n  const {\n    focusRegion,\n    propsWithDefault,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedItems } = propsWithDefault;\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'min-content', 'auto'] : ['min-content', 'auto'];\n    if (secondaryLabel) cols.push('auto');\n    return cols;\n  }, [LeftDecComponent, secondaryLabel]);\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n\n  // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n  // useAdvancedValidation guarantees the non-null in this component\n  const isSelected = selectedItems!.some((itemMarkesAsSelected) => itemMarkesAsSelected.dsId === dsId);\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      setTimeout(() => {\n        if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n          node.focus();\n        }\n      });\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    handleFocusableMenuItemOnMouseEnter(itemNode);\n  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n  const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n    },\n    [handleFocusableMenuItemNativeFocusEvent, itemNode],\n  );\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n  return (\n    <StyledGlobalMenuItemWrapper\n      innerRef={handleFocusOnRender}\n      onKeyDown={handleFocusableMenuItemKeyDown}\n      onClick={handleFocusableMenuItemClick}\n      onMouseEnter={handleOnMouseEnter}\n      onFocus={handleOnFocus}\n      as=\"div\"\n      id={`${spacelessDsIdForDom}`}\n      tabIndex={isFocused ? 0 : -1}\n      role=\"menuitemcheckbox\"\n      aria-checked={isSelected}\n      aria-disabled={disabled}\n      applyAriaDisabled={disabled}\n    >\n      <StyledContentWrapper\n        cols={gridLayout}\n        minHeight=\"16px\"\n        gutter=\"xxs\"\n        alignItems=\"center\"\n        minWidth={minWidth ?? undefined}\n      >\n        <LeftBoxlessCheckbox isSelected={isSelected} />\n        {LeftDecComponent ? <LeftDecComponent /> : null}\n        <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n        {secondaryLabel !== undefined && (\n          <StyleMenuItemSecondaryLabel disabled={disabled}>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n        )}\n      </StyledContentWrapper>\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\n\nconst LeftBoxlessCheckbox = React.memo(({ isSelected }: { isSelected: boolean }) => (\n  <Grid width=\"16px\">{isSelected ? <Checkmark size=\"s\" color={['brand-primary', '600']} /> : <div />}</Grid>\n));\nexport const MultipleSelectMenuItem: React.ComponentType<{\n  itemNode: DSMenuButtonT.MenuNodeMultipleSelectItem;\n}> = ({ itemNode }) => {\n  const { dsId, plainItem } = itemNode;\n  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n  const {\n    focusRegion,\n    propsWithDefault,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedNodes } = propsWithDefault;\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'min-content', 'auto'] : ['min-content', 'auto'];\n    if (secondaryLabel) cols.push('auto');\n    return cols;\n  }, [LeftDecComponent, secondaryLabel]);\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n\n  // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n  // useAdvancedValidation guarantees the non-null in this component\n  const isSelected = selectedNodes!.some((itemMarkesAsSelected) => itemMarkesAsSelected.dsId === dsId);\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      setTimeout(() => {\n        if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n          node.focus();\n        }\n      });\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    handleFocusableMenuItemOnMouseEnter(itemNode);\n  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n  const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n    },\n    [handleFocusableMenuItemNativeFocusEvent, itemNode],\n  );\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n  return (\n    <StyledGlobalMenuItemWrapper\n      innerRef={handleFocusOnRender}\n      onKeyDown={handleFocusableMenuItemKeyDown}\n      onClick={handleFocusableMenuItemClick}\n      onMouseEnter={handleOnMouseEnter}\n      onFocus={handleOnFocus}\n      as=\"div\"\n      id={`${spacelessDsIdForDom}`}\n      tabIndex={isFocused ? 0 : -1}\n      role=\"menuitemcheckbox\"\n      aria-checked={isSelected}\n      aria-disabled={disabled}\n      applyAriaDisabled={disabled}\n    >\n      <StyledContentWrapper\n        cols={gridLayout}\n        minHeight=\"16px\"\n        gutter=\"xxs\"\n        alignItems=\"center\"\n        minWidth={minWidth ?? undefined}\n      >\n        <LeftBoxlessCheckbox isSelected={isSelected} />\n        {LeftDecComponent ? <LeftDecComponent /> : null}\n        <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n        {secondaryLabel !== undefined && (\n          <StyleMenuItemSecondaryLabel disabled={disabled}>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n        )}\n      </StyledContentWrapper>\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACcY,cA2E7B,YA3E6B;AAdnC,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAOA,YAAW;AAElB,SAAS,6CAA6C;AACtD,SAAS,0BAA0B;AAEnC,MAAM,sBAAsBA,OAAM,KAAK,CAAC,EAAE,WAAW,MACnD,oBAAC,QAAK,OAAM,QAAQ,uBAAa,oBAAC,aAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK,oBAAC,SAAI,GAAG,CACpG;AACM,MAAM,yBAER,CAAC,EAAE,SAAS,MAAM;AACrB,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,OAAO,gBAAgB,gBAAgB,kBAAkB,UAAU,SAAS,IAAI;AACxF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAIA,OAAM,WAAW,qCAAqC;AAC1D,QAAM,EAAE,cAAc,IAAI;AAE1B,QAAM,aAAaA,OAAM,QAAQ,MAAM;AACrC,UAAM,OAAO,mBAAmB,CAAC,eAAe,eAAe,MAAM,IAAI,CAAC,eAAe,MAAM;AAC/F,QAAI,eAAgB,MAAK,KAAK,MAAM;AACpC,WAAO;AAAA,EACT,GAAG,CAAC,kBAAkB,cAAc,CAAC;AAErC,QAAM,iCAAiCA,OAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,YAAY,gBAAgB,mBAAmB,aAAa,IAAI;AAItE,QAAM,aAAa,cAAe,KAAK,CAAC,yBAAyB,qBAAqB,SAAS,IAAI;AAEnG,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,iBAAW,MAAM;AACf,YAAI,QAAQ,gBAAgB,mBAAmB,aAAa,IAAI,GAAG;AACjE,eAAK,MAAM;AAAA,QACb;AAAA,MACF,CAAC;AAAA,IACH;AAAA;AAAA,IAEA,CAAC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA,EAIpB;AAEA,QAAM,qBAAqBA,OAAM,YAAqD,MAAM;AAC1F,wCAAoC,QAAQ;AAAA,EAC9C,GAAG,CAAC,qCAAqC,QAAQ,CAAC;AAClD,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAM;AACL,8CAAwC,UAAU,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,yCAAyC,QAAQ;AAAA,EACpD;AAEA,QAAM,sBAAsB,gBAAgB,GAAG,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MACT,cAAc;AAAA,MACd,SAAS;AAAA,MACT,IAAG;AAAA,MACH,IAAI,GAAG,mBAAmB;AAAA,MAC1B,UAAU,YAAY,IAAI;AAAA,MAC1B,MAAK;AAAA,MACL,gBAAc;AAAA,MACd,iBAAe;AAAA,MACf,mBAAmB;AAAA,MAEnB;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACV,QAAO;AAAA,UACP,YAAW;AAAA,UACX,UAAU,YAAY;AAAA,UAEtB;AAAA,gCAAC,uBAAoB,YAAwB;AAAA,YAC5C,mBAAmB,oBAAC,oBAAiB,IAAK;AAAA,YAC3C,oBAAC,sBAAoB,iBAAM;AAAA,YAC1B,mBAAmB,UAClB,oBAAC,+BAA4B,UAAqB,0BAAe;AAAA;AAAA;AAAA,MAErE;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/DSMenuItemRendererFactory/MultipleSelectWithSubmenuMenuItem.js

@@ -45,7 +45,7 @@ const MultipleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInje
       handleFocusableMenuItemNativeFocusEvent
     }
   } = React2.useContext(MenuBehaviouralContextProviderContext);
-  const { selectedItems } = propsWithDefault;
+  const { selectedNodes } = propsWithDefault;
   const gridLayout = React2.useMemo(() => {
     const cols = LeftDecComponent ? ["min-content", "min-content", "auto"] : ["min-content", "auto"];
     if (secondaryLabel) cols.push("auto");
@@ -59,8 +59,8 @@ const MultipleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInje
   const isSelected = React2.useMemo(
     // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator
     // useAdvancedValidation guarantees the non-null in this component
-    () => getIsMultipleSelectNodeWithSubmenuSelected({ itemNode, selectedItems }),
-    [itemNode, selectedItems]
+    () => getIsMultipleSelectNodeWithSubmenuSelected({ itemNode, selectedNodes }),
+    [itemNode, selectedNodes]
   );
   const handleFocusOnRender = React2.useCallback(
     (node) => {

package/dist/esm/parts/DSMenuItemRendererFactory/MultipleSelectWithSubmenuMenuItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/MultipleSelectWithSubmenuMenuItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable max-lines */\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Checkmark, ChevronSmallRight, ParenthesisRemove } from '@elliemae/ds-icons';\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { getIsMultipleSelectNodeWithSubmenuSelected } from '../DSMenuBehaviouralContextProvider/utils/multipleSelectionHelpers.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n  'right-start',\n  'right-start',\n  'right',\n  'left-start',\n  'left-end',\n  'left',\n];\nconst LeftBoxlessCheckbox = React.memo(({ isSelected }: { isSelected: boolean | 'mixed' }) => (\n  <Grid width=\"16px\">\n    {isSelected ? (\n      isSelected === 'mixed' ? (\n        <ParenthesisRemove size=\"s\" color={['brand-primary', '600']} />\n      ) : (\n        <Checkmark size=\"s\" color={['brand-primary', '600']} />\n      )\n    ) : (\n      <div />\n    )}\n  </Grid>\n));\nexport const MultipleSelectWithSubmenuMenuItem: React.ComponentType<{\n  itemNode: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem;\n  FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n  const { dsId, plainItem } = itemNode;\n  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n  const floatingContext = useFloatingContext({\n    placement: placementOrderPreference[0],\n    placementOrderPreference,\n    animationDuration: 100,\n    customOffset: [0, 0],\n  });\n  const {\n    refs: { setReference },\n  } = floatingContext;\n\n  const {\n    focusRegion,\n    propsWithDefault,\n    openedSubItems,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedItems } = propsWithDefault;\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'min-content', 'auto'] : ['min-content', 'auto'];\n    if (secondaryLabel) cols.push('auto');\n    cols.push('min-content');\n    return cols;\n  }, [LeftDecComponent, secondaryLabel]);\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n  const isSelected = React.useMemo<'mixed' | boolean>(\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 component\n    () => getIsMultipleSelectNodeWithSubmenuSelected({ itemNode, selectedItems: selectedItems! }),\n    [itemNode, selectedItems],\n  );\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      setReference(node);\n      setTimeout(() => {\n        if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n          node.focus();\n        }\n      });\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion, setReference],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    handleFocusableMenuItemOnMouseEnter(itemNode);\n  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n  const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n    },\n    [handleFocusableMenuItemNativeFocusEvent, itemNode],\n  );\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n  return (\n    <>\n      <StyledGlobalMenuItemWrapper\n        innerRef={handleFocusOnRender}\n        onKeyDown={handleFocusableMenuItemKeyDown}\n        onClick={handleFocusableMenuItemClick}\n        onMouseEnter={handleOnMouseEnter}\n        onFocus={handleOnFocus}\n        as=\"div\"\n        id={`${spacelessDsIdForDom}`}\n        tabIndex={isFocused ? 0 : -1}\n        role=\"menuitemcheckbox\"\n        aria-checked={isSelected}\n        aria-controls={\n          /* ********************************************************************************************************************\n           * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n           *    The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n           * ********************************************************************************************************************\n           * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n           *  so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n           * ******************************************************************************************************************** */\n          isExpanded\n            ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n            : undefined\n        }\n        aria-haspopup=\"menu\"\n        aria-expanded={isExpanded}\n        aria-disabled={disabled}\n        applyAriaDisabled={disabled}\n      >\n        <StyledContentWrapper\n          cols={gridLayout}\n          minHeight=\"16px\"\n          gutter=\"xxs\"\n          alignItems=\"center\"\n          minWidth={minWidth ?? undefined}\n        >\n          <LeftBoxlessCheckbox isSelected={isSelected} />\n          {LeftDecComponent ? <LeftDecComponent /> : null}\n          <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n          {secondaryLabel !== undefined && (\n            <StyleMenuItemSecondaryLabel disabled={disabled}>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n          )}\n          <ChevronSmallRight />\n        </StyledContentWrapper>\n      </StyledGlobalMenuItemWrapper>\n      <FlyoutMenuCircularDepInject\n        isMenuOpen={isExpanded}\n        floatingContext={floatingContext.context}\n        floatingStyles={floatingContext.floatingStyles}\n        setFloatingRef={floatingContext.refs.setFloating}\n        itemNode={itemNode}\n      />\n    </>\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable max-lines */\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Checkmark, ChevronSmallRight, ParenthesisRemove } from '@elliemae/ds-icons';\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { getIsMultipleSelectNodeWithSubmenuSelected } from '../DSMenuBehaviouralContextProvider/utils/multipleSelectionHelpers.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n  'right-start',\n  'right-start',\n  'right',\n  'left-start',\n  'left-end',\n  'left',\n];\nconst LeftBoxlessCheckbox = React.memo(({ isSelected }: { isSelected: boolean | 'mixed' }) => (\n  <Grid width=\"16px\">\n    {isSelected ? (\n      isSelected === 'mixed' ? (\n        <ParenthesisRemove size=\"s\" color={['brand-primary', '600']} />\n      ) : (\n        <Checkmark size=\"s\" color={['brand-primary', '600']} />\n      )\n    ) : (\n      <div />\n    )}\n  </Grid>\n));\nexport const MultipleSelectWithSubmenuMenuItem: React.ComponentType<{\n  itemNode: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem;\n  FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n  const { dsId, plainItem } = itemNode;\n  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n  const floatingContext = useFloatingContext({\n    placement: placementOrderPreference[0],\n    placementOrderPreference,\n    animationDuration: 100,\n    customOffset: [0, 0],\n  });\n  const {\n    refs: { setReference },\n  } = floatingContext;\n\n  const {\n    focusRegion,\n    propsWithDefault,\n    openedSubItems,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedNodes } = propsWithDefault;\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'min-content', 'auto'] : ['min-content', 'auto'];\n    if (secondaryLabel) cols.push('auto');\n    cols.push('min-content');\n    return cols;\n  }, [LeftDecComponent, secondaryLabel]);\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n  const isSelected = React.useMemo<'mixed' | boolean>(\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 component\n    () => getIsMultipleSelectNodeWithSubmenuSelected({ itemNode, selectedNodes: selectedNodes! }),\n    [itemNode, selectedNodes],\n  );\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      setReference(node);\n      setTimeout(() => {\n        if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n          node.focus();\n        }\n      });\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion, setReference],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    handleFocusableMenuItemOnMouseEnter(itemNode);\n  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n  const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n    },\n    [handleFocusableMenuItemNativeFocusEvent, itemNode],\n  );\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n  return (\n    <>\n      <StyledGlobalMenuItemWrapper\n        innerRef={handleFocusOnRender}\n        onKeyDown={handleFocusableMenuItemKeyDown}\n        onClick={handleFocusableMenuItemClick}\n        onMouseEnter={handleOnMouseEnter}\n        onFocus={handleOnFocus}\n        as=\"div\"\n        id={`${spacelessDsIdForDom}`}\n        tabIndex={isFocused ? 0 : -1}\n        role=\"menuitemcheckbox\"\n        aria-checked={isSelected}\n        aria-controls={\n          /* ********************************************************************************************************************\n           * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n           *    The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n           * ********************************************************************************************************************\n           * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n           *  so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n           * ******************************************************************************************************************** */\n          isExpanded\n            ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n            : undefined\n        }\n        aria-haspopup=\"menu\"\n        aria-expanded={isExpanded}\n        aria-disabled={disabled}\n        applyAriaDisabled={disabled}\n      >\n        <StyledContentWrapper\n          cols={gridLayout}\n          minHeight=\"16px\"\n          gutter=\"xxs\"\n          alignItems=\"center\"\n          minWidth={minWidth ?? undefined}\n        >\n          <LeftBoxlessCheckbox isSelected={isSelected} />\n          {LeftDecComponent ? <LeftDecComponent /> : null}\n          <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n          {secondaryLabel !== undefined && (\n            <StyleMenuItemSecondaryLabel disabled={disabled}>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n          )}\n          <ChevronSmallRight />\n        </StyledContentWrapper>\n      </StyledGlobalMenuItemWrapper>\n      <FlyoutMenuCircularDepInject\n        isMenuOpen={isExpanded}\n        floatingContext={floatingContext.context}\n        floatingStyles={floatingContext.floatingStyles}\n        setFloatingRef={floatingContext.refs.setFloating}\n        itemNode={itemNode}\n      />\n    </>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;AC8Bf,SAoFJ,UApFI,KAiHA,YAjHA;AA5BR,SAAS,0BAAuD;AAChE,SAAS,YAAY;AACrB,SAAS,WAAW,mBAAmB,yBAAyB;AAChE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAOA,YAAW;AAElB,SAAS,6CAA6C;AACtD,SAAS,0BAA0B;AAEnC,SAAS,kDAAkD;AAE3D,MAAM,2BAA+F;AAAA,EACnG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACA,MAAM,sBAAsBA,OAAM,KAAK,CAAC,EAAE,WAAW,MACnD,oBAAC,QAAK,OAAM,QACT,uBACC,eAAe,UACb,oBAAC,qBAAkB,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAE7D,oBAAC,aAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAGvD,oBAAC,SAAI,GAET,CACD;AACM,MAAM,oCAGR,CAAC,EAAE,UAAU,4BAA4B,MAAM;AAClD,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,OAAO,gBAAgB,gBAAgB,kBAAkB,UAAU,SAAS,IAAI;AACxF,QAAM,kBAAkB,mBAAmB;AAAA,IACzC,WAAW,yBAAyB,CAAC;AAAA,IACrC;AAAA,IACA,mBAAmB;AAAA,IACnB,cAAc,CAAC,GAAG,CAAC;AAAA,EACrB,CAAC;AACD,QAAM;AAAA,IACJ,MAAM,EAAE,aAAa;AAAA,EACvB,IAAI;AAEJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAIA,OAAM,WAAW,qCAAqC;AAC1D,QAAM,EAAE,cAAc,IAAI;AAE1B,QAAM,aAAaA,OAAM,QAAQ,MAAM;AACrC,UAAM,OAAO,mBAAmB,CAAC,eAAe,eAAe,MAAM,IAAI,CAAC,eAAe,MAAM;AAC/F,QAAI,eAAgB,MAAK,KAAK,MAAM;AACpC,SAAK,KAAK,aAAa;AACvB,WAAO;AAAA,EACT,GAAG,CAAC,kBAAkB,cAAc,CAAC;AAErC,QAAM,iCAAiCA,OAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,aAAa,eAAe,KAAK,CAAC,wBAAwB,oBAAoB,SAAS,IAAI;AACjG,QAAM,YAAY,gBAAgB,mBAAmB,aAAa,IAAI;AACtE,QAAM,aAAaA,OAAM;AAAA;AAAA;AAAA,IAGvB,MAAM,2CAA2C,EAAE,UAAU,cAA8B,CAAC;AAAA,IAC5F,CAAC,UAAU,aAAa;AAAA,EAC1B;AACA,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,mBAAa,IAAI;AACjB,iBAAW,MAAM;AACf,YAAI,QAAQ,gBAAgB,mBAAmB,aAAa,IAAI,GAAG;AACjE,eAAK,MAAM;AAAA,QACb;AAAA,MACF,CAAC;AAAA,IACH;AAAA;AAAA,IAEA,CAAC,MAAM,aAAa,YAAY;AAAA;AAAA;AAAA;AAAA,EAIlC;AAEA,QAAM,qBAAqBA,OAAM,YAAqD,MAAM;AAC1F,wCAAoC,QAAQ;AAAA,EAC9C,GAAG,CAAC,qCAAqC,QAAQ,CAAC;AAClD,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAM;AACL,8CAAwC,UAAU,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,yCAAyC,QAAQ;AAAA,EACpD;AAEA,QAAM,sBAAsB,gBAAgB,GAAG,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC;AACxE,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,WAAW;AAAA,QACX,SAAS;AAAA,QACT,cAAc;AAAA,QACd,SAAS;AAAA,QACT,IAAG;AAAA,QACH,IAAI,GAAG,mBAAmB;AAAA,QAC1B,UAAU,YAAY,IAAI;AAAA,QAC1B,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQE,aACI,SAAS,cAAc,IAAI,CAAC,UAAU,gBAAgB,GAAG,MAAM,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,IACpG;AAAA;AAAA,QAEN,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,mBAAmB;AAAA,QAEnB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,YACV,QAAO;AAAA,YACP,YAAW;AAAA,YACX,UAAU,YAAY;AAAA,YAEtB;AAAA,kCAAC,uBAAoB,YAAwB;AAAA,cAC5C,mBAAmB,oBAAC,oBAAiB,IAAK;AAAA,cAC3C,oBAAC,sBAAoB,iBAAM;AAAA,cAC1B,mBAAmB,UAClB,oBAAC,+BAA4B,UAAqB,0BAAe;AAAA,cAEnE,oBAAC,qBAAkB;AAAA;AAAA;AAAA,QACrB;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,YAAY;AAAA,QACZ,iBAAiB,gBAAgB;AAAA,QACjC,gBAAgB,gBAAgB;AAAA,QAChC,gBAAgB,gBAAgB,KAAK;AAAA,QACrC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
   "names": ["React"]
 }