@elliemae/ds-menu-button 3.45.1 → 3.46.0-rc.0

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

@@ -41,8 +41,7 @@ const MultipleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInje
     menuItemEventsHandlers: {
       handleFocusableMenuItemKeyDown,
       handleFocusableMenuItemClick,
-      handleFocusableMenuItemOnMouseEnter,
-      handleMenuItemFocusReconciliation
+      handleFocusableMenuItemOnMouseEnter
     }
   } = React2.useContext(MenuBehaviouralContextProviderContext);
   const { selectedItems } = propsWithDefault;
@@ -63,9 +62,11 @@ const MultipleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInje
   const handleFocusOnRender = React2.useCallback(
     (node) => {
       setReference(node);
-      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
-        node.focus();
-      }
+      setTimeout(() => {
+        if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
+          node.focus();
+        }
+      });
     },
     // we need to change the callback reference every time the focusRegion changes or else the focus will not be set
     [dsId, focusRegion, setReference]
@@ -79,9 +80,6 @@ const MultipleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInje
     },
     [handleFocusableMenuItemOnMouseEnter, itemNode]
   );
-  const handleOnFocusReconciliation = React2.useCallback(() => {
-    handleMenuItemFocusReconciliation(itemNode);
-  }, [handleMenuItemFocusReconciliation, itemNode]);
   const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\s/g, "")}`;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -91,7 +89,6 @@ const MultipleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInje
         onKeyDown: handleFocusableMenuItemKeyDown,
         onClick: handleFocusableMenuItemClick,
         onMouseEnter: handleOnMouseEnter,
-        onFocus: handleOnFocusReconciliation,
         as: "div",
         id: `${spacelessDsIdForDom}`,
         tabIndex: isFocused ? 0 : -1,
@@ -123,7 +120,7 @@ const MultipleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInje
               /* @__PURE__ */ jsx(LeftBoxlessCheckbox, { isSelected }),
               LeftDecComponent ? /* @__PURE__ */ jsx(LeftDecComponent, {}) : null,
               /* @__PURE__ */ jsx(StyleMenuItemLabel, { children: label }),
-              secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, { children: secondaryLabel }),
+              secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, { 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';\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  const floatingContext = useFloatingContext({\n    placement: placementOrderPreference[0],\n    placementOrderPreference,\n    animationDuration: 100,\n    customOffset: [0, 0],\n  });\n  const {\n    refs: { setReference },\n  } = floatingContext;\n\n  const {\n    focusRegion,\n    propsWithDefault,\n    openedSubItems,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleMenuItemFocusReconciliation,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedItems } = 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    () => getIsMultipleSelectNodeWithSubmenuSelected({ itemNode, selectedItems }),\n    [itemNode, selectedItems],\n  );\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      setReference(node);\n      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n        node.focus();\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    (e) => {\n      handleFocusableMenuItemOnMouseEnter(itemNode, e);\n    },\n    [handleFocusableMenuItemOnMouseEnter, itemNode],\n  );\n  const handleOnFocusReconciliation = React.useCallback(() => {\n    handleMenuItemFocusReconciliation(itemNode);\n  }, [handleMenuItemFocusReconciliation, itemNode]);\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={handleOnFocusReconciliation}\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 && <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>}\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';\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  const floatingContext = useFloatingContext({\n    placement: placementOrderPreference[0],\n    placementOrderPreference,\n    animationDuration: 100,\n    customOffset: [0, 0],\n  });\n  const {\n    refs: { setReference },\n  } = floatingContext;\n\n  const {\n    focusRegion,\n    propsWithDefault,\n    openedSubItems,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedItems } = 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    () => getIsMultipleSelectNodeWithSubmenuSelected({ itemNode, selectedItems }),\n    [itemNode, selectedItems],\n  );\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      setReference(node);\n      setTimeout(() => {\n        if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n          node.focus();\n        }\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    (e) => {\n      handleFocusableMenuItemOnMouseEnter(itemNode, e);\n    },\n    [handleFocusableMenuItemOnMouseEnter, 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        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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",
   "names": ["React"]
 }

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

@@ -29,8 +29,7 @@ const SingleSelectMenuItem = ({
     menuItemEventsHandlers: {
       handleFocusableMenuItemKeyDown,
       handleFocusableMenuItemClick,
-      handleFocusableMenuItemOnMouseEnter,
-      handleMenuItemFocusReconciliation
+      handleFocusableMenuItemOnMouseEnter
     }
   } = React2.useContext(MenuBehaviouralContextProviderContext);
   const { selectedItems } = propsWithDefault;
@@ -45,9 +44,11 @@ const SingleSelectMenuItem = ({
   const isSelected = selectedItems.some((itemMarkesAsSelected) => itemMarkesAsSelected.dsId === dsId);
   const handleFocusOnRender = React2.useCallback(
     (node) => {
-      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
-        node.focus();
-      }
+      setTimeout(() => {
+        if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
+          node.focus();
+        }
+      });
     },
     // we need to change the callback reference every time the focusRegion changes or else the focus will not be set
     [dsId, focusRegion]
@@ -61,9 +62,6 @@ const SingleSelectMenuItem = ({
     },
     [handleFocusableMenuItemOnMouseEnter, itemNode]
   );
-  const handleOnFocusReconciliation = React2.useCallback(() => {
-    handleMenuItemFocusReconciliation(itemNode);
-  }, [handleMenuItemFocusReconciliation, itemNode]);
   const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\s/g, "")}`;
   return /* @__PURE__ */ jsx(
     StyledGlobalMenuItemWrapper,
@@ -72,7 +70,6 @@ const SingleSelectMenuItem = ({
       onKeyDown: handleFocusableMenuItemKeyDown,
       onClick: handleFocusableMenuItemClick,
       onMouseEnter: handleOnMouseEnter,
-      onFocus: handleOnFocusReconciliation,
       as: "div",
       id: `${spacelessDsIdForDom}`,
       tabIndex: isFocused ? 0 : -1,
@@ -92,7 +89,7 @@ const SingleSelectMenuItem = ({
             /* @__PURE__ */ jsx(LeftBoxlessRadio, { isSelected }),
             LeftDecComponent ? /* @__PURE__ */ jsx(LeftDecComponent, {}) : null,
             /* @__PURE__ */ jsx(StyleMenuItemLabel, { children: label }),
-            secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, { children: secondaryLabel })
+            secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, { 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';\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      handleMenuItemFocusReconciliation,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedItems } = 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  const isSelected = selectedItems.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        node.focus();\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    (e) => {\n      handleFocusableMenuItemOnMouseEnter(itemNode, e);\n    },\n    [handleFocusableMenuItemOnMouseEnter, itemNode],\n  );\n\n  const handleOnFocusReconciliation = React.useCallback(() => {\n    handleMenuItemFocusReconciliation(itemNode);\n  }, [handleMenuItemFocusReconciliation, itemNode]);\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={handleOnFocusReconciliation}\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 && <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>}\n      </StyledContentWrapper>\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACsBY,cAuE7B,YAvE6B;AArBnC,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;AAEnC,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;AACtE,QAAM,aAAa,cAAc,KAAK,CAAC,yBAAyB,qBAAqB,SAAS,IAAI;AAElG,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,UAAI,QAAQ,gBAAgB,mBAAmB,aAAa,IAAI,GAAG;AACjE,aAAK,MAAM;AAAA,MACb;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA,EAIpB;AAEA,QAAM,qBAAqBA,OAAM;AAAA,IAC/B,CAAC,MAAM;AACL,0CAAoC,UAAU,CAAC;AAAA,IACjD;AAAA,IACA,CAAC,qCAAqC,QAAQ;AAAA,EAChD;AAEA,QAAM,8BAA8BA,OAAM,YAAY,MAAM;AAC1D,sCAAkC,QAAQ;AAAA,EAC5C,GAAG,CAAC,mCAAmC,QAAQ,CAAC;AAChD,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,UAAa,oBAAC,+BAA6B,0BAAe;AAAA;AAAA;AAAA,MAChF;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';\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    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedItems } = 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  const isSelected = selectedItems.some((itemMarkesAsSelected) => itemMarkesAsSelected.dsId === dsId);\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      setTimeout(() => {\n        if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n          node.focus();\n        }\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    (e) => {\n      handleFocusableMenuItemOnMouseEnter(itemNode, e);\n    },\n    [handleFocusableMenuItemOnMouseEnter, 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      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;ACsBY,cAoE7B,YApE6B;AArBnC,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;AAEnC,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,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;AACtE,QAAM,aAAa,cAAc,KAAK,CAAC,yBAAyB,qBAAqB,SAAS,IAAI;AAElG,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,iBAAW,MAAM;AACf,YAAI,QAAQ,gBAAgB,mBAAmB,aAAa,IAAI,GAAG;AACjE,eAAK,MAAM;AAAA,QACb;AAAA,MACF,CAAC;AAAA,IACH;AAAA;AAAA,IAEA,CAAC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA,EAIpB;AAEA,QAAM,qBAAqBA,OAAM;AAAA,IAC/B,CAAC,MAAM;AACL,0CAAoC,UAAU,CAAC;AAAA,IACjD;AAAA,IACA,CAAC,qCAAqC,QAAQ;AAAA,EAChD;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,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;",
   "names": ["React"]
 }

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

@@ -47,8 +47,7 @@ const SingleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject
     menuItemEventsHandlers: {
       handleFocusableMenuItemKeyDown,
       handleFocusableMenuItemClick,
-      handleFocusableMenuItemOnMouseEnter,
-      handleMenuItemFocusReconciliation
+      handleFocusableMenuItemOnMouseEnter
     }
   } = React2.useContext(MenuBehaviouralContextProviderContext);
   const { selectedItems } = propsWithDefault;
@@ -66,9 +65,11 @@ const SingleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject
   const handleFocusOnRender = React2.useCallback(
     (node) => {
       setReference(node);
-      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
-        node.focus();
-      }
+      setTimeout(() => {
+        if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
+          node.focus();
+        }
+      });
     },
     // we need to change the callback reference every time the focusRegion changes or else the focus will not be set
     [dsId, focusRegion, setReference]
@@ -82,9 +83,6 @@ const SingleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject
     },
     [handleFocusableMenuItemOnMouseEnter, itemNode]
   );
-  const handleOnFocusReconciliation = React2.useCallback(() => {
-    handleMenuItemFocusReconciliation(itemNode);
-  }, [handleMenuItemFocusReconciliation, itemNode]);
   const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\s/g, "")}`;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -94,7 +92,6 @@ const SingleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject
         onKeyDown: handleFocusableMenuItemKeyDown,
         onClick: handleFocusableMenuItemClick,
         onMouseEnter: handleOnMouseEnter,
-        onFocus: handleOnFocusReconciliation,
         as: "div",
         id: `${spacelessDsIdForDom}`,
         tabIndex: isFocused ? 0 : -1,
@@ -126,7 +123,7 @@ const SingleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject
               /* @__PURE__ */ jsx(LeftBoxlessRadio, { isSelected }),
               LeftDecComponent ? /* @__PURE__ */ jsx(LeftDecComponent, {}) : null,
               /* @__PURE__ */ jsx(StyleMenuItemLabel, { children: label }),
-              secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, { children: secondaryLabel }),
+              secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, { 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';\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  const floatingContext = useFloatingContext({\n    placement: placementOrderPreference[0],\n    placementOrderPreference,\n    animationDuration: 100,\n    customOffset: [0, 0],\n  });\n  const {\n    refs: { setReference },\n  } = floatingContext;\n\n  const {\n    focusRegion,\n    propsWithDefault,\n    openedSubItems,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleMenuItemFocusReconciliation,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedItems } = 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 = selectedItems.some((itemMarkesAsSelected) => itemMarkesAsSelected.dsId === dsId);\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      setReference(node);\n      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n        node.focus();\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    (e) => {\n      handleFocusableMenuItemOnMouseEnter(itemNode, e);\n    },\n    [handleFocusableMenuItemOnMouseEnter, itemNode],\n  );\n  const handleOnFocusReconciliation = React.useCallback(() => {\n    handleMenuItemFocusReconciliation(itemNode);\n  }, [handleMenuItemFocusReconciliation, itemNode]);\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={handleOnFocusReconciliation}\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 && <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>}\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';\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  const floatingContext = useFloatingContext({\n    placement: placementOrderPreference[0],\n    placementOrderPreference,\n    animationDuration: 100,\n    customOffset: [0, 0],\n  });\n  const {\n    refs: { setReference },\n  } = floatingContext;\n\n  const {\n    focusRegion,\n    propsWithDefault,\n    openedSubItems,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedItems } = 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 = selectedItems.some((itemMarkesAsSelected) => itemMarkesAsSelected.dsId === dsId);\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      setReference(node);\n      setTimeout(() => {\n        if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n          node.focus();\n        }\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    (e) => {\n      handleFocusableMenuItemOnMouseEnter(itemNode, e);\n    },\n    [handleFocusableMenuItemOnMouseEnter, 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        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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",
   "names": ["React"]
 }

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

@@ -37,8 +37,7 @@ const WithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
     menuItemEventsHandlers: {
       handleFocusableMenuItemKeyDown,
       handleFocusableMenuItemClick,
-      handleFocusableMenuItemOnMouseEnter,
-      handleMenuItemFocusReconciliation
+      handleFocusableMenuItemOnMouseEnter
     }
   } = React2.useContext(MenuBehaviouralContextProviderContext);
   const gridLayout = React2.useMemo(() => {
@@ -54,9 +53,11 @@ const WithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
   const handleFocusOnRender = React2.useCallback(
     (node) => {
       setReference(node);
-      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
-        node.focus();
-      }
+      setTimeout(() => {
+        if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
+          node.focus();
+        }
+      });
     },
     // we need to change the callback reference every time the focusRegion changes or else the focus will not be set
     [dsId, focusRegion, setReference]
@@ -70,9 +71,6 @@ const WithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
     },
     [handleFocusableMenuItemOnMouseEnter, itemNode]
   );
-  const handleOnFocusReconciliation = React2.useCallback(() => {
-    handleMenuItemFocusReconciliation(itemNode);
-  }, [handleMenuItemFocusReconciliation, itemNode]);
   const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\s/g, "")}`;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -82,7 +80,6 @@ const WithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
         onKeyDown: handleFocusableMenuItemKeyDown,
         onClick: handleFocusableMenuItemClick,
         onMouseEnter: handleOnMouseEnter,
