@elliemae/ds-menu-items-submenu 3.40.0 → 3.41.0-rc.0

package/dist/cjs/DSMenuItemsSubmenu.js

@@ -48,6 +48,7 @@ const DSMenuItemsSubmenu = (props) => {
     secondaryLabel,
     isActive,
     disabled,
+    applyAriaDisabled,
     isSubmenuOpened,
     rightAddon,
     innerRef,
@@ -118,6 +119,7 @@ const DSMenuItemsSubmenu = (props) => {
           onMouseLeave: onMouseLeaveHandler,
           innerRef,
           disabled,
+          "aria-disabled": applyAriaDisabled,
           pl: optionsShouldHavePadding ? 40 : 16,
           as: "div",
           "data-type": "submenu",
@@ -127,14 +129,29 @@ const DSMenuItemsSubmenu = (props) => {
               secondaryLabel !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyleMenuItemSecondaryLabel, { children: secondaryLabel }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_menu_items_commons.StyledIconContainer, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyledVerticalSeparator, {}),
-                rightAddon === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyledEllipsisButton, { tabIndex: -1, onClick: onEllipsisClick, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_ds_icons.MoreOptionsVert,
+                rightAddon === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_ds_menu_items_commons.StyledEllipsisButton,
                   {
-                    className: "ds-dropdown-menu-v2-more-options",
-                    color: disabled ? ["neutral", "500"] : ["brand-primary", "600"],
+                    tabIndex: -1,
+                    onClick: onEllipsisClick,
+                    disabled,
+                    applyAriaDisabled,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_ds_icons.MoreOptionsVert,
+                      {
+                        className: "ds-dropdown-menu-v2-more-options",
+                        color: disabled || applyAriaDisabled ? ["neutral", "500"] : ["brand-primary", "600"],
+                        size: "s"
+                      }
+                    )
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_ds_icons.ChevronRight,
+                  {
+                    color: disabled || applyAriaDisabled ? ["neutral", "500"] : ["brand-primary", "600"],
                     size: "s"
                   }
-                ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronRight, { color: disabled ? ["neutral", "500"] : ["brand-primary", "600"], size: "s" })
+                )
               ] })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: `dropdownmenu-submenu-${dsId}`, style: { display: "none" }, children: "submenu, to open this submenu press the Right Arrow key" })

package/dist/cjs/DSMenuItemsSubmenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSMenuItemsSubmenu.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { MoreOptionsVert, ChevronRight } from '@elliemae/ds-icons';\nimport {\n  StyledGlobalMenuItemWrapper,\n  StyledContentWrapper,\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledIconContainer,\n  StyledVerticalSeparator,\n  StyledEllipsisButton,\n} from '@elliemae/ds-menu-items-commons';\nimport { type DSMenuItemsSubmenuT, DSMenuItemsSubmenuPropTypesSchema } from './react-desc-prop-types.js';\nimport { useMenuItemsSubmenu } from './config/useMenuItemsSubmenu.js';\n\nconst DSMenuItemsSubmenu: React.ComponentType<DSMenuItemsSubmenuT.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps, eventHandlers } = useMenuItemsSubmenu(props);\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    isActive,\n    disabled,\n    isSubmenuOpened,\n    rightAddon,\n    innerRef,\n    wrapperStyles,\n    optionsShouldHavePadding,\n    render: Render,\n    Dropdown,\n    dropdownProps: {\n      options,\n      openedSubmenus,\n      onSubmenuToggle,\n      selectedOptions,\n      onKeyDown,\n      onOptionClick,\n      onClickOutside,\n      minWidth,\n      maxHeight,\n    },\n  } = propsWithDefault;\n\n  // If we don't delay the opening of the poppers, the position will not be placed correctly\n  // That why we delay it for the next render using the useEffect hook\n  // TODO -- @carusox move this to utilities as a hook\n  const [delayedIsOpened, setDelayedIsOpened] = React.useState(false);\n  React.useEffect(() => {\n    setTimeout(() => setDelayedIsOpened(Boolean(isSubmenuOpened)));\n  }, [isSubmenuOpened]);\n\n  const gridLayout = React.useMemo(() => {\n    const cols = ['auto'];\n    if (secondaryLabel !== undefined) cols.push('min-content');\n    cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\n  // We need to exclude minWidth because we have already used it as a key value for the dropdown menu options.\n  // i dont think there is a workaround for this at the moment\n  // we need a complete refactor in how we build the submenus\n  // eslint-disable-next-line no-unused-vars\n  const { minWidth: customMinWidth, ...restXStyled } = xstyledProps;\n  // eslint-disable-next-line no-unused-vars\n  const { onMouseLeave, onMouseEnter, onMouseDown, ...restGlobalAttributes } = globalProps;\n\n  const { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick } = eventHandlers;\n\n  return (\n    <Dropdown\n      isOpened={delayedIsOpened}\n      options={options ?? []}\n      onOptionClick={onOptionClick}\n      startPlacementPreference=\"right-start\"\n      placementOrderPreference={['right-start', 'right-end', 'left-start', 'left-end']}\n      selectedOptions={selectedOptions}\n      openedSubmenus={openedSubmenus}\n      onSubmenuToggle={onSubmenuToggle}\n      onKeyDown={onKeyDown}\n      onClickOutside={onClickOutside}\n      customOffset={[-4, 1]}\n      wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n      as=\"li\"\n      role=\"option\"\n      minWidth={minWidth}\n      maxHeight={maxHeight}\n      aria-selected={isSubmenuOpened}\n      aria-describedby={`dropdownmenu-submenu-${dsId}`}\n      data-popover-label={label}\n      id={dsId}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      onMouseDown={onMouseDownHandler}\n      {...restGlobalAttributes}\n      {...restXStyled}\n    >\n      <StyledGlobalMenuItemWrapper\n        pr={0}\n        isSelected={isSubmenuOpened}\n        isActive={isActive}\n        onMouseEnter={onMouseEnterHandler}\n        onMouseLeave={onMouseLeaveHandler}\n        innerRef={innerRef}\n        disabled={disabled}\n        pl={optionsShouldHavePadding ? 40 : 16}\n        as={'div' as keyof JSX.IntrinsicElements}\n        data-type=\"submenu\"\n      >\n        {Render !== undefined ? (\n          <Render {...propsWithDefault} />\n        ) : (\n          <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n            <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n            {secondaryLabel !== undefined && (\n              <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n            )}\n            <StyledIconContainer>\n              <StyledVerticalSeparator />\n              {rightAddon === 'ellipsis' ? (\n                <StyledEllipsisButton tabIndex={-1} onClick={onEllipsisClick} disabled={disabled}>\n                  <MoreOptionsVert\n                    className=\"ds-dropdown-menu-v2-more-options\"\n                    color={disabled ? ['neutral', '500'] : ['brand-primary', '600']}\n                    size=\"s\"\n                  />\n                </StyledEllipsisButton>\n              ) : (\n                <ChevronRight color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} size=\"s\" />\n              )}\n            </StyledIconContainer>\n          </StyledContentWrapper>\n        )}\n        <span id={`dropdownmenu-submenu-${dsId}`} style={{ display: 'none' }}>\n          submenu, to open this submenu press the Right Arrow key\n        </span>\n      </StyledGlobalMenuItemWrapper>\n    </Dropdown>\n  );\n};\n\nDSMenuItemsSubmenu.displayName = 'DSMenuItemSubmenu';\nconst DSMenuItemsSubmenuWithSchema = describe(DSMenuItemsSubmenu);\nDSMenuItemsSubmenuWithSchema.propTypes = DSMenuItemsSubmenuPropTypesSchema;\n\nexport { DSMenuItemsSubmenu, DSMenuItemsSubmenuWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { MoreOptionsVert, ChevronRight } from '@elliemae/ds-icons';\nimport {\n  StyledGlobalMenuItemWrapper,\n  StyledContentWrapper,\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledIconContainer,\n  StyledVerticalSeparator,\n  StyledEllipsisButton,\n} from '@elliemae/ds-menu-items-commons';\nimport { type DSMenuItemsSubmenuT, DSMenuItemsSubmenuPropTypesSchema } from './react-desc-prop-types.js';\nimport { useMenuItemsSubmenu } from './config/useMenuItemsSubmenu.js';\n\nconst DSMenuItemsSubmenu: React.ComponentType<DSMenuItemsSubmenuT.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps, eventHandlers } = useMenuItemsSubmenu(props);\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    isActive,\n    disabled,\n    applyAriaDisabled,\n    isSubmenuOpened,\n    rightAddon,\n    innerRef,\n    wrapperStyles,\n    optionsShouldHavePadding,\n    render: Render,\n    Dropdown,\n    dropdownProps: {\n      options,\n      openedSubmenus,\n      onSubmenuToggle,\n      selectedOptions,\n      onKeyDown,\n      onOptionClick,\n      onClickOutside,\n      minWidth,\n      maxHeight,\n    },\n  } = propsWithDefault;\n\n  // If we don't delay the opening of the poppers, the position will not be placed correctly\n  // That why we delay it for the next render using the useEffect hook\n  // TODO -- @carusox move this to utilities as a hook\n  const [delayedIsOpened, setDelayedIsOpened] = React.useState(false);\n  React.useEffect(() => {\n    setTimeout(() => setDelayedIsOpened(Boolean(isSubmenuOpened)));\n  }, [isSubmenuOpened]);\n\n  const gridLayout = React.useMemo(() => {\n    const cols = ['auto'];\n    if (secondaryLabel !== undefined) cols.push('min-content');\n    cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\n  // We need to exclude minWidth because we have already used it as a key value for the dropdown menu options.\n  // i dont think there is a workaround for this at the moment\n  // we need a complete refactor in how we build the submenus\n  // eslint-disable-next-line no-unused-vars\n  const { minWidth: customMinWidth, ...restXStyled } = xstyledProps;\n  // eslint-disable-next-line no-unused-vars\n  const { onMouseLeave, onMouseEnter, onMouseDown, ...restGlobalAttributes } = globalProps;\n\n  const { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick } = eventHandlers;\n\n  return (\n    <Dropdown\n      isOpened={delayedIsOpened}\n      options={options ?? []}\n      onOptionClick={onOptionClick}\n      startPlacementPreference=\"right-start\"\n      placementOrderPreference={['right-start', 'right-end', 'left-start', 'left-end']}\n      selectedOptions={selectedOptions}\n      openedSubmenus={openedSubmenus}\n      onSubmenuToggle={onSubmenuToggle}\n      onKeyDown={onKeyDown}\n      onClickOutside={onClickOutside}\n      customOffset={[-4, 1]}\n      wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n      as=\"li\"\n      role=\"option\"\n      minWidth={minWidth}\n      maxHeight={maxHeight}\n      aria-selected={isSubmenuOpened}\n      aria-describedby={`dropdownmenu-submenu-${dsId}`}\n      data-popover-label={label}\n      id={dsId}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      onMouseDown={onMouseDownHandler}\n      {...restGlobalAttributes}\n      {...restXStyled}\n    >\n      <StyledGlobalMenuItemWrapper\n        pr={0}\n        isSelected={isSubmenuOpened}\n        isActive={isActive}\n        onMouseEnter={onMouseEnterHandler}\n        onMouseLeave={onMouseLeaveHandler}\n        innerRef={innerRef}\n        disabled={disabled}\n        aria-disabled={applyAriaDisabled}\n        pl={optionsShouldHavePadding ? 40 : 16}\n        as={'div' as keyof JSX.IntrinsicElements}\n        data-type=\"submenu\"\n      >\n        {Render !== undefined ? (\n          <Render {...propsWithDefault} />\n        ) : (\n          <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n            <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n            {secondaryLabel !== undefined && (\n              <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n            )}\n            <StyledIconContainer>\n              <StyledVerticalSeparator />\n              {rightAddon === 'ellipsis' ? (\n                <StyledEllipsisButton\n                  tabIndex={-1}\n                  onClick={onEllipsisClick}\n                  disabled={disabled}\n                  applyAriaDisabled={applyAriaDisabled}\n                >\n                  <MoreOptionsVert\n                    className=\"ds-dropdown-menu-v2-more-options\"\n                    color={disabled || applyAriaDisabled ? ['neutral', '500'] : ['brand-primary', '600']}\n                    size=\"s\"\n                  />\n                </StyledEllipsisButton>\n              ) : (\n                <ChevronRight\n                  color={disabled || applyAriaDisabled ? ['neutral', '500'] : ['brand-primary', '600']}\n                  size=\"s\"\n                />\n              )}\n            </StyledIconContainer>\n          </StyledContentWrapper>\n        )}\n        <span id={`dropdownmenu-submenu-${dsId}`} style={{ display: 'none' }}>\n          submenu, to open this submenu press the Right Arrow key\n        </span>\n      </StyledGlobalMenuItemWrapper>\n    </Dropdown>\n  );\n};\n\nDSMenuItemsSubmenu.displayName = 'DSMenuItemSubmenu';\nconst DSMenuItemsSubmenuWithSchema = describe(DSMenuItemsSubmenu);\nDSMenuItemsSubmenuWithSchema.propTypes = DSMenuItemsSubmenuPropTypesSchema;\n\nexport { DSMenuItemsSubmenu, DSMenuItemsSubmenuWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/cjs/config/getChevronHandlers.js

