@elliemae/ds-menu-button 3.60.0-next.5 → 3.60.0-next.50

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

@@ -14,6 +14,7 @@ import { MenuBehaviouralContextProviderContext } from "../DSMenuBehaviouralConte
 import { MENU_FOCUS_REGIONS } from "../DSMenuBehaviouralContextProvider/constants/index.js";
 import { getIsMultipleSelectNodeWithSubmenuSelected } from "../DSMenuBehaviouralContextProvider/utils/multipleSelectionHelpers.js";
 import { focusNodeRacingConditionSolved } from "./focusNodeRacingConditionSolved.js";
+import { MenuButtonContextProvider } from "../../MenuButtonContextProviderCTX.js";
 const placementOrderPreference = [
   "right-start",
   "right-start",
@@ -38,6 +39,9 @@ const MultipleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInje
     }
   } = React2.useContext(MenuBehaviouralContextProviderContext);
   const { selectedNodes } = propsWithDefault;
+  const {
+    ownerProps: { getOwnerProps }
+  } = React2.useContext(MenuButtonContextProvider);
   const gridLayout = React2.useMemo(() => {
     const cols = LeftDecComponent ? ["min-content", "min-content", "auto"] : ["min-content", "auto"];
     if (secondaryLabel) cols.push("auto");
@@ -86,6 +90,7 @@ const MultipleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInje
     },
     [handleFocusableMenuItemNativeFocusEvent, itemNode]
   );
+  const getOwnerPropsArguments = React2.useCallback(() => plainItem, [plainItem]);
   const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\s/g, "")}`;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -115,6 +120,8 @@ const MultipleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInje
         "aria-expanded": isExpanded,
         "aria-disabled": disabled,
         applyAriaDisabled: disabled,
+        getOwnerProps,
+        getOwnerPropsArguments,
         children: /* @__PURE__ */ jsxs(
           StyledContentWrapper,
           {
@@ -123,11 +130,21 @@ const MultipleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInje
             gutter: "xxs",
             alignItems: "center",
             minWidth: minWidth ?? void 0,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: [
               /* @__PURE__ */ jsx(LeftBoxlessCheckbox, { isSelected }),
               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
+                }
+              ),
               /* @__PURE__ */ jsx(ChevronSmallRight, {})
             ]
           }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/MultipleSelectWithSubmenuMenuItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable max-lines */\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Checkmark, ChevronSmallRight, ParenthesisRemove } from '@elliemae/ds-icons';\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 { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { getIsMultipleSelectNodeWithSubmenuSelected } from '../DSMenuBehaviouralContextProvider/utils/multipleSelectionHelpers.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];\nconst LeftBoxlessCheckbox = React.memo(({ isSelected }: { isSelected: boolean | 'mixed' }) => (\n  <Grid width=\"16px\">\n    {isSelected ? (\n      isSelected === 'mixed' ? (\n        <ParenthesisRemove size=\"s\" color={['brand-primary', '600']} />\n      ) : (\n        <Checkmark size=\"s\" color={['brand-primary', '600']} />\n      )\n    ) : (\n      <div />\n    )}\n  </Grid>\n));\nexport const MultipleSelectWithSubmenuMenuItem: React.ComponentType<{\n  itemNode: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem;\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    propsWithDefault,\n    openedSubItems,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedNodes } = propsWithDefault;\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'min-content', 'auto'] : ['min-content', '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 isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n  const isSelected = React.useMemo<'mixed' | boolean>(\n    // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n    // useAdvancedValidation guarantees the non-null in this component\n    () => getIsMultipleSelectNodeWithSubmenuSelected({ itemNode, selectedNodes: selectedNodes! }),\n    [itemNode, selectedNodes],\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  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=\"menuitemcheckbox\"\n        aria-checked={isSelected}\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-haspopup=\"menu\"\n        aria-expanded={isExpanded}\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          <LeftBoxlessCheckbox isSelected={isSelected} />\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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable max-lines */\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Checkmark, ChevronSmallRight, ParenthesisRemove } from '@elliemae/ds-icons';\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 { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { getIsMultipleSelectNodeWithSubmenuSelected } from '../DSMenuBehaviouralContextProvider/utils/multipleSelectionHelpers.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];\nconst LeftBoxlessCheckbox = React.memo(({ isSelected }: { isSelected: boolean | 'mixed' }) => (\n  <Grid width=\"16px\">\n    {isSelected ? (\n      isSelected === 'mixed' ? (\n        <ParenthesisRemove size=\"s\" color={['brand-primary', '600']} />\n      ) : (\n        <Checkmark size=\"s\" color={['brand-primary', '600']} />\n      )\n    ) : (\n      <div />\n    )}\n  </Grid>\n));\nexport const MultipleSelectWithSubmenuMenuItem: React.ComponentType<{\n  itemNode: DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem;\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    propsWithDefault,\n    openedSubItems,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedNodes } = propsWithDefault;\n\n  const {\n    ownerProps: { getOwnerProps },\n  } = React.useContext(MenuButtonContextProvider);\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'min-content', 'auto'] : ['min-content', '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 isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n  const isSelected = React.useMemo<'mixed' | boolean>(\n    // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n    // useAdvancedValidation guarantees the non-null in this component\n    () => getIsMultipleSelectNodeWithSubmenuSelected({ itemNode, selectedNodes: selectedNodes! }),\n    [itemNode, selectedNodes],\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  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 getOwnerPropsArguments = React.useCallback(() => plainItem, [plainItem]);\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=\"menuitemcheckbox\"\n        aria-checked={isSelected}\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-haspopup=\"menu\"\n        aria-expanded={isExpanded}\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          <LeftBoxlessCheckbox isSelected={isSelected} />\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"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -12,6 +12,7 @@ import React2 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 StyledRadioDotIndicator = styled("div")`
   width: 8px;
   height: 8px;
