@elliemae/ds-menu-items 3.22.0-next.0 → 3.22.0-next.15

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

@@ -89,7 +89,6 @@ const ActionMenuItem = (props) => {
     }
   );
 };
-ActionMenuItem.propTypes = import_react_desc_prop_types.ActionMenuItemPropTypes;
 ActionMenuItem.displayName = "DSActionMenuItem";
 const ActionMenuItemWithSchema = (0, import_ds_props_helpers.describe)(ActionMenuItem);
 ActionMenuItemWithSchema.propTypes = import_react_desc_prop_types.ActionMenuItemPropTypes;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/ActionMenuItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultActionProps, ActionMenuItemPropTypes } 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';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\nconst ActionMenuItem: React.ComponentType<DSMenuItemT.ActionProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultActionProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, ActionMenuItemPropTypes, `${DSMenuItemName}Action`);\n\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    onClick,\n    isActive,\n    disabled,\n    innerRef,\n    wrapperStyles,\n    optionsShouldHavePadding,\n    render: Render,\n  } = propsWithDefault;\n\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(\n    propsWithDefault,\n    props.original\n      ? {\n          onClick: onClick,\n        }\n      : undefined,\n  );\n  const gridLayout = useMemo(() => {\n    const cols = ['auto'];\n    if (secondaryLabel) cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      id={dsId}\n      role=\"option\"\n      isActive={isActive}\n      disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      ref={innerRef}\n      pl={optionsShouldHavePadding ? 40 : 16}\n      style={wrapperStyles}\n      data-type=\"action\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? (\n        <Render {...propsWithDefault} />\n      ) : (\n        <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n          <>\n            <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n            {secondaryLabel !== undefined && (\n              <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n            )}\n          </>\n        </StyledContentWrapper>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nActionMenuItem.propTypes = ActionMenuItemPropTypes;\nActionMenuItem.displayName = 'DSActionMenuItem';\nconst ActionMenuItemWithSchema = describe(ActionMenuItem);\nActionMenuItemWithSchema.propTypes = ActionMenuItemPropTypes;\n\nexport { ActionMenuItem, ActionMenuItem as DSActionMenuItem, ActionMenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2Df;AA3DR,mBAA+B;AAC/B,8BAAuF;AAEvF,mCAA4D;AAC5D,oBAKO;AACP,8BAA+B;AAC/B,0CAA6C;AAC7C,MAAM,iBAA+D,CAAC,UAAU;AAC9E,QAAM,uBAAmB,sDAA6B,OAAO,+CAAkB;AAE/E,8DAA+B,kBAAkB,sDAAyB,GAAG,8CAAsB;AAEnG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI;AAEJ,QAAM,EAAE,kBAAkB,aAAa,QAAI;AAAA,IACzC;AAAA,IACA,MAAM,WACF;AAAA,MACE;AAAA,IACF,IACA;AAAA,EACN;AACA,QAAM,iBAAa,sBAAQ,MAAM;AAC/B,UAAM,OAAO,CAAC,MAAM;AACpB,QAAI;AAAgB,WAAK,KAAK,aAAa;AAC3C,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,CAAC,WAAW,UAAU;AAAA,MAC/B,KAAK;AAAA,MACL,IAAI,2BAA2B,KAAK;AAAA,MACpC,OAAO;AAAA,MACP,aAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SACV,4CAAC,UAAQ,GAAG,kBAAkB,IAE9B,4CAAC,sCAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E,sFACE;AAAA,oDAAC,oCAAoB,iBAAM;AAAA,QAC1B,mBAAmB,UAClB,4CAAC,6CAA6B,0BAAe;AAAA,SAEjD,GACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,+BAA2B,kCAAS,cAAc;AACxD,yBAAyB,YAAY;",
+  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultActionProps, ActionMenuItemPropTypes } 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';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\nconst ActionMenuItem: React.ComponentType<DSMenuItemT.ActionProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultActionProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, ActionMenuItemPropTypes, `${DSMenuItemName}Action`);\n\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    onClick,\n    isActive,\n    disabled,\n    innerRef,\n    wrapperStyles,\n    optionsShouldHavePadding,\n    render: Render,\n  } = propsWithDefault;\n\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(\n    propsWithDefault,\n    props.original\n      ? {\n          onClick: onClick,\n        }\n      : undefined,\n  );\n  const gridLayout = useMemo(() => {\n    const cols = ['auto'];\n    if (secondaryLabel) cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      id={dsId}\n      role=\"option\"\n      isActive={isActive}\n      disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      ref={innerRef}\n      pl={optionsShouldHavePadding ? 40 : 16}\n      style={wrapperStyles}\n      data-type=\"action\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? (\n        <Render {...propsWithDefault} />\n      ) : (\n        <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n          <>\n            <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n            {secondaryLabel !== undefined && (\n              <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n            )}\n          </>\n        </StyledContentWrapper>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nActionMenuItem.displayName = 'DSActionMenuItem';\nconst ActionMenuItemWithSchema = describe(ActionMenuItem);\nActionMenuItemWithSchema.propTypes = ActionMenuItemPropTypes;\n\nexport { ActionMenuItem, ActionMenuItem as DSActionMenuItem, ActionMenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2Df;AA3DR,mBAA+B;AAC/B,8BAAuF;AAEvF,mCAA4D;AAC5D,oBAKO;AACP,8BAA+B;AAC/B,0CAA6C;AAC7C,MAAM,iBAA+D,CAAC,UAAU;AAC9E,QAAM,uBAAmB,sDAA6B,OAAO,+CAAkB;AAE/E,8DAA+B,kBAAkB,sDAAyB,GAAG,8CAAsB;AAEnG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI;AAEJ,QAAM,EAAE,kBAAkB,aAAa,QAAI;AAAA,IACzC;AAAA,IACA,MAAM,WACF;AAAA,MACE;AAAA,IACF,IACA;AAAA,EACN;AACA,QAAM,iBAAa,sBAAQ,MAAM;AAC/B,UAAM,OAAO,CAAC,MAAM;AACpB,QAAI;AAAgB,WAAK,KAAK,aAAa;AAC3C,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,CAAC,WAAW,UAAU;AAAA,MAC/B,KAAK;AAAA,MACL,IAAI,2BAA2B,KAAK;AAAA,MACpC,OAAO;AAAA,MACP,aAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SACV,4CAAC,UAAQ,GAAG,kBAAkB,IAE9B,4CAAC,sCAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E,sFACE;AAAA,oDAAC,oCAAoB,iBAAM;AAAA,QAC1B,mBAAmB,UAClB,4CAAC,6CAA6B,0BAAe;AAAA,SAEjD,GACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,+BAA2B,kCAAS,cAAc;AACxD,yBAAyB,YAAY;",
   "names": []
 }

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

@@ -107,7 +107,6 @@ const MultiMenuItem = (props) => {
     }
   );
 };
-MultiMenuItem.propTypes = import_react_desc_prop_types.MultiMenuItemPropTypes;
 MultiMenuItem.displayName = "DSMultiMenuItem";
 const MultiMenuItemWithSchema = (0, import_ds_props_helpers.describe)(MultiMenuItem);
 MultiMenuItemWithSchema.propTypes = import_react_desc_prop_types.MultiMenuItemPropTypes;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/MultiMenuItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { PresentationalCheckbox } from '@elliemae/ds-form-checkbox';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultMultiProps, MultiMenuItemPropTypes } from '../../react-desc-prop-types.js';\nimport { StyledGlobalMenuItemWrapper, StyledItemContent } from '../styled.js';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst noop = () => null;\n\nconst MultiMenuItem: React.ComponentType<DSMenuItemT.MultiProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultMultiProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, MultiMenuItemPropTypes, `${DSMenuItemName}Multi`);\n\n  const {\n    dsId,\n    label,\n    disabled,\n    isSelected,\n    isActive,\n    onClick,\n    dataTestid,\n    innerRef,\n    onMouseEnter,\n    onMouseLeave,\n    onMouseDown,\n    wrapperStyles,\n    tabIndex,\n    render: Render,\n  } = propsWithDefault;\n\n  // menuitems use original prop from dsdropdownmenu or dscombobox\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  return (\n    <StyledGlobalMenuItemWrapper\n      id={dsId}\n      disabled={disabled}\n      isActive={isActive}\n      isSelected={isSelected}\n      ref={innerRef}\n      onMouseDown={onMouseDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      role=\"option\"\n      className={isActive ? 'ds-list-item-active' : ''}\n      aria-selected={isSelected}\n      style={wrapperStyles}\n      onClick={onClick}\n      data-testid={dataTestid}\n      data-type=\"multi\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? (\n        <Render {...props} />\n      ) : (\n        <StyledItemContent>\n          <PresentationalCheckbox\n            disabled={disabled}\n            checked={isSelected}\n            onMouseDown={onMouseDown}\n            name={label}\n            label={label}\n            onChange={noop}\n            tabIndex={tabIndex}\n            wrapLabel\n            device=\"desktop\"\n          />\n        </StyledItemContent>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nMultiMenuItem.propTypes = MultiMenuItemPropTypes;\nMultiMenuItem.displayName = 'DSMultiMenuItem';\nconst MultiMenuItemWithSchema = describe(MultiMenuItem);\nMultiMenuItemWithSchema.propTypes = MultiMenuItemPropTypes;\n\nexport { MultiMenuItem, MultiMenuItem as DSMultiMenuItem, MultiMenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmEf;AAlER,8BAAuF;AACvF,8BAAuC;AAEvC,mCAA0D;AAC1D,oBAA+D;AAC/D,0CAA6C;AAC7C,8BAA+B;AAE/B,MAAM,OAAO,MAAM;AAEnB,MAAM,gBAA6D,CAAC,UAAU;AAC5E,QAAM,uBAAmB,sDAA6B,OAAO,8CAAiB;AAE9E,8DAA+B,kBAAkB,qDAAwB,GAAG,6CAAqB;AAEjG,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;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI;AAGJ,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,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,WAAW,WAAW,wBAAwB;AAAA,MAC9C,iBAAe;AAAA,MACf,OAAO;AAAA,MACP;AAAA,MACA,eAAa;AAAA,MACb,aAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SACV,4CAAC,UAAQ,GAAG,OAAO,IAEnB,4CAAC,mCACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA,MAAM;AAAA,UACN;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA,WAAS;AAAA,UACT,QAAO;AAAA;AAAA,MACT,GACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,8BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { PresentationalCheckbox } from '@elliemae/ds-form-checkbox';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultMultiProps, MultiMenuItemPropTypes } from '../../react-desc-prop-types.js';\nimport { StyledGlobalMenuItemWrapper, StyledItemContent } from '../styled.js';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst noop = () => null;\n\nconst MultiMenuItem: React.ComponentType<DSMenuItemT.MultiProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultMultiProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, MultiMenuItemPropTypes, `${DSMenuItemName}Multi`);\n\n  const {\n    dsId,\n    label,\n    disabled,\n    isSelected,\n    isActive,\n    onClick,\n    dataTestid,\n    innerRef,\n    onMouseEnter,\n    onMouseLeave,\n    onMouseDown,\n    wrapperStyles,\n    tabIndex,\n    render: Render,\n  } = propsWithDefault;\n\n  // menuitems use original prop from dsdropdownmenu or dscombobox\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  return (\n    <StyledGlobalMenuItemWrapper\n      id={dsId}\n      disabled={disabled}\n      isActive={isActive}\n      isSelected={isSelected}\n      ref={innerRef}\n      onMouseDown={onMouseDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      role=\"option\"\n      className={isActive ? 'ds-list-item-active' : ''}\n      aria-selected={isSelected}\n      style={wrapperStyles}\n      onClick={onClick}\n      data-testid={dataTestid}\n      data-type=\"multi\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? (\n        <Render {...props} />\n      ) : (\n        <StyledItemContent>\n          <PresentationalCheckbox\n            disabled={disabled}\n            checked={isSelected}\n            onMouseDown={onMouseDown}\n            name={label}\n            label={label}\n            onChange={noop}\n            tabIndex={tabIndex}\n            wrapLabel\n            device=\"desktop\"\n          />\n        </StyledItemContent>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nMultiMenuItem.displayName = 'DSMultiMenuItem';\nconst MultiMenuItemWithSchema = describe(MultiMenuItem);\nMultiMenuItemWithSchema.propTypes = MultiMenuItemPropTypes;\n\nexport { MultiMenuItem, MultiMenuItem as DSMultiMenuItem, MultiMenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmEf;AAlER,8BAAuF;AACvF,8BAAuC;AAEvC,mCAA0D;AAC1D,oBAA+D;AAC/D,0CAA6C;AAC7C,8BAA+B;AAE/B,MAAM,OAAO,MAAM;AAEnB,MAAM,gBAA6D,CAAC,UAAU;AAC5E,QAAM,uBAAmB,sDAA6B,OAAO,8CAAiB;AAE9E,8DAA+B,kBAAkB,qDAAwB,GAAG,6CAAqB;AAEjG,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;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI;AAGJ,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,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,WAAW,WAAW,wBAAwB;AAAA,MAC9C,iBAAe;AAAA,MACf,OAAO;AAAA,MACP;AAAA,MACA,eAAa;AAAA,MACb,aAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SACV,4CAAC,UAAQ,GAAG,OAAO,IAEnB,4CAAC,mCACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA,MAAM;AAAA,UACN;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA,WAAS;AAAA,UACT,QAAO;AAAA;AAAA,MACT,GACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,8BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
   "names": []
 }

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