@@ -39,10 +39,12 @@ const getChevronHandlers = ({
   onSubmenuClose,
   onMouseLeave,
   onMouseDown,
-  disabled
+  disabled,
+  applyAriaDisabled
 }) => {
   const timeoutRef = { current: null };
   const onMouseEnterHandler = (e) => {
+    if (applyAriaDisabled) return;
     if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
     else if (!isSubmenuOpened) onSubmenuOpen?.(e);
     timeoutRef.current = null;

package/dist/cjs/config/getChevronHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/getChevronHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { DSMenuItemsSubmenuT } from '../react-desc-prop-types.js';\n\n// what we are trying to do:\n//   onMouseEnter -> open submenu\n//   onMouseLeave -> close submenu\n//   onEllipsisClick -> we should not even invoke this handler, as the \"ellipsis\" should not even exist?\n\n// what are the \"challenges\" of the task:\n//  - the submenu close has an animation and we ideally want to be sure state changes after the animation is done\n//      (we do it via an hardcoded 300ms delay, this is know to cause issues in some cases)\n//  - \"what is open and what is closed\" state lives under ds-dropdownmenu,\n//      we manipulate it via \"onSubmenuOpen\" and \"onSubmenuClose\" callbacks\n//  - we have created the API in such a way that we implement a \"bridge\" and \"inversion of control\" pattern\n//      this requires extra care when handling the logic and designing the solution\n\n// important and relevant info:\n//  when this comment has been written,\n//    onSubmenuOpen coming from SingleWithSubmenuProps is forcing only one submenu to be open at a time internally\n//      the logic for this is implemented in ds-dropdownmenu,\n//         we had a bug in which we were invoking a stale callback,\n//            we monkeypatching it by ensuring the callback never changes\n//            in the future we should create code with \"hydraters\" to avoid this as per shuttle-v2\n\nexport const getChevronHandlers = ({\n  isSubmenuOpened,\n  onMouseEnter,\n  onSubmenuOpen,\n  onSubmenuClose,\n  onMouseLeave,\n  onMouseDown,\n  disabled,\n}: DSMenuItemsSubmenuT.InternalProps) => {\n  const timeoutRef: { current: NodeJS.Timeout | null } = { current: null };\n\n  const onMouseEnterHandler = (e: React.MouseEvent) => {\n    if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);\n    else if (!isSubmenuOpened) onSubmenuOpen?.(e);\n    timeoutRef.current = null;\n    onMouseEnter?.(e);\n  };\n\n  const onMouseLeaveHandler = (e: React.MouseEvent) => {\n    if (timeoutRef.current === null) {\n      timeoutRef.current = setTimeout(() => {\n        timeoutRef.current = null;\n        onSubmenuClose?.(e);\n      }, 300);\n    }\n    onMouseLeave?.(e);\n  };\n\n  const onMouseDownHandler = (e: React.MouseEvent) => {\n    if (disabled) return;\n    onMouseDown?.(e);\n  };\n\n  const onEllipsisClick = () => {\n    throw new Error('Invoking onEllipsisClick from chevron handlers... this should never happen');\n  };\n\n  return { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBhB,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyC;AACvC,QAAM,aAAiD,EAAE,SAAS,KAAK;AAEvE,QAAM,sBAAsB,CAAC,MAAwB;AACnD,QAAI,WAAW,YAAY,KAAM,cAAa,WAAW,OAAO;AAAA,aACvD,CAAC,gBAAiB,iBAAgB,CAAC;AAC5C,eAAW,UAAU;AACrB,mBAAe,CAAC;AAAA,EAClB;AAEA,QAAM,sBAAsB,CAAC,MAAwB;AACnD,QAAI,WAAW,YAAY,MAAM;AAC/B,iBAAW,UAAU,WAAW,MAAM;AACpC,mBAAW,UAAU;AACrB,yBAAiB,CAAC;AAAA,MACpB,GAAG,GAAG;AAAA,IACR;AACA,mBAAe,CAAC;AAAA,EAClB;AAEA,QAAM,qBAAqB,CAAC,MAAwB;AAClD,QAAI,SAAU;AACd,kBAAc,CAAC;AAAA,EACjB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,UAAM,IAAI,MAAM,4EAA4E;AAAA,EAC9F;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,oBAAoB,gBAAgB;AACzF;",
+  "sourcesContent": ["import type { DSMenuItemsSubmenuT } from '../react-desc-prop-types.js';\n\n// what we are trying to do:\n//   onMouseEnter -> open submenu\n//   onMouseLeave -> close submenu\n//   onEllipsisClick -> we should not even invoke this handler, as the \"ellipsis\" should not even exist?\n\n// what are the \"challenges\" of the task:\n//  - the submenu close has an animation and we ideally want to be sure state changes after the animation is done\n//      (we do it via an hardcoded 300ms delay, this is know to cause issues in some cases)\n//  - \"what is open and what is closed\" state lives under ds-dropdownmenu,\n//      we manipulate it via \"onSubmenuOpen\" and \"onSubmenuClose\" callbacks\n//  - we have created the API in such a way that we implement a \"bridge\" and \"inversion of control\" pattern\n//      this requires extra care when handling the logic and designing the solution\n\n// important and relevant info:\n//  when this comment has been written,\n//    onSubmenuOpen coming from SingleWithSubmenuProps is forcing only one submenu to be open at a time internally\n//      the logic for this is implemented in ds-dropdownmenu,\n//         we had a bug in which we were invoking a stale callback,\n//            we monkeypatching it by ensuring the callback never changes\n//            in the future we should create code with \"hydraters\" to avoid this as per shuttle-v2\n\nexport const getChevronHandlers = ({\n  isSubmenuOpened,\n  onMouseEnter,\n  onSubmenuOpen,\n  onSubmenuClose,\n  onMouseLeave,\n  onMouseDown,\n  disabled,\n  applyAriaDisabled,\n}: DSMenuItemsSubmenuT.InternalProps) => {\n  const timeoutRef: { current: NodeJS.Timeout | null } = { current: null };\n\n  const onMouseEnterHandler = (e: React.MouseEvent) => {\n    if (applyAriaDisabled) return;\n    if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);\n    else if (!isSubmenuOpened) onSubmenuOpen?.(e);\n    timeoutRef.current = null;\n    onMouseEnter?.(e);\n  };\n\n  const onMouseLeaveHandler = (e: React.MouseEvent) => {\n    if (timeoutRef.current === null) {\n      timeoutRef.current = setTimeout(() => {\n        timeoutRef.current = null;\n        onSubmenuClose?.(e);\n      }, 300);\n    }\n    onMouseLeave?.(e);\n  };\n\n  const onMouseDownHandler = (e: React.MouseEvent) => {\n    if (disabled) return;\n    onMouseDown?.(e);\n  };\n\n  const onEllipsisClick = () => {\n    throw new Error('Invoking onEllipsisClick from chevron handlers... this should never happen');\n  };\n\n  return { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBhB,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyC;AACvC,QAAM,aAAiD,EAAE,SAAS,KAAK;AAEvE,QAAM,sBAAsB,CAAC,MAAwB;AACnD,QAAI,kBAAmB;AACvB,QAAI,WAAW,YAAY,KAAM,cAAa,WAAW,OAAO;AAAA,aACvD,CAAC,gBAAiB,iBAAgB,CAAC;AAC5C,eAAW,UAAU;AACrB,mBAAe,CAAC;AAAA,EAClB;AAEA,QAAM,sBAAsB,CAAC,MAAwB;AACnD,QAAI,WAAW,YAAY,MAAM;AAC/B,iBAAW,UAAU,WAAW,MAAM;AACpC,mBAAW,UAAU;AACrB,yBAAiB,CAAC;AAAA,MACpB,GAAG,GAAG;AAAA,IACR;AACA,mBAAe,CAAC;AAAA,EAClB;AAEA,QAAM,qBAAqB,CAAC,MAAwB;AAClD,QAAI,SAAU;AACd,kBAAc,CAAC;AAAA,EACjB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,UAAM,IAAI,MAAM,4EAA4E;AAAA,EAC9F;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,oBAAoB,gBAAgB;AACzF;",
   "names": []
 }

package/dist/cjs/config/useMenuItemsSubmenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useMenuItemsSubmenu.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { type DSMenuItemsSubmenuT, DSMenuItemsSubmenuPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useGetSubmenuHandlers } from './useGetSubmenuHandlers.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\n\nexport interface MenuItemsSubmenuCTX {\n  propsWithDefault: DSMenuItemsSubmenuT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  eventHandlers: ReturnType<typeof useGetSubmenuHandlers>;\n}\n\nexport const useMenuItemsSubmenu = (propsFromUser: DSMenuItemsSubmenuT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSMenuItemsSubmenuT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSMenuItemsSubmenuPropTypes);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n\n  // some menu items use original prop from dsdropdownmenu or dscombobox\n  // We may want to review if this is required or makes sense, but for now we will keep it to avoid breaking changes\n  const sourceGlobalProps =\n    (propsWithDefault.original as unknown as DSMenuItemsSubmenuT.InternalProps) ?? propsWithDefault;\n\n  const globalProps = useGetGlobalAttributes<DSMenuItemsSubmenuT.InternalProps, HTMLDivElement, DSGridT.Props>(\n    sourceGlobalProps,\n  );\n\n  const xstyledProps = useGetXstyledProps(sourceGlobalProps);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const eventHandlers = useGetSubmenuHandlers(propsWithDefault);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      eventHandlers,\n    }),\n    [propsWithDefault, globalProps, xstyledProps, eventHandlers],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAAyF;AACzF,mCAAoF;AACpF,8BAAiC;AACjC,mCAAsC;AAU/B,MAAM,sBAAsB,CAAC,kBAA6C;AAI/E,QAAM,uBAAmB,sDAAgE,eAAe,yCAAY;AACpH,gDAAiB,kBAAkB,wDAA2B;AAO9D,QAAM,oBACH,iBAAiB,YAA6D;AAEjF,QAAM,kBAAc;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,mBAAe,4CAAmB,iBAAiB;AAKzD,QAAM,oBAAgB,oDAAsB,gBAAgB;AAE5D,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,cAAc,aAAa;AAAA,EAC7D;AACF;",
+  "sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { type DSMenuItemsSubmenuT, DSMenuItemsSubmenuPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useGetSubmenuHandlers } from './useGetSubmenuHandlers.js';\n\nexport interface MenuItemsSubmenuCTX {\n  propsWithDefault: DSMenuItemsSubmenuT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  eventHandlers: ReturnType<typeof useGetSubmenuHandlers>;\n}\n\nexport const useMenuItemsSubmenu = (propsFromUser: DSMenuItemsSubmenuT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSMenuItemsSubmenuT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSMenuItemsSubmenuPropTypes);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n\n  // some menu items use original prop from dsdropdownmenu or dscombobox\n  // We may want to review if this is required or makes sense, but for now we will keep it to avoid breaking changes\n  const sourceGlobalProps =\n    (propsWithDefault.original as unknown as DSMenuItemsSubmenuT.InternalProps) ?? propsWithDefault;\n\n  const globalProps = useGetGlobalAttributes<DSMenuItemsSubmenuT.InternalProps, HTMLDivElement, DSGridT.Props>(\n    sourceGlobalProps,\n  );\n\n  const xstyledProps = useGetXstyledProps(sourceGlobalProps);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const eventHandlers = useGetSubmenuHandlers(propsWithDefault);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      eventHandlers,\n    }),\n    [propsWithDefault, globalProps, xstyledProps, eventHandlers],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAAyF;AAEzF,mCAAoF;AACpF,8BAAiC;AACjC,mCAAsC;AAS/B,MAAM,sBAAsB,CAAC,kBAA6C;AAI/E,QAAM,uBAAmB,sDAAgE,eAAe,yCAAY;AACpH,gDAAiB,kBAAkB,wDAA2B;AAO9D,QAAM,oBACH,iBAAiB,YAA6D;AAEjF,QAAM,kBAAc;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,mBAAe,4CAAmB,iBAAiB;AAKzD,QAAM,oBAAgB,oDAAsB,gBAAgB;AAE5D,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,cAAc,aAAa;AAAA,EAC7D;AACF;",
   "names": ["React"]
 }

package/dist/cjs/react-desc-prop-types.js

@@ -41,6 +41,7 @@ const defaultProps = {
   label: "",
   isActive: false,
   disabled: false,
+  applyAriaDisabled: false,
   isSubmenuOpened: false,
   onSubmenuOpen: () => {
   },
@@ -115,7 +116,10 @@ const DSMenuItemsSubmenuPropTypes = {
       maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('The max height of the submenu.'),
     })
     */
-  dropdownProps: import_ds_props_helpers.PropTypes.object.description("The props to pass to the Dropdown component.")
+  dropdownProps: import_ds_props_helpers.PropTypes.object.description("The props to pass to the Dropdown component."),
+  applyAriaDisabled: import_ds_props_helpers.PropTypes.bool.description(
+    "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
+  ).defaultValue(false)
 };
 const DSMenuItemsSubmenuPropTypesSchema = DSMenuItemsSubmenuPropTypes;
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-duplicate-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport {\n  type DSMenuItemsCommonsT,\n  DSMenuItemsCommonsPropTypes,\n  DSMenuItemsCommonsDefaultProps,\n} from '@elliemae/ds-menu-items-commons';\nimport type React from 'react';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSMenuItemsSubmenuT {\n  // typescript inheritance has no syntax support for \"interfaces\", we have to use union types instead...\n  export type RequiredProps = DSMenuItemsCommonsT.RequiredProps;\n\n  export type DefaultProps = DSMenuItemsCommonsT.DefaultProps & {\n    label: string;\n    isActive: boolean;\n    disabled: boolean;\n    isSubmenuOpened: boolean;\n    onSubmenuOpen: React.MouseEventHandler;\n    rightAddon: 'ellipsis' | 'chevron';\n    optionsShouldHavePadding: boolean;\n    Dropdown: React.ComponentType<React.PropsWithChildren<DSMenuItemsSubmenuT.DefaultProps['dropdownProps']>>;\n    dropdownProps: {\n      options: unknown[];\n      onSubmenuToggle: (\n        nextOpenedSubmenus: Record<string, boolean>,\n        submenu: unknown,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      openedSubmenus: Record<string, boolean>;\n      selectedOptions: Record<string, boolean>;\n      onKeyDown: React.KeyboardEventHandler;\n      onOptionClick: (\n        nextSelectedOptions: Record<string, boolean>,\n        clickedOption: unknown,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      onClickOutside: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n      minWidth: SizingProps['minWidth'];\n      maxHeight: SizingProps['maxHeight'];\n      [key: string]: unknown;\n    };\n  };\n\n  export type OptionalProps = DSMenuItemsCommonsT.OptionalProps<DSMenuItemsSubmenuT.InternalProps> & {\n    secondaryLabel?: string;\n    value?: unknown;\n    onSubmenuClose?: React.MouseEventHandler;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n  };\n\n  // each single menu-item is in charge of spreading the GlobalAttributesT & XstyledProps\n  // they are NOT inherited from a common element from ds-menu-items-commons\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSMenuItemsSubmenuT.DefaultProps = {\n  ...DSMenuItemsCommonsDefaultProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSubmenuOpened: false,\n  onSubmenuOpen: () => {},\n  rightAddon: 'chevron',\n  optionsShouldHavePadding: false,\n  Dropdown: () => null,\n  dropdownProps: {\n    options: [],\n    onSubmenuToggle: () => {},\n    openedSubmenus: {},\n    selectedOptions: {},\n    onKeyDown: () => {},\n    onOptionClick: () => {},\n    onClickOutside: () => {},\n    minWidth: 'auto',\n    maxHeight: 'auto',\n  },\n};\n\nexport const DSMenuItemsSubmenuPropTypes: DSPropTypesSchema<DSMenuItemsSubmenuT.InternalProps> = {\n  // each single menu-item is in charge of spreading the GlobalAttributesT & XstyledProps\n  // they are NOT inherited from a common element from ds-menu-items-commons\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...DSMenuItemsCommonsPropTypes,\n\n  // TODO - add support to PropTypes.oneOf for typeof number\n  // currently PropTypes.oneOf([0, -1]) is not supported\n  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description(\n    'The tab index of the menu item. for WCAG 2.1 AA compliance only -1 and 0 are allowed.',\n  ),\n  label: PropTypes.string.description('The label of the menu item.'),\n  value: PropTypes.any.description('The value of the menu item.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.').defaultValue(defaultProps.isActive),\n  optionsShouldHavePadding: PropTypes.bool\n    .description('Whether the menu item should have padding. This is used in the context of a menu with options.')\n    .defaultValue(defaultProps.optionsShouldHavePadding),\n  secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n  isSubmenuOpened: PropTypes.bool\n    .description('Whether the submenu is opened or not.')\n    .defaultValue(defaultProps.isSubmenuOpened),\n  onSubmenuOpen: PropTypes.func.description('Callback fired when the user tries to open the submenu.'),\n  onSubmenuClose: PropTypes.func.description('Callback fired when the user tries to close the submenu.'),\n  rightAddon: PropTypes.oneOf(['ellipsis', 'chevron']).description(\n    'The visual element to display on the right side of the menu item.',\n  ),\n  Dropdown: PropTypes.func.description('The Dropdown component to use to render the submenu.'),\n  /* TODO - the validation detects \"empty\" even if the object is not empty...\n  we need to fix the validator for \"shape\"...\n\n  .shape({\n    options: PropTypes.arrayOf(PropTypes.any).description('The options to display in the submenu.'),\n    onSubmenuToggle: PropTypes.func\n      .description(\n        'Callback fired when the user tries to toggle the submenu. It receives the next opened submenus, the submenu and the event.',\n      )\n      .signature(\n        '((nextOpenedSubmenus: Record<string, boolean>, submenu: unknown, e: React.MouseEvent | React.KeyboardEvent) => void)',\n      ),\n    openedSubmenus: PropTypes.object.description('The opened submenus.'),\n    selectedOptions: PropTypes.object.description('The selected options.'),\n    onKeyDown: PropTypes.func.description('Callback fired when the user presses a key.'),\n    onOptionClick: PropTypes.func\n      .description(\n        'Callback fired when the user clicks on an option. It receives the next selected options, the clicked option and the event.',\n      )\n      .signature(\n        '((nextSelectedOptions: Record<string, boolean>, clickedOption: unknown, e: React.MouseEvent | React.KeyboardEvent) => void)',\n      ),\n    onClickOutside: PropTypes.func\n      .description('Callback fired when the user clicks outside the submenu.')\n      .signature('((e: MouseEvent | React.KeyboardEvent | TouchEvent) => void)'),\n    minWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('The min width of the submenu.'),\n    maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('The max height of the submenu.'),\n  })\n  */\n  dropdownProps: PropTypes.object.description('The props to pass to the Dropdown component.'),\n};\n\nexport const DSMenuItemsSubmenuPropTypesSchema =\n  DSMenuItemsSubmenuPropTypes as unknown as WeakValidationMap<DSMenuItemsSubmenuT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAAuE;AAEvE,mCAIO;AAuEA,MAAM,eAAiD;AAAA,EAC5D,GAAG;AAAA,EACH,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,YAAY;AAAA,EACZ,0BAA0B;AAAA,EAC1B,UAAU,MAAM;AAAA,EAChB,eAAe;AAAA,IACb,SAAS,CAAC;AAAA,IACV,iBAAiB,MAAM;AAAA,IAAC;AAAA,IACxB,gBAAgB,CAAC;AAAA,IACjB,iBAAiB,CAAC;AAAA,IAClB,WAAW,MAAM;AAAA,IAAC;AAAA,IAClB,eAAe,MAAM;AAAA,IAAC;AAAA,IACtB,gBAAgB,MAAM;AAAA,IAAC;AAAA,IACvB,UAAU;AAAA,IACV,WAAW;AAAA,EACb;AACF;AAEO,MAAM,8BAAoF;AAAA;AAAA;AAAA,EAG/F,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA;AAAA;AAAA,EAIH,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE;AAAA,IAClE;AAAA,EACF;AAAA,EACA,OAAO,kCAAU,OAAO,YAAY,6BAA6B;AAAA,EACjE,OAAO,kCAAU,IAAI,YAAY,6BAA6B;AAAA,EAC9D,UAAU,kCAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,aAAa,QAAQ;AAAA,EAC3G,0BAA0B,kCAAU,KACjC,YAAY,gGAAgG,EAC5G,aAAa,aAAa,wBAAwB;AAAA,EACrD,gBAAgB,kCAAU,OAAO,YAAY,uCAAuC;AAAA,EACpF,iBAAiB,kCAAU,KACxB,YAAY,uCAAuC,EACnD,aAAa,aAAa,eAAe;AAAA,EAC5C,eAAe,kCAAU,KAAK,YAAY,yDAAyD;AAAA,EACnG,gBAAgB,kCAAU,KAAK,YAAY,0DAA0D;AAAA,EACrG,YAAY,kCAAU,MAAM,CAAC,YAAY,SAAS,CAAC,EAAE;AAAA,IACnD;AAAA,EACF;AAAA,EACA,UAAU,kCAAU,KAAK,YAAY,sDAAsD;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;AAAA;AAAA;AAAA,EA8B3F,eAAe,kCAAU,OAAO,YAAY,8CAA8C;AAC5F;AAEO,MAAM,oCACX;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-duplicate-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport {\n  type DSMenuItemsCommonsT,\n  DSMenuItemsCommonsPropTypes,\n  DSMenuItemsCommonsDefaultProps,\n} from '@elliemae/ds-menu-items-commons';\nimport type React from 'react';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSMenuItemsSubmenuT {\n  // typescript inheritance has no syntax support for \"interfaces\", we have to use union types instead...\n  export type RequiredProps = DSMenuItemsCommonsT.RequiredProps;\n\n  export type DefaultProps = DSMenuItemsCommonsT.DefaultProps & {\n    label: string;\n    isActive: boolean;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    isSubmenuOpened: boolean;\n    onSubmenuOpen: React.MouseEventHandler;\n    rightAddon: 'ellipsis' | 'chevron';\n    optionsShouldHavePadding: boolean;\n    Dropdown: React.ComponentType<React.PropsWithChildren<DSMenuItemsSubmenuT.DefaultProps['dropdownProps']>>;\n    dropdownProps: {\n      options: unknown[];\n      onSubmenuToggle: (\n        nextOpenedSubmenus: Record<string, boolean>,\n        submenu: unknown,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      openedSubmenus: Record<string, boolean>;\n      selectedOptions: Record<string, boolean>;\n      onKeyDown: React.KeyboardEventHandler;\n      onOptionClick: (\n        nextSelectedOptions: Record<string, boolean>,\n        clickedOption: unknown,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      onClickOutside: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n      minWidth: SizingProps['minWidth'];\n      maxHeight: SizingProps['maxHeight'];\n      [key: string]: unknown;\n    };\n  };\n\n  export type OptionalProps = DSMenuItemsCommonsT.OptionalProps<DSMenuItemsSubmenuT.InternalProps> & {\n    secondaryLabel?: string;\n    value?: unknown;\n    onSubmenuClose?: React.MouseEventHandler;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n  };\n\n  // each single menu-item is in charge of spreading the GlobalAttributesT & XstyledProps\n  // they are NOT inherited from a common element from ds-menu-items-commons\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSMenuItemsSubmenuT.DefaultProps = {\n  ...DSMenuItemsCommonsDefaultProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  applyAriaDisabled: false,\n  isSubmenuOpened: false,\n  onSubmenuOpen: () => {},\n  rightAddon: 'chevron',\n  optionsShouldHavePadding: false,\n  Dropdown: () => null,\n  dropdownProps: {\n    options: [],\n    onSubmenuToggle: () => {},\n    openedSubmenus: {},\n    selectedOptions: {},\n    onKeyDown: () => {},\n    onOptionClick: () => {},\n    onClickOutside: () => {},\n    minWidth: 'auto',\n    maxHeight: 'auto',\n  },\n};\n\nexport const DSMenuItemsSubmenuPropTypes: DSPropTypesSchema<DSMenuItemsSubmenuT.InternalProps> = {\n  // each single menu-item is in charge of spreading the GlobalAttributesT & XstyledProps\n  // they are NOT inherited from a common element from ds-menu-items-commons\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...DSMenuItemsCommonsPropTypes,\n\n  // TODO - add support to PropTypes.oneOf for typeof number\n  // currently PropTypes.oneOf([0, -1]) is not supported\n  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description(\n    'The tab index of the menu item. for WCAG 2.1 AA compliance only -1 and 0 are allowed.',\n  ),\n  label: PropTypes.string.description('The label of the menu item.'),\n  value: PropTypes.any.description('The value of the menu item.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.').defaultValue(defaultProps.isActive),\n  optionsShouldHavePadding: PropTypes.bool\n    .description('Whether the menu item should have padding. This is used in the context of a menu with options.')\n    .defaultValue(defaultProps.optionsShouldHavePadding),\n  secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n  isSubmenuOpened: PropTypes.bool\n    .description('Whether the submenu is opened or not.')\n    .defaultValue(defaultProps.isSubmenuOpened),\n  onSubmenuOpen: PropTypes.func.description('Callback fired when the user tries to open the submenu.'),\n  onSubmenuClose: PropTypes.func.description('Callback fired when the user tries to close the submenu.'),\n  rightAddon: PropTypes.oneOf(['ellipsis', 'chevron']).description(\n    'The visual element to display on the right side of the menu item.',\n  ),\n  Dropdown: PropTypes.func.description('The Dropdown component to use to render the submenu.'),\n  /* TODO - the validation detects \"empty\" even if the object is not empty...\n  we need to fix the validator for \"shape\"...\n\n  .shape({\n    options: PropTypes.arrayOf(PropTypes.any).description('The options to display in the submenu.'),\n    onSubmenuToggle: PropTypes.func\n      .description(\n        'Callback fired when the user tries to toggle the submenu. It receives the next opened submenus, the submenu and the event.',\n      )\n      .signature(\n        '((nextOpenedSubmenus: Record<string, boolean>, submenu: unknown, e: React.MouseEvent | React.KeyboardEvent) => void)',\n      ),\n    openedSubmenus: PropTypes.object.description('The opened submenus.'),\n    selectedOptions: PropTypes.object.description('The selected options.'),\n    onKeyDown: PropTypes.func.description('Callback fired when the user presses a key.'),\n    onOptionClick: PropTypes.func\n      .description(\n        'Callback fired when the user clicks on an option. It receives the next selected options, the clicked option and the event.',\n      )\n      .signature(\n        '((nextSelectedOptions: Record<string, boolean>, clickedOption: unknown, e: React.MouseEvent | React.KeyboardEvent) => void)',\n      ),\n    onClickOutside: PropTypes.func\n      .description('Callback fired when the user clicks outside the submenu.')\n      .signature('((e: MouseEvent | React.KeyboardEvent | TouchEvent) => void)'),\n    minWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('The min width of the submenu.'),\n    maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('The max height of the submenu.'),\n  })\n  */\n  dropdownProps: PropTypes.object.description('The props to pass to the Dropdown component.'),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n};\n\nexport const DSMenuItemsSubmenuPropTypesSchema =\n  DSMenuItemsSubmenuPropTypes as unknown as WeakValidationMap<DSMenuItemsSubmenuT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAAuE;AAEvE,mCAIO;AAwEA,MAAM,eAAiD;AAAA,EAC5D,GAAG;AAAA,EACH,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,YAAY;AAAA,EACZ,0BAA0B;AAAA,EAC1B,UAAU,MAAM;AAAA,EAChB,eAAe;AAAA,IACb,SAAS,CAAC;AAAA,IACV,iBAAiB,MAAM;AAAA,IAAC;AAAA,IACxB,gBAAgB,CAAC;AAAA,IACjB,iBAAiB,CAAC;AAAA,IAClB,WAAW,MAAM;AAAA,IAAC;AAAA,IAClB,eAAe,MAAM;AAAA,IAAC;AAAA,IACtB,gBAAgB,MAAM;AAAA,IAAC;AAAA,IACvB,UAAU;AAAA,IACV,WAAW;AAAA,EACb;AACF;AAEO,MAAM,8BAAoF;AAAA;AAAA;AAAA,EAG/F,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA;AAAA;AAAA,EAIH,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE;AAAA,IAClE;AAAA,EACF;AAAA,EACA,OAAO,kCAAU,OAAO,YAAY,6BAA6B;AAAA,EACjE,OAAO,kCAAU,IAAI,YAAY,6BAA6B;AAAA,EAC9D,UAAU,kCAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,aAAa,QAAQ;AAAA,EAC3G,0BAA0B,kCAAU,KACjC,YAAY,gGAAgG,EAC5G,aAAa,aAAa,wBAAwB;AAAA,EACrD,gBAAgB,kCAAU,OAAO,YAAY,uCAAuC;AAAA,EACpF,iBAAiB,kCAAU,KACxB,YAAY,uCAAuC,EACnD,aAAa,aAAa,eAAe;AAAA,EAC5C,eAAe,kCAAU,KAAK,YAAY,yDAAyD;AAAA,EACnG,gBAAgB,kCAAU,KAAK,YAAY,0DAA0D;AAAA,EACrG,YAAY,kCAAU,MAAM,CAAC,YAAY,SAAS,CAAC,EAAE;AAAA,IACnD;AAAA,EACF;AAAA,EACA,UAAU,kCAAU,KAAK,YAAY,sDAAsD;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;AAAA;AAAA;AAAA,EA8B3F,eAAe,kCAAU,OAAO,YAAY,8CAA8C;AAAA,EAC1F,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;AAEO,MAAM,oCACX;",
   "names": []
 }

