@elliemae/ds-menu-button 3.45.0-rc.0 → 3.45.0-rc.2

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace MenuButtonT {\n  export interface RequiredProps<T> {\n    items: Item[];\n    TriggerElement: React.ComponentType<TriggerElementProps<T>>;\n  }\n\n  export interface DefaultProps {\n    selectedKeys: string[];\n    onSelectionChange: (selectedKeys: string[], parentId: string, item: MenuButtonT.Item) => void;\n  }\n\n  export interface OptionalProps<T extends object> {\n    triggerElementProps?: T;\n    selectionMode?: 'single' | 'multiple';\n    menuMinWidth?: string | number;\n    ItemRenderer?: ItemRendererT;\n  }\n\n  export interface Props<T extends object = object>\n    extends Partial<DefaultProps>,\n      OptionalProps<T>,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps<T> | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps<T> {}\n\n  export interface InternalProps<T extends object = object>\n    extends DefaultProps,\n      OptionalProps<T>,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps<T> | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps<T> {}\n\n  export type Item = {\n    dsId: string;\n    label: string;\n    type?: 'separator' | 'section';\n    childrens?: Item[];\n    subitems?: Item[];\n    selectionMode?: 'single' | 'multiple';\n    minWidth?: string | number;\n    disabled?: boolean;\n  };\n\n  export interface TriggerElementProps<T2> {\n    isOpen: boolean;\n    innerRef: TypescriptHelpersT.AnyRef<HTMLButtonElement | null>;\n    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n    attributes: {\n      'aria-haspopup'?: boolean | 'true' | 'false' | 'dialog' | 'grid' | 'listbox' | 'menu' | 'tree';\n      'aria-expanded': boolean;\n    };\n    listeners: {\n      onKeyDown: (e: React.KeyboardEvent) => void;\n    };\n    triggerElementProps: T2;\n  }\n\n  export type ItemRendererT = React.ComponentType<{ item: Item; isSelected: boolean }>;\n}\n\nexport const defaultProps: MenuButtonT.DefaultProps = {\n  selectedKeys: [],\n  onSelectionChange: () => {},\n};\n\nexport const DSDMenuButtonPropTypes: DSPropTypesSchema<MenuButtonT.Props<object>> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  items: PropTypes.arrayOf(\n    PropTypes.shape({\n      dsId: PropTypes.string.isRequired,\n      label: PropTypes.string,\n      type: PropTypes.oneOf(['separator', 'section', 'single', 'multiple', undefined]),\n    }),\n  ).description('Array of items to be displayed in the dropdown').isRequired,\n  TriggerElement: PropTypes.node.description('Component to be used as the trigger element').isRequired,\n  selectedKeys: PropTypes.arrayOf(PropTypes.string).description('Array of selected keys'),\n  onSelectionChange: PropTypes.func.description('Function to be called when selection changes'),\n  triggerElementProps: PropTypes.object.description('Props to be passed to the trigger element'),\n  selectionMode: PropTypes.oneOf(['single', 'multiple']).description('Selection mode'),\n  menuMinWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'Minimum width of the main dropdown',\n  ),\n  ItemRenderer: PropTypes.node.description('Component to be used to render the items'),\n};\n\nexport const DSDMenuButtonPropTypesSchema = DSDMenuButtonPropTypes as unknown as WeakValidationMap<\n  MenuButtonT.Props<object>\n>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AAgEhE,MAAM,eAAyC;AAAA,EACpD,cAAc,CAAC;AAAA,EACf,mBAAmB,MAAM;AAAA,EAAC;AAC5B;AAEO,MAAM,yBAAuE;AAAA,EAClF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,UAAU;AAAA,IACf,UAAU,MAAM;AAAA,MACd,MAAM,UAAU,OAAO;AAAA,MACvB,OAAO,UAAU;AAAA,MACjB,MAAM,UAAU,MAAM,CAAC,aAAa,WAAW,UAAU,YAAY,MAAS,CAAC;AAAA,IACjF,CAAC;AAAA,EACH,EAAE,YAAY,gDAAgD,EAAE;AAAA,EAChE,gBAAgB,UAAU,KAAK,YAAY,6CAA6C,EAAE;AAAA,EAC1F,cAAc,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,wBAAwB;AAAA,EACtF,mBAAmB,UAAU,KAAK,YAAY,8CAA8C;AAAA,EAC5F,qBAAqB,UAAU,OAAO,YAAY,2CAA2C;AAAA,EAC7F,eAAe,UAAU,MAAM,CAAC,UAAU,UAAU,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnF,cAAc,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE;AAAA,IACtE;AAAA,EACF;AAAA,EACA,cAAc,UAAU,KAAK,YAAY,0CAA0C;AACrF;AAEO,MAAM,+BAA+B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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  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\n  /* ***********************************************************************\n   * Single select items MUST always have a \"group\" as parent\n   *   Failing the condition fails ADA announcements (role='group' -> role='menuitemradio')\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  // 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 ItemRendererT = React.ComponentType<{ itemNode: MenuNode }>;\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   * 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\n  export interface MenuBehaviouralLayerRequiredProps {\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\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   * 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   * 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    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   * 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 extends RequiredProps, Partial<DefaultProps>, OptionalProps {}\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 extends RequiredProps, DefaultProps, 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\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',\n  ).isRequired,\n\n  onItemSelected: PropTypes.func.description('IoC function in charge of handling the selection of a menu item')\n    .signature(`((\n      newSelection: DSMenuButtonT.PseudoFocusableMenuNodes[],\n      metainfo: { itemNode: DSMenuButtonT.PseudoFocusableMenuNodes; event?: React.SyntheticEvent },\n    ) => void)`).isRequired,\n  onActivateItem: PropTypes.func.description(\n    'IoC function in charge of handling the activation (NOT INVOKED ON SELECTION) of a menu item',\n  ).signature(`((\n      itemNode: DSMenuButtonT.PseudoFocusableMenuNodes,\n      metainfo: { itemNode: DSMenuButtonT.PseudoFocusableMenuNodes; event?: React.SyntheticEvent },\n    ) => void)`).isRequired,\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,gCAAgC;AACpD,SAAS,2BAA2B;AAMpC,SAAS,kBAAkB,yBAAgD;AA8ZpE,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;AAEO,MAAM,gCAA4F;AAAA,EACvG,eAAe,UAAU,QAAQ,UAAU,MAAM,EAAE;AAAA,IACjD;AAAA,EACF,EAAE;AAAA,EAEF,gBAAgB,UAAU,KAAK,YAAY,iEAAiE,EACzG,UAAU;AAAA;AAAA;AAAA,eAGA,EAAE;AAAA,EACf,gBAAgB,UAAU,KAAK;AAAA,IAC7B;AAAA,EACF,EAAE,UAAU;AAAA;AAAA;AAAA,eAGC,EAAE;AAAA,EACf,QAAQ,UAAU,KAAK,YAAY,mDAAmD,EAAE,UAAU,YAAY;AAAA,EAC9G,SAAS,UAAU,KAAK,YAAY,oDAAoD,EAAE,UAAU,YAAY;AAAA,EAChH,0BAA0B,UAAU,KAAK,YAAY,gEAAgE,EAClH,UAAU;AAAA;AAAA;AAAA,eAGA;AACf;AAEO,MAAM,0BAA8E;AAAA,EACzF,cAAc,UAAU,KAAK,YAAY,0CAA0C;AAAA,EACnF,gBAAgB,UAAU,KACvB,YAAY,kFAAkF,EAC9F,aAAa,MAAM,IAAI;AAAA,EAC1B,iBAAiB,UAAU,OACxB;AAAA,IACC;AAAA,EACF,EACC,aAAa,CAAC,CAAC;AAAA,EAClB,eAAe,UAAU,KACtB;AAAA,IACC;AAAA,EACF,EACC,aAAa,MAAM,IAAI;AAAA,EAC1B,gBAAgB,UAAU,OACvB;AAAA,IACC;AAAA,EACF,EACC,aAAa,CAAC,CAAC;AAAA,EAClB,iBAAiB,UAAU,KACxB,YAAY,wDAAwD,EACpE;AAAA,IACC;AAAA,EACF,EACC,aAAa,MAAM,IAAI;AAAA,EAC1B,WAAW,UAAU,KAClB,YAAY,6DAA6D,EACzE,aAAa,KAAK;AAAA,EACrB,YAAY,UAAU,KAAK,YAAY,oDAAoD,EAAE,aAAa,KAAK;AACjH;AAEO,MAAM,wBAAgE;AAAA,EAC3E,SAAS,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,CAAC,EAAE;AAAA,IAChE;AAAA,EACF,EAAE;AAAA,EACF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG,yBAAyB,kBAAkB,iBAAiB;AACjE;AAEO,MAAM,8BAA8B;",
   "names": []
 }

package/dist/esm/utils/nodesTypeguardsAndGetters.js

@@ -0,0 +1,93 @@
+import * as React from "react";
+import { MENU_ITEMS_TYPES } from "../constants/index.js";
+const isActivableNode = (item) => {
+  const node = item;
+  return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === MENU_ITEMS_TYPES.ACTIVABLE_ITEM;
+};
+const isActivableWithSubmenuNode = (item) => {
+  const node = item;
+  return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === 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 === MENU_ITEMS_TYPES.SKELETON_ITEM;
+};
+const isMultipleSelectOnlyNode = (item) => {
+  const node = item;
+  return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === 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 === 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 === 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 === 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 === 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 === MENU_ITEMS_TYPES.WITH_SUBMENU_ITEM || node.plainItem?.type === MENU_ITEMS_TYPES.MULTIPLE_SELECT_ITEM || node.plainItem?.type === MENU_ITEMS_TYPES.MULTIPLE_SELECT_WITH_SUBMENU_ITEM || node.plainItem?.type === MENU_ITEMS_TYPES.SINGLE_SELECT_ITEM || node.plainItem?.type === MENU_ITEMS_TYPES.SINGLE_SELECT_WITH_SUBMENU_ITEM || node.plainItem?.type === MENU_ITEMS_TYPES.ACTIVABLE_ITEM || node.plainItem?.type === MENU_ITEMS_TYPES.ACTIVABLE_WITH_SUBMENU_ITEM || node.plainItem?.type === MENU_ITEMS_TYPES.SKELETON_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 === MENU_ITEMS_TYPES.SEPARATOR;
+};
+const isGroup = (item) => {
+  const node = item;
+  return typeof item === "object" && item !== null && typeof node.plainItem === "object" && node.plainItem?.type === 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 isMenuNodeAllowedToHaveChildren = (item) => isRootNode(item) || isWithSubmenuNode(item) || isGroup(item) || isSingleSelectNodeWithSubmenu(item) || isMultipleSelectWithSubmenuNode(item) || isActivableWithSubmenuNode(item);
+export {
+  getFocusableNodes,
+  getSelectionableNodes,
+  getWithSubmenuNodes,
+  isActivableNode,
+  isActivableWithSubmenuNode,
+  isFocusableNode,
+  isGroup,
+  isMenuNodeAllowedToHaveChildren,
+  isMultipleSelectNode,
+  isMultipleSelectOnlyNode,
+  isMultipleSelectWithSubmenuNode,
+  isRootNode,
+  isSelectionableNode,
+  isSelectionableWithSubmenuNode,
+  isSeparatorNode,
+  isSingleSelectNode,
+  isSingleSelectNodeWithSubmenu,
+  isSingleSelectOnlyNode,
+  isSkeletonNode,
+  isWithSubmenuNode,
+  isWithSubmenuOnlyNode
+};
+//# sourceMappingURL=nodesTypeguardsAndGetters.js.map

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

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

package/dist/esm/utils/useOptionsArrayToDsTree.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+import React2 from "react";
+import { useDSTree } from "@elliemae/ds-tree-model";
+const useDsTreeOpts = {
+  getUniqueId: (item) => item.dsId
+};
+const useOptionsArrayToDsTree = ({ options, instanceUid }) => {
+  const rootNode = React2.useMemo(
+    () => ({
+      dsId: `root-${instanceUid}`,
+      type: "ROOT_ITEM",
+      subitems: options
+      // as unknown as RootNodeType is because currently
+      //  the DS tree model doesn't support the type of the root node being different from the subitems
+      //  in practice, this is fine because the root node is never rendered & the subitems are the only thing that matters
+      //  will be addresssed via PUI-XXXX
+    }),
+    [instanceUid, options]
+  );
+  return useDSTree(rootNode, useDsTreeOpts);
+};
+export {
+  useOptionsArrayToDsTree
+};
+//# sourceMappingURL=useOptionsArrayToDsTree.js.map

package/dist/esm/utils/useOptionsArrayToDsTree.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/useOptionsArrayToDsTree.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useDSTree } from '@elliemae/ds-tree-model';\nimport type { UseDSTreeT } from '@elliemae/ds-tree-model';\nimport { type DSMenuButtonT } from '../react-desc-prop-types.js';\n\nconst useDsTreeOpts: UseDSTreeT.SecondParameter<DSMenuButtonT.MenuItemInterface> = {\n  getUniqueId: (item) => item.dsId,\n};\n\ntype UseOptionsArrayToDsTreeRootNodeConfig = {\n  options: DSMenuButtonT.MenuItemInterface[];\n  instanceUid: string;\n};\n\ntype RootNodeType = UseDSTreeT.Item<DSMenuButtonT.MenuItemInterface>;\n\nexport const useOptionsArrayToDsTree = ({ options, instanceUid }: UseOptionsArrayToDsTreeRootNodeConfig) => {\n  // we need to create the root node that the app dev doesn't need to worry about\n  const rootNode = React.useMemo<RootNodeType>(\n    () =>\n      ({\n        dsId: `root-${instanceUid}`,\n        type: 'ROOT_ITEM',\n        subitems: options,\n        // as unknown as RootNodeType is because currently\n        //  the DS tree model doesn't support the type of the root node being different from the subitems\n        //  in practice, this is fine because the root node is never rendered & the subitems are the only thing that matters\n        //  will be addresssed via PUI-XXXX\n      }) as unknown as RootNodeType,\n    [instanceUid, options],\n  );\n  return useDSTree<DSMenuButtonT.MenuItemInterface>(rootNode, useDsTreeOpts);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,iBAAiB;AAI1B,MAAM,gBAA6E;AAAA,EACjF,aAAa,CAAC,SAAS,KAAK;AAC9B;AASO,MAAM,0BAA0B,CAAC,EAAE,SAAS,YAAY,MAA6C;AAE1G,QAAM,WAAWA,OAAM;AAAA,IACrB,OACG;AAAA,MACC,MAAM,QAAQ,WAAW;AAAA,MACzB,MAAM;AAAA,MACN,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAKZ;AAAA,IACF,CAAC,aAAa,OAAO;AAAA,EACvB;AACA,SAAO,UAA2C,UAAU,aAAa;AAC3E;",
+  "names": ["React"]
+}

package/dist/types/DSMenuButton.d.ts

@@ -1,7 +1,5 @@
-import { type MenuButtonT } from './react-desc-prop-types.js';
-declare const DSMenuButton: {
-    <T extends object = object>(props: MenuButtonT.Props<T>): import("react/jsx-runtime.js").JSX.Element;
-    displayName: string;
-};
-declare const DSMenuButtonWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<MenuButtonT.Props<object>>;
+import React from 'react';
+import { type DSMenuButtonT } from './react-desc-prop-types.js';
+declare const DSMenuButton: React.ComponentType<DSMenuButtonT.Props>;
+declare const DSMenuButtonWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSMenuButtonT.Props>;
 export { DSMenuButton, DSMenuButtonWithSchema };

package/dist/types/config/useMenuButton.d.ts

@@ -1,13 +1,9 @@
-/// <reference types="react" />
-import { type MenuButtonT } from '../react-desc-prop-types.js';
-export declare const useDSMenuButton: <T extends object = object>(propsFromUser: MenuButtonT.Props<T>) => {
-    propsWithDefault: MenuButtonT.InternalProps<T>;
-    focusedOption: string | null;
-    setFocusedOption: import("react").Dispatch<import("react").SetStateAction<string | null>>;
-    selectedKeys: string[];
-    onSelectionChange: (selectedKeys: string[], parentId: string, item: MenuButtonT.Item) => void;
-    triggerElementRef: HTMLElement | null;
-    setTriggerElementRef: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
-    isOpen: boolean;
-    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-};
+import { useGetXstyledProps } from '@elliemae/ds-props-helpers';
+import { type DSMenuButtonT } from '../react-desc-prop-types.js';
+import { useSplitInherithedProps } from './useSplitInherithedProps.js';
+export interface MenuButtonCTX extends ReturnType<typeof useSplitInherithedProps> {
+    propsWithDefault: DSMenuButtonT.InternalProps;
+    xstyledProps: ReturnType<typeof useGetXstyledProps>;
+    instanceUid: string;
+}
+export declare const useMenuButton: (propsFromUser: DSMenuButtonT.Props) => MenuButtonCTX;