@elliemae/ds-menu-button 3.60.0-next.13 → 3.60.0-next.15

package/dist/cjs/parts/DSMenuItemRendererFactory/WithSubmenuMenuItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSMenuItemRendererFactory/WithSubmenuMenuItem.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { ChevronSmallRight } from '@elliemae/ds-icons';\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\n\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n  'right-start',\n  'right-start',\n  'right',\n  'left-start',\n  'left-end',\n  'left',\n];\nexport const WithSubmenuMenuItem: React.ComponentType<{\n  itemNode: DSMenuButtonT.MenuNodeWithSubmenuItem;\n  FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n  const { dsId, plainItem } = itemNode;\n  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n  const {\n    focusRegion,\n    openedSubItems,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'auto'] : ['auto'];\n    if (secondaryLabel) cols.push('auto');\n    cols.push('min-content');\n    return cols;\n  }, [LeftDecComponent, secondaryLabel]);\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n  const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n\n  const floatingContext = useFloatingContext({\n    placement: placementOrderPreference[0],\n    placementOrderPreference,\n    animationDuration: 100,\n    customOffset: [0, 0],\n    externallyControlledIsOpen: isExpanded,\n  });\n  const {\n    refs: { setReference },\n  } = floatingContext;\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      setReference(node);\n      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n        focusNodeRacingConditionSolved(node);\n      }\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion, setReference],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    handleFocusableMenuItemOnMouseEnter(itemNode);\n  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n  const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n    },\n    [handleFocusableMenuItemNativeFocusEvent, itemNode],\n  );\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n  return (\n    <>\n      <StyledGlobalMenuItemWrapper\n        innerRef={handleFocusOnRender}\n        onKeyDown={handleFocusableMenuItemKeyDown}\n        onClick={handleFocusableMenuItemClick}\n        onMouseEnter={handleOnMouseEnter}\n        onFocus={handleOnFocus}\n        as=\"div\"\n        id={`${spacelessDsIdForDom}`}\n        tabIndex={isFocused ? 0 : -1}\n        role=\"menuitem\"\n        aria-haspopup=\"menu\"\n        aria-expanded={isExpanded}\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          isExpanded\n            ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n            : undefined\n        }\n        aria-disabled={disabled}\n        applyAriaDisabled={disabled}\n      >\n        <StyledContentWrapper\n          cols={gridLayout}\n          minHeight=\"16px\"\n          gutter=\"xxs\"\n          alignItems=\"center\"\n          minWidth={minWidth ?? undefined}\n        >\n          {LeftDecComponent ? <LeftDecComponent /> : null}\n          <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n          {secondaryLabel !== undefined && (\n            <StyleMenuItemSecondaryLabel disabled={disabled}>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n          )}\n          <ChevronSmallRight />\n        </StyledContentWrapper>\n      </StyledGlobalMenuItemWrapper>\n      <FlyoutMenuCircularDepInject\n        isMenuOpen={isExpanded}\n        floatingContext={floatingContext.context}\n        floatingStyles={floatingContext.floatingStyles}\n        setFloatingRef={floatingContext.refs.setFloating}\n        itemNode={itemNode}\n      />\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { ChevronSmallRight } from '@elliemae/ds-icons';\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n  'right-start',\n  'right-start',\n  'right',\n  'left-start',\n  'left-end',\n  'left',\n];\nexport const WithSubmenuMenuItem: React.ComponentType<{\n  itemNode: DSMenuButtonT.MenuNodeWithSubmenuItem;\n  FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n  const { dsId, plainItem } = itemNode;\n  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n  const {\n    ownerProps: { getOwnerProps },\n  } = React.useContext(MenuButtonContextProvider);\n  const getOwnerPropsArguments = React.useCallback(() => plainItem, [plainItem]);\n\n  const {\n    focusRegion,\n    openedSubItems,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'auto'] : ['auto'];\n    if (secondaryLabel) cols.push('auto');\n    cols.push('min-content');\n    return cols;\n  }, [LeftDecComponent, secondaryLabel]);\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n  const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n\n  const floatingContext = useFloatingContext({\n    placement: placementOrderPreference[0],\n    placementOrderPreference,\n    animationDuration: 100,\n    customOffset: [0, 0],\n    externallyControlledIsOpen: isExpanded,\n  });\n  const {\n    refs: { setReference },\n  } = floatingContext;\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      setReference(node);\n      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n        focusNodeRacingConditionSolved(node);\n      }\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion, setReference],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    handleFocusableMenuItemOnMouseEnter(itemNode);\n  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n  const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n    },\n    [handleFocusableMenuItemNativeFocusEvent, itemNode],\n  );\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n  return (\n    <>\n      <StyledGlobalMenuItemWrapper\n        innerRef={handleFocusOnRender}\n        onKeyDown={handleFocusableMenuItemKeyDown}\n        onClick={handleFocusableMenuItemClick}\n        onMouseEnter={handleOnMouseEnter}\n        onFocus={handleOnFocus}\n        as=\"div\"\n        id={`${spacelessDsIdForDom}`}\n        tabIndex={isFocused ? 0 : -1}\n        role=\"menuitem\"\n        aria-haspopup=\"menu\"\n        aria-expanded={isExpanded}\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          isExpanded\n            ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n            : undefined\n        }\n        aria-disabled={disabled}\n        applyAriaDisabled={disabled}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledContentWrapper\n          cols={gridLayout}\n          minHeight=\"16px\"\n          gutter=\"xxs\"\n          alignItems=\"center\"\n          minWidth={minWidth ?? undefined}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {LeftDecComponent ? <LeftDecComponent /> : null}\n          <StyleMenuItemLabel getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            {label}\n          </StyleMenuItemLabel>\n          {secondaryLabel !== undefined && (\n            <StyleMenuItemSecondaryLabel\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n              disabled={disabled}\n            >\n              {secondaryLabel}\n            </StyleMenuItemSecondaryLabel>\n          )}\n          <ChevronSmallRight />\n        </StyledContentWrapper>\n      </StyledGlobalMenuItemWrapper>\n      <FlyoutMenuCircularDepInject\n        isMenuOpen={isExpanded}\n        floatingContext={floatingContext.context}\n        floatingStyles={floatingContext.floatingStyles}\n        setFloatingRef={floatingContext.refs.setFloating}\n        itemNode={itemNode}\n      />\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/cjs/parts/DSOpinionatedButton/DSOpinionatedButton.js

@@ -47,6 +47,7 @@ var import_useOpinionatedButton = require("./config/useOpinionatedButton.js");
 var import_constants = require("./constants/index.js");
 var import_DSFlyoutMenu = require("../DSFlyoutMenu/index.js");
 var import_MenuBehaviouralContextProviderCTX = require("../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js");
+var import_MenuButtonContextProviderCTX = require("../../MenuButtonContextProviderCTX.js");
 const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, { name: import_constants.DSOpinionatedButtonName, slot: import_constants.OPINIONATED_BUTTON_SLOTS.ROOT })``;
 const DSOpinionatedButton = (props) => {
   const globalMenuContext = import_react.default.useContext(import_MenuBehaviouralContextProviderCTX.MenuBehaviouralContextProviderContext);
@@ -54,6 +55,9 @@ const DSOpinionatedButton = (props) => {
     isMenuOpen,
     propsWithDefault: { optionsTree }
   } = globalMenuContext;
+  const {
+    ownerProps: { getOwnerProps }
+  } = import_react.default.useContext(import_MenuButtonContextProviderCTX.MenuButtonContextProvider);
   const {
     propsWithDefault: { children, menuSpecificProps, ...restOfTheProps },
     eventsHandlers: { handleOnClick, handleOnFocus, handleFocusIfTriggerIsFocusRegion, handleTriggerKeyDown },
@@ -80,6 +84,7 @@ const DSOpinionatedButton = (props) => {
           isMenuOpen ? optionsTree.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\s/g, "")}`).join(" ") : void 0
         ),
         "aria-expanded": isMenuOpen,
+        getOwnerProps,
         children
       }
     ),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSOpinionatedButton/DSOpinionatedButton.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCnB;AAAA;AAAA;AAAA;AAAA;AAhCJ,mBAAkB;AAClB,8BAAyB;AACzB,uBAAuB;AACvB,0BAA2B;AAC3B,mCAA8E;AAC9E,kCAAqC;AACrC,uBAAkE;AAClE,0BAA6B;AAC7B,+CAAsD;AAGtD,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,0CAAyB,MAAM,0CAAyB,KAAK,CAAC;AAE9G,MAAM,sBAAuE,CAAC,UAAU;AAItF,QAAM,oBAAoB,aAAAA,QAAM,WAAW,8EAAqC;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,QAAI,kDAAqB,OAAO,iBAAiB;AAEjD,SAGE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAS;AAAA,QACT,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAU;AAAA,QACV,iBAAc;AAAA,QACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQE,aACI,YAAY,cAAc,IAAI,CAAC,UAAU,gBAAgB,GAAG,MAAM,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,IACvG;AAAA;AAAA,QAEN,iBAAe;AAAA,QAEd;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,iBAAiB,gBAAgB;AAAA,QACjC,gBAAgB,gBAAgB;AAAA,QAChC,gBAAgB,gBAAgB,KAAK;AAAA,QAErC,UAAU;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ;AAEA,oBAAoB,cAAc;AAClC,MAAM,oCAAgC,kCAAS,mBAAmB;AAClE,8BAA8B,YAAY;",
+  "sourcesContent": ["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';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\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    ownerProps: { getOwnerProps },\n  } = React.useContext(MenuButtonContextProvider);\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        getOwnerProps={getOwnerProps}\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCnB;AAAA;AAAA;AAAA;AAAA;AAnCJ,mBAAkB;AAClB,8BAAyB;AACzB,uBAAuB;AACvB,0BAA2B;AAC3B,mCAA8E;AAC9E,kCAAqC;AACrC,uBAAkE;AAClE,0BAA6B;AAC7B,+CAAsD;AAEtD,0CAA0C;AAC1C,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,0CAAyB,MAAM,0CAAyB,KAAK,CAAC;AAE9G,MAAM,sBAAuE,CAAC,UAAU;AAItF,QAAM,oBAAoB,aAAAA,QAAM,WAAW,8EAAqC;AAChF,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,YAAY;AAAA,EAClC,IAAI;AAEJ,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,EAC9B,IAAI,aAAAA,QAAM,WAAW,6DAAyB;AAC9C,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,mBAAmB,GAAG,eAAe;AAAA,IACnE,gBAAgB,EAAE,eAAe,eAAe,mCAAmC,qBAAqB;AAAA,IACxG;AAAA,EACF,QAAI,kDAAqB,OAAO,iBAAiB;AAEjD,SAGE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAS;AAAA,QACT,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAU;AAAA,QACV,iBAAc;AAAA,QACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQE,aACI,YAAY,cAAc,IAAI,CAAC,UAAU,gBAAgB,GAAG,MAAM,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,IACvG;AAAA;AAAA,QAEN,iBAAe;AAAA,QACf;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,iBAAiB,gBAAgB;AAAA,QACjC,gBAAgB,gBAAgB;AAAA,QAChC,gBAAgB,gBAAgB,KAAK;AAAA,QAErC,UAAU;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ;AAEA,oBAAoB,cAAc;AAClC,MAAM,oCAAgC,kCAAS,mBAAmB;AAClE,8BAA8B,YAAY;",
   "names": ["React"]
 }

package/dist/esm/DSMenuButton.js

@@ -8,18 +8,21 @@ import { useMenuButton } from "./config/useMenuButton.js";
 import { DSOpinionatedButton } from "./parts/DSOpinionatedButton/index.js";
 import { DSMenuButtonName, MENU_BUTTON_SLOTS, MENU_BUTTON_DATA_TESTID } from "./constants/index.js";
 import { DSMenuBehaviouralContextProvider } from "./parts/DSMenuBehaviouralContextProvider/DSMenuBehaviouralContextProvider.js";
+import { MenuButtonContextProvider } from "./MenuButtonContextProviderCTX.js";
 const StyledWrapper = styled(Grid, { name: DSMenuButtonName, slot: MENU_BUTTON_SLOTS.ROOT })``;
 const DSMenuButton = (props) => {
-  const { propsWithDefault, opinionatedButtonProps, menuBehaviouralLayerProps } = useMenuButton(props);
-  return /* @__PURE__ */ jsx(
+  const ctx = useMenuButton(props);
+  const { opinionatedButtonProps, ownerProps, menuBehaviouralLayerProps } = ctx;
+  const { getOwnerProps, getOwnerPropsArguments } = ownerProps;
+  return /* @__PURE__ */ jsx(MenuButtonContextProvider.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
     StyledWrapper,
     {
       "data-testid": MENU_BUTTON_DATA_TESTID.ROOT,
-      getOwnerProps: () => propsWithDefault,
-      getOwnerPropsArguments: () => ({}),
+      getOwnerProps,
+      getOwnerPropsArguments,
       children: /* @__PURE__ */ jsx(DSMenuBehaviouralContextProvider, { ...menuBehaviouralLayerProps, children: /* @__PURE__ */ jsx(DSOpinionatedButton, { ...opinionatedButtonProps, children: opinionatedButtonProps.children }) })
     }
-  );
+  ) });
 };
 DSMenuButton.displayName = DSMenuButtonName;
 const DSMenuButtonWithSchema = describe(DSMenuButton);

package/dist/esm/DSMenuButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSMenuButton.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACgCf;AA/BR,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAA6B,mCAAmC;AAChE,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,SAAS,kBAAkB,mBAAmB,+BAA+B;AAC7E,SAAS,wCAAwC;AAEjD,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,KAAK,CAAC;AAa3F,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,kBAAkB,wBAAwB,0BAA0B,IAAI,cAAc,KAAK;AACnG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,wBAAwB;AAAA,MACrC,eAAe,MAAM;AAAA,MACrB,wBAAwB,OAAO,CAAC;AAAA,MAEhC,8BAAC,oCAAkC,GAAG,2BACpC,8BAAC,uBAAqB,GAAG,wBAAyB,iCAAuB,UAAS,GACpF;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACqCb;AApCV,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAA6B,mCAAmC;AAChE,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,SAAS,kBAAkB,mBAAmB,+BAA+B;AAC7E,SAAS,wCAAwC;AACjD,SAAS,iCAAiC;AAE1C,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,KAAK,CAAC;AAa3F,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,MAAM,cAAc,KAAK;AAC/B,QAAM,EAAE,wBAAwB,YAAY,0BAA0B,IAAI;AAE1E,QAAM,EAAE,eAAe,uBAAuB,IAAI;AAClD,SACE,oBAAC,0BAA0B,UAA1B,EAAmC,OAAO,KACzC;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,wBAAwB;AAAA,MACrC;AAAA,MACA;AAAA,MAEA,8BAAC,oCAAkC,GAAG,2BACpC,8BAAC,uBAAqB,GAAG,wBAAyB,iCAAuB,UAAS,GACpF;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
   "names": []
 }

package/dist/esm/MenuButtonContextProviderCTX.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { createContext } from "react";
+const defaultContext = {};
+const MenuButtonContextProvider = createContext(defaultContext);
+var MenuButtonContextProviderCTX_default = MenuButtonContextProvider;
+export {
+  MenuButtonContextProvider,
+  MenuButtonContextProviderCTX_default as default
+};
+//# sourceMappingURL=MenuButtonContextProviderCTX.js.map

package/dist/esm/MenuButtonContextProviderCTX.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/MenuButtonContextProviderCTX.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAG9B,MAAM,iBAAiB,CAAC;AAGjB,MAAM,4BAA4B,cAA6B,cAAc;AAEpF,IAAO,uCAAQ;",
+  "names": []
+}

package/dist/esm/config/useMenuButton.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import { useGetXstyledProps, useMemoMergePropsWithDefault, useOwnerProps } from "@elliemae/ds-props-helpers";
 import React2 from "react";
 import { uid } from "uid";
 import { DSMenuButtonPropTypes, menuSpecificDefaultProps } from "../react-desc-prop-types.js";
@@ -15,6 +15,7 @@ const useMenuButton = (propsFromUser) => {
   useValidateProps(propsWithDefault, DSMenuButtonPropTypes);
   const xstyledProps = useGetXstyledProps(propsWithDefault);
   const instanceUid = React2.useMemo(() => `menu-button${uid(5)}`, []);
+  const ownerProps = useOwnerProps(propsFromUser);
   const { options: appOptions } = propsWithDefault;
   const optionsArray = Array.isArray(appOptions) ? appOptions : [];
   const treeRootNodeFromOptionsArrayIfArray = useOptionsArrayToDsTree({
@@ -39,9 +40,10 @@ const useMenuButton = (propsFromUser) => {
       propsWithDefault,
       xstyledProps,
       instanceUid,
+      ownerProps,
       ...splitInherithedProps
     }),
-    [propsWithDefault, xstyledProps, instanceUid, splitInherithedProps]
+    [propsWithDefault, xstyledProps, ownerProps, instanceUid, splitInherithedProps]
   );
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useMenuButton.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport { useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { DSMenuButtonPropTypes, menuSpecificDefaultProps, type DSMenuButtonT } from '../react-desc-prop-types.js';\nimport { getFocusableNodes } from '../utils/nodesTypeguardsAndGetters.js';\nimport { useOptionsArrayToDsTree } from '../utils/useOptionsArrayToDsTree.js';\nimport { useSplitInherithedProps } from './useSplitInherithedProps.js';\nimport { useValidateProps } from './useValidateProps.js';\nexport interface MenuButtonCTX extends ReturnType<typeof useSplitInherithedProps> {\n  propsWithDefault: DSMenuButtonT.InternalProps;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useMenuButton = (propsFromUser: DSMenuButtonT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSMenuButtonT.InternalProps>(\n    propsFromUser,\n    menuSpecificDefaultProps,\n  );\n  useValidateProps(propsWithDefault, DSMenuButtonPropTypes);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const instanceUid = React.useMemo(() => `menu-button${uid(5)}`, []);\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n\n  // =============================================================================\n  // React hooks can't be invoked conditionally...\n  // =============================================================================\n\n  // As per intended WIDGET API, user can provide options as an array of \"items\" or an array of \"nodes\"\n  // we do the conversion from \"items\" to \"nodes\" here,\n  //   because the `parts` require the \"nodes\" extra properties to handle the logic and rendering\n  const { options: appOptions } = propsWithDefault;\n  const optionsArray: DSMenuButtonT.MenuItemInterface[] = Array.isArray(appOptions) ? appOptions : [];\n\n  const treeRootNodeFromOptionsArrayIfArray = useOptionsArrayToDsTree({\n    options: optionsArray,\n    instanceUid,\n    propsWithDefault,\n    // this typecast is a safe type reconciliation, typescript checks they are compatible\n    // this typecast let us avoid to have to do the ` | OtherCompatibleType` dance\n  }).getRoot() as DSMenuButtonT.MenuNode;\n  const treeRootNode = React.useMemo(\n    () => (Array.isArray(appOptions) ? treeRootNodeFromOptionsArrayIfArray : appOptions),\n    [appOptions, treeRootNodeFromOptionsArrayIfArray],\n  );\n\n  // =============================================================================\n  // We calculate the focusableNodes from the treeRootNode.plainChildren via getFocusableNodes\n  // =============================================================================\n  const focusableNodes = React.useMemo(() => getFocusableNodes(treeRootNode), [treeRootNode]);\n  const splitInherithedProps = useSplitInherithedProps({\n    propsWithDefault,\n    focusableNodes,\n    treeRootNode,\n  });\n\n  return React.useMemo<MenuButtonCTX>(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      ...splitInherithedProps,\n    }),\n    [propsWithDefault, xstyledProps, instanceUid, splitInherithedProps],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,oBAAoB,oCAAoC;AACjE,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB,SAAS,uBAAuB,gCAAoD;AACpF,SAAS,yBAAyB;AAClC,SAAS,+BAA+B;AACxC,SAAS,+BAA+B;AACxC,SAAS,wBAAwB;AAO1B,MAAM,gBAAgB,CAAC,kBAAuC;AAInE,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,mBAAiB,kBAAkB,qBAAqB;AAIxD,QAAM,eAAe,mBAAmB,gBAAgB;AAKxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,cAAc,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAYlE,QAAM,EAAE,SAAS,WAAW,IAAI;AAChC,QAAM,eAAkD,MAAM,QAAQ,UAAU,IAAI,aAAa,CAAC;AAElG,QAAM,sCAAsC,wBAAwB;AAAA,IAClE,SAAS;AAAA,IACT;AAAA,IACA;AAAA;AAAA;AAAA,EAGF,CAAC,EAAE,QAAQ;AACX,QAAM,eAAeA,OAAM;AAAA,IACzB,MAAO,MAAM,QAAQ,UAAU,IAAI,sCAAsC;AAAA,IACzE,CAAC,YAAY,mCAAmC;AAAA,EAClD;AAKA,QAAM,iBAAiBA,OAAM,QAAQ,MAAM,kBAAkB,YAAY,GAAG,CAAC,YAAY,CAAC;AAC1F,QAAM,uBAAuB,wBAAwB;AAAA,IACnD;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,kBAAkB,cAAc,aAAa,oBAAoB;AAAA,EACpE;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,oBAAoB,8BAA8B,qBAAqB;AAChF,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB,SAAS,uBAAuB,gCAAoD;AACpF,SAAS,yBAAyB;AAClC,SAAS,+BAA+B;AACxC,SAAS,+BAA+B;AACxC,SAAS,wBAAwB;AAQ1B,MAAM,gBAAgB,CAAC,kBAAuC;AAInE,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,mBAAiB,kBAAkB,qBAAqB;AAIxD,QAAM,eAAe,mBAAmB,gBAAgB;AAKxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,cAAc,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AASlE,QAAM,aAAa,cAAmC,aAAa;AAInE,QAAM,EAAE,SAAS,WAAW,IAAI;AAChC,QAAM,eAAkD,MAAM,QAAQ,UAAU,IAAI,aAAa,CAAC;AAElG,QAAM,sCAAsC,wBAAwB;AAAA,IAClE,SAAS;AAAA,IACT;AAAA,IACA;AAAA;AAAA;AAAA,EAGF,CAAC,EAAE,QAAQ;AACX,QAAM,eAAeA,OAAM;AAAA,IACzB,MAAO,MAAM,QAAQ,UAAU,IAAI,sCAAsC;AAAA,IACzE,CAAC,YAAY,mCAAmC;AAAA,EAClD;AAKA,QAAM,iBAAiBA,OAAM,QAAQ,MAAM,kBAAkB,YAAY,GAAG,CAAC,YAAY,CAAC;AAC1F,QAAM,uBAAuB,wBAAwB;AAAA,IACnD;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,kBAAkB,cAAc,YAAY,aAAa,oBAAoB;AAAA,EAChF;AACF;",
   "names": ["React"]
 }

package/dist/esm/constants/index.js

@@ -1,5 +1,7 @@
 import * as React from "react";
 import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+import { FLYOUT_MENU_SLOTS } from "../parts/DSFlyoutMenu/constants/index.js";
+import { MENU_ITEM_RENDERER_FACTORY_SLOTS } from "../parts/DSMenuItemRendererFactory/constants/index.js";
 const DSMenuButtonName = "DSMenubutton";
 const MENU_ITEMS_TYPES = {
   SEPARATOR: "separator",
@@ -17,10 +19,20 @@ const MENU_BUTTON_SLOTS = {
   ROOT: "root"
 };
 const MENU_BUTTON_DATA_TESTID = slotObjectToDataTestIds(DSMenuButtonName, MENU_BUTTON_SLOTS);
+const { ROOT: FLYOUT_MENU_ROOT, ...FLYOUT_MENU_SLOTS_REST } = FLYOUT_MENU_SLOTS;
+const { ROOT: MENU_ITEM_RENDERER_FACTORY_ROOT, ...MENU_ITEM_RENDERER_FACTORY_SLOTS_REST } = 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
+};
 export {
   DSMenuButtonName,
   MENU_BUTTON_DATA_TESTID,
   MENU_BUTTON_SLOTS,
+  MENU_BUTTON_WITH_PARTS_SLOTS,
   MENU_ITEMS_TYPES
 };
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;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,0BAA0B,wBAAwB,kBAAkB,iBAAiB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAClC,SAAS,wCAAwC;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,0BAA0B,wBAAwB,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": []
 }

package/dist/esm/index.js

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

package/dist/esm/index.js.map

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

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

@@ -12,6 +12,7 @@ import { useFlyoutMenu } from "./config/useFlyoutMenu.js";
 import { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from "./constants/index.js";
 import { DSFlyoutMenuPropTypesSchema } from "./react-desc-prop-types.js";
 import { isRootNode } from "../../utils/nodesTypeguardsAndGetters.js";
+import { MenuButtonContextProvider } from "../../MenuButtonContextProviderCTX.js";
 const StyledWrapper = styled(Grid, {
   name: DSFlyoutMenuName,
   slot: FLYOUT_MENU_SLOTS.ROOT
@@ -21,6 +22,10 @@ const StyledWrapper = styled(Grid, {
   padding: ${({ theme }) => theme.space.xxxs} 0;
   ${xStyledCommonProps}
 `;
+const StyledFloatingWrapper = styled(FloatingWrapper, {
+  name: DSFlyoutMenuName,
+  slot: FLYOUT_MENU_SLOTS.FLOATING_WRAPPER
+})``;
 const StyledMenu = styled("div", { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.LIST_WRAPPER })`
   max-height: ${({ $maxHeight }) => typeof $maxHeight === "number" ? `${$maxHeight}px` : $maxHeight};
   overflow-y: auto;
@@ -30,6 +35,9 @@ const StyledMenu = styled("div", { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLO
 const NoComponentPlaceholder = () => null;
 const DSFlyoutMenu = (props) => {
   const { propsWithDefault, xstyledProps } = useFlyoutMenu(props);
+  const {
+    ownerProps: { getOwnerProps, getOwnerPropsArguments }
+  } = React2.useContext(MenuButtonContextProvider);
   const {
     instanceUid,
     globalEventsHelpers: { mainMenuRef, handleSubmenusRefChange }
@@ -53,7 +61,7 @@ const DSFlyoutMenu = (props) => {
     setDidAnimationEnd(true);
   }, []);
   return /* @__PURE__ */ jsx(
-    FloatingWrapper,
+    StyledFloatingWrapper,
     {
       innerRef: setFloatingRef,
       floatingStyles,
@@ -61,12 +69,16 @@ const DSFlyoutMenu = (props) => {
       context: floatingContext,
       onAnimationStartTriggered: handleAnimationStartTrigger,
       onAnimationEnd: handleAnimationEnd,
-      children: /* @__PURE__ */ jsx(StyledWrapper, { getOwnerProps: () => propsWithDefault, getOwnerPropsArguments: () => ({}), ...xstyledProps, children: /* @__PURE__ */ jsx(
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: /* @__PURE__ */ jsx(StyledWrapper, { getOwnerProps, getOwnerPropsArguments, ...xstyledProps, children: /* @__PURE__ */ jsx(
         StyledMenu,
         {
           role: "menu",
           innerRef: handleRefChange,
           $maxHeight: itemNode.plainItem.maxHeight ?? menuSpecificDefaultProps.maxHeight,
+          getOwnerProps,
+          getOwnerPropsArguments,
           children: itemNode.children.map((optionNode) => /* @__PURE__ */ jsx(
             DSMenuItemRendererFactory,
             {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSFlyoutMenu/DSFlyoutMenu.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport React from 'react';\nimport { type DSMenuButtonT, menuSpecificDefaultProps } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { DSMenuItemRendererFactory } from '../DSMenuItemRendererFactory/index.js';\nimport { useFlyoutMenu } from './config/useFlyoutMenu.js';\nimport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './constants/index.js';\nimport { DSFlyoutMenuPropTypesSchema, type DSFlyoutMenuT } from './react-desc-prop-types.js';\nimport { isRootNode } from '../../utils/nodesTypeguardsAndGetters.js';\n\nconst StyledWrapper = styled(Grid, {\n  name: DSFlyoutMenuName,\n  slot: FLYOUT_MENU_SLOTS.ROOT,\n})`\n  min-width: 1px;\n  background-color: white;\n  padding: ${({ theme }) => theme.space.xxxs} 0;\n  ${xStyledCommonProps}\n`;\n\nconst StyledMenu = styled('div', { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.LIST_WRAPPER })<{\n  $maxHeight: string | number;\n}>`\n  max-height: ${({ $maxHeight }) => (typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight)};\n  overflow-y: auto;\n  padding: 0;\n  margin: 0;\n`;\n\nconst NoComponentPlaceholder = () => null;\n\nconst DSFlyoutMenu: React.ComponentType<DSFlyoutMenuT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps } = useFlyoutMenu(props);\n  const {\n    instanceUid,\n    globalEventsHelpers: { mainMenuRef, handleSubmenusRefChange },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const [didAnimationEnd, setDidAnimationEnd] = React.useState(false);\n\n  const { setFloatingRef, floatingStyles, floatingContext, ItemRenderer, isMenuOpen, itemNode } = propsWithDefault;\n\n  const handleRefChange = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (isRootNode(itemNode)) {\n        mainMenuRef.current = node;\n        return;\n      }\n      handleSubmenusRefChange(node, itemNode.dsId);\n    },\n    [handleSubmenusRefChange, itemNode, mainMenuRef],\n  );\n\n  const handleAnimationStartTrigger = React.useCallback(() => {\n    setDidAnimationEnd(false);\n  }, []);\n  const handleAnimationEnd = React.useCallback(() => {\n    setDidAnimationEnd(true);\n  }, []);\n\n  return (\n    <FloatingWrapper\n      innerRef={setFloatingRef}\n      floatingStyles={floatingStyles}\n      isOpen={isMenuOpen}\n      context={floatingContext}\n      onAnimationStartTriggered={handleAnimationStartTrigger}\n      onAnimationEnd={handleAnimationEnd}\n    >\n      <StyledWrapper getOwnerProps={() => propsWithDefault} getOwnerPropsArguments={() => ({})} {...xstyledProps}>\n        <StyledMenu\n          role=\"menu\"\n          innerRef={handleRefChange}\n          $maxHeight={itemNode.plainItem.maxHeight ?? menuSpecificDefaultProps.maxHeight}\n        >\n          {itemNode.children.map((optionNode) => (\n            <DSMenuItemRendererFactory\n              key={`flyout-menu-item-${optionNode.dsId}-${instanceUid}`}\n              // DSTree doesn't support children having a polymorphic type, so we need to cast it manually\n              itemNode={optionNode as DSMenuButtonT.MenuNode}\n              ItemRenderer={ItemRenderer}\n              //  we are passing the DSFlyoutMenu component as a prop to the DSMenuItemRendererFactory\n              //    this solves the circular-ish dependency\n              //  the conditional `didAnimationEnd` solves the visual artefact of nested FloatingWrapper wrongly positioned due to animation\n              FlyoutMenuCircularDepInject={didAnimationEnd ? DSFlyoutMenu : NoComponentPlaceholder}\n            />\n          ))}\n        </StyledMenu>\n      </StyledWrapper>\n    </FloatingWrapper>\n  );\n};\n\nDSFlyoutMenu.displayName = DSFlyoutMenuName;\nconst DSFlyoutMenuWithSchema = describe(DSFlyoutMenu);\nDSFlyoutMenuWithSchema.propTypes = DSFlyoutMenuPropTypesSchema;\n\nexport { DSFlyoutMenu, DSFlyoutMenuWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC8EX;AA9EZ,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,0BAA0B;AAC3C,OAAOA,YAAW;AAClB,SAA6B,gCAAgC;AAC7D,SAAS,6CAA6C;AACtD,SAAS,iCAAiC;AAC1C,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB,yBAAyB;AACpD,SAAS,mCAAuD;AAChE,SAAS,kBAAkB;AAE3B,MAAM,gBAAgB,OAAO,MAAM;AAAA,EACjC,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,aAGY,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,IACxC,kBAAkB;AAAA;AAGtB,MAAM,aAAa,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,aAAa,CAAC;AAAA,gBAGjF,CAAC,EAAE,WAAW,MAAO,OAAO,eAAe,WAAW,GAAG,UAAU,OAAO,UAAW;AAAA;AAAA;AAAA;AAAA;AAMrG,MAAM,yBAAyB,MAAM;AAErC,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,kBAAkB,aAAa,IAAI,cAAc,KAAK;AAC9D,QAAM;AAAA,IACJ;AAAA,IACA,qBAAqB,EAAE,aAAa,wBAAwB;AAAA,EAC9D,IAAIA,OAAM,WAAW,qCAAqC;AAC1D,QAAM,CAAC,iBAAiB,kBAAkB,IAAIA,OAAM,SAAS,KAAK;AAElE,QAAM,EAAE,gBAAgB,gBAAgB,iBAAiB,cAAc,YAAY,SAAS,IAAI;AAEhG,QAAM,kBAAkBA,OAAM;AAAA,IAC5B,CAAC,SAAyB;AACxB,UAAI,WAAW,QAAQ,GAAG;AACxB,oBAAY,UAAU;AACtB;AAAA,MACF;AACA,8BAAwB,MAAM,SAAS,IAAI;AAAA,IAC7C;AAAA,IACA,CAAC,yBAAyB,UAAU,WAAW;AAAA,EACjD;AAEA,QAAM,8BAA8BA,OAAM,YAAY,MAAM;AAC1D,uBAAmB,KAAK;AAAA,EAC1B,GAAG,CAAC,CAAC;AACL,QAAM,qBAAqBA,OAAM,YAAY,MAAM;AACjD,uBAAmB,IAAI;AAAA,EACzB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,2BAA2B;AAAA,MAC3B,gBAAgB;AAAA,MAEhB,8BAAC,iBAAc,eAAe,MAAM,kBAAkB,wBAAwB,OAAO,CAAC,IAAK,GAAG,cAC5F;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,YAAY,SAAS,UAAU,aAAa,yBAAyB;AAAA,UAEpE,mBAAS,SAAS,IAAI,CAAC,eACtB;AAAA,YAAC;AAAA;AAAA,cAGC,UAAU;AAAA,cACV;AAAA,cAIA,6BAA6B,kBAAkB,eAAe;AAAA;AAAA,YAPzD,oBAAoB,WAAW,IAAI,IAAI,WAAW;AAAA,UAQzD,CACD;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\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    >\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"],
+  "mappings": "AAAA,YAAY,WAAW;AC0FX;AA1FZ,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,0BAA0B;AAE3C,OAAOA,YAAW;AAClB,SAA6B,gCAAgC;AAC7D,SAAS,6CAA6C;AACtD,SAAS,iCAAiC;AAC1C,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB,yBAAyB;AACpD,SAAS,mCAAuD;AAChE,SAAS,kBAAkB;AAC3B,SAAS,iCAAiC;AAC1C,MAAM,gBAAgB,OAAO,MAAM;AAAA,EACjC,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAAA;AAAA;AAAA,aAGY,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,IACxC,kBAAkB;AAAA;AAGtB,MAAM,wBAAwB,OAAO,iBAAiB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,kBAAkB;AAC1B,CAAC;AAED,MAAM,aAAa,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,aAAa,CAAC;AAAA,gBAGjF,CAAC,EAAE,WAAW,MAAO,OAAO,eAAe,WAAW,GAAG,UAAU,OAAO,UAAW;AAAA;AAAA;AAAA;AAAA;AAMrG,MAAM,yBAAyB,MAAM;AAErC,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,kBAAkB,aAAa,IAAI,cAAc,KAAK;AAC9D,QAAM;AAAA,IACJ,YAAY,EAAE,eAAe,uBAAuB;AAAA,EACtD,IAAIA,OAAM,WAAW,yBAAyB;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA,qBAAqB,EAAE,aAAa,wBAAwB;AAAA,EAC9D,IAAIA,OAAM,WAAW,qCAAqC;AAC1D,QAAM,CAAC,iBAAiB,kBAAkB,IAAIA,OAAM,SAAS,KAAK;AAElE,QAAM,EAAE,gBAAgB,gBAAgB,iBAAiB,cAAc,YAAY,SAAS,IAAI;AAChG,QAAM,kBAAkBA,OAAM;AAAA,IAC5B,CAAC,SAAyB;AACxB,UAAI,WAAW,QAAQ,GAAG;AACxB,oBAAY,UAAU;AACtB;AAAA,MACF;AACA,8BAAwB,MAAM,SAAS,IAAI;AAAA,IAC7C;AAAA,IACA,CAAC,yBAAyB,UAAU,WAAW;AAAA,EACjD;AAEA,QAAM,8BAA8BA,OAAM,YAAY,MAAM;AAC1D,uBAAmB,KAAK;AAAA,EAC1B,GAAG,CAAC,CAAC;AACL,QAAM,qBAAqBA,OAAM,YAAY,MAAM;AACjD,uBAAmB,IAAI;AAAA,EACzB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,2BAA2B;AAAA,MAC3B,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MAEA,8BAAC,iBAAc,eAA8B,wBAAiD,GAAG,cAC/F;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,YAAY,SAAS,UAAU,aAAa,yBAAyB;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,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
   "names": ["React"]
 }

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

@@ -3,6 +3,7 @@ import { slotObjectToDataTestIds } from "@elliemae/ds-system";
 const DSFlyoutMenuName = "DSFlyoutmenu";
 const EXAMPLE_CONSTANTS = {};
 const FLYOUT_MENU_SLOTS = {
+  FLOATING_WRAPPER: "floating-wrapper",
   ROOT: "root",
   LIST_WRAPPER: "list-wrapper"
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSFlyoutMenu/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,mBAAmB;AAEzB,MAAM,oBAAoB,CAAC;AAG3B,MAAM,oBAAoB;AAAA,EAC/B,MAAM;AAAA,EACN,cAAc;AAChB;AAGO,MAAM,0BAA0B,wBAAwB,kBAAkB,iBAAiB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 = slotObjectToDataTestIds(DSFlyoutMenuName, FLYOUT_MENU_SLOTS);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,mBAAmB;AAEzB,MAAM,oBAAoB,CAAC;AAG3B,MAAM,oBAAoB;AAAA,EAC/B,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,cAAc;AAChB;AAGO,MAAM,0BAA0B,wBAAwB,kBAAkB,iBAAiB;",
   "names": []
 }

package/dist/esm/parts/DSMenuItemRendererFactory/ActivableMenuItem.js

@@ -6,15 +6,20 @@ import {
   StyledContentWrapper,
   StyledGlobalMenuItemWrapper
 } from "@elliemae/ds-menu-items-commons";
-import React2 from "react";
+import React2, { useCallback } from "react";
 import { MenuBehaviouralContextProviderContext } from "../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js";
 import { MENU_FOCUS_REGIONS } from "../DSMenuBehaviouralContextProvider/constants/index.js";
 import { focusNodeRacingConditionSolved } from "./focusNodeRacingConditionSolved.js";
+import { MenuButtonContextProvider } from "../../MenuButtonContextProviderCTX.js";
 const ActivableMenuItem = ({
   itemNode
 }) => {
   const { dsId, plainItem } = itemNode;
   const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
+  const {
+    ownerProps: { getOwnerProps }
+  } = React2.useContext(MenuButtonContextProvider);
+  const getOwnerPropsArguments = useCallback(() => plainItem, [plainItem]);
   const {
     focusRegion,
     menuItemEventsHandlers: {
@@ -68,6 +73,8 @@ const ActivableMenuItem = ({
       tabIndex: isFocused ? 0 : -1,
       "aria-disabled": disabled,
       applyAriaDisabled: disabled,
+      getOwnerProps,
+      getOwnerPropsArguments,
       children: /* @__PURE__ */ jsxs(
         StyledContentWrapper,
         {
@@ -76,10 +83,20 @@ const ActivableMenuItem = ({
           gutter: "xxs",
           alignItems: "center",
           minWidth: minWidth ?? void 0,
+          getOwnerProps,
+          getOwnerPropsArguments,
           children: [
             LeftDecComponent ? /* @__PURE__ */ jsx(LeftDecComponent, {}) : null,
-            /* @__PURE__ */ jsx(StyleMenuItemLabel, { children: label }),
-            secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, { disabled, children: secondaryLabel })
+            /* @__PURE__ */ jsx(StyleMenuItemLabel, { getOwnerProps, getOwnerPropsArguments, children: label }),
+            secondaryLabel !== void 0 && /* @__PURE__ */ jsx(
+              StyleMenuItemSecondaryLabel,
+              {
+                getOwnerProps,
+                getOwnerPropsArguments,
+                disabled,
+                children: secondaryLabel
+              }
+            )
           ]
         }
       )

package/dist/esm/parts/DSMenuItemRendererFactory/ActivableMenuItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/ActivableMenuItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\n\nexport const ActivableMenuItem: React.ComponentType<{ itemNode: DSMenuButtonT.MenuNodeActivableItem }> = ({\n  itemNode,\n}) => {\n  const { dsId, plainItem } = itemNode;\n  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n  const {\n    focusRegion,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'auto'] : ['auto'];\n    if (secondaryLabel) cols.push('auto');\n    return cols;\n  }, [LeftDecComponent, secondaryLabel]);\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n        focusNodeRacingConditionSolved(node);\n      }\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    handleFocusableMenuItemOnMouseEnter(itemNode);\n  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n  const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n    },\n    [handleFocusableMenuItemNativeFocusEvent, itemNode],\n  );\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      innerRef={handleFocusOnRender}\n      onKeyDown={handleFocusableMenuItemKeyDown}\n      onClick={handleFocusableMenuItemClick}\n      onMouseEnter={handleOnMouseEnter}\n      onFocus={handleOnFocus}\n      as=\"div\"\n      id={`${spacelessDsIdForDom}`}\n      role=\"menuitem\"\n      tabIndex={isFocused ? 0 : -1}\n      aria-disabled={disabled}\n      applyAriaDisabled={disabled}\n    >\n      <StyledContentWrapper\n        cols={gridLayout}\n        minHeight=\"16px\"\n        gutter=\"xxs\"\n        alignItems=\"center\"\n        minWidth={minWidth ?? undefined}\n      >\n        {LeftDecComponent ? <LeftDecComponent /> : null}\n        <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n        {secondaryLabel !== undefined && (\n          <StyleMenuItemSecondaryLabel disabled={disabled}>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n        )}\n      </StyledContentWrapper>\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC8EjB,SAOsB,KAPtB;AA7EN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAOA,YAAW;AAElB,SAAS,6CAA6C;AACtD,SAAS,0BAA0B;AACnC,SAAS,sCAAsC;AAExC,MAAM,oBAA4F,CAAC;AAAA,EACxG;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,OAAO,gBAAgB,gBAAgB,kBAAkB,UAAU,SAAS,IAAI;AAExF,QAAM;AAAA,IACJ;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAIA,OAAM,WAAW,qCAAqC;AAE1D,QAAM,aAAaA,OAAM,QAAQ,MAAM;AACrC,UAAM,OAAO,mBAAmB,CAAC,eAAe,MAAM,IAAI,CAAC,MAAM;AACjE,QAAI,eAAgB,MAAK,KAAK,MAAM;AACpC,WAAO;AAAA,EACT,GAAG,CAAC,kBAAkB,cAAc,CAAC;AAErC,QAAM,iCAAiCA,OAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,YAAY,gBAAgB,mBAAmB,aAAa,IAAI;AAEtE,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,UAAI,QAAQ,gBAAgB,mBAAmB,aAAa,IAAI,GAAG;AACjE,uCAA+B,IAAI;AAAA,MACrC;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA,EAIpB;AACA,QAAM,qBAAqBA,OAAM,YAAqD,MAAM;AAC1F,wCAAoC,QAAQ;AAAA,EAC9C,GAAG,CAAC,qCAAqC,QAAQ,CAAC;AAClD,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAM;AACL,8CAAwC,UAAU,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,yCAAyC,QAAQ;AAAA,EACpD;AAEA,QAAM,sBAAsB,gBAAgB,GAAG,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC;AAExE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MACT,cAAc;AAAA,MACd,SAAS;AAAA,MACT,IAAG;AAAA,MACH,IAAI,GAAG,mBAAmB;AAAA,MAC1B,MAAK;AAAA,MACL,UAAU,YAAY,IAAI;AAAA,MAC1B,iBAAe;AAAA,MACf,mBAAmB;AAAA,MAEnB;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACV,QAAO;AAAA,UACP,YAAW;AAAA,UACX,UAAU,YAAY;AAAA,UAErB;AAAA,+BAAmB,oBAAC,oBAAiB,IAAK;AAAA,YAC3C,oBAAC,sBAAoB,iBAAM;AAAA,YAC1B,mBAAmB,UAClB,oBAAC,+BAA4B,UAAqB,0BAAe;AAAA;AAAA;AAAA,MAErE;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React, { useCallback } from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nexport const ActivableMenuItem: React.ComponentType<{ itemNode: DSMenuButtonT.MenuNodeActivableItem }> = ({\n  itemNode,\n}) => {\n  const { dsId, plainItem } = itemNode;\n  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n  const {\n    ownerProps: { getOwnerProps },\n  } = React.useContext(MenuButtonContextProvider);\n\n  const getOwnerPropsArguments = useCallback(() => plainItem, [plainItem]);\n  const {\n    focusRegion,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'auto'] : ['auto'];\n    if (secondaryLabel) cols.push('auto');\n    return cols;\n  }, [LeftDecComponent, secondaryLabel]);\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n        focusNodeRacingConditionSolved(node);\n      }\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    handleFocusableMenuItemOnMouseEnter(itemNode);\n  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n  const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n    },\n    [handleFocusableMenuItemNativeFocusEvent, itemNode],\n  );\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      innerRef={handleFocusOnRender}\n      onKeyDown={handleFocusableMenuItemKeyDown}\n      onClick={handleFocusableMenuItemClick}\n      onMouseEnter={handleOnMouseEnter}\n      onFocus={handleOnFocus}\n      as=\"div\"\n      id={`${spacelessDsIdForDom}`}\n      role=\"menuitem\"\n      tabIndex={isFocused ? 0 : -1}\n      aria-disabled={disabled}\n      applyAriaDisabled={disabled}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledContentWrapper\n        cols={gridLayout}\n        minHeight=\"16px\"\n        gutter=\"xxs\"\n        alignItems=\"center\"\n        minWidth={minWidth ?? undefined}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {LeftDecComponent ? <LeftDecComponent /> : null}\n        <StyleMenuItemLabel getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          {label}\n        </StyleMenuItemLabel>\n        {secondaryLabel !== undefined && (\n          <StyleMenuItemSecondaryLabel\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            disabled={disabled}\n          >\n            {secondaryLabel}\n          </StyleMenuItemSecondaryLabel>\n        )}\n      </StyledContentWrapper>\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqFjB,SASsB,KATtB;AApFN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAOA,UAAS,mBAAmB;AAEnC,SAAS,6CAA6C;AACtD,SAAS,0BAA0B;AACnC,SAAS,sCAAsC;AAC/C,SAAS,iCAAiC;AACnC,MAAM,oBAA4F,CAAC;AAAA,EACxG;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,OAAO,gBAAgB,gBAAgB,kBAAkB,UAAU,SAAS,IAAI;AAExF,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,EAC9B,IAAIA,OAAM,WAAW,yBAAyB;AAE9C,QAAM,yBAAyB,YAAY,MAAM,WAAW,CAAC,SAAS,CAAC;AACvE,QAAM;AAAA,IACJ;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAIA,OAAM,WAAW,qCAAqC;AAE1D,QAAM,aAAaA,OAAM,QAAQ,MAAM;AACrC,UAAM,OAAO,mBAAmB,CAAC,eAAe,MAAM,IAAI,CAAC,MAAM;AACjE,QAAI,eAAgB,MAAK,KAAK,MAAM;AACpC,WAAO;AAAA,EACT,GAAG,CAAC,kBAAkB,cAAc,CAAC;AAErC,QAAM,iCAAiCA,OAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,YAAY,gBAAgB,mBAAmB,aAAa,IAAI;AAEtE,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,UAAI,QAAQ,gBAAgB,mBAAmB,aAAa,IAAI,GAAG;AACjE,uCAA+B,IAAI;AAAA,MACrC;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA,EAIpB;AACA,QAAM,qBAAqBA,OAAM,YAAqD,MAAM;AAC1F,wCAAoC,QAAQ;AAAA,EAC9C,GAAG,CAAC,qCAAqC,QAAQ,CAAC;AAClD,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAM;AACL,8CAAwC,UAAU,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,yCAAyC,QAAQ;AAAA,EACpD;AAEA,QAAM,sBAAsB,gBAAgB,GAAG,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC;AAExE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MACT,cAAc;AAAA,MACd,SAAS;AAAA,MACT,IAAG;AAAA,MACH,IAAI,GAAG,mBAAmB;AAAA,MAC1B,MAAK;AAAA,MACL,UAAU,YAAY,IAAI;AAAA,MAC1B,iBAAe;AAAA,MACf,mBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACV,QAAO;AAAA,UACP,YAAW;AAAA,UACX,UAAU,YAAY;AAAA,UACtB;AAAA,UACA;AAAA,UAEC;AAAA,+BAAmB,oBAAC,oBAAiB,IAAK;AAAA,YAC3C,oBAAC,sBAAmB,eAA8B,wBAC/C,iBACH;AAAA,YACC,mBAAmB,UAClB;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBAEC;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React"]
 }