package/dist/esm/DSMenuItemsSubmenu.js

@@ -22,6 +22,7 @@ const DSMenuItemsSubmenu = (props) => {
     secondaryLabel,
     isActive,
     disabled,
+    applyAriaDisabled,
     isSubmenuOpened,
     rightAddon,
     innerRef,
@@ -92,6 +93,7 @@ const DSMenuItemsSubmenu = (props) => {
           onMouseLeave: onMouseLeaveHandler,
           innerRef,
           disabled,
+          "aria-disabled": applyAriaDisabled,
           pl: optionsShouldHavePadding ? 40 : 16,
           as: "div",
           "data-type": "submenu",
@@ -101,14 +103,29 @@ const DSMenuItemsSubmenu = (props) => {
               secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, { children: secondaryLabel }),
               /* @__PURE__ */ jsxs(StyledIconContainer, { children: [
                 /* @__PURE__ */ jsx(StyledVerticalSeparator, {}),
-                rightAddon === "ellipsis" ? /* @__PURE__ */ jsx(StyledEllipsisButton, { tabIndex: -1, onClick: onEllipsisClick, disabled, children: /* @__PURE__ */ jsx(
-                  MoreOptionsVert,
+                rightAddon === "ellipsis" ? /* @__PURE__ */ jsx(
+                  StyledEllipsisButton,
                   {
-                    className: "ds-dropdown-menu-v2-more-options",
-                    color: disabled ? ["neutral", "500"] : ["brand-primary", "600"],
+                    tabIndex: -1,
+                    onClick: onEllipsisClick,
+                    disabled,
+                    applyAriaDisabled,
+                    children: /* @__PURE__ */ jsx(
+                      MoreOptionsVert,
+                      {
+                        className: "ds-dropdown-menu-v2-more-options",
+                        color: disabled || applyAriaDisabled ? ["neutral", "500"] : ["brand-primary", "600"],
+                        size: "s"
+                      }
+                    )
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  ChevronRight,
+                  {
+                    color: disabled || applyAriaDisabled ? ["neutral", "500"] : ["brand-primary", "600"],
                     size: "s"
                   }
-                ) }) : /* @__PURE__ */ jsx(ChevronRight, { color: disabled ? ["neutral", "500"] : ["brand-primary", "600"], size: "s" })
+                )
               ] })
             ] }),
             /* @__PURE__ */ jsx("span", { id: `dropdownmenu-submenu-${dsId}`, style: { display: "none" }, children: "submenu, to open this submenu press the Right Arrow key" })

