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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { PropTypes, getPropsPerSlotPropTypes } from '@elliemae/ds-props-helpers';\nimport { DSButtonV3PropTypes } from '@elliemae/ds-button-v2';\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport type { UseDSTreeT } from '@elliemae/ds-tree-model';\n\nimport { DSMenuButtonName, MENU_BUTTON_SLOTS, type MENU_ITEMS_TYPES } from './constants/index.js';\nexport declare namespace DSMenuButtonT {\n  /* *******************************************************\n   * YURI's NOTE:\n   *\n   * This polymorphic interface \"looks similar\" between the diffent types\n   *  but it's actually different upon closer inspection\n   *\n   * If you are smarter then me, you can probably find a way to make this more DRY\n   *  but I prefeer AHA (Avoid Hasty Abstractions) that gives me an easier to mantain code\n   *   ESPECIALLY when the types are so similar but not the same & in typescript (polymorphism is hard in TS)\n   *\n   * So I'm going to keep them separate and explicit\n   *  key difference is what's required to exist and what is required to explicitly NOT exist\n   *\n   * If someone's review this and make this DRY, I'm NOT going to mantain this code moving forward\n   *   whoever makes this TS DRY will be responsible for it and own it.\n   ******************************************************* */\n\n  /* **************************************************************************************************************\n   *********************************** POLYMORPHIC INTERFACES FOR MENU ITEMS  *************************************\n   ************************************************************************************************************** */\n  export interface RootItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: 'ROOT_ITEM'; // HARDCODED BECAUSE THIS IS NOT A MENU ITEM, IT'S EXCLUSIVE TO THE ROOT NODE\n    dsId: string;\n    label?: undefined;\n    secondaryLabel?: undefined;\n    leftDecoration?: undefined;\n    minWidth?: undefined;\n    disabled?: undefined;\n    onClick?: undefined;\n    onKeyDown?: undefined;\n  }\n  export interface SeparatorItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: (typeof MENU_ITEMS_TYPES)['SEPARATOR'];\n    dsId: string;\n    label?: undefined;\n    secondaryLabel?: undefined;\n    leftDecoration?: undefined;\n    minWidth?: undefined;\n    disabled?: undefined;\n    onClick?: undefined;\n    onKeyDown?: undefined;\n  }\n  export interface ActivableItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: (typeof MENU_ITEMS_TYPES)['ACTIVABLE_ITEM'];\n    dsId: string;\n    label: string;\n    secondaryLabel?: string;\n    leftDecoration?: React.ComponentType;\n    minWidth?: string | number;\n    disabled?: boolean;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => null;\n  }\n  export interface ActionableWithSubmenuItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: (typeof MENU_ITEMS_TYPES)['ACTIVABLE_WITH_SUBMENU_ITEM'];\n    dsId: string;\n    label: string;\n    secondaryLabel?: string;\n    leftDecoration?: React.ComponentType;\n    minWidth?: string | number;\n    disabled?: boolean;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => null;\n  }\n  export interface SkeletonItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: (typeof MENU_ITEMS_TYPES)['SKELETON_ITEM'];\n    dsId: string;\n    minWidth?: string | number;\n    label?: undefined;\n    secondaryLabel?: undefined;\n    leftDecoration?: undefined;\n    disabled?: undefined;\n    onClick?: undefined;\n    onKeyDown?: undefined;\n  }\n  export interface MultipleSelectItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: (typeof MENU_ITEMS_TYPES)['MULTIPLE_SELECT_ITEM'];\n    dsId: string;\n    label: string;\n    secondaryLabel?: string;\n    leftDecoration?: React.ComponentType;\n    minWidth?: string | number;\n    disabled?: boolean;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => null;\n  }\n\n  export interface MultiSelectWithSubmenuItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: (typeof MENU_ITEMS_TYPES)['MULTIPLE_SELECT_WITH_SUBMENU_ITEM'];\n    dsId: string;\n    label: string;\n    secondaryLabel?: string;\n    leftDecoration?: React.ComponentType;\n    minWidth?: string | number;\n    disabled?: boolean;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => null;\n  }\n  export interface WithSubmenuItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: (typeof MENU_ITEMS_TYPES)['WITH_SUBMENU_ITEM'];\n    dsId: string;\n    label: string;\n    secondaryLabel?: string;\n    leftDecoration?: React.ComponentType;\n    minWidth?: string | number;\n    disabled?: boolean;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => null;\n  }\n  export interface SingleSelectItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: (typeof MENU_ITEMS_TYPES)['SINGLE_SELECT_ITEM'];\n    dsId: string;\n    label: string;\n    secondaryLabel?: string;\n    leftDecoration?: React.ComponentType;\n    minWidth?: string | number;\n    disabled?: boolean;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => null;\n  }\n  export interface SingleSelectWithSubmenuItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: (typeof MENU_ITEMS_TYPES)['SINGLE_SELECT_WITH_SUBMENU_ITEM'];\n    dsId: string;\n    label: string;\n    secondaryLabel?: string;\n    leftDecoration?: React.ComponentType;\n    minWidth?: string | number;\n    disabled?: boolean;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => null;\n  }\n\n  export interface GroupItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: (typeof MENU_ITEMS_TYPES)['GROUP'];\n    dsId: string;\n    label?: string; // if present, add a title to the group\n    leftDecoration?: React.ComponentType; // if present, a label must also be present\n    minWidth?: string | number;\n  }\n\n  export type MenuItemInterface =\n    | SeparatorItem\n    | ActivableItem\n    | ActionableWithSubmenuItem\n    | SkeletonItem\n    | MultipleSelectItem\n    | MultiSelectWithSubmenuItem\n    | WithSubmenuItem\n    | GroupItem;\n\n  export type PseudoFocusableItemInterface =\n    | ActivableItem\n    | ActionableWithSubmenuItem\n    | SkeletonItem\n    | MultipleSelectItem\n    | MultiSelectWithSubmenuItem\n    | WithSubmenuItem\n    | SingleSelectItem\n    | SingleSelectWithSubmenuItem;\n\n  /* **************************************************************************************************************\n   *************************** POLYMORPHIC INTERFACES FOR ITEMS USING DSTREE  *************************************\n   ************************************************************************************************************** */\n  // Define MenuNode types directly\n  export type MenuNodeRootItem = UseDSTreeT.TreeNode<RootItem>; // MenuNodesAllowedToHaveChildren is the only expected reference to this type\n  export type MenuNodeSeparatorItem = UseDSTreeT.TreeNode<SeparatorItem>;\n  export type MenuNodeActivableItem = UseDSTreeT.TreeNode<ActivableItem>;\n  export type MenuNodeActivableWithSubmenuItem = UseDSTreeT.TreeNode<ActionableWithSubmenuItem>;\n  export type MenuNodeSkeletonItem = UseDSTreeT.TreeNode<SkeletonItem>;\n  export type MenuNodeMultipleSelectItem = UseDSTreeT.TreeNode<MultipleSelectItem>;\n  export type MenuNodeMultipleSelectWithSubmenuItem = UseDSTreeT.TreeNode<MultiSelectWithSubmenuItem>;\n  export type MenuNodeWithSubmenuItem = UseDSTreeT.TreeNode<WithSubmenuItem>;\n  export type MenuNodeSingleSelectItem = UseDSTreeT.TreeNode<SingleSelectItem>;\n  export type MenuNodeSingleSelectWithSubmenuItem = UseDSTreeT.TreeNode<SingleSelectWithSubmenuItem>;\n  export type MenuNodeGroupItem = UseDSTreeT.TreeNode<GroupItem>;\n\n  // in the future we want to better describe the polymorphic nature of the MenuNode\n  //  having each type be able to have it's own \"subitems\" type that isn't necessarily the same as the parent\n  //  but currenctly the DS tree model typescript definitions don't support this\n  //  will be addresssed via PUI-XXXX\n  export type MenuNode =\n    // DO NOT ADD MenuNodeRootItem HERE, WILL BREAK THE SUBTREES\n    | MenuNodeSeparatorItem\n    | MenuNodeActivableItem\n    | MenuNodeActivableWithSubmenuItem\n    | MenuNodeSkeletonItem\n    | MenuNodeMultipleSelectItem\n    | MenuNodeMultipleSelectWithSubmenuItem\n    | MenuNodeWithSubmenuItem\n    | MenuNodeSingleSelectItem\n    | MenuNodeSingleSelectWithSubmenuItem\n    | MenuNodeGroupItem;\n\n  export type PseudoFocusableMenuNodes =\n    | MenuNodeActivableItem\n    | MenuNodeActivableWithSubmenuItem\n    | MenuNodeSkeletonItem\n    | MenuNodeSingleSelectItem\n    | MenuNodeMultipleSelectItem\n    | MenuNodeMultipleSelectWithSubmenuItem\n    | MenuNodeWithSubmenuItem\n    | MenuNodeSingleSelectWithSubmenuItem;\n\n  export type MenuNodesAllowedToHaveChildren =\n    | MenuNodeRootItem\n    | MenuNodeWithSubmenuItem\n    | MenuNodeGroupItem\n    | MenuNodeActivableWithSubmenuItem\n    | MenuNodeMultipleSelectWithSubmenuItem\n    | MenuNodeSingleSelectWithSubmenuItem;\n\n  export type SelectionableMenuNodes =\n    | DSMenuButtonT.MenuNodeMultipleSelectItem\n    | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem\n    | DSMenuButtonT.MenuNodeSingleSelectItem\n    | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n\n  export type MultipleSelectionableMenuNodes =\n    | DSMenuButtonT.MenuNodeMultipleSelectItem\n    | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem;\n\n  export type SingleSelectionableMenuNodes =\n    | DSMenuButtonT.MenuNodeSingleSelectItem\n    | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n\n  export type WithSubmenuMenuNodes =\n    | DSMenuButtonT.MenuNodeWithSubmenuItem\n    | DSMenuButtonT.MenuNodeActivableWithSubmenuItem\n    | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem\n    | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n\n  export type SelectionablesWithSubmenuMenuNodes =\n    | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem\n    | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n\n  /* **************************************************************************************************************\n   ********************************** PROPS/INTERNAL PROPS DEFINITIONS  *******************************************\n   ************************************************************************************************************** */\n\n  export type ItemRendererT = React.ComponentType<{ itemNode: MenuNode }>;\n\n  /* **************************************************************************************************************\n   ******************************************* \"REQUIRED\" PROPS  **************************************************\n   ************************************************************************************************************** */\n  /* *******************************************************\n   * From official source definition\n   *\n   * Menu Button Pattern\n   *  About This Pattern:\n   *    A menu button is a button\n   *      that opens a menu\n   *         (as described in the Menu and Menubar Pattern).\n   *\n   * Since the menu button is a button, it inherits all the props from the Button component.\n   * Since the menu button MUST have a menu, it also have a set of specific props used to handle the menu.\n   * Because we build with atomic composition in mind, the \"logic layer\" is separated and has a yet another set of props.\n   *\n   * This is effectively an OOP \"extension\" of the Button component,\n   *  so it has the same props,\n   *  BUT also a few more to handle the specific behavior of the menu.\n   ******************************************************* */\n  export interface MenuBehaviouralLayerRequiredProps {}\n  export interface MenuSpecificRequiredProps {}\n  /* *******************************************************\n   * Required Props + Inherited Required Props\n   *  - We inherit the required props from the button\n   *  - We add the required props for the menu\n   *\n   *  - if a collision occurs, the menu specific are meant to be the most important and specific ones\n   ******************************************************* */\n  export interface ButtonInheritedRequiredProps\n    // by using Omit, we remove the keys that are present in the MenuSpecificRequiredProps to ensure collision are handled as expected\n    extends Omit<DSButtonV3T.RequiredProps, keyof MenuSpecificRequiredProps> {}\n  // the final RequiredProps will be the combination of the two with proper collision handling\n  export interface RequiredProps\n    extends MenuSpecificRequiredProps,\n      ButtonInheritedRequiredProps,\n      MenuBehaviouralLayerRequiredProps {\n    // it's the Menu Widget sole responsibility to receive the options and convert them to a tree\n    options: MenuItemInterface[] | MenuNode;\n  }\n\n  /* **************************************************************************************************************\n   ******************************************** \"DEFAULT\" PROPS  **************************************************\n   ************************************************************************************************************** */\n  /* *******************************************************\n   * Since the menu button is a button, it inherits all the props from the Button component.\n   * Since the menu button MUST have a menu, it also have a set of specific props used to handle the menu.\n   * Because we build with atomic composition in mind, the \"logic layer\" is separated and has a yet another set of props.\n   ******************************************************* */\n  export interface MenuBehaviouralLayerDefaultProps {}\n  export interface MenuSpecifiDefaultProps {\n    onClickOutside: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n    onOptionClick: (\n      nextSelectedOptions: Record<string, boolean>,\n      clickedOption: MenuItemInterface,\n      e: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n    openedSubmenus: Record<string, boolean>;\n    onSubmenuToggle: (\n      nextOpenedSubmenus: Record<string, boolean>,\n      submenu: MenuItemInterface,\n      e: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n    isLoading: boolean;\n    isSkeleton: boolean;\n    selectedOptions: Record<string, boolean>;\n  }\n\n  /* *******************************************************\n   * Default Props + Inherited Default Props\n   *  - We inherit the default props from the button\n   *  - We add the default props for the menu\n   *\n   * - if a collision occurs, the menu specific are meant to be the most important and specific ones\n   ******************************************************* */\n  // by using Omit, we remove the keys that are present in the MenuSpecificDefaultProps to ensure collision are handled as expected\n  export interface ButtonInheiredDefaultProps extends Omit<DSButtonV3T.DefaultProps, keyof MenuSpecifiDefaultProps> {}\n  // the final DefaultProps will be the combination of the two with proper collision handling\n  export interface DefaultProps\n    extends MenuSpecifiDefaultProps,\n      ButtonInheiredDefaultProps,\n      MenuBehaviouralLayerDefaultProps {}\n\n  /* **************************************************************************************************************\n   ******************************************* \"OPTIONAL\" PROPS  **************************************************\n   ************************************************************************************************************** */\n  /* *******************************************************\n   * Since the menu button is a button, it inherits all the props from the Button component.\n   * Since the menu button MUST have a menu, it also have a set of specific props used to handle the menu.\n   * Because we build with atomic composition in mind, the \"logic layer\" is separated and has a yet another set of props.\n   ******************************************************* */\n  export interface MenuBehaviouralLayerOptionalProps {\n    // **********************************************************************************************\n    // IoC Pattern\n    //   - in scenarios where not \"selectionable\" items are present,\n    //      - the \"selectedItems\" prop is not required\n    //      - the \"onItemSelected\" prop is not required\n    //   - in scenarios where no \"activation\" items are present,\n    //      - the \"onActivateItem\" prop is not required\n    // AFAIK Typescipt doesn't support this kind of \"conditional\" required props\n    //   so we will rely on javascript error throwing to handle this + documentation\n    // **********************************************************************************************\n    selectedItems?: SelectionableMenuNodes[];\n    onItemSelected?: (\n      newSelection: SelectionableMenuNodes[],\n      metainfo: { itemNode: DSMenuButtonT.SelectionableMenuNodes; event?: React.SyntheticEvent },\n    ) => void | TypescriptHelpersT.StateSetter<DSMenuButtonT.SelectionableMenuNodes[]>;\n    onActivateItem?: (\n      itemNode: DSMenuButtonT.PseudoFocusableMenuNodes,\n      metainfo: { itemNode: DSMenuButtonT.PseudoFocusableMenuNodes; event?: React.SyntheticEvent },\n    ) => void;\n    // **********************************************************************************************\n    onOpen?: () => void;\n    onClose?: () => void;\n    onDisplayedSubmenuChange?: (\n      newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[],\n      metainfo: {\n        itemNode: DSMenuButtonT.PseudoFocusableMenuNodes | null;\n        event?: React.SyntheticEvent | FocusEvent | TouchEvent;\n      },\n    ) => void | TypescriptHelpersT.StateSetter<DSMenuButtonT.WithSubmenuMenuNodes[]>;\n  }\n  export interface MenuSpecificOptionalProps {\n    ItemRenderer?: ItemRendererT;\n  }\n  /* *******************************************************\n   * Optional Props + Inherited Optional Props\n   *  - We inherit the optional props from the button\n   *  - We add the optional props for the menu\n   *\n   * - if a collision occurs, the menu specific are meant to be the most important and specific ones\n   ******************************************************* */\n  export interface ButtonInheritedOptionalProps\n    // by using Omit, we remove the keys that are present in the MenuSpecificOptionalProps to ensure collision are handled as expected\n    extends Omit<DSButtonV3T.OptionalProps, keyof MenuSpecificOptionalProps> {}\n  export interface OptionalProps\n    extends MenuSpecificOptionalProps,\n      ButtonInheritedOptionalProps,\n      MenuBehaviouralLayerOptionalProps,\n      TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSMenuButtonName, typeof MENU_BUTTON_SLOTS> {}\n\n  /* **************************************************************************************************************\n   ************************************************  PROPS  *******************************************************\n   ************************************************************************************************************** */\n  /* *******************************************************\n   * Since the menu button is a button, it inherits all the props from the Button component.\n   * Since the menu button MUST have a menu, it also have a set of specific props used to handle the menu.\n   * Because we build with atomic composition in mind, the \"logic layer\" is separated and has a yet another set of props.\n   ******************************************************* */\n  export interface MenuBehaviouralLayerProps\n    extends Partial<MenuBehaviouralLayerDefaultProps>,\n      MenuBehaviouralLayerOptionalProps,\n      MenuBehaviouralLayerRequiredProps {}\n  export interface MenuSpecificProps\n    extends Partial<MenuSpecifiDefaultProps>,\n      MenuSpecificOptionalProps,\n      MenuSpecificRequiredProps {}\n  /* *******************************************************\n   * Props + Inherited Props\n   *  - We inherit the props from the button\n   *  - We add the props for the menu\n   *\n   * - if a collision occurs, the menu specific are meant to be the most important and specific ones\n   ******************************************************* */\n  // by using Omit, we remove the keys that are present in the MenuSpecificProps to ensure collision are handled as expected\n  //  THIS IS ALSO INHERITING THE GLOBAL ATTRIBUTES & XSTYLED PROPS FROM THE BUTTON!!!\n  export interface ButtonInheritedProps extends Omit<DSButtonV3T.Props, keyof MenuSpecificProps> {}\n\n  export interface Props\n    extends RequiredProps,\n      Partial<DefaultProps>,\n      OptionalProps,\n      // the global and xstyled props are only part of \"props\"/\"internalProps\" in our namespaces\n      //  to properly inherith button's global & xstyled props, we need to also include the following\n      Omit<DSButtonV3T.Props, keyof RequiredProps | keyof DefaultProps | keyof OptionalProps> {}\n\n  /* **************************************************************************************************************\n   ******************************************** INTERNAL PROPS  ***************************************************\n   ************************************************************************************************************** */\n  /* *******************************************************\n   * Since the menu button is a button, it inherits all the props from the Button component.\n   * Since the menu button MUST have a menu, it also have a set of specific props used to handle the menu.\n   * Because we build with atomic composition in mind, the \"logic layer\" is separated and has a yet another set of props.\n   ******************************************************* */\n  export interface MenuBehaviouralLayerInternalProps\n    extends MenuBehaviouralLayerDefaultProps,\n      MenuBehaviouralLayerOptionalProps,\n      MenuBehaviouralLayerRequiredProps {}\n  export interface MenuSpecificInternalProps\n    extends MenuSpecifiDefaultProps,\n      MenuSpecificOptionalProps,\n      MenuSpecificRequiredProps {}\n\n  /* *******************************************************\n   * Internal Props\n   *  - We inherit the internal props from the button\n   *  - We add the internal props for the menu\n   *\n   * - if a collision occurs, the menu specific are meant to be the most important and specific ones\n   ******************************************************* */\n  export interface ButtonInheritedInternalProps\n    // by using Omit, we remove the keys that are present in the MenuSpecificInternalProps to ensure collision are handled as expected\n    //  THIS IS ALSO INHERITING THE GLOBAL ATTRIBUTES & XSTYLED PROPS FROM THE BUTTON!!!\n    extends Omit<DSButtonV3T.InternalProps, keyof MenuSpecificInternalProps> {}\n  export interface InternalProps\n    extends RequiredProps,\n      DefaultProps,\n      OptionalProps,\n      // the global and xstyled props are only part of \"props\"/\"internalProps\" in our namespaces\n      //  to properly inherith button's global & xstyled props, we need to also include the following\n      Omit<DSButtonV3T.Props, keyof RequiredProps | keyof DefaultProps | keyof OptionalProps> {}\n}\n\nexport const defaultProps: DSMenuButtonT.MenuSpecifiDefaultProps = {\n  selectedOptions: {},\n  onClickOutside: () => null,\n  onOptionClick: () => null,\n  openedSubmenus: {},\n  onSubmenuToggle: () => null,\n  isLoading: false,\n  isSkeleton: false,\n};\n/* *******************************************************\n * We are building a widget composed of 3 ATOMIC composition components\n * - Button\n * - Menu\n * - Behavioural Layer\n * The final API facing the users is a sum of all 3 interfaces\n * THOSE INTERFACES ARE NOT EQUAL TO THE FINAL \"PARTS\" INTERFACES\n *   The widget embeds \"assumptions\" (as all widgets do) that are AGNOSTIC to the \"parts\" interfaces\n * The \"Parts\" interfaces \"mostly\" inherit the following interfaces, but with meaningful meant and planned differences\n * (E.G. the widget accepts an array of options, but the Menu part accepts a DSTree only)\n ******************************************************* */\nexport const MenuBehaviouralLayerPropTypes: DSPropTypesSchema<DSMenuButtonT.MenuBehaviouralLayerProps> = {\n  selectedItems: 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  onItemSelected: PropTypes.func.description(\n    'IoC function in charge of handling the selection of a menu item, required if the menu has selectionable items',\n  ).signature(`((\n      newSelection: DSMenuButtonT.PseudoFocusableMenuNodes[],\n      metainfo: { itemNode: DSMenuButtonT.PseudoFocusableMenuNodes; event?: React.SyntheticEvent },\n    ) => void)`),\n\n  onActivateItem: PropTypes.func.description(\n    'IoC function in charge of handling the activation (NOT INVOKED ON SELECTION) of a menu item, required if the menu has activable items',\n  ).signature(`((\n      itemNode: DSMenuButtonT.PseudoFocusableMenuNodes,\n      metainfo: { itemNode: DSMenuButtonT.PseudoFocusableMenuNodes; event?: React.SyntheticEvent },\n    ) => void)`),\n\n  onOpen: PropTypes.func.description('function triggered when the widget opens the menu').signature(`(()=>void)`),\n  onClose: PropTypes.func.description('function triggered when the widget closes the menu').signature(`(()=>void)`),\n  onDisplayedSubmenuChange: PropTypes.func.description(\"function triggered when the widget's closes or opens a submenu\")\n    .signature(`((\n      newOpenedItems: DSMenuButtonT.PseudoFocusableMenuNodes[],\n      metainfo: { itemNode: DSMenuButtonT.PseudoFocusableMenuNodes; event?: React.SyntheticEvent },\n    ) => void)`),\n};\n\nexport const DSMenuSpecificPropTypes: DSPropTypesSchema<DSMenuButtonT.MenuSpecificProps> = {\n  ItemRenderer: PropTypes.node.description('Component to be used to render the items'),\n  onClickOutside: PropTypes.func\n    .description('Callback executed when you click outside the dropdown menu, or press the Esc key')\n    .defaultValue(() => null),\n  selectedOptions: PropTypes.object\n    .description(\n      'Object with the ids of the options as keys, and booleans as keys. Represents the state of the current selection in the dropdown menu',\n    )\n    .defaultValue({}),\n  onOptionClick: PropTypes.func\n    .description(\n      'Callback triggered when an item is clicked or pressed. We provide the next selected options, the clicked option and the event, in that order',\n    )\n    .defaultValue(() => null),\n  openedSubmenus: PropTypes.object\n    .description(\n      'Object with the ids of the submenus as keys, and booleans as keys. Represents the state of the current opened submenus',\n    )\n    .defaultValue({}),\n  onSubmenuToggle: PropTypes.func\n    .description('Callback triggered when a submenu is opened or closed.')\n    .signature(\n      '((nextOpenedSubmenus: Record<string, boolean>, submenu: Item, e: React.MouseEvent | React.KeyboardEvent) => void)',\n    )\n    .defaultValue(() => null),\n  isLoading: PropTypes.bool\n    .description('Whether the flyout menu should render the loading indicator')\n    .defaultValue(false),\n  isSkeleton: PropTypes.bool.description('Whether the flyout menu should render the skeleton').defaultValue(false),\n};\n\nexport const DSMenuButtonPropTypes: DSPropTypesSchema<DSMenuButtonT.Props> = {\n  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).description(\n    'Array of options to display in the menu or a DSTree node to build branches from',\n  ).isRequired,\n  ...DSButtonV3PropTypes,\n  ...MenuBehaviouralLayerPropTypes,\n  ...DSMenuSpecificPropTypes,\n  ...getPropsPerSlotPropTypes(DSMenuButtonName, MENU_BUTTON_SLOTS),\n};\n\nexport const DSMenuButtonPropTypesSchema = DSMenuButtonPropTypes as unknown as ValidationMap<DSMenuButtonT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAoD;AACpD,0BAAoC;AAMpC,uBAA2E;AAwcpE,MAAM,eAAsD;AAAA,EACjE,iBAAiB,CAAC;AAAA,EAClB,gBAAgB,MAAM;AAAA,EACtB,eAAe,MAAM;AAAA,EACrB,gBAAgB,CAAC;AAAA,EACjB,iBAAiB,MAAM;AAAA,EACvB,WAAW;AAAA,EACX,YAAY;AACd;AAYO,MAAM,gCAA4F;AAAA,EACvG,eAAe,kCAAU,QAAQ,kCAAU,MAAM,EAAE;AAAA,IACjD;AAAA,EACF;AAAA,EACA,gBAAgB,kCAAU,KAAK;AAAA,IAC7B;AAAA,EACF,EAAE,UAAU;AAAA;AAAA;AAAA,eAGC;AAAA,EAEb,gBAAgB,kCAAU,KAAK;AAAA,IAC7B;AAAA,EACF,EAAE,UAAU;AAAA;AAAA;AAAA,eAGC;AAAA,EAEb,QAAQ,kCAAU,KAAK,YAAY,mDAAmD,EAAE,UAAU,YAAY;AAAA,EAC9G,SAAS,kCAAU,KAAK,YAAY,oDAAoD,EAAE,UAAU,YAAY;AAAA,EAChH,0BAA0B,kCAAU,KAAK,YAAY,gEAAgE,EAClH,UAAU;AAAA;AAAA;AAAA,eAGA;AACf;AAEO,MAAM,0BAA8E;AAAA,EACzF,cAAc,kCAAU,KAAK,YAAY,0CAA0C;AAAA,EACnF,gBAAgB,kCAAU,KACvB,YAAY,kFAAkF,EAC9F,aAAa,MAAM,IAAI;AAAA,EAC1B,iBAAiB,kCAAU,OACxB;AAAA,IACC;AAAA,EACF,EACC,aAAa,CAAC,CAAC;AAAA,EAClB,eAAe,kCAAU,KACtB;AAAA,IACC;AAAA,EACF,EACC,aAAa,MAAM,IAAI;AAAA,EAC1B,gBAAgB,kCAAU,OACvB;AAAA,IACC;AAAA,EACF,EACC,aAAa,CAAC,CAAC;AAAA,EAClB,iBAAiB,kCAAU,KACxB,YAAY,wDAAwD,EACpE;AAAA,IACC;AAAA,EACF,EACC,aAAa,MAAM,IAAI;AAAA,EAC1B,WAAW,kCAAU,KAClB,YAAY,6DAA6D,EACzE,aAAa,KAAK;AAAA,EACrB,YAAY,kCAAU,KAAK,YAAY,oDAAoD,EAAE,aAAa,KAAK;AACjH;AAEO,MAAM,wBAAgE;AAAA,EAC3E,SAAS,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EAAE;AAAA,IAChE;AAAA,EACF,EAAE;AAAA,EACF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAG,kDAAyB,mCAAkB,kCAAiB;AACjE;AAEO,MAAM,8BAA8B;",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { PropTypes, getPropsPerSlotPropTypes } from '@elliemae/ds-props-helpers';\nimport { DSButtonV3PropTypes } from '@elliemae/ds-button-v2';\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport type { UseDSTreeT } from '@elliemae/ds-tree-model';\n\nimport { DSMenuButtonName, MENU_BUTTON_SLOTS, type MENU_ITEMS_TYPES } from './constants/index.js';\nexport declare namespace DSMenuButtonT {\n  /* *******************************************************\n   * YURI's NOTE:\n   *\n   * This polymorphic interface \"looks similar\" between the diffent types\n   *  but it's actually different upon closer inspection\n   *\n   * If you are smarter then me, you can probably find a way to make this more DRY\n   *  but I prefeer AHA (Avoid Hasty Abstractions) that gives me an easier to mantain code\n   *   ESPECIALLY when the types are so similar but not the same & in typescript (polymorphism is hard in TS)\n   *\n   * So I'm going to keep them separate and explicit\n   *  key difference is what's required to exist and what is required to explicitly NOT exist\n   *\n   * If someone's review this and make this DRY, I'm NOT going to mantain this code moving forward\n   *   whoever makes this TS DRY will be responsible for it and own it.\n   ******************************************************* */\n\n  /* **************************************************************************************************************\n   *********************************** POLYMORPHIC INTERFACES FOR MENU ITEMS  *************************************\n   ************************************************************************************************************** */\n  export interface RootItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: 'ROOT_ITEM'; // HARDCODED BECAUSE THIS IS NOT A MENU ITEM, IT'S EXCLUSIVE TO THE ROOT NODE\n    dsId: string;\n    label?: undefined;\n    secondaryLabel?: undefined;\n    leftDecoration?: undefined;\n    minWidth?: undefined;\n    disabled?: undefined;\n    onClick?: undefined;\n    onKeyDown?: undefined;\n  }\n  export interface SeparatorItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: (typeof MENU_ITEMS_TYPES)['SEPARATOR'];\n    dsId: string;\n    label?: undefined;\n    secondaryLabel?: undefined;\n    leftDecoration?: undefined;\n    minWidth?: undefined;\n    disabled?: undefined;\n    onClick?: undefined;\n    onKeyDown?: undefined;\n  }\n  export interface ActivableItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: (typeof MENU_ITEMS_TYPES)['ACTIVABLE_ITEM'];\n    dsId: string;\n    label: string;\n    secondaryLabel?: string;\n    leftDecoration?: React.ComponentType;\n    minWidth?: string | number;\n    disabled?: boolean;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => null;\n  }\n  export interface ActionableWithSubmenuItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: (typeof MENU_ITEMS_TYPES)['ACTIVABLE_WITH_SUBMENU_ITEM'];\n    dsId: string;\n    label: string;\n    secondaryLabel?: string;\n    leftDecoration?: React.ComponentType;\n    minWidth?: string | number;\n    disabled?: boolean;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => null;\n  }\n  export interface SkeletonItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: (typeof MENU_ITEMS_TYPES)['SKELETON_ITEM'];\n    dsId: string;\n    minWidth?: string | number;\n    label?: undefined;\n    secondaryLabel?: undefined;\n    leftDecoration?: undefined;\n    disabled?: undefined;\n    onClick?: undefined;\n    onKeyDown?: undefined;\n  }\n  export interface MultipleSelectItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: (typeof MENU_ITEMS_TYPES)['MULTIPLE_SELECT_ITEM'];\n    dsId: string;\n    label: string;\n    secondaryLabel?: string;\n    leftDecoration?: React.ComponentType;\n    minWidth?: string | number;\n    disabled?: boolean;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => null;\n  }\n\n  export interface MultiSelectWithSubmenuItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: (typeof MENU_ITEMS_TYPES)['MULTIPLE_SELECT_WITH_SUBMENU_ITEM'];\n    dsId: string;\n    label: string;\n    secondaryLabel?: string;\n    leftDecoration?: React.ComponentType;\n    minWidth?: string | number;\n    disabled?: boolean;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => null;\n  }\n  export interface WithSubmenuItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: (typeof MENU_ITEMS_TYPES)['WITH_SUBMENU_ITEM'];\n    dsId: string;\n    label: string;\n    secondaryLabel?: string;\n    leftDecoration?: React.ComponentType;\n    minWidth?: string | number;\n    disabled?: boolean;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => null;\n  }\n  export interface SingleSelectItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: (typeof MENU_ITEMS_TYPES)['SINGLE_SELECT_ITEM'];\n    dsId: string;\n    label: string;\n    secondaryLabel?: string;\n    leftDecoration?: React.ComponentType;\n    minWidth?: string | number;\n    disabled?: boolean;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => null;\n  }\n  export interface SingleSelectWithSubmenuItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: (typeof MENU_ITEMS_TYPES)['SINGLE_SELECT_WITH_SUBMENU_ITEM'];\n    dsId: string;\n    label: string;\n    secondaryLabel?: string;\n    leftDecoration?: React.ComponentType;\n    minWidth?: string | number;\n    disabled?: boolean;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => null;\n  }\n\n  export interface GroupItem extends UseDSTreeT.AnyObjectWithoutReservedKeys {\n    type: (typeof MENU_ITEMS_TYPES)['GROUP'];\n    dsId: string;\n    label?: string; // if present, add a title to the group\n    leftDecoration?: React.ComponentType; // if present, a label must also be present\n    minWidth?: string | number;\n  }\n\n  export type MenuItemInterface =\n    | SeparatorItem\n    | ActivableItem\n    | ActionableWithSubmenuItem\n    | SkeletonItem\n    | MultipleSelectItem\n    | MultiSelectWithSubmenuItem\n    | WithSubmenuItem\n    | GroupItem;\n\n  export type PseudoFocusableItemInterface =\n    | ActivableItem\n    | ActionableWithSubmenuItem\n    | SkeletonItem\n    | MultipleSelectItem\n    | MultiSelectWithSubmenuItem\n    | WithSubmenuItem\n    | SingleSelectItem\n    | SingleSelectWithSubmenuItem;\n\n  export type SelectionableMenuItemInterface =\n    | MultipleSelectItem\n    | MultiSelectWithSubmenuItem\n    | SingleSelectItem\n    | SingleSelectWithSubmenuItem;\n\n  /* **************************************************************************************************************\n   *************************** POLYMORPHIC INTERFACES FOR ITEMS USING DSTREE  *************************************\n   ************************************************************************************************************** */\n  // Define MenuNode types directly\n  export type MenuNodeRootItem = UseDSTreeT.TreeNode<RootItem>; // MenuNodesAllowedToHaveChildren is the only expected reference to this type\n  export type MenuNodeSeparatorItem = UseDSTreeT.TreeNode<SeparatorItem>;\n  export type MenuNodeActivableItem = UseDSTreeT.TreeNode<ActivableItem>;\n  export type MenuNodeActivableWithSubmenuItem = UseDSTreeT.TreeNode<ActionableWithSubmenuItem>;\n  export type MenuNodeSkeletonItem = UseDSTreeT.TreeNode<SkeletonItem>;\n  export type MenuNodeMultipleSelectItem = UseDSTreeT.TreeNode<MultipleSelectItem>;\n  export type MenuNodeMultipleSelectWithSubmenuItem = UseDSTreeT.TreeNode<MultiSelectWithSubmenuItem>;\n  export type MenuNodeWithSubmenuItem = UseDSTreeT.TreeNode<WithSubmenuItem>;\n  export type MenuNodeSingleSelectItem = UseDSTreeT.TreeNode<SingleSelectItem>;\n  export type MenuNodeSingleSelectWithSubmenuItem = UseDSTreeT.TreeNode<SingleSelectWithSubmenuItem>;\n  export type MenuNodeGroupItem = UseDSTreeT.TreeNode<GroupItem>;\n\n  // in the future we want to better describe the polymorphic nature of the MenuNode\n  //  having each type be able to have it's own \"subitems\" type that isn't necessarily the same as the parent\n  //  but currenctly the DS tree model typescript definitions don't support this\n  //  will be addresssed via PUI-XXXX\n  export type MenuNode =\n    // DO NOT ADD MenuNodeRootItem HERE, WILL BREAK THE SUBTREES\n    | MenuNodeSeparatorItem\n    | MenuNodeActivableItem\n    | MenuNodeActivableWithSubmenuItem\n    | MenuNodeSkeletonItem\n    | MenuNodeMultipleSelectItem\n    | MenuNodeMultipleSelectWithSubmenuItem\n    | MenuNodeWithSubmenuItem\n    | MenuNodeSingleSelectItem\n    | MenuNodeSingleSelectWithSubmenuItem\n    | MenuNodeGroupItem;\n\n  export type PseudoFocusableMenuNodes =\n    | MenuNodeActivableItem\n    | MenuNodeActivableWithSubmenuItem\n    | MenuNodeSkeletonItem\n    | MenuNodeSingleSelectItem\n    | MenuNodeMultipleSelectItem\n    | MenuNodeMultipleSelectWithSubmenuItem\n    | MenuNodeWithSubmenuItem\n    | MenuNodeSingleSelectWithSubmenuItem;\n\n  export type MenuNodesAllowedToHaveChildren =\n    | MenuNodeRootItem\n    | MenuNodeWithSubmenuItem\n    | MenuNodeGroupItem\n    | MenuNodeActivableWithSubmenuItem\n    | MenuNodeMultipleSelectWithSubmenuItem\n    | MenuNodeSingleSelectWithSubmenuItem;\n\n  export type SelectionableMenuNodes =\n    | DSMenuButtonT.MenuNodeMultipleSelectItem\n    | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem\n    | DSMenuButtonT.MenuNodeSingleSelectItem\n    | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n\n  export type MultipleSelectionableMenuNodes =\n    | DSMenuButtonT.MenuNodeMultipleSelectItem\n    | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem;\n\n  export type SingleSelectionableMenuNodes =\n    | DSMenuButtonT.MenuNodeSingleSelectItem\n    | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n\n  export type WithSubmenuMenuNodes =\n    | DSMenuButtonT.MenuNodeWithSubmenuItem\n    | DSMenuButtonT.MenuNodeActivableWithSubmenuItem\n    | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem\n    | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n\n  export type SelectionablesWithSubmenuMenuNodes =\n    | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem\n    | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n\n  /* **************************************************************************************************************\n   ********************************** PROPS/INTERNAL PROPS DEFINITIONS  *******************************************\n   ************************************************************************************************************** */\n\n  export type ItemRendererT = React.ComponentType<{ itemNode: MenuNode }>;\n\n  /* **************************************************************************************************************\n   ******************************************* \"REQUIRED\" PROPS  **************************************************\n   ************************************************************************************************************** */\n  /* *******************************************************\n   * From official source definition\n   *\n   * Menu Button Pattern\n   *  About This Pattern:\n   *    A menu button is a button\n   *      that opens a menu\n   *         (as described in the Menu and Menubar Pattern).\n   *\n   * Since the menu button is a button, it inherits all the props from the Button component.\n   * Since the menu button MUST have a menu, it also have a set of specific props used to handle the menu.\n   * Because we build with atomic composition in mind, the \"logic layer\" is separated and has a yet another set of props.\n   *\n   * This is effectively an OOP \"extension\" of the Button component,\n   *  so it has the same props,\n   *  BUT also a few more to handle the specific behavior of the menu.\n   ******************************************************* */\n  export interface MenuBehaviouralLayerRequiredProps {}\n  export interface MenuSpecificRequiredProps {}\n  /* *******************************************************\n   * Required Props + Inherited Required Props\n   *  - We inherit the required props from the button\n   *  - We add the required props for the menu\n   *\n   *  - if a collision occurs, the menu specific are meant to be the most important and specific ones\n   ******************************************************* */\n  export interface ButtonInheritedRequiredProps\n    // by using Omit, we remove the keys that are present in the MenuSpecificRequiredProps to ensure collision are handled as expected\n    extends Omit<DSButtonV3T.RequiredProps, keyof MenuSpecificRequiredProps> {}\n  // the final RequiredProps will be the combination of the two with proper collision handling\n  export interface RequiredProps\n    extends MenuSpecificRequiredProps,\n      ButtonInheritedRequiredProps,\n      MenuBehaviouralLayerRequiredProps {\n    // it's the Menu Widget sole responsibility to receive the options and convert them to a tree\n    options: MenuItemInterface[] | MenuNode;\n  }\n\n  /* **************************************************************************************************************\n   ******************************************** \"DEFAULT\" PROPS  **************************************************\n   ************************************************************************************************************** */\n  /* *******************************************************\n   * Since the menu button is a button, it inherits all the props from the Button component.\n   * Since the menu button MUST have a menu, it also have a set of specific props used to handle the menu.\n   * Because we build with atomic composition in mind, the \"logic layer\" is separated and has a yet another set of props.\n   ******************************************************* */\n  export interface MenuBehaviouralLayerDefaultProps {}\n  export interface MenuSpecifiDefaultProps {\n    onClickOutside: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n    onOptionClick: (\n      nextSelectedOptions: Record<string, boolean>,\n      clickedOption: MenuItemInterface,\n      e: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n    openedSubmenus: Record<string, boolean>;\n    onSubmenuToggle: (\n      nextOpenedSubmenus: Record<string, boolean>,\n      submenu: MenuItemInterface,\n      e: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n    isLoading: boolean;\n    isSkeleton: boolean;\n  }\n\n  /* *******************************************************\n   * Default Props + Inherited Default Props\n   *  - We inherit the default props from the button\n   *  - We add the default props for the menu\n   *\n   * - if a collision occurs, the menu specific are meant to be the most important and specific ones\n   ******************************************************* */\n  // by using Omit, we remove the keys that are present in the MenuSpecificDefaultProps to ensure collision are handled as expected\n  export interface ButtonInheiredDefaultProps extends Omit<DSButtonV3T.DefaultProps, keyof MenuSpecifiDefaultProps> {}\n  // the final DefaultProps will be the combination of the two with proper collision handling\n  export interface DefaultProps\n    extends MenuSpecifiDefaultProps,\n      ButtonInheiredDefaultProps,\n      MenuBehaviouralLayerDefaultProps {}\n\n  /* **************************************************************************************************************\n   ******************************************* \"OPTIONAL\" PROPS  **************************************************\n   ************************************************************************************************************** */\n  /* *******************************************************\n   * Since the menu button is a button, it inherits all the props from the Button component.\n   * Since the menu button MUST have a menu, it also have a set of specific props used to handle the menu.\n   * Because we build with atomic composition in mind, the \"logic layer\" is separated and has a yet another set of props.\n   ******************************************************* */\n  export interface MenuBehaviouralLayerOptionalProps {\n    // **********************************************************************************************\n    // IoC Pattern\n    //   - in scenarios where not \"selectionable\" items are present,\n    //      - the \"selectedItems\" prop is not required\n    //      - the \"onItemSelected\" prop is not required\n    //   - in scenarios where no \"activation\" items are present,\n    //      - the \"onActivateItem\" prop is not required\n    // AFAIK Typescipt doesn't support this kind of \"conditional\" required props\n    //   so we will rely on javascript error throwing to handle this + documentation\n    // **********************************************************************************************\n    onItemSelected?: (\n      newSelection: SelectionableMenuNodes[],\n      metainfo: { itemNode: DSMenuButtonT.SelectionableMenuNodes; event?: React.SyntheticEvent },\n    ) => void | TypescriptHelpersT.StateSetter<DSMenuButtonT.SelectionableMenuNodes[]>;\n    onActivateItem?: (\n      itemNode: DSMenuButtonT.PseudoFocusableMenuNodes,\n      metainfo: { itemNode: DSMenuButtonT.PseudoFocusableMenuNodes; event?: React.SyntheticEvent },\n    ) => void;\n    // **********************************************************************************************\n    onOpen?: () => void;\n    onClose?: () => void;\n    onDisplayedSubmenuChange?: (\n      newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[],\n      metainfo: {\n        itemNode: DSMenuButtonT.PseudoFocusableMenuNodes | null;\n        event?: React.SyntheticEvent | FocusEvent | TouchEvent;\n      },\n    ) => void | TypescriptHelpersT.StateSetter<DSMenuButtonT.WithSubmenuMenuNodes[]>;\n  }\n  export interface MenuSpecificOptionalProps {\n    ItemRenderer?: ItemRendererT;\n  }\n  /* *******************************************************\n   * Optional Props + Inherited Optional Props\n   *  - We inherit the optional props from the button\n   *  - We add the optional props for the menu\n   *\n   * - if a collision occurs, the menu specific are meant to be the most important and specific ones\n   ******************************************************* */\n  export interface ButtonInheritedOptionalProps\n    // by using Omit, we remove the keys that are present in the MenuSpecificOptionalProps to ensure collision are handled as expected\n    extends Omit<DSButtonV3T.OptionalProps, keyof MenuSpecificOptionalProps> {}\n  export interface OptionalProps\n    extends MenuSpecificOptionalProps,\n      ButtonInheritedOptionalProps,\n      // we convert the (selected) options to a Nodes as part of the widget's logic\n      MenuBehaviouralLayerOptionalProps,\n      TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSMenuButtonName, typeof MENU_BUTTON_SLOTS> {\n    // we convert the (selected) options to a Nodes as part of the widget's logic\n    selectedItems?: SelectionableMenuNodes[] | SelectionableMenuItemInterface[];\n  }\n\n  /* **************************************************************************************************************\n   ************************************************  PROPS  *******************************************************\n   ************************************************************************************************************** */\n  /* *******************************************************\n   * Since the menu button is a button, it inherits all the props from the Button component.\n   * Since the menu button MUST have a menu, it also have a set of specific props used to handle the menu.\n   * Because we build with atomic composition in mind, the \"logic layer\" is separated and has a yet another set of props.\n   ******************************************************* */\n  export interface MenuBehaviouralLayerProps\n    extends Partial<MenuBehaviouralLayerDefaultProps>,\n      MenuBehaviouralLayerOptionalProps,\n      MenuBehaviouralLayerRequiredProps {}\n  export interface MenuSpecificProps\n    extends Partial<MenuSpecifiDefaultProps>,\n      MenuSpecificOptionalProps,\n      MenuSpecificRequiredProps {}\n  /* *******************************************************\n   * Props + Inherited Props\n   *  - We inherit the props from the button\n   *  - We add the props for the menu\n   *\n   * - if a collision occurs, the menu specific are meant to be the most important and specific ones\n   ******************************************************* */\n  // by using Omit, we remove the keys that are present in the MenuSpecificProps to ensure collision are handled as expected\n  //  THIS IS ALSO INHERITING THE GLOBAL ATTRIBUTES & XSTYLED PROPS FROM THE BUTTON!!!\n  export interface ButtonInheritedProps extends Omit<DSButtonV3T.Props, keyof MenuSpecificProps> {}\n\n  export interface Props\n    extends RequiredProps,\n      Partial<DefaultProps>,\n      OptionalProps,\n      // the global and xstyled props are only part of \"props\"/\"internalProps\" in our namespaces\n      //  to properly inherith button's global & xstyled props, we need to also include the following\n      Omit<DSButtonV3T.Props, keyof RequiredProps | keyof DefaultProps | keyof OptionalProps> {}\n\n  /* **************************************************************************************************************\n   ******************************************** INTERNAL PROPS  ***************************************************\n   ************************************************************************************************************** */\n  /* *******************************************************\n   * Since the menu button is a button, it inherits all the props from the Button component.\n   * Since the menu button MUST have a menu, it also have a set of specific props used to handle the menu.\n   * Because we build with atomic composition in mind, the \"logic layer\" is separated and has a yet another set of props.\n   ******************************************************* */\n  export interface MenuBehaviouralLayerInternalProps\n    extends MenuBehaviouralLayerDefaultProps,\n      MenuBehaviouralLayerOptionalProps,\n      MenuBehaviouralLayerRequiredProps {}\n  export interface MenuSpecificInternalProps\n    extends MenuSpecifiDefaultProps,\n      MenuSpecificOptionalProps,\n      MenuSpecificRequiredProps {}\n\n  /* *******************************************************\n   * Internal Props\n   *  - We inherit the internal props from the button\n   *  - We add the internal props for the menu\n   *\n   * - if a collision occurs, the menu specific are meant to be the most important and specific ones\n   ******************************************************* */\n  export interface ButtonInheritedInternalProps\n    // by using Omit, we remove the keys that are present in the MenuSpecificInternalProps to ensure collision are handled as expected\n    //  THIS IS ALSO INHERITING THE GLOBAL ATTRIBUTES & XSTYLED PROPS FROM THE BUTTON!!!\n    extends Omit<DSButtonV3T.InternalProps, keyof MenuSpecificInternalProps> {}\n  export interface InternalProps\n    extends RequiredProps,\n      DefaultProps,\n      OptionalProps,\n      // the global and xstyled props are only part of \"props\"/\"internalProps\" in our namespaces\n      //  to properly inherith button's global & xstyled props, we need to also include the following\n      Omit<DSButtonV3T.Props, keyof RequiredProps | keyof DefaultProps | keyof OptionalProps> {}\n}\n\nexport const defaultProps: DSMenuButtonT.MenuSpecifiDefaultProps = {\n  onClickOutside: () => null,\n  onOptionClick: () => null,\n  openedSubmenus: {},\n  onSubmenuToggle: () => null,\n  isLoading: false,\n  isSkeleton: false,\n};\n/* *******************************************************\n * We are building a widget composed of 3 ATOMIC composition components\n * - Button\n * - Menu\n * - Behavioural Layer\n * The final API facing the users is a sum of all 3 interfaces\n * THOSE INTERFACES ARE NOT EQUAL TO THE FINAL \"PARTS\" INTERFACES\n *   The widget embeds \"assumptions\" (as all widgets do) that are AGNOSTIC to the \"parts\" interfaces\n * The \"Parts\" interfaces \"mostly\" inherit the following interfaces, but with meaningful meant and planned differences\n * (E.G. the widget accepts an array of options, but the Menu part accepts a DSTree only)\n ******************************************************* */\nexport const MenuBehaviouralLayerPropTypes: DSPropTypesSchema<DSMenuButtonT.MenuBehaviouralLayerProps> = {\n  onItemSelected: PropTypes.func.description(\n    'IoC function in charge of handling the selection of a menu item, required if the menu has selectionable items',\n  ).signature(`((\n      newSelection: DSMenuButtonT.PseudoFocusableMenuNodes[],\n      metainfo: { itemNode: DSMenuButtonT.PseudoFocusableMenuNodes; event?: React.SyntheticEvent },\n    ) => void)`),\n\n  onActivateItem: PropTypes.func.description(\n    'IoC function in charge of handling the activation (NOT INVOKED ON SELECTION) of a menu item, required if the menu has activable items',\n  ).signature(`((\n      itemNode: DSMenuButtonT.PseudoFocusableMenuNodes,\n      metainfo: { itemNode: DSMenuButtonT.PseudoFocusableMenuNodes; event?: React.SyntheticEvent },\n    ) => void)`),\n\n  onOpen: PropTypes.func.description('function triggered when the widget opens the menu').signature(`(()=>void)`),\n  onClose: PropTypes.func.description('function triggered when the widget closes the menu').signature(`(()=>void)`),\n  onDisplayedSubmenuChange: PropTypes.func.description(\"function triggered when the widget's closes or opens a submenu\")\n    .signature(`((\n      newOpenedItems: DSMenuButtonT.PseudoFocusableMenuNodes[],\n      metainfo: { itemNode: DSMenuButtonT.PseudoFocusableMenuNodes; event?: React.SyntheticEvent },\n    ) => void)`),\n};\n\nexport const DSMenuSpecificPropTypes: DSPropTypesSchema<DSMenuButtonT.MenuSpecificProps> = {\n  ItemRenderer: PropTypes.node.description('Component to be used to render the items'),\n  onClickOutside: PropTypes.func\n    .description('Callback executed when you click outside the dropdown menu, or press the Esc key')\n    .defaultValue(() => null),\n  onOptionClick: PropTypes.func\n    .description(\n      'Callback triggered when an item is clicked or pressed. We provide the next selected options, the clicked option and the event, in that order',\n    )\n    .defaultValue(() => null),\n  openedSubmenus: PropTypes.object\n    .description(\n      'Object with the ids of the submenus as keys, and booleans as keys. Represents the state of the current opened submenus',\n    )\n    .defaultValue({}),\n  onSubmenuToggle: PropTypes.func\n    .description('Callback triggered when a submenu is opened or closed.')\n    .signature(\n      '((nextOpenedSubmenus: Record<string, boolean>, submenu: Item, e: React.MouseEvent | React.KeyboardEvent) => void)',\n    )\n    .defaultValue(() => null),\n  isLoading: PropTypes.bool\n    .description('Whether the flyout menu should render the loading indicator')\n    .defaultValue(false),\n  isSkeleton: PropTypes.bool.description('Whether the flyout menu should render the skeleton').defaultValue(false),\n};\n\nexport const DSMenuButtonPropTypes: DSPropTypesSchema<DSMenuButtonT.Props> = {\n  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).description(\n    'Array of options to display in the menu or a DSTree node to build branches from',\n  ).isRequired,\n  selectedItems: PropTypes.arrayOf(PropTypes.object).description(\n    'an array of tree-nodes or tree-items that have to be marked as selected in the GUI, required if the menu has selectionable items',\n  ),\n  ...DSButtonV3PropTypes,\n  ...MenuBehaviouralLayerPropTypes,\n  ...DSMenuSpecificPropTypes,\n  ...getPropsPerSlotPropTypes(DSMenuButtonName, MENU_BUTTON_SLOTS),\n};\n\nexport const DSMenuButtonPropTypesSchema = DSMenuButtonPropTypes as unknown as ValidationMap<DSMenuButtonT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAoD;AACpD,0BAAoC;AAMpC,uBAA2E;AAgdpE,MAAM,eAAsD;AAAA,EACjE,gBAAgB,MAAM;AAAA,EACtB,eAAe,MAAM;AAAA,EACrB,gBAAgB,CAAC;AAAA,EACjB,iBAAiB,MAAM;AAAA,EACvB,WAAW;AAAA,EACX,YAAY;AACd;AAYO,MAAM,gCAA4F;AAAA,EACvG,gBAAgB,kCAAU,KAAK;AAAA,IAC7B;AAAA,EACF,EAAE,UAAU;AAAA;AAAA;AAAA,eAGC;AAAA,EAEb,gBAAgB,kCAAU,KAAK;AAAA,IAC7B;AAAA,EACF,EAAE,UAAU;AAAA;AAAA;AAAA,eAGC;AAAA,EAEb,QAAQ,kCAAU,KAAK,YAAY,mDAAmD,EAAE,UAAU,YAAY;AAAA,EAC9G,SAAS,kCAAU,KAAK,YAAY,oDAAoD,EAAE,UAAU,YAAY;AAAA,EAChH,0BAA0B,kCAAU,KAAK,YAAY,gEAAgE,EAClH,UAAU;AAAA;AAAA;AAAA,eAGA;AACf;AAEO,MAAM,0BAA8E;AAAA,EACzF,cAAc,kCAAU,KAAK,YAAY,0CAA0C;AAAA,EACnF,gBAAgB,kCAAU,KACvB,YAAY,kFAAkF,EAC9F,aAAa,MAAM,IAAI;AAAA,EAC1B,eAAe,kCAAU,KACtB;AAAA,IACC;AAAA,EACF,EACC,aAAa,MAAM,IAAI;AAAA,EAC1B,gBAAgB,kCAAU,OACvB;AAAA,IACC;AAAA,EACF,EACC,aAAa,CAAC,CAAC;AAAA,EAClB,iBAAiB,kCAAU,KACxB,YAAY,wDAAwD,EACpE;AAAA,IACC;AAAA,EACF,EACC,aAAa,MAAM,IAAI;AAAA,EAC1B,WAAW,kCAAU,KAClB,YAAY,6DAA6D,EACzE,aAAa,KAAK;AAAA,EACrB,YAAY,kCAAU,KAAK,YAAY,oDAAoD,EAAE,aAAa,KAAK;AACjH;AAEO,MAAM,wBAAgE;AAAA,EAC3E,SAAS,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EAAE;AAAA,IAChE;AAAA,EACF,EAAE;AAAA,EACF,eAAe,kCAAU,QAAQ,kCAAU,MAAM,EAAE;AAAA,IACjD;AAAA,EACF;AAAA,EACA,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAG,kDAAyB,mCAAkB,kCAAiB;AACjE;AAEO,MAAM,8BAA8B;",
   "names": []
 }

