@elliemae/ds-menu-button 3.46.0-rc.1 → 3.46.0-rc.11

package/dist/cjs/utils/useOptionsArrayToDsTree.js

@@ -34,21 +34,28 @@ module.exports = __toCommonJS(useOptionsArrayToDsTree_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_ds_tree_model = require("@elliemae/ds-tree-model");
+var import_react_desc_prop_types = require("../react-desc-prop-types.js");
 const useDsTreeOpts = {
   getUniqueId: (item) => item.dsId
 };
-const useOptionsArrayToDsTree = ({ options, instanceUid }) => {
+const useOptionsArrayToDsTree = ({
+  options,
+  instanceUid,
+  propsWithDefault
+}) => {
+  const { maxHeight } = propsWithDefault || import_react_desc_prop_types.menuSpecificDefaultProps;
   const rootNode = import_react.default.useMemo(
     () => ({
       dsId: `root-${instanceUid}`,
       type: "ROOT_ITEM",
-      subitems: options
+      subitems: options,
+      maxHeight
       // 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]
+    [instanceUid, maxHeight, options]
   );
   return (0, import_ds_tree_model.useDSTree)(rootNode, useDsTreeOpts);
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/useOptionsArrayToDsTree.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,2BAA0B;AAI1B,MAAM,gBAA6E;AAAA,EACjF,aAAa,CAAC,SAAS,KAAK;AAC9B;AASO,MAAM,0BAA0B,CAAC,EAAE,SAAS,YAAY,MAA6C;AAE1G,QAAM,WAAW,aAAAA,QAAM;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,aAAO,gCAA2C,UAAU,aAAa;AAC3E;",
+  "sourcesContent": ["import React from 'react';\nimport { useDSTree } from '@elliemae/ds-tree-model';\nimport type { UseDSTreeT } from '@elliemae/ds-tree-model';\nimport { type DSMenuButtonT, menuSpecificDefaultProps } 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  propsWithDefault?: DSMenuButtonT.MenuSpecifiDefaultProps;\n};\n\ntype RootNodeType = UseDSTreeT.Item<DSMenuButtonT.MenuItemInterface>;\n\nexport const useOptionsArrayToDsTree = ({\n  options,\n  instanceUid,\n  propsWithDefault,\n}: UseOptionsArrayToDsTreeRootNodeConfig) => {\n  const { maxHeight } = propsWithDefault || menuSpecificDefaultProps;\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        maxHeight,\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, maxHeight, options],\n  );\n  return useDSTree<DSMenuButtonT.MenuItemInterface>(rootNode, useDsTreeOpts);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,2BAA0B;AAE1B,mCAA6D;AAE7D,MAAM,gBAA6E;AAAA,EACjF,aAAa,CAAC,SAAS,KAAK;AAC9B;AAUO,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,MAA6C;AAC3C,QAAM,EAAE,UAAU,IAAI,oBAAoB;AAE1C,QAAM,WAAW,aAAAA,QAAM;AAAA,IACrB,OACG;AAAA,MACC,MAAM,QAAQ,WAAW;AAAA,MACzB,MAAM;AAAA,MACN,UAAU;AAAA,MACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAKF;AAAA,IACF,CAAC,aAAa,WAAW,OAAO;AAAA,EAClC;AACA,aAAO,gCAA2C,UAAU,aAAa;AAC3E;",
   "names": ["React"]
 }

package/dist/esm/config/useMenuButton.js

@@ -1,14 +1,17 @@
 import * as React from "react";
-import React2 from "react";
 import { useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import React2 from "react";
 import { uid } from "uid";
-import { DSMenuButtonPropTypes, defaultProps } from "../react-desc-prop-types.js";
-import { useValidateProps } from "./useValidateProps.js";
-import { useSplitInherithedProps } from "./useSplitInherithedProps.js";
-import { useOptionsArrayToDsTree } from "../utils/useOptionsArrayToDsTree.js";
+import { DSMenuButtonPropTypes, menuSpecificDefaultProps } from "../react-desc-prop-types.js";
 import { getFocusableNodes } from "../utils/nodesTypeguardsAndGetters.js";
+import { useOptionsArrayToDsTree } from "../utils/useOptionsArrayToDsTree.js";
+import { useSplitInherithedProps } from "./useSplitInherithedProps.js";
+import { useValidateProps } from "./useValidateProps.js";
 const useMenuButton = (propsFromUser) => {
-  const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
+  const propsWithDefault = useMemoMergePropsWithDefault(
+    propsFromUser,
+    menuSpecificDefaultProps
+  );
   useValidateProps(propsWithDefault, DSMenuButtonPropTypes);
   const xstyledProps = useGetXstyledProps(propsWithDefault);
   const instanceUid = React2.useMemo(() => `menu-button${uid(5)}`, []);
@@ -16,7 +19,8 @@ const useMenuButton = (propsFromUser) => {
   const optionsArray = Array.isArray(appOptions) ? appOptions : [];
   const treeRootNodeFromOptionsArrayIfArray = useOptionsArrayToDsTree({
     options: optionsArray,
-    instanceUid
+    instanceUid,
+    propsWithDefault
     // this typecast is a safe type reconciliation, typescript checks they are compatible
     // this typecast let us avoid to have to do the ` | OtherCompatibleType` dance
   }).getRoot();
@@ -30,19 +34,6 @@ const useMenuButton = (propsFromUser) => {
     focusableNodes,
     treeRootNode
   });
-  const allNodes = treeRootNode.flatten();
-  const nodesWithRepeatedDsId = allNodes.filter(
-    (node, index, self) => self.findIndex((n) => n.dsId === node.dsId) !== index
-  );
-  if (nodesWithRepeatedDsId.length > 0) {
-    throw new Error(
-      `DSMenuButton:
-The following dsId are repeated:
-${nodesWithRepeatedDsId.map((n) => n.dsId).join("\n ")}
-
-The dsId must be unique.`
-    );
-  }
   return React2.useMemo(
     () => ({
       propsWithDefault,

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", "import React from 'react';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSMenuButtonT, DSMenuButtonPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useSplitInherithedProps } from './useSplitInherithedProps.js';\nimport { useOptionsArrayToDsTree } from '../utils/useOptionsArrayToDsTree.js';\nimport { getFocusableNodes } from '../utils/nodesTypeguardsAndGetters.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  // =============================================================================\n  // if any item as a repeated dsId, we must throw an error,\n  //   the component will not work properly if the dsId is not guaranteed to be unique\n  //   (only validating focusableNodes may work, but as a good practice it's better to validate the whole tree)\n  // =============================================================================\n  const allNodes = treeRootNode.flatten();\n  const nodesWithRepeatedDsId = allNodes.filter(\n    (node, index, self) => self.findIndex((n) => n.dsId === node.dsId) !== index,\n  );\n  if (nodesWithRepeatedDsId.length > 0) {\n    throw new Error(\n      `DSMenuButton:\\nThe following dsId are repeated:\\n${nodesWithRepeatedDsId\n        .map((n) => n.dsId)\n        .join('\\n ')}\\n\\nThe dsId must be unique.`,\n    );\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;ACAvB,OAAOA,YAAW;AAClB,SAAS,oBAAoB,oCAAoC;AACjE,SAAS,WAAW;AACpB,SAA6B,uBAAuB,oBAAoB;AACxE,SAAS,wBAAwB;AACjC,SAAS,+BAA+B;AACxC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAO3B,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;AAOD,QAAM,WAAW,aAAa,QAAQ;AACtC,QAAM,wBAAwB,SAAS;AAAA,IACrC,CAAC,MAAM,OAAO,SAAS,KAAK,UAAU,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,MAAM;AAAA,EACzE;AACA,MAAI,sBAAsB,SAAS,GAAG;AACpC,UAAM,IAAI;AAAA,MACR;AAAA;AAAA,EAAoD,sBACjD,IAAI,CAAC,MAAM,EAAE,IAAI,EACjB,KAAK,KAAK,CAAC;AAAA;AAAA;AAAA,IAChB;AAAA,EACF;AAEA,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, menuSpecificDefaultProps, type DSMenuButtonT } from '../react-desc-prop-types.js';\nimport { getFocusableNodes } from '../utils/nodesTypeguardsAndGetters.js';\nimport { useOptionsArrayToDsTree } from '../utils/useOptionsArrayToDsTree.js';\nimport { useSplitInherithedProps } from './useSplitInherithedProps.js';\nimport { useValidateProps } from './useValidateProps.js';\nexport interface MenuButtonCTX extends ReturnType<typeof useSplitInherithedProps> {\n  propsWithDefault: DSMenuButtonT.InternalProps;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useMenuButton = (propsFromUser: DSMenuButtonT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSMenuButtonT.InternalProps>(\n    propsFromUser,\n    menuSpecificDefaultProps,\n  );\n  useValidateProps(propsWithDefault, DSMenuButtonPropTypes);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const instanceUid = React.useMemo(() => `menu-button${uid(5)}`, []);\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n\n  // =============================================================================\n  // React hooks can't be invoked conditionally...\n  // =============================================================================\n\n  // As per intended WIDGET API, user can provide options as an array of \"items\" or an array of \"nodes\"\n  // we do the conversion from \"items\" to \"nodes\" here,\n  //   because the `parts` require the \"nodes\" extra properties to handle the logic and rendering\n  const { options: appOptions } = propsWithDefault;\n  const optionsArray: DSMenuButtonT.MenuItemInterface[] = Array.isArray(appOptions) ? appOptions : [];\n\n  const treeRootNodeFromOptionsArrayIfArray = useOptionsArrayToDsTree({\n    options: optionsArray,\n    instanceUid,\n    propsWithDefault,\n    // this typecast is a safe type reconciliation, typescript checks they are compatible\n    // this typecast let us avoid to have to do the ` | OtherCompatibleType` dance\n  }).getRoot() as DSMenuButtonT.MenuNode;\n  const treeRootNode = React.useMemo(\n    () => (Array.isArray(appOptions) ? treeRootNodeFromOptionsArrayIfArray : appOptions),\n    [appOptions, treeRootNodeFromOptionsArrayIfArray],\n  );\n\n  // =============================================================================\n  // We calculate the focusableNodes from the treeRootNode.plainChildren via getFocusableNodes\n  // =============================================================================\n  const focusableNodes = React.useMemo(() => getFocusableNodes(treeRootNode), [treeRootNode]);\n  const splitInherithedProps = useSplitInherithedProps({\n    propsWithDefault,\n    focusableNodes,\n    treeRootNode,\n  });\n\n  return React.useMemo<MenuButtonCTX>(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      ...splitInherithedProps,\n    }),\n    [propsWithDefault, xstyledProps, instanceUid, splitInherithedProps],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,oBAAoB,oCAAoC;AACjE,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB,SAAS,uBAAuB,gCAAoD;AACpF,SAAS,yBAAyB;AAClC,SAAS,+BAA+B;AACxC,SAAS,+BAA+B;AACxC,SAAS,wBAAwB;AAO1B,MAAM,gBAAgB,CAAC,kBAAuC;AAInE,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,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,IACA;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,
@@ -24,6 +45,8 @@ const useSplitInherithedProps = ({
     onActivateItem,
     onOpen,
     onClose,
+    maxHeight,
+    // this is not shared with anything at all, it's instead a property of the "root" node, each node (with a submenu) can have its own maxHeight
     ...buttonInheritedProps
   } = propsWithDefault;
   const innerRefSnatchingNode = React2.useCallback(
@@ -35,6 +58,12 @@ const useSplitInherithedProps = ({
     },
     [innerRef]
   );
+  const selectedNodesMap = React2.useMemo(() => {
+    if (selectedItems) {
+      return convertSelectedOptionsToNodes(selectedItems, treeRootNode);
+    }
+    return [];
+  }, [selectedItems, treeRootNode]);
   const menuSpecificProps = React2.useMemo(
     () => ({
       options,
@@ -44,26 +73,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 +97,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      // eslint-disable-next-line no-console\n      console.warn(`Selected option with dsId ${dsId} is not a selectionable node and will be ignored.`);\n      return;\n    }\n    convertedSelection.push(selectedNode);\n  });\n\n  return convertedSelection;\n};\n\ntype UseSplitInherithedPropsConfig = {\n  propsWithDefault: DSMenuButtonT.InternalProps;\n  focusableNodes: DSMenuButtonT.PseudoFocusableMenuNodes[];\n  treeRootNode: DSMenuButtonT.MenuNode;\n};\nexport const useSplitInherithedProps = ({\n  propsWithDefault,\n  focusableNodes,\n  treeRootNode,\n}: UseSplitInherithedPropsConfig) => {\n  const buttonDOMNodeRef = React.useRef<HTMLElement | null>(null);\n  // when this component has been wrote\n  // =============================================================================\n  // MENU BUTTON props are:\n  // Required\n  //  optionsTree, menuSpecificProps\n  // Default (we already have a value because props for this hook are already merged with default props)\n  //  onClickOutside, onOptionClick, openedSubmenus, onSubmenuToggle, isLoading, isSkeleton, selectedOptions\n  // Optional (may or may not be present)\n  //  ItemRenderer\n  // =============================================================================\n  //  Props for the DSMenuBehaviouralContextProvider\n  // =============================================================================\n  // Required\n  //  selectedItems, onItemSelected, onActivateItem,\n  // Optional\n  //  onDisplayedSubmenuChange, onOpen, onClose\n\n  const {\n    options,\n    onClickOutside,\n    onOptionClick,\n    openedSubmenus,\n    onSubmenuToggle,\n    isLoading,\n    isSkeleton,\n    ItemRenderer,\n    innerRef,\n    selectedItems,\n    onDisplayedSubmenuChange,\n    onItemSelected,\n    onActivateItem,\n    onOpen,\n    onClose,\n    maxHeight, // this is not shared with anything at all, it's instead a property of the \"root\" node, each node (with a submenu) can have its own maxHeight\n    ...buttonInheritedProps\n  } = propsWithDefault;\n\n  // the button is allowed to receive innerRef, but we also need to invoke the setButtonDOMNode to store the button node\n  // so we create a functional ref to do both\n  const innerRefSnatchingNode: Required<DSMenuButtonT.Props>['innerRef'] = React.useCallback(\n    (node: HTMLButtonElement) => {\n      buttonDOMNodeRef.current = node;\n      if (innerRef) {\n        resolveRef(innerRef, node);\n      }\n    },\n    [innerRef],\n  );\n  // in the WIDGET API, the user can provide selectedItems as an array of \"items\" or an array of \"nodes\"\n  //  the component needs the \"nodes\" to handle the logic and rendering & accessibility\n  //  if the user provides \"items\", we convert them to \"nodes\" here\n  const selectedNodesMap = React.useMemo(() => {\n    if (selectedItems) {\n      return convertSelectedOptionsToNodes(selectedItems, treeRootNode);\n    }\n    return [];\n  }, [selectedItems, treeRootNode]);\n\n  const menuSpecificProps = React.useMemo(\n    () => ({\n      options,\n      onClickOutside,\n      onOptionClick,\n      openedSubmenus,\n      onSubmenuToggle,\n      isLoading,\n      isSkeleton,\n      ItemRenderer,\n    }),\n    [options, onClickOutside, onOptionClick, openedSubmenus, onSubmenuToggle, isLoading, isSkeleton, ItemRenderer],\n  );\n\n  return React.useMemo(\n    () => ({\n      menuBehaviouralLayerProps: {\n        buttonDOMNodeRef,\n        selectedNodes: selectedNodesMap,\n        focusableNodes,\n        optionsTree: treeRootNode,\n        onDisplayedSubmenuChange,\n        onItemSelected,\n        onActivateItem,\n        onOpen,\n        onClose,\n      },\n      opinionatedButtonProps: {\n        ...(buttonInheritedProps as DSMenuButtonT.ButtonInheritedProps),\n        innerRef: innerRefSnatchingNode,\n        menuSpecificProps,\n      },\n    }),\n    [\n      selectedNodesMap,\n      focusableNodes,\n      treeRootNode,\n      onDisplayedSubmenuChange,\n      onItemSelected,\n      onActivateItem,\n      onOpen,\n      onClose,\n      buttonInheritedProps,\n      innerRefSnatchingNode,\n      menuSpecificProps,\n    ],\n  );\n};\n"],
+  "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;AAEtC,cAAQ,KAAK,6BAA6B,IAAI,mDAAmD;AACjG;AAAA,IACF;AACA,uBAAmB,KAAK,YAAY;AAAA,EACtC,CAAC;AAED,SAAO;AACT;AAOO,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,MAAqC;AACnC,QAAM,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;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/index.js

@@ -1,10 +1,12 @@
 import * as React from "react";
 import { DSMenuButton, DSMenuButtonWithSchema } from "./DSMenuButton.js";
+import { DSMenuButtonPropTypes } from "./react-desc-prop-types.js";
 import { MENU_BUTTON_SLOTS, MENU_BUTTON_DATA_TESTID, MENU_ITEMS_TYPES } from "./constants/index.js";
 import { isFocusableNode } from "./utils/nodesTypeguardsAndGetters.js";
 import { useOptionsArrayToDsTree } from "./utils/useOptionsArrayToDsTree.js";
 export {
   DSMenuButton,
+  DSMenuButtonPropTypes,
   DSMenuButtonWithSchema,
   MENU_BUTTON_DATA_TESTID,
   MENU_BUTTON_SLOTS,

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport { DSMenuButton, DSMenuButtonWithSchema } from './DSMenuButton.js';\nexport { type DSMenuButtonT } from './react-desc-prop-types.js';\nexport { MENU_BUTTON_SLOTS, MENU_BUTTON_DATA_TESTID, MENU_ITEMS_TYPES } from './constants/index.js';\nexport { isFocusableNode } from './utils/nodesTypeguardsAndGetters.js';\nexport { useOptionsArrayToDsTree } from './utils/useOptionsArrayToDsTree.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,cAAc,8BAA8B;AAErD,SAAS,mBAAmB,yBAAyB,wBAAwB;AAC7E,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport { DSMenuButton, DSMenuButtonWithSchema } from './DSMenuButton.js';\nexport { type DSMenuButtonT, DSMenuButtonPropTypes } from './react-desc-prop-types.js';\nexport { MENU_BUTTON_SLOTS, MENU_BUTTON_DATA_TESTID, MENU_ITEMS_TYPES } from './constants/index.js';\nexport { isFocusableNode } from './utils/nodesTypeguardsAndGetters.js';\nexport { useOptionsArrayToDsTree } from './utils/useOptionsArrayToDsTree.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,cAAc,8BAA8B;AACrD,SAA6B,6BAA6B;AAC1D,SAAS,mBAAmB,yBAAyB,wBAAwB;AAC7E,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;",
   "names": []
 }

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

@@ -5,28 +5,36 @@ import { Grid } from "@elliemae/ds-grid";
 import { describe } from "@elliemae/ds-props-helpers";
 import { styled, xStyledCommonProps } from "@elliemae/ds-system";
 import React2 from "react";
+import { menuSpecificDefaultProps } from "../../react-desc-prop-types.js";
 import { MenuBehaviouralContextProviderContext } from "../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js";
 import { DSMenuItemRendererFactory } from "../DSMenuItemRendererFactory/index.js";
 import { useFlyoutMenu } from "./config/useFlyoutMenu.js";
 import { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from "./constants/index.js";
 import { DSFlyoutMenuPropTypesSchema } from "./react-desc-prop-types.js";
 import { isRootNode } from "../../utils/nodesTypeguardsAndGetters.js";
-const StyledWrapper = styled(Grid, { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.ROOT })`
-  min-width: 150px;
+const StyledWrapper = styled(Grid, {
+  name: DSFlyoutMenuName,
+  slot: FLYOUT_MENU_SLOTS.ROOT
+})`
+  min-width: 1px;
   background-color: white;
   padding: ${({ theme }) => theme.space.xxxs} 0;
   ${xStyledCommonProps}
 `;
 const StyledMenu = styled("div", { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.LIST_WRAPPER })`
+  max-height: ${({ $maxHeight }) => typeof $maxHeight === "number" ? `${$maxHeight}px` : $maxHeight};
+  overflow-y: auto;
   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 +46,12 @@ const DSFlyoutMenu = (props) => {
     },
     [handleSubmenusRefChange, itemNode, mainMenuRef]
   );
+  const handleAnimationStartTrigger = React2.useCallback(() => {
+    setDidAnimationEnd(false);
+  }, []);
+  const handleAnimationEnd = React2.useCallback(() => {
+    setDidAnimationEnd(true);
+  }, []);
   return /* @__PURE__ */ jsx(
     FloatingWrapper,
     {
@@ -45,15 +59,25 @@ const DSFlyoutMenu = (props) => {
       floatingStyles,
       isOpen: isMenuOpen,
       context: floatingContext,
-      children: /* @__PURE__ */ jsx(StyledWrapper, { getOwnerProps: () => propsWithDefault, getOwnerPropsArguments: () => ({}), ...xstyledProps, children: /* @__PURE__ */ jsx(StyledMenu, { role: "menu", innerRef: handleRefChange, children: itemNode.children.map((optionNode) => /* @__PURE__ */ jsx(
-        DSMenuItemRendererFactory,
+      onAnimationStartTriggered: handleAnimationStartTrigger,
+      onAnimationEnd: handleAnimationEnd,
+      children: /* @__PURE__ */ jsx(StyledWrapper, { getOwnerProps: () => propsWithDefault, getOwnerPropsArguments: () => ({}), ...xstyledProps, children: /* @__PURE__ */ jsx(
+        StyledMenu,
         {
-          itemNode: optionNode,
-          ItemRenderer,
-          FlyoutMenuCircularDepInject: DSFlyoutMenu
-        },
-        `flyout-menu-item-${optionNode.dsId}-${instanceUid}`
-      )) }) })
+          role: "menu",
+          innerRef: handleRefChange,
+          $maxHeight: itemNode.plainItem.maxHeight ?? menuSpecificDefaultProps.maxHeight,
+          children: itemNode.children.map((optionNode) => /* @__PURE__ */ jsx(
+            DSMenuItemRendererFactory,
+            {
+              itemNode: optionNode,
+              ItemRenderer,
+              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, menuSpecificDefaultProps } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { DSMenuItemRendererFactory } from '../DSMenuItemRendererFactory/index.js';\nimport { useFlyoutMenu } from './config/useFlyoutMenu.js';\nimport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './constants/index.js';\nimport { DSFlyoutMenuPropTypesSchema, type DSFlyoutMenuT } from './react-desc-prop-types.js';\nimport { isRootNode } from '../../utils/nodesTypeguardsAndGetters.js';\n\nconst StyledWrapper = styled(Grid, {\n  name: DSFlyoutMenuName,\n  slot: FLYOUT_MENU_SLOTS.ROOT,\n})`\n  min-width: 1px;\n  background-color: white;\n  padding: ${({ theme }) => theme.space.xxxs} 0;\n  ${xStyledCommonProps}\n`;\n\nconst StyledMenu = styled('div', { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.LIST_WRAPPER })<{\n  $maxHeight: string | number;\n}>`\n  max-height: ${({ $maxHeight }) => (typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight)};\n  overflow-y: auto;\n  padding: 0;\n  margin: 0;\n`;\n\nconst NoComponentPlaceholder = () => null;\n\nconst DSFlyoutMenu: React.ComponentType<DSFlyoutMenuT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps } = useFlyoutMenu(props);\n  const {\n    instanceUid,\n    globalEventsHelpers: { mainMenuRef, handleSubmenusRefChange },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const [didAnimationEnd, setDidAnimationEnd] = React.useState(false);\n\n  const { setFloatingRef, floatingStyles, floatingContext, ItemRenderer, isMenuOpen, itemNode } = propsWithDefault;\n\n  const handleRefChange = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (isRootNode(itemNode)) {\n        mainMenuRef.current = node;\n        return;\n      }\n      handleSubmenusRefChange(node, itemNode.dsId);\n    },\n    [handleSubmenusRefChange, itemNode, mainMenuRef],\n  );\n\n  const handleAnimationStartTrigger = React.useCallback(() => {\n    setDidAnimationEnd(false);\n  }, []);\n  const handleAnimationEnd = React.useCallback(() => {\n    setDidAnimationEnd(true);\n  }, []);\n\n  return (\n    <FloatingWrapper\n      innerRef={setFloatingRef}\n      floatingStyles={floatingStyles}\n      isOpen={isMenuOpen}\n      context={floatingContext}\n      onAnimationStartTriggered={handleAnimationStartTrigger}\n      onAnimationEnd={handleAnimationEnd}\n    >\n      <StyledWrapper getOwnerProps={() => propsWithDefault} getOwnerPropsArguments={() => ({})} {...xstyledProps}>\n        <StyledMenu\n          role=\"menu\"\n          innerRef={handleRefChange}\n          $maxHeight={itemNode.plainItem.maxHeight ?? menuSpecificDefaultProps.maxHeight}\n        >\n          {itemNode.children.map((optionNode) => (\n            <DSMenuItemRendererFactory\n              key={`flyout-menu-item-${optionNode.dsId}-${instanceUid}`}\n              // DSTree doesn't support children having a polymorphic type, so we need to cast it manually\n              itemNode={optionNode as DSMenuButtonT.MenuNode}\n              ItemRenderer={ItemRenderer}\n              //  we are passing the DSFlyoutMenu component as a prop to the DSMenuItemRendererFactory\n              //    this solves the circular-ish dependency\n              //  the conditional `didAnimationEnd` solves the visual artefact of nested FloatingWrapper wrongly positioned due to animation\n              FlyoutMenuCircularDepInject={didAnimationEnd ? DSFlyoutMenu : NoComponentPlaceholder}\n            />\n          ))}\n        </StyledMenu>\n      </StyledWrapper>\n    </FloatingWrapper>\n  );\n};\n\nDSFlyoutMenu.displayName = DSFlyoutMenuName;\nconst DSFlyoutMenuWithSchema = describe(DSFlyoutMenu);\nDSFlyoutMenuWithSchema.propTypes = DSFlyoutMenuPropTypesSchema;\n\nexport { DSFlyoutMenu, DSFlyoutMenuWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC8EX;AA9EZ,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,0BAA0B;AAC3C,OAAOA,YAAW;AAClB,SAA6B,gCAAgC;AAC7D,SAAS,6CAA6C;AACtD,SAAS,iCAAiC;AAC1C,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB,yBAAyB;AACpD,SAAS,mCAAuD;AAChE,SAAS,kBAAkB;AAE3B,MAAM,gBAAgB,OAAO,MAAM;AAAA,EACjC,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,aAGY,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,IACxC,kBAAkB;AAAA;AAGtB,MAAM,aAAa,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,aAAa,CAAC;AAAA,gBAGjF,CAAC,EAAE,WAAW,MAAO,OAAO,eAAe,WAAW,GAAG,UAAU,OAAO,UAAW;AAAA;AAAA;AAAA;AAAA;AAMrG,MAAM,yBAAyB,MAAM;AAErC,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,kBAAkB,aAAa,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;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,YAAY,SAAS,UAAU,aAAa,yBAAyB;AAAA,UAEpE,mBAAS,SAAS,IAAI,CAAC,eACtB;AAAA,YAAC;AAAA;AAAA,cAGC,UAAU;AAAA,cACV;AAAA,cAIA,6BAA6B,kBAAkB,eAAe;AAAA;AAAA,YAPzD,oBAAoB,WAAW,IAAI,IAAI,WAAW;AAAA,UAQzD,CACD;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
   "names": ["React"]
 }

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

@@ -5,10 +5,7 @@ import {
   globalAttributesPropTypes,
   xstyledPropTypes
 } from "@elliemae/ds-props-helpers";
-import {
-  DSMenuSpecificPropTypes,
-  defaultProps as menuSpecificDefaultProps
-} from "../../react-desc-prop-types.js";
+import { DSMenuSpecificPropTypes, menuSpecificDefaultProps } from "../../react-desc-prop-types.js";
 import { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from "./constants/index.js";
 const defaultProps = { ...menuSpecificDefaultProps };
 const DSFlyoutMenuPropTypes = {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSFlyoutMenu/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { type useFloatingContext } from '@elliemae/ds-floating-context';\nimport {\n  DSMenuSpecificPropTypes,\n  defaultProps as menuSpecificDefaultProps,\n  type DSMenuButtonT,\n} from '../../react-desc-prop-types.js';\nimport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './constants/index.js';\n\nexport declare namespace DSFlyoutMenuT {\n  /*\n   * everything that is specifically added in this namespace declaration and is not part of the original component\n   * is because the original component is an \"opinionated widget\" that offloads a chunk of responsibilities from dev to dimsum\n   * as such, the widget generates those interfaces,\n   *  but the app developer is not supposed to know about them\n   *    untill they go atomic composition (this namespace)\n   */\n  export interface RequiredProps extends DSMenuButtonT.MenuSpecificRequiredProps {\n    isMenuOpen: boolean;\n    itemNode:\n      | DSMenuButtonT.MenuNodeWithSubmenuItem\n      | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem\n      | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem\n      | DSMenuButtonT.MenuNodeActivableWithSubmenuItem\n      | DSMenuButtonT.MenuNodeRootItem;\n    setFloatingRef: ReturnType<typeof useFloatingContext>['refs']['setFloating'];\n    floatingStyles: ReturnType<typeof useFloatingContext>['floatingStyles'];\n    floatingContext: ReturnType<typeof useFloatingContext>['context'];\n  }\n\n  export interface DefaultProps extends DSMenuButtonT.MenuSpecifiDefaultProps {}\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFlyoutMenuName, typeof FLYOUT_MENU_SLOTS>,\n      DSMenuButtonT.MenuSpecificOptionalProps {}\n\n  export interface Props extends RequiredProps, Partial<DefaultProps>, OptionalProps {}\n\n  export interface InternalProps extends RequiredProps, DefaultProps, OptionalProps {}\n}\n\nexport const defaultProps: DSFlyoutMenuT.DefaultProps = { ...menuSpecificDefaultProps };\n\nexport const DSFlyoutMenuPropTypes: DSPropTypesSchema<DSFlyoutMenuT.Props> = {\n  itemNode: PropTypes.object.description('The parent menu node to render the menu from').isRequired,\n  setFloatingRef: PropTypes.func.description(\n    'The function to set the ref of the floating element (from useFloatingContext.refs.setFloating)',\n  ).isRequired,\n  floatingStyles: PropTypes.object.description(\n    'The styles to apply to the floating element to correctly position it (from useFloatingContext.floatingStyles)',\n  ).isRequired,\n  floatingContext: PropTypes.object.description(\n    'The context object from useFloatingContext, used to allow FloatingWrapper correct functionality',\n  ).isRequired,\n  // anchorNode: PropTypes.instanceOf(HTMLElement).isRequired,\n  isMenuOpen: PropTypes.bool.description('Wheter or not this particular instance of the flyout menu is open')\n    .isRequired,\n  ...getPropsPerSlotPropTypes(DSFlyoutMenuName, FLYOUT_MENU_SLOTS),\n  ...globalAttributesPropTypes,\n  // this component is meant to be used from a ds-menu-button compliant API,\n  //  for this reason we want to inherit the DSMenuButton props interface that relates to the menu and not the button...\n  ...DSMenuSpecificPropTypes,\n  ...xstyledPropTypes,\n};\n\nexport const DSFlyoutMenuPropTypesSchema = DSFlyoutMenuPropTypes as unknown as ValidationMap<DSFlyoutMenuT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EACA,gBAAgB;AAAA,OAEX;AACP,SAAS,kBAAkB,yBAAyB;AAkC7C,MAAM,eAA2C,EAAE,GAAG,yBAAyB;AAE/E,MAAM,wBAAgE;AAAA,EAC3E,UAAU,UAAU,OAAO,YAAY,8CAA8C,EAAE;AAAA,EACvF,gBAAgB,UAAU,KAAK;AAAA,IAC7B;AAAA,EACF,EAAE;AAAA,EACF,gBAAgB,UAAU,OAAO;AAAA,IAC/B;AAAA,EACF,EAAE;AAAA,EACF,iBAAiB,UAAU,OAAO;AAAA,IAChC;AAAA,EACF,EAAE;AAAA;AAAA,EAEF,YAAY,UAAU,KAAK,YAAY,mEAAmE,EACvG;AAAA,EACH,GAAG,yBAAyB,kBAAkB,iBAAiB;AAAA,EAC/D,GAAG;AAAA;AAAA;AAAA,EAGH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,8BAA8B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { type useFloatingContext } from '@elliemae/ds-floating-context';\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSMenuSpecificPropTypes, menuSpecificDefaultProps, type DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './constants/index.js';\n\nexport declare namespace DSFlyoutMenuT {\n  /*\n   * everything that is specifically added in this namespace declaration and is not part of the original component\n   * is because the original component is an \"opinionated widget\" that offloads a chunk of responsibilities from dev to dimsum\n   * as such, the widget generates those interfaces,\n   *  but the app developer is not supposed to know about them\n   *    untill they go atomic composition (this namespace)\n   */\n  export interface RequiredProps extends DSMenuButtonT.MenuSpecificRequiredProps {\n    isMenuOpen: boolean;\n    itemNode:\n      | DSMenuButtonT.MenuNodeWithSubmenuItem\n      | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem\n      | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem\n      | DSMenuButtonT.MenuNodeActivableWithSubmenuItem\n      | DSMenuButtonT.MenuNodeRootItem;\n    setFloatingRef: ReturnType<typeof useFloatingContext>['refs']['setFloating'];\n    floatingStyles: ReturnType<typeof useFloatingContext>['floatingStyles'];\n    floatingContext: ReturnType<typeof useFloatingContext>['context'];\n  }\n\n  export interface DefaultProps extends DSMenuButtonT.MenuSpecifiDefaultProps {}\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFlyoutMenuName, typeof FLYOUT_MENU_SLOTS>,\n      DSMenuButtonT.MenuSpecificOptionalProps {}\n\n  export interface Props extends RequiredProps, Partial<DefaultProps>, OptionalProps {}\n\n  export interface InternalProps extends RequiredProps, DefaultProps, OptionalProps {}\n}\n\nexport const defaultProps: DSFlyoutMenuT.DefaultProps = { ...menuSpecificDefaultProps };\n\nexport const DSFlyoutMenuPropTypes: DSPropTypesSchema<DSFlyoutMenuT.Props> = {\n  itemNode: PropTypes.object.description('The parent menu node to render the menu from').isRequired,\n  setFloatingRef: PropTypes.func.description(\n    'The function to set the ref of the floating element (from useFloatingContext.refs.setFloating)',\n  ).isRequired,\n  floatingStyles: PropTypes.object.description(\n    'The styles to apply to the floating element to correctly position it (from useFloatingContext.floatingStyles)',\n  ).isRequired,\n  floatingContext: PropTypes.object.description(\n    'The context object from useFloatingContext, used to allow FloatingWrapper correct functionality',\n  ).isRequired,\n  // anchorNode: PropTypes.instanceOf(HTMLElement).isRequired,\n  isMenuOpen: PropTypes.bool.description('Wheter or not this particular instance of the flyout menu is open')\n    .isRequired,\n  ...getPropsPerSlotPropTypes(DSFlyoutMenuName, FLYOUT_MENU_SLOTS),\n  ...globalAttributesPropTypes,\n  // this component is meant to be used from a ds-menu-button compliant API,\n  //  for this reason we want to inherit the DSMenuButton props interface that relates to the menu and not the button...\n  ...DSMenuSpecificPropTypes,\n  ...xstyledPropTypes,\n};\n\nexport const DSFlyoutMenuPropTypesSchema = DSFlyoutMenuPropTypes as unknown as ValidationMap<DSFlyoutMenuT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,yBAAyB,gCAAoD;AACtF,SAAS,kBAAkB,yBAAyB;AAkC7C,MAAM,eAA2C,EAAE,GAAG,yBAAyB;AAE/E,MAAM,wBAAgE;AAAA,EAC3E,UAAU,UAAU,OAAO,YAAY,8CAA8C,EAAE;AAAA,EACvF,gBAAgB,UAAU,KAAK;AAAA,IAC7B;AAAA,EACF,EAAE;AAAA,EACF,gBAAgB,UAAU,OAAO;AAAA,IAC/B;AAAA,EACF,EAAE;AAAA,EACF,iBAAiB,UAAU,OAAO;AAAA,IAChC;AAAA,EACF,EAAE;AAAA;AAAA,EAEF,YAAY,UAAU,KAAK,YAAY,mEAAmE,EACvG;AAAA,EACH,GAAG,yBAAyB,kBAAkB,iBAAiB;AAAA,EAC/D,GAAG;AAAA;AAAA;AAAA,EAGH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,8BAA8B;",
   "names": []
 }

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

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { useEffect } from "react";
+import { isActivableNode, isSelectionableNode } from "../../../utils/nodesTypeguardsAndGetters.js";
+const useAdvancedValidation = ({ propsWithDefault }) => {
+  const { onActivateItem, onItemSelected, selectedNodes, optionsTree } = propsWithDefault;
+  useEffect(() => {
+    const allNodes = optionsTree.flatten();
+    const nodesByDsId = {};
+    const duplicatedIdsNodes = {};
+    let hasActivation = false;
+    let hasSelection = false;
+    let hasDuplicateDsId = false;
+    allNodes.forEach((node) => {
+      const { dsId } = node;
+      if (!Array.isArray(nodesByDsId[dsId])) {
+        nodesByDsId[dsId] = [node];
+      } else {
+        nodesByDsId[dsId].push(node);
+        hasDuplicateDsId = true;
+        duplicatedIdsNodes[dsId] = nodesByDsId[dsId];
+      }
+      if (isActivableNode(node)) {
+        hasActivation = true;
+      }
+      if (isSelectionableNode(node)) {
+        hasSelection = true;
+      }
+    });
+    if (hasDuplicateDsId) {
+      console.log("duplicatedIdsNodes", duplicatedIdsNodes);
+      throw new Error(
+        `DSMenuButton:
+The following dsId are repeated:
+${Object.keys(duplicatedIdsNodes).join(
+          "\n"
+        )}
+
+The dsId must be unique.`
+      );
+    }
+    if (hasActivation && !onActivateItem) {
+      throw new Error(
+        "DSMenuButton:\nSome items are activable, but onActivateItem is not provided.\n\nYou must provide onActivateItem to handle activation."
+      );
+    }
+    if (hasSelection && (!onItemSelected || !selectedNodes)) {
+      throw new Error(
+        "DSMenuButton:\nSome items are selectionable, but onItemSelected or selectedNodes are not provided.\n\nYou must provide onItemSelected and selectedNodes to handle selection."
+      );
+    }
+  }, [onActivateItem, onItemSelected, selectedNodes, optionsTree]);
+};
+export {
+  useAdvancedValidation
+};
+//# sourceMappingURL=useAdvancedValidation.js.map

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

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