package/dist/esm/DSMenuItemsSubmenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSMenuItemsSubmenu.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { MoreOptionsVert, ChevronRight } from '@elliemae/ds-icons';\nimport {\n  StyledGlobalMenuItemWrapper,\n  StyledContentWrapper,\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledIconContainer,\n  StyledVerticalSeparator,\n  StyledEllipsisButton,\n} from '@elliemae/ds-menu-items-commons';\nimport { type DSMenuItemsSubmenuT, DSMenuItemsSubmenuPropTypesSchema } from './react-desc-prop-types.js';\nimport { useMenuItemsSubmenu } from './config/useMenuItemsSubmenu.js';\n\nconst DSMenuItemsSubmenu: React.ComponentType<DSMenuItemsSubmenuT.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps, eventHandlers } = useMenuItemsSubmenu(props);\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    isActive,\n    disabled,\n    isSubmenuOpened,\n    rightAddon,\n    innerRef,\n    wrapperStyles,\n    optionsShouldHavePadding,\n    render: Render,\n    Dropdown,\n    dropdownProps: {\n      options,\n      openedSubmenus,\n      onSubmenuToggle,\n      selectedOptions,\n      onKeyDown,\n      onOptionClick,\n      onClickOutside,\n      minWidth,\n      maxHeight,\n    },\n  } = propsWithDefault;\n\n  // If we don't delay the opening of the poppers, the position will not be placed correctly\n  // That why we delay it for the next render using the useEffect hook\n  // TODO -- @carusox move this to utilities as a hook\n  const [delayedIsOpened, setDelayedIsOpened] = React.useState(false);\n  React.useEffect(() => {\n    setTimeout(() => setDelayedIsOpened(Boolean(isSubmenuOpened)));\n  }, [isSubmenuOpened]);\n\n  const gridLayout = React.useMemo(() => {\n    const cols = ['auto'];\n    if (secondaryLabel !== undefined) cols.push('min-content');\n    cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\n  // We need to exclude minWidth because we have already used it as a key value for the dropdown menu options.\n  // i dont think there is a workaround for this at the moment\n  // we need a complete refactor in how we build the submenus\n  // eslint-disable-next-line no-unused-vars\n  const { minWidth: customMinWidth, ...restXStyled } = xstyledProps;\n  // eslint-disable-next-line no-unused-vars\n  const { onMouseLeave, onMouseEnter, onMouseDown, ...restGlobalAttributes } = globalProps;\n\n  const { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick } = eventHandlers;\n\n  return (\n    <Dropdown\n      isOpened={delayedIsOpened}\n      options={options ?? []}\n      onOptionClick={onOptionClick}\n      startPlacementPreference=\"right-start\"\n      placementOrderPreference={['right-start', 'right-end', 'left-start', 'left-end']}\n      selectedOptions={selectedOptions}\n      openedSubmenus={openedSubmenus}\n      onSubmenuToggle={onSubmenuToggle}\n      onKeyDown={onKeyDown}\n      onClickOutside={onClickOutside}\n      customOffset={[-4, 1]}\n      wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n      as=\"li\"\n      role=\"option\"\n      minWidth={minWidth}\n      maxHeight={maxHeight}\n      aria-selected={isSubmenuOpened}\n      aria-describedby={`dropdownmenu-submenu-${dsId}`}\n      data-popover-label={label}\n      id={dsId}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      onMouseDown={onMouseDownHandler}\n      {...restGlobalAttributes}\n      {...restXStyled}\n    >\n      <StyledGlobalMenuItemWrapper\n        pr={0}\n        isSelected={isSubmenuOpened}\n        isActive={isActive}\n        onMouseEnter={onMouseEnterHandler}\n        onMouseLeave={onMouseLeaveHandler}\n        innerRef={innerRef}\n        disabled={disabled}\n        pl={optionsShouldHavePadding ? 40 : 16}\n        as={'div' as keyof JSX.IntrinsicElements}\n        data-type=\"submenu\"\n      >\n        {Render !== undefined ? (\n          <Render {...propsWithDefault} />\n        ) : (\n          <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n            <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n            {secondaryLabel !== undefined && (\n              <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n            )}\n            <StyledIconContainer>\n              <StyledVerticalSeparator />\n              {rightAddon === 'ellipsis' ? (\n                <StyledEllipsisButton tabIndex={-1} onClick={onEllipsisClick} disabled={disabled}>\n                  <MoreOptionsVert\n                    className=\"ds-dropdown-menu-v2-more-options\"\n                    color={disabled ? ['neutral', '500'] : ['brand-primary', '600']}\n                    size=\"s\"\n                  />\n                </StyledEllipsisButton>\n              ) : (\n                <ChevronRight color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} size=\"s\" />\n              )}\n            </StyledIconContainer>\n          </StyledContentWrapper>\n        )}\n        <span id={`dropdownmenu-submenu-${dsId}`} style={{ display: 'none' }}>\n          submenu, to open this submenu press the Right Arrow key\n        </span>\n      </StyledGlobalMenuItemWrapper>\n    </Dropdown>\n  );\n};\n\nDSMenuItemsSubmenu.displayName = 'DSMenuItemSubmenu';\nconst DSMenuItemsSubmenuWithSchema = describe(DSMenuItemsSubmenu);\nDSMenuItemsSubmenuWithSchema.propTypes = DSMenuItemsSubmenuPropTypesSchema;\n\nexport { DSMenuItemsSubmenu, DSMenuItemsSubmenuWithSchema };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { MoreOptionsVert, ChevronRight } from '@elliemae/ds-icons';\nimport {\n  StyledGlobalMenuItemWrapper,\n  StyledContentWrapper,\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledIconContainer,\n  StyledVerticalSeparator,\n  StyledEllipsisButton,\n} from '@elliemae/ds-menu-items-commons';\nimport { type DSMenuItemsSubmenuT, DSMenuItemsSubmenuPropTypesSchema } from './react-desc-prop-types.js';\nimport { useMenuItemsSubmenu } from './config/useMenuItemsSubmenu.js';\n\nconst DSMenuItemsSubmenu: React.ComponentType<DSMenuItemsSubmenuT.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps, eventHandlers } = useMenuItemsSubmenu(props);\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    isActive,\n    disabled,\n    applyAriaDisabled,\n    isSubmenuOpened,\n    rightAddon,\n    innerRef,\n    wrapperStyles,\n    optionsShouldHavePadding,\n    render: Render,\n    Dropdown,\n    dropdownProps: {\n      options,\n      openedSubmenus,\n      onSubmenuToggle,\n      selectedOptions,\n      onKeyDown,\n      onOptionClick,\n      onClickOutside,\n      minWidth,\n      maxHeight,\n    },\n  } = propsWithDefault;\n\n  // If we don't delay the opening of the poppers, the position will not be placed correctly\n  // That why we delay it for the next render using the useEffect hook\n  // TODO -- @carusox move this to utilities as a hook\n  const [delayedIsOpened, setDelayedIsOpened] = React.useState(false);\n  React.useEffect(() => {\n    setTimeout(() => setDelayedIsOpened(Boolean(isSubmenuOpened)));\n  }, [isSubmenuOpened]);\n\n  const gridLayout = React.useMemo(() => {\n    const cols = ['auto'];\n    if (secondaryLabel !== undefined) cols.push('min-content');\n    cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\n  // We need to exclude minWidth because we have already used it as a key value for the dropdown menu options.\n  // i dont think there is a workaround for this at the moment\n  // we need a complete refactor in how we build the submenus\n  // eslint-disable-next-line no-unused-vars\n  const { minWidth: customMinWidth, ...restXStyled } = xstyledProps;\n  // eslint-disable-next-line no-unused-vars\n  const { onMouseLeave, onMouseEnter, onMouseDown, ...restGlobalAttributes } = globalProps;\n\n  const { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick } = eventHandlers;\n\n  return (\n    <Dropdown\n      isOpened={delayedIsOpened}\n      options={options ?? []}\n      onOptionClick={onOptionClick}\n      startPlacementPreference=\"right-start\"\n      placementOrderPreference={['right-start', 'right-end', 'left-start', 'left-end']}\n      selectedOptions={selectedOptions}\n      openedSubmenus={openedSubmenus}\n      onSubmenuToggle={onSubmenuToggle}\n      onKeyDown={onKeyDown}\n      onClickOutside={onClickOutside}\n      customOffset={[-4, 1]}\n      wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n      as=\"li\"\n      role=\"option\"\n      minWidth={minWidth}\n      maxHeight={maxHeight}\n      aria-selected={isSubmenuOpened}\n      aria-describedby={`dropdownmenu-submenu-${dsId}`}\n      data-popover-label={label}\n      id={dsId}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      onMouseDown={onMouseDownHandler}\n      {...restGlobalAttributes}\n      {...restXStyled}\n    >\n      <StyledGlobalMenuItemWrapper\n        pr={0}\n        isSelected={isSubmenuOpened}\n        isActive={isActive}\n        onMouseEnter={onMouseEnterHandler}\n        onMouseLeave={onMouseLeaveHandler}\n        innerRef={innerRef}\n        disabled={disabled}\n        aria-disabled={applyAriaDisabled}\n        pl={optionsShouldHavePadding ? 40 : 16}\n        as={'div' as keyof JSX.IntrinsicElements}\n        data-type=\"submenu\"\n      >\n        {Render !== undefined ? (\n          <Render {...propsWithDefault} />\n        ) : (\n          <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n            <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n            {secondaryLabel !== undefined && (\n              <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n            )}\n            <StyledIconContainer>\n              <StyledVerticalSeparator />\n              {rightAddon === 'ellipsis' ? (\n                <StyledEllipsisButton\n                  tabIndex={-1}\n                  onClick={onEllipsisClick}\n                  disabled={disabled}\n                  applyAriaDisabled={applyAriaDisabled}\n                >\n                  <MoreOptionsVert\n                    className=\"ds-dropdown-menu-v2-more-options\"\n                    color={disabled || applyAriaDisabled ? ['neutral', '500'] : ['brand-primary', '600']}\n                    size=\"s\"\n                  />\n                </StyledEllipsisButton>\n              ) : (\n                <ChevronRight\n                  color={disabled || applyAriaDisabled ? ['neutral', '500'] : ['brand-primary', '600']}\n                  size=\"s\"\n                />\n              )}\n            </StyledIconContainer>\n          </StyledContentWrapper>\n        )}\n        <span id={`dropdownmenu-submenu-${dsId}`} style={{ display: 'none' }}>\n          submenu, to open this submenu press the Right Arrow key\n        </span>\n      </StyledGlobalMenuItemWrapper>\n    </Dropdown>\n  );\n};\n\nDSMenuItemsSubmenu.displayName = 'DSMenuItemSubmenu';\nconst DSMenuItemsSubmenuWithSchema = describe(DSMenuItemsSubmenu);\nDSMenuItemsSubmenuWithSchema.propTypes = DSMenuItemsSubmenuPropTypesSchema;\n\nexport { DSMenuItemsSubmenu, DSMenuItemsSubmenuWithSchema };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/config/getChevronHandlers.js

