@elliemae/ds-menu-button 3.70.0-next.60 → 3.70.0-next.62

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSMenuItemRendererFactory/SingleSelectMenuItem.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nimport { DSMenuItemRendererFactoryName, MENU_ITEM_RENDERER_FACTORY_SLOTS } from './constants/index.js';\nconst StyledRadioDotIndicator = styled('div', {\n  name: DSMenuItemRendererFactoryName,\n  slot: MENU_ITEM_RENDERER_FACTORY_SLOTS.RADIO_DOT_INDICATOR,\n})`\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background-color: #005ea2;\n`;\n\nconst LeftBoxlessRadio = React.memo(({ isSelected }: { isSelected: boolean }) => (\n  <Grid width=\"16px\">{isSelected ? <StyledRadioDotIndicator /> : <div />}</Grid>\n));\nexport const SingleSelectMenuItem: React.ComponentType<{ itemNode: DSMenuButtonT.MenuNodeSingleSelectItem }> = ({\n  itemNode,\n}) => {\n  const { dsId, plainItem } = itemNode;\n  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n  const {\n    focusRegion,\n    propsWithDefault,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedNodes } = propsWithDefault;\n\n  const {\n    ownerProps: { getOwnerProps },\n  } = React.useContext(MenuButtonContextProvider);\n\n  const getOwnerPropsArguments = React.useCallback(() => plainItem, [plainItem]);\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'min-content', 'auto'] : ['min-content', 'auto'];\n    if (secondaryLabel) cols.push('auto');\n    return cols;\n  }, [LeftDecComponent, secondaryLabel]);\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n  // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n  // useAdvancedValidation guarantees the non-null in this component\n  const isSelected = selectedNodes!.some((itemMarkesAsSelected) => itemMarkesAsSelected.dsId === dsId);\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n        focusNodeRacingConditionSolved(node);\n      }\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    handleFocusableMenuItemOnMouseEnter(itemNode);\n  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n  const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n    },\n    [handleFocusableMenuItemNativeFocusEvent, itemNode],\n  );\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n  return (\n    <StyledGlobalMenuItemWrapper\n      innerRef={handleFocusOnRender}\n      onKeyDown={handleFocusableMenuItemKeyDown}\n      onClick={handleFocusableMenuItemClick}\n      onMouseEnter={handleOnMouseEnter}\n      onFocus={handleOnFocus}\n      as=\"div\"\n      id={`${spacelessDsIdForDom}`}\n      tabIndex={isFocused ? 0 : -1}\n      role=\"menuitemradio\"\n      aria-checked={isSelected}\n      aria-disabled={disabled}\n      applyAriaDisabled={disabled}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledContentWrapper\n        cols={gridLayout}\n        minHeight=\"16px\"\n        gutter=\"xxs\"\n        alignItems=\"center\"\n        minWidth={minWidth ?? undefined}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <LeftBoxlessRadio isSelected={isSelected} />\n        {LeftDecComponent ? <LeftDecComponent /> : null}\n        <StyleMenuItemLabel\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nimport { DSMenuItemRendererFactoryName, MENU_ITEM_RENDERER_FACTORY_SLOTS } from './constants/index.js';\nconst StyledRadioDotIndicator = styled('div', {\n  name: DSMenuItemRendererFactoryName,\n  slot: MENU_ITEM_RENDERER_FACTORY_SLOTS.RADIO_DOT_INDICATOR,\n})`\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background-color: #005ea2;\n`;\n\nconst LeftBoxlessRadio = React.memo(({ isSelected }: { isSelected: boolean }) => (\n  <Grid width=\"16px\">{isSelected ? <StyledRadioDotIndicator /> : <div />}</Grid>\n));\nexport const SingleSelectMenuItem: React.ComponentType<{\n  itemNode: DSMenuButtonT.MenuNodeSingleSelectItem;\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    focusRegion,\n    propsWithDefault,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedNodes } = propsWithDefault;\n\n  const {\n    ownerProps: { getOwnerProps },\n  } = React.useContext(MenuButtonContextProvider);\n\n  const getOwnerPropsArguments = React.useCallback(() => plainItem, [plainItem]);\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'min-content', 'auto'] : ['min-content', 'auto'];\n    if (secondaryLabel) cols.push('auto');\n    return cols;\n  }, [LeftDecComponent, secondaryLabel]);\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n  // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n  // useAdvancedValidation guarantees the non-null in this component\n  const isSelected = selectedNodes!.some((itemMarkesAsSelected) => itemMarkesAsSelected.dsId === dsId);\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n        focusNodeRacingConditionSolved(node);\n      }\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    handleFocusableMenuItemOnMouseEnter(itemNode);\n  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n  const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n    },\n    [handleFocusableMenuItemNativeFocusEvent, itemNode],\n  );\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n  return (\n    <StyledGlobalMenuItemWrapper\n      innerRef={handleFocusOnRender}\n      onKeyDown={handleFocusableMenuItemKeyDown}\n      onClick={handleFocusableMenuItemClick}\n      onMouseEnter={handleOnMouseEnter}\n      onFocus={handleOnFocus}\n      as=\"div\"\n      id={`${spacelessDsIdForDom}`}\n      tabIndex={isFocused ? 0 : -1}\n      role=\"menuitemradio\"\n      aria-checked={isSelected}\n      aria-disabled={disabled}\n      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        <LeftBoxlessRadio isSelected={isSelected} />\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["import_constants", "React"]
 }

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

@@ -62,7 +62,7 @@ const StyledRadioDotIndicator = (0, import_ds_system.styled)("div", {
   background-color: #005ea2;
 `;
 const LeftBoxlessRadio = import_react.default.memo(({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { width: "16px", children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledRadioDotIndicator, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}) }));
-const SingleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
+const SingleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject, ariaPosInSet, ariaSetSize }) => {
   const { dsId, plainItem } = itemNode;
   const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
   const {
@@ -152,6 +152,8 @@ const SingleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject
         "aria-haspopup": "menu",
         "aria-expanded": isExpanded,
         "aria-disabled": disabled,
+        "aria-posinset": ariaPosInSet,
+        "aria-setsize": ariaSetSize,
         applyAriaDisabled: disabled,
         getOwnerProps,
         getOwnerPropsArguments,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSMenuItemRendererFactory/SingleSelectWithSubmenuMenuItem.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { ChevronSmallRight } from '@elliemae/ds-icons';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nimport { DSMenuItemRendererFactoryName, MENU_ITEM_RENDERER_FACTORY_SLOTS } from './constants/index.js';\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n  'right-start',\n  'right-start',\n  'right',\n  'left-start',\n  'left-end',\n  'left',\n];\nconst StyledRadioDotIndicator = styled('div', {\n  name: DSMenuItemRendererFactoryName,\n  slot: MENU_ITEM_RENDERER_FACTORY_SLOTS.RADIO_DOT_INDICATOR,\n})`\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background-color: #005ea2;\n`;\n\nconst LeftBoxlessRadio = React.memo(({ isSelected }: { isSelected: boolean }) => (\n  <Grid width=\"16px\">{isSelected ? <StyledRadioDotIndicator /> : <div />}</Grid>\n));\nexport const SingleSelectWithSubmenuMenuItem: React.ComponentType<{\n  itemNode: DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n  FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n  const { dsId, plainItem } = itemNode;\n  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n  const {\n    ownerProps: { getOwnerProps },\n  } = React.useContext(MenuButtonContextProvider);\n  const {\n    focusRegion,\n    propsWithDefault,\n    openedSubItems,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedNodes } = propsWithDefault;\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'min-content', 'auto'] : ['min-content', 'auto'];\n    if (secondaryLabel) cols.push('auto');\n    cols.push('min-content');\n    return cols;\n  }, [LeftDecComponent, secondaryLabel]);\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n  // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n  // useAdvancedValidation guarantees the non-null in this component\n  const isSelected = selectedNodes!.some((itemMarkesAsSelected) => itemMarkesAsSelected.dsId === dsId);\n\n  const floatingContext = useFloatingContext({\n    placement: placementOrderPreference[0],\n    placementOrderPreference,\n    animationDuration: 100,\n    customOffset: [0, 0],\n    externallyControlledIsOpen: isExpanded,\n  });\n  const {\n    refs: { setReference },\n  } = floatingContext;\n\n  const getOwnerPropsArguments = React.useCallback(() => plainItem, [plainItem]);\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      setReference(node);\n      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n        focusNodeRacingConditionSolved(node);\n      }\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion, setReference],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    handleFocusableMenuItemOnMouseEnter(itemNode);\n  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n  const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n    },\n    [handleFocusableMenuItemNativeFocusEvent, itemNode],\n  );\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n  return (\n    <>\n      <StyledGlobalMenuItemWrapper\n        innerRef={handleFocusOnRender}\n        onKeyDown={handleFocusableMenuItemKeyDown}\n        onClick={handleFocusableMenuItemClick}\n        onMouseEnter={handleOnMouseEnter}\n        onFocus={handleOnFocus}\n        as=\"div\"\n        id={`${spacelessDsIdForDom}`}\n        tabIndex={isFocused ? 0 : -1}\n        role=\"menuitemradio\"\n        aria-checked={isSelected}\n        aria-controls={\n          /* ********************************************************************************************************************\n           * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n           *    The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n           * ********************************************************************************************************************\n           * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n           *  so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n           * ******************************************************************************************************************** */\n          isExpanded\n            ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n            : undefined\n        }\n        aria-haspopup=\"menu\"\n        aria-expanded={isExpanded}\n        aria-disabled={disabled}\n        applyAriaDisabled={disabled}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledContentWrapper\n          cols={gridLayout}\n          minHeight=\"16px\"\n          gutter=\"xxs\"\n          alignItems=\"center\"\n          minWidth={minWidth ?? undefined}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <LeftBoxlessRadio isSelected={isSelected} />\n          {LeftDecComponent ? <LeftDecComponent /> : null}\n          <StyleMenuItemLabel\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          <ChevronSmallRight />\n        </StyledContentWrapper>\n      </StyledGlobalMenuItemWrapper>\n      <FlyoutMenuCircularDepInject\n        isMenuOpen={isExpanded}\n        floatingContext={floatingContext.context}\n        floatingStyles={floatingContext.floatingStyles}\n        setFloatingRef={floatingContext.refs.setFloating}\n        itemNode={itemNode}\n      />\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { ChevronSmallRight } from '@elliemae/ds-icons';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nimport { DSMenuItemRendererFactoryName, MENU_ITEM_RENDERER_FACTORY_SLOTS } from './constants/index.js';\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n  'right-start',\n  'right-start',\n  'right',\n  'left-start',\n  'left-end',\n  'left',\n];\nconst StyledRadioDotIndicator = styled('div', {\n  name: DSMenuItemRendererFactoryName,\n  slot: MENU_ITEM_RENDERER_FACTORY_SLOTS.RADIO_DOT_INDICATOR,\n})`\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background-color: #005ea2;\n`;\n\nconst LeftBoxlessRadio = React.memo(({ isSelected }: { isSelected: boolean }) => (\n  <Grid width=\"16px\">{isSelected ? <StyledRadioDotIndicator /> : <div />}</Grid>\n));\nexport const SingleSelectWithSubmenuMenuItem: React.ComponentType<{\n  itemNode: DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem;\n  FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n  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  const {\n    focusRegion,\n    propsWithDefault,\n    openedSubItems,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedNodes } = propsWithDefault;\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'min-content', 'auto'] : ['min-content', 'auto'];\n    if (secondaryLabel) cols.push('auto');\n    cols.push('min-content');\n    return cols;\n  }, [LeftDecComponent, secondaryLabel]);\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n  // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator\n  // useAdvancedValidation guarantees the non-null in this component\n  const isSelected = selectedNodes!.some((itemMarkesAsSelected) => itemMarkesAsSelected.dsId === dsId);\n\n  const floatingContext = useFloatingContext({\n    placement: placementOrderPreference[0],\n    placementOrderPreference,\n    animationDuration: 100,\n    customOffset: [0, 0],\n    externallyControlledIsOpen: isExpanded,\n  });\n  const {\n    refs: { setReference },\n  } = floatingContext;\n\n  const getOwnerPropsArguments = React.useCallback(() => plainItem, [plainItem]);\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      setReference(node);\n      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n        focusNodeRacingConditionSolved(node);\n      }\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion, setReference],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    handleFocusableMenuItemOnMouseEnter(itemNode);\n  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n  const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n    },\n    [handleFocusableMenuItemNativeFocusEvent, itemNode],\n  );\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n  return (\n    <>\n      <StyledGlobalMenuItemWrapper\n        innerRef={handleFocusOnRender}\n        onKeyDown={handleFocusableMenuItemKeyDown}\n        onClick={handleFocusableMenuItemClick}\n        onMouseEnter={handleOnMouseEnter}\n        onFocus={handleOnFocus}\n        as=\"div\"\n        id={`${spacelessDsIdForDom}`}\n        tabIndex={isFocused ? 0 : -1}\n        role=\"menuitemradio\"\n        aria-checked={isSelected}\n        aria-controls={\n          /* ********************************************************************************************************************\n           * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n           *    The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n           * ********************************************************************************************************************\n           * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n           *  so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n           * ******************************************************************************************************************** */\n          isExpanded\n            ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n            : undefined\n        }\n        aria-haspopup=\"menu\"\n        aria-expanded={isExpanded}\n        aria-disabled={disabled}\n        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          <LeftBoxlessRadio isSelected={isSelected} />\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          <ChevronSmallRight />\n        </StyledContentWrapper>\n      </StyledGlobalMenuItemWrapper>\n      <FlyoutMenuCircularDepInject\n        isMenuOpen={isExpanded}\n        floatingContext={floatingContext.context}\n        floatingStyles={floatingContext.floatingStyles}\n        setFloatingRef={floatingContext.refs.setFloating}\n        itemNode={itemNode}\n      />\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["import_constants", "React"]
 }

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

@@ -42,9 +42,7 @@ var import_focusNodeRacingConditionSolved = require("./focusNodeRacingConditionS
 var import_MenuButtonContextProviderCTX = require("../../MenuButtonContextProviderCTX.js");
 const firstBoxWidth = "16px";
 const gridLayout = [firstBoxWidth, "1fr"];
-const SkeletonMenuItem = ({
-  itemNode
-}) => {
+const SkeletonMenuItem = ({ itemNode, ariaPosInSet, ariaSetSize }) => {
   const { dsId, plainItem } = itemNode;
   const { minWidth } = plainItem;
   const {
@@ -97,6 +95,8 @@ const SkeletonMenuItem = ({
       id: `${spacelessDsIdForDom}`,
       role: "menuitem",
       "aria-label": "Loading",
+      "aria-posinset": ariaPosInSet,
+      "aria-setsize": ariaSetSize,
       tabIndex: isFocused ? 0 : -1,
       getOwnerProps,
       getOwnerPropsArguments,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSMenuItemRendererFactory/SkeletonMenuItem.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { StyledContentWrapper, StyledGlobalMenuItemWrapper } from '@elliemae/ds-menu-items-commons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nconst firstBoxWidth = '16px';\nconst gridLayout = [firstBoxWidth, '1fr'];\nexport const SkeletonMenuItem: React.ComponentType<{ itemNode: DSMenuButtonT.MenuNodeSkeletonItem }> = ({\n  itemNode,\n}) => {\n  const { dsId, plainItem } = itemNode;\n  const { minWidth } = plainItem;\n\n  const {\n    focusRegion,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n\n  const {\n    ownerProps: { getOwnerProps },\n  } = React.useContext(MenuButtonContextProvider);\n\n  const getOwnerPropsArguments = React.useCallback(() => plainItem, [plainItem]);\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n        focusNodeRacingConditionSolved(node);\n      }\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    handleFocusableMenuItemOnMouseEnter(itemNode);\n  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n  const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n    },\n    [handleFocusableMenuItemNativeFocusEvent, itemNode],\n  );\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n\n  const firstBoxAndGutterWidth = 16 + 8;\n  const secondBoxWidth = minWidth\n    ? `calc(${minWidth} - ${firstBoxAndGutterWidth})`\n    : `${150 - firstBoxAndGutterWidth}px`;\n  return (\n    <StyledGlobalMenuItemWrapper\n      innerRef={handleFocusOnRender}\n      onKeyDown={handleFocusableMenuItemKeyDown}\n      onMouseEnter={handleOnMouseEnter}\n      onFocus={handleOnFocus}\n      as=\"div\"\n      id={`${spacelessDsIdForDom}`}\n      role=\"menuitem\"\n      aria-label=\"Loading\"\n      tabIndex={isFocused ? 0 : -1}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledContentWrapper\n        cols={gridLayout}\n        minHeight=\"16px\"\n        gutter=\"xxs\"\n        alignItems=\"center\"\n        minWidth={minWidth ?? '150px'}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <DSSkeleton variant=\"rectangular\" width={firstBoxWidth} height=\"16px\" bg=\"neutral-080\" borderRadius=\"1px\" />\n        <DSSkeleton variant=\"rectangular\" width={secondBoxWidth} height=\"16px\" bg=\"neutral-080\" borderRadius=\"1px\" />\n      </StyledContentWrapper>\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+EjB;AA9EN,mCAAkE;AAClE,yBAA2B;AAC3B,mBAAkB;AAElB,+CAAsD;AACtD,uBAAmC;AACnC,4CAA+C;AAC/C,0CAA0C;AAC1C,MAAM,gBAAgB;AACtB,MAAM,aAAa,CAAC,eAAe,KAAK;AACjC,MAAM,mBAA0F,CAAC;AAAA,EACtG;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,SAAS,IAAI;AAErB,QAAM;AAAA,IACJ;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,8EAAqC;AAE1D,QAAM,iCAAiC,aAAAA,QAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,YAAY,gBAAgB,oCAAmB,aAAa,IAAI;AAEtE,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,EAC9B,IAAI,aAAAA,QAAM,WAAW,6DAAyB;AAE9C,QAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,WAAW,CAAC,SAAS,CAAC;AAE7E,QAAM,sBAAsB,aAAAA,QAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,UAAI,QAAQ,gBAAgB,oCAAmB,aAAa,IAAI,GAAG;AACjE,kFAA+B,IAAI;AAAA,MACrC;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA,EAIpB;AACA,QAAM,qBAAqB,aAAAA,QAAM,YAAqD,MAAM;AAC1F,wCAAoC,QAAQ;AAAA,EAC9C,GAAG,CAAC,qCAAqC,QAAQ,CAAC;AAClD,QAAM,gBAAgB,aAAAA,QAAM;AAAA,IAC1B,CAAC,MAAM;AACL,8CAAwC,UAAU,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,yCAAyC,QAAQ;AAAA,EACpD;AAEA,QAAM,sBAAsB,gBAAgB,GAAG,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC;AAExE,QAAM,yBAAyB,KAAK;AACpC,QAAM,iBAAiB,WACnB,QAAQ,QAAQ,MAAM,sBAAsB,MAC5C,GAAG,MAAM,sBAAsB;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,SAAS;AAAA,MACT,IAAG;AAAA,MACH,IAAI,GAAG,mBAAmB;AAAA,MAC1B,MAAK;AAAA,MACL,cAAW;AAAA,MACX,UAAU,YAAY,IAAI;AAAA,MAC1B;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACV,QAAO;AAAA,UACP,YAAW;AAAA,UACX,UAAU,YAAY;AAAA,UACtB;AAAA,UACA;AAAA,UAEA;AAAA,wDAAC,iCAAW,SAAQ,eAAc,OAAO,eAAe,QAAO,QAAO,IAAG,eAAc,cAAa,OAAM;AAAA,YAC1G,4CAAC,iCAAW,SAAQ,eAAc,OAAO,gBAAgB,QAAO,QAAO,IAAG,eAAc,cAAa,OAAM;AAAA;AAAA;AAAA,MAC7G;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { StyledContentWrapper, StyledGlobalMenuItemWrapper } from '@elliemae/ds-menu-items-commons';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { focusNodeRacingConditionSolved } from './focusNodeRacingConditionSolved.js';\nimport { MenuButtonContextProvider } from '../../MenuButtonContextProviderCTX.js';\nconst firstBoxWidth = '16px';\nconst gridLayout = [firstBoxWidth, '1fr'];\nexport const SkeletonMenuItem: React.ComponentType<{\n  itemNode: DSMenuButtonT.MenuNodeSkeletonItem;\n  ariaPosInSet?: number;\n  ariaSetSize?: number;\n}> = ({ itemNode, ariaPosInSet, ariaSetSize }) => {\n  const { dsId, plainItem } = itemNode;\n  const { minWidth } = plainItem;\n\n  const {\n    focusRegion,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemOnMouseEnter,\n      handleFocusableMenuItemNativeFocusEvent,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n\n  const {\n    ownerProps: { getOwnerProps },\n  } = React.useContext(MenuButtonContextProvider);\n\n  const getOwnerPropsArguments = React.useCallback(() => plainItem, [plainItem]);\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n        focusNodeRacingConditionSolved(node);\n      }\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n    handleFocusableMenuItemOnMouseEnter(itemNode);\n  }, [handleFocusableMenuItemOnMouseEnter, itemNode]);\n  const handleOnFocus = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemNativeFocusEvent(itemNode, e);\n    },\n    [handleFocusableMenuItemNativeFocusEvent, itemNode],\n  );\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n\n  const firstBoxAndGutterWidth = 16 + 8;\n  const secondBoxWidth = minWidth\n    ? `calc(${minWidth} - ${firstBoxAndGutterWidth})`\n    : `${150 - firstBoxAndGutterWidth}px`;\n  return (\n    <StyledGlobalMenuItemWrapper\n      innerRef={handleFocusOnRender}\n      onKeyDown={handleFocusableMenuItemKeyDown}\n      onMouseEnter={handleOnMouseEnter}\n      onFocus={handleOnFocus}\n      as=\"div\"\n      id={`${spacelessDsIdForDom}`}\n      role=\"menuitem\"\n      aria-label=\"Loading\"\n      aria-posinset={ariaPosInSet}\n      aria-setsize={ariaSetSize}\n      tabIndex={isFocused ? 0 : -1}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledContentWrapper\n        cols={gridLayout}\n        minHeight=\"16px\"\n        gutter=\"xxs\"\n        alignItems=\"center\"\n        minWidth={minWidth ?? '150px'}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <DSSkeleton variant=\"rectangular\" width={firstBoxWidth} height=\"16px\" bg=\"neutral-080\" borderRadius=\"1px\" />\n        <DSSkeleton variant=\"rectangular\" width={secondBoxWidth} height=\"16px\" bg=\"neutral-080\" borderRadius=\"1px\" />\n      </StyledContentWrapper>\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmFjB;AAlFN,mCAAkE;AAClE,yBAA2B;AAC3B,mBAAkB;AAElB,+CAAsD;AACtD,uBAAmC;AACnC,4CAA+C;AAC/C,0CAA0C;AAC1C,MAAM,gBAAgB;AACtB,MAAM,aAAa,CAAC,eAAe,KAAK;AACjC,MAAM,mBAIR,CAAC,EAAE,UAAU,cAAc,YAAY,MAAM;AAChD,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,SAAS,IAAI;AAErB,QAAM;AAAA,IACJ;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,8EAAqC;AAE1D,QAAM,iCAAiC,aAAAA,QAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,YAAY,gBAAgB,oCAAmB,aAAa,IAAI;AAEtE,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,EAC9B,IAAI,aAAAA,QAAM,WAAW,6DAAyB;AAE9C,QAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,WAAW,CAAC,SAAS,CAAC;AAE7E,QAAM,sBAAsB,aAAAA,QAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,UAAI,QAAQ,gBAAgB,oCAAmB,aAAa,IAAI,GAAG;AACjE,kFAA+B,IAAI;AAAA,MACrC;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA,EAIpB;AACA,QAAM,qBAAqB,aAAAA,QAAM,YAAqD,MAAM;AAC1F,wCAAoC,QAAQ;AAAA,EAC9C,GAAG,CAAC,qCAAqC,QAAQ,CAAC;AAClD,QAAM,gBAAgB,aAAAA,QAAM;AAAA,IAC1B,CAAC,MAAM;AACL,8CAAwC,UAAU,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,yCAAyC,QAAQ;AAAA,EACpD;AAEA,QAAM,sBAAsB,gBAAgB,GAAG,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC;AAExE,QAAM,yBAAyB,KAAK;AACpC,QAAM,iBAAiB,WACnB,QAAQ,QAAQ,MAAM,sBAAsB,MAC5C,GAAG,MAAM,sBAAsB;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,SAAS;AAAA,MACT,IAAG;AAAA,MACH,IAAI,GAAG,mBAAmB;AAAA,MAC1B,MAAK;AAAA,MACL,cAAW;AAAA,MACX,iBAAe;AAAA,MACf,gBAAc;AAAA,MACd,UAAU,YAAY,IAAI;AAAA,MAC1B;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACV,QAAO;AAAA,UACP,YAAW;AAAA,UACX,UAAU,YAAY;AAAA,UACtB;AAAA,UACA;AAAA,UAEA;AAAA,wDAAC,iCAAW,SAAQ,eAAc,OAAO,eAAe,QAAO,QAAO,IAAG,eAAc,cAAa,OAAM;AAAA,YAC1G,4CAAC,iCAAW,SAAQ,eAAc,OAAO,gBAAgB,QAAO,QAAO,IAAG,eAAc,cAAa,OAAM;AAAA;AAAA;AAAA,MAC7G;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React"]
 }

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

@@ -49,7 +49,7 @@ const placementOrderPreference = [
   "left-end",
   "left"
 ];
-const WithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
+const WithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject, ariaPosInSet, ariaSetSize }) => {
   const { dsId, plainItem } = itemNode;
   const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
   const {
@@ -135,6 +135,8 @@ const WithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
           isExpanded ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\s/g, "")}`).join(" ") : void 0
         ),
         "aria-disabled": disabled,
+        "aria-posinset": ariaPosInSet,
+        "aria-setsize": ariaSetSize,
         applyAriaDisabled: disabled,
         getOwnerProps,
         getOwnerPropsArguments,

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

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

package/dist/cjs/utils/nodesTypeguardsAndGetters.js

@@ -28,6 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var nodesTypeguardsAndGetters_exports = {};
 __export(nodesTypeguardsAndGetters_exports, {
+  getAriaSetSizeAndPosInSetBySiblingList: () => getAriaSetSizeAndPosInSetBySiblingList,
   getFocusableNodes: () => getFocusableNodes,
   getSelectionableNodes: () => getSelectionableNodes,
   getWithSubmenuNodes: () => getWithSubmenuNodes,
@@ -81,5 +82,10 @@ const getFocusableNodes = (tree) => {
 const isSeparatorNode = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.SEPARATOR;
 const isGroup = (item) => isObjectAMenuNode(item) && item.plainItem?.type === import_constants.MENU_ITEMS_TYPES.GROUP;
 const isRootNode = (item) => isObjectAMenuNode(item) && item.plainItem?.type === "ROOT_ITEM";
+const getAriaSetSizeAndPosInSetBySiblingList = (siblingNodes) => {
+  const focusableSiblings = siblingNodes.filter(isFocusableNode);
+  const ariaSetSize = focusableSiblings.length;
+  return new Map(focusableSiblings.map((node, index) => [node.dsId, { ariaPosInSet: index + 1, ariaSetSize }]));
+};
 const isMenuNodeAllowedToHaveChildren = (item) => isRootNode(item) || isWithSubmenuNode(item) || isGroup(item) || isSingleSelectNodeWithSubmenu(item) || isMultipleSelectWithSubmenuNode(item) || isActivableWithSubmenuNode(item);
 //# sourceMappingURL=nodesTypeguardsAndGetters.js.map

package/dist/cjs/utils/nodesTypeguardsAndGetters.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/nodesTypeguardsAndGetters.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport { type DSMenuButtonT } from '../react-desc-prop-types.js';\n\nimport { MENU_ITEMS_TYPES } from '../constants/index.js';\n\n/**\n * Heuristic to determine if the selected item is an item or a node.\n * Not perfect because JavaScript is not typed.\n * If app devs provide an object that matches all of those conditions, it's an edge case the app devs should handle.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is (heuristically) a menu node, false otherwise.\n */\nexport const isObjectAMenuNode = (item: unknown): item is DSMenuButtonT.MenuNode => {\n  const node = item as { plainItem?: { type?: unknown }; dsId?: unknown };\n  return (\n    typeof item === 'object' &&\n    item !== null &&\n    typeof node.plainItem === 'object' &&\n    node.plainItem?.type !== undefined &&\n    node.dsId !== undefined\n  );\n};\n\n// =============================================================================\n// Focusable nodes\n// =============================================================================\n/**\n * Checks if the item is an activable node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is an activable node, false otherwise.\n */\nexport const isActivableNode = (item: unknown): item is DSMenuButtonT.MenuNodeActivableItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.ACTIVABLE_ITEM;\n\n/**\n * Checks if the item is a skeleton node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a skeleton node, false otherwise.\n */\nexport const isSkeletonNode = (item: unknown): item is DSMenuButtonT.MenuNodeSkeletonItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.SKELETON_ITEM;\n\n// =============================================================================\n// Focusable but more specifically selectable nodes\n// =============================================================================\n\n/**\n * Checks if the item is a multiple select only node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a multiple select only node, false otherwise.\n */\nexport const isMultipleSelectOnlyNode = (item: unknown): item is DSMenuButtonT.MenuNodeMultipleSelectItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.MULTIPLE_SELECT_ITEM;\n\n/**\n * Checks if the item is a multiple select node with a submenu.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a multiple select node with a submenu, false otherwise.\n */\nexport const isMultipleSelectWithSubmenuNode = (\n  item: unknown,\n): item is DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.MULTIPLE_SELECT_WITH_SUBMENU_ITEM;\n\n/**\n * Checks if the item is a multiple select node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a multiple select node, false otherwise.\n */\nexport const isMultipleSelectNode = (item: unknown): item is DSMenuButtonT.MultipleSelectionableMenuNodes =>\n  isMultipleSelectOnlyNode(item) || isMultipleSelectWithSubmenuNode(item);\n\n/**\n * Checks if the item is a single select only node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a single select only node, false otherwise.\n */\nexport const isSingleSelectOnlyNode = (item: unknown): item is DSMenuButtonT.MenuNodeSingleSelectItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.SINGLE_SELECT_ITEM;\n\n/**\n * Checks if the item is a single select node with a submenu.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a single select node with a submenu, false otherwise.\n */\nexport const isSingleSelectNodeWithSubmenu = (\n  item: unknown,\n): item is DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.SINGLE_SELECT_WITH_SUBMENU_ITEM;\n\n/**\n * Checks if the item is a single select node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a single select node, false otherwise.\n */\nexport const isSingleSelectNode = (item: unknown): item is DSMenuButtonT.SingleSelectionableMenuNodes =>\n  isSingleSelectOnlyNode(item) || isSingleSelectNodeWithSubmenu(item);\n\n/**\n * Checks if the item is a selectionable node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a selectionable node, false otherwise.\n */\nexport const isSelectionableNode = (item: unknown): item is DSMenuButtonT.SelectionableMenuNodes =>\n  isMultipleSelectNode(item) || isSingleSelectNode(item);\n\n/**\n * Gets all selectionable nodes from the tree.\n * @param {DSMenuButtonT.MenuNode} tree - The tree to search.\n * @returns {DSMenuButtonT.SelectionableMenuNodes[]} - An array of selectionable nodes.\n */\nexport const getSelectionableNodes = (tree: DSMenuButtonT.MenuNode): DSMenuButtonT.SelectionableMenuNodes[] =>\n  tree.flatten().filter(isSelectionableNode);\n// =============================================================================\n// Focusable but more specifically with submenu nodes\n// =============================================================================\n/**\n * Checks if the item is a node with a submenu (and nothing else).\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a node with a submenu, false otherwise.\n */\nexport const isWithSubmenuOnlyNode = (item: unknown): item is DSMenuButtonT.MenuNodeWithSubmenuItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.WITH_SUBMENU_ITEM;\n\n/**\n * Checks if the item is a selectionable node with a submenu.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a selectionable node with a submenu, false otherwise.\n */\nexport const isSelectionableWithSubmenuNode = (\n  item: unknown,\n): item is DSMenuButtonT.SelectionablesWithSubmenuMenuNodes =>\n  isSingleSelectNodeWithSubmenu(item) || isMultipleSelectWithSubmenuNode(item);\n/**\n * Checks if the item is an activable node with a submenu.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is an activable node with a submenu, false otherwise.\n */\nexport const isActivableWithSubmenuNode = (item: unknown): item is DSMenuButtonT.MenuNodeActivableWithSubmenuItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.ACTIVABLE_WITH_SUBMENU_ITEM;\n\n/**\n * Checks if the item is a node with a submenu.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a node with a submenu, false otherwise.\n */\nexport const isWithSubmenuNode = (item: unknown): item is DSMenuButtonT.WithSubmenuMenuNodes =>\n  isWithSubmenuOnlyNode(item) || isSelectionableWithSubmenuNode(item) || isActivableWithSubmenuNode(item);\n\n/**\n * Gets all nodes with a submenu from the tree.\n * @param {DSMenuButtonT.MenuNode} tree - The tree to search.\n * @returns {DSMenuButtonT.PseudoFocusableMenuNodes[]} - An array of nodes with a submenu.\n */\nexport const getWithSubmenuNodes = (tree: DSMenuButtonT.MenuNode): DSMenuButtonT.PseudoFocusableMenuNodes[] =>\n  tree.flatten().filter(isWithSubmenuNode);\n/**\n * Checks if the item is a node that can be focused.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a node that can be focused, false otherwise.\n */\nexport const isFocusableNode = (item: unknown): item is DSMenuButtonT.PseudoFocusableMenuNodes =>\n  isSelectionableNode(item) || isActivableNode(item) || isWithSubmenuNode(item) || isSkeletonNode(item);\n\n/**\n * Gets all nodes that can be focused from the tree.\n * @param {DSMenuButtonT.MenuNode} tree - The tree to search.\n * @returns {DSMenuButtonT.PseudoFocusableMenuNodes[]} - An array of nodes that can be focused.\n */\nexport const getFocusableNodes = (tree: DSMenuButtonT.MenuNode): DSMenuButtonT.PseudoFocusableMenuNodes[] => {\n  const flattenNodes = tree.flatten();\n  return flattenNodes.filter(isFocusableNode);\n};\n\n// =============================================================================\n// Non focusable nodes\n// =============================================================================\n/**\n * Checks if the item is a separator node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a separator node, false otherwise.\n */\nexport const isSeparatorNode = (item: unknown): item is DSMenuButtonT.MenuNodeSeparatorItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.SEPARATOR;\n/**\n * Checks if the item is a group node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a group node, false otherwise.\n */\nexport const isGroup = (item: unknown): item is DSMenuButtonT.MenuNodeGroupItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.GROUP;\n\n/**\n * Checks if the given item is a root node of the menu.\n * @param {DSMenuButtonT.MenuNode} tree - The tree to search.\n * @returns {DSMenuButtonT.PseudoFocusableMenuNodes[]} - An array of nodes that can be focused.\n * @remarks\n * The root item is not a renderable item and must always be treated with special care.\n *\n * This function uses a hardcoded string to identify the root item.\n */\nexport const isRootNode = (item: unknown): item is DSMenuButtonT.MenuNodeRootItem =>\n  isObjectAMenuNode(item) && (item.plainItem?.type as string) === 'ROOT_ITEM';\n\n// =============================================================================\n// Nodes allowed/expected to have subItems/children\n//  (the node not necessarily needs to be focusable or a submenu, E.G. a group)\n// =============================================================================\nexport const isMenuNodeAllowedToHaveChildren = (item: unknown): item is DSMenuButtonT.MenuNodesAllowedToHaveChildren =>\n  isRootNode(item) ||\n  isWithSubmenuNode(item) ||\n  isGroup(item) ||\n  isSingleSelectNodeWithSubmenu(item) ||\n  isMultipleSelectWithSubmenuNode(item) ||\n  isActivableWithSubmenuNode(item);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAiC;AAS1B,MAAM,oBAAoB,CAAC,SAAkD;AAClF,QAAM,OAAO;AACb,SACE,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,KAAK,cAAc,YAC1B,KAAK,WAAW,SAAS,UACzB,KAAK,SAAS;AAElB;AAUO,MAAM,kBAAkB,CAAC,SAC9B,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,iBAAiB,CAAC,SAC7B,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAWhE,MAAM,2BAA2B,CAAC,SACvC,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,kCAAkC,CAC7C,SAEA,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,uBAAuB,CAAC,SACnC,yBAAyB,IAAI,KAAK,gCAAgC,IAAI;AAOjE,MAAM,yBAAyB,CAAC,SACrC,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,gCAAgC,CAC3C,SAEA,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,qBAAqB,CAAC,SACjC,uBAAuB,IAAI,KAAK,8BAA8B,IAAI;AAO7D,MAAM,sBAAsB,CAAC,SAClC,qBAAqB,IAAI,KAAK,mBAAmB,IAAI;AAOhD,MAAM,wBAAwB,CAAC,SACpC,KAAK,QAAQ,EAAE,OAAO,mBAAmB;AASpC,MAAM,wBAAwB,CAAC,SACpC,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,iCAAiC,CAC5C,SAEA,8BAA8B,IAAI,KAAK,gCAAgC,IAAI;AAMtE,MAAM,6BAA6B,CAAC,SACzC,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,oBAAoB,CAAC,SAChC,sBAAsB,IAAI,KAAK,+BAA+B,IAAI,KAAK,2BAA2B,IAAI;AAOjG,MAAM,sBAAsB,CAAC,SAClC,KAAK,QAAQ,EAAE,OAAO,iBAAiB;AAMlC,MAAM,kBAAkB,CAAC,SAC9B,oBAAoB,IAAI,KAAK,gBAAgB,IAAI,KAAK,kBAAkB,IAAI,KAAK,eAAe,IAAI;AAO/F,MAAM,oBAAoB,CAAC,SAA2E;AAC3G,QAAM,eAAe,KAAK,QAAQ;AAClC,SAAO,aAAa,OAAO,eAAe;AAC5C;AAUO,MAAM,kBAAkB,CAAC,SAC9B,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAMhE,MAAM,UAAU,CAAC,SACtB,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAWhE,MAAM,aAAa,CAAC,SACzB,kBAAkB,IAAI,KAAM,KAAK,WAAW,SAAoB;AAM3D,MAAM,kCAAkC,CAAC,SAC9C,WAAW,IAAI,KACf,kBAAkB,IAAI,KACtB,QAAQ,IAAI,KACZ,8BAA8B,IAAI,KAClC,gCAAgC,IAAI,KACpC,2BAA2B,IAAI;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport { type DSMenuButtonT } from '../react-desc-prop-types.js';\n\nimport { MENU_ITEMS_TYPES } from '../constants/index.js';\n\n/**\n * Heuristic to determine if the selected item is an item or a node.\n * Not perfect because JavaScript is not typed.\n * If app devs provide an object that matches all of those conditions, it's an edge case the app devs should handle.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is (heuristically) a menu node, false otherwise.\n */\nexport const isObjectAMenuNode = (item: unknown): item is DSMenuButtonT.MenuNode => {\n  const node = item as { plainItem?: { type?: unknown }; dsId?: unknown };\n  return (\n    typeof item === 'object' &&\n    item !== null &&\n    typeof node.plainItem === 'object' &&\n    node.plainItem?.type !== undefined &&\n    node.dsId !== undefined\n  );\n};\n\n// =============================================================================\n// Focusable nodes\n// =============================================================================\n/**\n * Checks if the item is an activable node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is an activable node, false otherwise.\n */\nexport const isActivableNode = (item: unknown): item is DSMenuButtonT.MenuNodeActivableItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.ACTIVABLE_ITEM;\n\n/**\n * Checks if the item is a skeleton node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a skeleton node, false otherwise.\n */\nexport const isSkeletonNode = (item: unknown): item is DSMenuButtonT.MenuNodeSkeletonItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.SKELETON_ITEM;\n\n// =============================================================================\n// Focusable but more specifically selectable nodes\n// =============================================================================\n\n/**\n * Checks if the item is a multiple select only node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a multiple select only node, false otherwise.\n */\nexport const isMultipleSelectOnlyNode = (item: unknown): item is DSMenuButtonT.MenuNodeMultipleSelectItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.MULTIPLE_SELECT_ITEM;\n\n/**\n * Checks if the item is a multiple select node with a submenu.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a multiple select node with a submenu, false otherwise.\n */\nexport const isMultipleSelectWithSubmenuNode = (\n  item: unknown,\n): item is DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.MULTIPLE_SELECT_WITH_SUBMENU_ITEM;\n\n/**\n * Checks if the item is a multiple select node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a multiple select node, false otherwise.\n */\nexport const isMultipleSelectNode = (item: unknown): item is DSMenuButtonT.MultipleSelectionableMenuNodes =>\n  isMultipleSelectOnlyNode(item) || isMultipleSelectWithSubmenuNode(item);\n\n/**\n * Checks if the item is a single select only node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a single select only node, false otherwise.\n */\nexport const isSingleSelectOnlyNode = (item: unknown): item is DSMenuButtonT.MenuNodeSingleSelectItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.SINGLE_SELECT_ITEM;\n\n/**\n * Checks if the item is a single select node with a submenu.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a single select node with a submenu, false otherwise.\n */\nexport const isSingleSelectNodeWithSubmenu = (\n  item: unknown,\n): item is DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.SINGLE_SELECT_WITH_SUBMENU_ITEM;\n\n/**\n * Checks if the item is a single select node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a single select node, false otherwise.\n */\nexport const isSingleSelectNode = (item: unknown): item is DSMenuButtonT.SingleSelectionableMenuNodes =>\n  isSingleSelectOnlyNode(item) || isSingleSelectNodeWithSubmenu(item);\n\n/**\n * Checks if the item is a selectionable node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a selectionable node, false otherwise.\n */\nexport const isSelectionableNode = (item: unknown): item is DSMenuButtonT.SelectionableMenuNodes =>\n  isMultipleSelectNode(item) || isSingleSelectNode(item);\n\n/**\n * Gets all selectionable nodes from the tree.\n * @param {DSMenuButtonT.MenuNode} tree - The tree to search.\n * @returns {DSMenuButtonT.SelectionableMenuNodes[]} - An array of selectionable nodes.\n */\nexport const getSelectionableNodes = (tree: DSMenuButtonT.MenuNode): DSMenuButtonT.SelectionableMenuNodes[] =>\n  tree.flatten().filter(isSelectionableNode);\n// =============================================================================\n// Focusable but more specifically with submenu nodes\n// =============================================================================\n/**\n * Checks if the item is a node with a submenu (and nothing else).\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a node with a submenu, false otherwise.\n */\nexport const isWithSubmenuOnlyNode = (item: unknown): item is DSMenuButtonT.MenuNodeWithSubmenuItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.WITH_SUBMENU_ITEM;\n\n/**\n * Checks if the item is a selectionable node with a submenu.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a selectionable node with a submenu, false otherwise.\n */\nexport const isSelectionableWithSubmenuNode = (\n  item: unknown,\n): item is DSMenuButtonT.SelectionablesWithSubmenuMenuNodes =>\n  isSingleSelectNodeWithSubmenu(item) || isMultipleSelectWithSubmenuNode(item);\n/**\n * Checks if the item is an activable node with a submenu.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is an activable node with a submenu, false otherwise.\n */\nexport const isActivableWithSubmenuNode = (item: unknown): item is DSMenuButtonT.MenuNodeActivableWithSubmenuItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.ACTIVABLE_WITH_SUBMENU_ITEM;\n\n/**\n * Checks if the item is a node with a submenu.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a node with a submenu, false otherwise.\n */\nexport const isWithSubmenuNode = (item: unknown): item is DSMenuButtonT.WithSubmenuMenuNodes =>\n  isWithSubmenuOnlyNode(item) || isSelectionableWithSubmenuNode(item) || isActivableWithSubmenuNode(item);\n\n/**\n * Gets all nodes with a submenu from the tree.\n * @param {DSMenuButtonT.MenuNode} tree - The tree to search.\n * @returns {DSMenuButtonT.PseudoFocusableMenuNodes[]} - An array of nodes with a submenu.\n */\nexport const getWithSubmenuNodes = (tree: DSMenuButtonT.MenuNode): DSMenuButtonT.PseudoFocusableMenuNodes[] =>\n  tree.flatten().filter(isWithSubmenuNode);\n/**\n * Checks if the item is a node that can be focused.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a node that can be focused, false otherwise.\n */\nexport const isFocusableNode = (item: unknown): item is DSMenuButtonT.PseudoFocusableMenuNodes =>\n  isSelectionableNode(item) || isActivableNode(item) || isWithSubmenuNode(item) || isSkeletonNode(item);\n\n/**\n * Gets all nodes that can be focused from the tree.\n * @param {DSMenuButtonT.MenuNode} tree - The tree to search.\n * @returns {DSMenuButtonT.PseudoFocusableMenuNodes[]} - An array of nodes that can be focused.\n */\nexport const getFocusableNodes = (tree: DSMenuButtonT.MenuNode): DSMenuButtonT.PseudoFocusableMenuNodes[] => {\n  const flattenNodes = tree.flatten();\n  return flattenNodes.filter(isFocusableNode);\n};\n\n// =============================================================================\n// Non focusable nodes\n// =============================================================================\n/**\n * Checks if the item is a separator node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a separator node, false otherwise.\n */\nexport const isSeparatorNode = (item: unknown): item is DSMenuButtonT.MenuNodeSeparatorItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.SEPARATOR;\n/**\n * Checks if the item is a group node.\n * @param {unknown} item - The item to check.\n * @returns {boolean} - True if the item is a group node, false otherwise.\n */\nexport const isGroup = (item: unknown): item is DSMenuButtonT.MenuNodeGroupItem =>\n  isObjectAMenuNode(item) && item.plainItem?.type === MENU_ITEMS_TYPES.GROUP;\n\n/**\n * Checks if the given item is a root node of the menu.\n * @param {DSMenuButtonT.MenuNode} tree - The tree to search.\n * @returns {DSMenuButtonT.PseudoFocusableMenuNodes[]} - An array of nodes that can be focused.\n * @remarks\n * The root item is not a renderable item and must always be treated with special care.\n *\n * This function uses a hardcoded string to identify the root item.\n */\nexport const isRootNode = (item: unknown): item is DSMenuButtonT.MenuNodeRootItem =>\n  isObjectAMenuNode(item) && (item.plainItem?.type as string) === 'ROOT_ITEM';\n\n// =============================================================================\n// aria-setsize / aria-posinset\n// =============================================================================\n/**\n * Computes aria-posinset/aria-setsize for the focusable nodes within a single sibling\n * list \u2014 either the flyout menu's top-level children, or one group's subitems.\n * @param {DSMenuButtonT.MenuNode[]} siblingNodes - Immediate sibling nodes sharing one list level.\n * @returns {Map<DSMenuButtonT.MenuNode['dsId'], { ariaPosInSet: number; ariaSetSize: number }>} keyed by dsId.\n * @remarks\n * PUI-18614: the browser/AT native inference of a menu's item count and an item's position\n * breaks once a `role=\"group\"` wrapper has no accessible name (a supported, label-less GROUP\n * usage). Making both values explicit removes the dependency on that inference. Separators and\n * nested groups are excluded \u2014 they are not part of the ARIA \"set of items\".\n */\nexport const getAriaSetSizeAndPosInSetBySiblingList = (\n  siblingNodes: DSMenuButtonT.MenuNode[],\n): Map<DSMenuButtonT.MenuNode['dsId'], { ariaPosInSet: number; ariaSetSize: number }> => {\n  const focusableSiblings = siblingNodes.filter(isFocusableNode);\n  const ariaSetSize = focusableSiblings.length;\n  return new Map(focusableSiblings.map((node, index) => [node.dsId, { ariaPosInSet: index + 1, ariaSetSize }]));\n};\n\n// =============================================================================\n// Nodes allowed/expected to have subItems/children\n//  (the node not necessarily needs to be focusable or a submenu, E.G. a group)\n// =============================================================================\nexport const isMenuNodeAllowedToHaveChildren = (item: unknown): item is DSMenuButtonT.MenuNodesAllowedToHaveChildren =>\n  isRootNode(item) ||\n  isWithSubmenuNode(item) ||\n  isGroup(item) ||\n  isSingleSelectNodeWithSubmenu(item) ||\n  isMultipleSelectWithSubmenuNode(item) ||\n  isActivableWithSubmenuNode(item);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAiC;AAS1B,MAAM,oBAAoB,CAAC,SAAkD;AAClF,QAAM,OAAO;AACb,SACE,OAAO,SAAS,YAChB,SAAS,QACT,OAAO,KAAK,cAAc,YAC1B,KAAK,WAAW,SAAS,UACzB,KAAK,SAAS;AAElB;AAUO,MAAM,kBAAkB,CAAC,SAC9B,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,iBAAiB,CAAC,SAC7B,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAWhE,MAAM,2BAA2B,CAAC,SACvC,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,kCAAkC,CAC7C,SAEA,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,uBAAuB,CAAC,SACnC,yBAAyB,IAAI,KAAK,gCAAgC,IAAI;AAOjE,MAAM,yBAAyB,CAAC,SACrC,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,gCAAgC,CAC3C,SAEA,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,qBAAqB,CAAC,SACjC,uBAAuB,IAAI,KAAK,8BAA8B,IAAI;AAO7D,MAAM,sBAAsB,CAAC,SAClC,qBAAqB,IAAI,KAAK,mBAAmB,IAAI;AAOhD,MAAM,wBAAwB,CAAC,SACpC,KAAK,QAAQ,EAAE,OAAO,mBAAmB;AASpC,MAAM,wBAAwB,CAAC,SACpC,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,iCAAiC,CAC5C,SAEA,8BAA8B,IAAI,KAAK,gCAAgC,IAAI;AAMtE,MAAM,6BAA6B,CAAC,SACzC,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAOhE,MAAM,oBAAoB,CAAC,SAChC,sBAAsB,IAAI,KAAK,+BAA+B,IAAI,KAAK,2BAA2B,IAAI;AAOjG,MAAM,sBAAsB,CAAC,SAClC,KAAK,QAAQ,EAAE,OAAO,iBAAiB;AAMlC,MAAM,kBAAkB,CAAC,SAC9B,oBAAoB,IAAI,KAAK,gBAAgB,IAAI,KAAK,kBAAkB,IAAI,KAAK,eAAe,IAAI;AAO/F,MAAM,oBAAoB,CAAC,SAA2E;AAC3G,QAAM,eAAe,KAAK,QAAQ;AAClC,SAAO,aAAa,OAAO,eAAe;AAC5C;AAUO,MAAM,kBAAkB,CAAC,SAC9B,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAMhE,MAAM,UAAU,CAAC,SACtB,kBAAkB,IAAI,KAAK,KAAK,WAAW,SAAS,kCAAiB;AAWhE,MAAM,aAAa,CAAC,SACzB,kBAAkB,IAAI,KAAM,KAAK,WAAW,SAAoB;AAgB3D,MAAM,yCAAyC,CACpD,iBACuF;AACvF,QAAM,oBAAoB,aAAa,OAAO,eAAe;AAC7D,QAAM,cAAc,kBAAkB;AACtC,SAAO,IAAI,IAAI,kBAAkB,IAAI,CAAC,MAAM,UAAU,CAAC,KAAK,MAAM,EAAE,cAAc,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC;AAC9G;AAMO,MAAM,kCAAkC,CAAC,SAC9C,WAAW,IAAI,KACf,kBAAkB,IAAI,KACtB,QAAQ,IAAI,KACZ,8BAA8B,IAAI,KAClC,gCAAgC,IAAI,KACpC,2BAA2B,IAAI;",
   "names": []
 }

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": "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",
   "names": ["React"]
 }

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,

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\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;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;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;",
+  "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,