@elliemae/ds-menu-button 3.45.0-rc.1 → 3.45.0-rc.3

package/dist/cjs/DSMenuButton.js

@@ -34,17 +34,28 @@ __export(DSMenuButton_exports, {
 module.exports = __toCommonJS(DSMenuButton_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_useMenuButton = require("./config/useMenuButton.js");
+var import_DSOpinionatedButton = require("./parts/DSOpinionatedButton/index.js");
 var import_constants = require("./constants/index.js");
-var import_DSMenuButtonCTX = require("./DSMenuButtonCTX.js");
-var import_MenuButtonContent = require("./parts/MenuButtonContent.js");
+var import_DSMenuBehaviouralContextProvider = require("./parts/DSMenuBehaviouralContextProvider/DSMenuBehaviouralContextProvider.js");
+const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSMenuButtonName, slot: import_constants.MENU_BUTTON_SLOTS.ROOT })``;
 const DSMenuButton = (props) => {
-  const ctx = (0, import_useMenuButton.useDSMenuButton)(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSMenuButtonCTX.MenuButtonContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuButtonContent.MenuButtonContent, {}) });
+  const { propsWithDefault, opinionatedButtonProps, menuBehaviouralLayerProps } = (0, import_useMenuButton.useMenuButton)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledWrapper,
+    {
+      "data-testid": import_constants.MENU_BUTTON_DATA_TESTID.ROOT,
+      getOwnerProps: () => propsWithDefault,
+      getOwnerPropsArguments: () => ({}),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSMenuBehaviouralContextProvider.DSMenuBehaviouralContextProvider, { ...menuBehaviouralLayerProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSOpinionatedButton.DSOpinionatedButton, { ...opinionatedButtonProps, children: opinionatedButtonProps.children }) })
+    }
+  );
 };
 DSMenuButton.displayName = import_constants.DSMenuButtonName;
 const DSMenuButtonWithSchema = (0, import_ds_props_helpers.describe)(DSMenuButton);
-DSMenuButtonWithSchema.propTypes = import_react_desc_prop_types.DSDMenuButtonPropTypesSchema;
+DSMenuButtonWithSchema.propTypes = import_react_desc_prop_types.DSMenuButtonPropTypesSchema;
 //# sourceMappingURL=DSMenuButton.js.map

package/dist/cjs/DSMenuButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSMenuButton.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type MenuButtonT, DSDMenuButtonPropTypesSchema } from './react-desc-prop-types.js';\nimport { useDSMenuButton } from './config/useMenuButton.js';\nimport { DSMenuButtonName } from './constants/index.js';\nimport { MenuButtonContext } from './DSMenuButtonCTX.js';\nimport { MenuButtonContent } from './parts/MenuButtonContent.js';\n\nconst DSMenuButton = <T extends object = object>(props: MenuButtonT.Props<T>) => {\n  const ctx = useDSMenuButton(props);\n\n  return (\n    <MenuButtonContext.Provider value={ctx}>\n      <MenuButtonContent />\n    </MenuButtonContext.Provider>\n  );\n};\n\nDSMenuButton.displayName = DSMenuButtonName;\nconst DSMenuButtonWithSchema = describe(DSMenuButton);\nDSMenuButtonWithSchema.propTypes = DSDMenuButtonPropTypesSchema;\n\nexport { DSMenuButton, DSMenuButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADajB;AAZN,8BAAyB;AACzB,mCAA+D;AAC/D,2BAAgC;AAChC,uBAAiC;AACjC,6BAAkC;AAClC,+BAAkC;AAElC,MAAM,eAAe,CAA4B,UAAgC;AAC/E,QAAM,UAAM,sCAAgB,KAAK;AAEjC,SACE,4CAAC,yCAAkB,UAAlB,EAA2B,OAAO,KACjC,sDAAC,8CAAkB,GACrB;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSMenuButtonT, DSMenuButtonPropTypesSchema } from './react-desc-prop-types.js';\nimport { useMenuButton } from './config/useMenuButton.js';\nimport { DSOpinionatedButton } from './parts/DSOpinionatedButton/index.js';\nimport { DSMenuButtonName, MENU_BUTTON_SLOTS, MENU_BUTTON_DATA_TESTID } from './constants/index.js';\nimport { DSMenuBehaviouralContextProvider } from './parts/DSMenuBehaviouralContextProvider/DSMenuBehaviouralContextProvider.js';\n\nconst StyledWrapper = styled(Grid, { name: DSMenuButtonName, slot: MENU_BUTTON_SLOTS.ROOT })``;\n\n// what are the responsability of this widget?\n// 1 - receive an API \"A\" and correctly split it into\n//    what goes to the \"menu\"\n//    what goes to the \"button\"\n//    what goes to the \"behavioural layer\"\n// 2 - ensure the behavioural layer is parent of the button & menu\n// 3 - parse any API \"A\" into the correct data structures / high-level concerns\n//     E.G. Accept array of options\n//          -> convert to DSTree\n//     receive an innerRef  that goes to the button\n//          -> make it so we still have a ref to the button in the behavioural layer\nconst DSMenuButton: React.ComponentType<DSMenuButtonT.Props> = (props) => {\n  const { propsWithDefault, opinionatedButtonProps, menuBehaviouralLayerProps } = useMenuButton(props);\n  return (\n    <StyledWrapper\n      data-testid={MENU_BUTTON_DATA_TESTID.ROOT}\n      getOwnerProps={() => propsWithDefault}\n      getOwnerPropsArguments={() => ({})}\n    >\n      <DSMenuBehaviouralContextProvider {...menuBehaviouralLayerProps}>\n        <DSOpinionatedButton {...opinionatedButtonProps}>{opinionatedButtonProps.children}</DSOpinionatedButton>\n      </DSMenuBehaviouralContextProvider>\n    </StyledWrapper>\n  );\n};\n\nDSMenuButton.displayName = DSMenuButtonName;\nconst DSMenuButtonWithSchema = describe(DSMenuButton);\nDSMenuButtonWithSchema.propTypes = DSMenuButtonPropTypesSchema;\n\nexport { DSMenuButton, DSMenuButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCf;AA/BR,uBAAuB;AACvB,qBAAqB;AACrB,8BAAyB;AACzB,mCAAgE;AAChE,2BAA8B;AAC9B,iCAAoC;AACpC,uBAA6E;AAC7E,8CAAiD;AAEjD,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,mCAAkB,MAAM,mCAAkB,KAAK,CAAC;AAa3F,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,kBAAkB,wBAAwB,0BAA0B,QAAI,oCAAc,KAAK;AACnG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,yCAAwB;AAAA,MACrC,eAAe,MAAM;AAAA,MACrB,wBAAwB,OAAO,CAAC;AAAA,MAEhC,sDAAC,4EAAkC,GAAG,2BACpC,sDAAC,kDAAqB,GAAG,wBAAyB,iCAAuB,UAAS,GACpF;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
   "names": []
 }