@@ -57,7 +57,6 @@ const Section = (props) => {
     }
   );
 };
-Section.propTypes = import_react_desc_prop_types.SectionMenuItemPropTypes;
 Section.displayName = "DSSectionMenuItem";
 const SectionWithSchema = (0, import_ds_props_helpers.describe)(Section);
 SectionWithSchema.propTypes = import_react_desc_prop_types.SectionMenuItemPropTypes;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/Section/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSectionProps, SectionMenuItemPropTypes } from '../../react-desc-prop-types.js';\nimport { StyledSectionWrapper, StyledGroupLabel } from '../styled.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\n\nconst Section: React.ComponentType<DSMenuItemT.SectionProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSectionProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, SectionMenuItemPropTypes, `${DSMenuItemName}Section`);\n\n  const { label, wrapperStyles, innerRef, render: Render } = props;\n\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(propsWithDefault);\n\n  return (\n    <StyledSectionWrapper\n      style={wrapperStyles}\n      ref={innerRef}\n      role=\"presentation\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? <Render {...props} /> : <StyledGroupLabel>{label}</StyledGroupLabel>}\n    </StyledSectionWrapper>\n  );\n};\n\nSection.propTypes = SectionMenuItemPropTypes;\nSection.displayName = 'DSSectionMenuItem';\nconst SectionWithSchema = describe(Section);\nSectionWithSchema.propTypes = SectionMenuItemPropTypes;\n\nexport { Section, Section as DSSectionMenuItem, SectionWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBO;AAxB9B,8BAAuF;AAEvF,mCAA8D;AAC9D,oBAAuD;AACvD,8BAA+B;AAC/B,0CAA6C;AAE7C,MAAM,UAAyD,CAAC,UAAU;AACxE,QAAM,uBAAmB,sDAA6B,OAAO,gDAAmB;AAEhF,8DAA+B,kBAAkB,uDAA0B,GAAG,+CAAuB;AAErG,QAAM,EAAE,OAAO,eAAe,UAAU,QAAQ,OAAO,IAAI;AAE3D,QAAM,EAAE,kBAAkB,aAAa,QAAI,kEAA6B,gBAAgB;AAExF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SAAY,4CAAC,UAAQ,GAAG,OAAO,IAAK,4CAAC,kCAAkB,iBAAM;AAAA;AAAA,EAC3E;AAEJ;AAEA,QAAQ,YAAY;AACpB,QAAQ,cAAc;AACtB,MAAM,wBAAoB,kCAAS,OAAO;AAC1C,kBAAkB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSectionProps, SectionMenuItemPropTypes } from '../../react-desc-prop-types.js';\nimport { StyledSectionWrapper, StyledGroupLabel } from '../styled.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\n\nconst Section: React.ComponentType<DSMenuItemT.SectionProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSectionProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, SectionMenuItemPropTypes, `${DSMenuItemName}Section`);\n\n  const { label, wrapperStyles, innerRef, render: Render } = props;\n\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(propsWithDefault);\n\n  return (\n    <StyledSectionWrapper\n      style={wrapperStyles}\n      ref={innerRef}\n      role=\"presentation\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? <Render {...props} /> : <StyledGroupLabel>{label}</StyledGroupLabel>}\n    </StyledSectionWrapper>\n  );\n};\n\nSection.displayName = 'DSSectionMenuItem';\nconst SectionWithSchema = describe(Section);\nSectionWithSchema.propTypes = SectionMenuItemPropTypes;\n\nexport { Section, Section as DSSectionMenuItem, SectionWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBO;AAxB9B,8BAAuF;AAEvF,mCAA8D;AAC9D,oBAAuD;AACvD,8BAA+B;AAC/B,0CAA6C;AAE7C,MAAM,UAAyD,CAAC,UAAU;AACxE,QAAM,uBAAmB,sDAA6B,OAAO,gDAAmB;AAEhF,8DAA+B,kBAAkB,uDAA0B,GAAG,+CAAuB;AAErG,QAAM,EAAE,OAAO,eAAe,UAAU,QAAQ,OAAO,IAAI;AAE3D,QAAM,EAAE,kBAAkB,aAAa,QAAI,kEAA6B,gBAAgB;AAExF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SAAY,4CAAC,UAAQ,GAAG,OAAO,IAAK,4CAAC,kCAAkB,iBAAM;AAAA;AAAA,EAC3E;AAEJ;AAEA,QAAQ,cAAc;AACtB,MAAM,wBAAoB,kCAAS,OAAO;AAC1C,kBAAkB,YAAY;",
   "names": []
 }

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

@@ -58,7 +58,6 @@ const Separator = (props) => {
     }
   );
 };
