@elliemae/ds-dropdownmenu-v2 3.40.1-rc.0 → 3.41.0-rc.1

package/dist/cjs/hooks/useDropdownListboxHandlers.js

@@ -72,9 +72,17 @@ const useDropdownListboxHandlers = () => {
         scrollOptionIntoView(options[nextItemIndex].dsId);
       } else if (e.code === "ArrowRight" && ["submenu", "singleWithSubmenu"].includes(option.type) && !openedSubmenus[option.dsId]) {
         e.preventDefault();
+        const { type } = option;
+        if (type === "submenu" || type === "singleWithSubmenu") {
+          if (option.applyAriaDisabled) return;
+        }
         onSubmenuToggle((0, import_utils.manageOpenedSubmenus)(options, { ...openedSubmenus, [option.dsId]: true }, option), option, e);
       } else if (["Space", "Enter"].includes(e.code)) {
         e.preventDefault();
+        const { type } = option;
+        if (type === "singleWithSubmenu") {
+          if (option.applyAriaDisabled) return;
+        }
         const nextSelectedOptions = { ...selectedOptions };
         nextSelectedOptions[option.dsId] = !selectedOptions[option.dsId];
         if (option?.disabled) return;

package/dist/cjs/hooks/useDropdownListboxHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useDropdownListboxHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-params */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport type { DSDropdownMenuT } from '../react-desc-prop-types.js';\nimport { findInCircularList, isOptionFocuseable, manageOpenedSubmenus } from '../utils/index.js';\n\ntype UseDropdownListboxHandlersType = () => {\n  onKeyDown: React.KeyboardEventHandler;\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave?: React.MouseEventHandler;\n};\n\nexport const useDropdownListboxHandlers: UseDropdownListboxHandlersType = () => {\n  const {\n    props: {\n      options,\n      onOptionClick,\n      openedSubmenus,\n      onSubmenuToggle,\n      onKeyDown: userOnKeyDown,\n      selectedOptions,\n      onClickOutside,\n      onMouseEnter: userOnMouseEnter,\n      onMouseLeave,\n    },\n    activeDescendant,\n    setActiveDescendant,\n    scrollOptionIntoView,\n    listboxReference,\n    inputReference,\n  } = useContext(DSDropdownMenuContext);\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      const currentItemIndex = options.findIndex((opt) => opt.dsId === activeDescendant);\n      if (currentItemIndex === -1) return;\n\n      const option = options[currentItemIndex];\n\n      e.stopPropagation();\n\n      if (e.code === 'ArrowDown') {\n        e.preventDefault();\n        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);\n        setActiveDescendant(options[nextItemIndex].dsId);\n        scrollOptionIntoView(options[nextItemIndex].dsId);\n      } else if (e.code === 'ArrowUp') {\n        e.preventDefault();\n        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);\n        setActiveDescendant(options[nextItemIndex].dsId);\n        scrollOptionIntoView(options[nextItemIndex].dsId);\n      } else if (\n        e.code === 'ArrowRight' &&\n        ['submenu', 'singleWithSubmenu'].includes(option.type) &&\n        !openedSubmenus[option.dsId]\n      ) {\n        e.preventDefault();\n        onSubmenuToggle(manageOpenedSubmenus(options, { ...openedSubmenus, [option.dsId]: true }, option), option, e);\n      } else if (['Space', 'Enter'].includes(e.code)) {\n        e.preventDefault();\n        const nextSelectedOptions = { ...selectedOptions };\n        nextSelectedOptions[option.dsId] = !selectedOptions[option.dsId];\n        if ((option as DSDropdownMenuT.ItemActionOptions)?.disabled) return; // prevent click when is disabled\n        onOptionClick(nextSelectedOptions, option, e);\n        if (option.onClick) option.onClick(e);\n      } else if (e.code === 'Escape') {\n        onClickOutside(e);\n      } else if (e.code === 'Home') {\n        const nextItemIndex = findInCircularList(options, options.length - 1, isOptionFocuseable);\n        setActiveDescendant(options[nextItemIndex].dsId);\n        scrollOptionIntoView(options[nextItemIndex].dsId);\n      } else if (e.code === 'End') {\n        const nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);\n        setActiveDescendant(options[nextItemIndex].dsId);\n        scrollOptionIntoView(options[nextItemIndex].dsId);\n      }\n      if (option.onKeyDown) option.onKeyDown(e);\n      userOnKeyDown(e);\n    },\n    [\n      options,\n      openedSubmenus,\n      userOnKeyDown,\n      activeDescendant,\n      setActiveDescendant,\n      scrollOptionIntoView,\n      onSubmenuToggle,\n      selectedOptions,\n      onOptionClick,\n      onClickOutside,\n    ],\n  );\n\n  const onMouseEnter: React.MouseEventHandler = useCallback(\n    (e: React.MouseEvent) => {\n      if (inputReference.current) inputReference.current.focus();\n      else listboxReference.current?.focus();\n      userOnMouseEnter(e);\n    },\n    [inputReference, listboxReference, userOnMouseEnter],\n  );\n  return { onKeyDown, onMouseEnter, onMouseLeave };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-params */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport type { DSDropdownMenuT } from '../react-desc-prop-types.js';\nimport { findInCircularList, isOptionFocuseable, manageOpenedSubmenus } from '../utils/index.js';\n\ntype UseDropdownListboxHandlersType = () => {\n  onKeyDown: React.KeyboardEventHandler;\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave?: React.MouseEventHandler;\n};\n\nexport const useDropdownListboxHandlers: UseDropdownListboxHandlersType = () => {\n  const {\n    props: {\n      options,\n      onOptionClick,\n      openedSubmenus,\n      onSubmenuToggle,\n      onKeyDown: userOnKeyDown,\n      selectedOptions,\n      onClickOutside,\n      onMouseEnter: userOnMouseEnter,\n      onMouseLeave,\n    },\n    activeDescendant,\n    setActiveDescendant,\n    scrollOptionIntoView,\n    listboxReference,\n    inputReference,\n  } = useContext(DSDropdownMenuContext);\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      const currentItemIndex = options.findIndex((opt) => opt.dsId === activeDescendant);\n      if (currentItemIndex === -1) return;\n\n      const option = options[currentItemIndex];\n\n      e.stopPropagation();\n\n      if (e.code === 'ArrowDown') {\n        e.preventDefault();\n        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);\n        setActiveDescendant(options[nextItemIndex].dsId);\n        scrollOptionIntoView(options[nextItemIndex].dsId);\n      } else if (e.code === 'ArrowUp') {\n        e.preventDefault();\n        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);\n        setActiveDescendant(options[nextItemIndex].dsId);\n        scrollOptionIntoView(options[nextItemIndex].dsId);\n      } else if (\n        e.code === 'ArrowRight' &&\n        ['submenu', 'singleWithSubmenu'].includes(option.type) &&\n        !openedSubmenus[option.dsId]\n      ) {\n        e.preventDefault();\n        const { type } = option;\n        if (type === 'submenu' || type === 'singleWithSubmenu') {\n          if (option.applyAriaDisabled) return;\n        }\n        onSubmenuToggle(manageOpenedSubmenus(options, { ...openedSubmenus, [option.dsId]: true }, option), option, e);\n      } else if (['Space', 'Enter'].includes(e.code)) {\n        e.preventDefault();\n        const { type } = option;\n        if (type === 'singleWithSubmenu') {\n          if (option.applyAriaDisabled) return;\n        }\n        const nextSelectedOptions = { ...selectedOptions };\n        nextSelectedOptions[option.dsId] = !selectedOptions[option.dsId];\n        if ((option as DSDropdownMenuT.ItemActionOptions)?.disabled) return; // prevent click when is disabled\n        onOptionClick(nextSelectedOptions, option, e);\n        if (option.onClick) option.onClick(e);\n      } else if (e.code === 'Escape') {\n        onClickOutside(e);\n      } else if (e.code === 'Home') {\n        const nextItemIndex = findInCircularList(options, options.length - 1, isOptionFocuseable);\n        setActiveDescendant(options[nextItemIndex].dsId);\n        scrollOptionIntoView(options[nextItemIndex].dsId);\n      } else if (e.code === 'End') {\n        const nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);\n        setActiveDescendant(options[nextItemIndex].dsId);\n        scrollOptionIntoView(options[nextItemIndex].dsId);\n      }\n      if (option.onKeyDown) option.onKeyDown(e);\n      userOnKeyDown(e);\n    },\n    [\n      options,\n      openedSubmenus,\n      userOnKeyDown,\n      activeDescendant,\n      setActiveDescendant,\n      scrollOptionIntoView,\n      onSubmenuToggle,\n      selectedOptions,\n      onOptionClick,\n      onClickOutside,\n    ],\n  );\n\n  const onMouseEnter: React.MouseEventHandler = useCallback(\n    (e: React.MouseEvent) => {\n      if (inputReference.current) inputReference.current.focus();\n      else listboxReference.current?.focus();\n      userOnMouseEnter(e);\n    },\n    [inputReference, listboxReference, userOnMouseEnter],\n  );\n  return { onKeyDown, onMouseEnter, onMouseLeave };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/hooks/useDropdownMenuItemHandlers.js

@@ -61,6 +61,10 @@ const useDropdownMenuItemHandlers = (option) => {
     (e) => {
       e.stopPropagation();
       e.preventDefault();
+      if (mutableOption?.current?.type === "singleWithSubmenu") {
+        const { applyAriaDisabled } = mutableOption.current;
+        if (applyAriaDisabled) return;
+      }
       const nextSelectedOptions = { ...mutableSelectedOptions.current };
       nextSelectedOptions[mutableOption.current.dsId] = !mutableSelectedOptions.current[mutableOption.current.dsId];
       if (mutableOption?.current?.disabled) return;

package/dist/cjs/hooks/useDropdownMenuItemHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useDropdownMenuItemHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { useMakeMutable } from './useMakeMutable.js';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport { manageOpenedSubmenus } from '../utils/index.js';\nimport type { DSDropdownMenuT } from '../react-desc-prop-types.js';\n\ntype UseDropdownMenuItemHandlersType = (option: DSDropdownMenuT.Item) => {\n  onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;\n  onSubmenuOpen: (e: React.MouseEvent | React.KeyboardEvent) => void;\n  onSubmenuClose: (e: React.MouseEvent | React.KeyboardEvent) => void;\n  onDropdownKeyDown: React.KeyboardEventHandler;\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave: React.MouseEventHandler;\n};\n\nexport const useDropdownMenuItemHandlers: UseDropdownMenuItemHandlersType = (option) => {\n  const {\n    props: {\n      options,\n      selectedOptions,\n      onOptionClick,\n      openedSubmenus,\n      onSubmenuToggle,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseDown,\n    },\n    listboxReference,\n    inputReference,\n  } = useContext(DSDropdownMenuContext);\n\n  // it's vital for the opinionated onSubmenuOpen / onSubmenuClose to\n  //   - have access to the latest information about openedSubmenus\n  //   - be as \"pure\" as possible to guarantee that usage with the \"bridge\" pattern\n  //       will be as \"transparent\" as possible (if nested inside async code, redefing the callback may invoke a stale closure)\n  // the whole component is kind of messy so I'm going to implement a quick and dirty solution\n  // I'm going to make all the arguments for the callbacks \"mutable\",\n  //    this is sub-optimal on a performance level but will have to do for now\n  const mutableOption = useMakeMutable(option);\n  const mutableOptions = useMakeMutable(options);\n  const mutableOpenedSubmenus = useMakeMutable(openedSubmenus);\n  const mutableOnSubmenuToggle = useMakeMutable(onSubmenuToggle);\n  const mutableOnOptionClick = useMakeMutable(onOptionClick);\n  const mutableSelectedOptions = useMakeMutable(selectedOptions);\n\n  // This callback is used on single / multi items to toggle the selection\n  const onClick = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      e.stopPropagation();\n      e.preventDefault();\n      const nextSelectedOptions = { ...mutableSelectedOptions.current };\n      nextSelectedOptions[mutableOption.current.dsId] = !mutableSelectedOptions.current[mutableOption.current.dsId];\n      if ((mutableOption?.current as DSDropdownMenuT.ItemActionOptions)?.disabled) return; // prevent click when is disabled\n      mutableOnOptionClick?.current?.(nextSelectedOptions, mutableOption.current, e);\n      // we avoid invoking \"onClick\" twice when the users \"key-down - enter\" on the item by checking if the event is keyboard related\n      if (e.type === 'click') mutableOption?.current?.onClick?.(e);\n    },\n    [mutableOnOptionClick, mutableOption, mutableSelectedOptions],\n  );\n\n  // This callback is used on submenu items to open it onMouseEnter\n  const onSubmenuOpen = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      mutableOnSubmenuToggle?.current?.(\n        manageOpenedSubmenus(\n          mutableOptions.current,\n          { ...(mutableOpenedSubmenus?.current || {}), [mutableOption.current.dsId]: true },\n          mutableOption.current,\n        ),\n        mutableOption.current,\n        e,\n      );\n    },\n    [mutableOnSubmenuToggle, mutableOpenedSubmenus, mutableOption, mutableOptions],\n  );\n\n  // This callback is used on submenu to close it onMouseLeave\n  const onSubmenuClose = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      mutableOnSubmenuToggle?.current?.(\n        manageOpenedSubmenus(\n          mutableOptions.current,\n          { ...(mutableOpenedSubmenus?.current || {}), [mutableOption.current.dsId]: false },\n          mutableOption.current,\n        ),\n        mutableOption.current,\n        e,\n      );\n      if (inputReference.current) inputReference.current.focus();\n      else listboxReference.current?.focus();\n    },\n    [inputReference, listboxReference, mutableOnSubmenuToggle, mutableOpenedSubmenus, mutableOption, mutableOptions],\n  );\n\n  // This callback is used on child dropdown to close the current opened submenu (which spawned it)\n  const onDropdownKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      if (e.code === 'ArrowLeft') {\n        onSubmenuClose(e);\n        e.preventDefault();\n      }\n    },\n    [onSubmenuClose],\n  );\n\n  return useMemo(\n    () => ({\n      onClick,\n      onSubmenuOpen,\n      onSubmenuClose,\n      onDropdownKeyDown,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseDown,\n    }),\n    [onClick, onSubmenuOpen, onSubmenuClose, onDropdownKeyDown, onMouseEnter, onMouseLeave, onMouseDown],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiD;AACjD,4BAA+B;AAC/B,iCAAsC;AACtC,mBAAqC;AAY9B,MAAM,8BAA+D,CAAC,WAAW;AACtF,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gDAAqB;AASpC,QAAM,oBAAgB,sCAAe,MAAM;AAC3C,QAAM,qBAAiB,sCAAe,OAAO;AAC7C,QAAM,4BAAwB,sCAAe,cAAc;AAC3D,QAAM,6BAAyB,sCAAe,eAAe;AAC7D,QAAM,2BAAuB,sCAAe,aAAa;AACzD,QAAM,6BAAyB,sCAAe,eAAe;AAG7D,QAAM,cAAU;AAAA,IACd,CAAC,MAA8C;AAC7C,QAAE,gBAAgB;AAClB,QAAE,eAAe;AACjB,YAAM,sBAAsB,EAAE,GAAG,uBAAuB,QAAQ;AAChE,0BAAoB,cAAc,QAAQ,IAAI,IAAI,CAAC,uBAAuB,QAAQ,cAAc,QAAQ,IAAI;AAC5G,UAAK,eAAe,SAA+C,SAAU;AAC7E,4BAAsB,UAAU,qBAAqB,cAAc,SAAS,CAAC;AAE7E,UAAI,EAAE,SAAS,QAAS,gBAAe,SAAS,UAAU,CAAC;AAAA,IAC7D;AAAA,IACA,CAAC,sBAAsB,eAAe,sBAAsB;AAAA,EAC9D;AAGA,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAA8C;AAC7C,8BAAwB;AAAA,YACtB;AAAA,UACE,eAAe;AAAA,UACf,EAAE,GAAI,uBAAuB,WAAW,CAAC,GAAI,CAAC,cAAc,QAAQ,IAAI,GAAG,KAAK;AAAA,UAChF,cAAc;AAAA,QAChB;AAAA,QACA,cAAc;AAAA,QACd;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,wBAAwB,uBAAuB,eAAe,cAAc;AAAA,EAC/E;AAGA,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAA8C;AAC7C,8BAAwB;AAAA,YACtB;AAAA,UACE,eAAe;AAAA,UACf,EAAE,GAAI,uBAAuB,WAAW,CAAC,GAAI,CAAC,cAAc,QAAQ,IAAI,GAAG,MAAM;AAAA,UACjF,cAAc;AAAA,QAChB;AAAA,QACA,cAAc;AAAA,QACd;AAAA,MACF;AACA,UAAI,eAAe,QAAS,gBAAe,QAAQ,MAAM;AAAA,UACpD,kBAAiB,SAAS,MAAM;AAAA,IACvC;AAAA,IACA,CAAC,gBAAgB,kBAAkB,wBAAwB,uBAAuB,eAAe,cAAc;AAAA,EACjH;AAGA,QAAM,wBAAgD;AAAA,IACpD,CAAC,MAAM;AACL,UAAI,EAAE,SAAS,aAAa;AAC1B,uBAAe,CAAC;AAChB,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,SAAS,eAAe,gBAAgB,mBAAmB,cAAc,cAAc,WAAW;AAAA,EACrG;AACF;",
+  "sourcesContent": ["import type React from 'react';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { useMakeMutable } from './useMakeMutable.js';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport { manageOpenedSubmenus } from '../utils/index.js';\nimport type { DSDropdownMenuT } from '../react-desc-prop-types.js';\n\ntype UseDropdownMenuItemHandlersType = (option: DSDropdownMenuT.Item) => {\n  onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;\n  onSubmenuOpen: (e: React.MouseEvent | React.KeyboardEvent) => void;\n  onSubmenuClose: (e: React.MouseEvent | React.KeyboardEvent) => void;\n  onDropdownKeyDown: React.KeyboardEventHandler;\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave: React.MouseEventHandler;\n};\n\nexport const useDropdownMenuItemHandlers: UseDropdownMenuItemHandlersType = (option) => {\n  const {\n    props: {\n      options,\n      selectedOptions,\n      onOptionClick,\n      openedSubmenus,\n      onSubmenuToggle,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseDown,\n    },\n    listboxReference,\n    inputReference,\n  } = useContext(DSDropdownMenuContext);\n\n  // it's vital for the opinionated onSubmenuOpen / onSubmenuClose to\n  //   - have access to the latest information about openedSubmenus\n  //   - be as \"pure\" as possible to guarantee that usage with the \"bridge\" pattern\n  //       will be as \"transparent\" as possible (if nested inside async code, redefing the callback may invoke a stale closure)\n  // the whole component is kind of messy so I'm going to implement a quick and dirty solution\n  // I'm going to make all the arguments for the callbacks \"mutable\",\n  //    this is sub-optimal on a performance level but will have to do for now\n  const mutableOption = useMakeMutable(option);\n  const mutableOptions = useMakeMutable(options);\n  const mutableOpenedSubmenus = useMakeMutable(openedSubmenus);\n  const mutableOnSubmenuToggle = useMakeMutable(onSubmenuToggle);\n  const mutableOnOptionClick = useMakeMutable(onOptionClick);\n  const mutableSelectedOptions = useMakeMutable(selectedOptions);\n\n  // This callback is used on single / multi items to toggle the selection\n  const onClick = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      e.stopPropagation();\n      e.preventDefault();\n      if (mutableOption?.current?.type === 'singleWithSubmenu') {\n        const { applyAriaDisabled } = mutableOption.current;\n        if (applyAriaDisabled) return;\n      }\n      const nextSelectedOptions = { ...mutableSelectedOptions.current };\n      nextSelectedOptions[mutableOption.current.dsId] = !mutableSelectedOptions.current[mutableOption.current.dsId];\n      if ((mutableOption?.current as DSDropdownMenuT.ItemActionOptions)?.disabled) return; // prevent click when is disabled\n      mutableOnOptionClick?.current?.(nextSelectedOptions, mutableOption.current, e);\n      // we avoid invoking \"onClick\" twice when the users \"key-down - enter\" on the item by checking if the event is keyboard related\n      if (e.type === 'click') mutableOption?.current?.onClick?.(e);\n    },\n    [mutableOnOptionClick, mutableOption, mutableSelectedOptions],\n  );\n\n  // This callback is used on submenu items to open it onMouseEnter\n  const onSubmenuOpen = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      mutableOnSubmenuToggle?.current?.(\n        manageOpenedSubmenus(\n          mutableOptions.current,\n          { ...(mutableOpenedSubmenus?.current || {}), [mutableOption.current.dsId]: true },\n          mutableOption.current,\n        ),\n        mutableOption.current,\n        e,\n      );\n    },\n    [mutableOnSubmenuToggle, mutableOpenedSubmenus, mutableOption, mutableOptions],\n  );\n\n  // This callback is used on submenu to close it onMouseLeave\n  const onSubmenuClose = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      mutableOnSubmenuToggle?.current?.(\n        manageOpenedSubmenus(\n          mutableOptions.current,\n          { ...(mutableOpenedSubmenus?.current || {}), [mutableOption.current.dsId]: false },\n          mutableOption.current,\n        ),\n        mutableOption.current,\n        e,\n      );\n      if (inputReference.current) inputReference.current.focus();\n      else listboxReference.current?.focus();\n    },\n    [inputReference, listboxReference, mutableOnSubmenuToggle, mutableOpenedSubmenus, mutableOption, mutableOptions],\n  );\n\n  // This callback is used on child dropdown to close the current opened submenu (which spawned it)\n  const onDropdownKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      if (e.code === 'ArrowLeft') {\n        onSubmenuClose(e);\n        e.preventDefault();\n      }\n    },\n    [onSubmenuClose],\n  );\n\n  return useMemo(\n    () => ({\n      onClick,\n      onSubmenuOpen,\n      onSubmenuClose,\n      onDropdownKeyDown,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseDown,\n    }),\n    [onClick, onSubmenuOpen, onSubmenuClose, onDropdownKeyDown, onMouseEnter, onMouseLeave, onMouseDown],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiD;AACjD,4BAA+B;AAC/B,iCAAsC;AACtC,mBAAqC;AAY9B,MAAM,8BAA+D,CAAC,WAAW;AACtF,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gDAAqB;AASpC,QAAM,oBAAgB,sCAAe,MAAM;AAC3C,QAAM,qBAAiB,sCAAe,OAAO;AAC7C,QAAM,4BAAwB,sCAAe,cAAc;AAC3D,QAAM,6BAAyB,sCAAe,eAAe;AAC7D,QAAM,2BAAuB,sCAAe,aAAa;AACzD,QAAM,6BAAyB,sCAAe,eAAe;AAG7D,QAAM,cAAU;AAAA,IACd,CAAC,MAA8C;AAC7C,QAAE,gBAAgB;AAClB,QAAE,eAAe;AACjB,UAAI,eAAe,SAAS,SAAS,qBAAqB;AACxD,cAAM,EAAE,kBAAkB,IAAI,cAAc;AAC5C,YAAI,kBAAmB;AAAA,MACzB;AACA,YAAM,sBAAsB,EAAE,GAAG,uBAAuB,QAAQ;AAChE,0BAAoB,cAAc,QAAQ,IAAI,IAAI,CAAC,uBAAuB,QAAQ,cAAc,QAAQ,IAAI;AAC5G,UAAK,eAAe,SAA+C,SAAU;AAC7E,4BAAsB,UAAU,qBAAqB,cAAc,SAAS,CAAC;AAE7E,UAAI,EAAE,SAAS,QAAS,gBAAe,SAAS,UAAU,CAAC;AAAA,IAC7D;AAAA,IACA,CAAC,sBAAsB,eAAe,sBAAsB;AAAA,EAC9D;AAGA,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAA8C;AAC7C,8BAAwB;AAAA,YACtB;AAAA,UACE,eAAe;AAAA,UACf,EAAE,GAAI,uBAAuB,WAAW,CAAC,GAAI,CAAC,cAAc,QAAQ,IAAI,GAAG,KAAK;AAAA,UAChF,cAAc;AAAA,QAChB;AAAA,QACA,cAAc;AAAA,QACd;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,wBAAwB,uBAAuB,eAAe,cAAc;AAAA,EAC/E;AAGA,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAA8C;AAC7C,8BAAwB;AAAA,YACtB;AAAA,UACE,eAAe;AAAA,UACf,EAAE,GAAI,uBAAuB,WAAW,CAAC,GAAI,CAAC,cAAc,QAAQ,IAAI,GAAG,MAAM;AAAA,UACjF,cAAc;AAAA,QAChB;AAAA,QACA,cAAc;AAAA,QACd;AAAA,MACF;AACA,UAAI,eAAe,QAAS,gBAAe,QAAQ,MAAM;AAAA,UACpD,kBAAiB,SAAS,MAAM;AAAA,IACvC;AAAA,IACA,CAAC,gBAAgB,kBAAkB,wBAAwB,uBAAuB,eAAe,cAAc;AAAA,EACjH;AAGA,QAAM,wBAAgD;AAAA,IACpD,CAAC,MAAM;AACL,UAAI,EAAE,SAAS,aAAa;AAC1B,uBAAe,CAAC;AAChB,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,SAAS,eAAe,gBAAgB,mBAAmB,cAAc,cAAc,WAAW;AAAA,EACrG;AACF;",
   "names": []
 }

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 max-lines */\nimport type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport {\n  type GlobalAttributesT,\n  PropTypes,\n  type XstyledProps,\n  globalAttributesPropTypes,\n  type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport type { SizingProps } from '@elliemae/ds-system';\n\nexport namespace DSDropdownMenuT {\n  export type PopperPlacementsT =\n    | 'top-start'\n    | 'top'\n    | 'top-end'\n    | 'right-start'\n    | 'right'\n    | 'right-end'\n    | 'bottom-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'left-end'\n    | 'left'\n    | 'left-start';\n\n  export interface RequiredProps {\n    options: Item[];\n    isOpened: boolean;\n  }\n\n  export interface DefaultProps {\n    onClickOutside: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n    onKeyDown: React.KeyboardEventHandler;\n    onMouseEnter: React.MouseEventHandler;\n    onMouseLeave: React.MouseEventHandler;\n    selectedOptions: Record<string, boolean>;\n    onOptionClick: (\n      nextSelectedOptions: Record<string, boolean>,\n      clickedOption: Item,\n      e: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n    openedSubmenus: Record<string, boolean>;\n    onSubmenuToggle: (\n      nextOpenedSubmenus: Record<string, boolean>,\n      submenu: Item,\n      e: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n    isLoading: boolean;\n    hasInput: boolean;\n    inputValue: string;\n    inputPlaceholder: string;\n    onInputChange: React.FormEventHandler<HTMLInputElement>;\n    startPlacementPreference: PopperPlacementsT;\n    placementOrderPreference: PopperPlacementsT[];\n    customOffset: [number, number];\n    wrapperStyles: Record<string, unknown>;\n    actionRef: React.MutableRefObject<Record<string, unknown>>;\n    as: keyof JSX.IntrinsicElements;\n    children?: React.ReactNode;\n    isSkeleton: boolean;\n  }\n\n  export interface OptionalProps {\n    zIndex?: number;\n    minWidth?: SizingProps['minWidth'];\n    maxHeight?: SizingProps['maxHeight'];\n    HeaderComp?: React.ComponentType<{ ctx?: DSDropdownMenuT.CTX }>;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      Omit<XstyledProps, 'zIndex'>,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      Omit<XstyledProps, 'zIndex'>,\n      RequiredProps {}\n\n  export interface CTX {\n    props: React.PropsWithChildren<InternalProps>;\n    triggerReferenceElement: HTMLDivElement | null;\n    setTriggerReferenceElement: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n    listboxReference: React.RefObject<HTMLDivElement>;\n    inputReference: React.RefObject<HTMLInputElement>;\n    activeDescendant: string;\n    setActiveDescendant: React.Dispatch<React.SetStateAction<string>>;\n    scrollOptionIntoView: (dsId: string) => void;\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    DSDropdownMenuV2: React.ComponentType<Props>;\n  }\n\n  interface CommonItemOptions extends Omit<GlobalAttributesT, 'value'>, XstyledProps {\n    dsId: string;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    render?: React.ComponentType<any>;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => null;\n  }\n\n  export interface ItemActionOptions extends CommonItemOptions {\n    type: 'action';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n  }\n\n  export interface ItemSingleOptions extends CommonItemOptions {\n    type: 'single';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n  }\n\n  export interface ItemSingleWithSubmenuOptions extends CommonItemOptions {\n    type: 'singleWithSubmenu';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n    rightAddon?: 'chevron' | 'ellipsis';\n    options: Item[];\n  }\n\n  export interface ItemCheckboxOptions extends CommonItemOptions {\n    type: 'checkbox';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n  }\n\n  export interface ItemSubmenuOptions extends CommonItemOptions {\n    type: 'submenu';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n    rightAddon?: 'chevron' | 'ellipsis';\n    options: Item[];\n  }\n\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n  }\n\n  export interface ItemSkeletonOptions extends CommonItemOptions {\n    type: 'skeleton';\n  }\n\n  export type Item =\n    | ItemActionOptions\n    | ItemSingleOptions\n    | ItemCheckboxOptions\n    | ItemSubmenuOptions\n    | ItemSingleWithSubmenuOptions\n    | ItemSeparatorOptions\n    | ItemSectionOptions\n    | ItemSkeletonOptions;\n\n  export interface ItemDictionary {\n    [dsId: string]: {\n      original: Item;\n      containerRef: React.RefObject<HTMLDivElement>;\n      parent: string | null;\n    };\n  }\n}\n\nexport const actionOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['action']),\n  label: PropTypes.string.isRequired,\n  secondaryLabel: PropTypes.string,\n  disabled: PropTypes.bool,\n  render: PropTypes.func,\n});\nexport const singleOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['single']),\n  label: PropTypes.string.isRequired,\n  secondaryLabel: PropTypes.string,\n  value: PropTypes.any.isRequired,\n  disabled: PropTypes.bool,\n  render: PropTypes.func,\n});\nexport const checkboxOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['checkbox']),\n  label: PropTypes.string.isRequired,\n  secondaryLabel: PropTypes.string,\n  value: PropTypes.any.isRequired,\n  disabled: PropTypes.bool,\n  render: PropTypes.func,\n});\nexport const submenuOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['submenu']),\n  label: PropTypes.string.isRequired,\n  secondaryLabel: PropTypes.string,\n  value: PropTypes.any.isRequired,\n  disabled: PropTypes.bool,\n  rightAddon: PropTypes.oneOf(['chevron', 'ellipsis']),\n  options: PropTypes.array,\n  minWidth: PropTypes.any,\n  maxHeight: PropTypes.any,\n  render: PropTypes.func,\n});\nexport const singleWithSubmenuOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['singleWithSubmenu']),\n  label: PropTypes.string.isRequired,\n  secondaryLabel: PropTypes.string,\n  value: PropTypes.any.isRequired,\n  disabled: PropTypes.bool,\n  rightAddon: PropTypes.oneOf(['chevron', 'ellipsis']),\n  options: PropTypes.array,\n  minWidth: PropTypes.any,\n  maxHeight: PropTypes.any,\n  render: PropTypes.func,\n});\nexport const separatorOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['separator']),\n  label: PropTypes.string.isRequired,\n  render: PropTypes.func,\n});\nexport const sectionOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['section']),\n  label: PropTypes.string.isRequired,\n  render: PropTypes.func,\n});\n\nexport const optionTypesSchemas = PropTypes.oneOfType([\n  actionOptionSchema,\n  singleOptionSchema,\n  checkboxOptionSchema,\n  submenuOptionSchema,\n  singleWithSubmenuOptionSchema,\n  separatorOptionSchema,\n  sectionOptionSchema,\n]);\n\nexport const DSDropdownMenuV2PropTypes = {\n  options: PropTypes.arrayOf(optionTypesSchemas).description('The array of option for the menu').omitValidation()\n    .isRequired,\n  isOpened: PropTypes.bool.description('Whether the dropdown menu is opened or not').isRequired,\n  onClickOutside: PropTypes.func\n    .description('Callback executed when you click outside the dropdown menu, or press the Esc key')\n    .defaultValue(() => null),\n  selectedOptions: PropTypes.object\n    .description(\n      'Object with the ids of the options as keys, and booleans as keys. Represents the state of the current selection in the dropdown menu',\n    )\n    .defaultValue({}),\n  onOptionClick: PropTypes.func\n    .description(\n      'Callback triggered when an item is clicked or pressed. We provide the next selected options, the clicked option and the event, in that order',\n    )\n    .defaultValue(() => null),\n  openedSubmenus: PropTypes.object\n    .description(\n      'Object with the ids of the submenus as keys, and booleans as keys. Represents the state of the current opened submenus',\n    )\n    .defaultValue({}),\n  onSubmenuToggle: PropTypes.func\n    .description(\n      'Callback triggered when a submenu is opened or closed. We provide the next opened submenus, the clicked one and the event, in that order',\n    )\n    .defaultValue(() => null),\n  startPlacementPreference: PropTypes.string\n    .description('Where to place the popper for the dropdown menu')\n    .defaultValue('bottom-start'),\n  placementOrderPreference: PropTypes.arrayOf(PropTypes.string)\n    .description('Placement priorities for the dropdown menu')\n    .defaultValue(['bottom-start', 'top-start', 'right-start', 'right-end', 'left-start', 'left-end']),\n  customOffset: PropTypes.arrayOf(PropTypes.number)\n    .description('Custom offset for the dropdown menu')\n    .defaultValue([0, 4]),\n  wrapperStyles: PropTypes.object.description('Styling for the dropdown menu wrapper').defaultValue({}),\n  isLoading: PropTypes.bool\n    .description('Whether the dropdown menu should render the loading indicator')\n    .defaultValue(false),\n  zIndex: PropTypes.number.description('ZIndex for the popper').defaultValue(10),\n  HeaderComp: PropTypes.func\n    .description('Component to render as a header for the dropdown menu')\n    .defaultValue(undefined),\n  actionRef: PropTypes.object.description('Reference where all the exposed action callbacks will be exposed'),\n  minWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),\n  maxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),\n  ...globalAttributesPropTypes,\n  onKeyDown: PropTypes.func.description('Callback executed when a key is pressed').defaultValue(() => null),\n  onMouseEnter: PropTypes.func\n    .description('Callback executed when the mouse enter the dropdown menu')\n    .defaultValue(() => null),\n  onMouseLeave: PropTypes.func\n    .description('Callback executed when the mouse leaves the dropdown menu')\n    .defaultValue(() => null),\n  isSkeleton: PropTypes.bool.description('Whether the dropdown menu should render the skeleton').defaultValue(false),\n} as ValidationMap<unknown>;\n\nexport const defaultProps: DSDropdownMenuT.DefaultProps = {\n  onClickOutside: () => null,\n  onKeyDown: () => null,\n  onMouseEnter: () => null,\n  onMouseLeave: () => null,\n  selectedOptions: {},\n  onOptionClick: () => null,\n  openedSubmenus: {},\n  onSubmenuToggle: () => null,\n  isLoading: false,\n  hasInput: false,\n  inputValue: '',\n  inputPlaceholder: 'Hint text',\n  onInputChange: () => null,\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start', 'right-start', 'right-end', 'left-start', 'left-end'],\n  customOffset: [0, 4],\n  wrapperStyles: {},\n  actionRef: { current: {} },\n  as: 'div',\n  isSkeleton: false,\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport {\n  type GlobalAttributesT,\n  PropTypes,\n  type XstyledProps,\n  globalAttributesPropTypes,\n  type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport type { SizingProps } from '@elliemae/ds-system';\n\nexport namespace DSDropdownMenuT {\n  export type PopperPlacementsT =\n    | 'top-start'\n    | 'top'\n    | 'top-end'\n    | 'right-start'\n    | 'right'\n    | 'right-end'\n    | 'bottom-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'left-end'\n    | 'left'\n    | 'left-start';\n\n  export interface RequiredProps {\n    options: Item[];\n    isOpened: boolean;\n  }\n\n  export interface DefaultProps {\n    onClickOutside: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n    onKeyDown: React.KeyboardEventHandler;\n    onMouseEnter: React.MouseEventHandler;\n    onMouseLeave: React.MouseEventHandler;\n    selectedOptions: Record<string, boolean>;\n    onOptionClick: (\n      nextSelectedOptions: Record<string, boolean>,\n      clickedOption: Item,\n      e: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n    openedSubmenus: Record<string, boolean>;\n    onSubmenuToggle: (\n      nextOpenedSubmenus: Record<string, boolean>,\n      submenu: Item,\n      e: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n    isLoading: boolean;\n    hasInput: boolean;\n    inputValue: string;\n    inputPlaceholder: string;\n    onInputChange: React.FormEventHandler<HTMLInputElement>;\n    startPlacementPreference: PopperPlacementsT;\n    placementOrderPreference: PopperPlacementsT[];\n    customOffset: [number, number];\n    wrapperStyles: Record<string, unknown>;\n    actionRef: React.MutableRefObject<Record<string, unknown>>;\n    as: keyof JSX.IntrinsicElements;\n    children?: React.ReactNode;\n    isSkeleton: boolean;\n  }\n\n  export interface OptionalProps {\n    zIndex?: number;\n    minWidth?: SizingProps['minWidth'];\n    maxHeight?: SizingProps['maxHeight'];\n    HeaderComp?: React.ComponentType<{ ctx?: DSDropdownMenuT.CTX }>;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      Omit<XstyledProps, 'zIndex'>,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      Omit<XstyledProps, 'zIndex'>,\n      RequiredProps {}\n\n  export interface CTX {\n    props: React.PropsWithChildren<InternalProps>;\n    triggerReferenceElement: HTMLDivElement | null;\n    setTriggerReferenceElement: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n    listboxReference: React.RefObject<HTMLDivElement>;\n    inputReference: React.RefObject<HTMLInputElement>;\n    activeDescendant: string;\n    setActiveDescendant: React.Dispatch<React.SetStateAction<string>>;\n    scrollOptionIntoView: (dsId: string) => void;\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    DSDropdownMenuV2: React.ComponentType<Props>;\n  }\n\n  interface CommonItemOptions extends Omit<GlobalAttributesT, 'value'>, XstyledProps {\n    dsId: string;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    render?: React.ComponentType<any>;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => null;\n  }\n\n  export interface ItemActionOptions extends CommonItemOptions {\n    type: 'action';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n    applyAriaDisabled?: boolean;\n  }\n\n  export interface ItemSingleOptions extends CommonItemOptions {\n    type: 'single';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n    applyAriaDisabled?: boolean;\n  }\n\n  export interface ItemSingleWithSubmenuOptions extends CommonItemOptions {\n    type: 'singleWithSubmenu';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n    applyAriaDisabled?: boolean;\n    rightAddon?: 'chevron' | 'ellipsis';\n    options: Item[];\n  }\n\n  export interface ItemCheckboxOptions extends CommonItemOptions {\n    type: 'checkbox';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n    applyAriaDisabled?: boolean;\n  }\n\n  export interface ItemSubmenuOptions extends CommonItemOptions {\n    type: 'submenu';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n    applyAriaDisabled?: boolean;\n    rightAddon?: 'chevron' | 'ellipsis';\n    options: Item[];\n  }\n\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n  }\n\n  export interface ItemSkeletonOptions extends CommonItemOptions {\n    type: 'skeleton';\n  }\n\n  export type Item =\n    | ItemActionOptions\n    | ItemSingleOptions\n    | ItemCheckboxOptions\n    | ItemSubmenuOptions\n    | ItemSingleWithSubmenuOptions\n    | ItemSeparatorOptions\n    | ItemSectionOptions\n    | ItemSkeletonOptions;\n\n  export interface ItemDictionary {\n    [dsId: string]: {\n      original: Item;\n      containerRef: React.RefObject<HTMLDivElement>;\n      parent: string | null;\n    };\n  }\n}\n\nexport const actionOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['action']),\n  label: PropTypes.string.isRequired,\n  secondaryLabel: PropTypes.string,\n  disabled: PropTypes.bool,\n  render: PropTypes.func,\n});\nexport const singleOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['single']),\n  label: PropTypes.string.isRequired,\n  secondaryLabel: PropTypes.string,\n  value: PropTypes.any.isRequired,\n  disabled: PropTypes.bool,\n  render: PropTypes.func,\n});\nexport const checkboxOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['checkbox']),\n  label: PropTypes.string.isRequired,\n  secondaryLabel: PropTypes.string,\n  value: PropTypes.any.isRequired,\n  disabled: PropTypes.bool,\n  render: PropTypes.func,\n});\nexport const submenuOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['submenu']),\n  label: PropTypes.string.isRequired,\n  secondaryLabel: PropTypes.string,\n  value: PropTypes.any.isRequired,\n  disabled: PropTypes.bool,\n  rightAddon: PropTypes.oneOf(['chevron', 'ellipsis']),\n  options: PropTypes.array,\n  minWidth: PropTypes.any,\n  maxHeight: PropTypes.any,\n  render: PropTypes.func,\n});\nexport const singleWithSubmenuOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['singleWithSubmenu']),\n  label: PropTypes.string.isRequired,\n  secondaryLabel: PropTypes.string,\n  value: PropTypes.any.isRequired,\n  disabled: PropTypes.bool,\n  rightAddon: PropTypes.oneOf(['chevron', 'ellipsis']),\n  options: PropTypes.array,\n  minWidth: PropTypes.any,\n  maxHeight: PropTypes.any,\n  render: PropTypes.func,\n});\nexport const separatorOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['separator']),\n  label: PropTypes.string.isRequired,\n  render: PropTypes.func,\n});\nexport const sectionOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['section']),\n  label: PropTypes.string.isRequired,\n  render: PropTypes.func,\n});\n\nexport const optionTypesSchemas = PropTypes.oneOfType([\n  actionOptionSchema,\n  singleOptionSchema,\n  checkboxOptionSchema,\n  submenuOptionSchema,\n  singleWithSubmenuOptionSchema,\n  separatorOptionSchema,\n  sectionOptionSchema,\n]);\n\nexport const DSDropdownMenuV2PropTypes = {\n  options: PropTypes.arrayOf(optionTypesSchemas).description('The array of option for the menu').omitValidation()\n    .isRequired,\n  isOpened: PropTypes.bool.description('Whether the dropdown menu is opened or not').isRequired,\n  onClickOutside: PropTypes.func\n    .description('Callback executed when you click outside the dropdown menu, or press the Esc key')\n    .defaultValue(() => null),\n  selectedOptions: PropTypes.object\n    .description(\n      'Object with the ids of the options as keys, and booleans as keys. Represents the state of the current selection in the dropdown menu',\n    )\n    .defaultValue({}),\n  onOptionClick: PropTypes.func\n    .description(\n      'Callback triggered when an item is clicked or pressed. We provide the next selected options, the clicked option and the event, in that order',\n    )\n    .defaultValue(() => null),\n  openedSubmenus: PropTypes.object\n    .description(\n      'Object with the ids of the submenus as keys, and booleans as keys. Represents the state of the current opened submenus',\n    )\n    .defaultValue({}),\n  onSubmenuToggle: PropTypes.func\n    .description(\n      'Callback triggered when a submenu is opened or closed. We provide the next opened submenus, the clicked one and the event, in that order',\n    )\n    .defaultValue(() => null),\n  startPlacementPreference: PropTypes.string\n    .description('Where to place the popper for the dropdown menu')\n    .defaultValue('bottom-start'),\n  placementOrderPreference: PropTypes.arrayOf(PropTypes.string)\n    .description('Placement priorities for the dropdown menu')\n    .defaultValue(['bottom-start', 'top-start', 'right-start', 'right-end', 'left-start', 'left-end']),\n  customOffset: PropTypes.arrayOf(PropTypes.number)\n    .description('Custom offset for the dropdown menu')\n    .defaultValue([0, 4]),\n  wrapperStyles: PropTypes.object.description('Styling for the dropdown menu wrapper').defaultValue({}),\n  isLoading: PropTypes.bool\n    .description('Whether the dropdown menu should render the loading indicator')\n    .defaultValue(false),\n  zIndex: PropTypes.number.description('ZIndex for the popper').defaultValue(10),\n  HeaderComp: PropTypes.func\n    .description('Component to render as a header for the dropdown menu')\n    .defaultValue(undefined),\n  actionRef: PropTypes.object.description('Reference where all the exposed action callbacks will be exposed'),\n  minWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),\n  maxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),\n  ...globalAttributesPropTypes,\n  onKeyDown: PropTypes.func.description('Callback executed when a key is pressed').defaultValue(() => null),\n  onMouseEnter: PropTypes.func\n    .description('Callback executed when the mouse enter the dropdown menu')\n    .defaultValue(() => null),\n  onMouseLeave: PropTypes.func\n    .description('Callback executed when the mouse leaves the dropdown menu')\n    .defaultValue(() => null),\n  isSkeleton: PropTypes.bool.description('Whether the dropdown menu should render the skeleton').defaultValue(false),\n} as ValidationMap<unknown>;\n\nexport const defaultProps: DSDropdownMenuT.DefaultProps = {\n  onClickOutside: () => null,\n  onKeyDown: () => null,\n  onMouseEnter: () => null,\n  onMouseLeave: () => null,\n  selectedOptions: {},\n  onOptionClick: () => null,\n  openedSubmenus: {},\n  onSubmenuToggle: () => null,\n  isLoading: false,\n  hasInput: false,\n  inputValue: '',\n  inputPlaceholder: 'Hint text',\n  onInputChange: () => null,\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start', 'right-start', 'right-end', 'left-start', 'left-end'],\n  customOffset: [0, 4],\n  wrapperStyles: {},\n  actionRef: { current: {} },\n  as: 'div',\n  isSkeleton: false,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/hooks/useDropdownListboxHandlers.js

@@ -39,9 +39,17 @@ const useDropdownListboxHandlers = () => {
         scrollOptionIntoView(options[nextItemIndex].dsId);
       } else if (e.code === "ArrowRight" && ["submenu", "singleWithSubmenu"].includes(option.type) && !openedSubmenus[option.dsId]) {
         e.preventDefault();
+        const { type } = option;
+        if (type === "submenu" || type === "singleWithSubmenu") {
+          if (option.applyAriaDisabled) return;
+        }
         onSubmenuToggle(manageOpenedSubmenus(options, { ...openedSubmenus, [option.dsId]: true }, option), option, e);
       } else if (["Space", "Enter"].includes(e.code)) {
         e.preventDefault();
+        const { type } = option;
+        if (type === "singleWithSubmenu") {
+          if (option.applyAriaDisabled) return;
+        }
         const nextSelectedOptions = { ...selectedOptions };
         nextSelectedOptions[option.dsId] = !selectedOptions[option.dsId];
         if (option?.disabled) return;

package/dist/esm/hooks/useDropdownListboxHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useDropdownListboxHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport type { DSDropdownMenuT } from '../react-desc-prop-types.js';\nimport { findInCircularList, isOptionFocuseable, manageOpenedSubmenus } from '../utils/index.js';\n\ntype UseDropdownListboxHandlersType = () => {\n  onKeyDown: React.KeyboardEventHandler;\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave?: React.MouseEventHandler;\n};\n\nexport const useDropdownListboxHandlers: UseDropdownListboxHandlersType = () => {\n  const {\n    props: {\n      options,\n      onOptionClick,\n      openedSubmenus,\n      onSubmenuToggle,\n      onKeyDown: userOnKeyDown,\n      selectedOptions,\n      onClickOutside,\n      onMouseEnter: userOnMouseEnter,\n      onMouseLeave,\n    },\n    activeDescendant,\n    setActiveDescendant,\n    scrollOptionIntoView,\n    listboxReference,\n    inputReference,\n  } = useContext(DSDropdownMenuContext);\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      const currentItemIndex = options.findIndex((opt) => opt.dsId === activeDescendant);\n      if (currentItemIndex === -1) return;\n\n      const option = options[currentItemIndex];\n\n      e.stopPropagation();\n\n      if (e.code === 'ArrowDown') {\n        e.preventDefault();\n        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);\n        setActiveDescendant(options[nextItemIndex].dsId);\n        scrollOptionIntoView(options[nextItemIndex].dsId);\n      } else if (e.code === 'ArrowUp') {\n        e.preventDefault();\n        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);\n        setActiveDescendant(options[nextItemIndex].dsId);\n        scrollOptionIntoView(options[nextItemIndex].dsId);\n      } else if (\n        e.code === 'ArrowRight' &&\n        ['submenu', 'singleWithSubmenu'].includes(option.type) &&\n        !openedSubmenus[option.dsId]\n      ) {\n        e.preventDefault();\n        onSubmenuToggle(manageOpenedSubmenus(options, { ...openedSubmenus, [option.dsId]: true }, option), option, e);\n      } else if (['Space', 'Enter'].includes(e.code)) {\n        e.preventDefault();\n        const nextSelectedOptions = { ...selectedOptions };\n        nextSelectedOptions[option.dsId] = !selectedOptions[option.dsId];\n        if ((option as DSDropdownMenuT.ItemActionOptions)?.disabled) return; // prevent click when is disabled\n        onOptionClick(nextSelectedOptions, option, e);\n        if (option.onClick) option.onClick(e);\n      } else if (e.code === 'Escape') {\n        onClickOutside(e);\n      } else if (e.code === 'Home') {\n        const nextItemIndex = findInCircularList(options, options.length - 1, isOptionFocuseable);\n        setActiveDescendant(options[nextItemIndex].dsId);\n        scrollOptionIntoView(options[nextItemIndex].dsId);\n      } else if (e.code === 'End') {\n        const nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);\n        setActiveDescendant(options[nextItemIndex].dsId);\n        scrollOptionIntoView(options[nextItemIndex].dsId);\n      }\n      if (option.onKeyDown) option.onKeyDown(e);\n      userOnKeyDown(e);\n    },\n    [\n      options,\n      openedSubmenus,\n      userOnKeyDown,\n      activeDescendant,\n      setActiveDescendant,\n      scrollOptionIntoView,\n      onSubmenuToggle,\n      selectedOptions,\n      onOptionClick,\n      onClickOutside,\n    ],\n  );\n\n  const onMouseEnter: React.MouseEventHandler = useCallback(\n    (e: React.MouseEvent) => {\n      if (inputReference.current) inputReference.current.focus();\n      else listboxReference.current?.focus();\n      userOnMouseEnter(e);\n    },\n    [inputReference, listboxReference, userOnMouseEnter],\n  );\n  return { onKeyDown, onMouseEnter, onMouseLeave };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,kBAAkB;AACxC,SAAS,6BAA6B;AAEtC,SAAS,oBAAoB,oBAAoB,4BAA4B;AAQtE,MAAM,6BAA6D,MAAM;AAC9E,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,YAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,YAAM,mBAAmB,QAAQ,UAAU,CAAC,QAAQ,IAAI,SAAS,gBAAgB;AACjF,UAAI,qBAAqB,GAAI;AAE7B,YAAM,SAAS,QAAQ,gBAAgB;AAEvC,QAAE,gBAAgB;AAElB,UAAI,EAAE,SAAS,aAAa;AAC1B,UAAE,eAAe;AACjB,cAAM,gBAAgB,mBAAmB,SAAS,kBAAkB,kBAAkB;AACtF,4BAAoB,QAAQ,aAAa,EAAE,IAAI;AAC/C,6BAAqB,QAAQ,aAAa,EAAE,IAAI;AAAA,MAClD,WAAW,EAAE,SAAS,WAAW;AAC/B,UAAE,eAAe;AACjB,cAAM,gBAAgB,mBAAmB,SAAS,kBAAkB,oBAAoB,EAAE;AAC1F,4BAAoB,QAAQ,aAAa,EAAE,IAAI;AAC/C,6BAAqB,QAAQ,aAAa,EAAE,IAAI;AAAA,MAClD,WACE,EAAE,SAAS,gBACX,CAAC,WAAW,mBAAmB,EAAE,SAAS,OAAO,IAAI,KACrD,CAAC,eAAe,OAAO,IAAI,GAC3B;AACA,UAAE,eAAe;AACjB,wBAAgB,qBAAqB,SAAS,EAAE,GAAG,gBAAgB,CAAC,OAAO,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAC;AAAA,MAC9G,WAAW,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAC9C,UAAE,eAAe;AACjB,cAAM,sBAAsB,EAAE,GAAG,gBAAgB;AACjD,4BAAoB,OAAO,IAAI,IAAI,CAAC,gBAAgB,OAAO,IAAI;AAC/D,YAAK,QAA8C,SAAU;AAC7D,sBAAc,qBAAqB,QAAQ,CAAC;AAC5C,YAAI,OAAO,QAAS,QAAO,QAAQ,CAAC;AAAA,MACtC,WAAW,EAAE,SAAS,UAAU;AAC9B,uBAAe,CAAC;AAAA,MAClB,WAAW,EAAE,SAAS,QAAQ;AAC5B,cAAM,gBAAgB,mBAAmB,SAAS,QAAQ,SAAS,GAAG,kBAAkB;AACxF,4BAAoB,QAAQ,aAAa,EAAE,IAAI;AAC/C,6BAAqB,QAAQ,aAAa,EAAE,IAAI;AAAA,MAClD,WAAW,EAAE,SAAS,OAAO;AAC3B,cAAM,gBAAgB,mBAAmB,SAAS,GAAG,oBAAoB,EAAE;AAC3E,4BAAoB,QAAQ,aAAa,EAAE,IAAI;AAC/C,6BAAqB,QAAQ,aAAa,EAAE,IAAI;AAAA,MAClD;AACA,UAAI,OAAO,UAAW,QAAO,UAAU,CAAC;AACxC,oBAAc,CAAC;AAAA,IACjB;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,eAAwC;AAAA,IAC5C,CAAC,MAAwB;AACvB,UAAI,eAAe,QAAS,gBAAe,QAAQ,MAAM;AAAA,UACpD,kBAAiB,SAAS,MAAM;AACrC,uBAAiB,CAAC;AAAA,IACpB;AAAA,IACA,CAAC,gBAAgB,kBAAkB,gBAAgB;AAAA,EACrD;AACA,SAAO,EAAE,WAAW,cAAc,aAAa;AACjD;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport type { DSDropdownMenuT } from '../react-desc-prop-types.js';\nimport { findInCircularList, isOptionFocuseable, manageOpenedSubmenus } from '../utils/index.js';\n\ntype UseDropdownListboxHandlersType = () => {\n  onKeyDown: React.KeyboardEventHandler;\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave?: React.MouseEventHandler;\n};\n\nexport const useDropdownListboxHandlers: UseDropdownListboxHandlersType = () => {\n  const {\n    props: {\n      options,\n      onOptionClick,\n      openedSubmenus,\n      onSubmenuToggle,\n      onKeyDown: userOnKeyDown,\n      selectedOptions,\n      onClickOutside,\n      onMouseEnter: userOnMouseEnter,\n      onMouseLeave,\n    },\n    activeDescendant,\n    setActiveDescendant,\n    scrollOptionIntoView,\n    listboxReference,\n    inputReference,\n  } = useContext(DSDropdownMenuContext);\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      const currentItemIndex = options.findIndex((opt) => opt.dsId === activeDescendant);\n      if (currentItemIndex === -1) return;\n\n      const option = options[currentItemIndex];\n\n      e.stopPropagation();\n\n      if (e.code === 'ArrowDown') {\n        e.preventDefault();\n        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);\n        setActiveDescendant(options[nextItemIndex].dsId);\n        scrollOptionIntoView(options[nextItemIndex].dsId);\n      } else if (e.code === 'ArrowUp') {\n        e.preventDefault();\n        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);\n        setActiveDescendant(options[nextItemIndex].dsId);\n        scrollOptionIntoView(options[nextItemIndex].dsId);\n      } else if (\n        e.code === 'ArrowRight' &&\n        ['submenu', 'singleWithSubmenu'].includes(option.type) &&\n        !openedSubmenus[option.dsId]\n      ) {\n        e.preventDefault();\n        const { type } = option;\n        if (type === 'submenu' || type === 'singleWithSubmenu') {\n          if (option.applyAriaDisabled) return;\n        }\n        onSubmenuToggle(manageOpenedSubmenus(options, { ...openedSubmenus, [option.dsId]: true }, option), option, e);\n      } else if (['Space', 'Enter'].includes(e.code)) {\n        e.preventDefault();\n        const { type } = option;\n        if (type === 'singleWithSubmenu') {\n          if (option.applyAriaDisabled) return;\n        }\n        const nextSelectedOptions = { ...selectedOptions };\n        nextSelectedOptions[option.dsId] = !selectedOptions[option.dsId];\n        if ((option as DSDropdownMenuT.ItemActionOptions)?.disabled) return; // prevent click when is disabled\n        onOptionClick(nextSelectedOptions, option, e);\n        if (option.onClick) option.onClick(e);\n      } else if (e.code === 'Escape') {\n        onClickOutside(e);\n      } else if (e.code === 'Home') {\n        const nextItemIndex = findInCircularList(options, options.length - 1, isOptionFocuseable);\n        setActiveDescendant(options[nextItemIndex].dsId);\n        scrollOptionIntoView(options[nextItemIndex].dsId);\n      } else if (e.code === 'End') {\n        const nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);\n        setActiveDescendant(options[nextItemIndex].dsId);\n        scrollOptionIntoView(options[nextItemIndex].dsId);\n      }\n      if (option.onKeyDown) option.onKeyDown(e);\n      userOnKeyDown(e);\n    },\n    [\n      options,\n      openedSubmenus,\n      userOnKeyDown,\n      activeDescendant,\n      setActiveDescendant,\n      scrollOptionIntoView,\n      onSubmenuToggle,\n      selectedOptions,\n      onOptionClick,\n      onClickOutside,\n    ],\n  );\n\n  const onMouseEnter: React.MouseEventHandler = useCallback(\n    (e: React.MouseEvent) => {\n      if (inputReference.current) inputReference.current.focus();\n      else listboxReference.current?.focus();\n      userOnMouseEnter(e);\n    },\n    [inputReference, listboxReference, userOnMouseEnter],\n  );\n  return { onKeyDown, onMouseEnter, onMouseLeave };\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/hooks/useDropdownMenuItemHandlers.js

@@ -28,6 +28,10 @@ const useDropdownMenuItemHandlers = (option) => {
     (e) => {
       e.stopPropagation();
       e.preventDefault();
+      if (mutableOption?.current?.type === "singleWithSubmenu") {
+        const { applyAriaDisabled } = mutableOption.current;
+        if (applyAriaDisabled) return;
+      }
       const nextSelectedOptions = { ...mutableSelectedOptions.current };
       nextSelectedOptions[mutableOption.current.dsId] = !mutableSelectedOptions.current[mutableOption.current.dsId];
       if (mutableOption?.current?.disabled) return;

package/dist/esm/hooks/useDropdownMenuItemHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useDropdownMenuItemHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { useMakeMutable } from './useMakeMutable.js';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport { manageOpenedSubmenus } from '../utils/index.js';\nimport type { DSDropdownMenuT } from '../react-desc-prop-types.js';\n\ntype UseDropdownMenuItemHandlersType = (option: DSDropdownMenuT.Item) => {\n  onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;\n  onSubmenuOpen: (e: React.MouseEvent | React.KeyboardEvent) => void;\n  onSubmenuClose: (e: React.MouseEvent | React.KeyboardEvent) => void;\n  onDropdownKeyDown: React.KeyboardEventHandler;\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave: React.MouseEventHandler;\n};\n\nexport const useDropdownMenuItemHandlers: UseDropdownMenuItemHandlersType = (option) => {\n  const {\n    props: {\n      options,\n      selectedOptions,\n      onOptionClick,\n      openedSubmenus,\n      onSubmenuToggle,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseDown,\n    },\n    listboxReference,\n    inputReference,\n  } = useContext(DSDropdownMenuContext);\n\n  // it's vital for the opinionated onSubmenuOpen / onSubmenuClose to\n  //   - have access to the latest information about openedSubmenus\n  //   - be as \"pure\" as possible to guarantee that usage with the \"bridge\" pattern\n  //       will be as \"transparent\" as possible (if nested inside async code, redefing the callback may invoke a stale closure)\n  // the whole component is kind of messy so I'm going to implement a quick and dirty solution\n  // I'm going to make all the arguments for the callbacks \"mutable\",\n  //    this is sub-optimal on a performance level but will have to do for now\n  const mutableOption = useMakeMutable(option);\n  const mutableOptions = useMakeMutable(options);\n  const mutableOpenedSubmenus = useMakeMutable(openedSubmenus);\n  const mutableOnSubmenuToggle = useMakeMutable(onSubmenuToggle);\n  const mutableOnOptionClick = useMakeMutable(onOptionClick);\n  const mutableSelectedOptions = useMakeMutable(selectedOptions);\n\n  // This callback is used on single / multi items to toggle the selection\n  const onClick = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      e.stopPropagation();\n      e.preventDefault();\n      const nextSelectedOptions = { ...mutableSelectedOptions.current };\n      nextSelectedOptions[mutableOption.current.dsId] = !mutableSelectedOptions.current[mutableOption.current.dsId];\n      if ((mutableOption?.current as DSDropdownMenuT.ItemActionOptions)?.disabled) return; // prevent click when is disabled\n      mutableOnOptionClick?.current?.(nextSelectedOptions, mutableOption.current, e);\n      // we avoid invoking \"onClick\" twice when the users \"key-down - enter\" on the item by checking if the event is keyboard related\n      if (e.type === 'click') mutableOption?.current?.onClick?.(e);\n    },\n    [mutableOnOptionClick, mutableOption, mutableSelectedOptions],\n  );\n\n  // This callback is used on submenu items to open it onMouseEnter\n  const onSubmenuOpen = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      mutableOnSubmenuToggle?.current?.(\n        manageOpenedSubmenus(\n          mutableOptions.current,\n          { ...(mutableOpenedSubmenus?.current || {}), [mutableOption.current.dsId]: true },\n          mutableOption.current,\n        ),\n        mutableOption.current,\n        e,\n      );\n    },\n    [mutableOnSubmenuToggle, mutableOpenedSubmenus, mutableOption, mutableOptions],\n  );\n\n  // This callback is used on submenu to close it onMouseLeave\n  const onSubmenuClose = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      mutableOnSubmenuToggle?.current?.(\n        manageOpenedSubmenus(\n          mutableOptions.current,\n          { ...(mutableOpenedSubmenus?.current || {}), [mutableOption.current.dsId]: false },\n          mutableOption.current,\n        ),\n        mutableOption.current,\n        e,\n      );\n      if (inputReference.current) inputReference.current.focus();\n      else listboxReference.current?.focus();\n    },\n    [inputReference, listboxReference, mutableOnSubmenuToggle, mutableOpenedSubmenus, mutableOption, mutableOptions],\n  );\n\n  // This callback is used on child dropdown to close the current opened submenu (which spawned it)\n  const onDropdownKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      if (e.code === 'ArrowLeft') {\n        onSubmenuClose(e);\n        e.preventDefault();\n      }\n    },\n    [onSubmenuClose],\n  );\n\n  return useMemo(\n    () => ({\n      onClick,\n      onSubmenuOpen,\n      onSubmenuClose,\n      onDropdownKeyDown,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseDown,\n    }),\n    [onClick, onSubmenuOpen, onSubmenuClose, onDropdownKeyDown, onMouseEnter, onMouseLeave, onMouseDown],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,YAAY,eAAe;AACjD,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AAY9B,MAAM,8BAA+D,CAAC,WAAW;AACtF,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AASpC,QAAM,gBAAgB,eAAe,MAAM;AAC3C,QAAM,iBAAiB,eAAe,OAAO;AAC7C,QAAM,wBAAwB,eAAe,cAAc;AAC3D,QAAM,yBAAyB,eAAe,eAAe;AAC7D,QAAM,uBAAuB,eAAe,aAAa;AACzD,QAAM,yBAAyB,eAAe,eAAe;AAG7D,QAAM,UAAU;AAAA,IACd,CAAC,MAA8C;AAC7C,QAAE,gBAAgB;AAClB,QAAE,eAAe;AACjB,YAAM,sBAAsB,EAAE,GAAG,uBAAuB,QAAQ;AAChE,0BAAoB,cAAc,QAAQ,IAAI,IAAI,CAAC,uBAAuB,QAAQ,cAAc,QAAQ,IAAI;AAC5G,UAAK,eAAe,SAA+C,SAAU;AAC7E,4BAAsB,UAAU,qBAAqB,cAAc,SAAS,CAAC;AAE7E,UAAI,EAAE,SAAS,QAAS,gBAAe,SAAS,UAAU,CAAC;AAAA,IAC7D;AAAA,IACA,CAAC,sBAAsB,eAAe,sBAAsB;AAAA,EAC9D;AAGA,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAA8C;AAC7C,8BAAwB;AAAA,QACtB;AAAA,UACE,eAAe;AAAA,UACf,EAAE,GAAI,uBAAuB,WAAW,CAAC,GAAI,CAAC,cAAc,QAAQ,IAAI,GAAG,KAAK;AAAA,UAChF,cAAc;AAAA,QAChB;AAAA,QACA,cAAc;AAAA,QACd;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,wBAAwB,uBAAuB,eAAe,cAAc;AAAA,EAC/E;AAGA,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAA8C;AAC7C,8BAAwB;AAAA,QACtB;AAAA,UACE,eAAe;AAAA,UACf,EAAE,GAAI,uBAAuB,WAAW,CAAC,GAAI,CAAC,cAAc,QAAQ,IAAI,GAAG,MAAM;AAAA,UACjF,cAAc;AAAA,QAChB;AAAA,QACA,cAAc;AAAA,QACd;AAAA,MACF;AACA,UAAI,eAAe,QAAS,gBAAe,QAAQ,MAAM;AAAA,UACpD,kBAAiB,SAAS,MAAM;AAAA,IACvC;AAAA,IACA,CAAC,gBAAgB,kBAAkB,wBAAwB,uBAAuB,eAAe,cAAc;AAAA,EACjH;AAGA,QAAM,oBAAgD;AAAA,IACpD,CAAC,MAAM;AACL,UAAI,EAAE,SAAS,aAAa;AAC1B,uBAAe,CAAC;AAChB,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,SAAS,eAAe,gBAAgB,mBAAmB,cAAc,cAAc,WAAW;AAAA,EACrG;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { useMakeMutable } from './useMakeMutable.js';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport { manageOpenedSubmenus } from '../utils/index.js';\nimport type { DSDropdownMenuT } from '../react-desc-prop-types.js';\n\ntype UseDropdownMenuItemHandlersType = (option: DSDropdownMenuT.Item) => {\n  onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;\n  onSubmenuOpen: (e: React.MouseEvent | React.KeyboardEvent) => void;\n  onSubmenuClose: (e: React.MouseEvent | React.KeyboardEvent) => void;\n  onDropdownKeyDown: React.KeyboardEventHandler;\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave: React.MouseEventHandler;\n};\n\nexport const useDropdownMenuItemHandlers: UseDropdownMenuItemHandlersType = (option) => {\n  const {\n    props: {\n      options,\n      selectedOptions,\n      onOptionClick,\n      openedSubmenus,\n      onSubmenuToggle,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseDown,\n    },\n    listboxReference,\n    inputReference,\n  } = useContext(DSDropdownMenuContext);\n\n  // it's vital for the opinionated onSubmenuOpen / onSubmenuClose to\n  //   - have access to the latest information about openedSubmenus\n  //   - be as \"pure\" as possible to guarantee that usage with the \"bridge\" pattern\n  //       will be as \"transparent\" as possible (if nested inside async code, redefing the callback may invoke a stale closure)\n  // the whole component is kind of messy so I'm going to implement a quick and dirty solution\n  // I'm going to make all the arguments for the callbacks \"mutable\",\n  //    this is sub-optimal on a performance level but will have to do for now\n  const mutableOption = useMakeMutable(option);\n  const mutableOptions = useMakeMutable(options);\n  const mutableOpenedSubmenus = useMakeMutable(openedSubmenus);\n  const mutableOnSubmenuToggle = useMakeMutable(onSubmenuToggle);\n  const mutableOnOptionClick = useMakeMutable(onOptionClick);\n  const mutableSelectedOptions = useMakeMutable(selectedOptions);\n\n  // This callback is used on single / multi items to toggle the selection\n  const onClick = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      e.stopPropagation();\n      e.preventDefault();\n      if (mutableOption?.current?.type === 'singleWithSubmenu') {\n        const { applyAriaDisabled } = mutableOption.current;\n        if (applyAriaDisabled) return;\n      }\n      const nextSelectedOptions = { ...mutableSelectedOptions.current };\n      nextSelectedOptions[mutableOption.current.dsId] = !mutableSelectedOptions.current[mutableOption.current.dsId];\n      if ((mutableOption?.current as DSDropdownMenuT.ItemActionOptions)?.disabled) return; // prevent click when is disabled\n      mutableOnOptionClick?.current?.(nextSelectedOptions, mutableOption.current, e);\n      // we avoid invoking \"onClick\" twice when the users \"key-down - enter\" on the item by checking if the event is keyboard related\n      if (e.type === 'click') mutableOption?.current?.onClick?.(e);\n    },\n    [mutableOnOptionClick, mutableOption, mutableSelectedOptions],\n  );\n\n  // This callback is used on submenu items to open it onMouseEnter\n  const onSubmenuOpen = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      mutableOnSubmenuToggle?.current?.(\n        manageOpenedSubmenus(\n          mutableOptions.current,\n          { ...(mutableOpenedSubmenus?.current || {}), [mutableOption.current.dsId]: true },\n          mutableOption.current,\n        ),\n        mutableOption.current,\n        e,\n      );\n    },\n    [mutableOnSubmenuToggle, mutableOpenedSubmenus, mutableOption, mutableOptions],\n  );\n\n  // This callback is used on submenu to close it onMouseLeave\n  const onSubmenuClose = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      mutableOnSubmenuToggle?.current?.(\n        manageOpenedSubmenus(\n          mutableOptions.current,\n          { ...(mutableOpenedSubmenus?.current || {}), [mutableOption.current.dsId]: false },\n          mutableOption.current,\n        ),\n        mutableOption.current,\n        e,\n      );\n      if (inputReference.current) inputReference.current.focus();\n      else listboxReference.current?.focus();\n    },\n    [inputReference, listboxReference, mutableOnSubmenuToggle, mutableOpenedSubmenus, mutableOption, mutableOptions],\n  );\n\n  // This callback is used on child dropdown to close the current opened submenu (which spawned it)\n  const onDropdownKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      if (e.code === 'ArrowLeft') {\n        onSubmenuClose(e);\n        e.preventDefault();\n      }\n    },\n    [onSubmenuClose],\n  );\n\n  return useMemo(\n    () => ({\n      onClick,\n      onSubmenuOpen,\n      onSubmenuClose,\n      onDropdownKeyDown,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseDown,\n    }),\n    [onClick, onSubmenuOpen, onSubmenuClose, onDropdownKeyDown, onMouseEnter, onMouseLeave, onMouseDown],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,YAAY,eAAe;AACjD,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AAY9B,MAAM,8BAA+D,CAAC,WAAW;AACtF,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AASpC,QAAM,gBAAgB,eAAe,MAAM;AAC3C,QAAM,iBAAiB,eAAe,OAAO;AAC7C,QAAM,wBAAwB,eAAe,cAAc;AAC3D,QAAM,yBAAyB,eAAe,eAAe;AAC7D,QAAM,uBAAuB,eAAe,aAAa;AACzD,QAAM,yBAAyB,eAAe,eAAe;AAG7D,QAAM,UAAU;AAAA,IACd,CAAC,MAA8C;AAC7C,QAAE,gBAAgB;AAClB,QAAE,eAAe;AACjB,UAAI,eAAe,SAAS,SAAS,qBAAqB;AACxD,cAAM,EAAE,kBAAkB,IAAI,cAAc;AAC5C,YAAI,kBAAmB;AAAA,MACzB;AACA,YAAM,sBAAsB,EAAE,GAAG,uBAAuB,QAAQ;AAChE,0BAAoB,cAAc,QAAQ,IAAI,IAAI,CAAC,uBAAuB,QAAQ,cAAc,QAAQ,IAAI;AAC5G,UAAK,eAAe,SAA+C,SAAU;AAC7E,4BAAsB,UAAU,qBAAqB,cAAc,SAAS,CAAC;AAE7E,UAAI,EAAE,SAAS,QAAS,gBAAe,SAAS,UAAU,CAAC;AAAA,IAC7D;AAAA,IACA,CAAC,sBAAsB,eAAe,sBAAsB;AAAA,EAC9D;AAGA,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAA8C;AAC7C,8BAAwB;AAAA,QACtB;AAAA,UACE,eAAe;AAAA,UACf,EAAE,GAAI,uBAAuB,WAAW,CAAC,GAAI,CAAC,cAAc,QAAQ,IAAI,GAAG,KAAK;AAAA,UAChF,cAAc;AAAA,QAChB;AAAA,QACA,cAAc;AAAA,QACd;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,wBAAwB,uBAAuB,eAAe,cAAc;AAAA,EAC/E;AAGA,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAA8C;AAC7C,8BAAwB;AAAA,QACtB;AAAA,UACE,eAAe;AAAA,UACf,EAAE,GAAI,uBAAuB,WAAW,CAAC,GAAI,CAAC,cAAc,QAAQ,IAAI,GAAG,MAAM;AAAA,UACjF,cAAc;AAAA,QAChB;AAAA,QACA,cAAc;AAAA,QACd;AAAA,MACF;AACA,UAAI,eAAe,QAAS,gBAAe,QAAQ,MAAM;AAAA,UACpD,kBAAiB,SAAS,MAAM;AAAA,IACvC;AAAA,IACA,CAAC,gBAAgB,kBAAkB,wBAAwB,uBAAuB,eAAe,cAAc;AAAA,EACjH;AAGA,QAAM,oBAAgD;AAAA,IACpD,CAAC,MAAM;AACL,UAAI,EAAE,SAAS,aAAa;AAC1B,uBAAe,CAAC;AAChB,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,SAAS,eAAe,gBAAgB,mBAAmB,cAAc,cAAc,WAAW;AAAA,EACrG;AACF;",
   "names": []
 }

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 max-lines */\nimport type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport {\n  type GlobalAttributesT,\n  PropTypes,\n  type XstyledProps,\n  globalAttributesPropTypes,\n  type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport type { SizingProps } from '@elliemae/ds-system';\n\nexport namespace DSDropdownMenuT {\n  export type PopperPlacementsT =\n    | 'top-start'\n    | 'top'\n    | 'top-end'\n    | 'right-start'\n    | 'right'\n    | 'right-end'\n    | 'bottom-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'left-end'\n    | 'left'\n    | 'left-start';\n\n  export interface RequiredProps {\n    options: Item[];\n    isOpened: boolean;\n  }\n\n  export interface DefaultProps {\n    onClickOutside: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n    onKeyDown: React.KeyboardEventHandler;\n    onMouseEnter: React.MouseEventHandler;\n    onMouseLeave: React.MouseEventHandler;\n    selectedOptions: Record<string, boolean>;\n    onOptionClick: (\n      nextSelectedOptions: Record<string, boolean>,\n      clickedOption: Item,\n      e: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n    openedSubmenus: Record<string, boolean>;\n    onSubmenuToggle: (\n      nextOpenedSubmenus: Record<string, boolean>,\n      submenu: Item,\n      e: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n    isLoading: boolean;\n    hasInput: boolean;\n    inputValue: string;\n    inputPlaceholder: string;\n    onInputChange: React.FormEventHandler<HTMLInputElement>;\n    startPlacementPreference: PopperPlacementsT;\n    placementOrderPreference: PopperPlacementsT[];\n    customOffset: [number, number];\n    wrapperStyles: Record<string, unknown>;\n    actionRef: React.MutableRefObject<Record<string, unknown>>;\n    as: keyof JSX.IntrinsicElements;\n    children?: React.ReactNode;\n    isSkeleton: boolean;\n  }\n\n  export interface OptionalProps {\n    zIndex?: number;\n    minWidth?: SizingProps['minWidth'];\n    maxHeight?: SizingProps['maxHeight'];\n    HeaderComp?: React.ComponentType<{ ctx?: DSDropdownMenuT.CTX }>;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      Omit<XstyledProps, 'zIndex'>,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      Omit<XstyledProps, 'zIndex'>,\n      RequiredProps {}\n\n  export interface CTX {\n    props: React.PropsWithChildren<InternalProps>;\n    triggerReferenceElement: HTMLDivElement | null;\n    setTriggerReferenceElement: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n    listboxReference: React.RefObject<HTMLDivElement>;\n    inputReference: React.RefObject<HTMLInputElement>;\n    activeDescendant: string;\n    setActiveDescendant: React.Dispatch<React.SetStateAction<string>>;\n    scrollOptionIntoView: (dsId: string) => void;\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    DSDropdownMenuV2: React.ComponentType<Props>;\n  }\n\n  interface CommonItemOptions extends Omit<GlobalAttributesT, 'value'>, XstyledProps {\n    dsId: string;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    render?: React.ComponentType<any>;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => null;\n  }\n\n  export interface ItemActionOptions extends CommonItemOptions {\n    type: 'action';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n  }\n\n  export interface ItemSingleOptions extends CommonItemOptions {\n    type: 'single';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n  }\n\n  export interface ItemSingleWithSubmenuOptions extends CommonItemOptions {\n    type: 'singleWithSubmenu';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n    rightAddon?: 'chevron' | 'ellipsis';\n    options: Item[];\n  }\n\n  export interface ItemCheckboxOptions extends CommonItemOptions {\n    type: 'checkbox';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n  }\n\n  export interface ItemSubmenuOptions extends CommonItemOptions {\n    type: 'submenu';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n    rightAddon?: 'chevron' | 'ellipsis';\n    options: Item[];\n  }\n\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n  }\n\n  export interface ItemSkeletonOptions extends CommonItemOptions {\n    type: 'skeleton';\n  }\n\n  export type Item =\n    | ItemActionOptions\n    | ItemSingleOptions\n    | ItemCheckboxOptions\n    | ItemSubmenuOptions\n    | ItemSingleWithSubmenuOptions\n    | ItemSeparatorOptions\n    | ItemSectionOptions\n    | ItemSkeletonOptions;\n\n  export interface ItemDictionary {\n    [dsId: string]: {\n      original: Item;\n      containerRef: React.RefObject<HTMLDivElement>;\n      parent: string | null;\n    };\n  }\n}\n\nexport const actionOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['action']),\n  label: PropTypes.string.isRequired,\n  secondaryLabel: PropTypes.string,\n  disabled: PropTypes.bool,\n  render: PropTypes.func,\n});\nexport const singleOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['single']),\n  label: PropTypes.string.isRequired,\n  secondaryLabel: PropTypes.string,\n  value: PropTypes.any.isRequired,\n  disabled: PropTypes.bool,\n  render: PropTypes.func,\n});\nexport const checkboxOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['checkbox']),\n  label: PropTypes.string.isRequired,\n  secondaryLabel: PropTypes.string,\n  value: PropTypes.any.isRequired,\n  disabled: PropTypes.bool,\n  render: PropTypes.func,\n});\nexport const submenuOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['submenu']),\n  label: PropTypes.string.isRequired,\n  secondaryLabel: PropTypes.string,\n  value: PropTypes.any.isRequired,\n  disabled: PropTypes.bool,\n  rightAddon: PropTypes.oneOf(['chevron', 'ellipsis']),\n  options: PropTypes.array,\n  minWidth: PropTypes.any,\n  maxHeight: PropTypes.any,\n  render: PropTypes.func,\n});\nexport const singleWithSubmenuOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['singleWithSubmenu']),\n  label: PropTypes.string.isRequired,\n  secondaryLabel: PropTypes.string,\n  value: PropTypes.any.isRequired,\n  disabled: PropTypes.bool,\n  rightAddon: PropTypes.oneOf(['chevron', 'ellipsis']),\n  options: PropTypes.array,\n  minWidth: PropTypes.any,\n  maxHeight: PropTypes.any,\n  render: PropTypes.func,\n});\nexport const separatorOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['separator']),\n  label: PropTypes.string.isRequired,\n  render: PropTypes.func,\n});\nexport const sectionOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['section']),\n  label: PropTypes.string.isRequired,\n  render: PropTypes.func,\n});\n\nexport const optionTypesSchemas = PropTypes.oneOfType([\n  actionOptionSchema,\n  singleOptionSchema,\n  checkboxOptionSchema,\n  submenuOptionSchema,\n  singleWithSubmenuOptionSchema,\n  separatorOptionSchema,\n  sectionOptionSchema,\n]);\n\nexport const DSDropdownMenuV2PropTypes = {\n  options: PropTypes.arrayOf(optionTypesSchemas).description('The array of option for the menu').omitValidation()\n    .isRequired,\n  isOpened: PropTypes.bool.description('Whether the dropdown menu is opened or not').isRequired,\n  onClickOutside: PropTypes.func\n    .description('Callback executed when you click outside the dropdown menu, or press the Esc key')\n    .defaultValue(() => null),\n  selectedOptions: PropTypes.object\n    .description(\n      'Object with the ids of the options as keys, and booleans as keys. Represents the state of the current selection in the dropdown menu',\n    )\n    .defaultValue({}),\n  onOptionClick: PropTypes.func\n    .description(\n      'Callback triggered when an item is clicked or pressed. We provide the next selected options, the clicked option and the event, in that order',\n    )\n    .defaultValue(() => null),\n  openedSubmenus: PropTypes.object\n    .description(\n      'Object with the ids of the submenus as keys, and booleans as keys. Represents the state of the current opened submenus',\n    )\n    .defaultValue({}),\n  onSubmenuToggle: PropTypes.func\n    .description(\n      'Callback triggered when a submenu is opened or closed. We provide the next opened submenus, the clicked one and the event, in that order',\n    )\n    .defaultValue(() => null),\n  startPlacementPreference: PropTypes.string\n    .description('Where to place the popper for the dropdown menu')\n    .defaultValue('bottom-start'),\n  placementOrderPreference: PropTypes.arrayOf(PropTypes.string)\n    .description('Placement priorities for the dropdown menu')\n    .defaultValue(['bottom-start', 'top-start', 'right-start', 'right-end', 'left-start', 'left-end']),\n  customOffset: PropTypes.arrayOf(PropTypes.number)\n    .description('Custom offset for the dropdown menu')\n    .defaultValue([0, 4]),\n  wrapperStyles: PropTypes.object.description('Styling for the dropdown menu wrapper').defaultValue({}),\n  isLoading: PropTypes.bool\n    .description('Whether the dropdown menu should render the loading indicator')\n    .defaultValue(false),\n  zIndex: PropTypes.number.description('ZIndex for the popper').defaultValue(10),\n  HeaderComp: PropTypes.func\n    .description('Component to render as a header for the dropdown menu')\n    .defaultValue(undefined),\n  actionRef: PropTypes.object.description('Reference where all the exposed action callbacks will be exposed'),\n  minWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),\n  maxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),\n  ...globalAttributesPropTypes,\n  onKeyDown: PropTypes.func.description('Callback executed when a key is pressed').defaultValue(() => null),\n  onMouseEnter: PropTypes.func\n    .description('Callback executed when the mouse enter the dropdown menu')\n    .defaultValue(() => null),\n  onMouseLeave: PropTypes.func\n    .description('Callback executed when the mouse leaves the dropdown menu')\n    .defaultValue(() => null),\n  isSkeleton: PropTypes.bool.description('Whether the dropdown menu should render the skeleton').defaultValue(false),\n} as ValidationMap<unknown>;\n\nexport const defaultProps: DSDropdownMenuT.DefaultProps = {\n  onClickOutside: () => null,\n  onKeyDown: () => null,\n  onMouseEnter: () => null,\n  onMouseLeave: () => null,\n  selectedOptions: {},\n  onOptionClick: () => null,\n  openedSubmenus: {},\n  onSubmenuToggle: () => null,\n  isLoading: false,\n  hasInput: false,\n  inputValue: '',\n  inputPlaceholder: 'Hint text',\n  onInputChange: () => null,\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start', 'right-start', 'right-end', 'left-start', 'left-end'],\n  customOffset: [0, 4],\n  wrapperStyles: {},\n  actionRef: { current: {} },\n  as: 'div',\n  isSkeleton: false,\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport {\n  type GlobalAttributesT,\n  PropTypes,\n  type XstyledProps,\n  globalAttributesPropTypes,\n  type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport type { SizingProps } from '@elliemae/ds-system';\n\nexport namespace DSDropdownMenuT {\n  export type PopperPlacementsT =\n    | 'top-start'\n    | 'top'\n    | 'top-end'\n    | 'right-start'\n    | 'right'\n    | 'right-end'\n    | 'bottom-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'left-end'\n    | 'left'\n    | 'left-start';\n\n  export interface RequiredProps {\n    options: Item[];\n    isOpened: boolean;\n  }\n\n  export interface DefaultProps {\n    onClickOutside: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n    onKeyDown: React.KeyboardEventHandler;\n    onMouseEnter: React.MouseEventHandler;\n    onMouseLeave: React.MouseEventHandler;\n    selectedOptions: Record<string, boolean>;\n    onOptionClick: (\n      nextSelectedOptions: Record<string, boolean>,\n      clickedOption: Item,\n      e: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n    openedSubmenus: Record<string, boolean>;\n    onSubmenuToggle: (\n      nextOpenedSubmenus: Record<string, boolean>,\n      submenu: Item,\n      e: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n    isLoading: boolean;\n    hasInput: boolean;\n    inputValue: string;\n    inputPlaceholder: string;\n    onInputChange: React.FormEventHandler<HTMLInputElement>;\n    startPlacementPreference: PopperPlacementsT;\n    placementOrderPreference: PopperPlacementsT[];\n    customOffset: [number, number];\n    wrapperStyles: Record<string, unknown>;\n    actionRef: React.MutableRefObject<Record<string, unknown>>;\n    as: keyof JSX.IntrinsicElements;\n    children?: React.ReactNode;\n    isSkeleton: boolean;\n  }\n\n  export interface OptionalProps {\n    zIndex?: number;\n    minWidth?: SizingProps['minWidth'];\n    maxHeight?: SizingProps['maxHeight'];\n    HeaderComp?: React.ComponentType<{ ctx?: DSDropdownMenuT.CTX }>;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      Omit<XstyledProps, 'zIndex'>,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      Omit<XstyledProps, 'zIndex'>,\n      RequiredProps {}\n\n  export interface CTX {\n    props: React.PropsWithChildren<InternalProps>;\n    triggerReferenceElement: HTMLDivElement | null;\n    setTriggerReferenceElement: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n    listboxReference: React.RefObject<HTMLDivElement>;\n    inputReference: React.RefObject<HTMLInputElement>;\n    activeDescendant: string;\n    setActiveDescendant: React.Dispatch<React.SetStateAction<string>>;\n    scrollOptionIntoView: (dsId: string) => void;\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    DSDropdownMenuV2: React.ComponentType<Props>;\n  }\n\n  interface CommonItemOptions extends Omit<GlobalAttributesT, 'value'>, XstyledProps {\n    dsId: string;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    render?: React.ComponentType<any>;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => null;\n  }\n\n  export interface ItemActionOptions extends CommonItemOptions {\n    type: 'action';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n    applyAriaDisabled?: boolean;\n  }\n\n  export interface ItemSingleOptions extends CommonItemOptions {\n    type: 'single';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n    applyAriaDisabled?: boolean;\n  }\n\n  export interface ItemSingleWithSubmenuOptions extends CommonItemOptions {\n    type: 'singleWithSubmenu';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n    applyAriaDisabled?: boolean;\n    rightAddon?: 'chevron' | 'ellipsis';\n    options: Item[];\n  }\n\n  export interface ItemCheckboxOptions extends CommonItemOptions {\n    type: 'checkbox';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n    applyAriaDisabled?: boolean;\n  }\n\n  export interface ItemSubmenuOptions extends CommonItemOptions {\n    type: 'submenu';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n    applyAriaDisabled?: boolean;\n    rightAddon?: 'chevron' | 'ellipsis';\n    options: Item[];\n  }\n\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n  }\n\n  export interface ItemSkeletonOptions extends CommonItemOptions {\n    type: 'skeleton';\n  }\n\n  export type Item =\n    | ItemActionOptions\n    | ItemSingleOptions\n    | ItemCheckboxOptions\n    | ItemSubmenuOptions\n    | ItemSingleWithSubmenuOptions\n    | ItemSeparatorOptions\n    | ItemSectionOptions\n    | ItemSkeletonOptions;\n\n  export interface ItemDictionary {\n    [dsId: string]: {\n      original: Item;\n      containerRef: React.RefObject<HTMLDivElement>;\n      parent: string | null;\n    };\n  }\n}\n\nexport const actionOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['action']),\n  label: PropTypes.string.isRequired,\n  secondaryLabel: PropTypes.string,\n  disabled: PropTypes.bool,\n  render: PropTypes.func,\n});\nexport const singleOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['single']),\n  label: PropTypes.string.isRequired,\n  secondaryLabel: PropTypes.string,\n  value: PropTypes.any.isRequired,\n  disabled: PropTypes.bool,\n  render: PropTypes.func,\n});\nexport const checkboxOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['checkbox']),\n  label: PropTypes.string.isRequired,\n  secondaryLabel: PropTypes.string,\n  value: PropTypes.any.isRequired,\n  disabled: PropTypes.bool,\n  render: PropTypes.func,\n});\nexport const submenuOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['submenu']),\n  label: PropTypes.string.isRequired,\n  secondaryLabel: PropTypes.string,\n  value: PropTypes.any.isRequired,\n  disabled: PropTypes.bool,\n  rightAddon: PropTypes.oneOf(['chevron', 'ellipsis']),\n  options: PropTypes.array,\n  minWidth: PropTypes.any,\n  maxHeight: PropTypes.any,\n  render: PropTypes.func,\n});\nexport const singleWithSubmenuOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['singleWithSubmenu']),\n  label: PropTypes.string.isRequired,\n  secondaryLabel: PropTypes.string,\n  value: PropTypes.any.isRequired,\n  disabled: PropTypes.bool,\n  rightAddon: PropTypes.oneOf(['chevron', 'ellipsis']),\n  options: PropTypes.array,\n  minWidth: PropTypes.any,\n  maxHeight: PropTypes.any,\n  render: PropTypes.func,\n});\nexport const separatorOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['separator']),\n  label: PropTypes.string.isRequired,\n  render: PropTypes.func,\n});\nexport const sectionOptionSchema = PropTypes.shape({\n  dsId: PropTypes.string.isRequired,\n  type: PropTypes.oneOf(['section']),\n  label: PropTypes.string.isRequired,\n  render: PropTypes.func,\n});\n\nexport const optionTypesSchemas = PropTypes.oneOfType([\n  actionOptionSchema,\n  singleOptionSchema,\n  checkboxOptionSchema,\n  submenuOptionSchema,\n  singleWithSubmenuOptionSchema,\n  separatorOptionSchema,\n  sectionOptionSchema,\n]);\n\nexport const DSDropdownMenuV2PropTypes = {\n  options: PropTypes.arrayOf(optionTypesSchemas).description('The array of option for the menu').omitValidation()\n    .isRequired,\n  isOpened: PropTypes.bool.description('Whether the dropdown menu is opened or not').isRequired,\n  onClickOutside: PropTypes.func\n    .description('Callback executed when you click outside the dropdown menu, or press the Esc key')\n    .defaultValue(() => null),\n  selectedOptions: PropTypes.object\n    .description(\n      'Object with the ids of the options as keys, and booleans as keys. Represents the state of the current selection in the dropdown menu',\n    )\n    .defaultValue({}),\n  onOptionClick: PropTypes.func\n    .description(\n      'Callback triggered when an item is clicked or pressed. We provide the next selected options, the clicked option and the event, in that order',\n    )\n    .defaultValue(() => null),\n  openedSubmenus: PropTypes.object\n    .description(\n      'Object with the ids of the submenus as keys, and booleans as keys. Represents the state of the current opened submenus',\n    )\n    .defaultValue({}),\n  onSubmenuToggle: PropTypes.func\n    .description(\n      'Callback triggered when a submenu is opened or closed. We provide the next opened submenus, the clicked one and the event, in that order',\n    )\n    .defaultValue(() => null),\n  startPlacementPreference: PropTypes.string\n    .description('Where to place the popper for the dropdown menu')\n    .defaultValue('bottom-start'),\n  placementOrderPreference: PropTypes.arrayOf(PropTypes.string)\n    .description('Placement priorities for the dropdown menu')\n    .defaultValue(['bottom-start', 'top-start', 'right-start', 'right-end', 'left-start', 'left-end']),\n  customOffset: PropTypes.arrayOf(PropTypes.number)\n    .description('Custom offset for the dropdown menu')\n    .defaultValue([0, 4]),\n  wrapperStyles: PropTypes.object.description('Styling for the dropdown menu wrapper').defaultValue({}),\n  isLoading: PropTypes.bool\n    .description('Whether the dropdown menu should render the loading indicator')\n    .defaultValue(false),\n  zIndex: PropTypes.number.description('ZIndex for the popper').defaultValue(10),\n  HeaderComp: PropTypes.func\n    .description('Component to render as a header for the dropdown menu')\n    .defaultValue(undefined),\n  actionRef: PropTypes.object.description('Reference where all the exposed action callbacks will be exposed'),\n  minWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),\n  maxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),\n  ...globalAttributesPropTypes,\n  onKeyDown: PropTypes.func.description('Callback executed when a key is pressed').defaultValue(() => null),\n  onMouseEnter: PropTypes.func\n    .description('Callback executed when the mouse enter the dropdown menu')\n    .defaultValue(() => null),\n  onMouseLeave: PropTypes.func\n    .description('Callback executed when the mouse leaves the dropdown menu')\n    .defaultValue(() => null),\n  isSkeleton: PropTypes.bool.description('Whether the dropdown menu should render the skeleton').defaultValue(false),\n} as ValidationMap<unknown>;\n\nexport const defaultProps: DSDropdownMenuT.DefaultProps = {\n  onClickOutside: () => null,\n  onKeyDown: () => null,\n  onMouseEnter: () => null,\n  onMouseLeave: () => null,\n  selectedOptions: {},\n  onOptionClick: () => null,\n  openedSubmenus: {},\n  onSubmenuToggle: () => null,\n  isLoading: false,\n  hasInput: false,\n  inputValue: '',\n  inputPlaceholder: 'Hint text',\n  onInputChange: () => null,\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start', 'right-start', 'right-end', 'left-start', 'left-end'],\n  customOffset: [0, 4],\n  wrapperStyles: {},\n  actionRef: { current: {} },\n  as: 'div',\n  isSkeleton: false,\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -66,18 +66,21 @@ export declare namespace DSDropdownMenuT {
         label: string;
         value: unknown;
         disabled?: boolean;
+        applyAriaDisabled?: boolean;
     }
     export interface ItemSingleOptions extends CommonItemOptions {
         type: 'single';
         label: string;
         value: unknown;
         disabled?: boolean;
+        applyAriaDisabled?: boolean;
     }
     export interface ItemSingleWithSubmenuOptions extends CommonItemOptions {
         type: 'singleWithSubmenu';
         label: string;
         value: unknown;
         disabled?: boolean;
+        applyAriaDisabled?: boolean;
         rightAddon?: 'chevron' | 'ellipsis';
         options: Item[];
     }
@@ -86,12 +89,14 @@ export declare namespace DSDropdownMenuT {
         label: string;
         value: unknown;
         disabled?: boolean;
+        applyAriaDisabled?: boolean;
     }
     export interface ItemSubmenuOptions extends CommonItemOptions {
         type: 'submenu';
         label: string;
         value: unknown;
         disabled?: boolean;
+        applyAriaDisabled?: boolean;
         rightAddon?: 'chevron' | 'ellipsis';
         options: Item[];
     }

package/dist/types/tests/DSDropdownMenuV2.a11y.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-dropdownmenu-v2",
-  "version": "3.40.1-rc.0",
+  "version": "3.41.0-rc.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Dropdown Menu V2",
   "files": [
@@ -38,18 +38,18 @@
   "dependencies": {
     "@xstyled/system": "~3.7.3",
     "react-virtual": "~2.10.4",
-    "@elliemae/ds-circular-progress-indicator": "3.40.1-rc.0",
-    "@elliemae/ds-form-input-text": "3.40.1-rc.0",
-    "@elliemae/ds-grid": "3.40.1-rc.0",
-    "@elliemae/ds-menu-items": "3.40.1-rc.0",
-    "@elliemae/ds-popperjs": "3.40.1-rc.0",
-    "@elliemae/ds-props-helpers": "3.40.1-rc.0",
-    "@elliemae/ds-system": "3.40.1-rc.0"
+    "@elliemae/ds-circular-progress-indicator": "3.41.0-rc.1",
+    "@elliemae/ds-form-input-text": "3.41.0-rc.1",
+    "@elliemae/ds-popperjs": "3.41.0-rc.1",
+    "@elliemae/ds-menu-items": "3.41.0-rc.1",
+    "@elliemae/ds-props-helpers": "3.41.0-rc.1",
+    "@elliemae/ds-system": "3.41.0-rc.1",
+    "@elliemae/ds-grid": "3.41.0-rc.1"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.50",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.40.1-rc.0"
+    "@elliemae/ds-monorepo-devops": "3.41.0-rc.1"
   },
   "peerDependencies": {
     "@xstyled/styled-components": "~3.6.0",