@@ -35,6 +36,10 @@ const SingleSelectMenuItem = ({
     }
   } = React2.useContext(MenuBehaviouralContextProviderContext);
   const { selectedNodes } = propsWithDefault;
+  const {
+    ownerProps: { getOwnerProps }
+  } = React2.useContext(MenuButtonContextProvider);
+  const getOwnerPropsArguments = React2.useCallback(() => plainItem, [plainItem]);
   const gridLayout = React2.useMemo(() => {
     const cols = LeftDecComponent ? ["min-content", "min-content", "auto"] : ["min-content", "auto"];
     if (secondaryLabel) cols.push("auto");
@@ -81,6 +86,8 @@ const SingleSelectMenuItem = ({
       "aria-checked": isSelected,
       "aria-disabled": disabled,
       applyAriaDisabled: disabled,
+      getOwnerProps,
+      getOwnerPropsArguments,
       children: /* @__PURE__ */ jsxs(
         StyledContentWrapper,
         {
@@ -89,11 +96,21 @@ const SingleSelectMenuItem = ({
           gutter: "xxs",
           alignItems: "center",
           minWidth: minWidth ?? void 0,
+          getOwnerProps,
+          getOwnerPropsArguments,
           children: [
             /* @__PURE__ */ jsx(LeftBoxlessRadio, { isSelected }),
             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/SingleSelectMenuItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/SingleSelectMenuItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport { styled } from '@elliemae/ds-system';\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\nconst StyledRadioDotIndicator = styled('div')`\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background-color: #005ea2;\n`;\n\nconst LeftBoxlessRadio = React.memo(({ isSelected }: { isSelected: boolean }) => (\n  <Grid width=\"16px\">{isSelected ? <StyledRadioDotIndicator /> : <div />}</Grid>\n));\nexport const SingleSelectMenuItem: React.ComponentType<{ itemNode: DSMenuButtonT.MenuNodeSingleSelectItem }> = ({\n  itemNode,\n}) => {\n  const { dsId, plainItem } = itemNode;\n  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n  const {\n    focusRegion,\n    propsWithDefault,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedNodes } = propsWithDefault;\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'min-content', 'auto'] : ['min-content', '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  // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n  // useAdvancedValidation guarantees the non-null in this component\n  const isSelected = selectedNodes!.some((itemMarkesAsSelected) => itemMarkesAsSelected.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\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    <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=\"menuitemradio\"\n      aria-checked={isSelected}\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        <LeftBoxlessRadio isSelected={isSelected} />\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;ACuBY,cAyE7B,YAzE6B;AAtBnC,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,OAAOA,YAAW;AAElB,SAAS,6CAA6C;AACtD,SAAS,0BAA0B;AACnC,SAAS,sCAAsC;AAE/C,MAAM,0BAA0B,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5C,MAAM,mBAAmBA,OAAM,KAAK,CAAC,EAAE,WAAW,MAChD,oBAAC,QAAK,OAAM,QAAQ,uBAAa,oBAAC,2BAAwB,IAAK,oBAAC,SAAI,GAAG,CACxE;AACM,MAAM,uBAAkG,CAAC;AAAA,EAC9G;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,OAAO,gBAAgB,gBAAgB,kBAAkB,UAAU,SAAS,IAAI;AAExF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAIA,OAAM,WAAW,qCAAqC;AAC1D,QAAM,EAAE,cAAc,IAAI;AAE1B,QAAM,aAAaA,OAAM,QAAQ,MAAM;AACrC,UAAM,OAAO,mBAAmB,CAAC,eAAe,eAAe,MAAM,IAAI,CAAC,eAAe,MAAM;AAC/F,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;AAGtE,QAAM,aAAa,cAAe,KAAK,CAAC,yBAAyB,qBAAqB,SAAS,IAAI;AAEnG,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;AAEA,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;AACxE,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,UAAU,YAAY,IAAI;AAAA,MAC1B,MAAK;AAAA,MACL,gBAAc;AAAA,MACd,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,UAEtB;AAAA,gCAAC,oBAAiB,YAAwB;AAAA,YACzC,mBAAmB,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 { Grid } from '@elliemae/ds-grid';\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport { styled } from '@elliemae/ds-system';\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';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nconst StyledRadioDotIndicator = styled('div')`\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background-color: #005ea2;\n`;\n\nconst LeftBoxlessRadio = React.memo(({ isSelected }: { isSelected: boolean }) => (\n  <Grid width=\"16px\">{isSelected ? <StyledRadioDotIndicator /> : <div />}</Grid>\n));\nexport const SingleSelectMenuItem: React.ComponentType<{ itemNode: DSMenuButtonT.MenuNodeSingleSelectItem }> = ({\n  itemNode,\n}) => {\n  const { dsId, plainItem } = itemNode;\n  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n  const {\n    focusRegion,\n    propsWithDefault,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedNodes } = propsWithDefault;\n\n  const {\n    ownerProps: { getOwnerProps },\n  } = React.useContext(MenuButtonContextProvider);\n\n  const getOwnerPropsArguments = React.useCallback(() => plainItem, [plainItem]);\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'min-content', 'auto'] : ['min-content', '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  // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n  // useAdvancedValidation guarantees the non-null in this component\n  const isSelected = selectedNodes!.some((itemMarkesAsSelected) => itemMarkesAsSelected.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\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    <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=\"menuitemradio\"\n      aria-checked={isSelected}\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        <LeftBoxlessRadio isSelected={isSelected} />\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": "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",
   "names": ["React"]
 }

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

@@ -14,6 +14,7 @@ import React2 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 placementOrderPreference = [
   "right-start",
   "right-start",
@@ -32,6 +33,9 @@ const LeftBoxlessRadio = React2.memo(({ isSelected }) => /* @__PURE__ */ jsx(Gri
 const SingleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
   const { dsId, plainItem } = itemNode;
   const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
+  const {
+    ownerProps: { getOwnerProps }
+  } = React2.useContext(MenuButtonContextProvider);
   const {
     focusRegion,
     propsWithDefault,
@@ -65,6 +69,7 @@ const SingleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject
   const {
     refs: { setReference }
   } = floatingContext;
+  const getOwnerPropsArguments = React2.useCallback(() => plainItem, [plainItem]);
   const handleFocusOnRender = React2.useCallback(
     (node) => {
       setReference(node);
@@ -116,6 +121,8 @@ const SingleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject
         "aria-expanded": isExpanded,
         "aria-disabled": disabled,
         applyAriaDisabled: disabled,
+        getOwnerProps,
+        getOwnerPropsArguments,
         children: /* @__PURE__ */ jsxs(
           StyledContentWrapper,
           {
@@ -124,11 +131,21 @@ const SingleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject
             gutter: "xxs",
             alignItems: "center",
             minWidth: minWidth ?? void 0,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: [
               /* @__PURE__ */ jsx(LeftBoxlessRadio, { isSelected }),
               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
+                }
+              ),
               /* @__PURE__ */ jsx(ChevronSmallRight, {})
             ]
           }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/SingleSelectWithSubmenuMenuItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { ChevronSmallRight } from '@elliemae/ds-icons';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport { styled } from '@elliemae/ds-system';\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];\nconst StyledRadioDotIndicator = styled('div')`\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background-color: #005ea2;\n`;\n\nconst LeftBoxlessRadio = React.memo(({ isSelected }: { isSelected: boolean }) => (\n  <Grid width=\"16px\">{isSelected ? <StyledRadioDotIndicator /> : <div />}</Grid>\n));\nexport const SingleSelectWithSubmenuMenuItem: React.ComponentType<{\n  itemNode: DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\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    propsWithDefault,\n    openedSubItems,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedNodes } = propsWithDefault;\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'min-content', 'auto'] : ['min-content', '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 isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n  // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n  // useAdvancedValidation guarantees the non-null in this component\n  const isSelected = selectedNodes!.some((itemMarkesAsSelected) => itemMarkesAsSelected.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=\"menuitemradio\"\n        aria-checked={isSelected}\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-haspopup=\"menu\"\n        aria-expanded={isExpanded}\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          <LeftBoxlessRadio isSelected={isSelected} />\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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { ChevronSmallRight } from '@elliemae/ds-icons';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport { styled } from '@elliemae/ds-system';\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];\nconst StyledRadioDotIndicator = styled('div')`\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background-color: #005ea2;\n`;\n\nconst LeftBoxlessRadio = React.memo(({ isSelected }: { isSelected: boolean }) => (\n  <Grid width=\"16px\">{isSelected ? <StyledRadioDotIndicator /> : <div />}</Grid>\n));\nexport const SingleSelectWithSubmenuMenuItem: React.ComponentType<{\n  itemNode: DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\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 {\n    focusRegion,\n    propsWithDefault,\n    openedSubItems,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedNodes } = propsWithDefault;\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'min-content', 'auto'] : ['min-content', '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 isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n  // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n  // useAdvancedValidation guarantees the non-null in this component\n  const isSelected = selectedNodes!.some((itemMarkesAsSelected) => itemMarkesAsSelected.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 getOwnerPropsArguments = React.useCallback(() => plainItem, [plainItem]);\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=\"menuitemradio\"\n        aria-checked={isSelected}\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-haspopup=\"menu\"\n        aria-expanded={isExpanded}\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          <LeftBoxlessRadio isSelected={isSelected} />\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"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -6,6 +6,7 @@ import React2 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 firstBoxWidth = "16px";
 const gridLayout = [firstBoxWidth, "1fr"];
 const SkeletonMenuItem = ({
@@ -24,6 +25,10 @@ const SkeletonMenuItem = ({
   const focusedRegionPerformanceHelper = React2.useRef(focusRegion);
   focusedRegionPerformanceHelper.current = focusRegion;
   const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);
+  const {
+    ownerProps: { getOwnerProps }
+  } = React2.useContext(MenuButtonContextProvider);
+  const getOwnerPropsArguments = React2.useCallback(() => plainItem, [plainItem]);
   const handleFocusOnRender = React2.useCallback(
     (node) => {
       if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
@@ -59,6 +64,8 @@ const SkeletonMenuItem = ({
       id: `${spacelessDsIdForDom}`,
       role: "menuitem",
       tabIndex: isFocused ? 0 : -1,
+      getOwnerProps,
+      getOwnerPropsArguments,
       children: /* @__PURE__ */ jsxs(
         StyledContentWrapper,
         {
@@ -67,6 +74,8 @@ const SkeletonMenuItem = ({
           gutter: "xxs",
           alignItems: "center",
           minWidth: minWidth ?? "150px",
+          getOwnerProps,
+          getOwnerPropsArguments,
           children: [
             /* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", width: firstBoxWidth }),
             /* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", width: secondBoxWidth })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/SkeletonMenuItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { StyledContentWrapper, StyledGlobalMenuItemWrapper } from '@elliemae/ds-menu-items-commons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\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\nconst firstBoxWidth = '16px';\nconst gridLayout = [firstBoxWidth, '1fr'];\nexport const SkeletonMenuItem: React.ComponentType<{ itemNode: DSMenuButtonT.MenuNodeSkeletonItem }> = ({\n  itemNode,\n}) => {\n  const { dsId, plainItem } = itemNode;\n  const { minWidth } = plainItem;\n\n  const {\n    focusRegion,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\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  const firstBoxAndGutterWidth = 16 + 8;\n  const secondBoxWidth = minWidth\n    ? `calc(${minWidth} - ${firstBoxAndGutterWidth})`\n    : `${150 - firstBoxAndGutterWidth}px`;\n  return (\n    <StyledGlobalMenuItemWrapper\n      innerRef={handleFocusOnRender}\n      onKeyDown={handleFocusableMenuItemKeyDown}\n      onMouseEnter={handleOnMouseEnter}\n      onFocus={handleOnFocus}\n      as=\"div\"\n      id={`${spacelessDsIdForDom}`}\n      role=\"menuitem\"\n      tabIndex={isFocused ? 0 : -1}\n    >\n      <StyledContentWrapper\n        cols={gridLayout}\n        minHeight=\"16px\"\n        gutter=\"xxs\"\n        alignItems=\"center\"\n        minWidth={minWidth ?? '150px'}\n      >\n        <DSSkeleton variant=\"rectangular\" width={firstBoxWidth} />\n        <DSSkeleton variant=\"rectangular\" width={secondBoxWidth} />\n      </StyledContentWrapper>\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACsEjB,SAOE,KAPF;AArEN,SAAS,sBAAsB,mCAAmC;AAClE,SAAS,kBAAkB;AAC3B,OAAOA,YAAW;AAElB,SAAS,6CAA6C;AACtD,SAAS,0BAA0B;AACnC,SAAS,sCAAsC;AAE/C,MAAM,gBAAgB;AACtB,MAAM,aAAa,CAAC,eAAe,KAAK;AACjC,MAAM,mBAA0F,CAAC;AAAA,EACtG;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,SAAS,IAAI;AAErB,QAAM;AAAA,IACJ;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAIA,OAAM,WAAW,qCAAqC;AAE1D,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,QAAM,yBAAyB,KAAK;AACpC,QAAM,iBAAiB,WACnB,QAAQ,QAAQ,MAAM,sBAAsB,MAC5C,GAAG,MAAM,sBAAsB;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,SAAS;AAAA,MACT,IAAG;AAAA,MACH,IAAI,GAAG,mBAAmB;AAAA,MAC1B,MAAK;AAAA,MACL,UAAU,YAAY,IAAI;AAAA,MAE1B;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACV,QAAO;AAAA,UACP,YAAW;AAAA,UACX,UAAU,YAAY;AAAA,UAEtB;AAAA,gCAAC,cAAW,SAAQ,eAAc,OAAO,eAAe;AAAA,YACxD,oBAAC,cAAW,SAAQ,eAAc,OAAO,gBAAgB;AAAA;AAAA;AAAA,MAC3D;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { StyledContentWrapper, StyledGlobalMenuItemWrapper } from '@elliemae/ds-menu-items-commons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\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';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nconst firstBoxWidth = '16px';\nconst gridLayout = [firstBoxWidth, '1fr'];\nexport const SkeletonMenuItem: React.ComponentType<{ itemNode: DSMenuButtonT.MenuNodeSkeletonItem }> = ({\n  itemNode,\n}) => {\n  const { dsId, plainItem } = itemNode;\n  const { minWidth } = plainItem;\n\n  const {\n    focusRegion,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\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 {\n    ownerProps: { getOwnerProps },\n  } = React.useContext(MenuButtonContextProvider);\n\n  const getOwnerPropsArguments = React.useCallback(() => plainItem, [plainItem]);\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  const firstBoxAndGutterWidth = 16 + 8;\n  const secondBoxWidth = minWidth\n    ? `calc(${minWidth} - ${firstBoxAndGutterWidth})`\n    : `${150 - firstBoxAndGutterWidth}px`;\n  return (\n    <StyledGlobalMenuItemWrapper\n      innerRef={handleFocusOnRender}\n      onKeyDown={handleFocusableMenuItemKeyDown}\n      onMouseEnter={handleOnMouseEnter}\n      onFocus={handleOnFocus}\n      as=\"div\"\n      id={`${spacelessDsIdForDom}`}\n      role=\"menuitem\"\n      tabIndex={isFocused ? 0 : -1}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledContentWrapper\n        cols={gridLayout}\n        minHeight=\"16px\"\n        gutter=\"xxs\"\n        alignItems=\"center\"\n        minWidth={minWidth ?? '150px'}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <DSSkeleton variant=\"rectangular\" width={firstBoxWidth} />\n        <DSSkeleton variant=\"rectangular\" width={secondBoxWidth} />\n      </StyledContentWrapper>\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC8EjB,SASE,KATF;AA7EN,SAAS,sBAAsB,mCAAmC;AAClE,SAAS,kBAAkB;AAC3B,OAAOA,YAAW;AAElB,SAAS,6CAA6C;AACtD,SAAS,0BAA0B;AACnC,SAAS,sCAAsC;AAC/C,SAAS,iCAAiC;AAC1C,MAAM,gBAAgB;AACtB,MAAM,aAAa,CAAC,eAAe,KAAK;AACjC,MAAM,mBAA0F,CAAC;AAAA,EACtG;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,SAAS,IAAI;AAErB,QAAM;AAAA,IACJ;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAIA,OAAM,WAAW,qCAAqC;AAE1D,QAAM,iCAAiCA,OAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,YAAY,gBAAgB,mBAAmB,aAAa,IAAI;AAEtE,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,EAC9B,IAAIA,OAAM,WAAW,yBAAyB;AAE9C,QAAM,yBAAyBA,OAAM,YAAY,MAAM,WAAW,CAAC,SAAS,CAAC;AAE7E,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,QAAM,yBAAyB,KAAK;AACpC,QAAM,iBAAiB,WACnB,QAAQ,QAAQ,MAAM,sBAAsB,MAC5C,GAAG,MAAM,sBAAsB;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,SAAS;AAAA,MACT,IAAG;AAAA,MACH,IAAI,GAAG,mBAAmB;AAAA,MAC1B,MAAK;AAAA,MACL,UAAU,YAAY,IAAI;AAAA,MAC1B;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,UAEA;AAAA,gCAAC,cAAW,SAAQ,eAAc,OAAO,eAAe;AAAA,YACxD,oBAAC,cAAW,SAAQ,eAAc,OAAO,gBAAgB;AAAA;AAAA;AAAA,MAC3D;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React"]
 }

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

@@ -12,6 +12,7 @@ import React2 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 placementOrderPreference = [
   "right-start",
   "right-start",
@@ -23,6 +24,10 @@ const placementOrderPreference = [
 const WithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
   const { dsId, plainItem } = itemNode;
   const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
+  const {
+    ownerProps: { getOwnerProps }
+  } = React2.useContext(MenuButtonContextProvider);
+  const getOwnerPropsArguments = React2.useCallback(() => plainItem, [plainItem]);
   const {
     focusRegion,
     openedSubItems,
@@ -103,6 +108,8 @@ const WithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
         ),
         "aria-disabled": disabled,
         applyAriaDisabled: disabled,
+        getOwnerProps,
+        getOwnerPropsArguments,
         children: /* @__PURE__ */ jsxs(
           StyledContentWrapper,
           {
@@ -111,10 +118,20 @@ const WithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
             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
+                }
+              ),
               /* @__PURE__ */ jsx(ChevronSmallRight, {})
             ]
           }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/WithSubmenuMenuItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -9,6 +9,7 @@ import { useOpinionatedButton } from "./config/useOpinionatedButton.js";
 import { OPINIONATED_BUTTON_SLOTS, DSOpinionatedButtonName } from "./constants/index.js";
 import { DSFlyoutMenu } from "../DSFlyoutMenu/index.js";
 import { MenuBehaviouralContextProviderContext } from "../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js";
+import { MenuButtonContextProvider } from "../../MenuButtonContextProviderCTX.js";
 const StyledButton = styled(DSButtonV3, { name: DSOpinionatedButtonName, slot: OPINIONATED_BUTTON_SLOTS.ROOT })``;
 const DSOpinionatedButton = (props) => {
   const globalMenuContext = React2.useContext(MenuBehaviouralContextProviderContext);
@@ -16,6 +17,9 @@ const DSOpinionatedButton = (props) => {
     isMenuOpen,
     propsWithDefault: { optionsTree }
   } = globalMenuContext;
+  const {
+    ownerProps: { getOwnerProps }
+  } = React2.useContext(MenuButtonContextProvider);
   const {
     propsWithDefault: { children, menuSpecificProps, ...restOfTheProps },
     eventsHandlers: { handleOnClick, handleOnFocus, handleFocusIfTriggerIsFocusRegion, handleTriggerKeyDown },
@@ -45,6 +49,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/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  // 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;",
+  "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';\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACmCnB,mBACE,KADF;AAnCJ,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;AAEtD,SAAS,iCAAiC;AAC1C,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,YAAY,EAAE,cAAc;AAAA,EAC9B,IAAIA,OAAM,WAAW,yBAAyB;AAC9C,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,UACf;AAAA,UAEC;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/types/MenuButtonContextProviderCTX.d.ts

@@ -0,0 +1,4 @@
+import type { MenuButtonCTX } from './config/useMenuButton.js';
+/** Context for cross component communication */
+export declare const MenuButtonContextProvider: import("react").Context<MenuButtonCTX>;
+export default MenuButtonContextProvider;

package/dist/types/config/useMenuButton.d.ts

@@ -1,9 +1,10 @@
-import { useGetXstyledProps } from '@elliemae/ds-props-helpers';
+import { useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';
 import { type DSMenuButtonT } from '../react-desc-prop-types.js';
 import { useSplitInherithedProps } from './useSplitInherithedProps.js';
 export interface MenuButtonCTX extends ReturnType<typeof useSplitInherithedProps> {
     propsWithDefault: DSMenuButtonT.InternalProps;
     xstyledProps: ReturnType<typeof useGetXstyledProps>;
+    ownerProps: ReturnType<typeof useOwnerProps<DSMenuButtonT.Props>>;
     instanceUid: string;
 }
 export declare const useMenuButton: (propsFromUser: DSMenuButtonT.Props) => MenuButtonCTX;