-Separator.propTypes = import_react_desc_prop_types.MenuItemPropTypes;
 Separator.displayName = `${import_exported_related.DSMenuItemName}Separator`;
 const SeparatorWithSchema = (0, import_ds_props_helpers.describe)(Separator);
 SeparatorWithSchema.propTypes = import_react_desc_prop_types.MenuItemPropTypes;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/Separator/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { MenuItemPropTypes, defaultSeparatorProps } from '../../react-desc-prop-types.js';\nimport { StyledSeparatorWrapper, StyledSeparator } from '../styled.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst Separator: React.ComponentType<DSMenuItemT.SeparatorProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSeparatorProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, MenuItemPropTypes, `${DSMenuItemName}Separator`);\n  const { wrapperStyles, innerRef, render: Render } = propsWithDefault;\n\n  // menuitems use original prop from dsdropdownmenu or dscombobox\n  const sourceGlobalProps = propsWithDefault.original ?? propsWithDefault;\n\n  const globalAttributes = useGetGlobalAttributes(sourceGlobalProps);\n\n  const xStyledProps = useGetXstyledProps(sourceGlobalProps);\n  return (\n    <StyledSeparatorWrapper\n      style={wrapperStyles}\n      ref={innerRef}\n      role=\"presentation\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render ? <Render {...props} /> : <StyledSeparator role=\"presentation\" />}\n    </StyledSeparatorWrapper>\n  );\n};\n\nSeparator.propTypes = MenuItemPropTypes;\nSeparator.displayName = `${DSMenuItemName}Separator`;\nconst SeparatorWithSchema = describe(Separator);\nSeparatorWithSchema.propTypes = MenuItemPropTypes;\n\nexport { Separator, Separator as DSSeparatorMenuItem, SeparatorWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiCP;AAhChB,8BAMO;AAEP,mCAAyD;AACzD,oBAAwD;AACxD,8BAA+B;AAE/B,MAAM,YAA6D,CAAC,UAAU;AAC5E,QAAM,uBAAmB,sDAA6B,OAAO,kDAAqB;AAElF,8DAA+B,kBAAkB,gDAAmB,GAAG,iDAAyB;AAChG,QAAM,EAAE,eAAe,UAAU,QAAQ,OAAO,IAAI;AAGpD,QAAM,oBAAoB,iBAAiB,YAAY;AAEvD,QAAM,uBAAmB,gDAAuB,iBAAiB;AAEjE,QAAM,mBAAe,4CAAmB,iBAAiB;AACzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,mBAAS,4CAAC,UAAQ,GAAG,OAAO,IAAK,4CAAC,iCAAgB,MAAK,gBAAe;AAAA;AAAA,EACzE;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc,GAAG;AAC3B,MAAM,0BAAsB,kCAAS,SAAS;AAC9C,oBAAoB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { MenuItemPropTypes, defaultSeparatorProps } from '../../react-desc-prop-types.js';\nimport { StyledSeparatorWrapper, StyledSeparator } from '../styled.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst Separator: React.ComponentType<DSMenuItemT.SeparatorProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSeparatorProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, MenuItemPropTypes, `${DSMenuItemName}Separator`);\n  const { wrapperStyles, innerRef, render: Render } = propsWithDefault;\n\n  // menuitems use original prop from dsdropdownmenu or dscombobox\n  const sourceGlobalProps = propsWithDefault.original ?? propsWithDefault;\n\n  const globalAttributes = useGetGlobalAttributes(sourceGlobalProps);\n\n  const xStyledProps = useGetXstyledProps(sourceGlobalProps);\n  return (\n    <StyledSeparatorWrapper\n      style={wrapperStyles}\n      ref={innerRef}\n      role=\"presentation\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render ? <Render {...props} /> : <StyledSeparator role=\"presentation\" />}\n    </StyledSeparatorWrapper>\n  );\n};\n\nSeparator.displayName = `${DSMenuItemName}Separator`;\nconst SeparatorWithSchema = describe(Separator);\nSeparatorWithSchema.propTypes = MenuItemPropTypes;\n\nexport { Separator, Separator as DSSeparatorMenuItem, SeparatorWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiCP;AAhChB,8BAMO;AAEP,mCAAyD;AACzD,oBAAwD;AACxD,8BAA+B;AAE/B,MAAM,YAA6D,CAAC,UAAU;AAC5E,QAAM,uBAAmB,sDAA6B,OAAO,kDAAqB;AAElF,8DAA+B,kBAAkB,gDAAmB,GAAG,iDAAyB;AAChG,QAAM,EAAE,eAAe,UAAU,QAAQ,OAAO,IAAI;AAGpD,QAAM,oBAAoB,iBAAiB,YAAY;AAEvD,QAAM,uBAAmB,gDAAuB,iBAAiB;AAEjE,QAAM,mBAAe,4CAAmB,iBAAiB;AACzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,mBAAS,4CAAC,UAAQ,GAAG,OAAO,IAAK,4CAAC,iCAAgB,MAAK,gBAAe;AAAA;AAAA,EACzE;AAEJ;AAEA,UAAU,cAAc,GAAG;AAC3B,MAAM,0BAAsB,kCAAS,SAAS;AAC9C,oBAAoB,YAAY;",
   "names": []
 }

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

@@ -104,7 +104,6 @@ const SingleMenuItem = (props) => {
     }
   );
 };
-SingleMenuItem.propTypes = import_react_desc_prop_types.SingleMenuItemPropTypes;
 SingleMenuItem.displayName = "DSSingleMenuItem";
 const SingleMenuItemWithSchema = (0, import_ds_props_helpers.describe)(SingleMenuItem);
 SingleMenuItemWithSchema.propTypes = import_react_desc_prop_types.SingleMenuItemPropTypes;

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.propTypes = SingleMenuItemPropTypes;\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,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,+BAA2B,kCAAS,cAAc;AACxD,yBAAyB,YAAY;",
+  "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": []
 }

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

@@ -146,7 +146,6 @@ const SingleWithSubmenuItem = (props) => {
     }
   );
 };
-SingleWithSubmenuItem.propTypes = import_react_desc_prop_types.itemProps;
 SingleWithSubmenuItem.displayName = `${import_exported_related.DSMenuItemName}SingleWithSubmenu`;
 const SingleWithSubmenuItemWithSchema = (0, import_ds_props_helpers.describe)(SingleWithSubmenuItem);
 SingleWithSubmenuItemWithSchema.propTypes = import_react_desc_prop_types.itemProps;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/SingleWithSubmenuItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useEffect, useState, useMemo } from 'react';\nimport { MoreOptionsVert, ChevronRight, Checkmark } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSingleWithSubmenuProps, 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';\n\nconst SingleWithSubmenuItem: React.ComponentType<DSMenuItemT.SingleWithSubmenuProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSMenuItemT.SingleWithSubmenuProps>>(\n    props,\n    defaultSingleWithSubmenuProps,\n  );\n\n  useValidateTypescriptPropTypes(propsWithDefault, itemProps, `${DSMenuItemName}SingleWithSubmenu`);\n\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    isActive,\n    disabled,\n    onClick,\n    isSelected,\n    isSubmenuOpened,\n    rightAddon,\n    innerRef,\n    wrapperStyles,\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 = ['16px', 'auto'];\n    if (secondaryLabel) cols.push('min-content');\n    cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\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      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n      minWidth={minWidth}\n      maxHeight={maxHeight}\n      as=\"li\"\n      role=\"option\"\n      aria-selected={isSubmenuOpened}\n      aria-describedby={`dropdownmenu-submenu-${dsId}`}\n      id={dsId}\n    >\n      <StyledGlobalMenuItemWrapper\n        pr={0}\n        onClick={!disabled ? onClick : undefined}\n        isSelected={isSubmenuOpened}\n        disabled={disabled}\n        isActive={isActive}\n        onMouseEnter={onMouseEnterHandler}\n        onMouseLeave={onMouseLeaveHandler}\n        as={'div' as keyof JSX.IntrinsicElements}\n        ref={innerRef}\n        data-type=\"single-with-submenu\"\n      >\n        {Render !== undefined ? (\n          <Render {...propsWithDefault} />\n        ) : (\n          <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n            {isSelected ? (\n              <Checkmark size=\"s\" color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} />\n            ) : (\n              <div />\n            )}\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\nSingleWithSubmenuItem.propTypes = itemProps;\nSingleWithSubmenuItem.displayName = `${DSMenuItemName}SingleWithSubmenu`;\nconst SingleWithSubmenuItemWithSchema = describe(SingleWithSubmenuItem);\nSingleWithSubmenuItemWithSchema.propTypes = itemProps;\n\nexport { SingleWithSubmenuItem, SingleWithSubmenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useEffect, useState, useMemo } from 'react';\nimport { MoreOptionsVert, ChevronRight, Checkmark } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSingleWithSubmenuProps, 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';\n\nconst SingleWithSubmenuItem: React.ComponentType<DSMenuItemT.SingleWithSubmenuProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSMenuItemT.SingleWithSubmenuProps>>(\n    props,\n    defaultSingleWithSubmenuProps,\n  );\n\n  useValidateTypescriptPropTypes(propsWithDefault, itemProps, `${DSMenuItemName}SingleWithSubmenu`);\n\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    isActive,\n    disabled,\n    onClick,\n    isSelected,\n    isSubmenuOpened,\n    rightAddon,\n    innerRef,\n    wrapperStyles,\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 = ['16px', 'auto'];\n    if (secondaryLabel) cols.push('min-content');\n    cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\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      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n      minWidth={minWidth}\n      maxHeight={maxHeight}\n      as=\"li\"\n      role=\"option\"\n      aria-selected={isSubmenuOpened}\n      aria-describedby={`dropdownmenu-submenu-${dsId}`}\n      id={dsId}\n    >\n      <StyledGlobalMenuItemWrapper\n        pr={0}\n        onClick={!disabled ? onClick : undefined}\n        isSelected={isSubmenuOpened}\n        disabled={disabled}\n        isActive={isActive}\n        onMouseEnter={onMouseEnterHandler}\n        onMouseLeave={onMouseLeaveHandler}\n        as={'div' as keyof JSX.IntrinsicElements}\n        ref={innerRef}\n        data-type=\"single-with-submenu\"\n      >\n        {Render !== undefined ? (\n          <Render {...propsWithDefault} />\n        ) : (\n          <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n            {isSelected ? (\n              <Checkmark size=\"s\" color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} />\n            ) : (\n              <div />\n            )}\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\nSingleWithSubmenuItem.displayName = `${DSMenuItemName}SingleWithSubmenu`;\nconst SingleWithSubmenuItemWithSchema = describe(SingleWithSubmenuItem);\nSingleWithSubmenuItemWithSchema.propTypes = itemProps;\n\nexport { SingleWithSubmenuItem, SingleWithSubmenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -37,11 +37,23 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_skeleton = require("@elliemae/ds-skeleton");
 var import_styled = require("../styled.js");
