@elliemae/ds-menu-items 3.22.0-rc.9 → 3.22.0

package/dist/cjs/components/SingleMenuItem/index.js

@@ -35,7 +35,7 @@ __export(SingleMenuItem_exports, {
 module.exports = __toCommonJS(SingleMenuItem_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_useGetGlobalsAndXStyledProps = require("../useGetGlobalsAndXStyledProps.js");
@@ -61,11 +61,19 @@ const SingleMenuItem = (props) => {
     dataTestid,
     disabled
   } = propsWithDefault;
+  const onMouseDownHandler = import_react.default.useCallback(
+    (e) => {
+      if (disabled)
+        return;
+      onMouseDown?.(e);
+    },
+    [disabled, onMouseDown]
+  );
   const { globalAttributes, xStyledProps } = (0, import_useGetGlobalsAndXStyledProps.useGetGlobalsAndXStyledProps)(
     propsWithDefault,
     props.original ? {
       onClick,
-      onMouseDown,
+      onMouseDown: onMouseDownHandler,
       onMouseEnter,
       onMouseLeave
     } : void 0
@@ -86,7 +94,7 @@ const SingleMenuItem = (props) => {
       isSelected,
       onClick,
       ref: innerRef,
-      onMouseDown,
+      onMouseDown: onMouseDownHandler,
       onMouseEnter,
       onMouseLeave,
       className: isActive ? "ds-list-item-active" : "",

package/dist/cjs/components/SingleMenuItem/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/SingleMenuItem/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSingleProps, SingleMenuItemPropTypes } from '../../react-desc-prop-types.js';\nimport {\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n} from '../styled.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst SingleMenuItem: React.ComponentType<DSMenuItemT.SingleProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSingleProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, SingleMenuItemPropTypes, `${DSMenuItemName}Single`);\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    isSelected,\n    onClick,\n    isActive,\n    innerRef,\n    onMouseDown,\n    onMouseEnter,\n    onMouseLeave,\n    wrapperStyles,\n    render: Render,\n    dataTestid,\n    disabled,\n  } = propsWithDefault;\n\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(\n    propsWithDefault,\n    props.original\n      ? {\n          onClick: onClick,\n          onMouseDown: onMouseDown,\n          onMouseEnter: onMouseEnter,\n          onMouseLeave: onMouseLeave,\n        }\n      : undefined,\n  );\n\n  const gridLayout = useMemo(() => {\n    const cols = ['16px', 'auto'];\n    if (secondaryLabel) cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      aria-selected={isSelected}\n      id={dsId}\n      role=\"option\"\n      isActive={isActive}\n      isSelected={isSelected}\n      onClick={onClick}\n      ref={innerRef}\n      onMouseDown={onMouseDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      className={isActive ? 'ds-list-item-active' : ''}\n      style={wrapperStyles}\n      data-testid={dataTestid}\n      disabled={disabled}\n      data-type=\"single\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? (\n        <Render {...props} />\n      ) : (\n        <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n          <div>{isSelected && <Checkmark size=\"s\" color={['brand-primary', '600']} />}</div>\n          <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n          {secondaryLabel !== undefined && <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>}\n        </StyledContentWrapper>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nSingleMenuItem.displayName = 'DSSingleMenuItem';\nconst SingleMenuItemWithSchema = describe(SingleMenuItem);\nSingleMenuItemWithSchema.propTypes = SingleMenuItemPropTypes;\n\nexport { SingleMenuItem, SingleMenuItem as DSSingleMenuItem, SingleMenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0Ef;AA1ER,mBAA+B;AAC/B,8BAAuF;AACvF,sBAA0B;AAC1B,0CAA6C;AAE7C,mCAA4D;AAC5D,oBAKO;AACP,8BAA+B;AAE/B,MAAM,iBAA+D,CAAC,UAAU;AAC9E,QAAM,uBAAmB,sDAA6B,OAAO,+CAAkB;AAE/E,8DAA+B,kBAAkB,sDAAyB,GAAG,8CAAsB;AACnG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,kBAAkB,aAAa,QAAI;AAAA,IACzC;AAAA,IACA,MAAM,WACF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IACA;AAAA,EACN;AAEA,QAAM,iBAAa,sBAAQ,MAAM;AAC/B,UAAM,OAAO,CAAC,QAAQ,MAAM;AAC5B,QAAI;AAAgB,WAAK,KAAK,aAAa;AAC3C,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,WAAW,wBAAwB;AAAA,MAC9C,OAAO;AAAA,MACP,eAAa;AAAA,MACb;AAAA,MACA,aAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SACV,4CAAC,UAAQ,GAAG,OAAO,IAEnB,6CAAC,sCAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E;AAAA,oDAAC,SAAK,wBAAc,4CAAC,6BAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,GAAG;AAAA,QAC5E,4CAAC,oCAAoB,iBAAM;AAAA,QAC1B,mBAAmB,UAAa,4CAAC,6CAA6B,0BAAe;AAAA,SAChF;AAAA;AAAA,EAEJ;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,+BAA2B,kCAAS,cAAc;AACxD,yBAAyB,YAAY;",
-  "names": []
+  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSingleProps, SingleMenuItemPropTypes } from '../../react-desc-prop-types.js';\nimport {\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n} from '../styled.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst SingleMenuItem: React.ComponentType<DSMenuItemT.SingleProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSingleProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, SingleMenuItemPropTypes, `${DSMenuItemName}Single`);\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    isSelected,\n    onClick,\n    isActive,\n    innerRef,\n    onMouseDown,\n    onMouseEnter,\n    onMouseLeave,\n    wrapperStyles,\n    render: Render,\n    dataTestid,\n    disabled,\n  } = propsWithDefault;\n\n  const onMouseDownHandler = React.useCallback(\n    (e: React.MouseEvent) => {\n      if (disabled) return;\n      onMouseDown?.(e);\n    },\n    [disabled, onMouseDown],\n  );\n\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(\n    propsWithDefault,\n    props.original\n      ? {\n          onClick: onClick,\n          onMouseDown: onMouseDownHandler,\n          onMouseEnter: onMouseEnter,\n          onMouseLeave: onMouseLeave,\n        }\n      : undefined,\n  );\n\n  const gridLayout = useMemo(() => {\n    const cols = ['16px', 'auto'];\n    if (secondaryLabel) cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      aria-selected={isSelected}\n      id={dsId}\n      role=\"option\"\n      isActive={isActive}\n      isSelected={isSelected}\n      onClick={onClick}\n      ref={innerRef}\n      onMouseDown={onMouseDownHandler}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      className={isActive ? 'ds-list-item-active' : ''}\n      style={wrapperStyles}\n      data-testid={dataTestid}\n      disabled={disabled}\n      data-type=\"single\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? (\n        <Render {...props} />\n      ) : (\n        <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n          <div>{isSelected && <Checkmark size=\"s\" color={['brand-primary', '600']} />}</div>\n          <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n          {secondaryLabel !== undefined && <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>}\n        </StyledContentWrapper>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nSingleMenuItem.displayName = 'DSSingleMenuItem';\nconst SingleMenuItemWithSchema = describe(SingleMenuItem);\nSingleMenuItemWithSchema.propTypes = SingleMenuItemPropTypes;\n\nexport { SingleMenuItem, SingleMenuItem as DSSingleMenuItem, SingleMenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkFf;AAlFR,mBAA+B;AAC/B,8BAAuF;AACvF,sBAA0B;AAC1B,0CAA6C;AAE7C,mCAA4D;AAC5D,oBAKO;AACP,8BAA+B;AAE/B,MAAM,iBAA+D,CAAC,UAAU;AAC9E,QAAM,uBAAmB,sDAA6B,OAAO,+CAAkB;AAE/E,8DAA+B,kBAAkB,sDAAyB,GAAG,8CAAsB;AACnG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,MAAwB;AACvB,UAAI;AAAU;AACd,oBAAc,CAAC;AAAA,IACjB;AAAA,IACA,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,EAAE,kBAAkB,aAAa,QAAI;AAAA,IACzC;AAAA,IACA,MAAM,WACF;AAAA,MACE;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,IACF,IACA;AAAA,EACN;AAEA,QAAM,iBAAa,sBAAQ,MAAM;AAC/B,UAAM,OAAO,CAAC,QAAQ,MAAM;AAC5B,QAAI;AAAgB,WAAK,KAAK,aAAa;AAC3C,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,WAAW,WAAW,wBAAwB;AAAA,MAC9C,OAAO;AAAA,MACP,eAAa;AAAA,MACb;AAAA,MACA,aAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SACV,4CAAC,UAAQ,GAAG,OAAO,IAEnB,6CAAC,sCAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E;AAAA,oDAAC,SAAK,wBAAc,4CAAC,6BAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,GAAG;AAAA,QAC5E,4CAAC,oCAAoB,iBAAM;AAAA,QAC1B,mBAAmB,UAAa,4CAAC,6CAA6B,0BAAe;AAAA,SAChF;AAAA;AAAA,EAEJ;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,+BAA2B,kCAAS,cAAc;AACxD,yBAAyB,YAAY;",
+  "names": ["React"]
 }

package/dist/cjs/components/SubmenuItem/getChevronHandlers.js

@@ -37,7 +37,9 @@ const getChevronHandlers = ({
   onMouseEnter,
   onSubmenuOpen,
   onSubmenuClose,
-  onMouseLeave
+  onMouseLeave,
+  onMouseDown,
+  disabled
 }) => {
   const timeoutRef = { current: null };
   const onMouseEnterHandler = (e) => {
@@ -57,9 +59,14 @@ const getChevronHandlers = ({
     }
     onMouseLeave?.(e);
   };
+  const onMouseDownHandler = (e) => {
+    if (disabled)
+      return;
+    onMouseDown?.(e);
+  };
   const onEllipsisClick = () => {
     throw new Error("Invoking onEllipsisClick from chevron handlers... this should never happen");
   };
-  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };
+  return { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick };
 };
 //# sourceMappingURL=getChevronHandlers.js.map

package/dist/cjs/components/SubmenuItem/getChevronHandlers.js.map

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

package/dist/cjs/components/SubmenuItem/getEllipsisHandlers.js

@@ -38,10 +38,18 @@ const getEllipsisHandlers = ({
   onMouseEnter,
   onSubmenuOpen,
   onSubmenuClose,
-  onMouseLeave
+  onMouseLeave,
+  onMouseDown
 }) => {
   const onMouseEnterHandler = (e) => onMouseEnter?.(e);
   const onMouseLeaveHandler = (e) => onMouseLeave?.(e);
+  const onMouseDownHandler = (e) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    onMouseDown?.(e);
+  };
   const onEllipsisClick = (e) => {
     if (disabled)
       return;
@@ -51,6 +59,6 @@ const getEllipsisHandlers = ({
     else
       onSubmenuOpen(e);
   };
-  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };
+  return { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick };
 };
 //# sourceMappingURL=getEllipsisHandlers.js.map

package/dist/cjs/components/SubmenuItem/getEllipsisHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/SubmenuItem/getEllipsisHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { DSMenuItemT } from '../../react-desc-prop-types.js';\n\n// what we are trying to do:\n//   onMouseEnter -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//   onMouseLeave -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//   onEllipsisClick -> toggle the submenu open/close as per design\n\n// what are the \"challenges\" of the task:\n//  - we have created the API in such a way that we implement a \"bridge\" and \"inversion of control\" pattern\n//      this requires extra care when handling the logic and designing the solution\n\nexport const getEllipsisHandlers = ({\n  disabled,\n  isSubmenuOpened,\n  onMouseEnter,\n  onSubmenuOpen,\n  onSubmenuClose,\n  onMouseLeave,\n}: Required<DSMenuItemT.SubmenuProps>) => {\n  // why not just onMouseEnterHandler = onMouseEnter?\n  //  we expect onMouseEnterHandler/onMouseLeaveHandler\n  //    to always exist even if onMouseEnter/onMouseLeave are undefined\n  //  also, if in the future we need custom logic for these handlers, we can add it here\n  const onMouseEnterHandler: React.MouseEventHandler = (e) => onMouseEnter?.(e);\n  const onMouseLeaveHandler: React.MouseEventHandler = (e) => onMouseLeave?.(e);\n\n  const onEllipsisClick: React.MouseEventHandler = (e) => {\n    if (disabled) return;\n    e.stopPropagation();\n    if (isSubmenuOpened) onSubmenuClose(e);\n    else onSubmenuOpen(e);\n  };\n\n  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWhB,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0C;AAKxC,QAAM,sBAA+C,CAAC,MAAM,eAAe,CAAC;AAC5E,QAAM,sBAA+C,CAAC,MAAM,eAAe,CAAC;AAE5E,QAAM,kBAA2C,CAAC,MAAM;AACtD,QAAI;AAAU;AACd,MAAE,gBAAgB;AAClB,QAAI;AAAiB,qBAAe,CAAC;AAAA;AAChC,oBAAc,CAAC;AAAA,EACtB;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,gBAAgB;AACrE;",
+  "sourcesContent": ["import type { DSMenuItemT } from '../../react-desc-prop-types.js';\n\n// what we are trying to do:\n//   onMouseEnter -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//   onMouseLeave -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//   onEllipsisClick -> toggle the submenu open/close as per design\n\n// what are the \"challenges\" of the task:\n//  - we have created the API in such a way that we implement a \"bridge\" and \"inversion of control\" pattern\n//      this requires extra care when handling the logic and designing the solution\n\nexport const getEllipsisHandlers = ({\n  disabled,\n  isSubmenuOpened,\n  onMouseEnter,\n  onSubmenuOpen,\n  onSubmenuClose,\n  onMouseLeave,\n  onMouseDown,\n}: Required<DSMenuItemT.SubmenuProps>) => {\n  // why not just onMouseEnterHandler = onMouseEnter?\n  //  we expect onMouseEnterHandler/onMouseLeaveHandler\n  //    to always exist even if onMouseEnter/onMouseLeave are undefined\n  //  also, if in the future we need custom logic for these handlers, we can add it here\n  const onMouseEnterHandler: React.MouseEventHandler = (e) => onMouseEnter?.(e);\n  const onMouseLeaveHandler: React.MouseEventHandler = (e) => onMouseLeave?.(e);\n  const onMouseDownHandler: React.MouseEventHandler = (e) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n    onMouseDown?.(e);\n  };\n  const onEllipsisClick: React.MouseEventHandler = (e) => {\n    if (disabled) return;\n    e.stopPropagation();\n    if (isSubmenuOpened) onSubmenuClose(e);\n    else onSubmenuOpen(e);\n  };\n\n  return { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWhB,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0C;AAKxC,QAAM,sBAA+C,CAAC,MAAM,eAAe,CAAC;AAC5E,QAAM,sBAA+C,CAAC,MAAM,eAAe,CAAC;AAC5E,QAAM,qBAA8C,CAAC,MAAM;AACzD,QAAI,UAAU;AACZ,QAAE,eAAe;AACjB;AAAA,IACF;AACA,kBAAc,CAAC;AAAA,EACjB;AACA,QAAM,kBAA2C,CAAC,MAAM;AACtD,QAAI;AAAU;AACd,MAAE,gBAAgB;AAClB,QAAI;AAAiB,qBAAe,CAAC;AAAA;AAChC,oBAAc,CAAC;AAAA,EACtB;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,oBAAoB,gBAAgB;AACzF;",
   "names": []
 }

package/dist/cjs/components/SubmenuItem/index.js

@@ -74,7 +74,7 @@ const SubmenuItem = (props) => {
   (0, import_react.useEffect)(() => {
     setTimeout(() => setDelayedIsOpened(isSubmenuOpened));
   }, [isSubmenuOpened]);
-  const { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick } = (0, import_useGetSubmenuHandlers.useGetSubmenuHandlers)(propsWithDefault);
+  const { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick } = (0, import_useGetSubmenuHandlers.useGetSubmenuHandlers)(propsWithDefault);
   const gridLayout = (0, import_react.useMemo)(() => {
     const cols = ["auto"];
     if (secondaryLabel !== void 0)
@@ -86,11 +86,12 @@ const SubmenuItem = (props) => {
     propsWithDefault,
     props.original ? {
       onMouseEnter: onMouseEnterHandler,
-      onMouseLeave: onMouseLeaveHandler
+      onMouseLeave: onMouseLeaveHandler,
+      onMouseDown: onMouseDownHandler
     } : void 0
   );
   const { minWidth: customMinWidth, ...restXStyled } = xStyledProps;
-  const { onMouseLeave, onMouseEnter, ...restGlobalAttributes } = globalAttributes;
+  const { onMouseLeave, onMouseEnter, onMouseDown, ...restGlobalAttributes } = globalAttributes;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Dropdown,
     {
@@ -115,6 +116,7 @@ const SubmenuItem = (props) => {
       id: dsId,
       onMouseEnter: onMouseEnterHandler,
       onMouseLeave: onMouseLeaveHandler,
+      onMouseDown: onMouseDownHandler,
       ...restGlobalAttributes,
       ...restXStyled,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(

package/dist/cjs/components/SubmenuItem/index.js.map

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

package/dist/cjs/components/styled.js

@@ -62,7 +62,7 @@ const borderOutside = () => import_ds_system.css`
 `;
 const disabledOption = () => import_ds_system.css`
   color: ${({ theme }) => theme.colors.neutral[500]};
-
+  background-color: ${({ theme }) => theme.colors.neutral["000"]};
   cursor: not-allowed;
   * {
     cursor: not-allowed;
@@ -90,13 +90,17 @@ const StyledGlobalMenuItemWrapper = (0, import_ds_system.styled)("li", {
   return "";
 }};
 
-  background-color: ${(props) => props.isActive ? props.theme.colors.brand[200] : "white"};
+  background-color: ${(props) => props.isActive ? props.theme.colors.brand[200] : props.theme.colors.neutral["000"]};
 
   // focus style for standalone version
   &:focus {
-    ${borderOutside()}
+    ${(props) => {
+  if (props.disabled)
+    return disabledOption();
+  return borderOutside();
+}};
     outline: none;
-    background-color: ${(props) => props.theme.colors.brand[200]};
+    background-color: ${(props) => !props.disabled ? props.theme.colors.brand[200] : props.theme.colors.neutral["000"]};
   }
   &:hover {
     background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};

package/dist/cjs/components/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { LayoutProps, SizingProps, PositionProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuItemName, DSMenuItemSlots } from '../exported-related/index.js';\n\nconst borderOutside = () => css`\n  :after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 1px solid ${({ theme }) => theme.colors.brand[500]};\n    pointer-events: none;\n    z-index: 7;\n  }\n`;\n\nconst disabledOption = () => css`\n  color: ${({ theme }) => theme.colors.neutral[500]};\n\n  cursor: not-allowed;\n  * {\n    cursor: not-allowed;\n  }\n`;\n\ninterface StyledGlobalMenuItemWrapperT extends LayoutProps, SizingProps, PositionProps, SpaceProps {\n  isSelected?: boolean;\n  isActive?: boolean;\n  disabled?: boolean;\n}\n\nexport const StyledGlobalMenuItemWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_WRAPPER,\n})<StyledGlobalMenuItemWrapperT>`\n  cursor: pointer;\n  min-height: 32px;\n\n  padding-left: 16px;\n  padding-right: 16px;\n  display: grid;\n  align-items: center;\n  list-style: none;\n  position: relative;\n\n  ${(props) => {\n    if (props.disabled) return disabledOption();\n    if (props.isActive) return borderOutside();\n    return '';\n  }};\n\n  background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : 'white')};\n\n  // focus style for standalone version\n  &:focus {\n    ${borderOutside()}\n    outline: none;\n    background-color: ${(props) => props.theme.colors.brand[200]};\n  }\n  &:hover {\n    background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};\n  }\n  ${xStyledCommonProps}\n`;\n\nexport const StyleMenuItemLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`\n  padding: 8px 0;\n  font-size: 13px;\n`;\n\nexport const StyleMenuItemSecondaryLabel = styled('span', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SECONDARY_LABEL,\n})`\n  padding: 8px 0;\n  font-size: 11px;\n  font-style: italic;\n  color: brand-800;\n`;\n\nexport const StyledIconContainer = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_ICON })`\n  width: 25px;\n  height: 24px;\n  display: grid;\n  grid-template-columns: min-content auto;\n  place-items: center;\n`;\n\nexport const StyledEllipsisButton = styled('div', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_ELLIPSIS_BUTTON,\n})<{ disabled: boolean }>`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: grid;\n  place-items: center;\n  background: transparent;\n  :active {\n    ${(props) => (props.disabled ? '' : borderOutside())}\n  }\n`;\n\nexport const StyledItemContent = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_CONTENT })`\n  display: flex;\n  width: 100%;\n  margin: 8px 0px;\n`;\n\nexport const StyledSeparator = styled('hr', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR })`\n  border: 0;\n  border-top: 1px solid #697489;\n  margin: 4px 0px;\n  padding: 0;\n`;\n\nexport const StyledSeparatorWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR_WRAPPER,\n})`\n  list-style: none;\n  padding: 0px 16px;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledGroupLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL })`\n  font-size: 13px;\n  color: neutral-500;\n`;\n\nexport const StyledSectionWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER,\n})`\n  list-style: none;\n  padding: 0px 16px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_VERTICAL_SEPARATOR,\n})`\n  width: 1px;\n  height: 18px;\n  background-color: neutral-300;\n`;\n\nexport const StyledContentWrapper = styled(Grid, {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_CONTENT_WRAPPER,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAgD;AAChD,qBAAqB;AACrB,8BAAgD;AAEhD,MAAM,gBAAgB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASJ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAM7D,MAAM,iBAAiB,MAAM;AAAA,WAClB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc3C,MAAM,kCAA8B,yBAAO,MAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWG,CAAC,UAAU;AACX,MAAI,MAAM;AAAU,WAAO,eAAe;AAC1C,MAAI,MAAM;AAAU,WAAO,cAAc;AACzC,SAAO;AACT;AAAA;AAAA,sBAEoB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,GAAG,IAAI;AAAA;AAAA;AAAA;AAAA,MAI7E,cAAc;AAAA;AAAA,wBAEI,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,wBAGvC,CAAC,UAAU,CAAC,MAAM,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,IAE9E;AAAA;AAGG,MAAM,yBAAqB,yBAAO,QAAQ,EAAE,MAAM,wCAAgB,MAAM,wCAAgB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAKzG,MAAM,kCAA8B,yBAAO,QAAQ;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,wCAAgB,MAAM,wCAAgB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQxG,MAAM,2BAAuB,yBAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQK,CAAC,UAAW,MAAM,WAAW,KAAK,cAAc;AAAA;AAAA;AAI/C,MAAM,wBAAoB,yBAAO,OAAO,EAAE,MAAM,wCAAgB,MAAM,wCAAgB,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMzG,MAAM,sBAAkB,yBAAO,MAAM,EAAE,MAAM,wCAAgB,MAAM,wCAAgB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxG,MAAM,6BAAyB,yBAAO,MAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG;AAAA;AAGG,MAAM,uBAAmB,yBAAO,QAAQ,EAAE,MAAM,wCAAgB,MAAM,wCAAgB,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAK7G,MAAM,2BAAuB,yBAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOG;AAAA;AAGG,MAAM,8BAA0B,yBAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;",
+  "sourcesContent": ["import type { LayoutProps, SizingProps, PositionProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuItemName, DSMenuItemSlots } from '../exported-related/index.js';\n\nconst borderOutside = () => css`\n  :after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 1px solid ${({ theme }) => theme.colors.brand[500]};\n    pointer-events: none;\n    z-index: 7;\n  }\n`;\n\nconst disabledOption = () => css`\n  color: ${({ theme }) => theme.colors.neutral[500]};\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  cursor: not-allowed;\n  * {\n    cursor: not-allowed;\n  }\n`;\n\ninterface StyledGlobalMenuItemWrapperT extends LayoutProps, SizingProps, PositionProps, SpaceProps {\n  isSelected?: boolean;\n  isActive?: boolean;\n  disabled?: boolean;\n}\n\nexport const StyledGlobalMenuItemWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_WRAPPER,\n})<StyledGlobalMenuItemWrapperT>`\n  cursor: pointer;\n  min-height: 32px;\n\n  padding-left: 16px;\n  padding-right: 16px;\n  display: grid;\n  align-items: center;\n  list-style: none;\n  position: relative;\n\n  ${(props) => {\n    if (props.disabled) return disabledOption();\n    if (props.isActive) return borderOutside();\n    return '';\n  }};\n\n  background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : props.theme.colors.neutral['000'])};\n\n  // focus style for standalone version\n  &:focus {\n    ${(props) => {\n      if (props.disabled) return disabledOption();\n      return borderOutside();\n    }};\n    outline: none;\n    background-color: ${(props) =>\n      !props.disabled ? props.theme.colors.brand[200] : props.theme.colors.neutral['000']};\n  }\n  &:hover {\n    background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};\n  }\n  ${xStyledCommonProps}\n`;\n\nexport const StyleMenuItemLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`\n  padding: 8px 0;\n  font-size: 13px;\n`;\n\nexport const StyleMenuItemSecondaryLabel = styled('span', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SECONDARY_LABEL,\n})`\n  padding: 8px 0;\n  font-size: 11px;\n  font-style: italic;\n  color: brand-800;\n`;\n\nexport const StyledIconContainer = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_ICON })`\n  width: 25px;\n  height: 24px;\n  display: grid;\n  grid-template-columns: min-content auto;\n  place-items: center;\n`;\n\nexport const StyledEllipsisButton = styled('div', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_ELLIPSIS_BUTTON,\n})<{ disabled: boolean }>`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: grid;\n  place-items: center;\n  background: transparent;\n  :active {\n    ${(props) => (props.disabled ? '' : borderOutside())}\n  }\n`;\n\nexport const StyledItemContent = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_CONTENT })`\n  display: flex;\n  width: 100%;\n  margin: 8px 0px;\n`;\n\nexport const StyledSeparator = styled('hr', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR })`\n  border: 0;\n  border-top: 1px solid #697489;\n  margin: 4px 0px;\n  padding: 0;\n`;\n\nexport const StyledSeparatorWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR_WRAPPER,\n})`\n  list-style: none;\n  padding: 0px 16px;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledGroupLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL })`\n  font-size: 13px;\n  color: neutral-500;\n`;\n\nexport const StyledSectionWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER,\n})`\n  list-style: none;\n  padding: 0px 16px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_VERTICAL_SEPARATOR,\n})`\n  width: 1px;\n  height: 18px;\n  background-color: neutral-300;\n`;\n\nexport const StyledContentWrapper = styled(Grid, {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_CONTENT_WRAPPER,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "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 */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { PropsWithChildren, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nexport namespace DSMenuItemT {\n  export interface CommonProps<T = Record<string, unknown>> {\n    dsId: string;\n    innerRef?: React.RefObject<HTMLLIElement> | ((_ref: HTMLLIElement) => void);\n    wrapperStyles?: Record<string, unknown>;\n    render?: React.ComponentType<T>;\n    original?: Record<string, unknown>;\n  }\n\n  export interface ActionProps extends CommonProps<ActionProps> {\n    label?: string;\n    secondaryLabel?: string;\n    value?: unknown;\n    disabled?: boolean;\n    isActive?: boolean;\n    onClick?: React.MouseEventHandler;\n    optionsShouldHavePadding?: boolean;\n    tabIndex: WCAGTabIndex;\n  }\n\n  export interface SkeletonProps extends CommonProps<ActionProps> {\n    secondaryLabel?: string;\n    isActive?: boolean;\n    onClick?: React.MouseEventHandler;\n    tabIndex?: WCAGTabIndex;\n  }\n\n  export interface MultiProps extends CommonProps<MultiProps> {\n    label?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSelected?: boolean;\n    onClick?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    dataTestid?: string;\n    tabIndex?: WCAGTabIndex;\n  }\n\n  export interface SingleProps extends CommonProps<SingleProps> {\n    label?: string;\n    secondaryLabel?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSelected?: boolean;\n    onClick?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    dataTestid?: string;\n    tabIndex?: number;\n  }\n\n  export interface SubmenuProps extends CommonProps<SubmenuProps> {\n    label?: string;\n    secondaryLabel?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSubmenuOpened?: boolean;\n    onSubmenuOpen?: React.MouseEventHandler;\n    onSubmenuClose?: React.MouseEventHandler;\n    rightAddon?: 'ellipsis' | 'chevron';\n    optionsShouldHavePadding?: boolean;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    Dropdown: React.ComponentType<PropsWithChildren<SubmenuProps['dropdownProps']>>;\n    dropdownProps?: {\n      options: any[];\n      onSubmenuToggle?: (\n        nextOpenedSubmenus: Record<string, boolean>,\n        submenu: any,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      openedSubmenus?: Record<string, boolean>;\n      selectedOptions?: Record<string, boolean>;\n      onKeyDown?: React.KeyboardEventHandler;\n      onOptionClick?: (\n        nextSelectedOptions: Record<string, boolean>,\n        clickedOption: any,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      onClickOutside?: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n      minWidth?: SizingProps['minWidth'];\n      maxHeight?: SizingProps['maxHeight'];\n      [key: string]: unknown;\n    };\n  }\n\n  export interface SectionProps extends CommonProps<SectionProps> {\n    label?: string;\n  }\n\n  export type SeparatorProps = CommonProps<SeparatorProps>;\n\n  export interface SingleWithSubmenuProps extends Omit<SingleProps, 'render'>, Omit<SubmenuProps, 'render'> {\n    render?: React.ComponentType<SingleWithSubmenuProps>;\n  }\n  export type AllTypeItems = ActionProps | MultiProps | SingleProps | SubmenuProps | SectionProps | SeparatorProps;\n}\n\nconst noop = () => null;\n\nexport const defaultCommonProps: Partial<Omit<DSMenuItemT.CommonProps, 'render'>> = {\n  innerRef: noop,\n  wrapperStyles: {},\n};\n\nexport const defaultActionProps: Partial<DSMenuItemT.ActionProps> = {\n  ...defaultCommonProps,\n  label: '',\n  value: undefined,\n  disabled: false,\n  isActive: false,\n  onClick: noop,\n  optionsShouldHavePadding: false,\n  tabIndex: 0,\n};\n\nexport const defaultMultiProps: Partial<DSMenuItemT.MultiProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSelected: false,\n  onClick: noop,\n  onMouseDown: noop,\n  onMouseEnter: noop,\n  onMouseLeave: noop,\n  tabIndex: 0,\n};\n\nexport const defaultSingleProps: Partial<DSMenuItemT.SingleProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSelected: false,\n  onClick: noop,\n  onMouseDown: noop,\n  onMouseEnter: noop,\n  onMouseLeave: noop,\n  dataTestid: 'ds-menu-item',\n  tabIndex: 0,\n};\n\nexport const defaultSubmenuProps: Partial<DSMenuItemT.SubmenuProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSubmenuOpened: false,\n  onSubmenuOpen: noop,\n  rightAddon: 'chevron',\n  optionsShouldHavePadding: false,\n  Dropdown: noop,\n  dropdownProps: {\n    options: [],\n    onSubmenuToggle: noop,\n    openedSubmenus: {},\n    selectedOptions: {},\n    onKeyDown: noop,\n    onOptionClick: noop,\n    onClickOutside: noop,\n    minWidth: 'auto',\n    maxHeight: 'auto',\n  },\n};\n\nexport const defaultSectionProps: Partial<DSMenuItemT.SectionProps> = {\n  ...defaultCommonProps,\n  label: '',\n};\n\nexport const defaultSeparatorProps: Partial<DSMenuItemT.SeparatorProps> = {\n  ...defaultCommonProps,\n};\n\nexport const defaultSingleWithSubmenuProps: Partial<Omit<DSMenuItemT.SingleWithSubmenuProps, 'render'>> = {\n  ...defaultSingleProps,\n  ...defaultSubmenuProps,\n};\n\nexport const itemProps = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  dsId: PropTypes.string,\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n  wrapperStyles: PropTypes.object,\n  render: PropTypes.func,\n} as WeakValidationMap<unknown>;\n\nexport const MenuItemPropTypes = {\n  dsId: PropTypes.string.description('The unique ID for the menu item.').isRequired,\n  innerRef: PropTypes.oneOfType([\n    PropTypes.shape({\n      current: PropTypes.node,\n    }),\n    PropTypes.func.description(\n      ' A ref object or callback function to access the underlying DOM element (HTMLLIElement) of the menu item.',\n    ),\n  ]),\n  render: PropTypes.func.description('A custom render function to render the content of the menu item.'),\n} as WeakValidationMap<unknown>;\n\nexport const SingleMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n  secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.'),\n  disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n  isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const MultiMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n  secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.'),\n  disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n  isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const ActionMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n  value: PropTypes.any.description('The value of the menu item.'),\n  disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.'),\n} as WeakValidationMap<unknown>;\n\nexport const SectionMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { PropsWithChildren, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nexport namespace DSMenuItemT {\n  export interface CommonProps<T = Record<string, unknown>> {\n    dsId: string;\n    innerRef?: React.RefObject<HTMLLIElement> | ((_ref: HTMLLIElement) => void);\n    wrapperStyles?: Record<string, unknown>;\n    render?: React.ComponentType<T>;\n    original?: Record<string, unknown>;\n  }\n\n  export interface ActionProps extends CommonProps<ActionProps> {\n    label?: string;\n    secondaryLabel?: string;\n    value?: unknown;\n    disabled?: boolean;\n    isActive?: boolean;\n    onClick?: React.MouseEventHandler;\n    optionsShouldHavePadding?: boolean;\n    tabIndex: WCAGTabIndex;\n  }\n\n  export interface SkeletonProps extends CommonProps<ActionProps> {\n    secondaryLabel?: string;\n    isActive?: boolean;\n    onClick?: React.MouseEventHandler;\n    tabIndex?: WCAGTabIndex;\n  }\n\n  export interface MultiProps extends CommonProps<MultiProps> {\n    label?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSelected?: boolean;\n    onClick?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    dataTestid?: string;\n    tabIndex?: WCAGTabIndex;\n  }\n\n  export interface SingleProps extends CommonProps<SingleProps> {\n    label?: string;\n    secondaryLabel?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSelected?: boolean;\n    onClick?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    dataTestid?: string;\n    tabIndex?: number;\n  }\n\n  export interface SubmenuProps extends CommonProps<SubmenuProps> {\n    label?: string;\n    secondaryLabel?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSubmenuOpened?: boolean;\n    onSubmenuOpen?: React.MouseEventHandler;\n    onSubmenuClose?: React.MouseEventHandler;\n    rightAddon?: 'ellipsis' | 'chevron';\n    optionsShouldHavePadding?: boolean;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n    Dropdown: React.ComponentType<PropsWithChildren<SubmenuProps['dropdownProps']>>;\n    dropdownProps?: {\n      options: any[];\n      onSubmenuToggle?: (\n        nextOpenedSubmenus: Record<string, boolean>,\n        submenu: any,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      openedSubmenus?: Record<string, boolean>;\n      selectedOptions?: Record<string, boolean>;\n      onKeyDown?: React.KeyboardEventHandler;\n      onOptionClick?: (\n        nextSelectedOptions: Record<string, boolean>,\n        clickedOption: any,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      onClickOutside?: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n      minWidth?: SizingProps['minWidth'];\n      maxHeight?: SizingProps['maxHeight'];\n      [key: string]: unknown;\n    };\n  }\n\n  export interface SectionProps extends CommonProps<SectionProps> {\n    label?: string;\n  }\n\n  export type SeparatorProps = CommonProps<SeparatorProps>;\n\n  export interface SingleWithSubmenuProps extends Omit<SingleProps, 'render'>, Omit<SubmenuProps, 'render'> {\n    render?: React.ComponentType<SingleWithSubmenuProps>;\n  }\n  export type AllTypeItems = ActionProps | MultiProps | SingleProps | SubmenuProps | SectionProps | SeparatorProps;\n}\n\nconst noop = () => null;\n\nexport const defaultCommonProps: Partial<Omit<DSMenuItemT.CommonProps, 'render'>> = {\n  innerRef: noop,\n  wrapperStyles: {},\n};\n\nexport const defaultActionProps: Partial<DSMenuItemT.ActionProps> = {\n  ...defaultCommonProps,\n  label: '',\n  value: undefined,\n  disabled: false,\n  isActive: false,\n  onClick: noop,\n  optionsShouldHavePadding: false,\n  tabIndex: 0,\n};\n\nexport const defaultMultiProps: Partial<DSMenuItemT.MultiProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSelected: false,\n  onClick: noop,\n  onMouseDown: noop,\n  onMouseEnter: noop,\n  onMouseLeave: noop,\n  tabIndex: 0,\n};\n\nexport const defaultSingleProps: Partial<DSMenuItemT.SingleProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSelected: false,\n  onClick: noop,\n  onMouseDown: noop,\n  onMouseEnter: noop,\n  onMouseLeave: noop,\n  dataTestid: 'ds-menu-item',\n  tabIndex: 0,\n};\n\nexport const defaultSubmenuProps: Partial<DSMenuItemT.SubmenuProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSubmenuOpened: false,\n  onSubmenuOpen: noop,\n  rightAddon: 'chevron',\n  optionsShouldHavePadding: false,\n  Dropdown: noop,\n  dropdownProps: {\n    options: [],\n    onSubmenuToggle: noop,\n    openedSubmenus: {},\n    selectedOptions: {},\n    onKeyDown: noop,\n    onOptionClick: noop,\n    onClickOutside: noop,\n    minWidth: 'auto',\n    maxHeight: 'auto',\n  },\n};\n\nexport const defaultSectionProps: Partial<DSMenuItemT.SectionProps> = {\n  ...defaultCommonProps,\n  label: '',\n};\n\nexport const defaultSeparatorProps: Partial<DSMenuItemT.SeparatorProps> = {\n  ...defaultCommonProps,\n};\n\nexport const defaultSingleWithSubmenuProps: Partial<Omit<DSMenuItemT.SingleWithSubmenuProps, 'render'>> = {\n  ...defaultSingleProps,\n  ...defaultSubmenuProps,\n};\n\nexport const itemProps = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  dsId: PropTypes.string,\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n  wrapperStyles: PropTypes.object,\n  render: PropTypes.func,\n} as WeakValidationMap<unknown>;\n\nexport const MenuItemPropTypes = {\n  dsId: PropTypes.string.description('The unique ID for the menu item.').isRequired,\n  innerRef: PropTypes.oneOfType([\n    PropTypes.shape({\n      current: PropTypes.node,\n    }),\n    PropTypes.func.description(\n      ' A ref object or callback function to access the underlying DOM element (HTMLLIElement) of the menu item.',\n    ),\n  ]),\n  render: PropTypes.func.description('A custom render function to render the content of the menu item.'),\n} as WeakValidationMap<unknown>;\n\nexport const SingleMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n  secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.'),\n  disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n  isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const MultiMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n  secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.'),\n  disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n  isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const ActionMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n  value: PropTypes.any.description('The value of the menu item.'),\n  disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.'),\n} as WeakValidationMap<unknown>;\n\nexport const SectionMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/components/SingleMenuItem/index.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import React2, { useMemo } from "react";
 import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
 import { Checkmark } from "@elliemae/ds-icons";
 import { useGetGlobalsAndXStyledProps } from "../useGetGlobalsAndXStyledProps.js";
@@ -31,11 +31,19 @@ const SingleMenuItem = (props) => {
     dataTestid,
     disabled
   } = propsWithDefault;
+  const onMouseDownHandler = React2.useCallback(
+    (e) => {
+      if (disabled)
+        return;
+      onMouseDown?.(e);
+    },
+    [disabled, onMouseDown]
+  );
   const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(
     propsWithDefault,
     props.original ? {
       onClick,
-      onMouseDown,
+      onMouseDown: onMouseDownHandler,
       onMouseEnter,
       onMouseLeave
     } : void 0
@@ -56,7 +64,7 @@ const SingleMenuItem = (props) => {
       isSelected,
       onClick,
       ref: innerRef,
-      onMouseDown,
+      onMouseDown: onMouseDownHandler,
       onMouseEnter,
       onMouseLeave,
       className: isActive ? "ds-list-item-active" : "",

package/dist/esm/components/SingleMenuItem/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SingleMenuItem/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSingleProps, SingleMenuItemPropTypes } from '../../react-desc-prop-types.js';\nimport {\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n} from '../styled.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst SingleMenuItem: React.ComponentType<DSMenuItemT.SingleProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSingleProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, SingleMenuItemPropTypes, `${DSMenuItemName}Single`);\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    isSelected,\n    onClick,\n    isActive,\n    innerRef,\n    onMouseDown,\n    onMouseEnter,\n    onMouseLeave,\n    wrapperStyles,\n    render: Render,\n    dataTestid,\n    disabled,\n  } = propsWithDefault;\n\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(\n    propsWithDefault,\n    props.original\n      ? {\n          onClick: onClick,\n          onMouseDown: onMouseDown,\n          onMouseEnter: onMouseEnter,\n          onMouseLeave: onMouseLeave,\n        }\n      : undefined,\n  );\n\n  const gridLayout = useMemo(() => {\n    const cols = ['16px', 'auto'];\n    if (secondaryLabel) cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      aria-selected={isSelected}\n      id={dsId}\n      role=\"option\"\n      isActive={isActive}\n      isSelected={isSelected}\n      onClick={onClick}\n      ref={innerRef}\n      onMouseDown={onMouseDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      className={isActive ? 'ds-list-item-active' : ''}\n      style={wrapperStyles}\n      data-testid={dataTestid}\n      disabled={disabled}\n      data-type=\"single\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? (\n        <Render {...props} />\n      ) : (\n        <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n          <div>{isSelected && <Checkmark size=\"s\" color={['brand-primary', '600']} />}</div>\n          <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n          {secondaryLabel !== undefined && <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>}\n        </StyledContentWrapper>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nSingleMenuItem.displayName = 'DSSingleMenuItem';\nconst SingleMenuItemWithSchema = describe(SingleMenuItem);\nSingleMenuItemWithSchema.propTypes = SingleMenuItemPropTypes;\n\nexport { SingleMenuItem, SingleMenuItem as DSSingleMenuItem, SingleMenuItemWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC0Ef,cAEA,YAFA;AA1ER,SAAgB,eAAe;AAC/B,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,iBAAiB;AAC1B,SAAS,oCAAoC;AAE7C,SAAS,oBAAoB,+BAA+B;AAC5D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAE/B,MAAM,iBAA+D,CAAC,UAAU;AAC9E,QAAM,mBAAmB,6BAA6B,OAAO,kBAAkB;AAE/E,iCAA+B,kBAAkB,yBAAyB,GAAG,sBAAsB;AACnG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,kBAAkB,aAAa,IAAI;AAAA,IACzC;AAAA,IACA,MAAM,WACF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IACA;AAAA,EACN;AAEA,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,OAAO,CAAC,QAAQ,MAAM;AAC5B,QAAI;AAAgB,WAAK,KAAK,aAAa;AAC3C,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,WAAW,wBAAwB;AAAA,MAC9C,OAAO;AAAA,MACP,eAAa;AAAA,MACb;AAAA,MACA,aAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SACV,oBAAC,UAAQ,GAAG,OAAO,IAEnB,qBAAC,wBAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E;AAAA,4BAAC,SAAK,wBAAc,oBAAC,aAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,GAAG;AAAA,QAC5E,oBAAC,sBAAoB,iBAAM;AAAA,QAC1B,mBAAmB,UAAa,oBAAC,+BAA6B,0BAAe;AAAA,SAChF;AAAA;AAAA,EAEJ;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSingleProps, SingleMenuItemPropTypes } from '../../react-desc-prop-types.js';\nimport {\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n} from '../styled.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst SingleMenuItem: React.ComponentType<DSMenuItemT.SingleProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSingleProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, SingleMenuItemPropTypes, `${DSMenuItemName}Single`);\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    isSelected,\n    onClick,\n    isActive,\n    innerRef,\n    onMouseDown,\n    onMouseEnter,\n    onMouseLeave,\n    wrapperStyles,\n    render: Render,\n    dataTestid,\n    disabled,\n  } = propsWithDefault;\n\n  const onMouseDownHandler = React.useCallback(\n    (e: React.MouseEvent) => {\n      if (disabled) return;\n      onMouseDown?.(e);\n    },\n    [disabled, onMouseDown],\n  );\n\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(\n    propsWithDefault,\n    props.original\n      ? {\n          onClick: onClick,\n          onMouseDown: onMouseDownHandler,\n          onMouseEnter: onMouseEnter,\n          onMouseLeave: onMouseLeave,\n        }\n      : undefined,\n  );\n\n  const gridLayout = useMemo(() => {\n    const cols = ['16px', 'auto'];\n    if (secondaryLabel) cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      aria-selected={isSelected}\n      id={dsId}\n      role=\"option\"\n      isActive={isActive}\n      isSelected={isSelected}\n      onClick={onClick}\n      ref={innerRef}\n      onMouseDown={onMouseDownHandler}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      className={isActive ? 'ds-list-item-active' : ''}\n      style={wrapperStyles}\n      data-testid={dataTestid}\n      disabled={disabled}\n      data-type=\"single\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? (\n        <Render {...props} />\n      ) : (\n        <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n          <div>{isSelected && <Checkmark size=\"s\" color={['brand-primary', '600']} />}</div>\n          <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n          {secondaryLabel !== undefined && <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>}\n        </StyledContentWrapper>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nSingleMenuItem.displayName = 'DSSingleMenuItem';\nconst SingleMenuItemWithSchema = describe(SingleMenuItem);\nSingleMenuItemWithSchema.propTypes = SingleMenuItemPropTypes;\n\nexport { SingleMenuItem, SingleMenuItem as DSSingleMenuItem, SingleMenuItemWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkFf,cAEA,YAFA;AAlFR,OAAOA,UAAS,eAAe;AAC/B,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,iBAAiB;AAC1B,SAAS,oCAAoC;AAE7C,SAAS,oBAAoB,+BAA+B;AAC5D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAE/B,MAAM,iBAA+D,CAAC,UAAU;AAC9E,QAAM,mBAAmB,6BAA6B,OAAO,kBAAkB;AAE/E,iCAA+B,kBAAkB,yBAAyB,GAAG,sBAAsB;AACnG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,qBAAqBA,OAAM;AAAA,IAC/B,CAAC,MAAwB;AACvB,UAAI;AAAU;AACd,oBAAc,CAAC;AAAA,IACjB;AAAA,IACA,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,EAAE,kBAAkB,aAAa,IAAI;AAAA,IACzC;AAAA,IACA,MAAM,WACF;AAAA,MACE;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,IACF,IACA;AAAA,EACN;AAEA,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,OAAO,CAAC,QAAQ,MAAM;AAC5B,QAAI;AAAgB,WAAK,KAAK,aAAa;AAC3C,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,WAAW,WAAW,wBAAwB;AAAA,MAC9C,OAAO;AAAA,MACP,eAAa;AAAA,MACb;AAAA,MACA,aAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SACV,oBAAC,UAAQ,GAAG,OAAO,IAEnB,qBAAC,wBAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E;AAAA,4BAAC,SAAK,wBAAc,oBAAC,aAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,GAAG;AAAA,QAC5E,oBAAC,sBAAoB,iBAAM;AAAA,QAC1B,mBAAmB,UAAa,oBAAC,+BAA6B,0BAAe;AAAA,SAChF;AAAA;AAAA,EAEJ;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
+  "names": ["React"]
 }

package/dist/esm/components/SubmenuItem/getChevronHandlers.js

@@ -4,7 +4,9 @@ const getChevronHandlers = ({
   onMouseEnter,
   onSubmenuOpen,
   onSubmenuClose,
-  onMouseLeave
+  onMouseLeave,
+  onMouseDown,
+  disabled
 }) => {
   const timeoutRef = { current: null };
   const onMouseEnterHandler = (e) => {
@@ -24,10 +26,15 @@ const getChevronHandlers = ({
     }
     onMouseLeave?.(e);
   };
+  const onMouseDownHandler = (e) => {
+    if (disabled)
+      return;
+    onMouseDown?.(e);
+  };
   const onEllipsisClick = () => {
     throw new Error("Invoking onEllipsisClick from chevron handlers... this should never happen");
   };
-  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };
+  return { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick };
 };
 export {
   getChevronHandlers

package/dist/esm/components/SubmenuItem/getChevronHandlers.js.map

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

package/dist/esm/components/SubmenuItem/getEllipsisHandlers.js

@@ -5,10 +5,18 @@ const getEllipsisHandlers = ({
   onMouseEnter,
   onSubmenuOpen,
   onSubmenuClose,
-  onMouseLeave
+  onMouseLeave,
+  onMouseDown
 }) => {
   const onMouseEnterHandler = (e) => onMouseEnter?.(e);
   const onMouseLeaveHandler = (e) => onMouseLeave?.(e);
+  const onMouseDownHandler = (e) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    onMouseDown?.(e);
+  };
   const onEllipsisClick = (e) => {
     if (disabled)
       return;
@@ -18,7 +26,7 @@ const getEllipsisHandlers = ({
     else
       onSubmenuOpen(e);
   };
-  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };
+  return { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick };
 };
 export {
   getEllipsisHandlers

package/dist/esm/components/SubmenuItem/getEllipsisHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SubmenuItem/getEllipsisHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSMenuItemT } from '../../react-desc-prop-types.js';\n\n// what we are trying to do:\n//   onMouseEnter -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//   onMouseLeave -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//   onEllipsisClick -> toggle the submenu open/close as per design\n\n// what are the \"challenges\" of the task:\n//  - we have created the API in such a way that we implement a \"bridge\" and \"inversion of control\" pattern\n//      this requires extra care when handling the logic and designing the solution\n\nexport const getEllipsisHandlers = ({\n  disabled,\n  isSubmenuOpened,\n  onMouseEnter,\n  onSubmenuOpen,\n  onSubmenuClose,\n  onMouseLeave,\n}: Required<DSMenuItemT.SubmenuProps>) => {\n  // why not just onMouseEnterHandler = onMouseEnter?\n  //  we expect onMouseEnterHandler/onMouseLeaveHandler\n  //    to always exist even if onMouseEnter/onMouseLeave are undefined\n  //  also, if in the future we need custom logic for these handlers, we can add it here\n  const onMouseEnterHandler: React.MouseEventHandler = (e) => onMouseEnter?.(e);\n  const onMouseLeaveHandler: React.MouseEventHandler = (e) => onMouseLeave?.(e);\n\n  const onEllipsisClick: React.MouseEventHandler = (e) => {\n    if (disabled) return;\n    e.stopPropagation();\n    if (isSubmenuOpened) onSubmenuClose(e);\n    else onSubmenuOpen(e);\n  };\n\n  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACWhB,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0C;AAKxC,QAAM,sBAA+C,CAAC,MAAM,eAAe,CAAC;AAC5E,QAAM,sBAA+C,CAAC,MAAM,eAAe,CAAC;AAE5E,QAAM,kBAA2C,CAAC,MAAM;AACtD,QAAI;AAAU;AACd,MAAE,gBAAgB;AAClB,QAAI;AAAiB,qBAAe,CAAC;AAAA;AAChC,oBAAc,CAAC;AAAA,EACtB;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,gBAAgB;AACrE;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSMenuItemT } from '../../react-desc-prop-types.js';\n\n// what we are trying to do:\n//   onMouseEnter -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//   onMouseLeave -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//   onEllipsisClick -> toggle the submenu open/close as per design\n\n// what are the \"challenges\" of the task:\n//  - we have created the API in such a way that we implement a \"bridge\" and \"inversion of control\" pattern\n//      this requires extra care when handling the logic and designing the solution\n\nexport const getEllipsisHandlers = ({\n  disabled,\n  isSubmenuOpened,\n  onMouseEnter,\n  onSubmenuOpen,\n  onSubmenuClose,\n  onMouseLeave,\n  onMouseDown,\n}: Required<DSMenuItemT.SubmenuProps>) => {\n  // why not just onMouseEnterHandler = onMouseEnter?\n  //  we expect onMouseEnterHandler/onMouseLeaveHandler\n  //    to always exist even if onMouseEnter/onMouseLeave are undefined\n  //  also, if in the future we need custom logic for these handlers, we can add it here\n  const onMouseEnterHandler: React.MouseEventHandler = (e) => onMouseEnter?.(e);\n  const onMouseLeaveHandler: React.MouseEventHandler = (e) => onMouseLeave?.(e);\n  const onMouseDownHandler: React.MouseEventHandler = (e) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n    onMouseDown?.(e);\n  };\n  const onEllipsisClick: React.MouseEventHandler = (e) => {\n    if (disabled) return;\n    e.stopPropagation();\n    if (isSubmenuOpened) onSubmenuClose(e);\n    else onSubmenuOpen(e);\n  };\n\n  return { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACWhB,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0C;AAKxC,QAAM,sBAA+C,CAAC,MAAM,eAAe,CAAC;AAC5E,QAAM,sBAA+C,CAAC,MAAM,eAAe,CAAC;AAC5E,QAAM,qBAA8C,CAAC,MAAM;AACzD,QAAI,UAAU;AACZ,QAAE,eAAe;AACjB;AAAA,IACF;AACA,kBAAc,CAAC;AAAA,EACjB;AACA,QAAM,kBAA2C,CAAC,MAAM;AACtD,QAAI;AAAU;AACd,MAAE,gBAAgB;AAClB,QAAI;AAAiB,qBAAe,CAAC;AAAA;AAChC,oBAAc,CAAC;AAAA,EACtB;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,oBAAoB,gBAAgB;AACzF;",
   "names": []
 }

package/dist/esm/components/SubmenuItem/index.js

@@ -48,7 +48,7 @@ const SubmenuItem = (props) => {
   useEffect(() => {
     setTimeout(() => setDelayedIsOpened(isSubmenuOpened));
   }, [isSubmenuOpened]);
-  const { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick } = useGetSubmenuHandlers(propsWithDefault);
+  const { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick } = useGetSubmenuHandlers(propsWithDefault);
   const gridLayout = useMemo(() => {
     const cols = ["auto"];
     if (secondaryLabel !== void 0)
@@ -60,11 +60,12 @@ const SubmenuItem = (props) => {
     propsWithDefault,
     props.original ? {
       onMouseEnter: onMouseEnterHandler,
-      onMouseLeave: onMouseLeaveHandler
+      onMouseLeave: onMouseLeaveHandler,
+      onMouseDown: onMouseDownHandler
     } : void 0
   );
   const { minWidth: customMinWidth, ...restXStyled } = xStyledProps;
-  const { onMouseLeave, onMouseEnter, ...restGlobalAttributes } = globalAttributes;
+  const { onMouseLeave, onMouseEnter, onMouseDown, ...restGlobalAttributes } = globalAttributes;
   return /* @__PURE__ */ jsx(
     Dropdown,
     {
@@ -89,6 +90,7 @@ const SubmenuItem = (props) => {
       id: dsId,
       onMouseEnter: onMouseEnterHandler,
       onMouseLeave: onMouseLeaveHandler,
+      onMouseDown: onMouseDownHandler,
       ...restGlobalAttributes,
       ...restXStyled,
       children: /* @__PURE__ */ jsxs(

package/dist/esm/components/SubmenuItem/index.js.map

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

package/dist/esm/components/styled.js

@@ -18,7 +18,7 @@ const borderOutside = () => css`
 `;
 const disabledOption = () => css`
   color: ${({ theme }) => theme.colors.neutral[500]};
-
+  background-color: ${({ theme }) => theme.colors.neutral["000"]};
   cursor: not-allowed;
   * {
     cursor: not-allowed;
@@ -46,13 +46,17 @@ const StyledGlobalMenuItemWrapper = styled("li", {
   return "";
 }};
 
-  background-color: ${(props) => props.isActive ? props.theme.colors.brand[200] : "white"};
+  background-color: ${(props) => props.isActive ? props.theme.colors.brand[200] : props.theme.colors.neutral["000"]};
 
   // focus style for standalone version
   &:focus {
-    ${borderOutside()}
+    ${(props) => {
+  if (props.disabled)
+    return disabledOption();
+  return borderOutside();
+}};
     outline: none;
-    background-color: ${(props) => props.theme.colors.brand[200]};
+    background-color: ${(props) => !props.disabled ? props.theme.colors.brand[200] : props.theme.colors.neutral["000"]};
   }
   &:hover {
     background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};

package/dist/esm/components/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { LayoutProps, SizingProps, PositionProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuItemName, DSMenuItemSlots } from '../exported-related/index.js';\n\nconst borderOutside = () => css`\n  :after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 1px solid ${({ theme }) => theme.colors.brand[500]};\n    pointer-events: none;\n    z-index: 7;\n  }\n`;\n\nconst disabledOption = () => css`\n  color: ${({ theme }) => theme.colors.neutral[500]};\n\n  cursor: not-allowed;\n  * {\n    cursor: not-allowed;\n  }\n`;\n\ninterface StyledGlobalMenuItemWrapperT extends LayoutProps, SizingProps, PositionProps, SpaceProps {\n  isSelected?: boolean;\n  isActive?: boolean;\n  disabled?: boolean;\n}\n\nexport const StyledGlobalMenuItemWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_WRAPPER,\n})<StyledGlobalMenuItemWrapperT>`\n  cursor: pointer;\n  min-height: 32px;\n\n  padding-left: 16px;\n  padding-right: 16px;\n  display: grid;\n  align-items: center;\n  list-style: none;\n  position: relative;\n\n  ${(props) => {\n    if (props.disabled) return disabledOption();\n    if (props.isActive) return borderOutside();\n    return '';\n  }};\n\n  background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : 'white')};\n\n  // focus style for standalone version\n  &:focus {\n    ${borderOutside()}\n    outline: none;\n    background-color: ${(props) => props.theme.colors.brand[200]};\n  }\n  &:hover {\n    background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};\n  }\n  ${xStyledCommonProps}\n`;\n\nexport const StyleMenuItemLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`\n  padding: 8px 0;\n  font-size: 13px;\n`;\n\nexport const StyleMenuItemSecondaryLabel = styled('span', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SECONDARY_LABEL,\n})`\n  padding: 8px 0;\n  font-size: 11px;\n  font-style: italic;\n  color: brand-800;\n`;\n\nexport const StyledIconContainer = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_ICON })`\n  width: 25px;\n  height: 24px;\n  display: grid;\n  grid-template-columns: min-content auto;\n  place-items: center;\n`;\n\nexport const StyledEllipsisButton = styled('div', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_ELLIPSIS_BUTTON,\n})<{ disabled: boolean }>`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: grid;\n  place-items: center;\n  background: transparent;\n  :active {\n    ${(props) => (props.disabled ? '' : borderOutside())}\n  }\n`;\n\nexport const StyledItemContent = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_CONTENT })`\n  display: flex;\n  width: 100%;\n  margin: 8px 0px;\n`;\n\nexport const StyledSeparator = styled('hr', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR })`\n  border: 0;\n  border-top: 1px solid #697489;\n  margin: 4px 0px;\n  padding: 0;\n`;\n\nexport const StyledSeparatorWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR_WRAPPER,\n})`\n  list-style: none;\n  padding: 0px 16px;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledGroupLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL })`\n  font-size: 13px;\n  color: neutral-500;\n`;\n\nexport const StyledSectionWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER,\n})`\n  list-style: none;\n  padding: 0px 16px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_VERTICAL_SEPARATOR,\n})`\n  width: 1px;\n  height: 18px;\n  background-color: neutral-300;\n`;\n\nexport const StyledContentWrapper = styled(Grid, {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_CONTENT_WRAPPER,\n})``;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD,SAAS,YAAY;AACrB,SAAS,gBAAgB,uBAAuB;AAEhD,MAAM,gBAAgB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASJ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAM7D,MAAM,iBAAiB,MAAM;AAAA,WAClB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc3C,MAAM,8BAA8B,OAAO,MAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWG,CAAC,UAAU;AACX,MAAI,MAAM;AAAU,WAAO,eAAe;AAC1C,MAAI,MAAM;AAAU,WAAO,cAAc;AACzC,SAAO;AACT;AAAA;AAAA,sBAEoB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,GAAG,IAAI;AAAA;AAAA;AAAA;AAAA,MAI7E,cAAc;AAAA;AAAA,wBAEI,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,wBAGvC,CAAC,UAAU,CAAC,MAAM,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,IAE9E;AAAA;AAGG,MAAM,qBAAqB,OAAO,QAAQ,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAKzG,MAAM,8BAA8B,OAAO,QAAQ;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQxG,MAAM,uBAAuB,OAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQK,CAAC,UAAW,MAAM,WAAW,KAAK,cAAc;AAAA;AAAA;AAI/C,MAAM,oBAAoB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMzG,MAAM,kBAAkB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxG,MAAM,yBAAyB,OAAO,MAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG;AAAA;AAGG,MAAM,mBAAmB,OAAO,QAAQ,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAK7G,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOG;AAAA;AAGG,MAAM,0BAA0B,OAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { LayoutProps, SizingProps, PositionProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuItemName, DSMenuItemSlots } from '../exported-related/index.js';\n\nconst borderOutside = () => css`\n  :after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 1px solid ${({ theme }) => theme.colors.brand[500]};\n    pointer-events: none;\n    z-index: 7;\n  }\n`;\n\nconst disabledOption = () => css`\n  color: ${({ theme }) => theme.colors.neutral[500]};\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  cursor: not-allowed;\n  * {\n    cursor: not-allowed;\n  }\n`;\n\ninterface StyledGlobalMenuItemWrapperT extends LayoutProps, SizingProps, PositionProps, SpaceProps {\n  isSelected?: boolean;\n  isActive?: boolean;\n  disabled?: boolean;\n}\n\nexport const StyledGlobalMenuItemWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_WRAPPER,\n})<StyledGlobalMenuItemWrapperT>`\n  cursor: pointer;\n  min-height: 32px;\n\n  padding-left: 16px;\n  padding-right: 16px;\n  display: grid;\n  align-items: center;\n  list-style: none;\n  position: relative;\n\n  ${(props) => {\n    if (props.disabled) return disabledOption();\n    if (props.isActive) return borderOutside();\n    return '';\n  }};\n\n  background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : props.theme.colors.neutral['000'])};\n\n  // focus style for standalone version\n  &:focus {\n    ${(props) => {\n      if (props.disabled) return disabledOption();\n      return borderOutside();\n    }};\n    outline: none;\n    background-color: ${(props) =>\n      !props.disabled ? props.theme.colors.brand[200] : props.theme.colors.neutral['000']};\n  }\n  &:hover {\n    background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};\n  }\n  ${xStyledCommonProps}\n`;\n\nexport const StyleMenuItemLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`\n  padding: 8px 0;\n  font-size: 13px;\n`;\n\nexport const StyleMenuItemSecondaryLabel = styled('span', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SECONDARY_LABEL,\n})`\n  padding: 8px 0;\n  font-size: 11px;\n  font-style: italic;\n  color: brand-800;\n`;\n\nexport const StyledIconContainer = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_ICON })`\n  width: 25px;\n  height: 24px;\n  display: grid;\n  grid-template-columns: min-content auto;\n  place-items: center;\n`;\n\nexport const StyledEllipsisButton = styled('div', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_ELLIPSIS_BUTTON,\n})<{ disabled: boolean }>`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: grid;\n  place-items: center;\n  background: transparent;\n  :active {\n    ${(props) => (props.disabled ? '' : borderOutside())}\n  }\n`;\n\nexport const StyledItemContent = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_CONTENT })`\n  display: flex;\n  width: 100%;\n  margin: 8px 0px;\n`;\n\nexport const StyledSeparator = styled('hr', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR })`\n  border: 0;\n  border-top: 1px solid #697489;\n  margin: 4px 0px;\n  padding: 0;\n`;\n\nexport const StyledSeparatorWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR_WRAPPER,\n})`\n  list-style: none;\n  padding: 0px 16px;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledGroupLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL })`\n  font-size: 13px;\n  color: neutral-500;\n`;\n\nexport const StyledSectionWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER,\n})`\n  list-style: none;\n  padding: 0px 16px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_VERTICAL_SEPARATOR,\n})`\n  width: 1px;\n  height: 18px;\n  background-color: neutral-300;\n`;\n\nexport const StyledContentWrapper = styled(Grid, {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_CONTENT_WRAPPER,\n})``;\n"],
+  "mappings": "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",
   "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 */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { PropsWithChildren, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nexport namespace DSMenuItemT {\n  export interface CommonProps<T = Record<string, unknown>> {\n    dsId: string;\n    innerRef?: React.RefObject<HTMLLIElement> | ((_ref: HTMLLIElement) => void);\n    wrapperStyles?: Record<string, unknown>;\n    render?: React.ComponentType<T>;\n    original?: Record<string, unknown>;\n  }\n\n  export interface ActionProps extends CommonProps<ActionProps> {\n    label?: string;\n    secondaryLabel?: string;\n    value?: unknown;\n    disabled?: boolean;\n    isActive?: boolean;\n    onClick?: React.MouseEventHandler;\n    optionsShouldHavePadding?: boolean;\n    tabIndex: WCAGTabIndex;\n  }\n\n  export interface SkeletonProps extends CommonProps<ActionProps> {\n    secondaryLabel?: string;\n    isActive?: boolean;\n    onClick?: React.MouseEventHandler;\n    tabIndex?: WCAGTabIndex;\n  }\n\n  export interface MultiProps extends CommonProps<MultiProps> {\n    label?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSelected?: boolean;\n    onClick?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    dataTestid?: string;\n    tabIndex?: WCAGTabIndex;\n  }\n\n  export interface SingleProps extends CommonProps<SingleProps> {\n    label?: string;\n    secondaryLabel?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSelected?: boolean;\n    onClick?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    dataTestid?: string;\n    tabIndex?: number;\n  }\n\n  export interface SubmenuProps extends CommonProps<SubmenuProps> {\n    label?: string;\n    secondaryLabel?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSubmenuOpened?: boolean;\n    onSubmenuOpen?: React.MouseEventHandler;\n    onSubmenuClose?: React.MouseEventHandler;\n    rightAddon?: 'ellipsis' | 'chevron';\n    optionsShouldHavePadding?: boolean;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    Dropdown: React.ComponentType<PropsWithChildren<SubmenuProps['dropdownProps']>>;\n    dropdownProps?: {\n      options: any[];\n      onSubmenuToggle?: (\n        nextOpenedSubmenus: Record<string, boolean>,\n        submenu: any,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      openedSubmenus?: Record<string, boolean>;\n      selectedOptions?: Record<string, boolean>;\n      onKeyDown?: React.KeyboardEventHandler;\n      onOptionClick?: (\n        nextSelectedOptions: Record<string, boolean>,\n        clickedOption: any,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      onClickOutside?: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n      minWidth?: SizingProps['minWidth'];\n      maxHeight?: SizingProps['maxHeight'];\n      [key: string]: unknown;\n    };\n  }\n\n  export interface SectionProps extends CommonProps<SectionProps> {\n    label?: string;\n  }\n\n  export type SeparatorProps = CommonProps<SeparatorProps>;\n\n  export interface SingleWithSubmenuProps extends Omit<SingleProps, 'render'>, Omit<SubmenuProps, 'render'> {\n    render?: React.ComponentType<SingleWithSubmenuProps>;\n  }\n  export type AllTypeItems = ActionProps | MultiProps | SingleProps | SubmenuProps | SectionProps | SeparatorProps;\n}\n\nconst noop = () => null;\n\nexport const defaultCommonProps: Partial<Omit<DSMenuItemT.CommonProps, 'render'>> = {\n  innerRef: noop,\n  wrapperStyles: {},\n};\n\nexport const defaultActionProps: Partial<DSMenuItemT.ActionProps> = {\n  ...defaultCommonProps,\n  label: '',\n  value: undefined,\n  disabled: false,\n  isActive: false,\n  onClick: noop,\n  optionsShouldHavePadding: false,\n  tabIndex: 0,\n};\n\nexport const defaultMultiProps: Partial<DSMenuItemT.MultiProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSelected: false,\n  onClick: noop,\n  onMouseDown: noop,\n  onMouseEnter: noop,\n  onMouseLeave: noop,\n  tabIndex: 0,\n};\n\nexport const defaultSingleProps: Partial<DSMenuItemT.SingleProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSelected: false,\n  onClick: noop,\n  onMouseDown: noop,\n  onMouseEnter: noop,\n  onMouseLeave: noop,\n  dataTestid: 'ds-menu-item',\n  tabIndex: 0,\n};\n\nexport const defaultSubmenuProps: Partial<DSMenuItemT.SubmenuProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSubmenuOpened: false,\n  onSubmenuOpen: noop,\n  rightAddon: 'chevron',\n  optionsShouldHavePadding: false,\n  Dropdown: noop,\n  dropdownProps: {\n    options: [],\n    onSubmenuToggle: noop,\n    openedSubmenus: {},\n    selectedOptions: {},\n    onKeyDown: noop,\n    onOptionClick: noop,\n    onClickOutside: noop,\n    minWidth: 'auto',\n    maxHeight: 'auto',\n  },\n};\n\nexport const defaultSectionProps: Partial<DSMenuItemT.SectionProps> = {\n  ...defaultCommonProps,\n  label: '',\n};\n\nexport const defaultSeparatorProps: Partial<DSMenuItemT.SeparatorProps> = {\n  ...defaultCommonProps,\n};\n\nexport const defaultSingleWithSubmenuProps: Partial<Omit<DSMenuItemT.SingleWithSubmenuProps, 'render'>> = {\n  ...defaultSingleProps,\n  ...defaultSubmenuProps,\n};\n\nexport const itemProps = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  dsId: PropTypes.string,\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n  wrapperStyles: PropTypes.object,\n  render: PropTypes.func,\n} as WeakValidationMap<unknown>;\n\nexport const MenuItemPropTypes = {\n  dsId: PropTypes.string.description('The unique ID for the menu item.').isRequired,\n  innerRef: PropTypes.oneOfType([\n    PropTypes.shape({\n      current: PropTypes.node,\n    }),\n    PropTypes.func.description(\n      ' A ref object or callback function to access the underlying DOM element (HTMLLIElement) of the menu item.',\n    ),\n  ]),\n  render: PropTypes.func.description('A custom render function to render the content of the menu item.'),\n} as WeakValidationMap<unknown>;\n\nexport const SingleMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n  secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.'),\n  disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n  isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const MultiMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n  secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.'),\n  disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n  isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const ActionMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n  value: PropTypes.any.description('The value of the menu item.'),\n  disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.'),\n} as WeakValidationMap<unknown>;\n\nexport const SectionMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n} as WeakValidationMap<unknown>;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { PropsWithChildren, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nexport namespace DSMenuItemT {\n  export interface CommonProps<T = Record<string, unknown>> {\n    dsId: string;\n    innerRef?: React.RefObject<HTMLLIElement> | ((_ref: HTMLLIElement) => void);\n    wrapperStyles?: Record<string, unknown>;\n    render?: React.ComponentType<T>;\n    original?: Record<string, unknown>;\n  }\n\n  export interface ActionProps extends CommonProps<ActionProps> {\n    label?: string;\n    secondaryLabel?: string;\n    value?: unknown;\n    disabled?: boolean;\n    isActive?: boolean;\n    onClick?: React.MouseEventHandler;\n    optionsShouldHavePadding?: boolean;\n    tabIndex: WCAGTabIndex;\n  }\n\n  export interface SkeletonProps extends CommonProps<ActionProps> {\n    secondaryLabel?: string;\n    isActive?: boolean;\n    onClick?: React.MouseEventHandler;\n    tabIndex?: WCAGTabIndex;\n  }\n\n  export interface MultiProps extends CommonProps<MultiProps> {\n    label?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSelected?: boolean;\n    onClick?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    dataTestid?: string;\n    tabIndex?: WCAGTabIndex;\n  }\n\n  export interface SingleProps extends CommonProps<SingleProps> {\n    label?: string;\n    secondaryLabel?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSelected?: boolean;\n    onClick?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    dataTestid?: string;\n    tabIndex?: number;\n  }\n\n  export interface SubmenuProps extends CommonProps<SubmenuProps> {\n    label?: string;\n    secondaryLabel?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSubmenuOpened?: boolean;\n    onSubmenuOpen?: React.MouseEventHandler;\n    onSubmenuClose?: React.MouseEventHandler;\n    rightAddon?: 'ellipsis' | 'chevron';\n    optionsShouldHavePadding?: boolean;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n    Dropdown: React.ComponentType<PropsWithChildren<SubmenuProps['dropdownProps']>>;\n    dropdownProps?: {\n      options: any[];\n      onSubmenuToggle?: (\n        nextOpenedSubmenus: Record<string, boolean>,\n        submenu: any,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      openedSubmenus?: Record<string, boolean>;\n      selectedOptions?: Record<string, boolean>;\n      onKeyDown?: React.KeyboardEventHandler;\n      onOptionClick?: (\n        nextSelectedOptions: Record<string, boolean>,\n        clickedOption: any,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      onClickOutside?: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n      minWidth?: SizingProps['minWidth'];\n      maxHeight?: SizingProps['maxHeight'];\n      [key: string]: unknown;\n    };\n  }\n\n  export interface SectionProps extends CommonProps<SectionProps> {\n    label?: string;\n  }\n\n  export type SeparatorProps = CommonProps<SeparatorProps>;\n\n  export interface SingleWithSubmenuProps extends Omit<SingleProps, 'render'>, Omit<SubmenuProps, 'render'> {\n    render?: React.ComponentType<SingleWithSubmenuProps>;\n  }\n  export type AllTypeItems = ActionProps | MultiProps | SingleProps | SubmenuProps | SectionProps | SeparatorProps;\n}\n\nconst noop = () => null;\n\nexport const defaultCommonProps: Partial<Omit<DSMenuItemT.CommonProps, 'render'>> = {\n  innerRef: noop,\n  wrapperStyles: {},\n};\n\nexport const defaultActionProps: Partial<DSMenuItemT.ActionProps> = {\n  ...defaultCommonProps,\n  label: '',\n  value: undefined,\n  disabled: false,\n  isActive: false,\n  onClick: noop,\n  optionsShouldHavePadding: false,\n  tabIndex: 0,\n};\n\nexport const defaultMultiProps: Partial<DSMenuItemT.MultiProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSelected: false,\n  onClick: noop,\n  onMouseDown: noop,\n  onMouseEnter: noop,\n  onMouseLeave: noop,\n  tabIndex: 0,\n};\n\nexport const defaultSingleProps: Partial<DSMenuItemT.SingleProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSelected: false,\n  onClick: noop,\n  onMouseDown: noop,\n  onMouseEnter: noop,\n  onMouseLeave: noop,\n  dataTestid: 'ds-menu-item',\n  tabIndex: 0,\n};\n\nexport const defaultSubmenuProps: Partial<DSMenuItemT.SubmenuProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSubmenuOpened: false,\n  onSubmenuOpen: noop,\n  rightAddon: 'chevron',\n  optionsShouldHavePadding: false,\n  Dropdown: noop,\n  dropdownProps: {\n    options: [],\n    onSubmenuToggle: noop,\n    openedSubmenus: {},\n    selectedOptions: {},\n    onKeyDown: noop,\n    onOptionClick: noop,\n    onClickOutside: noop,\n    minWidth: 'auto',\n    maxHeight: 'auto',\n  },\n};\n\nexport const defaultSectionProps: Partial<DSMenuItemT.SectionProps> = {\n  ...defaultCommonProps,\n  label: '',\n};\n\nexport const defaultSeparatorProps: Partial<DSMenuItemT.SeparatorProps> = {\n  ...defaultCommonProps,\n};\n\nexport const defaultSingleWithSubmenuProps: Partial<Omit<DSMenuItemT.SingleWithSubmenuProps, 'render'>> = {\n  ...defaultSingleProps,\n  ...defaultSubmenuProps,\n};\n\nexport const itemProps = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  dsId: PropTypes.string,\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n  wrapperStyles: PropTypes.object,\n  render: PropTypes.func,\n} as WeakValidationMap<unknown>;\n\nexport const MenuItemPropTypes = {\n  dsId: PropTypes.string.description('The unique ID for the menu item.').isRequired,\n  innerRef: PropTypes.oneOfType([\n    PropTypes.shape({\n      current: PropTypes.node,\n    }),\n    PropTypes.func.description(\n      ' A ref object or callback function to access the underlying DOM element (HTMLLIElement) of the menu item.',\n    ),\n  ]),\n  render: PropTypes.func.description('A custom render function to render the content of the menu item.'),\n} as WeakValidationMap<unknown>;\n\nexport const SingleMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n  secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.'),\n  disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n  isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const MultiMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n  secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.'),\n  disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n  isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const ActionMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n  value: PropTypes.any.description('The value of the menu item.'),\n  disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.'),\n} as WeakValidationMap<unknown>;\n\nexport const SectionMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n} as WeakValidationMap<unknown>;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/types/components/SubmenuItem/getChevronHandlers.d.ts

@@ -1,6 +1,7 @@
 import type { DSMenuItemT } from '../../react-desc-prop-types.js';
-export declare const getChevronHandlers: ({ isSubmenuOpened, onMouseEnter, onSubmenuOpen, onSubmenuClose, onMouseLeave, }: Required<DSMenuItemT.SubmenuProps>) => {
+export declare const getChevronHandlers: ({ isSubmenuOpened, onMouseEnter, onSubmenuOpen, onSubmenuClose, onMouseLeave, onMouseDown, disabled, }: Required<DSMenuItemT.SubmenuProps>) => {
     onMouseEnterHandler: (e: React.MouseEvent) => void;
     onMouseLeaveHandler: (e: React.MouseEvent) => void;
+    onMouseDownHandler: (e: React.MouseEvent) => void;
     onEllipsisClick: () => never;
 };

package/dist/types/components/SubmenuItem/getEllipsisHandlers.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import type { DSMenuItemT } from '../../react-desc-prop-types.js';
-export declare const getEllipsisHandlers: ({ disabled, isSubmenuOpened, onMouseEnter, onSubmenuOpen, onSubmenuClose, onMouseLeave, }: Required<DSMenuItemT.SubmenuProps>) => {
+export declare const getEllipsisHandlers: ({ disabled, isSubmenuOpened, onMouseEnter, onSubmenuOpen, onSubmenuClose, onMouseLeave, onMouseDown, }: Required<DSMenuItemT.SubmenuProps>) => {
     onMouseEnterHandler: import("react").MouseEventHandler<Element>;
     onMouseLeaveHandler: import("react").MouseEventHandler<Element>;
+    onMouseDownHandler: import("react").MouseEventHandler<Element>;
     onEllipsisClick: import("react").MouseEventHandler<Element>;
 };

package/dist/types/components/SubmenuItem/useGetSubmenuHandlers.d.ts

@@ -3,5 +3,6 @@ import type { DSMenuItemT } from '../../react-desc-prop-types.js';
 export declare const useGetSubmenuHandlers: (submenuProps: Required<DSMenuItemT.SubmenuProps>) => {
     onMouseEnterHandler: import("react").MouseEventHandler<Element>;
     onMouseLeaveHandler: import("react").MouseEventHandler<Element>;
+    onMouseDownHandler: import("react").MouseEventHandler<Element>;
     onEllipsisClick: import("react").MouseEventHandler<Element>;
 };

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

@@ -62,6 +62,7 @@ export declare namespace DSMenuItemT {
         optionsShouldHavePadding?: boolean;
         onMouseEnter?: React.MouseEventHandler;
         onMouseLeave?: React.MouseEventHandler;
+        onMouseDown?: React.MouseEventHandler;
         Dropdown: React.ComponentType<PropsWithChildren<SubmenuProps['dropdownProps']>>;
         dropdownProps?: {
             options: any[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-menu-items",
-  "version": "3.22.0-rc.9",
+  "version": "3.22.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Menu Items",
   "files": [
@@ -37,12 +37,12 @@
   "dependencies": {
     "@xstyled/system": "~3.7.3",
     "@xstyled/util": "3.7.0",
-    "@elliemae/ds-form-checkbox": "3.22.0-rc.9",
-    "@elliemae/ds-grid": "3.22.0-rc.9",
-    "@elliemae/ds-props-helpers": "3.22.0-rc.9",
-    "@elliemae/ds-icons": "3.22.0-rc.9",
-    "@elliemae/ds-skeleton": "3.22.0-rc.9",
-    "@elliemae/ds-system": "3.22.0-rc.9"
+    "@elliemae/ds-form-checkbox": "3.22.0",
+    "@elliemae/ds-grid": "3.22.0",
+    "@elliemae/ds-icons": "3.22.0",
+    "@elliemae/ds-props-helpers": "3.22.0",
+    "@elliemae/ds-skeleton": "3.22.0",
+    "@elliemae/ds-system": "3.22.0"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "~9.0.0-next.22",
@@ -51,7 +51,7 @@
     "@testing-library/user-event": "~13.5.0",
     "jest-axe": "^7.0.1",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.22.0-rc.9"
+    "@elliemae/ds-monorepo-devops": "3.22.0"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",