@elliemae/ds-menu-button 3.60.0-next.9 → 3.61.0-rc.1

package/dist/cjs/DSMenuButton.js

@@ -42,18 +42,21 @@ var import_useMenuButton = require("./config/useMenuButton.js");
 var import_DSOpinionatedButton = require("./parts/DSOpinionatedButton/index.js");
 var import_constants = require("./constants/index.js");
 var import_DSMenuBehaviouralContextProvider = require("./parts/DSMenuBehaviouralContextProvider/DSMenuBehaviouralContextProvider.js");
+var import_MenuButtonContextProviderCTX = require("./MenuButtonContextProviderCTX.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 { propsWithDefault, opinionatedButtonProps, menuBehaviouralLayerProps } = (0, import_useMenuButton.useMenuButton)(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const ctx = (0, import_useMenuButton.useMenuButton)(props);
+  const { opinionatedButtonProps, ownerProps, menuBehaviouralLayerProps } = ctx;
+  const { getOwnerProps, getOwnerPropsArguments } = ownerProps;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuButtonContextProviderCTX.MenuButtonContextProvider.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     StyledWrapper,
     {
       "data-testid": import_constants.MENU_BUTTON_DATA_TESTID.ROOT,
-      getOwnerProps: () => propsWithDefault,
-      getOwnerPropsArguments: () => ({}),
+      getOwnerProps,
+      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);

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 { 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;",
+  "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';\nimport { MenuButtonContextProvider } from './MenuButtonContextProviderCTX.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 ctx = useMenuButton(props);\n  const { opinionatedButtonProps, ownerProps, menuBehaviouralLayerProps } = ctx;\n\n  const { getOwnerProps, getOwnerPropsArguments } = ownerProps;\n  return (\n    <MenuButtonContextProvider.Provider value={ctx}>\n      <StyledWrapper\n        data-testid={MENU_BUTTON_DATA_TESTID.ROOT}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <DSMenuBehaviouralContextProvider {...menuBehaviouralLayerProps}>\n          <DSOpinionatedButton {...opinionatedButtonProps}>{opinionatedButtonProps.children}</DSOpinionatedButton>\n        </DSMenuBehaviouralContextProvider>\n      </StyledWrapper>\n    </MenuButtonContextProvider.Provider>\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;ADqCb;AApCV,uBAAuB;AACvB,qBAAqB;AACrB,8BAAyB;AACzB,mCAAgE;AAChE,2BAA8B;AAC9B,iCAAoC;AACpC,uBAA6E;AAC7E,8CAAiD;AACjD,0CAA0C;AAE1C,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,mCAAkB,MAAM,mCAAkB,KAAK,CAAC;AAa3F,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,UAAM,oCAAc,KAAK;AAC/B,QAAM,EAAE,wBAAwB,YAAY,0BAA0B,IAAI;AAE1E,QAAM,EAAE,eAAe,uBAAuB,IAAI;AAClD,SACE,4CAAC,8DAA0B,UAA1B,EAAmC,OAAO,KACzC;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,yCAAwB;AAAA,MACrC;AAAA,MACA;AAAA,MAEA,sDAAC,4EAAkC,GAAG,2BACpC,sDAAC,kDAAqB,GAAG,wBAAyB,iCAAuB,UAAS,GACpF;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
   "names": []
 }

package/dist/cjs/MenuButtonContextProviderCTX.js

@@ -0,0 +1,40 @@
+"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 MenuButtonContextProviderCTX_exports = {};
+__export(MenuButtonContextProviderCTX_exports, {
+  MenuButtonContextProvider: () => MenuButtonContextProvider,
+  default: () => MenuButtonContextProviderCTX_default
+});
+module.exports = __toCommonJS(MenuButtonContextProviderCTX_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+const defaultContext = {};
+const MenuButtonContextProvider = (0, import_react.createContext)(defaultContext);
+var MenuButtonContextProviderCTX_default = MenuButtonContextProvider;
+//# sourceMappingURL=MenuButtonContextProviderCTX.js.map

package/dist/cjs/MenuButtonContextProviderCTX.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/MenuButtonContextProviderCTX.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { createContext } from 'react';\nimport type { MenuButtonCTX } from './config/useMenuButton.js';\n\nconst defaultContext = {} as MenuButtonCTX;\n\n/** Context for cross component communication */\nexport const MenuButtonContextProvider = createContext<MenuButtonCTX>(defaultContext);\n\nexport default MenuButtonContextProvider;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAG9B,MAAM,iBAAiB,CAAC;AAGjB,MAAM,gCAA4B,4BAA6B,cAAc;AAEpF,IAAO,uCAAQ;",
+  "names": []
+}

package/dist/cjs/config/useMenuButton.js

@@ -48,6 +48,7 @@ const useMenuButton = (propsFromUser) => {
   (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 ownerProps = (0, import_ds_props_helpers.useOwnerProps)(propsFromUser);
   const { options: appOptions } = propsWithDefault;
   const optionsArray = Array.isArray(appOptions) ? appOptions : [];
   const treeRootNodeFromOptionsArrayIfArray = (0, import_useOptionsArrayToDsTree.useOptionsArrayToDsTree)({
@@ -72,9 +73,10 @@ const useMenuButton = (propsFromUser) => {
       propsWithDefault,
       xstyledProps,
       instanceUid,
+      ownerProps,
       ...splitInherithedProps
     }),
-    [propsWithDefault, xstyledProps, instanceUid, splitInherithedProps]
+    [propsWithDefault, xstyledProps, ownerProps, 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": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAiE;AACjE,mBAAkB;AAClB,iBAAoB;AACpB,mCAAoF;AACpF,uCAAkC;AAClC,qCAAwC;AACxC,qCAAwC;AACxC,8BAAiC;AAO1B,MAAM,gBAAgB,CAAC,kBAAuC;AAInE,QAAM,uBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,gDAAiB,kBAAkB,kDAAqB;AAIxD,QAAM,mBAAe,4CAAmB,gBAAgB;AAKxD,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,kBAAc,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAYlE,QAAM,EAAE,SAAS,WAAW,IAAI;AAChC,QAAM,eAAkD,MAAM,QAAQ,UAAU,IAAI,aAAa,CAAC;AAElG,QAAM,0CAAsC,wDAAwB;AAAA,IAClE,SAAS;AAAA,IACT;AAAA,IACA;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,EACF,CAAC;AAED,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;",
+  "sourcesContent": ["/* eslint-disable max-statements */\nimport { useGetXstyledProps, useMemoMergePropsWithDefault, useOwnerProps } 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  ownerProps: ReturnType<typeof useOwnerProps<DSMenuButtonT.Props>>;\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  const ownerProps = useOwnerProps<DSMenuButtonT.Props>(propsFromUser);\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      ownerProps,\n      ...splitInherithedProps,\n    }),\n    [propsWithDefault, xstyledProps, ownerProps, instanceUid, splitInherithedProps],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAgF;AAChF,mBAAkB;AAClB,iBAAoB;AACpB,mCAAoF;AACpF,uCAAkC;AAClC,qCAAwC;AACxC,qCAAwC;AACxC,8BAAiC;AAQ1B,MAAM,gBAAgB,CAAC,kBAAuC;AAInE,QAAM,uBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,gDAAiB,kBAAkB,kDAAqB;AAIxD,QAAM,mBAAe,4CAAmB,gBAAgB;AAKxD,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,kBAAc,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AASlE,QAAM,iBAAa,uCAAmC,aAAa;AAInE,QAAM,EAAE,SAAS,WAAW,IAAI;AAChC,QAAM,eAAkD,MAAM,QAAQ,UAAU,IAAI,aAAa,CAAC;AAElG,QAAM,0CAAsC,wDAAwB;AAAA,IAClE,SAAS;AAAA,IACT;AAAA,IACA;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,EACF,CAAC;AAED,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,kBAAkB,cAAc,YAAY,aAAa,oBAAoB;AAAA,EAChF;AACF;",
   "names": ["React"]
 }

package/dist/cjs/config/useSplitInherithedProps.js

@@ -71,6 +71,7 @@ const useSplitInherithedProps = ({
     isLoading,
     isSkeleton,
     ItemRenderer,
+    floatingConfig,
     innerRef,
     selectedItems,
     onDisplayedSubmenuChange,
@@ -106,9 +107,20 @@ const useSplitInherithedProps = ({
       onSubmenuToggle,
       isLoading,
       isSkeleton,
-      ItemRenderer
+      ItemRenderer,
+      ...floatingConfig !== void 0 ? { floatingConfig } : {}
     }),
-    [options, onClickOutside, onOptionClick, openedSubmenus, onSubmenuToggle, isLoading, isSkeleton, ItemRenderer]
+    [
+      options,
+      onClickOutside,
+      onOptionClick,
+      openedSubmenus,
+      onSubmenuToggle,
+      isLoading,
+      isSkeleton,
+      ItemRenderer,
+      floatingConfig
+    ]
   );
   return import_react.default.useMemo(
     () => ({

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

@@ -1,7 +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 type {} from '@elliemae/ds-system';\nimport type {} from '@elliemae/pui-theme';\nimport React from 'react';\nimport { type DSMenuButtonT } from '../react-desc-prop-types.js';\nimport { isObjectAMenuNode, isSelectionableNode } 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBvB,mBAAkB;AAElB,uCAAuD;AACvD,wBAA2B;AAS3B,MAAM,gCAAgC,CACpC,eACA,iBAC2C;AAC3C,QAAM,qBAA6D,CAAC;AAEpE,gBAAc,QAAQ,CAAC,iBAAiB;AACtC,UAAM,kBAAkB,KAAC,oDAAkB,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,KAAC,sDAAoB,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,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;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAIJ,QAAM,wBAAmE,aAAAA,QAAM;AAAA,IAC7E,CAAC,SAA4B;AAC3B,uBAAiB,UAAU;AAC3B,UAAI,UAAU;AACZ,0CAAW,UAAU,IAAI;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAIA,QAAM,mBAAmB,aAAAA,QAAM,QAAQ,MAAM;AAC3C,QAAI,eAAe;AACjB,aAAO,8BAA8B,eAAe,YAAY;AAAA,IAClE;AACA,WAAO,CAAC;AAAA,EACV,GAAG,CAAC,eAAe,YAAY,CAAC;AAEhC,QAAM,oBAAoB,aAAAA,QAAM;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,SAAO,aAAAA,QAAM;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;",
+  "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 type {} from '@elliemae/ds-system';\nimport type {} from '@elliemae/pui-theme';\nimport React from 'react';\nimport { type DSMenuButtonT } from '../react-desc-prop-types.js';\nimport { isObjectAMenuNode, isSelectionableNode } 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    floatingConfig,\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      ...(floatingConfig !== undefined ? { floatingConfig } : {}),\n    }),\n    [\n      options,\n      onClickOutside,\n      onOptionClick,\n      openedSubmenus,\n      onSubmenuToggle,\n      isLoading,\n      isSkeleton,\n      ItemRenderer,\n      floatingConfig,\n    ],\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBvB,mBAAkB;AAElB,uCAAuD;AACvD,wBAA2B;AAS3B,MAAM,gCAAgC,CACpC,eACA,iBAC2C;AAC3C,QAAM,qBAA6D,CAAC;AAEpE,gBAAc,QAAQ,CAAC,iBAAiB;AACtC,UAAM,kBAAkB,KAAC,oDAAkB,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,KAAC,sDAAoB,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,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;AAAA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAIJ,QAAM,wBAAmE,aAAAA,QAAM;AAAA,IAC7E,CAAC,SAA4B;AAC3B,uBAAiB,UAAU;AAC3B,UAAI,UAAU;AACZ,0CAAW,UAAU,IAAI;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAIA,QAAM,mBAAmB,aAAAA,QAAM,QAAQ,MAAM;AAC3C,QAAI,eAAe;AACjB,aAAO,8BAA8B,eAAe,YAAY;AAAA,IAClE;AACA,WAAO,CAAC;AAAA,EACV,GAAG,CAAC,eAAe,YAAY,CAAC;AAEhC,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,GAAI,mBAAmB,SAAY,EAAE,eAAe,IAAI,CAAC;AAAA,IAC3D;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,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/cjs/constants/index.js

@@ -31,11 +31,14 @@ __export(constants_exports, {
   DSMenuButtonName: () => DSMenuButtonName,
   MENU_BUTTON_DATA_TESTID: () => MENU_BUTTON_DATA_TESTID,
   MENU_BUTTON_SLOTS: () => MENU_BUTTON_SLOTS,
+  MENU_BUTTON_WITH_PARTS_SLOTS: () => MENU_BUTTON_WITH_PARTS_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");
+var import_constants = require("../parts/DSFlyoutMenu/constants/index.js");
+var import_constants2 = require("../parts/DSMenuItemRendererFactory/constants/index.js");
 const DSMenuButtonName = "DSMenubutton";
 const MENU_ITEMS_TYPES = {
   SEPARATOR: "separator",
@@ -53,4 +56,13 @@ const MENU_BUTTON_SLOTS = {
   ROOT: "root"
 };
 const MENU_BUTTON_DATA_TESTID = (0, import_ds_system.slotObjectToDataTestIds)(DSMenuButtonName, MENU_BUTTON_SLOTS);
+const { ROOT: FLYOUT_MENU_ROOT, ...FLYOUT_MENU_SLOTS_REST } = import_constants.FLYOUT_MENU_SLOTS;
+const { ROOT: MENU_ITEM_RENDERER_FACTORY_ROOT, ...MENU_ITEM_RENDERER_FACTORY_SLOTS_REST } = import_constants2.MENU_ITEM_RENDERER_FACTORY_SLOTS;
+const MENU_BUTTON_WITH_PARTS_SLOTS = {
+  ...MENU_BUTTON_SLOTS,
+  FLYOUT_MENU_ROOT,
+  MENU_ITEM_RENDERER_FACTORY_ROOT,
+  ...FLYOUT_MENU_SLOTS_REST,
+  ...MENU_ITEM_RENDERER_FACTORY_SLOTS_REST
+};
 //# 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\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": []
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { FLYOUT_MENU_SLOTS } from '../parts/DSFlyoutMenu/constants/index.js';\nimport { MENU_ITEM_RENDERER_FACTORY_SLOTS } from '../parts/DSMenuItemRendererFactory/constants/index.js';\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\nconst { ROOT: FLYOUT_MENU_ROOT, ...FLYOUT_MENU_SLOTS_REST } = FLYOUT_MENU_SLOTS;\nconst { ROOT: MENU_ITEM_RENDERER_FACTORY_ROOT, ...MENU_ITEM_RENDERER_FACTORY_SLOTS_REST } =\n  MENU_ITEM_RENDERER_FACTORY_SLOTS;\n\nexport const MENU_BUTTON_WITH_PARTS_SLOTS = {\n  ...MENU_BUTTON_SLOTS,\n  FLYOUT_MENU_ROOT,\n  MENU_ITEM_RENDERER_FACTORY_ROOT,\n  ...FLYOUT_MENU_SLOTS_REST,\n  ...MENU_ITEM_RENDERER_FACTORY_SLOTS_REST,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AACxC,uBAAkC;AAClC,IAAAA,oBAAiD;AAC1C,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;AAElG,MAAM,EAAE,MAAM,kBAAkB,GAAG,uBAAuB,IAAI;AAC9D,MAAM,EAAE,MAAM,iCAAiC,GAAG,sCAAsC,IACtF;AAEK,MAAM,+BAA+B;AAAA,EAC1C,GAAG;AAAA,EACH;AAAA,EACA;AAAA,EACA,GAAG;AAAA,EACH,GAAG;AACL;",
+  "names": ["import_constants"]
 }

package/dist/cjs/index.js

@@ -28,12 +28,20 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
 __export(index_exports, {
+  DSFlyoutMenuName: () => import_constants3.DSFlyoutMenuName,
   DSMenuButton: () => import_DSMenuButton.DSMenuButton,
+  DSMenuButtonName: () => import_constants.DSMenuButtonName,
   DSMenuButtonPropTypes: () => import_react_desc_prop_types.DSMenuButtonPropTypes,
   DSMenuButtonWithSchema: () => import_DSMenuButton.DSMenuButtonWithSchema,
+  DSMenuItemRendererFactoryName: () => import_constants4.DSMenuItemRendererFactoryName,
+  DSOpinionatedButtonName: () => import_constants2.DSOpinionatedButtonName,
+  FLYOUT_MENU_SLOTS: () => import_constants3.FLYOUT_MENU_SLOTS,
   MENU_BUTTON_DATA_TESTID: () => import_constants.MENU_BUTTON_DATA_TESTID,
   MENU_BUTTON_SLOTS: () => import_constants.MENU_BUTTON_SLOTS,
+  MENU_BUTTON_WITH_PARTS_SLOTS: () => import_constants.MENU_BUTTON_WITH_PARTS_SLOTS,
   MENU_ITEMS_TYPES: () => import_constants.MENU_ITEMS_TYPES,
+  MENU_ITEM_RENDERER_FACTORY_SLOTS: () => import_constants4.MENU_ITEM_RENDERER_FACTORY_SLOTS,
+  OPINIONATED_BUTTON_SLOTS: () => import_constants2.OPINIONATED_BUTTON_SLOTS,
   isFocusableNode: () => import_nodesTypeguardsAndGetters.isFocusableNode,
   useOptionsArrayToDsTree: () => import_useOptionsArrayToDsTree.useOptionsArrayToDsTree
 });
@@ -42,6 +50,9 @@ var React = __toESM(require("react"));
 var import_DSMenuButton = require("./DSMenuButton.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_constants = require("./constants/index.js");
+var import_constants2 = require("./parts/DSOpinionatedButton/constants/index.js");
+var import_constants3 = require("./parts/DSFlyoutMenu/constants/index.js");
+var import_constants4 = require("./parts/DSMenuItemRendererFactory/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.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, 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,0BAAqD;AACrD,mCAA0D;AAC1D,uBAA6E;AAC7E,uCAAgC;AAChC,qCAAwC;",
-  "names": []
+  "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, DSMenuButtonPropTypes } from './react-desc-prop-types.js';\nexport {\n  MENU_BUTTON_SLOTS,\n  DSMenuButtonName,\n  MENU_BUTTON_DATA_TESTID,\n  MENU_ITEMS_TYPES,\n  MENU_BUTTON_WITH_PARTS_SLOTS,\n} from './constants/index.js';\n\nexport { DSOpinionatedButtonName, OPINIONATED_BUTTON_SLOTS } from './parts/DSOpinionatedButton/constants/index.js';\nexport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './parts/DSFlyoutMenu/constants/index.js';\nexport {\n  DSMenuItemRendererFactoryName,\n  MENU_ITEM_RENDERER_FACTORY_SLOTS,\n} from './parts/DSMenuItemRendererFactory/constants/index.js';\n\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,0BAAqD;AACrD,mCAA0D;AAC1D,uBAMO;AAEP,IAAAA,oBAAkE;AAClE,IAAAA,oBAAoD;AACpD,IAAAA,oBAGO;AAEP,uCAAgC;AAChC,qCAAwC;",
+  "names": ["import_constants"]
 }

package/dist/cjs/package.json

@@ -3,8 +3,5 @@
   "sideEffects": [
     "*.css",
     "*.scss"
-  ],
-  "publishConfig": {
-    "access": "public"
-  }
+  ]
 }

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

@@ -46,6 +46,7 @@ var import_useFlyoutMenu = require("./config/useFlyoutMenu.js");
 var import_constants = require("./constants/index.js");
 var import_react_desc_prop_types2 = require("./react-desc-prop-types.js");
 var import_nodesTypeguardsAndGetters = require("../../utils/nodesTypeguardsAndGetters.js");
+var import_MenuButtonContextProviderCTX = require("../../MenuButtonContextProviderCTX.js");
 const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
   name: import_constants.DSFlyoutMenuName,
   slot: import_constants.FLYOUT_MENU_SLOTS.ROOT
@@ -55,6 +56,10 @@ const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
   padding: ${({ theme }) => theme.space.xxxs} 0;
   ${import_ds_system.xStyledCommonProps}
 `;
+const StyledFloatingWrapper = (0, import_ds_system.styled)(import_ds_floating_context.FloatingWrapper, {
+  name: import_constants.DSFlyoutMenuName,
+  slot: import_constants.FLYOUT_MENU_SLOTS.FLOATING_WRAPPER
+})``;
 const StyledMenu = (0, import_ds_system.styled)("div", { name: import_constants.DSFlyoutMenuName, slot: import_constants.FLYOUT_MENU_SLOTS.LIST_WRAPPER })`
   max-height: ${({ $maxHeight }) => typeof $maxHeight === "number" ? `${$maxHeight}px` : $maxHeight};
   overflow-y: auto;
@@ -64,6 +69,9 @@ const StyledMenu = (0, import_ds_system.styled)("div", { name: import_constants.
 const NoComponentPlaceholder = () => null;
 const DSFlyoutMenu = (props) => {
   const { propsWithDefault, xstyledProps } = (0, import_useFlyoutMenu.useFlyoutMenu)(props);
+  const {
+    ownerProps: { getOwnerProps, getOwnerPropsArguments }
+  } = import_react.default.useContext(import_MenuButtonContextProviderCTX.MenuButtonContextProvider);
   const {
     instanceUid,
     globalEventsHelpers: { mainMenuRef, handleSubmenusRefChange }
@@ -87,7 +95,7 @@ const DSFlyoutMenu = (props) => {
     setDidAnimationEnd(true);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_ds_floating_context.FloatingWrapper,
+    StyledFloatingWrapper,
     {
       innerRef: setFloatingRef,
       floatingStyles,
@@ -95,12 +103,17 @@ const DSFlyoutMenu = (props) => {
       context: floatingContext,
       onAnimationStartTriggered: handleAnimationStartTrigger,
       onAnimationEnd: handleAnimationEnd,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledWrapper, { getOwnerProps: () => propsWithDefault, getOwnerPropsArguments: () => ({}), ...xstyledProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      getOwnerProps,
+      getOwnerPropsArguments,
+      "data-testid": "ds-floating-wrapper-root",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledWrapper, { getOwnerProps, getOwnerPropsArguments, ...xstyledProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         StyledMenu,
         {
           role: "menu",
           innerRef: handleRefChange,
           $maxHeight: itemNode.plainItem.maxHeight ?? import_react_desc_prop_types.menuSpecificDefaultProps.maxHeight,
+          getOwnerProps,
+          getOwnerPropsArguments,
           children: itemNode.children.map((optionNode) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_DSMenuItemRendererFactory.DSMenuItemRendererFactory,
             {

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

@@ -1,7 +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, 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8EX;AA9EZ,iCAAgC;AAChC,qBAAqB;AACrB,8BAAyB;AACzB,uBAA2C;AAC3C,mBAAkB;AAClB,mCAA6D;AAC7D,+CAAsD;AACtD,uCAA0C;AAC1C,2BAA8B;AAC9B,uBAAoD;AACpD,IAAAA,gCAAgE;AAChE,uCAA2B;AAE3B,MAAM,oBAAgB,yBAAO,qBAAM;AAAA,EACjC,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,aAGY,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,IACxC,mCAAkB;AAAA;AAGtB,MAAM,iBAAa,yBAAO,OAAO,EAAE,MAAM,mCAAkB,MAAM,mCAAkB,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,QAAI,oCAAc,KAAK;AAC9D,QAAM;AAAA,IACJ;AAAA,IACA,qBAAqB,EAAE,aAAa,wBAAwB;AAAA,EAC9D,IAAI,aAAAC,QAAM,WAAW,8EAAqC;AAC1D,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,aAAAA,QAAM,SAAS,KAAK;AAElE,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,QAAM,8BAA8B,aAAAA,QAAM,YAAY,MAAM;AAC1D,uBAAmB,KAAK;AAAA,EAC1B,GAAG,CAAC,CAAC;AACL,QAAM,qBAAqB,aAAAA,QAAM,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,sDAAC,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,sDAAyB;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,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "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';\n\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';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\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 StyledFloatingWrapper = styled(FloatingWrapper, {\n  name: DSFlyoutMenuName,\n  slot: FLYOUT_MENU_SLOTS.FLOATING_WRAPPER,\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    ownerProps: { getOwnerProps, getOwnerPropsArguments },\n  } = React.useContext(MenuButtonContextProvider);\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  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    <StyledFloatingWrapper\n      innerRef={setFloatingRef}\n      floatingStyles={floatingStyles}\n      isOpen={isMenuOpen}\n      context={floatingContext}\n      onAnimationStartTriggered={handleAnimationStartTrigger}\n      onAnimationEnd={handleAnimationEnd}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      // Adding a data-testid for legacy e2e tests\n      data-testid=\"ds-floating-wrapper-root\"\n    >\n      <StyledWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} {...xstyledProps}>\n        <StyledMenu\n          role=\"menu\"\n          innerRef={handleRefChange}\n          $maxHeight={itemNode.plainItem.maxHeight ?? menuSpecificDefaultProps.maxHeight}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\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    </StyledFloatingWrapper>\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;AD4FX;AA5FZ,iCAAgC;AAChC,qBAAqB;AACrB,8BAAyB;AACzB,uBAA2C;AAE3C,mBAAkB;AAClB,mCAA6D;AAC7D,+CAAsD;AACtD,uCAA0C;AAC1C,2BAA8B;AAC9B,uBAAoD;AACpD,IAAAA,gCAAgE;AAChE,uCAA2B;AAC3B,0CAA0C;AAC1C,MAAM,oBAAgB,yBAAO,qBAAM;AAAA,EACjC,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,aAGY,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,IACxC,mCAAkB;AAAA;AAGtB,MAAM,4BAAwB,yBAAO,4CAAiB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,mCAAkB;AAC1B,CAAC;AAED,MAAM,iBAAa,yBAAO,OAAO,EAAE,MAAM,mCAAkB,MAAM,mCAAkB,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,QAAI,oCAAc,KAAK;AAC9D,QAAM;AAAA,IACJ,YAAY,EAAE,eAAe,uBAAuB;AAAA,EACtD,IAAI,aAAAC,QAAM,WAAW,6DAAyB;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA,qBAAqB,EAAE,aAAa,wBAAwB;AAAA,EAC9D,IAAI,aAAAA,QAAM,WAAW,8EAAqC;AAC1D,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,aAAAA,QAAM,SAAS,KAAK;AAElE,QAAM,EAAE,gBAAgB,gBAAgB,iBAAiB,cAAc,YAAY,SAAS,IAAI;AAChG,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,QAAM,8BAA8B,aAAAA,QAAM,YAAY,MAAM;AAC1D,uBAAmB,KAAK;AAAA,EAC1B,GAAG,CAAC,CAAC;AACL,QAAM,qBAAqB,aAAAA,QAAM,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,MAChB;AAAA,MACA;AAAA,MAEA,eAAY;AAAA,MAEZ,sDAAC,iBAAc,eAA8B,wBAAiD,GAAG,cAC/F;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,YAAY,SAAS,UAAU,aAAa,sDAAyB;AAAA,UACrE;AAAA,UACA;AAAA,UAEC,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,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
   "names": ["import_react_desc_prop_types", "React"]
 }

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

@@ -39,8 +39,12 @@ var import_ds_system = require("@elliemae/ds-system");
 const DSFlyoutMenuName = "DSFlyoutmenu";
 const EXAMPLE_CONSTANTS = {};
 const FLYOUT_MENU_SLOTS = {
+  FLOATING_WRAPPER: "floating-wrapper",
   ROOT: "root",
   LIST_WRAPPER: "list-wrapper"
 };
-const FLYOUT_MENU_DATA_TESTID = (0, import_ds_system.slotObjectToDataTestIds)(DSFlyoutMenuName, FLYOUT_MENU_SLOTS);
+const FLYOUT_MENU_DATA_TESTID = {
+  ...(0, import_ds_system.slotObjectToDataTestIds)(DSFlyoutMenuName, FLYOUT_MENU_SLOTS),
+  FLOATING_WRAPPER: "ds-floating-wrapper-root"
+};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/DSFlyoutMenu/constants/index.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFlyoutMenuName = 'DSFlyoutmenu';\n\nexport const EXAMPLE_CONSTANTS = {} 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 FLYOUT_MENU_SLOTS = {\n  ROOT: 'root',\n  LIST_WRAPPER: 'list-wrapper',\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 FLYOUT_MENU_DATA_TESTID = slotObjectToDataTestIds(DSFlyoutMenuName, FLYOUT_MENU_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,oBAAoB,CAAC;AAG3B,MAAM,oBAAoB;AAAA,EAC/B,MAAM;AAAA,EACN,cAAc;AAChB;AAGO,MAAM,8BAA0B,0CAAwB,kBAAkB,iBAAiB;",
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFlyoutMenuName = 'DSFlyoutmenu';\n\nexport const EXAMPLE_CONSTANTS = {} 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 FLYOUT_MENU_SLOTS = {\n  FLOATING_WRAPPER: 'floating-wrapper',\n  ROOT: 'root',\n  LIST_WRAPPER: 'list-wrapper',\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 FLYOUT_MENU_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSFlyoutMenuName, FLYOUT_MENU_SLOTS),\n  FLOATING_WRAPPER: 'ds-floating-wrapper-root',\n} as const;\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,oBAAoB,CAAC;AAG3B,MAAM,oBAAoB;AAAA,EAC/B,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,cAAc;AAChB;AAGO,MAAM,0BAA0B;AAAA,EACrC,OAAG,0CAAwB,kBAAkB,iBAAiB;AAAA,EAC9D,kBAAkB;AACpB;",
   "names": []
 }

package/dist/cjs/parts/DSMenuBehaviouralContextProvider/config/useMenuItemEventsHandlers.js

@@ -232,9 +232,11 @@ const useMenuItemEventsHandlers = ({
           return;
         }
         const { currentSubmenuWasMainMenu } = closeCurrentSubmenu({ itemNode: pseudoFocusedItemNode, event });
-        trackFocusParentItem(pseudoFocusedItemNode);
         if (currentSubmenuWasMainMenu) {
-          onOpinionatedClose();
+          trackFocusTrigger({ shouldFocusImmediately: true });
+          onOpinionatedClose({ skipFocus: true });
+        } else {
+          trackFocusParentItem(pseudoFocusedItemNode);
         }
         return;
       }