package/dist/cjs/config/useMenuButton.js

@@ -28,34 +28,65 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useMenuButton_exports = {};
 __export(useMenuButton_exports, {
-  useDSMenuButton: () => useDSMenuButton
+  useMenuButton: () => useMenuButton
 });
 module.exports = __toCommonJS(useMenuButton_exports);
 var React = __toESM(require("react"));
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_uid = require("uid");
 var import_react_desc_prop_types = require("../react-desc-prop-types.js");
 var import_useValidateProps = require("./useValidateProps.js");
-const useDSMenuButton = (propsFromUser) => {
+var import_useSplitInherithedProps = require("./useSplitInherithedProps.js");
+var import_useOptionsArrayToDsTree = require("../utils/useOptionsArrayToDsTree.js");
+var import_nodesTypeguardsAndGetters = require("../utils/nodesTypeguardsAndGetters.js");
+const useMenuButton = (propsFromUser) => {
   const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
-  (0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSDMenuButtonPropTypes);
-  const { selectedKeys, onSelectionChange } = propsWithDefault;
-  const [focusedOption, setFocusedOption] = (0, import_react.useState)(null);
-  const [triggerElementRef, setTriggerElementRef] = (0, import_react.useState)(null);
-  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
-  return (0, import_react.useMemo)(
+  (0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSMenuButtonPropTypes);
+  const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
+  const instanceUid = import_react.default.useMemo(() => `menu-button${(0, import_uid.uid)(5)}`, []);
+  const [buttonDOMNode, setButtonDOMNode] = import_react.default.useState(null);
+  const { options: appOptions } = propsWithDefault;
+  const optionsArray = Array.isArray(appOptions) ? appOptions : [];
+  const treeRootNodeFromOptionsArrayIfArray = (0, import_useOptionsArrayToDsTree.useOptionsArrayToDsTree)({
+    options: optionsArray,
+    instanceUid
+    // 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();
+  const treeRootNode = import_react.default.useMemo(
+    () => Array.isArray(appOptions) ? treeRootNodeFromOptionsArrayIfArray : appOptions,
+    [appOptions, treeRootNodeFromOptionsArrayIfArray]
+  );
+  const focusableNodes = import_react.default.useMemo(() => (0, import_nodesTypeguardsAndGetters.getFocusableNodes)(treeRootNode), [treeRootNode]);
+  const splitInherithedProps = (0, import_useSplitInherithedProps.useSplitInherithedProps)({
+    propsWithDefault,
+    setButtonDOMNode,
+    buttonDOMNode,
+    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 import_react.default.useMemo(
     () => ({
       propsWithDefault,
-      focusedOption,
-      setFocusedOption,
-      selectedKeys,
-      onSelectionChange,
-      triggerElementRef,
-      setTriggerElementRef,
-      isOpen,
-      setIsOpen
+      xstyledProps,
+      instanceUid,
+      ...splitInherithedProps
     }),
-    [propsWithDefault, focusedOption, selectedKeys, onSelectionChange, triggerElementRef, isOpen]
+    [propsWithDefault, xstyledProps, instanceUid, splitInherithedProps]
   );
 };
 //# sourceMappingURL=useMenuButton.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useMenuButton.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useMemo, useState } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { type MenuButtonT, DSDMenuButtonPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useDSMenuButton = <T extends object = object>(propsFromUser: MenuButtonT.Props<T>) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<MenuButtonT.InternalProps<T>>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSDMenuButtonPropTypes);\n\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n\n  const { selectedKeys, onSelectionChange } = propsWithDefault;\n  const [focusedOption, setFocusedOption] = useState<string | null>(null);\n  const [triggerElementRef, setTriggerElementRef] = useState<HTMLElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  return useMemo(\n    () => ({\n      propsWithDefault,\n      focusedOption,\n      setFocusedOption,\n      selectedKeys,\n      onSelectionChange,\n      triggerElementRef,\n      setTriggerElementRef,\n      isOpen,\n      setIsOpen,\n    }),\n    [propsWithDefault, focusedOption, selectedKeys, onSelectionChange, triggerElementRef, isOpen],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,8BAA6C;AAC7C,mCAAuE;AACvE,8BAAiC;AAE1B,MAAM,kBAAkB,CAA4B,kBAAwC;AAIjG,QAAM,uBAAmB,sDAA2D,eAAe,yCAAY;AAC/G,gDAAiB,kBAAkB,mDAAsB;AAMzD,QAAM,EAAE,cAAc,kBAAkB,IAAI;AAC5C,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAwB,IAAI;AACtE,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,uBAA6B,IAAI;AACnF,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAE1C,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,eAAe,cAAc,mBAAmB,mBAAmB,MAAM;AAAA,EAC9F;AACF;",
-  "names": []
+  "sourcesContent": ["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  const [buttonDOMNode, setButtonDOMNode] = React.useState<HTMLElement | null>(null);\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    setButtonDOMNode,\n    buttonDOMNode,\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAAiE;AACjE,iBAAoB;AACpB,mCAAwE;AACxE,8BAAiC;AACjC,qCAAwC;AACxC,qCAAwC;AACxC,uCAAkC;AAO3B,MAAM,gBAAgB,CAAC,kBAAuC;AAInE,QAAM,uBAAmB,sDAA0D,eAAe,yCAAY;AAC9G,gDAAiB,kBAAkB,kDAAqB;AAIxD,QAAM,mBAAe,4CAAmB,gBAAgB;AAKxD,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,kBAAc,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAClE,QAAM,CAAC,eAAe,gBAAgB,IAAI,aAAAA,QAAM,SAA6B,IAAI;AAQjF,QAAM,EAAE,SAAS,WAAW,IAAI;AAChC,QAAM,eAAkD,MAAM,QAAQ,UAAU,IAAI,aAAa,CAAC;AAElG,QAAM,0CAAsC,wDAAwB;AAAA,IAClE,SAAS;AAAA,IACT;AAAA;AAAA;AAAA,EAGF,CAAC,EAAE,QAAQ;AACX,QAAM,eAAe,aAAAA,QAAM;AAAA,IACzB,MAAO,MAAM,QAAQ,UAAU,IAAI,sCAAsC;AAAA,IACzE,CAAC,YAAY,mCAAmC;AAAA,EAClD;AAKA,QAAM,iBAAiB,aAAAA,QAAM,QAAQ,UAAM,oDAAkB,YAAY,GAAG,CAAC,YAAY,CAAC;AAC1F,QAAM,2BAAuB,wDAAwB;AAAA,IACnD;AAAA,IACA;AAAA,IACA;AAAA,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,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,kBAAkB,cAAc,aAAa,oBAAoB;AAAA,EACpE;AACF;",
+  "names": ["React"]
 }

package/dist/cjs/config/useSplitInherithedProps.js

@@ -0,0 +1,141 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useSplitInherithedProps_exports = {};
+__export(useSplitInherithedProps_exports, {
+  useSplitInherithedProps: () => useSplitInherithedProps
+});
+module.exports = __toCommonJS(useSplitInherithedProps_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+const resolveRef = (ref, node) => {
+  if (typeof ref === "function") {
+    ref(node);
+  }
+  if ("current" in ref) {
+    ref.current = node;
+  }
+};
+const useSplitInherithedProps = ({
+  propsWithDefault,
+  setButtonDOMNode,
+  buttonDOMNode,
+  focusableNodes,
+  treeRootNode
+}) => {
+  const buttonDOMNodeRef = import_react.default.useRef(null);
+  const {
+    options,
+    onClickOutside,
+    onOptionClick,
+    openedSubmenus,
+    onSubmenuToggle,
+    isLoading,
+    isSkeleton,
+    selectedOptions,
+    ItemRenderer,
+    innerRef,
+    selectedItems,
+    onDisplayedSubmenuChange,
+    onItemSelected,
+    onActivateItem,
+    onOpen,
+    onClose,
+    ...buttonInheritedProps
+  } = propsWithDefault;
+  const innerRefSnatchingNode = import_react.default.useCallback(
+    (node) => {
+      setButtonDOMNode(node);
+      buttonDOMNodeRef.current = node;
+      if (innerRef) {
+        resolveRef(innerRef, node);
+      }
+    },
+    [innerRef, setButtonDOMNode]
+  );
+  const menuSpecificProps = import_react.default.useMemo(
+    () => ({
+      options,
+      onClickOutside,
+      onOptionClick,
+      openedSubmenus,
+      onSubmenuToggle,
+      isLoading,
+      isSkeleton,
+      selectedOptions,
+      ItemRenderer
+    }),
+    [
+      options,
+      onClickOutside,
+      onOptionClick,
+      openedSubmenus,
+      onSubmenuToggle,
+      isLoading,
+      isSkeleton,
+      selectedOptions,
+      ItemRenderer
+    ]
+  );
+  return import_react.default.useMemo(
+    () => ({
+      menuBehaviouralLayerProps: {
+        buttonDOMNode,
+        buttonDOMNodeRef,
+        selectedItems,
+        focusableNodes,
+        optionsTree: treeRootNode,
+        onDisplayedSubmenuChange,
+        onItemSelected,
+        onActivateItem,
+        onOpen,
+        onClose
+      },
+      opinionatedButtonProps: {
+        ...buttonInheritedProps,
+        innerRef: innerRefSnatchingNode,
+        menuSpecificProps
+      }
+    }),
+    [
+      buttonDOMNode,
+      selectedItems,
+      focusableNodes,
+      treeRootNode,
+      onDisplayedSubmenuChange,
+      onItemSelected,
+      onActivateItem,
+      onOpen,
+      onClose,
+      buttonInheritedProps,
+      innerRefSnatchingNode,
+      menuSpecificProps
+    ]
+  );
+};
+//# sourceMappingURL=useSplitInherithedProps.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/config/useSplitInherithedProps.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* *******************************************************\n * From official source definition\n *\n * Menu Button Pattern\n *  About This Pattern:\n *    A menu button is a button\n *      that opens a menu\n *         (as described in the Menu and Menubar Pattern).\n *\n * Since the menu button is a button, it inherits all the props from the Button component.\n * Since the menu button MUST have a menu, it also have a set of specific props used to handle the menu.\n * Because we build with atomic composition in mind, the \"logic layer\" is separated and has a yet another set of props.\n *\n * This is effectively an OOP \"extension\" of the Button component,\n *  so it has the same props,\n *  BUT also a few more to handle the specific behavior of the menu.\n *\n * this hooks is meant to take all the DSMenuButtonT.InternalProps with default already merged\n * and spit out menuSpecificProps & buttonInheritedProps\n ******************************************************* */\nimport {} from '@elliemae/ds-system';\nimport React from 'react';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { type DSMenuButtonT } from '../react-desc-prop-types.js';\n\n// react references may be functions or objects, this helpers identify the type and act accordingly\nconst resolveRef = (\n  ref: React.MutableRefObject<HTMLElement | null> | React.RefCallback<HTMLElement>,\n  node: HTMLElement,\n) => {\n  if (typeof ref === 'function') {\n    ref(node);\n  }\n  if ('current' in ref) {\n    ref.current = node;\n  }\n};\n\ntype UseSplitInherithedPropsConfig = {\n  propsWithDefault: DSMenuButtonT.InternalProps;\n  buttonDOMNode: HTMLElement | null;\n  setButtonDOMNode: TypescriptHelpersT.StateSetter<HTMLElement | null>;\n  focusableNodes: DSMenuButtonT.PseudoFocusableMenuNodes[];\n  treeRootNode: DSMenuButtonT.MenuNode;\n};\nexport const useSplitInherithedProps = ({\n  propsWithDefault,\n  setButtonDOMNode,\n  buttonDOMNode,\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      setButtonDOMNode(node);\n      buttonDOMNodeRef.current = node;\n      if (innerRef) {\n        resolveRef(innerRef, node);\n      }\n    },\n    [innerRef, setButtonDOMNode],\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        buttonDOMNode,\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      buttonDOMNode,\n      selectedItems,\n      focusableNodes,\n      treeRootNode,\n      onDisplayedSubmenuChange,\n      onItemSelected,\n      onActivateItem,\n      onOpen,\n      onClose,\n      buttonInheritedProps,\n      innerRefSnatchingNode,\n      menuSpecificProps,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBvB,mBAAkB;AAKlB,MAAM,aAAa,CACjB,KACA,SACG;AACH,MAAI,OAAO,QAAQ,YAAY;AAC7B,QAAI,IAAI;AAAA,EACV;AACA,MAAI,aAAa,KAAK;AACpB,QAAI,UAAU;AAAA,EAChB;AACF;AASO,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqC;AACnC,QAAM,mBAAmB,aAAAA,QAAM,OAA2B,IAAI;AAkB9D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAIJ,QAAM,wBAAmE,aAAAA,QAAM;AAAA,IAC7E,CAAC,SAA4B;AAC3B,uBAAiB,IAAI;AACrB,uBAAiB,UAAU;AAC3B,UAAI,UAAU;AACZ,mBAAW,UAAU,IAAI;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,UAAU,gBAAgB;AAAA,EAC7B;AACA,QAAM,oBAAoB,aAAAA,QAAM;AAAA,IAC9B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL,2BAA2B;AAAA,QACzB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,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,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": ["React"]
+}

package/dist/cjs/config/useValidateProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useValidateProps.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport { type MenuButtonT } from '../react-desc-prop-types.js';\nimport { DSMenuButtonName } from '../constants/index.js';\n\nexport const useValidateProps = <T extends object = object>(\n  props: MenuButtonT.InternalProps<T>,\n  propTypes: WeakValidationMap<unknown>,\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSMenuButtonName);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA+C;AAG/C,uBAAiC;AAE1B,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,8DAA+B,OAAO,WAAW,iCAAgB;AACnE;",
+  "sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSMenuButtonT } from '../react-desc-prop-types.js';\nimport { DSMenuButtonName } from '../constants/index.js';\n\nexport const useValidateProps = (props: DSMenuButtonT.InternalProps, propTypes: ValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSMenuButtonName);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA+C;AAG/C,uBAAiC;AAE1B,MAAM,mBAAmB,CAAC,OAAoC,cAA4C;AAE/G,8DAA+B,OAAO,WAAW,iCAAgB;AACnE;",
   "names": []
 }

package/dist/cjs/constants/index.js

@@ -29,15 +29,28 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var constants_exports = {};
 __export(constants_exports, {
   DSMenuButtonName: () => DSMenuButtonName,
-  MENU_BUTTON_DATATEST_ID: () => MENU_BUTTON_DATATEST_ID,
-  MENU_BUTTON_SLOTS: () => MENU_BUTTON_SLOTS
+  MENU_BUTTON_DATA_TESTID: () => MENU_BUTTON_DATA_TESTID,
+  MENU_BUTTON_SLOTS: () => MENU_BUTTON_SLOTS,
+  MENU_ITEMS_TYPES: () => MENU_ITEMS_TYPES
 });
 module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 const DSMenuButtonName = "DSMenuButton";
+const MENU_ITEMS_TYPES = {
+  SEPARATOR: "separator",
+  ACTIVABLE_ITEM: "activable-item",
+  ACTIVABLE_WITH_SUBMENU_ITEM: "activable-with-submenu-item",
+  SKELETON_ITEM: "skeleton-item",
+  MULTIPLE_SELECT_ITEM: "multiple-select-item",
+  MULTIPLE_SELECT_WITH_SUBMENU_ITEM: "multiple-select-with-submenu-item",
+  WITH_SUBMENU_ITEM: "with-submenu-item",
+  SINGLE_SELECT_ITEM: "single-select-item",
+  SINGLE_SELECT_WITH_SUBMENU_ITEM: "single-select-with-submenu-item",
+  GROUP: "group"
+};
 const MENU_BUTTON_SLOTS = {
-  root: "root"
+  ROOT: "root"
 };
-const MENU_BUTTON_DATATEST_ID = (0, import_ds_system.slotObjectToDataTestIds)(DSMenuButtonName, MENU_BUTTON_SLOTS);
+const MENU_BUTTON_DATA_TESTID = (0, import_ds_system.slotObjectToDataTestIds)(DSMenuButtonName, MENU_BUTTON_SLOTS);
 //# sourceMappingURL=index.js.map

package/dist/cjs/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSMenuButtonName = 'DSMenuButton';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const MENU_BUTTON_SLOTS = {\n  root: 'root',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const MENU_BUTTON_DATATEST_ID = slotObjectToDataTestIds(DSMenuButtonName, MENU_BUTTON_SLOTS);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,mBAAmB;AAGzB,MAAM,oBAAoB;AAAA,EAC/B,MAAM;AACR;AAGO,MAAM,8BAA0B,0CAAwB,kBAAkB,iBAAiB;",
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSMenuButtonName = 'DSMenuButton';\n\nexport const MENU_ITEMS_TYPES = {\n  SEPARATOR: 'separator',\n  ACTIVABLE_ITEM: 'activable-item',\n  ACTIVABLE_WITH_SUBMENU_ITEM: 'activable-with-submenu-item',\n  SKELETON_ITEM: 'skeleton-item',\n  MULTIPLE_SELECT_ITEM: 'multiple-select-item',\n  MULTIPLE_SELECT_WITH_SUBMENU_ITEM: 'multiple-select-with-submenu-item',\n  WITH_SUBMENU_ITEM: 'with-submenu-item',\n  SINGLE_SELECT_ITEM: 'single-select-item',\n  SINGLE_SELECT_WITH_SUBMENU_ITEM: 'single-select-with-submenu-item',\n  GROUP: 'group',\n} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const MENU_BUTTON_SLOTS = {\n  ROOT: 'root',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const MENU_BUTTON_DATA_TESTID = slotObjectToDataTestIds(DSMenuButtonName, MENU_BUTTON_SLOTS);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,mBAAmB;AAEzB,MAAM,mBAAmB;AAAA,EAC9B,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,6BAA6B;AAAA,EAC7B,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,mCAAmC;AAAA,EACnC,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,iCAAiC;AAAA,EACjC,OAAO;AACT;AAGO,MAAM,oBAAoB;AAAA,EAC/B,MAAM;AACR;AAGO,MAAM,8BAA0B,0CAAwB,kBAAkB,iBAAiB;",
   "names": []
 }

package/dist/cjs/index.js

@@ -29,13 +29,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   DSMenuButton: () => import_DSMenuButton.DSMenuButton,
-  DSMenuButtonName: () => import_constants.DSMenuButtonName,
   DSMenuButtonWithSchema: () => import_DSMenuButton.DSMenuButtonWithSchema,
-  MENU_BUTTON_DATATEST_ID: () => import_constants.MENU_BUTTON_DATATEST_ID,
-  MENU_BUTTON_SLOTS: () => import_constants.MENU_BUTTON_SLOTS
+  MENU_BUTTON_DATA_TESTID: () => import_constants.MENU_BUTTON_DATA_TESTID,
+  MENU_BUTTON_SLOTS: () => import_constants.MENU_BUTTON_SLOTS,
+  MENU_ITEMS_TYPES: () => import_constants.MENU_ITEMS_TYPES,
+  isFocusableNode: () => import_nodesTypeguardsAndGetters.isFocusableNode,
+  useOptionsArrayToDsTree: () => import_useOptionsArrayToDsTree.useOptionsArrayToDsTree
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
 var import_DSMenuButton = require("./DSMenuButton.js");
 var import_constants = require("./constants/index.js");
+var import_nodesTypeguardsAndGetters = require("./utils/nodesTypeguardsAndGetters.js");
+var import_useOptionsArrayToDsTree = require("./utils/useOptionsArrayToDsTree.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { DSMenuButton, DSMenuButtonWithSchema } from './DSMenuButton.js';\nexport { type MenuButtonT } from './react-desc-prop-types.js';\nexport { DSMenuButtonName, MENU_BUTTON_DATATEST_ID, MENU_BUTTON_SLOTS } from './constants/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAqD;AAErD,uBAA6E;",
+  "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["// 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,0BAAqD;AAErD,uBAA6E;AAC7E,uCAAgC;AAChC,qCAAwC;",
   "names": []
 }

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

@@ -0,0 +1,96 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DSFlyoutMenu_exports = {};
+__export(DSFlyoutMenu_exports, {
+  DSFlyoutMenu: () => DSFlyoutMenu,
+  DSFlyoutMenuWithSchema: () => DSFlyoutMenuWithSchema
+});
+module.exports = __toCommonJS(DSFlyoutMenu_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_system = require("@elliemae/ds-system");
+var import_react = __toESM(require("react"));
+var import_MenuBehaviouralContextProviderCTX = require("../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js");
+var import_DSMenuItemRendererFactory = require("../DSMenuItemRendererFactory/index.js");
+var import_useFlyoutMenu = require("./config/useFlyoutMenu.js");
+var import_constants = require("./constants/index.js");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+var import_nodesTypeguardsAndGetters = require("../../utils/nodesTypeguardsAndGetters.js");
+const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSFlyoutMenuName, slot: import_constants.FLYOUT_MENU_SLOTS.ROOT })`
+  min-width: 150px;
+  background-color: white;
+  ${import_ds_system.xStyledCommonProps}
+`;
+const StyledMenu = (0, import_ds_system.styled)("div", { name: import_constants.DSFlyoutMenuName, slot: import_constants.FLYOUT_MENU_SLOTS.LIST_WRAPPER })`
+  padding: 0;
+  margin: 0;
+`;
+const DSFlyoutMenu = (props) => {
+  const { propsWithDefault, xstyledProps } = (0, import_useFlyoutMenu.useFlyoutMenu)(props);
+  const {
+    instanceUid,
+    globalEventsHelpers: { mainMenuRef, handleSubmenusRefChange }
+  } = import_react.default.useContext(import_MenuBehaviouralContextProviderCTX.MenuBehaviouralContextProviderContext);
+  const { setFloatingRef, floatingStyles, floatingContext, ItemRenderer, isMenuOpen, itemNode } = propsWithDefault;
+  const handleRefChange = import_react.default.useCallback(
+    (node) => {
+      if ((0, import_nodesTypeguardsAndGetters.isRootNode)(itemNode)) {
+        mainMenuRef.current = node;
+        return;
+      }
+      handleSubmenusRefChange(node, itemNode.dsId);
+    },
+    [handleSubmenusRefChange, itemNode, mainMenuRef]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ds_floating_context.FloatingWrapper,
+    {
+      innerRef: setFloatingRef,
+      floatingStyles,
+      isOpen: isMenuOpen,
+      context: floatingContext,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledWrapper, { getOwnerProps: () => propsWithDefault, getOwnerPropsArguments: () => ({}), ...xstyledProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledMenu, { role: "menu", innerRef: handleRefChange, children: itemNode.children.map((optionNode) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_DSMenuItemRendererFactory.DSMenuItemRendererFactory,
+        {
+          itemNode: optionNode,
+          ItemRenderer,
+          FlyoutMenuCircularDepInject: DSFlyoutMenu
+        },
+        `flyout-menu-item-${optionNode.dsId}-${instanceUid}`
+      )) }) })
+    }
+  );
+};
+DSFlyoutMenu.displayName = import_constants.DSFlyoutMenuName;
+const DSFlyoutMenuWithSchema = (0, import_ds_props_helpers.describe)(DSFlyoutMenu);
+DSFlyoutMenuWithSchema.propTypes = import_react_desc_prop_types.DSFlyoutMenuPropTypesSchema;
+//# sourceMappingURL=DSFlyoutMenu.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/DSFlyoutMenu/DSFlyoutMenu.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { DSMenuItemRendererFactory } from '../DSMenuItemRendererFactory/index.js';\nimport { useFlyoutMenu } from './config/useFlyoutMenu.js';\nimport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './constants/index.js';\nimport { DSFlyoutMenuPropTypesSchema, type DSFlyoutMenuT } from './react-desc-prop-types.js';\nimport { isRootNode } from '../../utils/nodesTypeguardsAndGetters.js';\n\nconst StyledWrapper = styled(Grid, { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.ROOT })`\n  min-width: 150px;\n  background-color: white;\n  ${xStyledCommonProps}\n`;\n\nconst StyledMenu = styled('div', { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.LIST_WRAPPER })`\n  padding: 0;\n  margin: 0;\n`;\n\nconst DSFlyoutMenu: React.ComponentType<DSFlyoutMenuT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps } = useFlyoutMenu(props);\n  const {\n    instanceUid,\n    globalEventsHelpers: { mainMenuRef, handleSubmenusRefChange },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n\n  const { setFloatingRef, floatingStyles, floatingContext, ItemRenderer, isMenuOpen, itemNode } = propsWithDefault;\n\n  const handleRefChange = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (isRootNode(itemNode)) {\n        mainMenuRef.current = node;\n        return;\n      }\n      handleSubmenusRefChange(node, itemNode.dsId);\n    },\n    [handleSubmenusRefChange, itemNode, mainMenuRef],\n  );\n\n  return (\n    <FloatingWrapper\n      innerRef={setFloatingRef}\n      floatingStyles={floatingStyles}\n      isOpen={isMenuOpen}\n      context={floatingContext}\n    >\n      <StyledWrapper getOwnerProps={() => propsWithDefault} getOwnerPropsArguments={() => ({})} {...xstyledProps}>\n        <StyledMenu role=\"menu\" innerRef={handleRefChange}>\n          {itemNode.children.map((optionNode) => (\n            <DSMenuItemRendererFactory\n              key={`flyout-menu-item-${optionNode.dsId}-${instanceUid}`}\n              // DSTree doesn't support children having a polymorphic type, so we need to cast it manually\n              itemNode={optionNode as DSMenuButtonT.MenuNode}\n              ItemRenderer={ItemRenderer}\n              //  we are passing the DSFlyoutMenu component as a prop to the DSMenuItemRendererFactory\n              //    this solves the circular-ish dependency\n              FlyoutMenuCircularDepInject={DSFlyoutMenu}\n            />\n          ))}\n        </StyledMenu>\n      </StyledWrapper>\n    </FloatingWrapper>\n  );\n};\n\nDSFlyoutMenu.displayName = DSFlyoutMenuName;\nconst DSFlyoutMenuWithSchema = describe(DSFlyoutMenu);\nDSFlyoutMenuWithSchema.propTypes = DSFlyoutMenuPropTypesSchema;\n\nexport { DSFlyoutMenu, DSFlyoutMenuWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsDX;AAtDZ,iCAAgC;AAChC,qBAAqB;AACrB,8BAAyB;AACzB,uBAA2C;AAC3C,mBAAkB;AAElB,+CAAsD;AACtD,uCAA0C;AAC1C,2BAA8B;AAC9B,uBAAoD;AACpD,mCAAgE;AAChE,uCAA2B;AAE3B,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,mCAAkB,MAAM,mCAAkB,KAAK,CAAC;AAAA;AAAA;AAAA,IAGvF,mCAAkB;AAAA;AAGtB,MAAM,iBAAa,yBAAO,OAAO,EAAE,MAAM,mCAAkB,MAAM,mCAAkB,aAAa,CAAC;AAAA;AAAA;AAAA;AAKjG,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,kBAAkB,aAAa,QAAI,oCAAc,KAAK;AAC9D,QAAM;AAAA,IACJ;AAAA,IACA,qBAAqB,EAAE,aAAa,wBAAwB;AAAA,EAC9D,IAAI,aAAAA,QAAM,WAAW,8EAAqC;AAE1D,QAAM,EAAE,gBAAgB,gBAAgB,iBAAiB,cAAc,YAAY,SAAS,IAAI;AAEhG,QAAM,kBAAkB,aAAAA,QAAM;AAAA,IAC5B,CAAC,SAAyB;AACxB,cAAI,6CAAW,QAAQ,GAAG;AACxB,oBAAY,UAAU;AACtB;AAAA,MACF;AACA,8BAAwB,MAAM,SAAS,IAAI;AAAA,IAC7C;AAAA,IACA,CAAC,yBAAyB,UAAU,WAAW;AAAA,EACjD;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,QAAQ;AAAA,MACR,SAAS;AAAA,MAET,sDAAC,iBAAc,eAAe,MAAM,kBAAkB,wBAAwB,OAAO,CAAC,IAAK,GAAG,cAC5F,sDAAC,cAAW,MAAK,QAAO,UAAU,iBAC/B,mBAAS,SAAS,IAAI,CAAC,eACtB;AAAA,QAAC;AAAA;AAAA,UAGC,UAAU;AAAA,UACV;AAAA,UAGA,6BAA6B;AAAA;AAAA,QANxB,oBAAoB,WAAW,IAAI,IAAI,WAAW;AAAA,MAOzD,CACD,GACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,54 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useFlyoutMenu_exports = {};
+__export(useFlyoutMenu_exports, {
+  useFlyoutMenu: () => useFlyoutMenu
+});
+module.exports = __toCommonJS(useFlyoutMenu_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_uid = require("uid");
+var import_react_desc_prop_types = require("../react-desc-prop-types.js");
+var import_useValidateProps = require("./useValidateProps.js");
+const useFlyoutMenu = (propsFromUser) => {
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
+  (0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSFlyoutMenuPropTypesSchema);
+  const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
+  const instanceUid = import_react.default.useMemo(() => `ds-flyout-menu-${(0, import_uid.uid)(5)}`, []);
+  return import_react.default.useMemo(
+    () => ({
+      propsWithDefault,
+      xstyledProps,
+      instanceUid
+    }),
+    [propsWithDefault, xstyledProps, instanceUid]
+  );
+};
+//# sourceMappingURL=useFlyoutMenu.js.map

package/dist/cjs/parts/DSFlyoutMenu/config/useFlyoutMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSFlyoutMenu/config/useFlyoutMenu.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSFlyoutMenuT, DSFlyoutMenuPropTypesSchema, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface FlyoutMenuReturnedType {\n  propsWithDefault: DSFlyoutMenuT.InternalProps;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useFlyoutMenu = (propsFromUser: DSFlyoutMenuT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSFlyoutMenuT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSFlyoutMenuPropTypesSchema);\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(() => `ds-flyout-menu-${uid(5)}`, []);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n\n  return React.useMemo<FlyoutMenuReturnedType>(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n    }),\n    [propsWithDefault, xstyledProps, instanceUid],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAAiE;AACjE,iBAAoB;AACpB,mCAA8E;AAC9E,8BAAiC;AAQ1B,MAAM,gBAAgB,CAAC,kBAAuC;AAInE,QAAM,uBAAmB,sDAA0D,eAAe,yCAAY;AAC9G,gDAAiB,kBAAkB,wDAA2B;AAI9D,QAAM,mBAAe,4CAAmB,gBAAgB;AAKxD,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,sBAAkB,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAMtE,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,cAAc,WAAW;AAAA,EAC9C;AACF;",
+  "names": ["React"]
+}