-const SkeletonMenuItem = () => {
+const SkeletonMenuItem = (props) => {
+  const { wrapperStyles, isActive } = props;
   const gridLayout = (0, import_react.useMemo)(() => ["16px", "auto"], []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSkeletonWrapper, { "data-type": "skeleton", "data-testid": "ds-skeleton-menu-item", role: "option", "aria-label": "skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledContentWrapper, { cols: gridLayout, minHeight: "16px", gutter: "xxs", alignItems: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: "100%" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: "100%" })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styled.StyledGlobalMenuItemWrapper,
+    {
+      "data-type": "skeleton",
+      "data-testid": "ds-skeleton-menu-item",
+      role: "option",
+      "aria-label": "skeleton",
+      style: wrapperStyles,
+      isActive,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledContentWrapper, { cols: gridLayout, minHeight: "16px", gutter: "xxs", alignItems: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: "100%" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { variant: "rectangular", width: "100%" })
+      ] })
+    }
+  );
 };
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/SkeletonMenuItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { StyledContentWrapper, StyledSkeletonWrapper } from '../styled.js';\nconst SkeletonMenuItem = () => {\n  const gridLayout = useMemo(() => ['16px', 'auto'], []);\n\n  return (\n    <StyledSkeletonWrapper data-type=\"skeleton\" data-testid=\"ds-skeleton-menu-item\" role=\"option\" aria-label=\"skeleton\">\n      <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n        <DSSkeleton variant=\"rectangular\" width={'100%'} />\n        <DSSkeleton variant=\"rectangular\" width={'100%'} />\n      </StyledContentWrapper>\n    </StyledSkeletonWrapper>\n  );\n};\n\nexport { SkeletonMenuItem, SkeletonMenuItem as DSSkeletonMenuItem };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADQjB;AARN,mBAA+B;AAC/B,yBAA2B;AAC3B,oBAA4D;AAC5D,MAAM,mBAAmB,MAAM;AAC7B,QAAM,iBAAa,sBAAQ,MAAM,CAAC,QAAQ,MAAM,GAAG,CAAC,CAAC;AAErD,SACE,4CAAC,uCAAsB,aAAU,YAAW,eAAY,yBAAwB,MAAK,UAAS,cAAW,YACvG,uDAAC,sCAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E;AAAA,gDAAC,iCAAW,SAAQ,eAAc,OAAO,QAAQ;AAAA,IACjD,4CAAC,iCAAW,SAAQ,eAAc,OAAO,QAAQ;AAAA,KACnD,GACF;AAEJ;",
+  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { type DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { StyledContentWrapper, StyledGlobalMenuItemWrapper } from '../styled.js';\nconst SkeletonMenuItem: React.ComponentType<DSMenuItemT.SkeletonProps> = (props) => {\n  const { wrapperStyles, isActive } = props;\n  const gridLayout = useMemo(() => ['16px', 'auto'], []);\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      data-type=\"skeleton\"\n      data-testid=\"ds-skeleton-menu-item\"\n      role=\"option\"\n      aria-label=\"skeleton\"\n      style={wrapperStyles}\n      isActive={isActive}\n    >\n      <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n        <DSSkeleton variant=\"rectangular\" width={'100%'} />\n        <DSSkeleton variant=\"rectangular\" width={'100%'} />\n      </StyledContentWrapper>\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nexport { SkeletonMenuItem, SkeletonMenuItem as DSSkeletonMenuItem };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBjB;AAjBN,mBAA+B;AAC/B,yBAA2B;AAE3B,oBAAkE;AAClE,MAAM,mBAAmE,CAAC,UAAU;AAClF,QAAM,EAAE,eAAe,SAAS,IAAI;AACpC,QAAM,iBAAa,sBAAQ,MAAM,CAAC,QAAQ,MAAM,GAAG,CAAC,CAAC;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,cAAW;AAAA,MACX,OAAO;AAAA,MACP;AAAA,MAEA,uDAAC,sCAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E;AAAA,oDAAC,iCAAW,SAAQ,eAAc,OAAO,QAAQ;AAAA,QACjD,4CAAC,iCAAW,SAAQ,eAAc,OAAO,QAAQ;AAAA,SACnD;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -41,6 +41,7 @@ var import_react_desc_prop_types = require("../../react-desc-prop-types.js");
 var import_styled = require("../styled.js");
 var import_useGetSubmenuHandlers = require("./useGetSubmenuHandlers.js");
 var import_exported_related = require("../../exported-related/index.js");
+var import_useGetGlobalsAndXStyledProps = require("../useGetGlobalsAndXStyledProps.js");
 const SubmenuItem = (props) => {
   const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultSubmenuProps);
   (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.itemProps, `${import_exported_related.DSMenuItemName}Submenu`);
@@ -81,6 +82,8 @@ const SubmenuItem = (props) => {
     cols.push("min-content");
     return cols;
   }, [secondaryLabel]);
+  const { globalAttributes, xStyledProps } = (0, import_useGetGlobalsAndXStyledProps.useGetGlobalsAndXStyledProps)(propsWithDefault);
+  const { minWidth: customMinWidth, ...restXStyled } = xStyledProps;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Dropdown,
     {
@@ -118,6 +121,8 @@ const SubmenuItem = (props) => {
           pl: optionsShouldHavePadding ? 40 : 16,
           as: "div",
           "data-type": "submenu",
+          ...globalAttributes,
+          ...restXStyled,
           children: [
             Render !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, { ...propsWithDefault }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledContentWrapper, { cols: gridLayout, gutter: "xxs", alignItems: "center", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemLabel, { children: label }),
@@ -141,7 +146,6 @@ const SubmenuItem = (props) => {
     }
   );
 };
-SubmenuItem.propTypes = import_react_desc_prop_types.itemProps;
 SubmenuItem.displayName = `${import_exported_related.DSMenuItemName}Submenu`;
 const SubmenuItemWithSchema = (0, import_ds_props_helpers.describe)(SubmenuItem);
 SubmenuItemWithSchema.propTypes = import_react_desc_prop_types.itemProps;

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 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';\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\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      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n      minWidth={minWidth}\n      maxHeight={maxHeight}\n      as=\"li\"\n      role=\"option\"\n      aria-selected={isSubmenuOpened}\n      aria-describedby={`dropdownmenu-submenu-${dsId}`}\n      id={dsId}\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.propTypes = itemProps;\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, 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\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(propsWithDefault);\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\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      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n      minWidth={minWidth}\n      maxHeight={maxHeight}\n      as=\"li\"\n      role=\"option\"\n      aria-selected={isSubmenuOpened}\n      aria-describedby={`dropdownmenu-submenu-${dsId}`}\n      id={dsId}\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        {...globalAttributes}\n        {...restXStyled}\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkHb;AAhHV,mBAAoD;AACpD,sBAA8C;AAC9C,8BAAuF;AAEvF,mCAA+C;AAC/C,oBAQO;AACP,mCAAsC;AACtC,8BAA+B;AAC/B,0CAA6C;AAE7C,MAAM,cAA6D,CAAC,UAAU;AAC5E,QAAM,uBAAmB,sDAAiE,OAAO,gDAAmB;AAEpH,8DAA+B,kBAAkB,wCAAW,GAAG,+CAAuB;AAEtF,QAAM;AAAA,IACJ;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,eAAe;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI;AAKJ,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAS,KAAK;AAE5D,8BAAU,MAAM;AACd,eAAW,MAAM,mBAAmB,eAAe,CAAC;AAAA,EACtD,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,EAAE,qBAAqB,qBAAqB,gBAAgB,QAAI,oDAAsB,gBAAgB;AAE5G,QAAM,iBAAa,sBAAQ,MAAM;AAC/B,UAAM,OAAO,CAAC,MAAM;AACpB,QAAI,mBAAmB;AAAW,WAAK,KAAK,aAAa;AACzD,SAAK,KAAK,aAAa;AACvB,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,EAAE,kBAAkB,aAAa,QAAI,kEAA6B,gBAAgB;AAIxF,QAAM,EAAE,UAAU,gBAAgB,GAAG,YAAY,IAAI;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,SAAS,WAAW,CAAC;AAAA,MACrB;AAAA,MACA,0BAAyB;AAAA,MACzB,0BAA0B,CAAC,eAAe,aAAa,cAAc,UAAU;AAAA,MAC/E;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc,CAAC,IAAI,CAAC;AAAA,MACpB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,eAAe,EAAE,GAAG,eAAe,GAAG,OAAO;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,IAAG;AAAA,MACH,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,oBAAkB,wBAAwB;AAAA,MAC1C,IAAI;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,YAAY;AAAA,UACZ;AAAA,UACA,cAAc;AAAA,UACd,cAAc;AAAA,UACd,KAAK;AAAA,UACL;AAAA,UACA,IAAI,2BAA2B,KAAK;AAAA,UACpC,IAAI;AAAA,UACJ,aAAU;AAAA,UACT,GAAG;AAAA,UACH,GAAG;AAAA,UAEH;AAAA,uBAAW,SACV,4CAAC,UAAQ,GAAG,kBAAkB,IAE9B,6CAAC,sCAAqB,MAAM,YAAY,QAAO,OAAM,YAAW,UAC9D;AAAA,0DAAC,oCAAoB,iBAAM;AAAA,cAC1B,mBAAmB,UAClB,4CAAC,6CAA6B,0BAAe;AAAA,cAE/C,6CAAC,qCACC;AAAA,4DAAC,yCAAwB;AAAA,gBACxB,eAAe,aACd,4CAAC,sCAAqB,UAAU,IAAI,SAAS,iBAAiB,UAC5D;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK;AAAA,oBAC9D,MAAK;AAAA;AAAA,gBACP,GACF,IAEA,4CAAC,gCAAa,OAAO,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG,MAAK,KAAI;AAAA,iBAE5F;AAAA,eACF;AAAA,YAEF,4CAAC,UAAK,IAAI,wBAAwB,QAAQ,OAAO,EAAE,SAAS,OAAO,GAAG,qEAEtE;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,YAAY,cAAc,GAAG;AAC7B,MAAM,4BAAwB,kCAAS,WAAW;AAClD,sBAAsB,YAAY;",
   "names": []
 }

package/dist/cjs/components/styled.js

@@ -39,7 +39,6 @@ __export(styled_exports, {
   StyledSectionWrapper: () => StyledSectionWrapper,
   StyledSeparator: () => StyledSeparator,
   StyledSeparatorWrapper: () => StyledSeparatorWrapper,
-  StyledSkeletonWrapper: () => StyledSkeletonWrapper,
   StyledVerticalSeparator: () => StyledVerticalSeparator
 });
 module.exports = __toCommonJS(styled_exports);
@@ -69,21 +68,6 @@ const disabledOption = () => import_ds_system.css`
     cursor: not-allowed;
   }
 `;
-const StyledSkeletonWrapper = (0, import_ds_system.styled)("li", {
-  name: import_exported_related.DSMenuItemName,
-  slot: import_exported_related.DSMenuItemSlots.MENU_ITEM_WRAPPER
-})`
-  min-height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
-  display: grid;
-  align-items: center;
-  list-style: none;
-  position: relative;
-  background-color: 'white';
-
-  ${import_ds_system.xStyledCommonProps}
-`;
 const StyledGlobalMenuItemWrapper = (0, import_ds_system.styled)("li", {
   name: import_exported_related.DSMenuItemName,
   slot: import_exported_related.DSMenuItemSlots.MENU_ITEM_WRAPPER

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 StyledSkeletonWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_WRAPPER,\n})<StyledGlobalMenuItemWrapperT>`\n  min-height: 32px;\n  padding-left: 16px;\n  padding-right: 16px;\n  display: grid;\n  align-items: center;\n  list-style: none;\n  position: relative;\n  background-color: 'white';\n\n  ${xStyledCommonProps}\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": "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",
+  "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;",
   "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 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.instanceOf(HTMLLIElement),\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    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.instanceOf(HTMLLIElement),\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/ActionMenuItem/index.js

@@ -59,7 +59,6 @@ const ActionMenuItem = (props) => {
     }
   );
 };
-ActionMenuItem.propTypes = ActionMenuItemPropTypes;
 ActionMenuItem.displayName = "DSActionMenuItem";
 const ActionMenuItemWithSchema = describe(ActionMenuItem);
 ActionMenuItemWithSchema.propTypes = ActionMenuItemPropTypes;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/ActionMenuItem/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 type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultActionProps, ActionMenuItemPropTypes } 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';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\nconst ActionMenuItem: React.ComponentType<DSMenuItemT.ActionProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultActionProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, ActionMenuItemPropTypes, `${DSMenuItemName}Action`);\n\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    onClick,\n    isActive,\n    disabled,\n    innerRef,\n    wrapperStyles,\n    optionsShouldHavePadding,\n    render: Render,\n  } = propsWithDefault;\n\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(\n    propsWithDefault,\n    props.original\n      ? {\n          onClick: onClick,\n        }\n      : undefined,\n  );\n  const gridLayout = useMemo(() => {\n    const cols = ['auto'];\n    if (secondaryLabel) cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      id={dsId}\n      role=\"option\"\n      isActive={isActive}\n      disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      ref={innerRef}\n      pl={optionsShouldHavePadding ? 40 : 16}\n      style={wrapperStyles}\n      data-type=\"action\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? (\n        <Render {...propsWithDefault} />\n      ) : (\n        <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n          <>\n            <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n            {secondaryLabel !== undefined && (\n              <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n            )}\n          </>\n        </StyledContentWrapper>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nActionMenuItem.propTypes = ActionMenuItemPropTypes;\nActionMenuItem.displayName = 'DSActionMenuItem';\nconst ActionMenuItemWithSchema = describe(ActionMenuItem);\nActionMenuItemWithSchema.propTypes = ActionMenuItemPropTypes;\n\nexport { ActionMenuItem, ActionMenuItem as DSActionMenuItem, ActionMenuItemWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2Df,SAGE,UAHF,KAGE,YAHF;AA3DR,SAAgB,eAAe;AAC/B,SAAS,UAAU,8BAA8B,sCAAsC;AAEvF,SAAS,oBAAoB,+BAA+B;AAC5D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,oCAAoC;AAC7C,MAAM,iBAA+D,CAAC,UAAU;AAC9E,QAAM,mBAAmB,6BAA6B,OAAO,kBAAkB;AAE/E,iCAA+B,kBAAkB,yBAAyB,GAAG,sBAAsB;AAEnG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI;AAEJ,QAAM,EAAE,kBAAkB,aAAa,IAAI;AAAA,IACzC;AAAA,IACA,MAAM,WACF;AAAA,MACE;AAAA,IACF,IACA;AAAA,EACN;AACA,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,OAAO,CAAC,MAAM;AACpB,QAAI;AAAgB,WAAK,KAAK,aAAa;AAC3C,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,CAAC,WAAW,UAAU;AAAA,MAC/B,KAAK;AAAA,MACL,IAAI,2BAA2B,KAAK;AAAA,MACpC,OAAO;AAAA,MACP,aAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SACV,oBAAC,UAAQ,GAAG,kBAAkB,IAE9B,oBAAC,wBAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E,2CACE;AAAA,4BAAC,sBAAoB,iBAAM;AAAA,QAC1B,mBAAmB,UAClB,oBAAC,+BAA6B,0BAAe;AAAA,SAEjD,GACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultActionProps, ActionMenuItemPropTypes } 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';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\nconst ActionMenuItem: React.ComponentType<DSMenuItemT.ActionProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultActionProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, ActionMenuItemPropTypes, `${DSMenuItemName}Action`);\n\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    onClick,\n    isActive,\n    disabled,\n    innerRef,\n    wrapperStyles,\n    optionsShouldHavePadding,\n    render: Render,\n  } = propsWithDefault;\n\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(\n    propsWithDefault,\n    props.original\n      ? {\n          onClick: onClick,\n        }\n      : undefined,\n  );\n  const gridLayout = useMemo(() => {\n    const cols = ['auto'];\n    if (secondaryLabel) cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      id={dsId}\n      role=\"option\"\n      isActive={isActive}\n      disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      ref={innerRef}\n      pl={optionsShouldHavePadding ? 40 : 16}\n      style={wrapperStyles}\n      data-type=\"action\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? (\n        <Render {...propsWithDefault} />\n      ) : (\n        <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n          <>\n            <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n            {secondaryLabel !== undefined && (\n              <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n            )}\n          </>\n        </StyledContentWrapper>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nActionMenuItem.displayName = 'DSActionMenuItem';\nconst ActionMenuItemWithSchema = describe(ActionMenuItem);\nActionMenuItemWithSchema.propTypes = ActionMenuItemPropTypes;\n\nexport { ActionMenuItem, ActionMenuItem as DSActionMenuItem, ActionMenuItemWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2Df,SAGE,UAHF,KAGE,YAHF;AA3DR,SAAgB,eAAe;AAC/B,SAAS,UAAU,8BAA8B,sCAAsC;AAEvF,SAAS,oBAAoB,+BAA+B;AAC5D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,oCAAoC;AAC7C,MAAM,iBAA+D,CAAC,UAAU;AAC9E,QAAM,mBAAmB,6BAA6B,OAAO,kBAAkB;AAE/E,iCAA+B,kBAAkB,yBAAyB,GAAG,sBAAsB;AAEnG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI;AAEJ,QAAM,EAAE,kBAAkB,aAAa,IAAI;AAAA,IACzC;AAAA,IACA,MAAM,WACF;AAAA,MACE;AAAA,IACF,IACA;AAAA,EACN;AACA,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,OAAO,CAAC,MAAM;AACpB,QAAI;AAAgB,WAAK,KAAK,aAAa;AAC3C,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,CAAC,WAAW,UAAU;AAAA,MAC/B,KAAK;AAAA,MACL,IAAI,2BAA2B,KAAK;AAAA,MACpC,OAAO;AAAA,MACP,aAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SACV,oBAAC,UAAQ,GAAG,kBAAkB,IAE9B,oBAAC,wBAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E,2CACE;AAAA,4BAAC,sBAAoB,iBAAM;AAAA,QAC1B,mBAAmB,UAClB,oBAAC,+BAA6B,0BAAe;AAAA,SAEjD,GACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
   "names": []
 }

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

@@ -72,7 +72,6 @@ const MultiMenuItem = (props) => {
     }
   );
 };
-MultiMenuItem.propTypes = MultiMenuItemPropTypes;
 MultiMenuItem.displayName = "DSMultiMenuItem";
 const MultiMenuItemWithSchema = describe(MultiMenuItem);
 MultiMenuItemWithSchema.propTypes = MultiMenuItemPropTypes;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/MultiMenuItem/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { PresentationalCheckbox } from '@elliemae/ds-form-checkbox';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultMultiProps, MultiMenuItemPropTypes } from '../../react-desc-prop-types.js';\nimport { StyledGlobalMenuItemWrapper, StyledItemContent } from '../styled.js';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst noop = () => null;\n\nconst MultiMenuItem: React.ComponentType<DSMenuItemT.MultiProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultMultiProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, MultiMenuItemPropTypes, `${DSMenuItemName}Multi`);\n\n  const {\n    dsId,\n    label,\n    disabled,\n    isSelected,\n    isActive,\n    onClick,\n    dataTestid,\n    innerRef,\n    onMouseEnter,\n    onMouseLeave,\n    onMouseDown,\n    wrapperStyles,\n    tabIndex,\n    render: Render,\n  } = propsWithDefault;\n\n  // menuitems use original prop from dsdropdownmenu or dscombobox\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  return (\n    <StyledGlobalMenuItemWrapper\n      id={dsId}\n      disabled={disabled}\n      isActive={isActive}\n      isSelected={isSelected}\n      ref={innerRef}\n      onMouseDown={onMouseDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      role=\"option\"\n      className={isActive ? 'ds-list-item-active' : ''}\n      aria-selected={isSelected}\n      style={wrapperStyles}\n      onClick={onClick}\n      data-testid={dataTestid}\n      data-type=\"multi\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? (\n        <Render {...props} />\n      ) : (\n        <StyledItemContent>\n          <PresentationalCheckbox\n            disabled={disabled}\n            checked={isSelected}\n            onMouseDown={onMouseDown}\n            name={label}\n            label={label}\n            onChange={noop}\n            tabIndex={tabIndex}\n            wrapLabel\n            device=\"desktop\"\n          />\n        </StyledItemContent>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nMultiMenuItem.propTypes = MultiMenuItemPropTypes;\nMultiMenuItem.displayName = 'DSMultiMenuItem';\nconst MultiMenuItemWithSchema = describe(MultiMenuItem);\nMultiMenuItemWithSchema.propTypes = MultiMenuItemPropTypes;\n\nexport { MultiMenuItem, MultiMenuItem as DSMultiMenuItem, MultiMenuItemWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmEf;AAlER,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,8BAA8B;AAEvC,SAAS,mBAAmB,8BAA8B;AAC1D,SAAS,6BAA6B,yBAAyB;AAC/D,SAAS,oCAAoC;AAC7C,SAAS,sBAAsB;AAE/B,MAAM,OAAO,MAAM;AAEnB,MAAM,gBAA6D,CAAC,UAAU;AAC5E,QAAM,mBAAmB,6BAA6B,OAAO,iBAAiB;AAE9E,iCAA+B,kBAAkB,wBAAwB,GAAG,qBAAqB;AAEjG,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;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI;AAGJ,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,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,WAAW,WAAW,wBAAwB;AAAA,MAC9C,iBAAe;AAAA,MACf,OAAO;AAAA,MACP;AAAA,MACA,eAAa;AAAA,MACb,aAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SACV,oBAAC,UAAQ,GAAG,OAAO,IAEnB,oBAAC,qBACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA,MAAM;AAAA,UACN;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA,WAAS;AAAA,UACT,QAAO;AAAA;AAAA,MACT,GACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { PresentationalCheckbox } from '@elliemae/ds-form-checkbox';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultMultiProps, MultiMenuItemPropTypes } from '../../react-desc-prop-types.js';\nimport { StyledGlobalMenuItemWrapper, StyledItemContent } from '../styled.js';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst noop = () => null;\n\nconst MultiMenuItem: React.ComponentType<DSMenuItemT.MultiProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultMultiProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, MultiMenuItemPropTypes, `${DSMenuItemName}Multi`);\n\n  const {\n    dsId,\n    label,\n    disabled,\n    isSelected,\n    isActive,\n    onClick,\n    dataTestid,\n    innerRef,\n    onMouseEnter,\n    onMouseLeave,\n    onMouseDown,\n    wrapperStyles,\n    tabIndex,\n    render: Render,\n  } = propsWithDefault;\n\n  // menuitems use original prop from dsdropdownmenu or dscombobox\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  return (\n    <StyledGlobalMenuItemWrapper\n      id={dsId}\n      disabled={disabled}\n      isActive={isActive}\n      isSelected={isSelected}\n      ref={innerRef}\n      onMouseDown={onMouseDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      role=\"option\"\n      className={isActive ? 'ds-list-item-active' : ''}\n      aria-selected={isSelected}\n      style={wrapperStyles}\n      onClick={onClick}\n      data-testid={dataTestid}\n      data-type=\"multi\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? (\n        <Render {...props} />\n      ) : (\n        <StyledItemContent>\n          <PresentationalCheckbox\n            disabled={disabled}\n            checked={isSelected}\n            onMouseDown={onMouseDown}\n            name={label}\n            label={label}\n            onChange={noop}\n            tabIndex={tabIndex}\n            wrapLabel\n            device=\"desktop\"\n          />\n        </StyledItemContent>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nMultiMenuItem.displayName = 'DSMultiMenuItem';\nconst MultiMenuItemWithSchema = describe(MultiMenuItem);\nMultiMenuItemWithSchema.propTypes = MultiMenuItemPropTypes;\n\nexport { MultiMenuItem, MultiMenuItem as DSMultiMenuItem, MultiMenuItemWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmEf;AAlER,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,8BAA8B;AAEvC,SAAS,mBAAmB,8BAA8B;AAC1D,SAAS,6BAA6B,yBAAyB;AAC/D,SAAS,oCAAoC;AAC7C,SAAS,sBAAsB;AAE/B,MAAM,OAAO,MAAM;AAEnB,MAAM,gBAA6D,CAAC,UAAU;AAC5E,QAAM,mBAAmB,6BAA6B,OAAO,iBAAiB;AAE9E,iCAA+B,kBAAkB,wBAAwB,GAAG,qBAAqB;AAEjG,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;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI;AAGJ,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,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,WAAW,WAAW,wBAAwB;AAAA,MAC9C,iBAAe;AAAA,MACf,OAAO;AAAA,MACP;AAAA,MACA,eAAa;AAAA,MACb,aAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SACV,oBAAC,UAAQ,GAAG,OAAO,IAEnB,oBAAC,qBACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA,MAAM;AAAA,UACN;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA,WAAS;AAAA,UACT,QAAO;AAAA;AAAA,MACT,GACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
   "names": []
 }

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

@@ -22,7 +22,6 @@ const Section = (props) => {
     }
   );
 };
-Section.propTypes = SectionMenuItemPropTypes;
 Section.displayName = "DSSectionMenuItem";
 const SectionWithSchema = describe(Section);
 SectionWithSchema.propTypes = SectionMenuItemPropTypes;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/Section/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSectionProps, SectionMenuItemPropTypes } from '../../react-desc-prop-types.js';\nimport { StyledSectionWrapper, StyledGroupLabel } from '../styled.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\n\nconst Section: React.ComponentType<DSMenuItemT.SectionProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSectionProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, SectionMenuItemPropTypes, `${DSMenuItemName}Section`);\n\n  const { label, wrapperStyles, innerRef, render: Render } = props;\n\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(propsWithDefault);\n\n  return (\n    <StyledSectionWrapper\n      style={wrapperStyles}\n      ref={innerRef}\n      role=\"presentation\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? <Render {...props} /> : <StyledGroupLabel>{label}</StyledGroupLabel>}\n    </StyledSectionWrapper>\n  );\n};\n\nSection.propTypes = SectionMenuItemPropTypes;\nSection.displayName = 'DSSectionMenuItem';\nconst SectionWithSchema = describe(Section);\nSectionWithSchema.propTypes = SectionMenuItemPropTypes;\n\nexport { Section, Section as DSSectionMenuItem, SectionWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACyBO;AAxB9B,SAAS,UAAU,8BAA8B,sCAAsC;AAEvF,SAAS,qBAAqB,gCAAgC;AAC9D,SAAS,sBAAsB,wBAAwB;AACvD,SAAS,sBAAsB;AAC/B,SAAS,oCAAoC;AAE7C,MAAM,UAAyD,CAAC,UAAU;AACxE,QAAM,mBAAmB,6BAA6B,OAAO,mBAAmB;AAEhF,iCAA+B,kBAAkB,0BAA0B,GAAG,uBAAuB;AAErG,QAAM,EAAE,OAAO,eAAe,UAAU,QAAQ,OAAO,IAAI;AAE3D,QAAM,EAAE,kBAAkB,aAAa,IAAI,6BAA6B,gBAAgB;AAExF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SAAY,oBAAC,UAAQ,GAAG,OAAO,IAAK,oBAAC,oBAAkB,iBAAM;AAAA;AAAA,EAC3E;AAEJ;AAEA,QAAQ,YAAY;AACpB,QAAQ,cAAc;AACtB,MAAM,oBAAoB,SAAS,OAAO;AAC1C,kBAAkB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSectionProps, SectionMenuItemPropTypes } from '../../react-desc-prop-types.js';\nimport { StyledSectionWrapper, StyledGroupLabel } from '../styled.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\n\nconst Section: React.ComponentType<DSMenuItemT.SectionProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSectionProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, SectionMenuItemPropTypes, `${DSMenuItemName}Section`);\n\n  const { label, wrapperStyles, innerRef, render: Render } = props;\n\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(propsWithDefault);\n\n  return (\n    <StyledSectionWrapper\n      style={wrapperStyles}\n      ref={innerRef}\n      role=\"presentation\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render !== undefined ? <Render {...props} /> : <StyledGroupLabel>{label}</StyledGroupLabel>}\n    </StyledSectionWrapper>\n  );\n};\n\nSection.displayName = 'DSSectionMenuItem';\nconst SectionWithSchema = describe(Section);\nSectionWithSchema.propTypes = SectionMenuItemPropTypes;\n\nexport { Section, Section as DSSectionMenuItem, SectionWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACyBO;AAxB9B,SAAS,UAAU,8BAA8B,sCAAsC;AAEvF,SAAS,qBAAqB,gCAAgC;AAC9D,SAAS,sBAAsB,wBAAwB;AACvD,SAAS,sBAAsB;AAC/B,SAAS,oCAAoC;AAE7C,MAAM,UAAyD,CAAC,UAAU;AACxE,QAAM,mBAAmB,6BAA6B,OAAO,mBAAmB;AAEhF,iCAA+B,kBAAkB,0BAA0B,GAAG,uBAAuB;AAErG,QAAM,EAAE,OAAO,eAAe,UAAU,QAAQ,OAAO,IAAI;AAE3D,QAAM,EAAE,kBAAkB,aAAa,IAAI,6BAA6B,gBAAgB;AAExF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,qBAAW,SAAY,oBAAC,UAAQ,GAAG,OAAO,IAAK,oBAAC,oBAAkB,iBAAM;AAAA;AAAA,EAC3E;AAEJ;AAEA,QAAQ,cAAc;AACtB,MAAM,oBAAoB,SAAS,OAAO;AAC1C,kBAAkB,YAAY;",
   "names": []
 }

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

@@ -29,7 +29,6 @@ const Separator = (props) => {
     }
   );
 };
-Separator.propTypes = MenuItemPropTypes;
 Separator.displayName = `${DSMenuItemName}Separator`;
 const SeparatorWithSchema = describe(Separator);
 SeparatorWithSchema.propTypes = MenuItemPropTypes;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/Separator/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { MenuItemPropTypes, defaultSeparatorProps } from '../../react-desc-prop-types.js';\nimport { StyledSeparatorWrapper, StyledSeparator } from '../styled.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst Separator: React.ComponentType<DSMenuItemT.SeparatorProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSeparatorProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, MenuItemPropTypes, `${DSMenuItemName}Separator`);\n  const { wrapperStyles, innerRef, render: Render } = propsWithDefault;\n\n  // menuitems use original prop from dsdropdownmenu or dscombobox\n  const sourceGlobalProps = propsWithDefault.original ?? propsWithDefault;\n\n  const globalAttributes = useGetGlobalAttributes(sourceGlobalProps);\n\n  const xStyledProps = useGetXstyledProps(sourceGlobalProps);\n  return (\n    <StyledSeparatorWrapper\n      style={wrapperStyles}\n      ref={innerRef}\n      role=\"presentation\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render ? <Render {...props} /> : <StyledSeparator role=\"presentation\" />}\n    </StyledSeparatorWrapper>\n  );\n};\n\nSeparator.propTypes = MenuItemPropTypes;\nSeparator.displayName = `${DSMenuItemName}Separator`;\nconst SeparatorWithSchema = describe(Separator);\nSeparatorWithSchema.propTypes = MenuItemPropTypes;\n\nexport { Separator, Separator as DSSeparatorMenuItem, SeparatorWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACiCP;AAhChB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,mBAAmB,6BAA6B;AACzD,SAAS,wBAAwB,uBAAuB;AACxD,SAAS,sBAAsB;AAE/B,MAAM,YAA6D,CAAC,UAAU;AAC5E,QAAM,mBAAmB,6BAA6B,OAAO,qBAAqB;AAElF,iCAA+B,kBAAkB,mBAAmB,GAAG,yBAAyB;AAChG,QAAM,EAAE,eAAe,UAAU,QAAQ,OAAO,IAAI;AAGpD,QAAM,oBAAoB,iBAAiB,YAAY;AAEvD,QAAM,mBAAmB,uBAAuB,iBAAiB;AAEjE,QAAM,eAAe,mBAAmB,iBAAiB;AACzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,mBAAS,oBAAC,UAAQ,GAAG,OAAO,IAAK,oBAAC,mBAAgB,MAAK,gBAAe;AAAA;AAAA,EACzE;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc,GAAG;AAC3B,MAAM,sBAAsB,SAAS,SAAS;AAC9C,oBAAoB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { MenuItemPropTypes, defaultSeparatorProps } from '../../react-desc-prop-types.js';\nimport { StyledSeparatorWrapper, StyledSeparator } from '../styled.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst Separator: React.ComponentType<DSMenuItemT.SeparatorProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSeparatorProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, MenuItemPropTypes, `${DSMenuItemName}Separator`);\n  const { wrapperStyles, innerRef, render: Render } = propsWithDefault;\n\n  // menuitems use original prop from dsdropdownmenu or dscombobox\n  const sourceGlobalProps = propsWithDefault.original ?? propsWithDefault;\n\n  const globalAttributes = useGetGlobalAttributes(sourceGlobalProps);\n\n  const xStyledProps = useGetXstyledProps(sourceGlobalProps);\n  return (\n    <StyledSeparatorWrapper\n      style={wrapperStyles}\n      ref={innerRef}\n      role=\"presentation\"\n      {...globalAttributes}\n      {...xStyledProps}\n    >\n      {Render ? <Render {...props} /> : <StyledSeparator role=\"presentation\" />}\n    </StyledSeparatorWrapper>\n  );\n};\n\nSeparator.displayName = `${DSMenuItemName}Separator`;\nconst SeparatorWithSchema = describe(Separator);\nSeparatorWithSchema.propTypes = MenuItemPropTypes;\n\nexport { Separator, Separator as DSSeparatorMenuItem, SeparatorWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiCP;AAhChB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,mBAAmB,6BAA6B;AACzD,SAAS,wBAAwB,uBAAuB;AACxD,SAAS,sBAAsB;AAE/B,MAAM,YAA6D,CAAC,UAAU;AAC5E,QAAM,mBAAmB,6BAA6B,OAAO,qBAAqB;AAElF,iCAA+B,kBAAkB,mBAAmB,GAAG,yBAAyB;AAChG,QAAM,EAAE,eAAe,UAAU,QAAQ,OAAO,IAAI;AAGpD,QAAM,oBAAoB,iBAAiB,YAAY;AAEvD,QAAM,mBAAmB,uBAAuB,iBAAiB;AAEjE,QAAM,eAAe,mBAAmB,iBAAiB;AACzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,mBAAS,oBAAC,UAAQ,GAAG,OAAO,IAAK,oBAAC,mBAAgB,MAAK,gBAAe;AAAA;AAAA,EACzE;AAEJ;AAEA,UAAU,cAAc,GAAG;AAC3B,MAAM,sBAAsB,SAAS,SAAS;AAC9C,oBAAoB,YAAY;",
   "names": []
 }

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

@@ -74,7 +74,6 @@ const SingleMenuItem = (props) => {
     }
   );
 };
-SingleMenuItem.propTypes = SingleMenuItemPropTypes;
 SingleMenuItem.displayName = "DSSingleMenuItem";
 const SingleMenuItemWithSchema = describe(SingleMenuItem);
 SingleMenuItemWithSchema.propTypes = SingleMenuItemPropTypes;

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.propTypes = SingleMenuItemPropTypes;\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,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
+  "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": []
 }

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

@@ -120,7 +120,6 @@ const SingleWithSubmenuItem = (props) => {
     }
   );
 };
-SingleWithSubmenuItem.propTypes = itemProps;
 SingleWithSubmenuItem.displayName = `${DSMenuItemName}SingleWithSubmenu`;
 const SingleWithSubmenuItemWithSchema = describe(SingleWithSubmenuItem);
 SingleWithSubmenuItemWithSchema.propTypes = itemProps;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SingleWithSubmenuItem/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useEffect, useState, useMemo } from 'react';\nimport { MoreOptionsVert, ChevronRight, Checkmark } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSingleWithSubmenuProps, 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';\n\nconst SingleWithSubmenuItem: React.ComponentType<DSMenuItemT.SingleWithSubmenuProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSMenuItemT.SingleWithSubmenuProps>>(\n    props,\n    defaultSingleWithSubmenuProps,\n  );\n\n  useValidateTypescriptPropTypes(propsWithDefault, itemProps, `${DSMenuItemName}SingleWithSubmenu`);\n\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    isActive,\n    disabled,\n    onClick,\n    isSelected,\n    isSubmenuOpened,\n    rightAddon,\n    innerRef,\n    wrapperStyles,\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 = ['16px', 'auto'];\n    if (secondaryLabel) cols.push('min-content');\n    cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\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      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n      minWidth={minWidth}\n      maxHeight={maxHeight}\n      as=\"li\"\n      role=\"option\"\n      aria-selected={isSubmenuOpened}\n      aria-describedby={`dropdownmenu-submenu-${dsId}`}\n      id={dsId}\n    >\n      <StyledGlobalMenuItemWrapper\n        pr={0}\n        onClick={!disabled ? onClick : undefined}\n        isSelected={isSubmenuOpened}\n        disabled={disabled}\n        isActive={isActive}\n        onMouseEnter={onMouseEnterHandler}\n        onMouseLeave={onMouseLeaveHandler}\n        as={'div' as keyof JSX.IntrinsicElements}\n        ref={innerRef}\n        data-type=\"single-with-submenu\"\n      >\n        {Render !== undefined ? (\n          <Render {...propsWithDefault} />\n        ) : (\n          <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n            {isSelected ? (\n              <Checkmark size=\"s\" color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} />\n            ) : (\n              <div />\n            )}\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\nSingleWithSubmenuItem.propTypes = itemProps;\nSingleWithSubmenuItem.displayName = `${DSMenuItemName}SingleWithSubmenu`;\nconst SingleWithSubmenuItemWithSchema = describe(SingleWithSubmenuItem);\nSingleWithSubmenuItemWithSchema.propTypes = itemProps;\n\nexport { SingleWithSubmenuItem, SingleWithSubmenuItemWithSchema };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useEffect, useState, useMemo } from 'react';\nimport { MoreOptionsVert, ChevronRight, Checkmark } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSingleWithSubmenuProps, 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';\n\nconst SingleWithSubmenuItem: React.ComponentType<DSMenuItemT.SingleWithSubmenuProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSMenuItemT.SingleWithSubmenuProps>>(\n    props,\n    defaultSingleWithSubmenuProps,\n  );\n\n  useValidateTypescriptPropTypes(propsWithDefault, itemProps, `${DSMenuItemName}SingleWithSubmenu`);\n\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    isActive,\n    disabled,\n    onClick,\n    isSelected,\n    isSubmenuOpened,\n    rightAddon,\n    innerRef,\n    wrapperStyles,\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 = ['16px', 'auto'];\n    if (secondaryLabel) cols.push('min-content');\n    cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\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      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n      minWidth={minWidth}\n      maxHeight={maxHeight}\n      as=\"li\"\n      role=\"option\"\n      aria-selected={isSubmenuOpened}\n      aria-describedby={`dropdownmenu-submenu-${dsId}`}\n      id={dsId}\n    >\n      <StyledGlobalMenuItemWrapper\n        pr={0}\n        onClick={!disabled ? onClick : undefined}\n        isSelected={isSubmenuOpened}\n        disabled={disabled}\n        isActive={isActive}\n        onMouseEnter={onMouseEnterHandler}\n        onMouseLeave={onMouseLeaveHandler}\n        as={'div' as keyof JSX.IntrinsicElements}\n        ref={innerRef}\n        data-type=\"single-with-submenu\"\n      >\n        {Render !== undefined ? (\n          <Render {...propsWithDefault} />\n        ) : (\n          <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n            {isSelected ? (\n              <Checkmark size=\"s\" color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} />\n            ) : (\n              <div />\n            )}\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\nSingleWithSubmenuItem.displayName = `${DSMenuItemName}SingleWithSubmenu`;\nconst SingleWithSubmenuItemWithSchema = describe(SingleWithSubmenuItem);\nSingleWithSubmenuItemWithSchema.propTypes = itemProps;\n\nexport { SingleWithSubmenuItem, SingleWithSubmenuItemWithSchema };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -2,13 +2,25 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { DSSkeleton } from "@elliemae/ds-skeleton";
-import { StyledContentWrapper, StyledSkeletonWrapper } from "../styled.js";
-const SkeletonMenuItem = () => {
+import { StyledContentWrapper, StyledGlobalMenuItemWrapper } from "../styled.js";
+const SkeletonMenuItem = (props) => {
+  const { wrapperStyles, isActive } = props;
   const gridLayout = useMemo(() => ["16px", "auto"], []);
-  return /* @__PURE__ */ jsx(StyledSkeletonWrapper, { "data-type": "skeleton", "data-testid": "ds-skeleton-menu-item", role: "option", "aria-label": "skeleton", children: /* @__PURE__ */ jsxs(StyledContentWrapper, { cols: gridLayout, minHeight: "16px", gutter: "xxs", alignItems: "center", children: [
-    /* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", width: "100%" }),
-    /* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", width: "100%" })
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    StyledGlobalMenuItemWrapper,
+    {
+      "data-type": "skeleton",
+      "data-testid": "ds-skeleton-menu-item",
+      role: "option",
+      "aria-label": "skeleton",
+      style: wrapperStyles,
+      isActive,
+      children: /* @__PURE__ */ jsxs(StyledContentWrapper, { cols: gridLayout, minHeight: "16px", gutter: "xxs", alignItems: "center", children: [
+        /* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", width: "100%" }),
+        /* @__PURE__ */ jsx(DSSkeleton, { variant: "rectangular", width: "100%" })
+      ] })
+    }
+  );
 };
 export {
   SkeletonMenuItem as DSSkeletonMenuItem,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SkeletonMenuItem/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { StyledContentWrapper, StyledSkeletonWrapper } from '../styled.js';\nconst SkeletonMenuItem = () => {\n  const gridLayout = useMemo(() => ['16px', 'auto'], []);\n\n  return (\n    <StyledSkeletonWrapper data-type=\"skeleton\" data-testid=\"ds-skeleton-menu-item\" role=\"option\" aria-label=\"skeleton\">\n      <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n        <DSSkeleton variant=\"rectangular\" width={'100%'} />\n        <DSSkeleton variant=\"rectangular\" width={'100%'} />\n      </StyledContentWrapper>\n    </StyledSkeletonWrapper>\n  );\n};\n\nexport { SkeletonMenuItem, SkeletonMenuItem as DSSkeletonMenuItem };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACQjB,SACE,KADF;AARN,SAAgB,eAAe;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB,6BAA6B;AAC5D,MAAM,mBAAmB,MAAM;AAC7B,QAAM,aAAa,QAAQ,MAAM,CAAC,QAAQ,MAAM,GAAG,CAAC,CAAC;AAErD,SACE,oBAAC,yBAAsB,aAAU,YAAW,eAAY,yBAAwB,MAAK,UAAS,cAAW,YACvG,+BAAC,wBAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E;AAAA,wBAAC,cAAW,SAAQ,eAAc,OAAO,QAAQ;AAAA,IACjD,oBAAC,cAAW,SAAQ,eAAc,OAAO,QAAQ;AAAA,KACnD,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { type DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { StyledContentWrapper, StyledGlobalMenuItemWrapper } from '../styled.js';\nconst SkeletonMenuItem: React.ComponentType<DSMenuItemT.SkeletonProps> = (props) => {\n  const { wrapperStyles, isActive } = props;\n  const gridLayout = useMemo(() => ['16px', 'auto'], []);\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      data-type=\"skeleton\"\n      data-testid=\"ds-skeleton-menu-item\"\n      role=\"option\"\n      aria-label=\"skeleton\"\n      style={wrapperStyles}\n      isActive={isActive}\n    >\n      <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n        <DSSkeleton variant=\"rectangular\" width={'100%'} />\n        <DSSkeleton variant=\"rectangular\" width={'100%'} />\n      </StyledContentWrapper>\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nexport { SkeletonMenuItem, SkeletonMenuItem as DSSkeletonMenuItem };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiBjB,SACE,KADF;AAjBN,SAAgB,eAAe;AAC/B,SAAS,kBAAkB;AAE3B,SAAS,sBAAsB,mCAAmC;AAClE,MAAM,mBAAmE,CAAC,UAAU;AAClF,QAAM,EAAE,eAAe,SAAS,IAAI;AACpC,QAAM,aAAa,QAAQ,MAAM,CAAC,QAAQ,MAAM,GAAG,CAAC,CAAC;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,cAAW;AAAA,MACX,OAAO;AAAA,MACP;AAAA,MAEA,+BAAC,wBAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E;AAAA,4BAAC,cAAW,SAAQ,eAAc,OAAO,QAAQ;AAAA,QACjD,oBAAC,cAAW,SAAQ,eAAc,OAAO,QAAQ;AAAA,SACnD;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -15,6 +15,7 @@ import {
 } from "../styled.js";
 import { useGetSubmenuHandlers } from "./useGetSubmenuHandlers.js";
 import { DSMenuItemName } from "../../exported-related/index.js";
+import { useGetGlobalsAndXStyledProps } from "../useGetGlobalsAndXStyledProps.js";
 const SubmenuItem = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSubmenuProps);
   useValidateTypescriptPropTypes(propsWithDefault, itemProps, `${DSMenuItemName}Submenu`);
@@ -55,6 +56,8 @@ const SubmenuItem = (props) => {
     cols.push("min-content");
     return cols;
   }, [secondaryLabel]);
+  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(propsWithDefault);
+  const { minWidth: customMinWidth, ...restXStyled } = xStyledProps;
   return /* @__PURE__ */ jsx(
     Dropdown,
     {
@@ -92,6 +95,8 @@ const SubmenuItem = (props) => {
           pl: optionsShouldHavePadding ? 40 : 16,
           as: "div",
           "data-type": "submenu",
+          ...globalAttributes,
+          ...restXStyled,
           children: [
             Render !== void 0 ? /* @__PURE__ */ jsx(Render, { ...propsWithDefault }) : /* @__PURE__ */ jsxs(StyledContentWrapper, { cols: gridLayout, gutter: "xxs", alignItems: "center", children: [
               /* @__PURE__ */ jsx(StyleMenuItemLabel, { children: label }),
@@ -115,7 +120,6 @@ const SubmenuItem = (props) => {
     }
   );
 };
-SubmenuItem.propTypes = itemProps;
 SubmenuItem.displayName = `${DSMenuItemName}Submenu`;
 const SubmenuItemWithSchema = describe(SubmenuItem);
 SubmenuItemWithSchema.propTypes = itemProps;

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 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';\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\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      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n      minWidth={minWidth}\n      maxHeight={maxHeight}\n      as=\"li\"\n      role=\"option\"\n      aria-selected={isSubmenuOpened}\n      aria-describedby={`dropdownmenu-submenu-${dsId}`}\n      id={dsId}\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.propTypes = itemProps;\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, 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\n  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(propsWithDefault);\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\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      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n      minWidth={minWidth}\n      maxHeight={maxHeight}\n      as=\"li\"\n      role=\"option\"\n      aria-selected={isSubmenuOpened}\n      aria-describedby={`dropdownmenu-submenu-${dsId}`}\n      id={dsId}\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        {...globalAttributes}\n        {...restXStyled}\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

@@ -24,21 +24,6 @@ const disabledOption = () => css`
     cursor: not-allowed;
   }
 `;
-const StyledSkeletonWrapper = styled("li", {
-  name: DSMenuItemName,
-  slot: DSMenuItemSlots.MENU_ITEM_WRAPPER
-})`
-  min-height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
-  display: grid;
-  align-items: center;
-  list-style: none;
-  position: relative;
-  background-color: 'white';
-
-  ${xStyledCommonProps}
-`;
 const StyledGlobalMenuItemWrapper = styled("li", {
   name: DSMenuItemName,
   slot: DSMenuItemSlots.MENU_ITEM_WRAPPER
@@ -168,7 +153,6 @@ export {
   StyledSectionWrapper,
   StyledSeparator,
   StyledSeparatorWrapper,
-  StyledSkeletonWrapper,
   StyledVerticalSeparator
 };
 //# sourceMappingURL=styled.js.map

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 StyledSkeletonWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_WRAPPER,\n})<StyledGlobalMenuItemWrapperT>`\n  min-height: 32px;\n  padding-left: 16px;\n  padding-right: 16px;\n  display: grid;\n  align-items: center;\n  list-style: none;\n  position: relative;\n  background-color: 'white';\n\n  ${xStyledCommonProps}\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": "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",
+  "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;",
   "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 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.instanceOf(HTMLLIElement),\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    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.instanceOf(HTMLLIElement),\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/SkeletonMenuItem/index.d.ts

@@ -1,2 +1,4 @@
-declare const SkeletonMenuItem: () => import("react/jsx-runtime.js").JSX.Element;
+import React from 'react';
+import { type DSMenuItemT } from '../../react-desc-prop-types.js';
+declare const SkeletonMenuItem: React.ComponentType<DSMenuItemT.SkeletonProps>;
 export { SkeletonMenuItem, SkeletonMenuItem as DSSkeletonMenuItem };

package/dist/types/components/styled.d.ts

@@ -5,7 +5,6 @@ interface StyledGlobalMenuItemWrapperT extends LayoutProps, SizingProps, Positio
     isActive?: boolean;
     disabled?: boolean;
 }
-export declare const StyledSkeletonWrapper: import("styled-components").StyledComponent<"li", import("@elliemae/ds-system").Theme, StyledGlobalMenuItemWrapperT & import("@elliemae/ds-system").OwnerInterface, never>;
 export declare const StyledGlobalMenuItemWrapper: import("styled-components").StyledComponent<"li", import("@elliemae/ds-system").Theme, StyledGlobalMenuItemWrapperT & import("@elliemae/ds-system").OwnerInterface, never>;
 export declare const StyleMenuItemLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
 export declare const StyleMenuItemSecondaryLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;

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

@@ -19,6 +19,12 @@ export declare namespace DSMenuItemT {
         optionsShouldHavePadding?: boolean;
         tabIndex: WCAGTabIndex;
     }
+    interface SkeletonProps extends CommonProps<ActionProps> {
+        secondaryLabel?: string;
+        isActive?: boolean;
+        onClick?: React.MouseEventHandler;
+        tabIndex: WCAGTabIndex;
+    }
     interface MultiProps extends CommonProps<MultiProps> {
         label?: string;
         isActive?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-menu-items",
-  "version": "3.22.0-next.0",
+  "version": "3.22.0-next.15",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Menu Items",
   "files": [
@@ -37,12 +37,16 @@
   "dependencies": {
     "@xstyled/system": "~3.7.3",
     "@xstyled/util": "3.7.0",
-    "@elliemae/ds-form-checkbox": "3.22.0-next.0",
-    "@elliemae/ds-icons": "3.22.0-next.0",
-    "@elliemae/ds-grid": "3.22.0-next.0",
-    "@elliemae/ds-skeleton": "3.22.0-next.0",
-    "@elliemae/ds-props-helpers": "3.22.0-next.0",
-    "@elliemae/ds-system": "3.22.0-next.0"
+    "@elliemae/ds-form-checkbox": "3.22.0-next.15",
+    "@elliemae/ds-grid": "3.22.0-next.15",
+    "@elliemae/ds-skeleton": "3.22.0-next.15",
+    "@elliemae/ds-system": "3.22.0-next.15",
+    "@elliemae/ds-props-helpers": "3.22.0-next.15",
+    "@elliemae/ds-icons": "3.22.0-next.15"
+  },
+  "devDependencies": {
+    "@elliemae/pui-cli": "~9.0.0-next.22",
+    "@elliemae/ds-monorepo-devops": "3.22.0-next.15"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
@@ -56,11 +60,12 @@
   },
   "scripts": {
     "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
-    "test": "node ../../scripts/testing/test.mjs",
+    "test": "pui-cli test --passWithNoTests",
     "lint": "node ../../scripts/lint.mjs",
     "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
     "dts": "node ../../scripts/dts.mjs",
     "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
+    "versionx": "node ../../scripts/setup/switch-to-workspace-version.js",
     "dev:build": "pnpm --filter {.}... build",
     "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
     "checkDeps": "npm exec ../ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""