@@ -6,10 +6,12 @@ const getChevronHandlers = ({
   onSubmenuClose,
   onMouseLeave,
   onMouseDown,
-  disabled
+  disabled,
+  applyAriaDisabled
 }) => {
   const timeoutRef = { current: null };
   const onMouseEnterHandler = (e) => {
+    if (applyAriaDisabled) return;
     if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
     else if (!isSubmenuOpened) onSubmenuOpen?.(e);
     timeoutRef.current = null;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/getChevronHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSMenuItemsSubmenuT } from '../react-desc-prop-types.js';\n\n// what we are trying to do:\n//   onMouseEnter -> open submenu\n//   onMouseLeave -> close submenu\n//   onEllipsisClick -> we should not even invoke this handler, as the \"ellipsis\" should not even exist?\n\n// what are the \"challenges\" of the task:\n//  - the submenu close has an animation and we ideally want to be sure state changes after the animation is done\n//      (we do it via an hardcoded 300ms delay, this is know to cause issues in some cases)\n//  - \"what is open and what is closed\" state lives under ds-dropdownmenu,\n//      we manipulate it via \"onSubmenuOpen\" and \"onSubmenuClose\" callbacks\n//  - we have created the API in such a way that we implement a \"bridge\" and \"inversion of control\" pattern\n//      this requires extra care when handling the logic and designing the solution\n\n// important and relevant info:\n//  when this comment has been written,\n//    onSubmenuOpen coming from SingleWithSubmenuProps is forcing only one submenu to be open at a time internally\n//      the logic for this is implemented in ds-dropdownmenu,\n//         we had a bug in which we were invoking a stale callback,\n//            we monkeypatching it by ensuring the callback never changes\n//            in the future we should create code with \"hydraters\" to avoid this as per shuttle-v2\n\nexport const getChevronHandlers = ({\n  isSubmenuOpened,\n  onMouseEnter,\n  onSubmenuOpen,\n  onSubmenuClose,\n  onMouseLeave,\n  onMouseDown,\n  disabled,\n}: DSMenuItemsSubmenuT.InternalProps) => {\n  const timeoutRef: { current: NodeJS.Timeout | null } = { current: null };\n\n  const onMouseEnterHandler = (e: React.MouseEvent) => {\n    if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);\n    else if (!isSubmenuOpened) onSubmenuOpen?.(e);\n    timeoutRef.current = null;\n    onMouseEnter?.(e);\n  };\n\n  const onMouseLeaveHandler = (e: React.MouseEvent) => {\n    if (timeoutRef.current === null) {\n      timeoutRef.current = setTimeout(() => {\n        timeoutRef.current = null;\n        onSubmenuClose?.(e);\n      }, 300);\n    }\n    onMouseLeave?.(e);\n  };\n\n  const onMouseDownHandler = (e: React.MouseEvent) => {\n    if (disabled) return;\n    onMouseDown?.(e);\n  };\n\n  const onEllipsisClick = () => {\n    throw new Error('Invoking onEllipsisClick from chevron handlers... this should never happen');\n  };\n\n  return { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACuBhB,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyC;AACvC,QAAM,aAAiD,EAAE,SAAS,KAAK;AAEvE,QAAM,sBAAsB,CAAC,MAAwB;AACnD,QAAI,WAAW,YAAY,KAAM,cAAa,WAAW,OAAO;AAAA,aACvD,CAAC,gBAAiB,iBAAgB,CAAC;AAC5C,eAAW,UAAU;AACrB,mBAAe,CAAC;AAAA,EAClB;AAEA,QAAM,sBAAsB,CAAC,MAAwB;AACnD,QAAI,WAAW,YAAY,MAAM;AAC/B,iBAAW,UAAU,WAAW,MAAM;AACpC,mBAAW,UAAU;AACrB,yBAAiB,CAAC;AAAA,MACpB,GAAG,GAAG;AAAA,IACR;AACA,mBAAe,CAAC;AAAA,EAClB;AAEA,QAAM,qBAAqB,CAAC,MAAwB;AAClD,QAAI,SAAU;AACd,kBAAc,CAAC;AAAA,EACjB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,UAAM,IAAI,MAAM,4EAA4E;AAAA,EAC9F;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,oBAAoB,gBAAgB;AACzF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSMenuItemsSubmenuT } from '../react-desc-prop-types.js';\n\n// what we are trying to do:\n//   onMouseEnter -> open submenu\n//   onMouseLeave -> close submenu\n//   onEllipsisClick -> we should not even invoke this handler, as the \"ellipsis\" should not even exist?\n\n// what are the \"challenges\" of the task:\n//  - the submenu close has an animation and we ideally want to be sure state changes after the animation is done\n//      (we do it via an hardcoded 300ms delay, this is know to cause issues in some cases)\n//  - \"what is open and what is closed\" state lives under ds-dropdownmenu,\n//      we manipulate it via \"onSubmenuOpen\" and \"onSubmenuClose\" callbacks\n//  - we have created the API in such a way that we implement a \"bridge\" and \"inversion of control\" pattern\n//      this requires extra care when handling the logic and designing the solution\n\n// important and relevant info:\n//  when this comment has been written,\n//    onSubmenuOpen coming from SingleWithSubmenuProps is forcing only one submenu to be open at a time internally\n//      the logic for this is implemented in ds-dropdownmenu,\n//         we had a bug in which we were invoking a stale callback,\n//            we monkeypatching it by ensuring the callback never changes\n//            in the future we should create code with \"hydraters\" to avoid this as per shuttle-v2\n\nexport const getChevronHandlers = ({\n  isSubmenuOpened,\n  onMouseEnter,\n  onSubmenuOpen,\n  onSubmenuClose,\n  onMouseLeave,\n  onMouseDown,\n  disabled,\n  applyAriaDisabled,\n}: DSMenuItemsSubmenuT.InternalProps) => {\n  const timeoutRef: { current: NodeJS.Timeout | null } = { current: null };\n\n  const onMouseEnterHandler = (e: React.MouseEvent) => {\n    if (applyAriaDisabled) return;\n    if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);\n    else if (!isSubmenuOpened) onSubmenuOpen?.(e);\n    timeoutRef.current = null;\n    onMouseEnter?.(e);\n  };\n\n  const onMouseLeaveHandler = (e: React.MouseEvent) => {\n    if (timeoutRef.current === null) {\n      timeoutRef.current = setTimeout(() => {\n        timeoutRef.current = null;\n        onSubmenuClose?.(e);\n      }, 300);\n    }\n    onMouseLeave?.(e);\n  };\n\n  const onMouseDownHandler = (e: React.MouseEvent) => {\n    if (disabled) return;\n    onMouseDown?.(e);\n  };\n\n  const onEllipsisClick = () => {\n    throw new Error('Invoking onEllipsisClick from chevron handlers... this should never happen');\n  };\n\n  return { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuBhB,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyC;AACvC,QAAM,aAAiD,EAAE,SAAS,KAAK;AAEvE,QAAM,sBAAsB,CAAC,MAAwB;AACnD,QAAI,kBAAmB;AACvB,QAAI,WAAW,YAAY,KAAM,cAAa,WAAW,OAAO;AAAA,aACvD,CAAC,gBAAiB,iBAAgB,CAAC;AAC5C,eAAW,UAAU;AACrB,mBAAe,CAAC;AAAA,EAClB;AAEA,QAAM,sBAAsB,CAAC,MAAwB;AACnD,QAAI,WAAW,YAAY,MAAM;AAC/B,iBAAW,UAAU,WAAW,MAAM;AACpC,mBAAW,UAAU;AACrB,yBAAiB,CAAC;AAAA,MACpB,GAAG,GAAG;AAAA,IACR;AACA,mBAAe,CAAC;AAAA,EAClB;AAEA,QAAM,qBAAqB,CAAC,MAAwB;AAClD,QAAI,SAAU;AACd,kBAAc,CAAC;AAAA,EACjB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,UAAM,IAAI,MAAM,4EAA4E;AAAA,EAC9F;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,oBAAoB,gBAAgB;AACzF;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useMenuItemsSubmenu.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { type DSMenuItemsSubmenuT, DSMenuItemsSubmenuPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useGetSubmenuHandlers } from './useGetSubmenuHandlers.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\n\nexport interface MenuItemsSubmenuCTX {\n  propsWithDefault: DSMenuItemsSubmenuT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  eventHandlers: ReturnType<typeof useGetSubmenuHandlers>;\n}\n\nexport const useMenuItemsSubmenu = (propsFromUser: DSMenuItemsSubmenuT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSMenuItemsSubmenuT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSMenuItemsSubmenuPropTypes);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n\n  // some menu items use original prop from dsdropdownmenu or dscombobox\n  // We may want to review if this is required or makes sense, but for now we will keep it to avoid breaking changes\n  const sourceGlobalProps =\n    (propsWithDefault.original as unknown as DSMenuItemsSubmenuT.InternalProps) ?? propsWithDefault;\n\n  const globalProps = useGetGlobalAttributes<DSMenuItemsSubmenuT.InternalProps, HTMLDivElement, DSGridT.Props>(\n    sourceGlobalProps,\n  );\n\n  const xstyledProps = useGetXstyledProps(sourceGlobalProps);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const eventHandlers = useGetSubmenuHandlers(propsWithDefault);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      eventHandlers,\n    }),\n    [propsWithDefault, globalProps, xstyledProps, eventHandlers],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,SAAmC,6BAA6B,oBAAoB;AACpF,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AAU/B,MAAM,sBAAsB,CAAC,kBAA6C;AAI/E,QAAM,mBAAmB,6BAAgE,eAAe,YAAY;AACpH,mBAAiB,kBAAkB,2BAA2B;AAO9D,QAAM,oBACH,iBAAiB,YAA6D;AAEjF,QAAM,cAAc;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,eAAe,mBAAmB,iBAAiB;AAKzD,QAAM,gBAAgB,sBAAsB,gBAAgB;AAE5D,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,cAAc,aAAa;AAAA,EAC7D;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { type DSMenuItemsSubmenuT, DSMenuItemsSubmenuPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useGetSubmenuHandlers } from './useGetSubmenuHandlers.js';\n\nexport interface MenuItemsSubmenuCTX {\n  propsWithDefault: DSMenuItemsSubmenuT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  eventHandlers: ReturnType<typeof useGetSubmenuHandlers>;\n}\n\nexport const useMenuItemsSubmenu = (propsFromUser: DSMenuItemsSubmenuT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSMenuItemsSubmenuT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSMenuItemsSubmenuPropTypes);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n\n  // some menu items use original prop from dsdropdownmenu or dscombobox\n  // We may want to review if this is required or makes sense, but for now we will keep it to avoid breaking changes\n  const sourceGlobalProps =\n    (propsWithDefault.original as unknown as DSMenuItemsSubmenuT.InternalProps) ?? propsWithDefault;\n\n  const globalProps = useGetGlobalAttributes<DSMenuItemsSubmenuT.InternalProps, HTMLDivElement, DSGridT.Props>(\n    sourceGlobalProps,\n  );\n\n  const xstyledProps = useGetXstyledProps(sourceGlobalProps);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const eventHandlers = useGetSubmenuHandlers(propsWithDefault);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      eventHandlers,\n    }),\n    [propsWithDefault, globalProps, xstyledProps, eventHandlers],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,wBAAwB,oBAAoB,oCAAoC;AAEzF,SAAmC,6BAA6B,oBAAoB;AACpF,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AAS/B,MAAM,sBAAsB,CAAC,kBAA6C;AAI/E,QAAM,mBAAmB,6BAAgE,eAAe,YAAY;AACpH,mBAAiB,kBAAkB,2BAA2B;AAO9D,QAAM,oBACH,iBAAiB,YAA6D;AAEjF,QAAM,cAAc;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,eAAe,mBAAmB,iBAAiB;AAKzD,QAAM,gBAAgB,sBAAsB,gBAAgB;AAE5D,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,cAAc,aAAa;AAAA,EAC7D;AACF;",
   "names": ["React"]
 }

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

