@elliemae/ds-menu-button 3.51.0-next.1 → 3.51.0-next.12

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSOpinionatedButton/DSOpinionatedButton.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { type DSOpinionatedButtonT, DSOpinionatedButtonPropTypesSchema } from './react-desc-prop-types.js';\nimport { useOpinionatedButton } from './config/useOpinionatedButton.js';\nimport { OPINIONATED_BUTTON_SLOTS, DSOpinionatedButtonName } from './constants/index.js';\nimport { DSFlyoutMenu } from '../DSFlyoutMenu/index.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\n\nconst StyledButton = styled(DSButtonV3, { name: DSOpinionatedButtonName, slot: OPINIONATED_BUTTON_SLOTS.ROOT })``;\n\nconst DSOpinionatedButton: React.ComponentType<DSOpinionatedButtonT.Props> = (props) => {\n  const {\n    propsWithDefault: { children, menuSpecificProps, ...restOfTheProps },\n    eventsHandlers: { handleOnClick, handleOnFocus, handleFocusIfTriggerIsFocusRegion, handleTriggerKeyDown },\n    floatingContext,\n  } = useOpinionatedButton(props);\n  // this is the state of the global menu, hosted in the global context\n  // each flyout menu instance will have its own state, only this instances is mandated by the global context\n  // that's why flyout menu is reading the info from props and not from the context\n  const {\n    isMenuOpen,\n    propsWithDefault: { optionsTree },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n\n  return (\n    // onClick/onFocus/innerRef/onKeyDown ARE BEING OVERRIDEN ON PURPOSE\n    //  all the functions are being wrapped in a custom logic, they also invoke the original ones\n    <>\n      <StyledButton\n        {...restOfTheProps}\n        onClick={handleOnClick}\n        onFocus={handleOnFocus}\n        onKeyDown={handleTriggerKeyDown}\n        innerRef={handleFocusIfTriggerIsFocusRegion}\n        aria-haspopup=\"menu\"\n        aria-controls={\n          /* ********************************************************************************************************************\n           * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n           *    The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n           * ********************************************************************************************************************\n           * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n           *  so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n           * ******************************************************************************************************************** */\n          isMenuOpen\n            ? optionsTree.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n            : undefined\n        }\n      >\n        {children}\n      </StyledButton>\n      <DSFlyoutMenu\n        {...menuSpecificProps}\n        isMenuOpen={isMenuOpen}\n        floatingContext={floatingContext.context}\n        floatingStyles={floatingContext.floatingStyles}\n        setFloatingRef={floatingContext.refs.setFloating}\n        // DSTree doesn't support the root node having a different type than the children, so we need to cast it manually\n        itemNode={optionsTree as unknown as DSMenuButtonT.MenuNodeRootItem}\n      />\n    </>\n  );\n};\n\nDSOpinionatedButton.displayName = DSOpinionatedButtonName;\nconst DSOpinionatedButtonWithSchema = describe(DSOpinionatedButton);\nDSOpinionatedButtonWithSchema.propTypes = DSOpinionatedButtonPropTypesSchema;\n\nexport { DSOpinionatedButton, DSOpinionatedButtonWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC8BnB,mBACE,KADF;AA9BJ,OAAOA,YAAW;AAClB,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAoC,0CAA0C;AAC9E,SAAS,4BAA4B;AACrC,SAAS,0BAA0B,+BAA+B;AAClE,SAAS,oBAAoB;AAC7B,SAAS,6CAA6C;AAGtD,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,yBAAyB,MAAM,yBAAyB,KAAK,CAAC;AAE9G,MAAM,sBAAuE,CAAC,UAAU;AACtF,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,mBAAmB,GAAG,eAAe;AAAA,IACnE,gBAAgB,EAAE,eAAe,eAAe,mCAAmC,qBAAqB;AAAA,IACxG;AAAA,EACF,IAAI,qBAAqB,KAAK;AAI9B,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,YAAY;AAAA,EAClC,IAAIA,OAAM,WAAW,qCAAqC;AAE1D;AAAA;AAAA;AAAA,IAGE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,SAAS;AAAA,UACT,SAAS;AAAA,UACT,WAAW;AAAA,UACX,UAAU;AAAA,UACV,iBAAc;AAAA,UACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQE,aACI,YAAY,cAAc,IAAI,CAAC,UAAU,gBAAgB,GAAG,MAAM,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,IACvG;AAAA;AAAA,UAGL;AAAA;AAAA,MACH;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,iBAAiB,gBAAgB;AAAA,UACjC,gBAAgB,gBAAgB;AAAA,UAChC,gBAAgB,gBAAgB,KAAK;AAAA,UAErC,UAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA;AAEJ;AAEA,oBAAoB,cAAc;AAClC,MAAM,gCAAgC,SAAS,mBAAmB;AAClE,8BAA8B,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { type DSOpinionatedButtonT, DSOpinionatedButtonPropTypesSchema } from './react-desc-prop-types.js';\nimport { useOpinionatedButton } from './config/useOpinionatedButton.js';\nimport { OPINIONATED_BUTTON_SLOTS, DSOpinionatedButtonName } from './constants/index.js';\nimport { DSFlyoutMenu } from '../DSFlyoutMenu/index.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\n\nconst StyledButton = styled(DSButtonV3, { name: DSOpinionatedButtonName, slot: OPINIONATED_BUTTON_SLOTS.ROOT })``;\n\nconst DSOpinionatedButton: React.ComponentType<DSOpinionatedButtonT.Props> = (props) => {\n  // this is the state of the global menu, hosted in the global context\n  // each flyout menu instance will have its own state, only this instances is mandated by the global context\n  // that's why flyout menu is reading the info from props and not from the context\n  const globalMenuContext = React.useContext(MenuBehaviouralContextProviderContext);\n  const {\n    isMenuOpen,\n    propsWithDefault: { optionsTree },\n  } = globalMenuContext;\n\n  const {\n    propsWithDefault: { children, menuSpecificProps, ...restOfTheProps },\n    eventsHandlers: { handleOnClick, handleOnFocus, handleFocusIfTriggerIsFocusRegion, handleTriggerKeyDown },\n    floatingContext,\n  } = useOpinionatedButton(props, globalMenuContext);\n\n  return (\n    // onClick/onFocus/innerRef/onKeyDown ARE BEING OVERRIDEN ON PURPOSE\n    //  all the functions are being wrapped in a custom logic, they also invoke the original ones\n    <>\n      <StyledButton\n        {...restOfTheProps}\n        onClick={handleOnClick}\n        onFocus={handleOnFocus}\n        onKeyDown={handleTriggerKeyDown}\n        innerRef={handleFocusIfTriggerIsFocusRegion}\n        aria-haspopup=\"menu\"\n        aria-controls={\n          /* ********************************************************************************************************************\n           * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n           *    The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n           * ********************************************************************************************************************\n           * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n           *  so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n           * ******************************************************************************************************************** */\n          isMenuOpen\n            ? optionsTree.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n            : undefined\n        }\n        aria-expanded={isMenuOpen}\n      >\n        {children}\n      </StyledButton>\n      <DSFlyoutMenu\n        {...menuSpecificProps}\n        isMenuOpen={isMenuOpen}\n        floatingContext={floatingContext.context}\n        floatingStyles={floatingContext.floatingStyles}\n        setFloatingRef={floatingContext.refs.setFloating}\n        // DSTree doesn't support the root node having a different type than the children, so we need to cast it manually\n        itemNode={optionsTree as unknown as DSMenuButtonT.MenuNodeRootItem}\n      />\n    </>\n  );\n};\n\nDSOpinionatedButton.displayName = DSOpinionatedButtonName;\nconst DSOpinionatedButtonWithSchema = describe(DSOpinionatedButton);\nDSOpinionatedButtonWithSchema.propTypes = DSOpinionatedButtonPropTypesSchema;\n\nexport { DSOpinionatedButton, DSOpinionatedButtonWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgCnB,mBACE,KADF;AAhCJ,OAAOA,YAAW;AAClB,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAoC,0CAA0C;AAC9E,SAAS,4BAA4B;AACrC,SAAS,0BAA0B,+BAA+B;AAClE,SAAS,oBAAoB;AAC7B,SAAS,6CAA6C;AAGtD,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,yBAAyB,MAAM,yBAAyB,KAAK,CAAC;AAE9G,MAAM,sBAAuE,CAAC,UAAU;AAItF,QAAM,oBAAoBA,OAAM,WAAW,qCAAqC;AAChF,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,YAAY;AAAA,EAClC,IAAI;AAEJ,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,mBAAmB,GAAG,eAAe;AAAA,IACnE,gBAAgB,EAAE,eAAe,eAAe,mCAAmC,qBAAqB;AAAA,IACxG;AAAA,EACF,IAAI,qBAAqB,OAAO,iBAAiB;AAEjD;AAAA;AAAA;AAAA,IAGE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,SAAS;AAAA,UACT,SAAS;AAAA,UACT,WAAW;AAAA,UACX,UAAU;AAAA,UACV,iBAAc;AAAA,UACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQE,aACI,YAAY,cAAc,IAAI,CAAC,UAAU,gBAAgB,GAAG,MAAM,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,IACvG;AAAA;AAAA,UAEN,iBAAe;AAAA,UAEd;AAAA;AAAA,MACH;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,iBAAiB,gBAAgB;AAAA,UACjC,gBAAgB,gBAAgB;AAAA,UAChC,gBAAgB,gBAAgB,KAAK;AAAA,UAErC,UAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA;AAEJ;AAEA,oBAAoB,cAAc;AAClC,MAAM,gCAAgC,SAAS,mBAAmB;AAClE,8BAA8B,YAAY;",
   "names": ["React"]
 }

package/dist/esm/parts/DSOpinionatedButton/config/useOpinionatedButton.js

@@ -22,7 +22,7 @@ const placementOrderPreference = [
   "top-end",
   "top"
 ];
-const useOpinionatedButton = (propsFromUser) => {
+const useOpinionatedButton = (propsFromUser, globalMenuContext) => {
   const propsWithDefault = React2.useMemo(
     () => ({
       ...defaultProps,
@@ -36,7 +36,8 @@ const useOpinionatedButton = (propsFromUser) => {
     placement: placementOrderPreference[0],
     placementOrderPreference,
     animationDuration: 100,
-    customOffset: [0, 0]
+    customOffset: [0, 0],
+    externallyControlledIsOpen: globalMenuContext.isMenuOpen
   });
   const eventsHandlers = useTriggerEventsHandlers({ propsWithDefault, floatingContext });
   return React2.useMemo(

package/dist/esm/parts/DSOpinionatedButton/config/useOpinionatedButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSOpinionatedButton/config/useOpinionatedButton.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport React from 'react';\nimport { uid } from 'uid';\nimport {\n  DSOpinionatedButtonPropTypesSchema,\n  defaultProps,\n  type DSOpinionatedButtonT,\n} from '../react-desc-prop-types.js';\nimport { useTriggerEventsHandlers } from './useTriggerEventsHandlers.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n  'bottom-start',\n  'bottom-end',\n  'bottom',\n  'right-start',\n  'right-start',\n  'right',\n  'left-start',\n  'left-end',\n  'left',\n  'top-start',\n  'top-end',\n  'top',\n];\n\nexport const useOpinionatedButton = (propsFromUser: DSOpinionatedButtonT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  // the component deals with HTML DOM elements,\n  //  Deep compare of HTML DOM elements is pointless and extremely costly\n  //  for this specific case, we are better of not using `useMemoMergePropsWithDefault`\n  const propsWithDefault = React.useMemo(\n    () => ({\n      ...defaultProps,\n      ...propsFromUser,\n    }),\n    [propsFromUser],\n  ) as DSOpinionatedButtonT.InternalProps;\n  useValidateProps(propsWithDefault, DSOpinionatedButtonPropTypesSchema);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  // nothing to do here because this is 100% inherited from DSButtonV3, DSButtonV3 has its own xstyled props\n\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const instanceUid = React.useMemo(() => `ds-opinionated-button-${uid(5)}`, []);\n\n  const floatingContext = useFloatingContext({\n    placement: placementOrderPreference[0],\n    placementOrderPreference,\n    animationDuration: 100,\n    customOffset: [0, 0],\n  });\n  const eventsHandlers = useTriggerEventsHandlers({ propsWithDefault, floatingContext });\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      instanceUid,\n      eventsHandlers,\n      floatingContext,\n    }),\n    [propsWithDefault, instanceUid, eventsHandlers, floatingContext],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,0BAAuD;AAChE,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AAEjC,MAAM,2BAA+F;AAAA,EACnG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,uBAAuB,CAAC,kBAA8C;AAOjF,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AACA,mBAAiB,kBAAkB,kCAAkC;AAUrE,QAAM,cAAcA,OAAM,QAAQ,MAAM,yBAAyB,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAE7E,QAAM,kBAAkB,mBAAmB;AAAA,IACzC,WAAW,yBAAyB,CAAC;AAAA,IACrC;AAAA,IACA,mBAAmB;AAAA,IACnB,cAAc,CAAC,GAAG,CAAC;AAAA,EACrB,CAAC;AACD,QAAM,iBAAiB,yBAAyB,EAAE,kBAAkB,gBAAgB,CAAC;AAErF,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,gBAAgB,eAAe;AAAA,EACjE;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport React from 'react';\nimport { uid } from 'uid';\nimport {\n  DSOpinionatedButtonPropTypesSchema,\n  defaultProps,\n  type DSOpinionatedButtonT,\n} from '../react-desc-prop-types.js';\nimport { useTriggerEventsHandlers } from './useTriggerEventsHandlers.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport type { MenuBehaviouralContextProviderCTX } from '../../DSMenuBehaviouralContextProvider/config/useMenuBehaviouralContextProvider.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n  'bottom-start',\n  'bottom-end',\n  'bottom',\n  'right-start',\n  'right-start',\n  'right',\n  'left-start',\n  'left-end',\n  'left',\n  'top-start',\n  'top-end',\n  'top',\n];\n\nexport const useOpinionatedButton = (\n  propsFromUser: DSOpinionatedButtonT.Props,\n  globalMenuContext: MenuBehaviouralContextProviderCTX,\n) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  // the component deals with HTML DOM elements,\n  //  Deep compare of HTML DOM elements is pointless and extremely costly\n  //  for this specific case, we are better of not using `useMemoMergePropsWithDefault`\n  const propsWithDefault = React.useMemo(\n    () => ({\n      ...defaultProps,\n      ...propsFromUser,\n    }),\n    [propsFromUser],\n  ) as DSOpinionatedButtonT.InternalProps;\n  useValidateProps(propsWithDefault, DSOpinionatedButtonPropTypesSchema);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  // nothing to do here because this is 100% inherited from DSButtonV3, DSButtonV3 has its own xstyled props\n\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const instanceUid = React.useMemo(() => `ds-opinionated-button-${uid(5)}`, []);\n\n  const floatingContext = useFloatingContext({\n    placement: placementOrderPreference[0],\n    placementOrderPreference,\n    animationDuration: 100,\n    customOffset: [0, 0],\n    externallyControlledIsOpen: globalMenuContext.isMenuOpen,\n  });\n  const eventsHandlers = useTriggerEventsHandlers({ propsWithDefault, floatingContext });\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      instanceUid,\n      eventsHandlers,\n      floatingContext,\n    }),\n    [propsWithDefault, instanceUid, eventsHandlers, floatingContext],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,0BAAuD;AAChE,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AAGjC,MAAM,2BAA+F;AAAA,EACnG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,uBAAuB,CAClC,eACA,sBACG;AAOH,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AACA,mBAAiB,kBAAkB,kCAAkC;AAUrE,QAAM,cAAcA,OAAM,QAAQ,MAAM,yBAAyB,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAE7E,QAAM,kBAAkB,mBAAmB;AAAA,IACzC,WAAW,yBAAyB,CAAC;AAAA,IACrC;AAAA,IACA,mBAAmB;AAAA,IACnB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,4BAA4B,kBAAkB;AAAA,EAChD,CAAC;AACD,QAAM,iBAAiB,yBAAyB,EAAE,kBAAkB,gBAAgB,CAAC;AAErF,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,gBAAgB,eAAe;AAAA,EACjE;AACF;",
   "names": ["React"]
 }

package/dist/esm/parts/DSOpinionatedButton/constants/index.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { slotObjectToDataTestIds } from "@elliemae/ds-system";
-const DSOpinionatedButtonName = "DSOpinionatedButton";
+const DSOpinionatedButtonName = "DSOpinionatedbutton";
 const EXAMPLE_CONSTANTS = {};
 const OPINIONATED_BUTTON_SLOTS = {
   ROOT: "root"

package/dist/esm/parts/DSOpinionatedButton/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSOpinionatedButton/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSOpinionatedButtonName = 'DSOpinionatedButton';\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 OPINIONATED_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 OPINIONATED_BUTTON_DATA_TESTID = slotObjectToDataTestIds(\n  DSOpinionatedButtonName,\n  OPINIONATED_BUTTON_SLOTS,\n);\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSOpinionatedButtonName = 'DSOpinionatedbutton';\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 OPINIONATED_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 OPINIONATED_BUTTON_DATA_TESTID = slotObjectToDataTestIds(\n  DSOpinionatedButtonName,\n  OPINIONATED_BUTTON_SLOTS,\n);\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,0BAA0B;AAEhC,MAAM,oBAAoB,CAAC;AAG3B,MAAM,2BAA2B;AAAA,EACtC,MAAM;AACR;AAGO,MAAM,iCAAiC;AAAA,EAC5C;AAAA,EACA;AACF;",
   "names": []
 }

package/dist/types/constants/index.d.ts

@@ -1,4 +1,4 @@
-export declare const DSMenuButtonName = "DSMenuButton";
+export declare const DSMenuButtonName = "DSMenubutton";
 export declare const MENU_ITEMS_TYPES: {
     readonly SEPARATOR: "separator";
     readonly ACTIVABLE_ITEM: "activable-item";

package/dist/types/parts/DSFlyoutMenu/constants/index.d.ts

@@ -1,4 +1,4 @@
-export declare const DSFlyoutMenuName = "DSFlyoutMenu";
+export declare const DSFlyoutMenuName = "DSFlyoutmenu";
 export declare const EXAMPLE_CONSTANTS: {};
 export declare const FLYOUT_MENU_SLOTS: {
     readonly ROOT: "root";

package/dist/types/parts/DSMenuBehaviouralContextProvider/constants/index.d.ts

@@ -1,5 +1,5 @@
 import type { DSMenuButtonT } from '../../../react-desc-prop-types.js';
-export declare const DSMenuBehaviouralContextProviderName = "DSMenuBehaviouralContextProvider";
+export declare const DSMenuBehaviouralContextProviderName = "DSMenubehaviouralcontextprovider";
 export declare const MENU_FOCUS_REGIONS: {
     readonly TRIGGER: "trigger";
     readonly ITEM_BY_DSID: (dsId: DSMenuButtonT.MenuNode['dsId']) => `item-dsid-${string}` | `item-dsid-${number}`;

package/dist/types/parts/DSMenuItemRendererFactory/constants/index.d.ts

@@ -1,4 +1,4 @@
-export declare const DSMenuItemRendererFactoryName = "DSMenuItemRendererFactory";
+export declare const DSMenuItemRendererFactoryName = "DSMenuitemrendererfactory";
 export declare const EXAMPLE_CONSTANTS: {};
 export declare const MENU_ITEM_RENDERER_FACTORY_SLOTS: {
     readonly ROOT: "root";

package/dist/types/parts/DSOpinionatedButton/config/useOpinionatedButton.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type DSOpinionatedButtonT } from '../react-desc-prop-types.js';
-export declare const useOpinionatedButton: (propsFromUser: DSOpinionatedButtonT.Props) => {
+import type { MenuBehaviouralContextProviderCTX } from '../../DSMenuBehaviouralContextProvider/config/useMenuBehaviouralContextProvider.js';
+export declare const useOpinionatedButton: (propsFromUser: DSOpinionatedButtonT.Props, globalMenuContext: MenuBehaviouralContextProviderCTX) => {
     propsWithDefault: DSOpinionatedButtonT.InternalProps;
     instanceUid: string;
     eventsHandlers: {
@@ -13,6 +14,8 @@ export declare const useOpinionatedButton: (propsFromUser: DSOpinionatedButtonT.
         refs: {
             setReference: (node: HTMLElement | null) => void;
             setFloating: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+            floating: HTMLElement | null;
+            reference: Element | null;
         };
         floatingStyles: import("styled-components").CSSProperties;
         handlers: {

package/dist/types/parts/DSOpinionatedButton/constants/index.d.ts

@@ -1,4 +1,4 @@
-export declare const DSOpinionatedButtonName = "DSOpinionatedButton";
+export declare const DSOpinionatedButtonName = "DSOpinionatedbutton";
 export declare const EXAMPLE_CONSTANTS: {};
 export declare const OPINIONATED_BUTTON_SLOTS: {
     readonly ROOT: "root";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-menu-button",
-  "version": "3.51.0-next.1",
+  "version": "3.51.0-next.12",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Menu Button",
   "files": [
@@ -25,8 +25,8 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "pnpm": ">=6",
-    "node": ">=16"
+    "pnpm": ">=9",
+    "node": ">=22"
   },
   "author": "ICE MT",
   "jestSonar": {
@@ -37,23 +37,23 @@
   },
   "dependencies": {
     "@xstyled/styled-components": "~3.7.3",
-    "@elliemae/ds-button-v2": "3.51.0-next.1",
-    "@elliemae/ds-grid": "3.51.0-next.1",
-    "@elliemae/ds-floating-context": "3.51.0-next.1",
-    "@elliemae/ds-hooks-on-blur-out": "3.51.0-next.1",
-    "@elliemae/ds-menu-items-commons": "3.51.0-next.1",
-    "@elliemae/ds-icons": "3.51.0-next.1",
-    "@elliemae/ds-props-helpers": "3.51.0-next.1",
-    "@elliemae/ds-system": "3.51.0-next.1",
-    "@elliemae/ds-tree-model": "3.51.0-next.1"
+    "@elliemae/ds-grid": "3.51.0-next.12",
+    "@elliemae/ds-button-v2": "3.51.0-next.12",
+    "@elliemae/ds-floating-context": "3.51.0-next.12",
+    "@elliemae/ds-hooks-on-blur-out": "3.51.0-next.12",
+    "@elliemae/ds-menu-items-commons": "3.51.0-next.12",
+    "@elliemae/ds-icons": "3.51.0-next.12",
+    "@elliemae/ds-props-helpers": "3.51.0-next.12",
+    "@elliemae/ds-system": "3.51.0-next.12",
+    "@elliemae/ds-tree-model": "3.51.0-next.12"
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "9.0.0-next.50",
+    "@elliemae/pui-cli": "9.0.0-next.55",
     "@elliemae/pui-theme": "~2.10.0",
     "jest": "~29.7.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.51.0-next.1",
-    "@elliemae/ds-typescript-helpers": "3.51.0-next.1"
+    "@elliemae/ds-monorepo-devops": "3.51.0-next.12",
+    "@elliemae/ds-typescript-helpers": "3.51.0-next.12"
   },
   "peerDependencies": {
     "@testing-library/jest-dom": "^6.6.3",