@elliemae/ds-menu-button 3.70.0-next.6 → 3.70.0-next.61

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

@@ -11,7 +11,7 @@ import { DSMenuItemRendererFactory } from "../DSMenuItemRendererFactory/index.js
 import { useFlyoutMenu } from "./config/useFlyoutMenu.js";
 import { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from "./constants/index.js";
 import { DSFlyoutMenuPropTypesSchema } from "./react-desc-prop-types.js";
-import { isRootNode } from "../../utils/nodesTypeguardsAndGetters.js";
+import { getAriaSetSizeAndPosInSetBySiblingList, isRootNode } from "../../utils/nodesTypeguardsAndGetters.js";
 import { MenuButtonContextProvider } from "../../MenuButtonContextProviderCTX.js";
 const StyledWrapper = styled(Grid, {
   name: DSFlyoutMenuName,
@@ -44,6 +44,11 @@ const DSFlyoutMenu = (props) => {
   } = React2.useContext(MenuBehaviouralContextProviderContext);
   const [didAnimationEnd, setDidAnimationEnd] = React2.useState(false);
   const { setFloatingRef, floatingStyles, floatingContext, ItemRenderer, isMenuOpen, itemNode } = propsWithDefault;
+  const ariaPositionsByDsId = React2.useMemo(
+    // DSTree doesn't support children having a polymorphic type, so we need to cast it manually (same as below)
+    () => getAriaSetSizeAndPosInSetBySiblingList(itemNode.children),
+    [itemNode.children]
+  );
   const handleRefChange = React2.useCallback(
     (node) => {
       if (isRootNode(itemNode)) {
@@ -80,15 +85,20 @@ const DSFlyoutMenu = (props) => {
           $maxHeight: itemNode.plainItem.maxHeight ?? menuSpecificDefaultProps.maxHeight,
           getOwnerProps,
           getOwnerPropsArguments,
-          children: itemNode.children.map((optionNode) => /* @__PURE__ */ jsx(
-            DSMenuItemRendererFactory,
-            {
-              itemNode: optionNode,
-              ItemRenderer,
-              FlyoutMenuCircularDepInject: didAnimationEnd ? DSFlyoutMenu : NoComponentPlaceholder
-            },
-            `flyout-menu-item-${optionNode.dsId}-${instanceUid}`
-          ))
+          children: itemNode.children.map((optionNode) => {
+            const ariaPosition = ariaPositionsByDsId.get(optionNode.dsId);
+            return /* @__PURE__ */ jsx(
+              DSMenuItemRendererFactory,
+              {
+                itemNode: optionNode,
+                ItemRenderer,
+                FlyoutMenuCircularDepInject: didAnimationEnd ? DSFlyoutMenu : NoComponentPlaceholder,
+                "aria-posinset": ariaPosition?.ariaPosInSet,
+                "aria-setsize": ariaPosition?.ariaSetSize
+              },
+              `flyout-menu-item-${optionNode.dsId}-${instanceUid}`
+            );
+          })
         }
       ) })
     }

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

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

package/dist/esm/parts/DSFlyoutMenu/react-desc-prop-types.js

@@ -19,7 +19,6 @@ const DSFlyoutMenuPropTypes = {
   floatingContext: PropTypes.object.description(
     "The context object from useFloatingContext, used to allow FloatingWrapper correct functionality"
   ).isRequired,
-  // anchorNode: PropTypes.instanceOf(HTMLElement).isRequired,
   isMenuOpen: PropTypes.bool.description("Wheter or not this particular instance of the flyout menu is open").isRequired,
   ...getPropsPerSlotPropTypes(DSFlyoutMenuName, FLYOUT_MENU_SLOTS),
   ...globalAttributesPropTypes,

package/dist/esm/parts/DSFlyoutMenu/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSFlyoutMenu/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { type useFloatingContext } from '@elliemae/ds-floating-context';\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSMenuSpecificPropTypes, menuSpecificDefaultProps, type DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './constants/index.js';\n\nexport declare namespace DSFlyoutMenuT {\n  /*\n   * everything that is specifically added in this namespace declaration and is not part of the original component\n   * is because the original component is an \"opinionated widget\" that offloads a chunk of responsibilities from dev to dimsum\n   * as such, the widget generates those interfaces,\n   *  but the app developer is not supposed to know about them\n   *    untill they go atomic composition (this namespace)\n   */\n  export interface RequiredProps extends DSMenuButtonT.MenuSpecificRequiredProps {\n    isMenuOpen: boolean;\n    itemNode:\n      | DSMenuButtonT.MenuNodeWithSubmenuItem\n      | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem\n      | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem\n      | DSMenuButtonT.MenuNodeActivableWithSubmenuItem\n      | DSMenuButtonT.MenuNodeRootItem;\n    setFloatingRef: ReturnType<typeof useFloatingContext>['refs']['setFloating'];\n    floatingStyles: ReturnType<typeof useFloatingContext>['floatingStyles'];\n    floatingContext: ReturnType<typeof useFloatingContext>['context'];\n  }\n\n  export interface DefaultProps extends DSMenuButtonT.MenuSpecifiDefaultProps {}\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFlyoutMenuName, typeof FLYOUT_MENU_SLOTS>,\n      DSMenuButtonT.MenuSpecificOptionalProps {}\n\n  export interface Props extends RequiredProps, Partial<DefaultProps>, OptionalProps {}\n\n  export interface InternalProps extends RequiredProps, DefaultProps, OptionalProps {}\n}\n\nexport const defaultProps: DSFlyoutMenuT.DefaultProps = { ...menuSpecificDefaultProps };\n\nexport const DSFlyoutMenuPropTypes: DSPropTypesSchema<DSFlyoutMenuT.Props> = {\n  itemNode: PropTypes.object.description('The parent menu node to render the menu from').isRequired,\n  setFloatingRef: PropTypes.func.description(\n    'The function to set the ref of the floating element (from useFloatingContext.refs.setFloating)',\n  ).isRequired,\n  floatingStyles: PropTypes.object.description(\n    'The styles to apply to the floating element to correctly position it (from useFloatingContext.floatingStyles)',\n  ).isRequired,\n  floatingContext: PropTypes.object.description(\n    'The context object from useFloatingContext, used to allow FloatingWrapper correct functionality',\n  ).isRequired,\n  // anchorNode: PropTypes.instanceOf(HTMLElement).isRequired,\n  isMenuOpen: PropTypes.bool.description('Wheter or not this particular instance of the flyout menu is open')\n    .isRequired,\n  ...getPropsPerSlotPropTypes(DSFlyoutMenuName, FLYOUT_MENU_SLOTS),\n  ...globalAttributesPropTypes,\n  // this component is meant to be used from a ds-menu-button compliant API,\n  //  for this reason we want to inherit the DSMenuButton props interface that relates to the menu and not the button...\n  ...DSMenuSpecificPropTypes,\n  ...xstyledPropTypes,\n};\n\nexport const DSFlyoutMenuPropTypesSchema = DSFlyoutMenuPropTypes as unknown as ValidationMap<DSFlyoutMenuT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,yBAAyB,gCAAoD;AACtF,SAAS,kBAAkB,yBAAyB;AAkC7C,MAAM,eAA2C,EAAE,GAAG,yBAAyB;AAE/E,MAAM,wBAAgE;AAAA,EAC3E,UAAU,UAAU,OAAO,YAAY,8CAA8C,EAAE;AAAA,EACvF,gBAAgB,UAAU,KAAK;AAAA,IAC7B;AAAA,EACF,EAAE;AAAA,EACF,gBAAgB,UAAU,OAAO;AAAA,IAC/B;AAAA,EACF,EAAE;AAAA,EACF,iBAAiB,UAAU,OAAO;AAAA,IAChC;AAAA,EACF,EAAE;AAAA;AAAA,EAEF,YAAY,UAAU,KAAK,YAAY,mEAAmE,EACvG;AAAA,EACH,GAAG,yBAAyB,kBAAkB,iBAAiB;AAAA,EAC/D,GAAG;AAAA;AAAA;AAAA,EAGH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,8BAA8B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { type useFloatingContext } from '@elliemae/ds-floating-context';\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSMenuSpecificPropTypes, menuSpecificDefaultProps, type DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './constants/index.js';\n\nexport declare namespace DSFlyoutMenuT {\n  /* Slot function-form prop arguments \u2014 one entry per slot in FLYOUT_MENU_SLOTS. */\n  export type SlotFunctionArguments = {\n    dsFlyoutmenuFloatingWrapper: () => object;\n    dsFlyoutmenuRoot: () => object;\n    dsFlyoutmenuListWrapper: () => object;\n  };\n\n  /*\n   * everything that is specifically added in this namespace declaration and is not part of the original component\n   * is because the original component is an \"opinionated widget\" that offloads a chunk of responsibilities from dev to dimsum\n   * as such, the widget generates those interfaces,\n   *  but the app developer is not supposed to know about them\n   *    untill they go atomic composition (this namespace)\n   */\n  export interface RequiredProps extends DSMenuButtonT.MenuSpecificRequiredProps {\n    isMenuOpen: boolean;\n    itemNode:\n      | DSMenuButtonT.MenuNodeWithSubmenuItem\n      | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem\n      | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem\n      | DSMenuButtonT.MenuNodeActivableWithSubmenuItem\n      | DSMenuButtonT.MenuNodeRootItem;\n    setFloatingRef: ReturnType<typeof useFloatingContext>['refs']['setFloating'];\n    floatingStyles: ReturnType<typeof useFloatingContext>['floatingStyles'];\n    floatingContext: ReturnType<typeof useFloatingContext>['context'];\n  }\n\n  export interface DefaultProps extends DSMenuButtonT.MenuSpecifiDefaultProps {}\n\n  export interface OptionalProps\n    extends\n      TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFlyoutMenuName, typeof FLYOUT_MENU_SLOTS>,\n      DSMenuButtonT.MenuSpecificOptionalProps {}\n\n  export interface Props extends RequiredProps, Partial<DefaultProps>, OptionalProps {}\n\n  export interface InternalProps extends RequiredProps, DefaultProps, OptionalProps {}\n}\n\nexport const defaultProps: DSFlyoutMenuT.DefaultProps = { ...menuSpecificDefaultProps };\n\nexport const DSFlyoutMenuPropTypes: DSPropTypesSchema<DSFlyoutMenuT.Props> = {\n  itemNode: PropTypes.object.description('The parent menu node to render the menu from').isRequired,\n  setFloatingRef: PropTypes.func.description(\n    'The function to set the ref of the floating element (from useFloatingContext.refs.setFloating)',\n  ).isRequired,\n  floatingStyles: PropTypes.object.description(\n    'The styles to apply to the floating element to correctly position it (from useFloatingContext.floatingStyles)',\n  ).isRequired,\n  floatingContext: PropTypes.object.description(\n    'The context object from useFloatingContext, used to allow FloatingWrapper correct functionality',\n  ).isRequired,\n  isMenuOpen: PropTypes.bool.description('Wheter or not this particular instance of the flyout menu is open')\n    .isRequired,\n  ...getPropsPerSlotPropTypes(DSFlyoutMenuName, FLYOUT_MENU_SLOTS),\n  ...globalAttributesPropTypes,\n  // this component is meant to be used from a ds-menu-button compliant API,\n  //  for this reason we want to inherit the DSMenuButton props interface that relates to the menu and not the button...\n  ...DSMenuSpecificPropTypes,\n  ...xstyledPropTypes,\n};\n\nexport const DSFlyoutMenuPropTypesSchema = DSFlyoutMenuPropTypes as unknown as ValidationMap<DSFlyoutMenuT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,yBAAyB,gCAAoD;AACtF,SAAS,kBAAkB,yBAAyB;AA0C7C,MAAM,eAA2C,EAAE,GAAG,yBAAyB;AAE/E,MAAM,wBAAgE;AAAA,EAC3E,UAAU,UAAU,OAAO,YAAY,8CAA8C,EAAE;AAAA,EACvF,gBAAgB,UAAU,KAAK;AAAA,IAC7B;AAAA,EACF,EAAE;AAAA,EACF,gBAAgB,UAAU,OAAO;AAAA,IAC/B;AAAA,EACF,EAAE;AAAA,EACF,iBAAiB,UAAU,OAAO;AAAA,IAChC;AAAA,EACF,EAAE;AAAA,EACF,YAAY,UAAU,KAAK,YAAY,mEAAmE,EACvG;AAAA,EACH,GAAG,yBAAyB,kBAAkB,iBAAiB;AAAA,EAC/D,GAAG;AAAA;AAAA;AAAA,EAGH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,8BAA8B;",
   "names": []
 }

package/dist/esm/parts/DSFlyoutMenu/typescript-testing/slot-props.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const SlotPropsAsObj = {
+  dsFlyoutmenuFloatingWrapper: { "aria-label": "just a typescript test" },
+  dsFlyoutmenuRoot: { "aria-label": "just a typescript test" },
+  dsFlyoutmenuListWrapper: { "aria-label": "just a typescript test" }
+};
+const SlotPropsAsFunctions = {
+  dsFlyoutmenuFloatingWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsFlyoutmenuRoot: () => ({ "aria-label": "just a typescript test" }),
+  dsFlyoutmenuListWrapper: () => ({ "aria-label": "just a typescript test" })
+};
+const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
+//# sourceMappingURL=slot-props.js.map

package/dist/esm/parts/DSFlyoutMenu/typescript-testing/slot-props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSFlyoutMenu/typescript-testing/slot-props.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\n\nimport type { DSFlyoutMenuT } from '../react-desc-prop-types.js';\nimport type { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from '../constants/index.js';\n\nconst SlotPropsAsObj: Partial<DSFlyoutMenuT.Props> = {\n  dsFlyoutmenuFloatingWrapper: { 'aria-label': 'just a typescript test' },\n  dsFlyoutmenuRoot: { 'aria-label': 'just a typescript test' },\n  dsFlyoutmenuListWrapper: { 'aria-label': 'just a typescript test' },\n};\n\nconst SlotPropsAsFunctions: DSFlyoutMenuT.SlotFunctionArguments = {\n  dsFlyoutmenuFloatingWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsFlyoutmenuRoot: () => ({ 'aria-label': 'just a typescript test' }),\n  dsFlyoutmenuListWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// Exhaustiveness check \u2014 fails compilation if a slot is missing from SlotFunctionArguments.\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSFlyoutMenuName, typeof FLYOUT_MENU_SLOTS>\n> = SlotPropsAsFunctions;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACOvB,MAAM,iBAA+C;AAAA,EACnD,6BAA6B,EAAE,cAAc,yBAAyB;AAAA,EACtE,kBAAkB,EAAE,cAAc,yBAAyB;AAAA,EAC3D,yBAAyB,EAAE,cAAc,yBAAyB;AACpE;AAEA,MAAM,uBAA4D;AAAA,EAChE,6BAA6B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC7E,kBAAkB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAClE,yBAAyB,OAAO,EAAE,cAAc,yBAAyB;AAC3E;AAGA,MAAM,6CAEF;",
+  "names": []
+}

package/dist/esm/parts/DSMenuBehaviouralContextProvider/config/useMenuBehaviouralContextProvider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSMenuBehaviouralContextProvider/config/useMenuBehaviouralContextProvider.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { uid } from 'uid';\nimport type { DSMenuButtonT } from '../../../react-desc-prop-types.js';\nimport {\n  DSMenuBehaviouralContextProviderPropTypesSchema,\n  defaultProps,\n  type DSMenuBehaviouralContextProviderT,\n} from '../react-desc-prop-types.js';\nimport { useAdvancedValidation } from './useAdvancedValidation.js';\nimport { useFocusTracker } from './useFocusTracker.js';\nimport { useGlobalEvents } from './useGlobalEvents.js';\nimport { useMenuItemEventsHandlers } from './useMenuItemEventsHandlers.js';\nimport { useMenuOpenStatus } from './useMenuOpenStatus.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface MenuBehaviouralContextProviderCTX\n  extends ReturnType<typeof useFocusTracker>,\n    ReturnType<typeof useMenuOpenStatus> {\n  propsWithDefault: DSMenuBehaviouralContextProviderT.InternalProps;\n  instanceUid: string;\n  menuItemEventsHandlers: ReturnType<typeof useMenuItemEventsHandlers>;\n  openedSubItems: DSMenuButtonT.WithSubmenuMenuNodes[];\n  handleChangeOpenedSubItems: Required<DSMenuButtonT.MenuBehaviouralLayerOptionalProps>['onDisplayedSubmenuChange'];\n  globalEventsHelpers: ReturnType<typeof useGlobalEvents>;\n}\n\nexport const useMenuBehaviouralContextProvider = (propsFromUser: DSMenuBehaviouralContextProviderT.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 DSMenuBehaviouralContextProviderT.InternalProps;\n  useValidateProps(propsWithDefault, DSMenuBehaviouralContextProviderPropTypesSchema);\n\n  // =============================================================================\n  // SPECIAL VALIDATIONS\n  // =============================================================================\n  useAdvancedValidation({ propsWithDefault });\n\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  // NO XSTYLED PROPS\n  // this is 100% a pure logic context provider, it's not a visual component\n\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const { onDisplayedSubmenuChange } = propsWithDefault;\n  const instanceUid = React.useMemo(() => `ds-menu-behavioural-context-provider-${uid(5)}`, []);\n  const [openedSubItems, setOpenedSubItems] = React.useState<DSMenuButtonT.WithSubmenuMenuNodes[]>([]);\n\n  const handleChangeOpenedSubItems = React.useCallback<\n    Required<DSMenuButtonT.MenuBehaviouralLayerOptionalProps>['onDisplayedSubmenuChange']\n  >(\n    (newOpenedItems, metainfo) => {\n      setOpenedSubItems(newOpenedItems);\n      onDisplayedSubmenuChange?.(newOpenedItems, metainfo);\n    },\n    [onDisplayedSubmenuChange],\n  );\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const focusTrackers = useFocusTracker();\n  const menuOpenStatus = useMenuOpenStatus({ propsWithDefault, focusTrackers });\n\n  // why item events handlers declared in the menu behaviour context provider and not in the menu item itself?\n  //  1 - each menu item depending on it's own type (single select, multiple select, with submenu) will have different behaviours\n  //      having each menu item to declare it's own events handlers would make the single event handler way easier to create per se\n  //      BUT we would lose the big picture of how the menu items are interacting with each other\n  //  2 - having each item to declare it's own event handler repeatdly is a waste of resources (even if it's a useless micro-optimization, it hurts me)\n  const menuItemEventsHandlers = useMenuItemEventsHandlers({\n    propsWithDefault,\n    focusTrackers,\n    menuOpenStatus,\n    handleChangeOpenedSubItems,\n  });\n\n  // handle \"onClickOutside\" + on window blur...\n  // the helpers contain a way to register the submenu refs/mainmenu refs, used in checking \"if click is outside\"\n  const globalEventsHelpers = useGlobalEvents({ menuOpenStatus, handleChangeOpenedSubItems, propsWithDefault });\n\n  return React.useMemo<MenuBehaviouralContextProviderCTX>(\n    () => ({\n      propsWithDefault,\n      instanceUid,\n      ...focusTrackers,\n      ...menuOpenStatus,\n      menuItemEventsHandlers,\n      openedSubItems,\n      handleChangeOpenedSubItems,\n      globalEventsHelpers,\n    }),\n    [\n      propsWithDefault,\n      instanceUid,\n      focusTrackers,\n      menuOpenStatus,\n      menuItemEventsHandlers,\n      openedSubItems,\n      handleChangeOpenedSubItems,\n      globalEventsHelpers,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,WAAW;AAEpB;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AAa1B,MAAM,oCAAoC,CAAC,kBAA2D;AAO3G,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AACA,mBAAiB,kBAAkB,+CAA+C;AAKlF,wBAAsB,EAAE,iBAAiB,CAAC;AAY1C,QAAM,EAAE,yBAAyB,IAAI;AACrC,QAAM,cAAcA,OAAM,QAAQ,MAAM,wCAAwC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAC5F,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,OAAM,SAA+C,CAAC,CAAC;AAEnG,QAAM,6BAA6BA,OAAM;AAAA,IAGvC,CAAC,gBAAgB,aAAa;AAC5B,wBAAkB,cAAc;AAChC,iCAA2B,gBAAgB,QAAQ;AAAA,IACrD;AAAA,IACA,CAAC,wBAAwB;AAAA,EAC3B;AAKA,QAAM,gBAAgB,gBAAgB;AACtC,QAAM,iBAAiB,kBAAkB,EAAE,kBAAkB,cAAc,CAAC;AAO5E,QAAM,yBAAyB,0BAA0B;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,sBAAsB,gBAAgB,EAAE,gBAAgB,4BAA4B,iBAAiB,CAAC;AAE5G,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { uid } from 'uid';\nimport type { DSMenuButtonT } from '../../../react-desc-prop-types.js';\nimport {\n  DSMenuBehaviouralContextProviderPropTypesSchema,\n  defaultProps,\n  type DSMenuBehaviouralContextProviderT,\n} from '../react-desc-prop-types.js';\nimport { useAdvancedValidation } from './useAdvancedValidation.js';\nimport { useFocusTracker } from './useFocusTracker.js';\nimport { useGlobalEvents } from './useGlobalEvents.js';\nimport { useMenuItemEventsHandlers } from './useMenuItemEventsHandlers.js';\nimport { useMenuOpenStatus } from './useMenuOpenStatus.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface MenuBehaviouralContextProviderCTX\n  extends ReturnType<typeof useFocusTracker>, ReturnType<typeof useMenuOpenStatus> {\n  propsWithDefault: DSMenuBehaviouralContextProviderT.InternalProps;\n  instanceUid: string;\n  menuItemEventsHandlers: ReturnType<typeof useMenuItemEventsHandlers>;\n  openedSubItems: DSMenuButtonT.WithSubmenuMenuNodes[];\n  handleChangeOpenedSubItems: Required<DSMenuButtonT.MenuBehaviouralLayerOptionalProps>['onDisplayedSubmenuChange'];\n  globalEventsHelpers: ReturnType<typeof useGlobalEvents>;\n}\n\nexport const useMenuBehaviouralContextProvider = (propsFromUser: DSMenuBehaviouralContextProviderT.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 DSMenuBehaviouralContextProviderT.InternalProps;\n  useValidateProps(propsWithDefault, DSMenuBehaviouralContextProviderPropTypesSchema);\n\n  // =============================================================================\n  // SPECIAL VALIDATIONS\n  // =============================================================================\n  useAdvancedValidation({ propsWithDefault });\n\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  // NO XSTYLED PROPS\n  // this is 100% a pure logic context provider, it's not a visual component\n\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const { onDisplayedSubmenuChange } = propsWithDefault;\n  const instanceUid = React.useMemo(() => `ds-menu-behavioural-context-provider-${uid(5)}`, []);\n  const [openedSubItems, setOpenedSubItems] = React.useState<DSMenuButtonT.WithSubmenuMenuNodes[]>([]);\n\n  const handleChangeOpenedSubItems = React.useCallback<\n    Required<DSMenuButtonT.MenuBehaviouralLayerOptionalProps>['onDisplayedSubmenuChange']\n  >(\n    (newOpenedItems, metainfo) => {\n      setOpenedSubItems(newOpenedItems);\n      onDisplayedSubmenuChange?.(newOpenedItems, metainfo);\n    },\n    [onDisplayedSubmenuChange],\n  );\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const focusTrackers = useFocusTracker();\n  const menuOpenStatus = useMenuOpenStatus({ propsWithDefault, focusTrackers });\n\n  // why item events handlers declared in the menu behaviour context provider and not in the menu item itself?\n  //  1 - each menu item depending on it's own type (single select, multiple select, with submenu) will have different behaviours\n  //      having each menu item to declare it's own events handlers would make the single event handler way easier to create per se\n  //      BUT we would lose the big picture of how the menu items are interacting with each other\n  //  2 - having each item to declare it's own event handler repeatdly is a waste of resources (even if it's a useless micro-optimization, it hurts me)\n  const menuItemEventsHandlers = useMenuItemEventsHandlers({\n    propsWithDefault,\n    focusTrackers,\n    menuOpenStatus,\n    handleChangeOpenedSubItems,\n  });\n\n  // handle \"onClickOutside\" + on window blur...\n  // the helpers contain a way to register the submenu refs/mainmenu refs, used in checking \"if click is outside\"\n  const globalEventsHelpers = useGlobalEvents({ menuOpenStatus, handleChangeOpenedSubItems, propsWithDefault });\n\n  return React.useMemo<MenuBehaviouralContextProviderCTX>(\n    () => ({\n      propsWithDefault,\n      instanceUid,\n      ...focusTrackers,\n      ...menuOpenStatus,\n      menuItemEventsHandlers,\n      openedSubItems,\n      handleChangeOpenedSubItems,\n      globalEventsHelpers,\n    }),\n    [\n      propsWithDefault,\n      instanceUid,\n      focusTrackers,\n      menuOpenStatus,\n      menuItemEventsHandlers,\n      openedSubItems,\n      handleChangeOpenedSubItems,\n      globalEventsHelpers,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,WAAW;AAEpB;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AAY1B,MAAM,oCAAoC,CAAC,kBAA2D;AAO3G,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AACA,mBAAiB,kBAAkB,+CAA+C;AAKlF,wBAAsB,EAAE,iBAAiB,CAAC;AAY1C,QAAM,EAAE,yBAAyB,IAAI;AACrC,QAAM,cAAcA,OAAM,QAAQ,MAAM,wCAAwC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAC5F,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,OAAM,SAA+C,CAAC,CAAC;AAEnG,QAAM,6BAA6BA,OAAM;AAAA,IAGvC,CAAC,gBAAgB,aAAa;AAC5B,wBAAkB,cAAc;AAChC,iCAA2B,gBAAgB,QAAQ;AAAA,IACrD;AAAA,IACA,CAAC,wBAAwB;AAAA,EAC3B;AAKA,QAAM,gBAAgB,gBAAgB;AACtC,QAAM,iBAAiB,kBAAkB,EAAE,kBAAkB,cAAc,CAAC;AAO5E,QAAM,yBAAyB,0BAA0B;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,sBAAsB,gBAAgB,EAAE,gBAAgB,4BAA4B,iBAAiB,CAAC;AAE5G,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["React"]
 }

package/dist/esm/parts/DSMenuBehaviouralContextProvider/utils/nodeGettersByCriterias.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSMenuBehaviouralContextProvider/utils/nodeGettersByCriterias.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-console */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type { DSMenuButtonT } from '../../../react-desc-prop-types.js';\nimport {\n  isFocusableNode,\n  isGroup,\n  isMenuNodeAllowedToHaveChildren,\n  isMultipleSelectNode,\n  isSelectionableNode,\n  isSelectionableWithSubmenuNode,\n  isSingleSelectNode,\n  isWithSubmenuNode,\n} from '../../../utils/nodesTypeguardsAndGetters.js';\nimport { TREE_STRUCTURE_ERRORS, UNEXPECTED_INTERNAL_ERRORS } from '../constants/Errors.js';\n\nexport const getSubMenusPath = (itemNode: DSMenuButtonT.MenuNode) => {\n  const subMenuNodesPath: DSMenuButtonT.WithSubmenuMenuNodes[] = [];\n  itemNode.walkParents((node) => {\n    // discards itself, we want the parents only\n    if (node.dsId === itemNode.dsId) return true;\n    if (isWithSubmenuNode(node)) {\n      subMenuNodesPath.push(node);\n    }\n    return true;\n  });\n  return subMenuNodesPath.reverse();\n};\n\nexport const getFocusableSiblingsList = (itemNode: DSMenuButtonT.MenuNode) => {\n  const { parent: parentNode } = itemNode;\n  if (!parentNode) {\n    console.log('getFocusableSiblingsList > itemNode', itemNode);\n    throw UNEXPECTED_INTERNAL_ERRORS.NODE_WITHOUT_PARENT;\n  }\n  if (!isMenuNodeAllowedToHaveChildren(parentNode)) {\n    // this should be impossible to reach, if this is reached, there is a bug in the code/validation checks\n    console.log('parentNode', parentNode);\n    console.log('itemNode', itemNode);\n    throw TREE_STRUCTURE_ERRORS.NODE_CANNOT_HAVE_CHILDREN;\n  }\n  // each tree depth may be composed of a mix of focusable and non-focusable nodes\n  //  in particular, the parent node may be a group node which is not focusable but it's children are (and are visually siblings)\n  // we need to do our calculations only on top of focusable nodes, and we also need to consider the scenario of a group node\n  const focusableSiblingsNodes: DSMenuButtonT.PseudoFocusableMenuNodes[] = [];\n\n  let parseableParentNode = parentNode;\n  // nesting a group node inside another group node is not allowed\n  //  I could not find a supporting explicit statement in the WCAG standard,\n  //   but given how everything else is defined and graphically represented,\n  //   it's the only logical conclusion.\n  //     Nesting would result in nodes being visually siblings\n  //      but logically non-exclusively selectable,\n  //        which would be a contradiction of the visuals\n  //        so violating the WCAG standard for other reasons\n  if (isGroup(parentNode)) {\n    if (!parentNode.parent) {\n      throw TREE_STRUCTURE_ERRORS.GROUP_WITHOUT_PARENT;\n    }\n    parseableParentNode = parentNode.parent;\n  }\n\n  parseableParentNode.children.forEach((node) => {\n    if (isFocusableNode(node)) {\n      focusableSiblingsNodes.push(node);\n    }\n    // if we encounter a group node we need to add it's children too\n    // (which here is guaranteed because we checked it in the if statement above)\n    if (isGroup(node)) {\n      node.children.forEach((groupChild) => {\n        if (isFocusableNode(groupChild)) {\n          focusableSiblingsNodes.push(groupChild);\n        }\n      });\n    }\n  });\n\n  return focusableSiblingsNodes;\n};\n\n/**\n * This functions walks the tree downwards starting from the oldest shared parent and returns all the single-selectable items ids\n * @param oldestParent - the oldest parent to start the walk from\n * @returns string | number[] - the list of all the single-selectable items ids starting from the oldest shared group\n */\nexport const getAllSingleSelectIdsFromParent = (oldestParent: DSMenuButtonT.MenuNodesAllowedToHaveChildren) => {\n  const singleSelectionableItemsIds: (string | number)[] = [];\n  oldestParent.walk((node) => {\n    // DSTree typescript doesn't understand ethereogeneous subitems, so we need to typecast manually\n    const typeCastedNode = node as unknown as\n      | DSMenuButtonT.SingleSelectionableMenuNodes\n      | DSMenuButtonT.MenuNodeSeparatorItem;\n    // is the node is a single-selectable item, we add it to the list\n    if (isSingleSelectNode(typeCastedNode)) {\n      singleSelectionableItemsIds.push(node.dsId);\n    }\n    // we walk all the tree (from the shared group), we never shortcircuit\n    return true;\n  });\n  return singleSelectionableItemsIds;\n};\n\n/**\n * walk all parents from a given node and gives back multiple supporting datastructures by different criterias\n *\n * @param menuNode\n * @returns {object} - an object holding different datastructures and information about the parents\n * @property {Object} oldestGroup - the oldest shared group\n * @property {Object[]} selectionableParentsWithSubmenu - the single/multiple selection parents with submenu\n * @property {Object[]} groupParents - all the 'groups' encountered while traversing the tree upwards\n */\nexport const getParentsByCriterias = (menuNode: DSMenuButtonT.MenuNode) => {\n  // group\n  let oldestGroupFoundSoFar: DSMenuButtonT.MenuNodeGroupItem;\n  const selectionableParentsWithSubmenu: DSMenuButtonT.SelectionablesWithSubmenuMenuNodes[] = [];\n  const groupParents: DSMenuButtonT.MenuNodeGroupItem[] = [];\n\n  menuNode.walkParents((node) => {\n    // discards itself, we want the parents only\n    if (node.dsId === menuNode.dsId) return true;\n    // DSTree is not able to understand ethereogeneous subitems, so we need to typecast manually\n    const typeCastedNode = node as unknown as DSMenuButtonT.MenuNode;\n\n    if (isGroup(typeCastedNode)) {\n      oldestGroupFoundSoFar = typeCastedNode;\n      groupParents.push(oldestGroupFoundSoFar);\n      // nothing else to do in this walking step, returing true to continue the walk\n      return true;\n    }\n    // we continue checking shared parents untill we see the pattern\n    //  group -> single-select-with-submenu -> group -> ...\n    // the moment the parent of a group is not a single-select-with-submenu we can stop,\n    //  we have found the oldest shared group\n    if (isSelectionableWithSubmenuNode(typeCastedNode)) {\n      selectionableParentsWithSubmenu.push(typeCastedNode);\n      return true;\n    }\n    // the node is not a single-select-with-submenu, we can stop the walk\n    return true;\n  });\n  // if we found no group parent starting from menuNode, the tree is malformed\n  // @ts-expect-error - typescript doesn't understand that \"walkParents\" actually executes the function synchronously\n  //  so it thinks that oldestGroupFoundSoFar was never assigned, it's a false positive\n  if (!oldestGroupFoundSoFar) {\n    console.log('node:', menuNode);\n    console.log('parent:', menuNode.parent);\n    throw TREE_STRUCTURE_ERRORS.PARENT_NOT_GROUP;\n  }\n  return {\n    oldestGroup: oldestGroupFoundSoFar,\n    selectionableParentsWithSubmenu,\n    groupParents,\n  };\n};\n\n/**\n * walk all childrens from a given node and gives back multiple supporting datastructures by different criterias\n *\n * @param menuNode\n * @returns {object} - an object holding different datastructures and information about the children\n * @property {Object[]} selectionableChilrens - the single/multiple selection children (regardless of the presence of a submenu)\n * @property {Object[]} multiSelectionableChilrens - the multiple selection children (regardless of the presence of a submenu)\n */\nexport const getChildrenByCriterias = (menuNode: DSMenuButtonT.MenuNode) => {\n  const selectionableChilrens: DSMenuButtonT.SelectionableMenuNodes[] = [];\n  const multiSelectionableChilrens: DSMenuButtonT.MultipleSelectionableMenuNodes[] = [];\n  menuNode.walk((node) => {\n    // discards itself, we want the children only\n    if (node.dsId === menuNode.dsId) return true;\n    // DSTree is not able to understand ethereogeneous subitems, so we need to typecast manually\n    const typeCastedNode = node as unknown as DSMenuButtonT.MenuNode;\n    if (isSelectionableNode(typeCastedNode)) {\n      selectionableChilrens.push(typeCastedNode);\n      if (isMultipleSelectNode(typeCastedNode)) {\n        multiSelectionableChilrens.push(typeCastedNode);\n      }\n    }\n    // we walk all the tree (from the shared group), we never shortcircuit\n    return true;\n  });\n  return {\n    selectionableChilrens,\n    multiSelectionableChilrens,\n  };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-console */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type { DSMenuButtonT } from '../../../react-desc-prop-types.js';\nimport {\n  isFocusableNode,\n  isGroup,\n  isMenuNodeAllowedToHaveChildren,\n  isMultipleSelectNode,\n  isSelectionableNode,\n  isSelectionableWithSubmenuNode,\n  isSingleSelectNode,\n  isWithSubmenuNode,\n} from '../../../utils/nodesTypeguardsAndGetters.js';\nimport { TREE_STRUCTURE_ERRORS, UNEXPECTED_INTERNAL_ERRORS } from '../constants/Errors.js';\n\nexport const getSubMenusPath = (itemNode: DSMenuButtonT.MenuNode) => {\n  const subMenuNodesPath: DSMenuButtonT.WithSubmenuMenuNodes[] = [];\n  itemNode.walkParents((node) => {\n    // discards itself, we want the parents only\n    if (node.dsId === itemNode.dsId) return true;\n    if (isWithSubmenuNode(node)) {\n      subMenuNodesPath.push(node);\n    }\n    return true;\n  });\n  return subMenuNodesPath.reverse();\n};\n\nexport const getFocusableSiblingsList = (itemNode: DSMenuButtonT.MenuNode) => {\n  const { parent: parentNode } = itemNode;\n  if (!parentNode) {\n    console.log('getFocusableSiblingsList > itemNode', itemNode);\n    throw UNEXPECTED_INTERNAL_ERRORS.NODE_WITHOUT_PARENT;\n  }\n  if (!isMenuNodeAllowedToHaveChildren(parentNode)) {\n    // this should be impossible to reach, if this is reached, there is a bug in the code/validation checks\n    console.log('parentNode', parentNode);\n    console.log('itemNode', itemNode);\n    throw TREE_STRUCTURE_ERRORS.NODE_CANNOT_HAVE_CHILDREN;\n  }\n  // each tree depth may be composed of a mix of focusable and non-focusable nodes\n  //  in particular, the parent node may be a group node which is not focusable but it's children are (and are visually siblings)\n  // we need to do our calculations only on top of focusable nodes, and we also need to consider the scenario of a group node\n  const focusableSiblingsNodes: DSMenuButtonT.PseudoFocusableMenuNodes[] = [];\n\n  let parseableParentNode = parentNode;\n  // nesting a group node inside another group node is not allowed\n  //  I could not find a supporting explicit statement in the WCAG standard,\n  //   but given how everything else is defined and graphically represented,\n  //   it's the only logical conclusion.\n  //     Nesting would result in nodes being visually siblings\n  //      but logically non-exclusively selectable,\n  //        which would be a contradiction of the visuals\n  //        so violating the WCAG standard for other reasons\n  if (isGroup(parentNode)) {\n    if (!parentNode.parent) {\n      throw TREE_STRUCTURE_ERRORS.GROUP_WITHOUT_PARENT;\n    }\n    parseableParentNode = parentNode.parent;\n  }\n\n  parseableParentNode.children.forEach((node) => {\n    if (isFocusableNode(node)) {\n      focusableSiblingsNodes.push(node);\n    }\n    // if we encounter a group node we need to add it's children too\n    // (which here is guaranteed because we checked it in the if statement above)\n    if (isGroup(node)) {\n      node.children.forEach((groupChild) => {\n        if (isFocusableNode(groupChild)) {\n          focusableSiblingsNodes.push(groupChild);\n        }\n      });\n    }\n  });\n\n  return focusableSiblingsNodes;\n};\n\n/**\n * This functions walks the tree downwards starting from the oldest shared parent and returns all the single-selectable items ids\n * @param oldestParent - the oldest parent to start the walk from\n * @returns string | number[] - the list of all the single-selectable items ids starting from the oldest shared group\n */\nexport const getAllSingleSelectIdsFromParent = (oldestParent: DSMenuButtonT.MenuNodesAllowedToHaveChildren) => {\n  const singleSelectionableItemsIds: (string | number)[] = [];\n  oldestParent.walk((node) => {\n    // DSTree typescript doesn't understand ethereogeneous subitems, so we need to typecast manually\n    const typeCastedNode = node as unknown as\n      DSMenuButtonT.SingleSelectionableMenuNodes | DSMenuButtonT.MenuNodeSeparatorItem;\n    // is the node is a single-selectable item, we add it to the list\n    if (isSingleSelectNode(typeCastedNode)) {\n      singleSelectionableItemsIds.push(node.dsId);\n    }\n    // we walk all the tree (from the shared group), we never shortcircuit\n    return true;\n  });\n  return singleSelectionableItemsIds;\n};\n\n/**\n * walk all parents from a given node and gives back multiple supporting datastructures by different criterias\n *\n * @param menuNode\n * @returns {object} - an object holding different datastructures and information about the parents\n * @property {Object} oldestGroup - the oldest shared group\n * @property {Object[]} selectionableParentsWithSubmenu - the single/multiple selection parents with submenu\n * @property {Object[]} groupParents - all the 'groups' encountered while traversing the tree upwards\n */\nexport const getParentsByCriterias = (menuNode: DSMenuButtonT.MenuNode) => {\n  // group\n  let oldestGroupFoundSoFar: DSMenuButtonT.MenuNodeGroupItem;\n  const selectionableParentsWithSubmenu: DSMenuButtonT.SelectionablesWithSubmenuMenuNodes[] = [];\n  const groupParents: DSMenuButtonT.MenuNodeGroupItem[] = [];\n\n  menuNode.walkParents((node) => {\n    // discards itself, we want the parents only\n    if (node.dsId === menuNode.dsId) return true;\n    // DSTree is not able to understand ethereogeneous subitems, so we need to typecast manually\n    const typeCastedNode = node as unknown as DSMenuButtonT.MenuNode;\n\n    if (isGroup(typeCastedNode)) {\n      oldestGroupFoundSoFar = typeCastedNode;\n      groupParents.push(oldestGroupFoundSoFar);\n      // nothing else to do in this walking step, returing true to continue the walk\n      return true;\n    }\n    // we continue checking shared parents untill we see the pattern\n    //  group -> single-select-with-submenu -> group -> ...\n    // the moment the parent of a group is not a single-select-with-submenu we can stop,\n    //  we have found the oldest shared group\n    if (isSelectionableWithSubmenuNode(typeCastedNode)) {\n      selectionableParentsWithSubmenu.push(typeCastedNode);\n      return true;\n    }\n    // the node is not a single-select-with-submenu, we can stop the walk\n    return true;\n  });\n  // if we found no group parent starting from menuNode, the tree is malformed\n  // @ts-expect-error - typescript doesn't understand that \"walkParents\" actually executes the function synchronously\n  //  so it thinks that oldestGroupFoundSoFar was never assigned, it's a false positive\n  if (!oldestGroupFoundSoFar) {\n    console.log('node:', menuNode);\n    console.log('parent:', menuNode.parent);\n    throw TREE_STRUCTURE_ERRORS.PARENT_NOT_GROUP;\n  }\n  return {\n    oldestGroup: oldestGroupFoundSoFar,\n    selectionableParentsWithSubmenu,\n    groupParents,\n  };\n};\n\n/**\n * walk all childrens from a given node and gives back multiple supporting datastructures by different criterias\n *\n * @param menuNode\n * @returns {object} - an object holding different datastructures and information about the children\n * @property {Object[]} selectionableChilrens - the single/multiple selection children (regardless of the presence of a submenu)\n * @property {Object[]} multiSelectionableChilrens - the multiple selection children (regardless of the presence of a submenu)\n */\nexport const getChildrenByCriterias = (menuNode: DSMenuButtonT.MenuNode) => {\n  const selectionableChilrens: DSMenuButtonT.SelectionableMenuNodes[] = [];\n  const multiSelectionableChilrens: DSMenuButtonT.MultipleSelectionableMenuNodes[] = [];\n  menuNode.walk((node) => {\n    // discards itself, we want the children only\n    if (node.dsId === menuNode.dsId) return true;\n    // DSTree is not able to understand ethereogeneous subitems, so we need to typecast manually\n    const typeCastedNode = node as unknown as DSMenuButtonT.MenuNode;\n    if (isSelectionableNode(typeCastedNode)) {\n      selectionableChilrens.push(typeCastedNode);\n      if (isMultipleSelectNode(typeCastedNode)) {\n        multiSelectionableChilrens.push(typeCastedNode);\n      }\n    }\n    // we walk all the tree (from the shared group), we never shortcircuit\n    return true;\n  });\n  return {\n    selectionableChilrens,\n    multiSelectionableChilrens,\n  };\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -11,9 +11,7 @@ import { MenuBehaviouralContextProviderContext } from "../DSMenuBehaviouralConte
 import { MENU_FOCUS_REGIONS } from "../DSMenuBehaviouralContextProvider/constants/index.js";
 import { focusNodeRacingConditionSolved } from "./focusNodeRacingConditionSolved.js";
 import { MenuButtonContextProvider } from "../../MenuButtonContextProviderCTX.js";
-const ActivableMenuItem = ({
-  itemNode
-}) => {
+const ActivableMenuItem = ({ itemNode, ariaPosInSet, ariaSetSize }) => {
   const { dsId, plainItem } = itemNode;
   const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
   const {
@@ -72,6 +70,8 @@ const ActivableMenuItem = ({
       role: "menuitem",
       tabIndex: isFocused ? 0 : -1,
       "aria-disabled": disabled,
+      "aria-posinset": ariaPosInSet,
+      "aria-setsize": ariaSetSize,
       applyAriaDisabled: disabled,
       getOwnerProps,
       getOwnerPropsArguments,
@@ -87,7 +87,16 @@ const ActivableMenuItem = ({
           getOwnerPropsArguments,
           children: [
             LeftDecComponent ? /* @__PURE__ */ jsx(LeftDecComponent, {}) : null,
-            /* @__PURE__ */ jsx(StyleMenuItemLabel, { getOwnerProps, getOwnerPropsArguments, children: label }),
+            /* @__PURE__ */ jsx(
+              StyleMenuItemLabel,
+              {
+                getOwnerProps,
+                getOwnerPropsArguments,
+                variant: "b2",
+                component: "span",
+                children: label
+              }
+            ),
             secondaryLabel !== void 0 && /* @__PURE__ */ jsx(
               StyleMenuItemSecondaryLabel,
               {

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

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

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

@@ -20,7 +20,7 @@ const placementOrderPreference = [
   "left-end",
   "left"
 ];
-const ActivableWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
+const ActivableWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject, ariaPosInSet, ariaSetSize }) => {
   const { dsId, plainItem } = itemNode;
   const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
   const {
@@ -105,6 +105,8 @@ const ActivableWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject })
         "aria-haspopup": "menu",
         "aria-expanded": isExpanded,
         "aria-disabled": disabled,
+        "aria-posinset": ariaPosInSet,
+        "aria-setsize": ariaSetSize,
         applyAriaDisabled: disabled,
         getOwnerProps,
         getOwnerPropsArguments,
@@ -120,7 +122,16 @@ const ActivableWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject })
             getOwnerPropsArguments,
             children: [
               LeftDecComponent ? /* @__PURE__ */ jsx(LeftDecComponent, {}) : null,
-              /* @__PURE__ */ jsx(StyleMenuItemLabel, { getOwnerProps, getOwnerPropsArguments, children: label }),
+              /* @__PURE__ */ jsx(
+                StyleMenuItemLabel,
+                {
+                  getOwnerProps,
+                  getOwnerPropsArguments,
+                  variant: "b2",
+                  component: "span",
+                  children: label
+                }
+              ),
               secondaryLabel !== void 0 && /* @__PURE__ */ jsx(
                 StyleMenuItemSecondaryLabel,
                 {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\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 ActivableWithSubmenuMenuItem: React.ComponentType<{\n  itemNode: DSMenuButtonT.MenuNodeActivableWithSubmenuItem;\n  FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n  const { dsId, plainItem } = itemNode;\n  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n  const {\n    ownerProps: { getOwnerProps },\n  } = React.useContext(MenuButtonContextProvider);\n\n  const {\n    focusRegion,\n    openedSubItems,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'auto'] : ['auto'];\n    if (secondaryLabel) cols.push('auto');\n    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\n  const floatingContext = useFloatingContext({\n    placement: placementOrderPreference[0],\n    placementOrderPreference,\n    animationDuration: 100,\n    customOffset: [0, 0],\n    externallyControlledIsOpen: isExpanded,\n  });\n  const {\n    refs: { setReference },\n  } = floatingContext;\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      setReference(node);\n      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n        focusNodeRacingConditionSolved(node);\n      }\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion, setReference],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n\n  const getOwnerPropsArguments = React.useCallback(() => plainItem, [plainItem]);\n\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    handleFocusableMenuItemOnMouseEnter(itemNode);\n  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n  const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n    },\n    [handleFocusableMenuItemNativeFocusEvent, itemNode],\n  );\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n  return (\n    <>\n      <StyledGlobalMenuItemWrapper\n        innerRef={handleFocusOnRender}\n        onKeyDown={handleFocusableMenuItemKeyDown}\n        onClick={handleFocusableMenuItemClick}\n        onMouseEnter={handleOnMouseEnter}\n        onFocus={handleOnFocus}\n        as=\"div\"\n        id={`${spacelessDsIdForDom}`}\n        tabIndex={isFocused ? 0 : -1}\n        role=\"menuitem\"\n        aria-controls={\n          /* ********************************************************************************************************************\n           * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n           *    The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n           * ********************************************************************************************************************\n           * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n           *  so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n           * ******************************************************************************************************************** */\n          isExpanded\n            ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n            : undefined\n        }\n        aria-haspopup=\"menu\"\n        aria-expanded={isExpanded}\n        aria-disabled={disabled}\n        applyAriaDisabled={disabled}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledContentWrapper\n          cols={gridLayout}\n          minHeight=\"16px\"\n          gutter=\"xxs\"\n          alignItems=\"center\"\n          minWidth={minWidth ?? undefined}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {LeftDecComponent ? <LeftDecComponent /> : null}\n          <StyleMenuItemLabel getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            {label}\n          </StyleMenuItemLabel>\n          {secondaryLabel !== undefined && (\n            <StyleMenuItemSecondaryLabel\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n              disabled={disabled}\n            >\n              {secondaryLabel}\n            </StyleMenuItemSecondaryLabel>\n          )}\n        </StyledContentWrapper>\n      </StyledGlobalMenuItemWrapper>\n      <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 {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\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 ActivableWithSubmenuMenuItem: React.ComponentType<{\n  itemNode: DSMenuButtonT.MenuNodeActivableWithSubmenuItem;\n  FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n  ariaPosInSet?: number;\n  ariaSetSize?: number;\n}> = ({ itemNode, FlyoutMenuCircularDepInject, ariaPosInSet, ariaSetSize }) => {\n  const { dsId, plainItem } = itemNode;\n  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n  const {\n    ownerProps: { getOwnerProps },\n  } = React.useContext(MenuButtonContextProvider);\n\n  const {\n    focusRegion,\n    openedSubItems,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'auto'] : ['auto'];\n    if (secondaryLabel) cols.push('auto');\n    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\n  const floatingContext = useFloatingContext({\n    placement: placementOrderPreference[0],\n    placementOrderPreference,\n    animationDuration: 100,\n    customOffset: [0, 0],\n    externallyControlledIsOpen: isExpanded,\n  });\n  const {\n    refs: { setReference },\n  } = floatingContext;\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      setReference(node);\n      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n        focusNodeRacingConditionSolved(node);\n      }\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion, setReference],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n\n  const getOwnerPropsArguments = React.useCallback(() => plainItem, [plainItem]);\n\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    handleFocusableMenuItemOnMouseEnter(itemNode);\n  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n  const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n    },\n    [handleFocusableMenuItemNativeFocusEvent, itemNode],\n  );\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n  return (\n    <>\n      <StyledGlobalMenuItemWrapper\n        innerRef={handleFocusOnRender}\n        onKeyDown={handleFocusableMenuItemKeyDown}\n        onClick={handleFocusableMenuItemClick}\n        onMouseEnter={handleOnMouseEnter}\n        onFocus={handleOnFocus}\n        as=\"div\"\n        id={`${spacelessDsIdForDom}`}\n        tabIndex={isFocused ? 0 : -1}\n        role=\"menuitem\"\n        aria-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        aria-posinset={ariaPosInSet}\n        aria-setsize={ariaSetSize}\n        applyAriaDisabled={disabled}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledContentWrapper\n          cols={gridLayout}\n          minHeight=\"16px\"\n          gutter=\"xxs\"\n          alignItems=\"center\"\n          minWidth={minWidth ?? undefined}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {LeftDecComponent ? <LeftDecComponent /> : null}\n          <StyleMenuItemLabel\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            variant=\"b2\"\n            component=\"span\"\n          >\n            {label}\n          </StyleMenuItemLabel>\n          {secondaryLabel !== undefined && (\n            <StyleMenuItemSecondaryLabel\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n              disabled={disabled}\n            >\n              {secondaryLabel}\n            </StyleMenuItemSecondaryLabel>\n          )}\n        </StyledContentWrapper>\n      </StyledGlobalMenuItemWrapper>\n      <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/DSMenuItemRendererFactory.js

@@ -4,7 +4,9 @@ import { Grid } from "@elliemae/ds-grid";
 import { StyledGroupLabel, StyledSeparator, StyledSeparatorWrapper } from "@elliemae/ds-menu-items-commons";
 import { describe } from "@elliemae/ds-props-helpers";
 import { styled } from "@elliemae/ds-system";
+import React2 from "react";
 import {
+  getAriaSetSizeAndPosInSetBySiblingList,
   isActivableNode,
   isActivableWithSubmenuNode,
   isGroup,
@@ -31,6 +33,8 @@ const StyledGroupLabelWrapper = styled(Grid, {
   name: DSMenuItemRendererFactoryName,
   slot: MENU_ITEM_RENDERER_FACTORY_SLOTS.GROUP_LABEL_WRAPPER
 })`
+  min-height: 32px;
+  align-items: center;
   padding: ${({ theme }) => theme.space.xxxs} ${({ theme }) => theme.space.xs};
 `;
 const StyledLabelWithLeftDecWrapper = styled(Grid, {
@@ -41,44 +45,89 @@ const StyledLabelWithLeftDecWrapper = styled(Grid, {
 `;
 const DSMenuItemRendererFactory = (props) => {
   const { propsWithDefault, instanceUid } = useMenuItemRendererFactory(props);
-  const { itemNode, ItemRenderer, FlyoutMenuCircularDepInject } = propsWithDefault;
+  const {
+    itemNode,
+    ItemRenderer,
+    FlyoutMenuCircularDepInject,
+    "aria-posinset": ariaPosInSet,
+    "aria-setsize": ariaSetSize
+  } = propsWithDefault;
+  const groupAriaPositionsByDsId = React2.useMemo(
+    () => getAriaSetSizeAndPosInSetBySiblingList(itemNode.children),
+    [itemNode.children]
+  );
   if (ItemRenderer) return /* @__PURE__ */ jsx(ItemRenderer, { itemNode });
   if (isSeparatorNode(itemNode))
     return /* @__PURE__ */ jsx(StyledSeparatorWrapper, { as: "div", role: "presentation", children: /* @__PURE__ */ jsx(StyledSeparator, {}) });
-  if (isSkeletonNode(itemNode)) return /* @__PURE__ */ jsx(SkeletonMenuItem, { itemNode });
-  if (isActivableNode(itemNode)) return /* @__PURE__ */ jsx(ActivableMenuItem, { itemNode });
-  if (isMultipleSelectOnlyNode(itemNode)) return /* @__PURE__ */ jsx(MultipleSelectMenuItem, { itemNode });
-  if (isSingleSelectOnlyNode(itemNode)) return /* @__PURE__ */ jsx(SingleSelectMenuItem, { itemNode });
+  if (isSkeletonNode(itemNode))
+    return /* @__PURE__ */ jsx(SkeletonMenuItem, { itemNode, ariaPosInSet, ariaSetSize });
+  if (isActivableNode(itemNode))
+    return /* @__PURE__ */ jsx(ActivableMenuItem, { itemNode, ariaPosInSet, ariaSetSize });
+  if (isMultipleSelectOnlyNode(itemNode))
+    return /* @__PURE__ */ jsx(MultipleSelectMenuItem, { itemNode, ariaPosInSet, ariaSetSize });
+  if (isSingleSelectOnlyNode(itemNode))
+    return /* @__PURE__ */ jsx(SingleSelectMenuItem, { itemNode, ariaPosInSet, ariaSetSize });
   if (isWithSubmenuOnlyNode(itemNode))
-    return /* @__PURE__ */ jsx(WithSubmenuMenuItem, { itemNode, FlyoutMenuCircularDepInject });
+    return /* @__PURE__ */ jsx(
+      WithSubmenuMenuItem,
+      {
+        itemNode,
+        FlyoutMenuCircularDepInject,
+        ariaPosInSet,
+        ariaSetSize
+      }
+    );
   if (isSingleSelectNodeWithSubmenu(itemNode))
-    return /* @__PURE__ */ jsx(SingleSelectWithSubmenuMenuItem, { itemNode, FlyoutMenuCircularDepInject });
+    return /* @__PURE__ */ jsx(
+      SingleSelectWithSubmenuMenuItem,
+      {
+        itemNode,
+        FlyoutMenuCircularDepInject,
+        ariaPosInSet,
+        ariaSetSize
+      }
+    );
   if (isMultipleSelectWithSubmenuNode(itemNode))
     return /* @__PURE__ */ jsx(
       MultipleSelectWithSubmenuMenuItem,
       {
         itemNode,
-        FlyoutMenuCircularDepInject
+        FlyoutMenuCircularDepInject,
+        ariaPosInSet,
+        ariaSetSize
       }
     );
   if (isActivableWithSubmenuNode(itemNode))
-    return /* @__PURE__ */ jsx(ActivableWithSubmenuMenuItem, { itemNode, FlyoutMenuCircularDepInject });
+    return /* @__PURE__ */ jsx(
+      ActivableWithSubmenuMenuItem,
+      {
+        itemNode,
+        FlyoutMenuCircularDepInject,
+        ariaPosInSet,
+        ariaSetSize
+      }
+    );
   if (isGroup(itemNode)) {
     const { leftDecoration: LeftDecComponent, label, minWidth } = itemNode.plainItem;
     const spacelessIdForGroup = label ? `label-${label.replace(/\s/g, "")}` : void 0;
     return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": spacelessIdForGroup, style: minWidth ? { minWidth } : {}, children: [
       label ? /* @__PURE__ */ jsxs(StyledGroupLabelWrapper, { cols: LeftDecComponent ? ["min-content", "1fr"] : ["1fr"], children: [
         LeftDecComponent ? /* @__PURE__ */ jsx(LeftDecComponent, {}) : null,
-        /* @__PURE__ */ jsx(StyledGroupLabel, { role: "presentation", id: spacelessIdForGroup, children: LeftDecComponent ? /* @__PURE__ */ jsx(StyledLabelWithLeftDecWrapper, { children: label }) : label })
+        /* @__PURE__ */ jsx(StyledGroupLabel, { variant: "b3-strong", component: "span", role: "presentation", id: spacelessIdForGroup, children: LeftDecComponent ? /* @__PURE__ */ jsx(StyledLabelWithLeftDecWrapper, { children: label }) : label })
       ] }) : null,
-      itemNode.children.map((subItemNode) => /* @__PURE__ */ jsx(
-        DSMenuItemRendererFactory,
-        {
-          itemNode: subItemNode,
-          FlyoutMenuCircularDepInject
-        },
-        `item-factory-${subItemNode.dsId}-${instanceUid}`
-      ))
+      itemNode.children.map((subItemNode) => {
+        const ariaPosition = groupAriaPositionsByDsId.get(subItemNode.dsId);
+        return /* @__PURE__ */ jsx(
+          DSMenuItemRendererFactory,
+          {
+            itemNode: subItemNode,
+            FlyoutMenuCircularDepInject,
+            "aria-posinset": ariaPosition?.ariaPosInSet,
+            "aria-setsize": ariaPosition?.ariaSetSize
+          },
+          `item-factory-${subItemNode.dsId}-${instanceUid}`
+        );
+      })
     ] });
   }
   throw new Error(`Invalid item type: ${JSON.stringify(itemNode)}`);