-        onFocus: handleOnFocusReconciliation,
         as: "div",
         id: `${spacelessDsIdForDom}`,
         tabIndex: isFocused ? 0 : -1,
@@ -112,7 +109,7 @@ const WithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
             children: [
               LeftDecComponent ? /* @__PURE__ */ jsx(LeftDecComponent, {}) : null,
               /* @__PURE__ */ jsx(StyleMenuItemLabel, { children: label }),
-              secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, { children: secondaryLabel }),
+              secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, { 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';\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  const floatingContext = useFloatingContext({\n    placement: placementOrderPreference[0],\n    placementOrderPreference,\n    animationDuration: 100,\n    customOffset: [0, 0],\n  });\n  const {\n    refs: { setReference },\n  } = floatingContext;\n\n  const {\n    focusRegion,\n    openedSubItems,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleMenuItemFocusReconciliation,\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 handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      setReference(node);\n      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n        node.focus();\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    (e) => {\n      handleFocusableMenuItemOnMouseEnter(itemNode, e);\n    },\n    [handleFocusableMenuItemOnMouseEnter, itemNode],\n  );\n  const handleOnFocusReconciliation = React.useCallback(() => {\n    handleMenuItemFocusReconciliation(itemNode);\n  }, [handleMenuItemFocusReconciliation, itemNode]);\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={handleOnFocusReconciliation}\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 && <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>}\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';\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  const floatingContext = useFloatingContext({\n    placement: placementOrderPreference[0],\n    placementOrderPreference,\n    animationDuration: 100,\n    customOffset: [0, 0],\n  });\n  const {\n    refs: { setReference },\n  } = floatingContext;\n\n  const {\n    focusRegion,\n    openedSubItems,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\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 handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      setReference(node);\n      setTimeout(() => {\n        if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n          node.focus();\n        }\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    (e) => {\n      handleFocusableMenuItemOnMouseEnter(itemNode, e);\n    },\n    [handleFocusableMenuItemOnMouseEnter, 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        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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",
   "names": ["React"]
 }

package/dist/esm/parts/DSMenuItemRendererFactory/config/useMenuItemRendererFactory.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React2 from "react";
-import { useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import { useGetXstyledProps } from "@elliemae/ds-props-helpers";
 import { uid } from "uid";
 import {
   DSMenuItemRendererFactoryPropTypesSchema,
@@ -8,9 +8,12 @@ import {
 } from "../react-desc-prop-types.js";
 import { useValidateProps } from "./useValidateProps.js";
 const useMenuItemRendererFactory = (propsFromUser) => {
-  const propsWithDefault = useMemoMergePropsWithDefault(
-    propsFromUser,
-    defaultProps
+  const propsWithDefault = React2.useMemo(
+    () => ({
+      ...defaultProps,
+      ...propsFromUser
+    }),
+    [propsFromUser]
   );
   useValidateProps(propsWithDefault, DSMenuItemRendererFactoryPropTypesSchema);
   const xstyledProps = useGetXstyledProps(propsWithDefault);

package/dist/esm/parts/DSMenuItemRendererFactory/config/useMenuItemRendererFactory.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSMenuItemRendererFactory/config/useMenuItemRendererFactory.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport {\n  type DSMenuItemRendererFactoryT,\n  DSMenuItemRendererFactoryPropTypesSchema,\n  defaultProps,\n} from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useMenuItemRendererFactory = (propsFromUser: DSMenuItemRendererFactoryT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSMenuItemRendererFactoryT.InternalProps>(\n    propsFromUser,\n    defaultProps,\n  );\n  useValidateProps(propsWithDefault, DSMenuItemRendererFactoryPropTypesSchema);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const instanceUid = React.useMemo(() => `ds-menu-item-renderer-factory-${uid(5)}`, []);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n    }),\n    [propsWithDefault, xstyledProps, instanceUid],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,oBAAoB,oCAAoC;AACjE,SAAS,WAAW;AACpB;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AAE1B,MAAM,6BAA6B,CAAC,kBAAoD;AAI7F,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,mBAAiB,kBAAkB,wCAAwC;AAI3E,QAAM,eAAe,mBAAmB,gBAAgB;AAKxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,iCAAiC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAErF,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,cAAc,WAAW;AAAA,EAC9C;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport {\n  type DSMenuItemRendererFactoryT,\n  DSMenuItemRendererFactoryPropTypesSchema,\n  defaultProps,\n} from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useMenuItemRendererFactory = (propsFromUser: DSMenuItemRendererFactoryT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  // the component deals with HTML DOM elements,\n  //  Deep compare of HTML DOM elements is pointless and extremely costly\n  //  for this specific case, we are better of not using `useMemoMergePropsWithDefault`\n  const propsWithDefault = React.useMemo(\n    () => ({\n      ...defaultProps,\n      ...propsFromUser,\n    }),\n    [propsFromUser],\n  ) as DSMenuItemRendererFactoryT.InternalProps;\n  useValidateProps(propsWithDefault, DSMenuItemRendererFactoryPropTypesSchema);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const instanceUid = React.useMemo(() => `ds-menu-item-renderer-factory-${uid(5)}`, []);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n    }),\n    [propsWithDefault, xstyledProps, instanceUid],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,0BAA0B;AACnC,SAAS,WAAW;AACpB;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AAE1B,MAAM,6BAA6B,CAAC,kBAAoD;AAO7F,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AACA,mBAAiB,kBAAkB,wCAAwC;AAI3E,QAAM,eAAe,mBAAmB,gBAAgB;AAKxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,iCAAiC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAErF,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,cAAc,WAAW;AAAA,EAC9C;AACF;",
   "names": ["React"]
 }

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

@@ -3,7 +3,9 @@ import { slotObjectToDataTestIds } from "@elliemae/ds-system";
 const DSMenuItemRendererFactoryName = "DSMenuItemRendererFactory";
 const EXAMPLE_CONSTANTS = {};
 const MENU_ITEM_RENDERER_FACTORY_SLOTS = {
-  ROOT: "root"
+  ROOT: "root",
+  GROUP_LABEL_WRAPPER: "group-label-wrapper",
+  LABEL_WITH_LEFT_DEC_WRAPPER: "group-label-wrapper"
 };
 const MENU_ITEM_RENDERER_FACTORY_DATA_TESTID = slotObjectToDataTestIds(
   DSMenuItemRendererFactoryName,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSMenuItemRendererFactory/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSMenuItemRendererFactoryName = 'DSMenuItemRendererFactory';\n\nexport const EXAMPLE_CONSTANTS = {} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const MENU_ITEM_RENDERER_FACTORY_SLOTS = {\n  ROOT: 'root',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const MENU_ITEM_RENDERER_FACTORY_DATA_TESTID = slotObjectToDataTestIds(\n  DSMenuItemRendererFactoryName,\n  MENU_ITEM_RENDERER_FACTORY_SLOTS,\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,gCAAgC;AAEtC,MAAM,oBAAoB,CAAC;AAG3B,MAAM,mCAAmC;AAAA,EAC9C,MAAM;AACR;AAGO,MAAM,yCAAyC;AAAA,EACpD;AAAA,EACA;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSMenuItemRendererFactoryName = 'DSMenuItemRendererFactory';\n\nexport const EXAMPLE_CONSTANTS = {} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const MENU_ITEM_RENDERER_FACTORY_SLOTS = {\n  ROOT: 'root',\n  GROUP_LABEL_WRAPPER: 'group-label-wrapper',\n  LABEL_WITH_LEFT_DEC_WRAPPER: 'group-label-wrapper',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const MENU_ITEM_RENDERER_FACTORY_DATA_TESTID = slotObjectToDataTestIds(\n  DSMenuItemRendererFactoryName,\n  MENU_ITEM_RENDERER_FACTORY_SLOTS,\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,gCAAgC;AAEtC,MAAM,oBAAoB,CAAC;AAG3B,MAAM,mCAAmC;AAAA,EAC9C,MAAM;AAAA,EACN,qBAAqB;AAAA,EACrB,6BAA6B;AAC/B;AAGO,MAAM,yCAAyC;AAAA,EACpD;AAAA,EACA;AACF;",
   "names": []
 }

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

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
 import { useFloatingContext } from "@elliemae/ds-floating-context";
 import React2 from "react";
 import { uid } from "uid";
@@ -24,9 +23,12 @@ const placementOrderPreference = [
   "top"
 ];
 const useOpinionatedButton = (propsFromUser) => {
-  const propsWithDefault = useMemoMergePropsWithDefault(
-    propsFromUser,
-    defaultProps
+  const propsWithDefault = React2.useMemo(
+    () => ({
+      ...defaultProps,
+      ...propsFromUser
+    }),
+    [propsFromUser]
   );
   useValidateProps(propsWithDefault, DSOpinionatedButtonPropTypesSchema);
   const instanceUid = React2.useMemo(() => `ds-opinionated-button-${uid(5)}`, []);

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

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

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 import React2 from "react";
+import { resolveRef } from "../../../utils/resolveRef.js";
 import { MenuBehaviouralContextProviderContext } from "../../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js";
 import { MENU_FOCUS_REGIONS } from "../../DSMenuBehaviouralContextProvider/constants/index.js";
 const useTriggerEventsHandlers = ({ propsWithDefault, floatingContext }) => {
@@ -35,12 +36,14 @@ const useTriggerEventsHandlers = ({ propsWithDefault, floatingContext }) => {
   const handleFocusIfTriggerIsFocusRegion = React2.useCallback(
     (node) => {
       setReference(node);
-      if (focusRegion === MENU_FOCUS_REGIONS.TRIGGER && node) {
-        node.focus();
-      }
-      if (typeof innerRef === "function") innerRef?.(node);
+      if (innerRef) resolveRef(innerRef, node);
+      setTimeout(() => {
+        if (focusedRegionPerformanceHelper.current === MENU_FOCUS_REGIONS.TRIGGER && node) {
+          node.focus();
+        }
+      });
     },
-    [focusRegion, innerRef, setReference]
+    [innerRef, setReference]
   );
   const handleTriggerKeyDown = React2.useCallback(
     (event, ...args) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSOpinionatedButton/config/useTriggerEventsHandlers.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport { type useFloatingContext } from '@elliemae/ds-floating-context';\nimport React from 'react';\nimport { MenuBehaviouralContextProviderContext } from '../../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSOpinionatedButtonT } from '../react-desc-prop-types.js';\n\ntype UseTriggerEventsHandlersConfig = {\n  propsWithDefault: DSOpinionatedButtonT.InternalProps;\n  floatingContext: ReturnType<typeof useFloatingContext>;\n};\n\nexport const useTriggerEventsHandlers = ({ propsWithDefault, floatingContext }: UseTriggerEventsHandlersConfig) => {\n  // =============================================================================\n  // on click -> open the submenu\n  //  if the props already include an onClick, we will wrap it\n  // =============================================================================\n  const { focusRegion, isMenuOpen, onOpinionatedOpen, onOpinionatedClose, trackFocusTrigger } = React.useContext(\n    MenuBehaviouralContextProviderContext,\n  );\n  const { onClick, onFocus, innerRef, onKeyDown } = propsWithDefault;\n  const {\n    refs: { setReference },\n  } = floatingContext;\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const mutableIsMenuOpen = React.useRef(isMenuOpen);\n  // this is a boolean, so a primitive value,\n  //   we don't need to useEffect to change it\n  //   because we don't need to ensure referencial equality\n  mutableIsMenuOpen.current = isMenuOpen;\n\n  const handleOnClick = React.useCallback<Required<DSButtonV3T.Props>['onClick']>(\n    (e, ...args) => {\n      if (onClick) onClick(e, ...args);\n      // no reason to change this function reference every time the menu opens/closes\n      //  so we are using a mutable ref to optimize this\n      if (mutableIsMenuOpen.current) {\n        onOpinionatedClose();\n      } else {\n        onOpinionatedOpen();\n      }\n    },\n    [onClick, onOpinionatedClose, onOpinionatedOpen],\n  );\n  const handleOnFocus = React.useCallback<Required<DSButtonV3T.Props>['onFocus']>(\n    (e, ...args) => {\n      if (focusedRegionPerformanceHelper.current !== MENU_FOCUS_REGIONS.TRIGGER) trackFocusTrigger();\n      if (onFocus) onFocus(e, ...args);\n    },\n    [onFocus, trackFocusTrigger],\n  );\n\n  const handleFocusIfTriggerIsFocusRegion = React.useCallback<React.RefCallback<HTMLButtonElement>>(\n    (node) => {\n      setReference(node);\n      if (focusRegion === MENU_FOCUS_REGIONS.TRIGGER && node) {\n        node.focus();\n      }\n      if (typeof innerRef === 'function') innerRef?.(node);\n    },\n    [focusRegion, innerRef, setReference],\n  );\n  /*\n   * 13th August 2024:\n   * https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/\n   * With focus on the button:\n   * Enter: opens the menu and places focus on the first menu item.\n   * Space: Opens the menu and places focus on the first menu item.\n   * (Optional) Down Arrow: opens the menu and moves focus to the first menu item.\n   * (Optional) Up Arrow: opens the menu and moves focus to the last menu item.\n   */\n  const handleTriggerKeyDown = React.useCallback<Required<DSButtonV3T.Props>['onKeyDown']>(\n    (event, ...args) => {\n      // DSButtonV3 triggers the onClick on Enter and Space, so we don't need to handle it here\n      // if (event.key === 'Enter' || event.key === ' ') {\n      //   onOpinionatedOpen();\n      // }\n      if (event.key === 'ArrowDown') {\n        onOpinionatedOpen();\n      }\n      if (event.key === 'ArrowUp') {\n        onOpinionatedOpen({ focusLastChild: true });\n      }\n      if (event.key === 'Escape') {\n        onOpinionatedClose();\n      }\n      if (onKeyDown) onKeyDown(event, ...args);\n    },\n    [onKeyDown, onOpinionatedOpen, onOpinionatedClose],\n  );\n\n  return React.useMemo(\n    () => ({ handleTriggerKeyDown, handleOnClick, handleOnFocus, handleFocusIfTriggerIsFocusRegion }),\n    [handleFocusIfTriggerIsFocusRegion, handleOnClick, handleOnFocus, handleTriggerKeyDown],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,OAAOA,YAAW;AAClB,SAAS,6CAA6C;AACtD,SAAS,0BAA0B;AAQ5B,MAAM,2BAA2B,CAAC,EAAE,kBAAkB,gBAAgB,MAAsC;AAKjH,QAAM,EAAE,aAAa,YAAY,mBAAmB,oBAAoB,kBAAkB,IAAIA,OAAM;AAAA,IAClG;AAAA,EACF;AACA,QAAM,EAAE,SAAS,SAAS,UAAU,UAAU,IAAI;AAClD,QAAM;AAAA,IACJ,MAAM,EAAE,aAAa;AAAA,EACvB,IAAI;AAEJ,QAAM,iCAAiCA,OAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,oBAAoBA,OAAM,OAAO,UAAU;AAIjD,oBAAkB,UAAU;AAE5B,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAM,SAAS;AACd,UAAI,QAAS,SAAQ,GAAG,GAAG,IAAI;AAG/B,UAAI,kBAAkB,SAAS;AAC7B,2BAAmB;AAAA,MACrB,OAAO;AACL,0BAAkB;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,SAAS,oBAAoB,iBAAiB;AAAA,EACjD;AACA,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAM,SAAS;AACd,UAAI,+BAA+B,YAAY,mBAAmB,QAAS,mBAAkB;AAC7F,UAAI,QAAS,SAAQ,GAAG,GAAG,IAAI;AAAA,IACjC;AAAA,IACA,CAAC,SAAS,iBAAiB;AAAA,EAC7B;AAEA,QAAM,oCAAoCA,OAAM;AAAA,IAC9C,CAAC,SAAS;AACR,mBAAa,IAAI;AACjB,UAAI,gBAAgB,mBAAmB,WAAW,MAAM;AACtD,aAAK,MAAM;AAAA,MACb;AACA,UAAI,OAAO,aAAa,WAAY,YAAW,IAAI;AAAA,IACrD;AAAA,IACA,CAAC,aAAa,UAAU,YAAY;AAAA,EACtC;AAUA,QAAM,uBAAuBA,OAAM;AAAA,IACjC,CAAC,UAAU,SAAS;AAKlB,UAAI,MAAM,QAAQ,aAAa;AAC7B,0BAAkB;AAAA,MACpB;AACA,UAAI,MAAM,QAAQ,WAAW;AAC3B,0BAAkB,EAAE,gBAAgB,KAAK,CAAC;AAAA,MAC5C;AACA,UAAI,MAAM,QAAQ,UAAU;AAC1B,2BAAmB;AAAA,MACrB;AACA,UAAI,UAAW,WAAU,OAAO,GAAG,IAAI;AAAA,IACzC;AAAA,IACA,CAAC,WAAW,mBAAmB,kBAAkB;AAAA,EACnD;AAEA,SAAOA,OAAM;AAAA,IACX,OAAO,EAAE,sBAAsB,eAAe,eAAe,kCAAkC;AAAA,IAC/F,CAAC,mCAAmC,eAAe,eAAe,oBAAoB;AAAA,EACxF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport { type useFloatingContext } from '@elliemae/ds-floating-context';\nimport React from 'react';\nimport { resolveRef } from '../../../utils/resolveRef.js';\nimport { MenuBehaviouralContextProviderContext } from '../../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSOpinionatedButtonT } from '../react-desc-prop-types.js';\n\ntype UseTriggerEventsHandlersConfig = {\n  propsWithDefault: DSOpinionatedButtonT.InternalProps;\n  floatingContext: ReturnType<typeof useFloatingContext>;\n};\n\nexport const useTriggerEventsHandlers = ({ propsWithDefault, floatingContext }: UseTriggerEventsHandlersConfig) => {\n  // =============================================================================\n  // on click -> open the submenu\n  //  if the props already include an onClick, we will wrap it\n  // =============================================================================\n  const { focusRegion, isMenuOpen, onOpinionatedOpen, onOpinionatedClose, trackFocusTrigger } = React.useContext(\n    MenuBehaviouralContextProviderContext,\n  );\n  const { onClick, onFocus, innerRef, onKeyDown } = propsWithDefault;\n  const {\n    refs: { setReference },\n  } = floatingContext;\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const mutableIsMenuOpen = React.useRef(isMenuOpen);\n  // this is a boolean, so a primitive value,\n  //   we don't need to useEffect to change it\n  //   because we don't need to ensure referencial equality\n  mutableIsMenuOpen.current = isMenuOpen;\n\n  const handleOnClick = React.useCallback<Required<DSButtonV3T.Props>['onClick']>(\n    (e, ...args) => {\n      if (onClick) onClick(e, ...args);\n      // no reason to change this function reference every time the menu opens/closes\n      //  so we are using a mutable ref to optimize this\n      if (mutableIsMenuOpen.current) {\n        onOpinionatedClose();\n      } else {\n        onOpinionatedOpen();\n      }\n    },\n    [onClick, onOpinionatedClose, onOpinionatedOpen],\n  );\n  const handleOnFocus = React.useCallback<Required<DSButtonV3T.Props>['onFocus']>(\n    (e, ...args) => {\n      if (focusedRegionPerformanceHelper.current !== MENU_FOCUS_REGIONS.TRIGGER) trackFocusTrigger();\n      if (onFocus) onFocus(e, ...args);\n    },\n    [onFocus, trackFocusTrigger],\n  );\n\n  const handleFocusIfTriggerIsFocusRegion = React.useCallback<React.RefCallback<HTMLButtonElement>>(\n    (node) => {\n      setReference(node);\n      if (innerRef) resolveRef(innerRef, node);\n      setTimeout(() => {\n        if (focusedRegionPerformanceHelper.current === MENU_FOCUS_REGIONS.TRIGGER && node) {\n          node.focus();\n        }\n      });\n    },\n    [innerRef, setReference],\n  );\n\n  /*\n   * 13th August 2024:\n   * https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/\n   * With focus on the button:\n   * Enter: opens the menu and places focus on the first menu item.\n   * Space: Opens the menu and places focus on the first menu item.\n   * (Optional) Down Arrow: opens the menu and moves focus to the first menu item.\n   * (Optional) Up Arrow: opens the menu and moves focus to the last menu item.\n   */\n  const handleTriggerKeyDown = React.useCallback<Required<DSButtonV3T.Props>['onKeyDown']>(\n    (event, ...args) => {\n      // DSButtonV3 triggers the onClick on Enter and Space, so we don't need to handle it here\n      // if (event.key === 'Enter' || event.key === ' ') {\n      //   onOpinionatedOpen();\n      // }\n      if (event.key === 'ArrowDown') {\n        onOpinionatedOpen();\n      }\n      if (event.key === 'ArrowUp') {\n        onOpinionatedOpen({ focusLastChild: true });\n      }\n      if (event.key === 'Escape') {\n        onOpinionatedClose();\n      }\n      if (onKeyDown) onKeyDown(event, ...args);\n    },\n    [onKeyDown, onOpinionatedOpen, onOpinionatedClose],\n  );\n\n  return React.useMemo(\n    () => ({ handleTriggerKeyDown, handleOnClick, handleOnFocus, handleFocusIfTriggerIsFocusRegion }),\n    [handleFocusIfTriggerIsFocusRegion, handleOnClick, handleOnFocus, handleTriggerKeyDown],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,OAAOA,YAAW;AAClB,SAAS,kBAAkB;AAC3B,SAAS,6CAA6C;AACtD,SAAS,0BAA0B;AAQ5B,MAAM,2BAA2B,CAAC,EAAE,kBAAkB,gBAAgB,MAAsC;AAKjH,QAAM,EAAE,aAAa,YAAY,mBAAmB,oBAAoB,kBAAkB,IAAIA,OAAM;AAAA,IAClG;AAAA,EACF;AACA,QAAM,EAAE,SAAS,SAAS,UAAU,UAAU,IAAI;AAClD,QAAM;AAAA,IACJ,MAAM,EAAE,aAAa;AAAA,EACvB,IAAI;AAEJ,QAAM,iCAAiCA,OAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,oBAAoBA,OAAM,OAAO,UAAU;AAIjD,oBAAkB,UAAU;AAE5B,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAM,SAAS;AACd,UAAI,QAAS,SAAQ,GAAG,GAAG,IAAI;AAG/B,UAAI,kBAAkB,SAAS;AAC7B,2BAAmB;AAAA,MACrB,OAAO;AACL,0BAAkB;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,SAAS,oBAAoB,iBAAiB;AAAA,EACjD;AACA,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAM,SAAS;AACd,UAAI,+BAA+B,YAAY,mBAAmB,QAAS,mBAAkB;AAC7F,UAAI,QAAS,SAAQ,GAAG,GAAG,IAAI;AAAA,IACjC;AAAA,IACA,CAAC,SAAS,iBAAiB;AAAA,EAC7B;AAEA,QAAM,oCAAoCA,OAAM;AAAA,IAC9C,CAAC,SAAS;AACR,mBAAa,IAAI;AACjB,UAAI,SAAU,YAAW,UAAU,IAAI;AACvC,iBAAW,MAAM;AACf,YAAI,+BAA+B,YAAY,mBAAmB,WAAW,MAAM;AACjF,eAAK,MAAM;AAAA,QACb;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,UAAU,YAAY;AAAA,EACzB;AAWA,QAAM,uBAAuBA,OAAM;AAAA,IACjC,CAAC,UAAU,SAAS;AAKlB,UAAI,MAAM,QAAQ,aAAa;AAC7B,0BAAkB;AAAA,MACpB;AACA,UAAI,MAAM,QAAQ,WAAW;AAC3B,0BAAkB,EAAE,gBAAgB,KAAK,CAAC;AAAA,MAC5C;AACA,UAAI,MAAM,QAAQ,UAAU;AAC1B,2BAAmB;AAAA,MACrB;AACA,UAAI,UAAW,WAAU,OAAO,GAAG,IAAI;AAAA,IACzC;AAAA,IACA,CAAC,WAAW,mBAAmB,kBAAkB;AAAA,EACnD;AAEA,SAAOA,OAAM;AAAA,IACX,OAAO,EAAE,sBAAsB,eAAe,eAAe,kCAAkC;AAAA,IAC/F,CAAC,mCAAmC,eAAe,eAAe,oBAAoB;AAAA,EACxF;AACF;",
   "names": ["React"]
 }