@@ -9,6 +9,7 @@ const defaultProps = {
   label: "",
   isActive: false,
   disabled: false,
+  applyAriaDisabled: false,
   isSubmenuOpened: false,
   onSubmenuOpen: () => {
   },
@@ -83,7 +84,10 @@ const DSMenuItemsSubmenuPropTypes = {
       maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('The max height of the submenu.'),
     })
     */
-  dropdownProps: PropTypes.object.description("The props to pass to the Dropdown component.")
+  dropdownProps: PropTypes.object.description("The props to pass to the Dropdown component."),
+  applyAriaDisabled: PropTypes.bool.description(
+    "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
+  ).defaultValue(false)
 };
 const DSMenuItemsSubmenuPropTypesSchema = DSMenuItemsSubmenuPropTypes;
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-duplicate-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport {\n  type DSMenuItemsCommonsT,\n  DSMenuItemsCommonsPropTypes,\n  DSMenuItemsCommonsDefaultProps,\n} from '@elliemae/ds-menu-items-commons';\nimport type React from 'react';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSMenuItemsSubmenuT {\n  // typescript inheritance has no syntax support for \"interfaces\", we have to use union types instead...\n  export type RequiredProps = DSMenuItemsCommonsT.RequiredProps;\n\n  export type DefaultProps = DSMenuItemsCommonsT.DefaultProps & {\n    label: string;\n    isActive: boolean;\n    disabled: boolean;\n    isSubmenuOpened: boolean;\n    onSubmenuOpen: React.MouseEventHandler;\n    rightAddon: 'ellipsis' | 'chevron';\n    optionsShouldHavePadding: boolean;\n    Dropdown: React.ComponentType<React.PropsWithChildren<DSMenuItemsSubmenuT.DefaultProps['dropdownProps']>>;\n    dropdownProps: {\n      options: unknown[];\n      onSubmenuToggle: (\n        nextOpenedSubmenus: Record<string, boolean>,\n        submenu: unknown,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      openedSubmenus: Record<string, boolean>;\n      selectedOptions: Record<string, boolean>;\n      onKeyDown: React.KeyboardEventHandler;\n      onOptionClick: (\n        nextSelectedOptions: Record<string, boolean>,\n        clickedOption: unknown,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      onClickOutside: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n      minWidth: SizingProps['minWidth'];\n      maxHeight: SizingProps['maxHeight'];\n      [key: string]: unknown;\n    };\n  };\n\n  export type OptionalProps = DSMenuItemsCommonsT.OptionalProps<DSMenuItemsSubmenuT.InternalProps> & {\n    secondaryLabel?: string;\n    value?: unknown;\n    onSubmenuClose?: React.MouseEventHandler;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n  };\n\n  // each single menu-item is in charge of spreading the GlobalAttributesT & XstyledProps\n  // they are NOT inherited from a common element from ds-menu-items-commons\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSMenuItemsSubmenuT.DefaultProps = {\n  ...DSMenuItemsCommonsDefaultProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSubmenuOpened: false,\n  onSubmenuOpen: () => {},\n  rightAddon: 'chevron',\n  optionsShouldHavePadding: false,\n  Dropdown: () => null,\n  dropdownProps: {\n    options: [],\n    onSubmenuToggle: () => {},\n    openedSubmenus: {},\n    selectedOptions: {},\n    onKeyDown: () => {},\n    onOptionClick: () => {},\n    onClickOutside: () => {},\n    minWidth: 'auto',\n    maxHeight: 'auto',\n  },\n};\n\nexport const DSMenuItemsSubmenuPropTypes: DSPropTypesSchema<DSMenuItemsSubmenuT.InternalProps> = {\n  // each single menu-item is in charge of spreading the GlobalAttributesT & XstyledProps\n  // they are NOT inherited from a common element from ds-menu-items-commons\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...DSMenuItemsCommonsPropTypes,\n\n  // TODO - add support to PropTypes.oneOf for typeof number\n  // currently PropTypes.oneOf([0, -1]) is not supported\n  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description(\n    'The tab index of the menu item. for WCAG 2.1 AA compliance only -1 and 0 are allowed.',\n  ),\n  label: PropTypes.string.description('The label of the menu item.'),\n  value: PropTypes.any.description('The value of the menu item.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.').defaultValue(defaultProps.isActive),\n  optionsShouldHavePadding: PropTypes.bool\n    .description('Whether the menu item should have padding. This is used in the context of a menu with options.')\n    .defaultValue(defaultProps.optionsShouldHavePadding),\n  secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n  isSubmenuOpened: PropTypes.bool\n    .description('Whether the submenu is opened or not.')\n    .defaultValue(defaultProps.isSubmenuOpened),\n  onSubmenuOpen: PropTypes.func.description('Callback fired when the user tries to open the submenu.'),\n  onSubmenuClose: PropTypes.func.description('Callback fired when the user tries to close the submenu.'),\n  rightAddon: PropTypes.oneOf(['ellipsis', 'chevron']).description(\n    'The visual element to display on the right side of the menu item.',\n  ),\n  Dropdown: PropTypes.func.description('The Dropdown component to use to render the submenu.'),\n  /* TODO - the validation detects \"empty\" even if the object is not empty...\n  we need to fix the validator for \"shape\"...\n\n  .shape({\n    options: PropTypes.arrayOf(PropTypes.any).description('The options to display in the submenu.'),\n    onSubmenuToggle: PropTypes.func\n      .description(\n        'Callback fired when the user tries to toggle the submenu. It receives the next opened submenus, the submenu and the event.',\n      )\n      .signature(\n        '((nextOpenedSubmenus: Record<string, boolean>, submenu: unknown, e: React.MouseEvent | React.KeyboardEvent) => void)',\n      ),\n    openedSubmenus: PropTypes.object.description('The opened submenus.'),\n    selectedOptions: PropTypes.object.description('The selected options.'),\n    onKeyDown: PropTypes.func.description('Callback fired when the user presses a key.'),\n    onOptionClick: PropTypes.func\n      .description(\n        'Callback fired when the user clicks on an option. It receives the next selected options, the clicked option and the event.',\n      )\n      .signature(\n        '((nextSelectedOptions: Record<string, boolean>, clickedOption: unknown, e: React.MouseEvent | React.KeyboardEvent) => void)',\n      ),\n    onClickOutside: PropTypes.func\n      .description('Callback fired when the user clicks outside the submenu.')\n      .signature('((e: MouseEvent | React.KeyboardEvent | TouchEvent) => void)'),\n    minWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('The min width of the submenu.'),\n    maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('The max height of the submenu.'),\n  })\n  */\n  dropdownProps: PropTypes.object.description('The props to pass to the Dropdown component.'),\n};\n\nexport const DSMenuItemsSubmenuPropTypesSchema =\n  DSMenuItemsSubmenuPropTypes as unknown as WeakValidationMap<DSMenuItemsSubmenuT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW,2BAA2B,wBAAwB;AAEvE;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AAuEA,MAAM,eAAiD;AAAA,EAC5D,GAAG;AAAA,EACH,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,YAAY;AAAA,EACZ,0BAA0B;AAAA,EAC1B,UAAU,MAAM;AAAA,EAChB,eAAe;AAAA,IACb,SAAS,CAAC;AAAA,IACV,iBAAiB,MAAM;AAAA,IAAC;AAAA,IACxB,gBAAgB,CAAC;AAAA,IACjB,iBAAiB,CAAC;AAAA,IAClB,WAAW,MAAM;AAAA,IAAC;AAAA,IAClB,eAAe,MAAM;AAAA,IAAC;AAAA,IACtB,gBAAgB,MAAM;AAAA,IAAC;AAAA,IACvB,UAAU;AAAA,IACV,WAAW;AAAA,EACb;AACF;AAEO,MAAM,8BAAoF;AAAA;AAAA;AAAA,EAG/F,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA;AAAA;AAAA,EAIH,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE;AAAA,IAClE;AAAA,EACF;AAAA,EACA,OAAO,UAAU,OAAO,YAAY,6BAA6B;AAAA,EACjE,OAAO,UAAU,IAAI,YAAY,6BAA6B;AAAA,EAC9D,UAAU,UAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,aAAa,QAAQ;AAAA,EAC3G,0BAA0B,UAAU,KACjC,YAAY,gGAAgG,EAC5G,aAAa,aAAa,wBAAwB;AAAA,EACrD,gBAAgB,UAAU,OAAO,YAAY,uCAAuC;AAAA,EACpF,iBAAiB,UAAU,KACxB,YAAY,uCAAuC,EACnD,aAAa,aAAa,eAAe;AAAA,EAC5C,eAAe,UAAU,KAAK,YAAY,yDAAyD;AAAA,EACnG,gBAAgB,UAAU,KAAK,YAAY,0DAA0D;AAAA,EACrG,YAAY,UAAU,MAAM,CAAC,YAAY,SAAS,CAAC,EAAE;AAAA,IACnD;AAAA,EACF;AAAA,EACA,UAAU,UAAU,KAAK,YAAY,sDAAsD;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;AAAA;AAAA;AAAA,EA8B3F,eAAe,UAAU,OAAO,YAAY,8CAA8C;AAC5F;AAEO,MAAM,oCACX;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-duplicate-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport {\n  type DSMenuItemsCommonsT,\n  DSMenuItemsCommonsPropTypes,\n  DSMenuItemsCommonsDefaultProps,\n} from '@elliemae/ds-menu-items-commons';\nimport type React from 'react';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSMenuItemsSubmenuT {\n  // typescript inheritance has no syntax support for \"interfaces\", we have to use union types instead...\n  export type RequiredProps = DSMenuItemsCommonsT.RequiredProps;\n\n  export type DefaultProps = DSMenuItemsCommonsT.DefaultProps & {\n    label: string;\n    isActive: boolean;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    isSubmenuOpened: boolean;\n    onSubmenuOpen: React.MouseEventHandler;\n    rightAddon: 'ellipsis' | 'chevron';\n    optionsShouldHavePadding: boolean;\n    Dropdown: React.ComponentType<React.PropsWithChildren<DSMenuItemsSubmenuT.DefaultProps['dropdownProps']>>;\n    dropdownProps: {\n      options: unknown[];\n      onSubmenuToggle: (\n        nextOpenedSubmenus: Record<string, boolean>,\n        submenu: unknown,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      openedSubmenus: Record<string, boolean>;\n      selectedOptions: Record<string, boolean>;\n      onKeyDown: React.KeyboardEventHandler;\n      onOptionClick: (\n        nextSelectedOptions: Record<string, boolean>,\n        clickedOption: unknown,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      onClickOutside: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n      minWidth: SizingProps['minWidth'];\n      maxHeight: SizingProps['maxHeight'];\n      [key: string]: unknown;\n    };\n  };\n\n  export type OptionalProps = DSMenuItemsCommonsT.OptionalProps<DSMenuItemsSubmenuT.InternalProps> & {\n    secondaryLabel?: string;\n    value?: unknown;\n    onSubmenuClose?: React.MouseEventHandler;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n  };\n\n  // each single menu-item is in charge of spreading the GlobalAttributesT & XstyledProps\n  // they are NOT inherited from a common element from ds-menu-items-commons\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSMenuItemsSubmenuT.DefaultProps = {\n  ...DSMenuItemsCommonsDefaultProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  applyAriaDisabled: false,\n  isSubmenuOpened: false,\n  onSubmenuOpen: () => {},\n  rightAddon: 'chevron',\n  optionsShouldHavePadding: false,\n  Dropdown: () => null,\n  dropdownProps: {\n    options: [],\n    onSubmenuToggle: () => {},\n    openedSubmenus: {},\n    selectedOptions: {},\n    onKeyDown: () => {},\n    onOptionClick: () => {},\n    onClickOutside: () => {},\n    minWidth: 'auto',\n    maxHeight: 'auto',\n  },\n};\n\nexport const DSMenuItemsSubmenuPropTypes: DSPropTypesSchema<DSMenuItemsSubmenuT.InternalProps> = {\n  // each single menu-item is in charge of spreading the GlobalAttributesT & XstyledProps\n  // they are NOT inherited from a common element from ds-menu-items-commons\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...DSMenuItemsCommonsPropTypes,\n\n  // TODO - add support to PropTypes.oneOf for typeof number\n  // currently PropTypes.oneOf([0, -1]) is not supported\n  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description(\n    'The tab index of the menu item. for WCAG 2.1 AA compliance only -1 and 0 are allowed.',\n  ),\n  label: PropTypes.string.description('The label of the menu item.'),\n  value: PropTypes.any.description('The value of the menu item.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.').defaultValue(defaultProps.isActive),\n  optionsShouldHavePadding: PropTypes.bool\n    .description('Whether the menu item should have padding. This is used in the context of a menu with options.')\n    .defaultValue(defaultProps.optionsShouldHavePadding),\n  secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n  isSubmenuOpened: PropTypes.bool\n    .description('Whether the submenu is opened or not.')\n    .defaultValue(defaultProps.isSubmenuOpened),\n  onSubmenuOpen: PropTypes.func.description('Callback fired when the user tries to open the submenu.'),\n  onSubmenuClose: PropTypes.func.description('Callback fired when the user tries to close the submenu.'),\n  rightAddon: PropTypes.oneOf(['ellipsis', 'chevron']).description(\n    'The visual element to display on the right side of the menu item.',\n  ),\n  Dropdown: PropTypes.func.description('The Dropdown component to use to render the submenu.'),\n  /* TODO - the validation detects \"empty\" even if the object is not empty...\n  we need to fix the validator for \"shape\"...\n\n  .shape({\n    options: PropTypes.arrayOf(PropTypes.any).description('The options to display in the submenu.'),\n    onSubmenuToggle: PropTypes.func\n      .description(\n        'Callback fired when the user tries to toggle the submenu. It receives the next opened submenus, the submenu and the event.',\n      )\n      .signature(\n        '((nextOpenedSubmenus: Record<string, boolean>, submenu: unknown, e: React.MouseEvent | React.KeyboardEvent) => void)',\n      ),\n    openedSubmenus: PropTypes.object.description('The opened submenus.'),\n    selectedOptions: PropTypes.object.description('The selected options.'),\n    onKeyDown: PropTypes.func.description('Callback fired when the user presses a key.'),\n    onOptionClick: PropTypes.func\n      .description(\n        'Callback fired when the user clicks on an option. It receives the next selected options, the clicked option and the event.',\n      )\n      .signature(\n        '((nextSelectedOptions: Record<string, boolean>, clickedOption: unknown, e: React.MouseEvent | React.KeyboardEvent) => void)',\n      ),\n    onClickOutside: PropTypes.func\n      .description('Callback fired when the user clicks outside the submenu.')\n      .signature('((e: MouseEvent | React.KeyboardEvent | TouchEvent) => void)'),\n    minWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('The min width of the submenu.'),\n    maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('The max height of the submenu.'),\n  })\n  */\n  dropdownProps: PropTypes.object.description('The props to pass to the Dropdown component.'),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n};\n\nexport const DSMenuItemsSubmenuPropTypesSchema =\n  DSMenuItemsSubmenuPropTypes as unknown as WeakValidationMap<DSMenuItemsSubmenuT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW,2BAA2B,wBAAwB;AAEvE;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AAwEA,MAAM,eAAiD;AAAA,EAC5D,GAAG;AAAA,EACH,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,YAAY;AAAA,EACZ,0BAA0B;AAAA,EAC1B,UAAU,MAAM;AAAA,EAChB,eAAe;AAAA,IACb,SAAS,CAAC;AAAA,IACV,iBAAiB,MAAM;AAAA,IAAC;AAAA,IACxB,gBAAgB,CAAC;AAAA,IACjB,iBAAiB,CAAC;AAAA,IAClB,WAAW,MAAM;AAAA,IAAC;AAAA,IAClB,eAAe,MAAM;AAAA,IAAC;AAAA,IACtB,gBAAgB,MAAM;AAAA,IAAC;AAAA,IACvB,UAAU;AAAA,IACV,WAAW;AAAA,EACb;AACF;AAEO,MAAM,8BAAoF;AAAA;AAAA;AAAA,EAG/F,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA;AAAA;AAAA,EAIH,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE;AAAA,IAClE;AAAA,EACF;AAAA,EACA,OAAO,UAAU,OAAO,YAAY,6BAA6B;AAAA,EACjE,OAAO,UAAU,IAAI,YAAY,6BAA6B;AAAA,EAC9D,UAAU,UAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,aAAa,QAAQ;AAAA,EAC3G,0BAA0B,UAAU,KACjC,YAAY,gGAAgG,EAC5G,aAAa,aAAa,wBAAwB;AAAA,EACrD,gBAAgB,UAAU,OAAO,YAAY,uCAAuC;AAAA,EACpF,iBAAiB,UAAU,KACxB,YAAY,uCAAuC,EACnD,aAAa,aAAa,eAAe;AAAA,EAC5C,eAAe,UAAU,KAAK,YAAY,yDAAyD;AAAA,EACnG,gBAAgB,UAAU,KAAK,YAAY,0DAA0D;AAAA,EACrG,YAAY,UAAU,MAAM,CAAC,YAAY,SAAS,CAAC,EAAE;AAAA,IACnD;AAAA,EACF;AAAA,EACA,UAAU,UAAU,KAAK,YAAY,sDAAsD;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;AAAA;AAAA;AAAA,EA8B3F,eAAe,UAAU,OAAO,YAAY,8CAA8C;AAAA,EAC1F,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;AAEO,MAAM,oCACX;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import type { DSMenuItemsSubmenuT } from '../react-desc-prop-types.js';
-export declare const getChevronHandlers: ({ isSubmenuOpened, onMouseEnter, onSubmenuOpen, onSubmenuClose, onMouseLeave, onMouseDown, disabled, }: DSMenuItemsSubmenuT.InternalProps) => {
+export declare const getChevronHandlers: ({ isSubmenuOpened, onMouseEnter, onSubmenuOpen, onSubmenuClose, onMouseLeave, onMouseDown, disabled, applyAriaDisabled, }: DSMenuItemsSubmenuT.InternalProps) => {
     onMouseEnterHandler: (e: React.MouseEvent) => void;
     onMouseLeaveHandler: (e: React.MouseEvent) => void;
     onMouseDownHandler: (e: React.MouseEvent) => void;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';
+import type { DSGridT } from '@elliemae/ds-grid';
 import { type DSMenuItemsSubmenuT } from '../react-desc-prop-types.js';
 import { useGetSubmenuHandlers } from './useGetSubmenuHandlers.js';
-import type { DSGridT } from '@elliemae/ds-grid';
 export interface MenuItemsSubmenuCTX {
     propsWithDefault: DSMenuItemsSubmenuT.InternalProps;
     globalProps: ReturnType<typeof useGetGlobalAttributes>;

package/dist/types/react-desc-prop-types.d.ts

@@ -8,6 +8,7 @@ export declare namespace DSMenuItemsSubmenuT {
         label: string;
         isActive: boolean;
         disabled: boolean;
+        applyAriaDisabled: boolean;
         isSubmenuOpened: boolean;
         onSubmenuOpen: React.MouseEventHandler;
         rightAddon: 'ellipsis' | 'chevron';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-menu-items-submenu",
-  "version": "3.40.0",
+  "version": "3.41.0-rc.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Menu Items Submenu",
   "files": [
@@ -37,16 +37,16 @@
   },
   "dependencies": {
     "@xstyled/styled-components": "~3.6.0",
-    "@elliemae/ds-grid": "3.40.0",
-    "@elliemae/ds-icons": "3.40.0",
-    "@elliemae/ds-props-helpers": "3.40.0",
-    "@elliemae/ds-menu-items-commons": "3.40.0",
-    "@elliemae/ds-system": "3.40.0"
+    "@elliemae/ds-icons": "3.41.0-rc.0",
+    "@elliemae/ds-menu-items-commons": "3.41.0-rc.0",
+    "@elliemae/ds-grid": "3.41.0-rc.0",
+    "@elliemae/ds-props-helpers": "3.41.0-rc.0",
+    "@elliemae/ds-system": "3.41.0-rc.0"
   },
   "devDependencies": {
     "lodash": "^4.17.21",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.40.0"
+    "@elliemae/ds-monorepo-devops": "3.41.0-rc.0"
   },
   "peerDependencies": {
     "@testing-library/jest-dom": "~5.16.4",