package/dist/cjs/utils/nodesTypeguardsAndGetters.js

@@ -39,6 +39,7 @@ __export(nodesTypeguardsAndGetters_exports, {
   isMultipleSelectNode: () => isMultipleSelectNode,
   isMultipleSelectOnlyNode: () => isMultipleSelectOnlyNode,
   isMultipleSelectWithSubmenuNode: () => isMultipleSelectWithSubmenuNode,
+  isObjectAMenuNode: () => isObjectAMenuNode,
   isRootNode: () => isRootNode,
   isSelectionableNode: () => isSelectionableNode,
   isSelectionableWithSubmenuNode: () => isSelectionableWithSubmenuNode,
@@ -53,71 +54,32 @@ __export(nodesTypeguardsAndGetters_exports, {
 module.exports = __toCommonJS(nodesTypeguardsAndGetters_exports);
 var React = __toESM(require("react"));
 var import_constants = require("../constants/index.js");
-const isActivableNode = (item) => {
+const isObjectAMenuNode = (item) => {
   const node = item;
-  return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.ACTIVABLE_ITEM;
-};
-const isActivableWithSubmenuNode = (item) => {
-  const node = item;
-  return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.ACTIVABLE_WITH_SUBMENU_ITEM;
-};
-const isSkeletonNode = (item) => {
-  const node = item;
-  return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SKELETON_ITEM;
-};
-const isMultipleSelectOnlyNode = (item) => {
-  const node = item;
-  return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.MULTIPLE_SELECT_ITEM;
-};
-const isMultipleSelectWithSubmenuNode = (item) => {
-  const node = item;
-  return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.MULTIPLE_SELECT_WITH_SUBMENU_ITEM;
+  return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type !== void 0 && node.dsId !== void 0;
 };
+const isActivableNode = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.ACTIVABLE_ITEM;
+const isSkeletonNode = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SKELETON_ITEM;
+const isMultipleSelectOnlyNode = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.MULTIPLE_SELECT_ITEM;
+const isMultipleSelectWithSubmenuNode = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.MULTIPLE_SELECT_WITH_SUBMENU_ITEM;
 const isMultipleSelectNode = (item) => isMultipleSelectOnlyNode(item) || isMultipleSelectWithSubmenuNode(item);
-const isSingleSelectOnlyNode = (item) => {
-  const node = item;
-  return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SINGLE_SELECT_ITEM;
-};
-const isSingleSelectNodeWithSubmenu = (item) => {
-  const node = item;
-  return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SINGLE_SELECT_WITH_SUBMENU_ITEM;
-};
+const isSingleSelectOnlyNode = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SINGLE_SELECT_ITEM;
+const isSingleSelectNodeWithSubmenu = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SINGLE_SELECT_WITH_SUBMENU_ITEM;
 const isSingleSelectNode = (item) => isSingleSelectOnlyNode(item) || isSingleSelectNodeWithSubmenu(item);
 const isSelectionableNode = (item) => isMultipleSelectNode(item) || isSingleSelectNode(item);
-const getSelectionableNodes = (tree) => {
-  const flattenNodes = tree.flatten();
-  return flattenNodes.filter(isSelectionableNode);
-};
-const isWithSubmenuOnlyNode = (item) => {
-  const node = item;
-  return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.WITH_SUBMENU_ITEM;
-};
+const getSelectionableNodes = (tree) => tree.flatten().filter(isSelectionableNode);
+const isWithSubmenuOnlyNode = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.WITH_SUBMENU_ITEM;
 const isSelectionableWithSubmenuNode = (item) => isSingleSelectNodeWithSubmenu(item) || isMultipleSelectWithSubmenuNode(item);
-const isWithSubmenuNode = (item) => isWithSubmenuOnlyNode(item) || isSingleSelectNodeWithSubmenu(item) || isMultipleSelectWithSubmenuNode(item) || isActivableWithSubmenuNode(item);
-const getWithSubmenuNodes = (tree) => {
-  const flattenNodes = tree.flatten();
-  return flattenNodes.filter(isWithSubmenuNode);
-};
-const isFocusableNode = (item) => {
-  const node = item;
-  return typeof item === "object" && item !== null && typeof node.plainItem === "object" && typeof node.plainItem.type === "string" && (node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.WITH_SUBMENU_ITEM || node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.MULTIPLE_SELECT_ITEM || node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.MULTIPLE_SELECT_WITH_SUBMENU_ITEM || node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SINGLE_SELECT_ITEM || node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SINGLE_SELECT_WITH_SUBMENU_ITEM || node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.ACTIVABLE_ITEM || node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.ACTIVABLE_WITH_SUBMENU_ITEM || node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SKELETON_ITEM);
-};
+const isActivableWithSubmenuNode = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.ACTIVABLE_WITH_SUBMENU_ITEM;
+const isWithSubmenuNode = (item) => isWithSubmenuOnlyNode(item) || isSelectionableWithSubmenuNode(item) || isActivableWithSubmenuNode(item);
+const getWithSubmenuNodes = (tree) => tree.flatten().filter(isWithSubmenuNode);
+const isFocusableNode = (item) => isSelectionableNode(item) || isActivableNode(item) || isWithSubmenuNode(item) || isSkeletonNode(item);
 const getFocusableNodes = (tree) => {
   const flattenNodes = tree.flatten();
   return flattenNodes.filter(isFocusableNode);
 };
-const isSeparatorNode = (item) => {
-  const node = item;
-  return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SEPARATOR;
-};
-const isGroup = (item) => {
-  const node = item;
-  return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === import_constants.MENU_ITEMS_TYPES.GROUP;
-};
-const isRootNode = (item) => {
-  const node = item;
-  return typeof item === "object" && item !== null && typeof node.plainItem === "object" && // hardcoded string because the root item is not a renderable item and must always be treated with special care
-  node.plainItem?.type === "ROOT_ITEM";
-};
+const isSeparatorNode = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SEPARATOR;
+const isGroup = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.GROUP;
+const isRootNode = (item) => isObjectAMenuNode(item) && item.plainItem?.type === "ROOT_ITEM";
 const isMenuNodeAllowedToHaveChildren = (item) => isRootNode(item) || isWithSubmenuNode(item) || isGroup(item) || isSingleSelectNodeWithSubmenu(item) || isMultipleSelectWithSubmenuNode(item) || isActivableWithSubmenuNode(item);
 //# sourceMappingURL=nodesTypeguardsAndGetters.js.map

package/dist/cjs/utils/nodesTypeguardsAndGetters.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/nodesTypeguardsAndGetters.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport { type DSMenuButtonT } from '../react-desc-prop-types.js';\n\nimport { MENU_ITEMS_TYPES } from '../constants/index.js';\n// =============================================================================\n// Focusable nodes\n// =============================================================================\nexport const isActivableNode = (item: unknown): item is DSMenuButtonT.MenuNodeActivableItem => {\n  const node = item as { plainItem?: { type?: unknown } };\n  return (\n    typeof item === 'object' &&\n    item !== null &&\n    typeof node.plainItem === 'object' &&\n    node.plainItem?.type === MENU_ITEMS_TYPES.ACTIVABLE_ITEM\n  );\n};\nexport const isActivableWithSubmenuNode = (item: unknown): item is DSMenuButtonT.MenuNodeActivableWithSubmenuItem => {\n  const node = item as { plainItem?: { type?: unknown } };\n  return (\n    typeof item === 'object' &&\n    item !== null &&\n    typeof node.plainItem === 'object' &&\n    node.plainItem?.type === MENU_ITEMS_TYPES.ACTIVABLE_WITH_SUBMENU_ITEM\n  );\n};\nexport const isSkeletonNode = (item: unknown): item is DSMenuButtonT.MenuNodeSkeletonItem => {\n  const node = item as { plainItem?: { type?: unknown } };\n  return (\n    typeof item === 'object' &&\n    item !== null &&\n    typeof node.plainItem === 'object' &&\n    node.plainItem?.type === MENU_ITEMS_TYPES.SKELETON_ITEM\n  );\n};\n// =============================================================================\n// Focusable but more specifically specifically selectable nodes\n// =============================================================================\nexport const isMultipleSelectOnlyNode = (item: unknown): item is DSMenuButtonT.MenuNodeMultipleSelectItem => {\n  const node = item as { plainItem?: { type?: unknown } };\n  return (\n    typeof item === 'object' &&\n    item !== null &&\n    typeof node.plainItem === 'object' &&\n    node.plainItem?.type === MENU_ITEMS_TYPES.MULTIPLE_SELECT_ITEM\n  );\n};\n\nexport const isMultipleSelectWithSubmenuNode = (\n  item: unknown,\n): item is DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem => {\n  const node = item as { plainItem?: { type?: unknown } };\n  return (\n    typeof item === 'object' &&\n    item !== null &&\n    typeof node.plainItem === 'object' &&\n    node.plainItem?.type === MENU_ITEMS_TYPES.MULTIPLE_SELECT_WITH_SUBMENU_ITEM\n  );\n};\nexport const isMultipleSelectNode = (item: unknown): item is DSMenuButtonT.MultipleSelectionableMenuNodes =>\n  isMultipleSelectOnlyNode(item) || isMultipleSelectWithSubmenuNode(item);\n\nexport const isSingleSelectOnlyNode = (item: unknown): item is DSMenuButtonT.MenuNodeSingleSelectItem => {\n  const node = item as { plainItem?: { type?: unknown } };\n  return (\n    typeof item === 'object' &&\n    item !== null &&\n    typeof node.plainItem === 'object' &&\n    node.plainItem?.type === MENU_ITEMS_TYPES.SINGLE_SELECT_ITEM\n  );\n};\n\nexport const isSingleSelectNodeWithSubmenu = (\n  item: unknown,\n): item is DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem => {\n  const node = item as { plainItem?: { type?: unknown } };\n  return (\n    typeof item === 'object' &&\n    item !== null &&\n    typeof node.plainItem === 'object' &&\n    node.plainItem?.type === MENU_ITEMS_TYPES.SINGLE_SELECT_WITH_SUBMENU_ITEM\n  );\n};\n\nexport const isSingleSelectNode = (item: unknown): item is DSMenuButtonT.SingleSelectionableMenuNodes =>\n  isSingleSelectOnlyNode(item) || isSingleSelectNodeWithSubmenu(item);\n\nexport const isSelectionableNode = (item: unknown): item is DSMenuButtonT.SelectionableMenuNodes =>\n  isMultipleSelectNode(item) || isSingleSelectNode(item);\n\nexport const getSelectionableNodes = (tree: DSMenuButtonT.MenuNode): DSMenuButtonT.SelectionableMenuNodes[] => {\n  const flattenNodes = tree.flatten();\n  return flattenNodes.filter(isSelectionableNode);\n};\n\n// =============================================================================\n// Focusable but more specifically with submenu nodes\n// =============================================================================\nexport const isWithSubmenuOnlyNode = (item: unknown): item is DSMenuButtonT.MenuNodeWithSubmenuItem => {\n  const node = item as { plainItem?: { type?: unknown } };\n  return (\n    typeof item === 'object' &&\n    item !== null &&\n    typeof node.plainItem === 'object' &&\n    node.plainItem?.type === MENU_ITEMS_TYPES.WITH_SUBMENU_ITEM\n  );\n};\n\nexport const isSelectionableWithSubmenuNode = (\n  item: unknown,\n): item is DSMenuButtonT.SelectionablesWithSubmenuMenuNodes =>\n  isSingleSelectNodeWithSubmenu(item) || isMultipleSelectWithSubmenuNode(item);\n\nexport const isWithSubmenuNode = (item: unknown): item is DSMenuButtonT.WithSubmenuMenuNodes =>\n  isWithSubmenuOnlyNode(item) ||\n  isSingleSelectNodeWithSubmenu(item) ||\n  isMultipleSelectWithSubmenuNode(item) ||\n  isActivableWithSubmenuNode(item);\n\nexport const getWithSubmenuNodes = (tree: DSMenuButtonT.MenuNode): DSMenuButtonT.PseudoFocusableMenuNodes[] => {\n  const flattenNodes = tree.flatten();\n  return flattenNodes.filter(isWithSubmenuNode);\n};\n\nexport const isFocusableNode = (item: unknown): item is DSMenuButtonT.PseudoFocusableMenuNodes => {\n  const node = item as { plainItem?: { type?: unknown } };\n  return (\n    typeof item === 'object' &&\n    item !== null &&\n    typeof node.plainItem === 'object' &&\n    typeof node.plainItem.type === 'string' &&\n    (node.plainItem?.type === MENU_ITEMS_TYPES.WITH_SUBMENU_ITEM ||\n      node.plainItem?.type === MENU_ITEMS_TYPES.MULTIPLE_SELECT_ITEM ||\n      node.plainItem?.type === MENU_ITEMS_TYPES.MULTIPLE_SELECT_WITH_SUBMENU_ITEM ||\n      node.plainItem?.type === MENU_ITEMS_TYPES.SINGLE_SELECT_ITEM ||\n      node.plainItem?.type === MENU_ITEMS_TYPES.SINGLE_SELECT_WITH_SUBMENU_ITEM ||\n      node.plainItem?.type === MENU_ITEMS_TYPES.ACTIVABLE_ITEM ||\n      node.plainItem?.type === MENU_ITEMS_TYPES.ACTIVABLE_WITH_SUBMENU_ITEM ||\n      node.plainItem?.type === MENU_ITEMS_TYPES.SKELETON_ITEM)\n  );\n};\n\nexport const getFocusableNodes = (tree: DSMenuButtonT.MenuNode): DSMenuButtonT.PseudoFocusableMenuNodes[] => {\n  const flattenNodes = tree.flatten();\n  return flattenNodes.filter(isFocusableNode);\n};\n\n// =============================================================================\n// Non focusable nodes\n// =============================================================================\nexport const isSeparatorNode = (item: unknown): item is DSMenuButtonT.MenuNodeSeparatorItem => {\n  const node = item as { plainItem?: { type?: unknown } };\n  return (\n    typeof item === 'object' &&\n    item !== null &&\n    typeof node.plainItem === 'object' &&\n    node.plainItem?.type === MENU_ITEMS_TYPES.SEPARATOR\n  );\n};\n\nexport const isGroup = (item: unknown): item is DSMenuButtonT.MenuNodeGroupItem => {\n  const node = item as { plainItem?: { type?: unknown } };\n  return (\n    typeof item === 'object' &&\n    item !== null &&\n    typeof node.plainItem === 'object' &&\n    node.plainItem?.type === MENU_ITEMS_TYPES.GROUP\n  );\n};\nexport const isRootNode = (item: unknown): item is DSMenuButtonT.MenuNodeRootItem => {\n  const node = item as { plainItem?: { type?: unknown } };\n  return (\n    typeof item === 'object' &&\n    item !== null &&\n    typeof node.plainItem === 'object' &&\n    // hardcoded string because the root item is not a renderable item and must always be treated with special care\n    node.plainItem?.type === 'ROOT_ITEM'\n  );\n};\n// =============================================================================\n// Nodes allowed/expected to have subItems/children\n//  (the node not necessarily needs to be focusable or a submenu)\n// =============================================================================\nexport const isMenuNodeAllowedToHaveChildren = (item: unknown): item is DSMenuButtonT.MenuNodesAllowedToHaveChildren =>\n  isRootNode(item) ||\n  isWithSubmenuNode(item) ||\n  isGroup(item) ||\n  isSingleSelectNodeWithSubmenu(item) ||\n  isMultipleSelectWithSubmenuNode(item) ||\n  isActivableWithSubmenuNode(item);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAiC;AAI1B,MAAM,kBAAkB,CAAC,SAA+D;AAC7F,QAAM,OAAO;AACb,SACE,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,KAAK,cAAc,YAC1B,KAAK,WAAW,SAAS,kCAAiB;AAE9C;AACO,MAAM,6BAA6B,CAAC,SAA0E;AACnH,QAAM,OAAO;AACb,SACE,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,KAAK,cAAc,YAC1B,KAAK,WAAW,SAAS,kCAAiB;AAE9C;AACO,MAAM,iBAAiB,CAAC,SAA8D;AAC3F,QAAM,OAAO;AACb,SACE,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,KAAK,cAAc,YAC1B,KAAK,WAAW,SAAS,kCAAiB;AAE9C;AAIO,MAAM,2BAA2B,CAAC,SAAoE;AAC3G,QAAM,OAAO;AACb,SACE,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,KAAK,cAAc,YAC1B,KAAK,WAAW,SAAS,kCAAiB;AAE9C;AAEO,MAAM,kCAAkC,CAC7C,SACgE;AAChE,QAAM,OAAO;AACb,SACE,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,KAAK,cAAc,YAC1B,KAAK,WAAW,SAAS,kCAAiB;AAE9C;AACO,MAAM,uBAAuB,CAAC,SACnC,yBAAyB,IAAI,KAAK,gCAAgC,IAAI;AAEjE,MAAM,yBAAyB,CAAC,SAAkE;AACvG,QAAM,OAAO;AACb,SACE,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,KAAK,cAAc,YAC1B,KAAK,WAAW,SAAS,kCAAiB;AAE9C;AAEO,MAAM,gCAAgC,CAC3C,SAC8D;AAC9D,QAAM,OAAO;AACb,SACE,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,KAAK,cAAc,YAC1B,KAAK,WAAW,SAAS,kCAAiB;AAE9C;AAEO,MAAM,qBAAqB,CAAC,SACjC,uBAAuB,IAAI,KAAK,8BAA8B,IAAI;AAE7D,MAAM,sBAAsB,CAAC,SAClC,qBAAqB,IAAI,KAAK,mBAAmB,IAAI;AAEhD,MAAM,wBAAwB,CAAC,SAAyE;AAC7G,QAAM,eAAe,KAAK,QAAQ;AAClC,SAAO,aAAa,OAAO,mBAAmB;AAChD;AAKO,MAAM,wBAAwB,CAAC,SAAiE;AACrG,QAAM,OAAO;AACb,SACE,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,KAAK,cAAc,YAC1B,KAAK,WAAW,SAAS,kCAAiB;AAE9C;AAEO,MAAM,iCAAiC,CAC5C,SAEA,8BAA8B,IAAI,KAAK,gCAAgC,IAAI;AAEtE,MAAM,oBAAoB,CAAC,SAChC,sBAAsB,IAAI,KAC1B,8BAA8B,IAAI,KAClC,gCAAgC,IAAI,KACpC,2BAA2B,IAAI;AAE1B,MAAM,sBAAsB,CAAC,SAA2E;AAC7G,QAAM,eAAe,KAAK,QAAQ;AAClC,SAAO,aAAa,OAAO,iBAAiB;AAC9C;AAEO,MAAM,kBAAkB,CAAC,SAAkE;AAChG,QAAM,OAAO;AACb,SACE,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,KAAK,cAAc,YAC1B,OAAO,KAAK,UAAU,SAAS,aAC9B,KAAK,WAAW,SAAS,kCAAiB,qBACzC,KAAK,WAAW,SAAS,kCAAiB,wBAC1C,KAAK,WAAW,SAAS,kCAAiB,qCAC1C,KAAK,WAAW,SAAS,kCAAiB,sBAC1C,KAAK,WAAW,SAAS,kCAAiB,mCAC1C,KAAK,WAAW,SAAS,kCAAiB,kBAC1C,KAAK,WAAW,SAAS,kCAAiB,+BAC1C,KAAK,WAAW,SAAS,kCAAiB;AAEhD;AAEO,MAAM,oBAAoB,CAAC,SAA2E;AAC3G,QAAM,eAAe,KAAK,QAAQ;AAClC,SAAO,aAAa,OAAO,eAAe;AAC5C;AAKO,MAAM,kBAAkB,CAAC,SAA+D;AAC7F,QAAM,OAAO;AACb,SACE,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,KAAK,cAAc,YAC1B,KAAK,WAAW,SAAS,kCAAiB;AAE9C;AAEO,MAAM,UAAU,CAAC,SAA2D;AACjF,QAAM,OAAO;AACb,SACE,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,KAAK,cAAc,YAC1B,KAAK,WAAW,SAAS,kCAAiB;AAE9C;AACO,MAAM,aAAa,CAAC,SAA0D;AACnF,QAAM,OAAO;AACb,SACE,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,KAAK,cAAc;AAAA,EAE1B,KAAK,WAAW,SAAS;AAE7B;AAKO,MAAM,kCAAkC,CAAC,SAC9C,WAAW,IAAI,KACf,kBAAkB,IAAI,KACtB,QAAQ,IAAI,KACZ,8BAA8B,IAAI,KAClC,gCAAgC,IAAI,KACpC,2BAA2B,IAAI;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport { type DSMenuButtonT } from '../react-desc-prop-types.js';\n\nimport { MENU_ITEMS_TYPES } from '../constants/index.js';\n\n/**\n * Heuristic to determine if the selected item is an item or a node.\n * Not perfect because JavaScript is not typed.\n * If app devs provide an object that matches all of those conditions, it's an edge case the app devs should handle.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is (heuristically) a menu node, false otherwise.\n */\nexport const isObjectAMenuNode = (item: unknown): item is DSMenuButtonT.MenuNode => {\n  const node = item as { plainItem?: { type?: unknown }; dsId?: unknown };\n  return (\n    typeof item === 'object' &&\n    item !== null &&\n    typeof node.plainItem === 'object' &&\n    node.plainItem?.type !== undefined &&\n    node.dsId !== undefined\n  );\n};\n\n// =============================================================================\n// Focusable nodes\n// =============================================================================\n/**\n * Checks if the item is an activable node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is an activable node, false otherwise.\n */\nexport const isActivableNode = (item: unknown): item is DSMenuButtonT.MenuNodeActivableItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.ACTIVABLE_ITEM;\n\n/**\n * Checks if the item is a skeleton node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a skeleton node, false otherwise.\n */\nexport const isSkeletonNode = (item: unknown): item is DSMenuButtonT.MenuNodeSkeletonItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.SKELETON_ITEM;\n\n// =============================================================================\n// Focusable but more specifically selectable nodes\n// =============================================================================\n\n/**\n * Checks if the item is a multiple select only node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a multiple select only node, false otherwise.\n */\nexport const isMultipleSelectOnlyNode = (item: unknown): item is DSMenuButtonT.MenuNodeMultipleSelectItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.MULTIPLE_SELECT_ITEM;\n\n/**\n * Checks if the item is a multiple select node with a submenu.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a multiple select node with a submenu, false otherwise.\n */\nexport const isMultipleSelectWithSubmenuNode = (\n  item: unknown,\n): item is DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.MULTIPLE_SELECT_WITH_SUBMENU_ITEM;\n\n/**\n * Checks if the item is a multiple select node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a multiple select node, false otherwise.\n */\nexport const isMultipleSelectNode = (item: unknown): item is DSMenuButtonT.MultipleSelectionableMenuNodes =>\n  isMultipleSelectOnlyNode(item) || isMultipleSelectWithSubmenuNode(item);\n\n/**\n * Checks if the item is a single select only node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a single select only node, false otherwise.\n */\nexport const isSingleSelectOnlyNode = (item: unknown): item is DSMenuButtonT.MenuNodeSingleSelectItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.SINGLE_SELECT_ITEM;\n\n/**\n * Checks if the item is a single select node with a submenu.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a single select node with a submenu, false otherwise.\n */\nexport const isSingleSelectNodeWithSubmenu = (\n  item: unknown,\n): item is DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.SINGLE_SELECT_WITH_SUBMENU_ITEM;\n\n/**\n * Checks if the item is a single select node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a single select node, false otherwise.\n */\nexport const isSingleSelectNode = (item: unknown): item is DSMenuButtonT.SingleSelectionableMenuNodes =>\n  isSingleSelectOnlyNode(item) || isSingleSelectNodeWithSubmenu(item);\n\n/**\n * Checks if the item is a selectionable node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a selectionable node, false otherwise.\n */\nexport const isSelectionableNode = (item: unknown): item is DSMenuButtonT.SelectionableMenuNodes =>\n  isMultipleSelectNode(item) || isSingleSelectNode(item);\n\n/**\n * Gets all selectionable nodes from the tree.\n * @param {DSMenuButtonT.MenuNode} tree - The tree to search.\n * @returns {DSMenuButtonT.SelectionableMenuNodes[]} - An array of selectionable nodes.\n */\nexport const getSelectionableNodes = (tree: DSMenuButtonT.MenuNode): DSMenuButtonT.SelectionableMenuNodes[] =>\n  tree.flatten().filter(isSelectionableNode);\n// =============================================================================\n// Focusable but more specifically with submenu nodes\n// =============================================================================\n/**\n * Checks if the item is a node with a submenu (and nothing else).\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a node with a submenu, false otherwise.\n */\nexport const isWithSubmenuOnlyNode = (item: unknown): item is DSMenuButtonT.MenuNodeWithSubmenuItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.WITH_SUBMENU_ITEM;\n\n/**\n * Checks if the item is a selectionable node with a submenu.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a selectionable node with a submenu, false otherwise.\n */\nexport const isSelectionableWithSubmenuNode = (\n  item: unknown,\n): item is DSMenuButtonT.SelectionablesWithSubmenuMenuNodes =>\n  isSingleSelectNodeWithSubmenu(item) || isMultipleSelectWithSubmenuNode(item);\n/**\n * Checks if the item is an activable node with a submenu.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is an activable node with a submenu, false otherwise.\n */\nexport const isActivableWithSubmenuNode = (item: unknown): item is DSMenuButtonT.MenuNodeActivableWithSubmenuItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.ACTIVABLE_WITH_SUBMENU_ITEM;\n\n/**\n * Checks if the item is a node with a submenu.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a node with a submenu, false otherwise.\n */\nexport const isWithSubmenuNode = (item: unknown): item is DSMenuButtonT.WithSubmenuMenuNodes =>\n  isWithSubmenuOnlyNode(item) || isSelectionableWithSubmenuNode(item) || isActivableWithSubmenuNode(item);\n\n/**\n * Gets all nodes with a submenu from the tree.\n * @param {DSMenuButtonT.MenuNode} tree - The tree to search.\n * @returns {DSMenuButtonT.PseudoFocusableMenuNodes[]} - An array of nodes with a submenu.\n */\nexport const getWithSubmenuNodes = (tree: DSMenuButtonT.MenuNode): DSMenuButtonT.PseudoFocusableMenuNodes[] =>\n  tree.flatten().filter(isWithSubmenuNode);\n/**\n * Checks if the item is a node that can be focused.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a node that can be focused, false otherwise.\n */\nexport const isFocusableNode = (item: unknown): item is DSMenuButtonT.PseudoFocusableMenuNodes =>\n  isSelectionableNode(item) || isActivableNode(item) || isWithSubmenuNode(item) || isSkeletonNode(item);\n\n/**\n * Gets all nodes that can be focused from the tree.\n * @param {DSMenuButtonT.MenuNode} tree - The tree to search.\n * @returns {DSMenuButtonT.PseudoFocusableMenuNodes[]} - An array of nodes that can be focused.\n */\nexport const getFocusableNodes = (tree: DSMenuButtonT.MenuNode): DSMenuButtonT.PseudoFocusableMenuNodes[] => {\n  const flattenNodes = tree.flatten();\n  return flattenNodes.filter(isFocusableNode);\n};\n\n// =============================================================================\n// Non focusable nodes\n// =============================================================================\n/**\n * Checks if the item is a separator node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a separator node, false otherwise.\n */\nexport const isSeparatorNode = (item: unknown): item is DSMenuButtonT.MenuNodeSeparatorItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.SEPARATOR;\n/**\n * Checks if the item is a group node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a group node, false otherwise.\n */\nexport const isGroup = (item: unknown): item is DSMenuButtonT.MenuNodeGroupItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.GROUP;\n\n/**\n * Checks if the given item is a root node of the menu.\n * @param {DSMenuButtonT.MenuNode} tree - The tree to search.\n * @returns {DSMenuButtonT.PseudoFocusableMenuNodes[]} - An array of nodes that can be focused.\n * @remarks\n * The root item is not a renderable item and must always be treated with special care.\n *\n * This function uses a hardcoded string to identify the root item.\n */\nexport const isRootNode = (item: unknown): item is DSMenuButtonT.MenuNodeRootItem =>\n  isObjectAMenuNode(item) && (item.plainItem?.type as string) === 'ROOT_ITEM';\n\n// =============================================================================\n// Nodes allowed/expected to have subItems/children\n//  (the node not necessarily needs to be focusable or a submenu, E.G. a group)\n// =============================================================================\nexport const isMenuNodeAllowedToHaveChildren = (item: unknown): item is DSMenuButtonT.MenuNodesAllowedToHaveChildren =>\n  isRootNode(item) ||\n  isWithSubmenuNode(item) ||\n  isGroup(item) ||\n  isSingleSelectNodeWithSubmenu(item) ||\n  isMultipleSelectWithSubmenuNode(item) ||\n  isActivableWithSubmenuNode(item);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAiC;AAS1B,MAAM,oBAAoB,CAAC,SAAkD;AAClF,QAAM,OAAO;AACb,SACE,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,KAAK,cAAc,YAC1B,KAAK,WAAW,SAAS,UACzB,KAAK,SAAS;AAElB;AAUO,MAAM,kBAAkB,CAAC,SAC9B,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,iBAAiB,CAAC,SAC7B,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAWhE,MAAM,2BAA2B,CAAC,SACvC,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,kCAAkC,CAC7C,SAEA,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,uBAAuB,CAAC,SACnC,yBAAyB,IAAI,KAAK,gCAAgC,IAAI;AAOjE,MAAM,yBAAyB,CAAC,SACrC,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,gCAAgC,CAC3C,SAEA,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,qBAAqB,CAAC,SACjC,uBAAuB,IAAI,KAAK,8BAA8B,IAAI;AAO7D,MAAM,sBAAsB,CAAC,SAClC,qBAAqB,IAAI,KAAK,mBAAmB,IAAI;AAOhD,MAAM,wBAAwB,CAAC,SACpC,KAAK,QAAQ,EAAE,OAAO,mBAAmB;AASpC,MAAM,wBAAwB,CAAC,SACpC,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,iCAAiC,CAC5C,SAEA,8BAA8B,IAAI,KAAK,gCAAgC,IAAI;AAMtE,MAAM,6BAA6B,CAAC,SACzC,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,oBAAoB,CAAC,SAChC,sBAAsB,IAAI,KAAK,+BAA+B,IAAI,KAAK,2BAA2B,IAAI;AAOjG,MAAM,sBAAsB,CAAC,SAClC,KAAK,QAAQ,EAAE,OAAO,iBAAiB;AAMlC,MAAM,kBAAkB,CAAC,SAC9B,oBAAoB,IAAI,KAAK,gBAAgB,IAAI,KAAK,kBAAkB,IAAI,KAAK,eAAe,IAAI;AAO/F,MAAM,oBAAoB,CAAC,SAA2E;AAC3G,QAAM,eAAe,KAAK,QAAQ;AAClC,SAAO,aAAa,OAAO,eAAe;AAC5C;AAUO,MAAM,kBAAkB,CAAC,SAC9B,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAMhE,MAAM,UAAU,CAAC,SACtB,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAWhE,MAAM,aAAa,CAAC,SACzB,kBAAkB,IAAI,KAAM,KAAK,WAAW,SAAoB;AAM3D,MAAM,kCAAkC,CAAC,SAC9C,WAAW,IAAI,KACf,kBAAkB,IAAI,KACtB,QAAQ,IAAI,KACZ,8BAA8B,IAAI,KAClC,gCAAgC,IAAI,KACpC,2BAA2B,IAAI;",
   "names": []
 }

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

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

package/dist/esm/config/useSplitInherithedProps.js

@@ -1,6 +1,28 @@
 import * as React from "react";
 import React2 from "react";
+import { isSelectionableNode, isObjectAMenuNode } from "../utils/nodesTypeguardsAndGetters.js";
 import { resolveRef } from "../utils/resolveRef.js";
+const convertSelectedOptionsToNodes = (selectedItems, treeRootNode) => {
+  const convertedSelection = [];
+  selectedItems.forEach((selectedItem) => {
+    const needsConversion = !isObjectAMenuNode(selectedItem);
+    if (!needsConversion) {
+      convertedSelection.push(selectedItem);
+      return;
+    }
+    const { dsId } = selectedItem;
+    const selectedNode = treeRootNode.findNode((node) => node.dsId === dsId);
+    if (!selectedNode) {
+      throw new Error(`Selected option with dsId ${dsId} not found in the menu tree.`);
+    }
+    if (!isSelectionableNode(selectedNode)) {
+      console.warn(`Selected option with dsId ${dsId} is not a selectionable node and will be ignored.`);
+      return;
+    }
+    convertedSelection.push(selectedNode);
+  });
+  return convertedSelection;
+};
 const useSplitInherithedProps = ({
   propsWithDefault,
   focusableNodes,
@@ -15,7 +37,6 @@ const useSplitInherithedProps = ({
     onSubmenuToggle,
     isLoading,
     isSkeleton,
-    selectedOptions,
     ItemRenderer,
     innerRef,
     selectedItems,
@@ -35,6 +56,12 @@ const useSplitInherithedProps = ({
     },
     [innerRef]
   );
+  const selectedNodesMap = React2.useMemo(() => {
+    if (selectedItems) {
+      return convertSelectedOptionsToNodes(selectedItems, treeRootNode);
+    }
+    return [];
+  }, [selectedItems, treeRootNode]);
   const menuSpecificProps = React2.useMemo(
     () => ({
       options,
@@ -44,26 +71,15 @@ const useSplitInherithedProps = ({
       onSubmenuToggle,
       isLoading,
       isSkeleton,
-      selectedOptions,
       ItemRenderer
     }),
-    [
-      options,
-      onClickOutside,
-      onOptionClick,
-      openedSubmenus,
-      onSubmenuToggle,
-      isLoading,
-      isSkeleton,
-      selectedOptions,
-      ItemRenderer
-    ]
+    [options, onClickOutside, onOptionClick, openedSubmenus, onSubmenuToggle, isLoading, isSkeleton, ItemRenderer]
   );
   return React2.useMemo(
     () => ({
       menuBehaviouralLayerProps: {
         buttonDOMNodeRef,
-        selectedItems,
+        selectedNodes: selectedNodesMap,
         focusableNodes,
         optionsTree: treeRootNode,
         onDisplayedSubmenuChange,
@@ -79,7 +95,7 @@ const useSplitInherithedProps = ({
       }
     }),
     [
-      selectedItems,
+      selectedNodesMap,
       focusableNodes,
       treeRootNode,
       onDisplayedSubmenuChange,

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

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

package/dist/esm/parts/DSFlyoutMenu/DSFlyoutMenu.js

@@ -21,12 +21,14 @@ const StyledMenu = styled("div", { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLO
   padding: 0;
   margin: 0;
 `;
+const NoComponentPlaceholder = () => null;
 const DSFlyoutMenu = (props) => {
   const { propsWithDefault, xstyledProps } = useFlyoutMenu(props);
   const {
     instanceUid,
     globalEventsHelpers: { mainMenuRef, handleSubmenusRefChange }
   } = React2.useContext(MenuBehaviouralContextProviderContext);
+  const [didAnimationEnd, setDidAnimationEnd] = React2.useState(false);
   const { setFloatingRef, floatingStyles, floatingContext, ItemRenderer, isMenuOpen, itemNode } = propsWithDefault;
   const handleRefChange = React2.useCallback(
     (node) => {
@@ -38,6 +40,12 @@ const DSFlyoutMenu = (props) => {
     },
     [handleSubmenusRefChange, itemNode, mainMenuRef]
   );
+  const handleAnimationStartTrigger = React2.useCallback(() => {
+    setDidAnimationEnd(false);
+  }, []);
+  const handleAnimationEnd = React2.useCallback(() => {
+    setDidAnimationEnd(true);
+  }, []);
   return /* @__PURE__ */ jsx(
     FloatingWrapper,
     {
@@ -45,12 +53,14 @@ const DSFlyoutMenu = (props) => {
       floatingStyles,
       isOpen: isMenuOpen,
       context: floatingContext,
+      onAnimationStartTriggered: handleAnimationStartTrigger,
+      onAnimationEnd: handleAnimationEnd,
       children: /* @__PURE__ */ jsx(StyledWrapper, { getOwnerProps: () => propsWithDefault, getOwnerPropsArguments: () => ({}), ...xstyledProps, children: /* @__PURE__ */ jsx(StyledMenu, { role: "menu", innerRef: handleRefChange, children: itemNode.children.map((optionNode) => /* @__PURE__ */ jsx(
         DSMenuItemRendererFactory,
         {
           itemNode: optionNode,
           ItemRenderer,
-          FlyoutMenuCircularDepInject: DSFlyoutMenu
+          FlyoutMenuCircularDepInject: didAnimationEnd ? DSFlyoutMenu : NoComponentPlaceholder
         },
         `flyout-menu-item-${optionNode.dsId}-${instanceUid}`
       )) }) })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSFlyoutMenu/DSFlyoutMenu.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { DSMenuItemRendererFactory } from '../DSMenuItemRendererFactory/index.js';\nimport { useFlyoutMenu } from './config/useFlyoutMenu.js';\nimport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './constants/index.js';\nimport { DSFlyoutMenuPropTypesSchema, type DSFlyoutMenuT } from './react-desc-prop-types.js';\nimport { isRootNode } from '../../utils/nodesTypeguardsAndGetters.js';\n\nconst StyledWrapper = styled(Grid, { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.ROOT })`\n  min-width: 150px;\n  background-color: white;\n  padding: ${({ theme }) => theme.space.xxxs} 0;\n  ${xStyledCommonProps}\n`;\n\nconst StyledMenu = styled('div', { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.LIST_WRAPPER })`\n  padding: 0;\n  margin: 0;\n`;\n\nconst DSFlyoutMenu: React.ComponentType<DSFlyoutMenuT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps } = useFlyoutMenu(props);\n  const {\n    instanceUid,\n    globalEventsHelpers: { mainMenuRef, handleSubmenusRefChange },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n\n  const { setFloatingRef, floatingStyles, floatingContext, ItemRenderer, isMenuOpen, itemNode } = propsWithDefault;\n\n  const handleRefChange = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (isRootNode(itemNode)) {\n        mainMenuRef.current = node;\n        return;\n      }\n      handleSubmenusRefChange(node, itemNode.dsId);\n    },\n    [handleSubmenusRefChange, itemNode, mainMenuRef],\n  );\n\n  return (\n    <FloatingWrapper\n      innerRef={setFloatingRef}\n      floatingStyles={floatingStyles}\n      isOpen={isMenuOpen}\n      context={floatingContext}\n    >\n      <StyledWrapper getOwnerProps={() => propsWithDefault} getOwnerPropsArguments={() => ({})} {...xstyledProps}>\n        <StyledMenu role=\"menu\" innerRef={handleRefChange}>\n          {itemNode.children.map((optionNode) => (\n            <DSMenuItemRendererFactory\n              key={`flyout-menu-item-${optionNode.dsId}-${instanceUid}`}\n              // DSTree doesn't support children having a polymorphic type, so we need to cast it manually\n              itemNode={optionNode as DSMenuButtonT.MenuNode}\n              ItemRenderer={ItemRenderer}\n              //  we are passing the DSFlyoutMenu component as a prop to the DSMenuItemRendererFactory\n              //    this solves the circular-ish dependency\n              FlyoutMenuCircularDepInject={DSFlyoutMenu}\n            />\n          ))}\n        </StyledMenu>\n      </StyledWrapper>\n    </FloatingWrapper>\n  );\n};\n\nDSFlyoutMenu.displayName = DSFlyoutMenuName;\nconst DSFlyoutMenuWithSchema = describe(DSFlyoutMenu);\nDSFlyoutMenuWithSchema.propTypes = DSFlyoutMenuPropTypesSchema;\n\nexport { DSFlyoutMenu, DSFlyoutMenuWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACuDX;AAvDZ,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,0BAA0B;AAC3C,OAAOA,YAAW;AAElB,SAAS,6CAA6C;AACtD,SAAS,iCAAiC;AAC1C,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB,yBAAyB;AACpD,SAAS,mCAAuD;AAChE,SAAS,kBAAkB;AAE3B,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,KAAK,CAAC;AAAA;AAAA;AAAA,aAG9E,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,IACxC,kBAAkB;AAAA;AAGtB,MAAM,aAAa,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,aAAa,CAAC;AAAA;AAAA;AAAA;AAKjG,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,kBAAkB,aAAa,IAAI,cAAc,KAAK;AAC9D,QAAM;AAAA,IACJ;AAAA,IACA,qBAAqB,EAAE,aAAa,wBAAwB;AAAA,EAC9D,IAAIA,OAAM,WAAW,qCAAqC;AAE1D,QAAM,EAAE,gBAAgB,gBAAgB,iBAAiB,cAAc,YAAY,SAAS,IAAI;AAEhG,QAAM,kBAAkBA,OAAM;AAAA,IAC5B,CAAC,SAAyB;AACxB,UAAI,WAAW,QAAQ,GAAG;AACxB,oBAAY,UAAU;AACtB;AAAA,MACF;AACA,8BAAwB,MAAM,SAAS,IAAI;AAAA,IAC7C;AAAA,IACA,CAAC,yBAAyB,UAAU,WAAW;AAAA,EACjD;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,QAAQ;AAAA,MACR,SAAS;AAAA,MAET,8BAAC,iBAAc,eAAe,MAAM,kBAAkB,wBAAwB,OAAO,CAAC,IAAK,GAAG,cAC5F,8BAAC,cAAW,MAAK,QAAO,UAAU,iBAC/B,mBAAS,SAAS,IAAI,CAAC,eACtB;AAAA,QAAC;AAAA;AAAA,UAGC,UAAU;AAAA,UACV;AAAA,UAGA,6BAA6B;AAAA;AAAA,QANxB,oBAAoB,WAAW,IAAI,IAAI,WAAW;AAAA,MAOzD,CACD,GACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { DSMenuItemRendererFactory } from '../DSMenuItemRendererFactory/index.js';\nimport { useFlyoutMenu } from './config/useFlyoutMenu.js';\nimport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './constants/index.js';\nimport { DSFlyoutMenuPropTypesSchema, type DSFlyoutMenuT } from './react-desc-prop-types.js';\nimport { isRootNode } from '../../utils/nodesTypeguardsAndGetters.js';\n\nconst StyledWrapper = styled(Grid, { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.ROOT })`\n  min-width: 150px;\n  background-color: white;\n  padding: ${({ theme }) => theme.space.xxxs} 0;\n  ${xStyledCommonProps}\n`;\n\nconst StyledMenu = styled('div', { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.LIST_WRAPPER })`\n  padding: 0;\n  margin: 0;\n`;\n\nconst NoComponentPlaceholder = () => null;\n\nconst DSFlyoutMenu: React.ComponentType<DSFlyoutMenuT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps } = useFlyoutMenu(props);\n  const {\n    instanceUid,\n    globalEventsHelpers: { mainMenuRef, handleSubmenusRefChange },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const [didAnimationEnd, setDidAnimationEnd] = React.useState(false);\n\n  const { setFloatingRef, floatingStyles, floatingContext, ItemRenderer, isMenuOpen, itemNode } = propsWithDefault;\n\n  const handleRefChange = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (isRootNode(itemNode)) {\n        mainMenuRef.current = node;\n        return;\n      }\n      handleSubmenusRefChange(node, itemNode.dsId);\n    },\n    [handleSubmenusRefChange, itemNode, mainMenuRef],\n  );\n\n  const handleAnimationStartTrigger = React.useCallback(() => {\n    setDidAnimationEnd(false);\n  }, []);\n  const handleAnimationEnd = React.useCallback(() => {\n    setDidAnimationEnd(true);\n  }, []);\n\n  return (\n    <FloatingWrapper\n      innerRef={setFloatingRef}\n      floatingStyles={floatingStyles}\n      isOpen={isMenuOpen}\n      context={floatingContext}\n      onAnimationStartTriggered={handleAnimationStartTrigger}\n      onAnimationEnd={handleAnimationEnd}\n    >\n      <StyledWrapper getOwnerProps={() => propsWithDefault} getOwnerPropsArguments={() => ({})} {...xstyledProps}>\n        <StyledMenu role=\"menu\" innerRef={handleRefChange}>\n          {itemNode.children.map((optionNode) => (\n            <DSMenuItemRendererFactory\n              key={`flyout-menu-item-${optionNode.dsId}-${instanceUid}`}\n              // DSTree doesn't support children having a polymorphic type, so we need to cast it manually\n              itemNode={optionNode as DSMenuButtonT.MenuNode}\n              ItemRenderer={ItemRenderer}\n              //  we are passing the DSFlyoutMenu component as a prop to the DSMenuItemRendererFactory\n              //    this solves the circular-ish dependency\n              //  the conditional `didAnimationEnd` solves the visual artefact of nested FloatingWrapper wrongly positioned due to animation\n              FlyoutMenuCircularDepInject={didAnimationEnd ? DSFlyoutMenu : NoComponentPlaceholder}\n            />\n          ))}\n        </StyledMenu>\n      </StyledWrapper>\n    </FloatingWrapper>\n  );\n};\n\nDSFlyoutMenu.displayName = DSFlyoutMenuName;\nconst DSFlyoutMenuWithSchema = describe(DSFlyoutMenu);\nDSFlyoutMenuWithSchema.propTypes = DSFlyoutMenuPropTypesSchema;\n\nexport { DSFlyoutMenu, DSFlyoutMenuWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmEX;AAnEZ,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,0BAA0B;AAC3C,OAAOA,YAAW;AAElB,SAAS,6CAA6C;AACtD,SAAS,iCAAiC;AAC1C,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB,yBAAyB;AACpD,SAAS,mCAAuD;AAChE,SAAS,kBAAkB;AAE3B,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,KAAK,CAAC;AAAA;AAAA;AAAA,aAG9E,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,IACxC,kBAAkB;AAAA;AAGtB,MAAM,aAAa,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,aAAa,CAAC;AAAA;AAAA;AAAA;AAKjG,MAAM,yBAAyB,MAAM;AAErC,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,kBAAkB,aAAa,IAAI,cAAc,KAAK;AAC9D,QAAM;AAAA,IACJ;AAAA,IACA,qBAAqB,EAAE,aAAa,wBAAwB;AAAA,EAC9D,IAAIA,OAAM,WAAW,qCAAqC;AAC1D,QAAM,CAAC,iBAAiB,kBAAkB,IAAIA,OAAM,SAAS,KAAK;AAElE,QAAM,EAAE,gBAAgB,gBAAgB,iBAAiB,cAAc,YAAY,SAAS,IAAI;AAEhG,QAAM,kBAAkBA,OAAM;AAAA,IAC5B,CAAC,SAAyB;AACxB,UAAI,WAAW,QAAQ,GAAG;AACxB,oBAAY,UAAU;AACtB;AAAA,MACF;AACA,8BAAwB,MAAM,SAAS,IAAI;AAAA,IAC7C;AAAA,IACA,CAAC,yBAAyB,UAAU,WAAW;AAAA,EACjD;AAEA,QAAM,8BAA8BA,OAAM,YAAY,MAAM;AAC1D,uBAAmB,KAAK;AAAA,EAC1B,GAAG,CAAC,CAAC;AACL,QAAM,qBAAqBA,OAAM,YAAY,MAAM;AACjD,uBAAmB,IAAI;AAAA,EACzB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,2BAA2B;AAAA,MAC3B,gBAAgB;AAAA,MAEhB,8BAAC,iBAAc,eAAe,MAAM,kBAAkB,wBAAwB,OAAO,CAAC,IAAK,GAAG,cAC5F,8BAAC,cAAW,MAAK,QAAO,UAAU,iBAC/B,mBAAS,SAAS,IAAI,CAAC,eACtB;AAAA,QAAC;AAAA;AAAA,UAGC,UAAU;AAAA,UACV;AAAA,UAIA,6BAA6B,kBAAkB,eAAe;AAAA;AAAA,QAPzD,oBAAoB,WAAW,IAAI,IAAI,WAAW;AAAA,MAQzD,CACD,GACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
   "names": ["React"]
 }

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import { useEffect } from "react";
 import { isActivableNode, isSelectionableNode } from "../../../utils/nodesTypeguardsAndGetters.js";
 const useAdvancedValidation = ({ propsWithDefault }) => {
-  const { onActivateItem, onItemSelected, selectedItems, optionsTree } = propsWithDefault;
+  const { onActivateItem, onItemSelected, selectedNodes, optionsTree } = propsWithDefault;
   useEffect(() => {
     const allNodes = optionsTree.flatten();
     const nodesByDsId = {};
@@ -43,12 +43,12 @@ The dsId must be unique.`
         "DSMenuButton:\nSome items are activable, but onActivateItem is not provided.\n\nYou must provide onActivateItem to handle activation."
       );
     }
-    if (hasSelection && (!onItemSelected || !selectedItems)) {
+    if (hasSelection && (!onItemSelected || !selectedNodes)) {
       throw new Error(
-        "DSMenuButton:\nSome items are selectionable, but onItemSelected or selectedItems are not provided.\n\nYou must provide onItemSelected and selectedItems to handle selection."
+        "DSMenuButton:\nSome items are selectionable, but onItemSelected or selectedNodes are not provided.\n\nYou must provide onItemSelected and selectedNodes to handle selection."
       );
     }
-  }, [onActivateItem, onItemSelected, selectedItems, optionsTree]);
+  }, [onActivateItem, onItemSelected, selectedNodes, optionsTree]);
 };
 export {
   useAdvancedValidation