npm - @elliemae/ds-menu-items - Versions diffs - 3.22.0-next.8 → 3.22.0-rc.1 - Mend

@elliemae/ds-menu-items 3.22.0-next.8 → 3.22.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/components/ActionMenuItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "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.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.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/components/MultiMenuItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "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.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.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/components/Section/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "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.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.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/components/Separator/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "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.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.map CHANGED Viewed

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

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

@@ -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 SingleWithSubmenuItem = (props) => {
   const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(
     props,
@@ -74,6 +75,8 @@ const SingleWithSubmenuItem = (props) => {
     }
   } = propsWithDefault;
   const [delayedIsOpened, setDelayedIsOpened] = (0, import_react.useState)(false);
+  const { globalAttributes, xStyledProps } = (0, import_useGetGlobalsAndXStyledProps.useGetGlobalsAndXStyledProps)(propsWithDefault);
+  const { minWidth: customMinWidth, ...restXStyled } = xStyledProps;
   (0, import_react.useEffect)(() => {
     setTimeout(() => setDelayedIsOpened(isSubmenuOpened));
   }, [isSubmenuOpened]);
@@ -109,6 +112,8 @@ const SingleWithSubmenuItem = (props) => {
       "aria-selected": isSubmenuOpened,
       "aria-describedby": `dropdownmenu-submenu-${dsId}`,
       id: dsId,
+      ...globalAttributes,
+      ...restXStyled,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         import_styled.StyledGlobalMenuItemWrapper,
         {

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

@@ -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.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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",
+  "sources": ["../../../../src/components/SingleWithSubmenuItem/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable no-unused-vars */\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';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.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  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(propsWithDefault);\n  const { minWidth: customMinWidth, ...restXStyled } = xStyledProps;\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      {...globalAttributes}\n      {...restXStyled}\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/SingleWithSubmenuItem/useGetSubmenuHandlers.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/components/SingleWithSubmenuItem/useGetSubmenuHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../../src/components/SingleWithSubmenuItem/useGetSubmenuHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { useRef, useCallback } from 'react';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\n\nexport const useGetSubmenuHandlers = ({\n  disabled,\n  rightAddon,\n  isSubmenuOpened,\n  onMouseEnter,\n  onSubmenuOpen,\n  onSubmenuClose,\n  onMouseLeave,\n}: Required<DSMenuItemT.SingleWithSubmenuProps>) => {\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n  const onMouseEnterHandler = useCallback(\n    (e: React.MouseEvent) => {\n      if (rightAddon !== 'ellipsis') {\n        if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);\n        else if (!isSubmenuOpened) onSubmenuOpen(e);\n        timeoutRef.current = null;\n      }\n      onMouseEnter(e);\n    },\n    [isSubmenuOpened, onMouseEnter, onSubmenuOpen, rightAddon],\n  );\n\n  const onMouseLeaveHandler = useCallback(\n    (e: React.MouseEvent) => {\n      if (rightAddon !== 'ellipsis') {\n        if (timeoutRef.current === null) {\n          timeoutRef.current = setTimeout(() => {\n            timeoutRef.current = null;\n            onSubmenuClose(e);\n          }, 300);\n        }\n      }\n      onMouseLeave(e);\n    },\n    [onMouseLeave, onSubmenuClose, rightAddon],\n  );\n\n  const onEllipsisClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (disabled) return;\n      e.stopPropagation();\n      if (isSubmenuOpened) onSubmenuClose(e);\n      else onSubmenuOpen(e);\n    },\n    [disabled, isSubmenuOpened, onSubmenuClose, onSubmenuOpen],\n  );\n\n  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AAG7B,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAoD;AAClD,QAAM,iBAAa,qBAA8B,IAAI;AAErD,QAAM,0BAAsB;AAAA,IAC1B,CAAC,MAAwB;AACvB,UAAI,eAAe,YAAY;AAC7B,YAAI,WAAW,YAAY;AAAM,uBAAa,WAAW,OAAO;AAAA,iBACvD,CAAC;AAAiB,wBAAc,CAAC;AAC1C,mBAAW,UAAU;AAAA,MACvB;AACA,mBAAa,CAAC;AAAA,IAChB;AAAA,IACA,CAAC,iBAAiB,cAAc,eAAe,UAAU;AAAA,EAC3D;AAEA,QAAM,0BAAsB;AAAA,IAC1B,CAAC,MAAwB;AACvB,UAAI,eAAe,YAAY;AAC7B,YAAI,WAAW,YAAY,MAAM;AAC/B,qBAAW,UAAU,WAAW,MAAM;AACpC,uBAAW,UAAU;AACrB,2BAAe,CAAC;AAAA,UAClB,GAAG,GAAG;AAAA,QACR;AAAA,MACF;AACA,mBAAa,CAAC;AAAA,IAChB;AAAA,IACA,CAAC,cAAc,gBAAgB,UAAU;AAAA,EAC3C;AAEA,QAAM,sBAA2C;AAAA,IAC/C,CAAC,MAAM;AACL,UAAI;AAAU;AACd,QAAE,gBAAgB;AAClB,UAAI;AAAiB,uBAAe,CAAC;AAAA;AAChC,sBAAc,CAAC;AAAA,IACtB;AAAA,IACA,CAAC,UAAU,iBAAiB,gBAAgB,aAAa;AAAA,EAC3D;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,gBAAgB;AACrE;",
   "names": []

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

@@ -38,11 +38,12 @@ var import_react = require("react");
 var import_ds_skeleton = require("@elliemae/ds-skeleton");
 var import_styled = require("../styled.js");
 const SkeletonMenuItem = (props) => {
-  const { wrapperStyles, isActive } = props;
+  const { wrapperStyles, isActive, dsId } = props;
   const gridLayout = (0, import_react.useMemo)(() => ["16px", "auto"], []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styled.StyledGlobalMenuItemWrapper,
     {
+      id: dsId,
       "data-type": "skeleton",
       "data-testid": "ds-skeleton-menu-item",
       role: "option",

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

@@ -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 { 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;",
+  "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 { 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, dsId } = props;\n  const gridLayout = useMemo(() => ['16px', 'auto'], []);\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      id={dsId}\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;ADkBjB;AAlBN,mBAA+B;AAC/B,yBAA2B;AAE3B,oBAAkE;AAClE,MAAM,mBAAmE,CAAC,UAAU;AAClF,QAAM,EAAE,eAAe,UAAU,KAAK,IAAI;AAC1C,QAAM,iBAAa,sBAAQ,MAAM,CAAC,QAAQ,MAAM,GAAG,CAAC,CAAC;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,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/getChevronHandlers.js.map CHANGED Viewed

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

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

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

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

@@ -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,
     {
@@ -105,6 +108,8 @@ const SubmenuItem = (props) => {
       "aria-selected": isSubmenuOpened,
       "aria-describedby": `dropdownmenu-submenu-${dsId}`,
       id: dsId,
+      ...globalAttributes,
+      ...restXStyled,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         import_styled.StyledGlobalMenuItemWrapper,
         {

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

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

package/dist/cjs/components/SubmenuItem/useGetSubmenuHandlers.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/components/SubmenuItem/useGetSubmenuHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../../src/components/SubmenuItem/useGetSubmenuHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { useMemo } from 'react';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { getEllipsisHandlers } from './getEllipsisHandlers.js';\nimport { getChevronHandlers } from './getChevronHandlers.js';\n\n// what we are trying to do:\n//   Ellipsis case:\n//     onMouseEnter -> open submenu\n//     onMouseLeave -> close submenu\n//     onEllipsisClick -> we should not even invoke this handler, as the \"ellipsis\" should not even exist?\n//   Chevron case:\n//     onMouseEnter -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//     onMouseLeave -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//     onEllipsisClick -> toggle the submenu open/close as per design\n\n// what are the \"challenges\" of the task:\n//  - we have chosen to abstract multiple possible logical \"flows\" into the same layer for some reason\n//      specifically speaking this is trying to solve the\n//         \"rightAddons\" is \"ellipsis\" case\n//            at the same time as the\n//         \"rightAddons\" is \"chevron\" case\n//    they have more differences than similarities, so this is messy\n\n// @yuri since I'm both lazy and stupid, I want my code to be as stupid simple as me\n//   I am removing one layer of abstraction,\n//       ellipsis gets it's own logical flow\n//       as does chevron\n//   if you are a DRY advocate, you will probably hate me for this, I'm all for AHA (Avoid Hasty Abstractions).\nexport const useGetSubmenuHandlers = (submenuProps: Required<DSMenuItemT.SubmenuProps>) => {\n  const { rightAddon } = submenuProps;\n  return useMemo(() => {\n    if (rightAddon === 'ellipsis') return getEllipsisHandlers(submenuProps);\n    return getChevronHandlers(submenuProps);\n  }, [submenuProps, rightAddon]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AAExB,iCAAoC;AACpC,gCAAmC;AAyB5B,MAAM,wBAAwB,CAAC,iBAAqD;AACzF,QAAM,EAAE,WAAW,IAAI;AACvB,aAAO,sBAAQ,MAAM;AACnB,QAAI,eAAe;AAAY,iBAAO,gDAAoB,YAAY;AACtE,eAAO,8CAAmB,YAAY;AAAA,EACxC,GAAG,CAAC,cAAc,UAAU,CAAC;AAC/B;",
   "names": []

package/dist/cjs/components/index.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../src/components/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../src/components/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export * from './ActionMenuItem/index.js';\nexport * from './MultiMenuItem/index.js';\nexport * from './Section/index.js';\nexport * from './Separator/index.js';\nexport * from './SingleMenuItem/index.js';\nexport * from './SingleWithSubmenuItem/index.js';\nexport * from './SubmenuItem/index.js';\nexport * from './SkeletonMenuItem/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAc,sCAAd;AACA,+BAAc,qCADd;AAEA,+BAAc,+BAFd;AAGA,+BAAc,iCAHd;AAIA,+BAAc,sCAJd;AAKA,+BAAc,6CALd;AAMA,+BAAc,mCANd;AAOA,+BAAc,wCAPd;",
   "names": []

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../src/components/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../src/components/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import type { LayoutProps, SizingProps, PositionProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuItemName, DSMenuItemSlots } from '../exported-related/index.js';\n\nconst borderOutside = () => css`\n  :after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 1px solid ${({ theme }) => theme.colors.brand[500]};\n    pointer-events: none;\n    z-index: 7;\n  }\n`;\n\nconst disabledOption = () => css`\n  color: ${({ theme }) => theme.colors.neutral[500]};\n\n  cursor: not-allowed;\n  * {\n    cursor: not-allowed;\n  }\n`;\n\ninterface StyledGlobalMenuItemWrapperT extends LayoutProps, SizingProps, PositionProps, SpaceProps {\n  isSelected?: boolean;\n  isActive?: boolean;\n  disabled?: boolean;\n}\n\nexport const StyledGlobalMenuItemWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_WRAPPER,\n})<StyledGlobalMenuItemWrapperT>`\n  cursor: pointer;\n  min-height: 32px;\n\n  padding-left: 16px;\n  padding-right: 16px;\n  display: grid;\n  align-items: center;\n  list-style: none;\n  position: relative;\n\n  ${(props) => {\n    if (props.disabled) return disabledOption();\n    if (props.isActive) return borderOutside();\n    return '';\n  }};\n\n  background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : 'white')};\n\n  // focus style for standalone version\n  &:focus {\n    ${borderOutside()}\n    outline: none;\n    background-color: ${(props) => props.theme.colors.brand[200]};\n  }\n  &:hover {\n    background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};\n  }\n  ${xStyledCommonProps}\n`;\n\nexport const StyleMenuItemLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`\n  padding: 8px 0;\n  font-size: 13px;\n`;\n\nexport const StyleMenuItemSecondaryLabel = styled('span', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SECONDARY_LABEL,\n})`\n  padding: 8px 0;\n  font-size: 11px;\n  font-style: italic;\n  color: brand-800;\n`;\n\nexport const StyledIconContainer = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_ICON })`\n  width: 25px;\n  height: 24px;\n  display: grid;\n  grid-template-columns: min-content auto;\n  place-items: center;\n`;\n\nexport const StyledEllipsisButton = styled('div', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_ELLIPSIS_BUTTON,\n})<{ disabled: boolean }>`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: grid;\n  place-items: center;\n  background: transparent;\n  :active {\n    ${(props) => (props.disabled ? '' : borderOutside())}\n  }\n`;\n\nexport const StyledItemContent = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_CONTENT })`\n  display: flex;\n  width: 100%;\n  margin: 8px 0px;\n`;\n\nexport const StyledSeparator = styled('hr', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR })`\n  border: 0;\n  border-top: 1px solid #697489;\n  margin: 4px 0px;\n  padding: 0;\n`;\n\nexport const StyledSeparatorWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR_WRAPPER,\n})`\n  list-style: none;\n  padding: 0px 16px;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledGroupLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL })`\n  font-size: 13px;\n  color: neutral-500;\n`;\n\nexport const StyledSectionWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER,\n})`\n  list-style: none;\n  padding: 0px 16px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_VERTICAL_SEPARATOR,\n})`\n  width: 1px;\n  height: 18px;\n  background-color: neutral-300;\n`;\n\nexport const StyledContentWrapper = styled(Grid, {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_CONTENT_WRAPPER,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAgD;AAChD,qBAAqB;AACrB,8BAAgD;AAEhD,MAAM,gBAAgB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASJ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAM7D,MAAM,iBAAiB,MAAM;AAAA,WAClB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc3C,MAAM,kCAA8B,yBAAO,MAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWG,CAAC,UAAU;AACX,MAAI,MAAM;AAAU,WAAO,eAAe;AAC1C,MAAI,MAAM;AAAU,WAAO,cAAc;AACzC,SAAO;AACT;AAAA;AAAA,sBAEoB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,GAAG,IAAI;AAAA;AAAA;AAAA;AAAA,MAI7E,cAAc;AAAA;AAAA,wBAEI,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,wBAGvC,CAAC,UAAU,CAAC,MAAM,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,IAE9E;AAAA;AAGG,MAAM,yBAAqB,yBAAO,QAAQ,EAAE,MAAM,wCAAgB,MAAM,wCAAgB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAKzG,MAAM,kCAA8B,yBAAO,QAAQ;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,wCAAgB,MAAM,wCAAgB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQxG,MAAM,2BAAuB,yBAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQK,CAAC,UAAW,MAAM,WAAW,KAAK,cAAc;AAAA;AAAA;AAI/C,MAAM,wBAAoB,yBAAO,OAAO,EAAE,MAAM,wCAAgB,MAAM,wCAAgB,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMzG,MAAM,sBAAkB,yBAAO,MAAM,EAAE,MAAM,wCAAgB,MAAM,wCAAgB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxG,MAAM,6BAAyB,yBAAO,MAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG;AAAA;AAGG,MAAM,uBAAmB,yBAAO,QAAQ,EAAE,MAAM,wCAAgB,MAAM,wCAAgB,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAK7G,MAAM,2BAAuB,yBAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOG;AAAA;AAGG,MAAM,8BAA0B,yBAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;",
   "names": []

package/dist/cjs/components/useGetGlobalsAndXStyledProps.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../src/components/useGetGlobalsAndXStyledProps.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../src/components/useGetGlobalsAndXStyledProps.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../react-desc-prop-types.js';\n\nexport const useGetGlobalsAndXStyledProps = (\n  props: DSMenuItemT.AllTypeItems,\n  toMergeEvents?: Record<string, unknown>,\n) => {\n  const sourceGlobalProps = props.original ?? props;\n\n  const globalAttributes = useGetGlobalAttributes(sourceGlobalProps, toMergeEvents);\n  const xStyledProps = useGetXstyledProps(sourceGlobalProps);\n\n  return { globalAttributes, xStyledProps };\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA2D;AAGpD,MAAM,+BAA+B,CAC1C,OACA,kBACG;AACH,QAAM,oBAAoB,MAAM,YAAY;AAE5C,QAAM,uBAAmB,gDAAuB,mBAAmB,aAAa;AAChF,QAAM,mBAAe,4CAAmB,iBAAiB;AAEzD,SAAO,EAAE,kBAAkB,aAAa;AAC1C;",
   "names": []

package/dist/cjs/exported-related/constants.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../src/exported-related/constants.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../src/exported-related/constants.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export const DSMenuItemName = 'DSMenuItem';\n\nexport const DSMenuItemSlots = {\n  MENU_ITEM_WRAPPER: 'menu-item-wrapper',\n  MENU_ITEM_LABEL: 'menu-item-label',\n  MENU_ITEM_SECONDARY_LABEL: 'menu-item-secondary-label',\n  MENU_ITEM_ICON: 'menu-item-icon',\n  MENU_ITEM_ELLIPSIS_BUTTON: 'menu-item-ellipsis-button',\n  MENU_ITEM_CONTENT: 'menu-item-content',\n  MENU_ITEM_SEPARATOR: 'menu-item-separator',\n  MENU_ITEM_SEPARATOR_WRAPPER: 'menu-item-separator-wrapper',\n  MENU_ITEM_GROUP_LABEL: 'menu-item-group-label',\n  MENU_ITEM_SECTION_WRAPPER: 'menu-item-section-wrapper',\n  MENU_ITEM_VERTICAL_SEPARATOR: 'menu-item-vertical-separator',\n  MENU_ITEM_CONTENT_WRAPPER: 'menu-item-content-wrapper',\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,2BAA2B;AAAA,EAC3B,gBAAgB;AAAA,EAChB,2BAA2B;AAAA,EAC3B,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,2BAA2B;AAAA,EAC3B,8BAA8B;AAAA,EAC9B,2BAA2B;AAC7B;",
   "names": []

package/dist/cjs/exported-related/index.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../src/exported-related/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../src/exported-related/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export * from './constants.js';\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,qCAAc,2BAAd;",
   "names": []

package/dist/cjs/index.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\n\nexport * from './components/index.js';\nexport * from './exported-related/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADGvB,wBAAc,kCAHd;AAIA,wBAAc,wCAJd;",
   "names": []

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

@@ -131,7 +131,7 @@ const MenuItemPropTypes = {
   dsId: import_ds_props_helpers.PropTypes.string.description("The unique ID for the menu item.").isRequired,
   innerRef: import_ds_props_helpers.PropTypes.oneOfType([
     import_ds_props_helpers.PropTypes.shape({
-      current: import_ds_props_helpers.PropTypes.instanceOf(HTMLLIElement)
+      current: import_ds_props_helpers.PropTypes.node
     }),
     import_ds_props_helpers.PropTypes.func.description(
       " A ref object or callback function to access the underlying DOM element (HTMLLIElement) of the menu item."

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { PropsWithChildren, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nexport namespace DSMenuItemT {\n  export interface CommonProps<T = Record<string, unknown>> {\n    dsId: string;\n    innerRef?: React.RefObject<HTMLLIElement> | ((_ref: HTMLLIElement) => void);\n    wrapperStyles?: Record<string, unknown>;\n    render?: React.ComponentType<T>;\n    original?: Record<string, unknown>;\n  }\n\n  export interface ActionProps extends CommonProps<ActionProps> {\n    label?: string;\n    secondaryLabel?: string;\n    value?: unknown;\n    disabled?: boolean;\n    isActive?: boolean;\n    onClick?: React.MouseEventHandler;\n    optionsShouldHavePadding?: boolean;\n    tabIndex: WCAGTabIndex;\n  }\n\n  export interface SkeletonProps extends CommonProps<ActionProps> {\n    secondaryLabel?: string;\n    isActive?: boolean;\n    onClick?: React.MouseEventHandler;\n    tabIndex: WCAGTabIndex;\n  }\n\n  export interface MultiProps extends CommonProps<MultiProps> {\n    label?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSelected?: boolean;\n    onClick?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    dataTestid?: string;\n    tabIndex?: WCAGTabIndex;\n  }\n\n  export interface SingleProps extends CommonProps<SingleProps> {\n    label?: string;\n    secondaryLabel?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSelected?: boolean;\n    onClick?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    dataTestid?: string;\n    tabIndex?: number;\n  }\n\n  export interface SubmenuProps extends CommonProps<SubmenuProps> {\n    label?: string;\n    secondaryLabel?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSubmenuOpened?: boolean;\n    onSubmenuOpen?: React.MouseEventHandler;\n    onSubmenuClose?: React.MouseEventHandler;\n    rightAddon?: 'ellipsis' | 'chevron';\n    optionsShouldHavePadding?: boolean;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    Dropdown: React.ComponentType<PropsWithChildren<SubmenuProps['dropdownProps']>>;\n    dropdownProps?: {\n      options: any[];\n      onSubmenuToggle?: (\n        nextOpenedSubmenus: Record<string, boolean>,\n        submenu: any,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      openedSubmenus?: Record<string, boolean>;\n      selectedOptions?: Record<string, boolean>;\n      onKeyDown?: React.KeyboardEventHandler;\n      onOptionClick?: (\n        nextSelectedOptions: Record<string, boolean>,\n        clickedOption: any,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      onClickOutside?: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n      minWidth?: SizingProps['minWidth'];\n      maxHeight?: SizingProps['maxHeight'];\n      [key: string]: unknown;\n    };\n  }\n\n  export interface SectionProps extends CommonProps<SectionProps> {\n    label?: string;\n  }\n\n  export type SeparatorProps = CommonProps<SeparatorProps>;\n\n  export interface SingleWithSubmenuProps extends Omit<SingleProps, 'render'>, Omit<SubmenuProps, 'render'> {\n    render?: React.ComponentType<SingleWithSubmenuProps>;\n  }\n  export type AllTypeItems = ActionProps | MultiProps | SingleProps | SubmenuProps | SectionProps | SeparatorProps;\n}\n\nconst noop = () => null;\n\nexport const defaultCommonProps: Partial<Omit<DSMenuItemT.CommonProps, 'render'>> = {\n  innerRef: noop,\n  wrapperStyles: {},\n};\n\nexport const defaultActionProps: Partial<DSMenuItemT.ActionProps> = {\n  ...defaultCommonProps,\n  label: '',\n  value: undefined,\n  disabled: false,\n  isActive: false,\n  onClick: noop,\n  optionsShouldHavePadding: false,\n  tabIndex: 0,\n};\n\nexport const defaultMultiProps: Partial<DSMenuItemT.MultiProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSelected: false,\n  onClick: noop,\n  onMouseDown: noop,\n  onMouseEnter: noop,\n  onMouseLeave: noop,\n  tabIndex: 0,\n};\n\nexport const defaultSingleProps: Partial<DSMenuItemT.SingleProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSelected: false,\n  onClick: noop,\n  onMouseDown: noop,\n  onMouseEnter: noop,\n  onMouseLeave: noop,\n  dataTestid: 'ds-menu-item',\n  tabIndex: 0,\n};\n\nexport const defaultSubmenuProps: Partial<DSMenuItemT.SubmenuProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSubmenuOpened: false,\n  onSubmenuOpen: noop,\n  rightAddon: 'chevron',\n  optionsShouldHavePadding: false,\n  Dropdown: noop,\n  dropdownProps: {\n    options: [],\n    onSubmenuToggle: noop,\n    openedSubmenus: {},\n    selectedOptions: {},\n    onKeyDown: noop,\n    onOptionClick: noop,\n    onClickOutside: noop,\n    minWidth: 'auto',\n    maxHeight: 'auto',\n  },\n};\n\nexport const defaultSectionProps: Partial<DSMenuItemT.SectionProps> = {\n  ...defaultCommonProps,\n  label: '',\n};\n\nexport const defaultSeparatorProps: Partial<DSMenuItemT.SeparatorProps> = {\n  ...defaultCommonProps,\n};\n\nexport const defaultSingleWithSubmenuProps: Partial<Omit<DSMenuItemT.SingleWithSubmenuProps, 'render'>> = {\n  ...defaultSingleProps,\n  ...defaultSubmenuProps,\n};\n\nexport const itemProps = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  dsId: PropTypes.string,\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n  wrapperStyles: PropTypes.object,\n  render: PropTypes.func,\n} as WeakValidationMap<unknown>;\n\nexport const MenuItemPropTypes = {\n  dsId: PropTypes.string.description('The unique ID for the menu item.').isRequired,\n  innerRef: PropTypes.oneOfType([\n    PropTypes.shape({\n      current: PropTypes.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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",
+  "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { PropsWithChildren, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nexport namespace DSMenuItemT {\n  export interface CommonProps<T = Record<string, unknown>> {\n    dsId: string;\n    innerRef?: React.RefObject<HTMLLIElement> | ((_ref: HTMLLIElement) => void);\n    wrapperStyles?: Record<string, unknown>;\n    render?: React.ComponentType<T>;\n    original?: Record<string, unknown>;\n  }\n\n  export interface ActionProps extends CommonProps<ActionProps> {\n    label?: string;\n    secondaryLabel?: string;\n    value?: unknown;\n    disabled?: boolean;\n    isActive?: boolean;\n    onClick?: React.MouseEventHandler;\n    optionsShouldHavePadding?: boolean;\n    tabIndex: WCAGTabIndex;\n  }\n\n  export interface SkeletonProps extends CommonProps<ActionProps> {\n    secondaryLabel?: string;\n    isActive?: boolean;\n    onClick?: React.MouseEventHandler;\n    tabIndex?: WCAGTabIndex;\n  }\n\n  export interface MultiProps extends CommonProps<MultiProps> {\n    label?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSelected?: boolean;\n    onClick?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    dataTestid?: string;\n    tabIndex?: WCAGTabIndex;\n  }\n\n  export interface SingleProps extends CommonProps<SingleProps> {\n    label?: string;\n    secondaryLabel?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSelected?: boolean;\n    onClick?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    dataTestid?: string;\n    tabIndex?: number;\n  }\n\n  export interface SubmenuProps extends CommonProps<SubmenuProps> {\n    label?: string;\n    secondaryLabel?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSubmenuOpened?: boolean;\n    onSubmenuOpen?: React.MouseEventHandler;\n    onSubmenuClose?: React.MouseEventHandler;\n    rightAddon?: 'ellipsis' | 'chevron';\n    optionsShouldHavePadding?: boolean;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    Dropdown: React.ComponentType<PropsWithChildren<SubmenuProps['dropdownProps']>>;\n    dropdownProps?: {\n      options: any[];\n      onSubmenuToggle?: (\n        nextOpenedSubmenus: Record<string, boolean>,\n        submenu: any,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      openedSubmenus?: Record<string, boolean>;\n      selectedOptions?: Record<string, boolean>;\n      onKeyDown?: React.KeyboardEventHandler;\n      onOptionClick?: (\n        nextSelectedOptions: Record<string, boolean>,\n        clickedOption: any,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      onClickOutside?: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n      minWidth?: SizingProps['minWidth'];\n      maxHeight?: SizingProps['maxHeight'];\n      [key: string]: unknown;\n    };\n  }\n\n  export interface SectionProps extends CommonProps<SectionProps> {\n    label?: string;\n  }\n\n  export type SeparatorProps = CommonProps<SeparatorProps>;\n\n  export interface SingleWithSubmenuProps extends Omit<SingleProps, 'render'>, Omit<SubmenuProps, 'render'> {\n    render?: React.ComponentType<SingleWithSubmenuProps>;\n  }\n  export type AllTypeItems = ActionProps | MultiProps | SingleProps | SubmenuProps | SectionProps | SeparatorProps;\n}\n\nconst noop = () => null;\n\nexport const defaultCommonProps: Partial<Omit<DSMenuItemT.CommonProps, 'render'>> = {\n  innerRef: noop,\n  wrapperStyles: {},\n};\n\nexport const defaultActionProps: Partial<DSMenuItemT.ActionProps> = {\n  ...defaultCommonProps,\n  label: '',\n  value: undefined,\n  disabled: false,\n  isActive: false,\n  onClick: noop,\n  optionsShouldHavePadding: false,\n  tabIndex: 0,\n};\n\nexport const defaultMultiProps: Partial<DSMenuItemT.MultiProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSelected: false,\n  onClick: noop,\n  onMouseDown: noop,\n  onMouseEnter: noop,\n  onMouseLeave: noop,\n  tabIndex: 0,\n};\n\nexport const defaultSingleProps: Partial<DSMenuItemT.SingleProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSelected: false,\n  onClick: noop,\n  onMouseDown: noop,\n  onMouseEnter: noop,\n  onMouseLeave: noop,\n  dataTestid: 'ds-menu-item',\n  tabIndex: 0,\n};\n\nexport const defaultSubmenuProps: Partial<DSMenuItemT.SubmenuProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSubmenuOpened: false,\n  onSubmenuOpen: noop,\n  rightAddon: 'chevron',\n  optionsShouldHavePadding: false,\n  Dropdown: noop,\n  dropdownProps: {\n    options: [],\n    onSubmenuToggle: noop,\n    openedSubmenus: {},\n    selectedOptions: {},\n    onKeyDown: noop,\n    onOptionClick: noop,\n    onClickOutside: noop,\n    minWidth: 'auto',\n    maxHeight: 'auto',\n  },\n};\n\nexport const defaultSectionProps: Partial<DSMenuItemT.SectionProps> = {\n  ...defaultCommonProps,\n  label: '',\n};\n\nexport const defaultSeparatorProps: Partial<DSMenuItemT.SeparatorProps> = {\n  ...defaultCommonProps,\n};\n\nexport const defaultSingleWithSubmenuProps: Partial<Omit<DSMenuItemT.SingleWithSubmenuProps, 'render'>> = {\n  ...defaultSingleProps,\n  ...defaultSubmenuProps,\n};\n\nexport const itemProps = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  dsId: PropTypes.string,\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n  wrapperStyles: PropTypes.object,\n  render: PropTypes.func,\n} as WeakValidationMap<unknown>;\n\nexport const MenuItemPropTypes = {\n  dsId: PropTypes.string.description('The unique ID for the menu item.').isRequired,\n  innerRef: PropTypes.oneOfType([\n    PropTypes.shape({\n      current: PropTypes.node,\n    }),\n    PropTypes.func.description(\n      ' A ref object or callback function to access the underlying DOM element (HTMLLIElement) of the menu item.',\n    ),\n  ]),\n  render: PropTypes.func.description('A custom render function to render the content of the menu item.'),\n} as WeakValidationMap<unknown>;\n\nexport const SingleMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n  secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.'),\n  disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n  isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const MultiMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n  secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.'),\n  disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n  isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const ActionMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n  value: PropTypes.any.description('The value of the menu item.'),\n  disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.'),\n} as WeakValidationMap<unknown>;\n\nexport const SectionMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/ActionMenuItem/index.tsx"],
+  "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.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.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/MultiMenuItem/index.tsx"],
+  "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.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.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/Section/index.tsx"],
+  "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.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.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/Separator/index.tsx"],
+  "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.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.map CHANGED Viewed

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

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

@@ -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 SingleWithSubmenuItem = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(
     props,
@@ -48,6 +49,8 @@ const SingleWithSubmenuItem = (props) => {
     }
   } = propsWithDefault;
   const [delayedIsOpened, setDelayedIsOpened] = useState(false);
+  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(propsWithDefault);
+  const { minWidth: customMinWidth, ...restXStyled } = xStyledProps;
   useEffect(() => {
     setTimeout(() => setDelayedIsOpened(isSubmenuOpened));
   }, [isSubmenuOpened]);
@@ -83,6 +86,8 @@ const SingleWithSubmenuItem = (props) => {
       "aria-selected": isSubmenuOpened,
       "aria-describedby": `dropdownmenu-submenu-${dsId}`,
       id: dsId,
+      ...globalAttributes,
+      ...restXStyled,
       children: /* @__PURE__ */ jsxs(
         StyledGlobalMenuItemWrapper,
         {

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

@@ -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.displayName = `${DSMenuItemName}SingleWithSubmenu`;\nconst SingleWithSubmenuItemWithSchema = describe(SingleWithSubmenuItem);\nSingleWithSubmenuItemWithSchema.propTypes = itemProps;\n\nexport { SingleWithSubmenuItem, SingleWithSubmenuItemWithSchema };\n"],
-  "mappings": "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",
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SingleWithSubmenuItem/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\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';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.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  const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(propsWithDefault);\n  const { minWidth: customMinWidth, ...restXStyled } = xStyledProps;\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      {...globalAttributes}\n      {...restXStyled}\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/SingleWithSubmenuItem/useGetSubmenuHandlers.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SingleWithSubmenuItem/useGetSubmenuHandlers.tsx"],
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SingleWithSubmenuItem/useGetSubmenuHandlers.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useRef, useCallback } from 'react';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\n\nexport const useGetSubmenuHandlers = ({\n  disabled,\n  rightAddon,\n  isSubmenuOpened,\n  onMouseEnter,\n  onSubmenuOpen,\n  onSubmenuClose,\n  onMouseLeave,\n}: Required<DSMenuItemT.SingleWithSubmenuProps>) => {\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n  const onMouseEnterHandler = useCallback(\n    (e: React.MouseEvent) => {\n      if (rightAddon !== 'ellipsis') {\n        if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);\n        else if (!isSubmenuOpened) onSubmenuOpen(e);\n        timeoutRef.current = null;\n      }\n      onMouseEnter(e);\n    },\n    [isSubmenuOpened, onMouseEnter, onSubmenuOpen, rightAddon],\n  );\n\n  const onMouseLeaveHandler = useCallback(\n    (e: React.MouseEvent) => {\n      if (rightAddon !== 'ellipsis') {\n        if (timeoutRef.current === null) {\n          timeoutRef.current = setTimeout(() => {\n            timeoutRef.current = null;\n            onSubmenuClose(e);\n          }, 300);\n        }\n      }\n      onMouseLeave(e);\n    },\n    [onMouseLeave, onSubmenuClose, rightAddon],\n  );\n\n  const onEllipsisClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (disabled) return;\n      e.stopPropagation();\n      if (isSubmenuOpened) onSubmenuClose(e);\n      else onSubmenuOpen(e);\n    },\n    [disabled, isSubmenuOpened, onSubmenuClose, onSubmenuOpen],\n  );\n\n  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,mBAAmB;AAG7B,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAoD;AAClD,QAAM,aAAa,OAA8B,IAAI;AAErD,QAAM,sBAAsB;AAAA,IAC1B,CAAC,MAAwB;AACvB,UAAI,eAAe,YAAY;AAC7B,YAAI,WAAW,YAAY;AAAM,uBAAa,WAAW,OAAO;AAAA,iBACvD,CAAC;AAAiB,wBAAc,CAAC;AAC1C,mBAAW,UAAU;AAAA,MACvB;AACA,mBAAa,CAAC;AAAA,IAChB;AAAA,IACA,CAAC,iBAAiB,cAAc,eAAe,UAAU;AAAA,EAC3D;AAEA,QAAM,sBAAsB;AAAA,IAC1B,CAAC,MAAwB;AACvB,UAAI,eAAe,YAAY;AAC7B,YAAI,WAAW,YAAY,MAAM;AAC/B,qBAAW,UAAU,WAAW,MAAM;AACpC,uBAAW,UAAU;AACrB,2BAAe,CAAC;AAAA,UAClB,GAAG,GAAG;AAAA,QACR;AAAA,MACF;AACA,mBAAa,CAAC;AAAA,IAChB;AAAA,IACA,CAAC,cAAc,gBAAgB,UAAU;AAAA,EAC3C;AAEA,QAAM,kBAA2C;AAAA,IAC/C,CAAC,MAAM;AACL,UAAI;AAAU;AACd,QAAE,gBAAgB;AAClB,UAAI;AAAiB,uBAAe,CAAC;AAAA;AAChC,sBAAc,CAAC;AAAA,IACtB;AAAA,IACA,CAAC,UAAU,iBAAiB,gBAAgB,aAAa;AAAA,EAC3D;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,gBAAgB;AACrE;",
   "names": []

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

@@ -4,11 +4,12 @@ import { useMemo } from "react";
 import { DSSkeleton } from "@elliemae/ds-skeleton";
 import { StyledContentWrapper, StyledGlobalMenuItemWrapper } from "../styled.js";
 const SkeletonMenuItem = (props) => {
-  const { wrapperStyles, isActive } = props;
+  const { wrapperStyles, isActive, dsId } = props;
   const gridLayout = useMemo(() => ["16px", "auto"], []);
   return /* @__PURE__ */ jsx(
     StyledGlobalMenuItemWrapper,
     {
+      id: dsId,
       "data-type": "skeleton",
       "data-testid": "ds-skeleton-menu-item",
       role: "option",

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

@@ -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 { 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;",
+  "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 { 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, dsId } = props;\n  const gridLayout = useMemo(() => ['16px', 'auto'], []);\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      id={dsId}\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;ACkBjB,SACE,KADF;AAlBN,SAAgB,eAAe;AAC/B,SAAS,kBAAkB;AAE3B,SAAS,sBAAsB,mCAAmC;AAClE,MAAM,mBAAmE,CAAC,UAAU;AAClF,QAAM,EAAE,eAAe,UAAU,KAAK,IAAI;AAC1C,QAAM,aAAa,QAAQ,MAAM,CAAC,QAAQ,MAAM,GAAG,CAAC,CAAC;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,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/getChevronHandlers.js.map CHANGED Viewed

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

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

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

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

@@ -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,
     {
@@ -79,6 +82,8 @@ const SubmenuItem = (props) => {
       "aria-selected": isSubmenuOpened,
       "aria-describedby": `dropdownmenu-submenu-${dsId}`,
       id: dsId,
+      ...globalAttributes,
+      ...restXStyled,
       children: /* @__PURE__ */ jsxs(
         StyledGlobalMenuItemWrapper,
         {

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

@@ -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.displayName = `${DSMenuItemName}Submenu`;\nconst SubmenuItemWithSchema = describe(SubmenuItem);\nSubmenuItemWithSchema.propTypes = itemProps;\n\nexport { SubmenuItem, SubmenuItemWithSchema };\n"],
-  "mappings": "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",
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SubmenuItem/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable max-lines */\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { MoreOptionsVert, ChevronRight } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSubmenuProps, itemProps } from '../../react-desc-prop-types.js';\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledIconContainer,\n  StyledEllipsisButton,\n  StyledGlobalMenuItemWrapper,\n  StyledVerticalSeparator,\n  StyledContentWrapper,\n} from '../styled.js';\nimport { useGetSubmenuHandlers } from './useGetSubmenuHandlers.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\n\nconst SubmenuItem: React.ComponentType<DSMenuItemT.SubmenuProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSMenuItemT.SubmenuProps>>(props, defaultSubmenuProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, itemProps, `${DSMenuItemName}Submenu`);\n\n  const {\n    dsId,\n    label,\n    secondaryLabel,\n    isActive,\n    disabled,\n    isSubmenuOpened,\n    rightAddon,\n    innerRef,\n    wrapperStyles,\n    optionsShouldHavePadding,\n    render: Render,\n    Dropdown,\n    dropdownProps: {\n      options,\n      openedSubmenus,\n      onSubmenuToggle,\n      selectedOptions,\n      onKeyDown,\n      onOptionClick,\n      onClickOutside,\n      minWidth,\n      maxHeight,\n    },\n  } = propsWithDefault;\n\n  // If we don't delay the opening of the poppers, the position will not be placed correctly\n  // That why we delay it for the next render using the useEffect hook\n  // TODO -- @carusox move this to utilities as a hook\n  const [delayedIsOpened, setDelayedIsOpened] = useState(false);\n\n  useEffect(() => {\n    setTimeout(() => setDelayedIsOpened(isSubmenuOpened));\n  }, [isSubmenuOpened]);\n\n  const { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick } = useGetSubmenuHandlers(propsWithDefault);\n\n  const gridLayout = useMemo(() => {\n    const cols = ['auto'];\n    if (secondaryLabel !== undefined) cols.push('min-content');\n    cols.push('min-content');\n    return cols;\n  }, [secondaryLabel]);\n\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      {...globalAttributes}\n      {...restXStyled}\n    >\n      <StyledGlobalMenuItemWrapper\n        pr={0}\n        isSelected={isSubmenuOpened}\n        isActive={isActive}\n        onMouseEnter={onMouseEnterHandler}\n        onMouseLeave={onMouseLeaveHandler}\n        ref={innerRef}\n        disabled={disabled}\n        pl={optionsShouldHavePadding ? 40 : 16}\n        as={'div' as keyof JSX.IntrinsicElements}\n        data-type=\"submenu\"\n      >\n        {Render !== undefined ? (\n          <Render {...propsWithDefault} />\n        ) : (\n          <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n            <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n            {secondaryLabel !== undefined && (\n              <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n            )}\n            <StyledIconContainer>\n              <StyledVerticalSeparator />\n              {rightAddon === 'ellipsis' ? (\n                <StyledEllipsisButton tabIndex={-1} onClick={onEllipsisClick} disabled={disabled}>\n                  <MoreOptionsVert\n                    className=\"ds-dropdown-menu-v2-more-options\"\n                    color={disabled ? ['neutral', '500'] : ['brand-primary', '600']}\n                    size=\"s\"\n                  />\n                </StyledEllipsisButton>\n              ) : (\n                <ChevronRight color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} size=\"s\" />\n              )}\n            </StyledIconContainer>\n          </StyledContentWrapper>\n        )}\n        <span id={`dropdownmenu-submenu-${dsId}`} style={{ display: 'none' }}>\n          submenu, to open this submenu press the Right Arrow key\n        </span>\n      </StyledGlobalMenuItemWrapper>\n    </Dropdown>\n  );\n};\n\nSubmenuItem.displayName = `${DSMenuItemName}Submenu`;\nconst SubmenuItemWithSchema = describe(SubmenuItem);\nSubmenuItemWithSchema.propTypes = itemProps;\n\nexport { SubmenuItem, SubmenuItemWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkHb,cAOE,YAPF;AAhHV,SAAgB,WAAW,SAAS,gBAAgB;AACpD,SAAS,iBAAiB,oBAAoB;AAC9C,SAAS,UAAU,8BAA8B,sCAAsC;AAEvF,SAAS,qBAAqB,iBAAiB;AAC/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,oCAAoC;AAE7C,MAAM,cAA6D,CAAC,UAAU;AAC5E,QAAM,mBAAmB,6BAAiE,OAAO,mBAAmB;AAEpH,iCAA+B,kBAAkB,WAAW,GAAG,uBAAuB;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,IAAI,SAAS,KAAK;AAE5D,YAAU,MAAM;AACd,eAAW,MAAM,mBAAmB,eAAe,CAAC;AAAA,EACtD,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,EAAE,qBAAqB,qBAAqB,gBAAgB,IAAI,sBAAsB,gBAAgB;AAE5G,QAAM,aAAa,QAAQ,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,IAAI,6BAA6B,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,MACH,GAAG;AAAA,MACH,GAAG;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,UAET;AAAA,uBAAW,SACV,oBAAC,UAAQ,GAAG,kBAAkB,IAE9B,qBAAC,wBAAqB,MAAM,YAAY,QAAO,OAAM,YAAW,UAC9D;AAAA,kCAAC,sBAAoB,iBAAM;AAAA,cAC1B,mBAAmB,UAClB,oBAAC,+BAA6B,0BAAe;AAAA,cAE/C,qBAAC,uBACC;AAAA,oCAAC,2BAAwB;AAAA,gBACxB,eAAe,aACd,oBAAC,wBAAqB,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,oBAAC,gBAAa,OAAO,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG,MAAK,KAAI;AAAA,iBAE5F;AAAA,eACF;AAAA,YAEF,oBAAC,UAAK,IAAI,wBAAwB,QAAQ,OAAO,EAAE,SAAS,OAAO,GAAG,qEAEtE;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,YAAY,cAAc,GAAG;AAC7B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;",
   "names": []
 }

package/dist/esm/components/SubmenuItem/useGetSubmenuHandlers.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SubmenuItem/useGetSubmenuHandlers.tsx"],
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SubmenuItem/useGetSubmenuHandlers.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { getEllipsisHandlers } from './getEllipsisHandlers.js';\nimport { getChevronHandlers } from './getChevronHandlers.js';\n\n// what we are trying to do:\n//   Ellipsis case:\n//     onMouseEnter -> open submenu\n//     onMouseLeave -> close submenu\n//     onEllipsisClick -> we should not even invoke this handler, as the \"ellipsis\" should not even exist?\n//   Chevron case:\n//     onMouseEnter -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//     onMouseLeave -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//     onEllipsisClick -> toggle the submenu open/close as per design\n\n// what are the \"challenges\" of the task:\n//  - we have chosen to abstract multiple possible logical \"flows\" into the same layer for some reason\n//      specifically speaking this is trying to solve the\n//         \"rightAddons\" is \"ellipsis\" case\n//            at the same time as the\n//         \"rightAddons\" is \"chevron\" case\n//    they have more differences than similarities, so this is messy\n\n// @yuri since I'm both lazy and stupid, I want my code to be as stupid simple as me\n//   I am removing one layer of abstraction,\n//       ellipsis gets it's own logical flow\n//       as does chevron\n//   if you are a DRY advocate, you will probably hate me for this, I'm all for AHA (Avoid Hasty Abstractions).\nexport const useGetSubmenuHandlers = (submenuProps: Required<DSMenuItemT.SubmenuProps>) => {\n  const { rightAddon } = submenuProps;\n  return useMemo(() => {\n    if (rightAddon === 'ellipsis') return getEllipsisHandlers(submenuProps);\n    return getChevronHandlers(submenuProps);\n  }, [submenuProps, rightAddon]);\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AAExB,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AAyB5B,MAAM,wBAAwB,CAAC,iBAAqD;AACzF,QAAM,EAAE,WAAW,IAAI;AACvB,SAAO,QAAQ,MAAM;AACnB,QAAI,eAAe;AAAY,aAAO,oBAAoB,YAAY;AACtE,WAAO,mBAAmB,YAAY;AAAA,EACxC,GAAG,CAAC,cAAc,UAAU,CAAC;AAC/B;",
   "names": []

package/dist/esm/components/index.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/index.tsx"],
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './ActionMenuItem/index.js';\nexport * from './MultiMenuItem/index.js';\nexport * from './Section/index.js';\nexport * from './Separator/index.js';\nexport * from './SingleMenuItem/index.js';\nexport * from './SingleWithSubmenuItem/index.js';\nexport * from './SubmenuItem/index.js';\nexport * from './SkeletonMenuItem/index.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/styled.tsx"],
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/styled.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { LayoutProps, SizingProps, PositionProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuItemName, DSMenuItemSlots } from '../exported-related/index.js';\n\nconst borderOutside = () => css`\n  :after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 1px solid ${({ theme }) => theme.colors.brand[500]};\n    pointer-events: none;\n    z-index: 7;\n  }\n`;\n\nconst disabledOption = () => css`\n  color: ${({ theme }) => theme.colors.neutral[500]};\n\n  cursor: not-allowed;\n  * {\n    cursor: not-allowed;\n  }\n`;\n\ninterface StyledGlobalMenuItemWrapperT extends LayoutProps, SizingProps, PositionProps, SpaceProps {\n  isSelected?: boolean;\n  isActive?: boolean;\n  disabled?: boolean;\n}\n\nexport const StyledGlobalMenuItemWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_WRAPPER,\n})<StyledGlobalMenuItemWrapperT>`\n  cursor: pointer;\n  min-height: 32px;\n\n  padding-left: 16px;\n  padding-right: 16px;\n  display: grid;\n  align-items: center;\n  list-style: none;\n  position: relative;\n\n  ${(props) => {\n    if (props.disabled) return disabledOption();\n    if (props.isActive) return borderOutside();\n    return '';\n  }};\n\n  background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : 'white')};\n\n  // focus style for standalone version\n  &:focus {\n    ${borderOutside()}\n    outline: none;\n    background-color: ${(props) => props.theme.colors.brand[200]};\n  }\n  &:hover {\n    background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};\n  }\n  ${xStyledCommonProps}\n`;\n\nexport const StyleMenuItemLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`\n  padding: 8px 0;\n  font-size: 13px;\n`;\n\nexport const StyleMenuItemSecondaryLabel = styled('span', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SECONDARY_LABEL,\n})`\n  padding: 8px 0;\n  font-size: 11px;\n  font-style: italic;\n  color: brand-800;\n`;\n\nexport const StyledIconContainer = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_ICON })`\n  width: 25px;\n  height: 24px;\n  display: grid;\n  grid-template-columns: min-content auto;\n  place-items: center;\n`;\n\nexport const StyledEllipsisButton = styled('div', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_ELLIPSIS_BUTTON,\n})<{ disabled: boolean }>`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: grid;\n  place-items: center;\n  background: transparent;\n  :active {\n    ${(props) => (props.disabled ? '' : borderOutside())}\n  }\n`;\n\nexport const StyledItemContent = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_CONTENT })`\n  display: flex;\n  width: 100%;\n  margin: 8px 0px;\n`;\n\nexport const StyledSeparator = styled('hr', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR })`\n  border: 0;\n  border-top: 1px solid #697489;\n  margin: 4px 0px;\n  padding: 0;\n`;\n\nexport const StyledSeparatorWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR_WRAPPER,\n})`\n  list-style: none;\n  padding: 0px 16px;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledGroupLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL })`\n  font-size: 13px;\n  color: neutral-500;\n`;\n\nexport const StyledSectionWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER,\n})`\n  list-style: none;\n  padding: 0px 16px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_VERTICAL_SEPARATOR,\n})`\n  width: 1px;\n  height: 18px;\n  background-color: neutral-300;\n`;\n\nexport const StyledContentWrapper = styled(Grid, {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_CONTENT_WRAPPER,\n})``;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD,SAAS,YAAY;AACrB,SAAS,gBAAgB,uBAAuB;AAEhD,MAAM,gBAAgB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASJ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAM7D,MAAM,iBAAiB,MAAM;AAAA,WAClB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc3C,MAAM,8BAA8B,OAAO,MAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWG,CAAC,UAAU;AACX,MAAI,MAAM;AAAU,WAAO,eAAe;AAC1C,MAAI,MAAM;AAAU,WAAO,cAAc;AACzC,SAAO;AACT;AAAA;AAAA,sBAEoB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,GAAG,IAAI;AAAA;AAAA;AAAA;AAAA,MAI7E,cAAc;AAAA;AAAA,wBAEI,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,wBAGvC,CAAC,UAAU,CAAC,MAAM,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,IAE9E;AAAA;AAGG,MAAM,qBAAqB,OAAO,QAAQ,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAKzG,MAAM,8BAA8B,OAAO,QAAQ;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQxG,MAAM,uBAAuB,OAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQK,CAAC,UAAW,MAAM,WAAW,KAAK,cAAc;AAAA;AAAA;AAI/C,MAAM,oBAAoB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMzG,MAAM,kBAAkB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxG,MAAM,yBAAyB,OAAO,MAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG;AAAA;AAGG,MAAM,mBAAmB,OAAO,QAAQ,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAK7G,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOG;AAAA;AAGG,MAAM,0BAA0B,OAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;",
   "names": []

package/dist/esm/components/useGetGlobalsAndXStyledProps.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/useGetGlobalsAndXStyledProps.tsx"],
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/useGetGlobalsAndXStyledProps.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../react-desc-prop-types.js';\n\nexport const useGetGlobalsAndXStyledProps = (\n  props: DSMenuItemT.AllTypeItems,\n  toMergeEvents?: Record<string, unknown>,\n) => {\n  const sourceGlobalProps = props.original ?? props;\n\n  const globalAttributes = useGetGlobalAttributes(sourceGlobalProps, toMergeEvents);\n  const xStyledProps = useGetXstyledProps(sourceGlobalProps);\n\n  return { globalAttributes, xStyledProps };\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,wBAAwB,0BAA0B;AAGpD,MAAM,+BAA+B,CAC1C,OACA,kBACG;AACH,QAAM,oBAAoB,MAAM,YAAY;AAE5C,QAAM,mBAAmB,uBAAuB,mBAAmB,aAAa;AAChF,QAAM,eAAe,mBAAmB,iBAAiB;AAEzD,SAAO,EAAE,kBAAkB,aAAa;AAC1C;",
   "names": []

package/dist/esm/exported-related/constants.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/constants.ts"],
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/constants.ts"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSMenuItemName = 'DSMenuItem';\n\nexport const DSMenuItemSlots = {\n  MENU_ITEM_WRAPPER: 'menu-item-wrapper',\n  MENU_ITEM_LABEL: 'menu-item-label',\n  MENU_ITEM_SECONDARY_LABEL: 'menu-item-secondary-label',\n  MENU_ITEM_ICON: 'menu-item-icon',\n  MENU_ITEM_ELLIPSIS_BUTTON: 'menu-item-ellipsis-button',\n  MENU_ITEM_CONTENT: 'menu-item-content',\n  MENU_ITEM_SEPARATOR: 'menu-item-separator',\n  MENU_ITEM_SEPARATOR_WRAPPER: 'menu-item-separator-wrapper',\n  MENU_ITEM_GROUP_LABEL: 'menu-item-group-label',\n  MENU_ITEM_SECTION_WRAPPER: 'menu-item-section-wrapper',\n  MENU_ITEM_VERTICAL_SEPARATOR: 'menu-item-vertical-separator',\n  MENU_ITEM_CONTENT_WRAPPER: 'menu-item-content-wrapper',\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,2BAA2B;AAAA,EAC3B,gBAAgB;AAAA,EAChB,2BAA2B;AAAA,EAC3B,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,2BAA2B;AAAA,EAC3B,8BAA8B;AAAA,EAC9B,2BAA2B;AAC7B;",
   "names": []

package/dist/esm/exported-related/index.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.ts"],
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.ts"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './constants.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
   "names": []

package/dist/esm/index.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\n\nexport * from './components/index.js';\nexport * from './exported-related/index.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACGvB,cAAc;AACd,cAAc;",
   "names": []

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

@@ -85,7 +85,7 @@ const MenuItemPropTypes = {
   dsId: PropTypes.string.description("The unique ID for the menu item.").isRequired,
   innerRef: PropTypes.oneOfType([
     PropTypes.shape({
-      current: PropTypes.instanceOf(HTMLLIElement)
+      current: PropTypes.node
     }),
     PropTypes.func.description(
       " A ref object or callback function to access the underlying DOM element (HTMLLIElement) of the menu item."

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { PropsWithChildren, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nexport namespace DSMenuItemT {\n  export interface CommonProps<T = Record<string, unknown>> {\n    dsId: string;\n    innerRef?: React.RefObject<HTMLLIElement> | ((_ref: HTMLLIElement) => void);\n    wrapperStyles?: Record<string, unknown>;\n    render?: React.ComponentType<T>;\n    original?: Record<string, unknown>;\n  }\n\n  export interface ActionProps extends CommonProps<ActionProps> {\n    label?: string;\n    secondaryLabel?: string;\n    value?: unknown;\n    disabled?: boolean;\n    isActive?: boolean;\n    onClick?: React.MouseEventHandler;\n    optionsShouldHavePadding?: boolean;\n    tabIndex: WCAGTabIndex;\n  }\n\n  export interface SkeletonProps extends CommonProps<ActionProps> {\n    secondaryLabel?: string;\n    isActive?: boolean;\n    onClick?: React.MouseEventHandler;\n    tabIndex: WCAGTabIndex;\n  }\n\n  export interface MultiProps extends CommonProps<MultiProps> {\n    label?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSelected?: boolean;\n    onClick?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    dataTestid?: string;\n    tabIndex?: WCAGTabIndex;\n  }\n\n  export interface SingleProps extends CommonProps<SingleProps> {\n    label?: string;\n    secondaryLabel?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSelected?: boolean;\n    onClick?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    dataTestid?: string;\n    tabIndex?: number;\n  }\n\n  export interface SubmenuProps extends CommonProps<SubmenuProps> {\n    label?: string;\n    secondaryLabel?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSubmenuOpened?: boolean;\n    onSubmenuOpen?: React.MouseEventHandler;\n    onSubmenuClose?: React.MouseEventHandler;\n    rightAddon?: 'ellipsis' | 'chevron';\n    optionsShouldHavePadding?: boolean;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    Dropdown: React.ComponentType<PropsWithChildren<SubmenuProps['dropdownProps']>>;\n    dropdownProps?: {\n      options: any[];\n      onSubmenuToggle?: (\n        nextOpenedSubmenus: Record<string, boolean>,\n        submenu: any,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      openedSubmenus?: Record<string, boolean>;\n      selectedOptions?: Record<string, boolean>;\n      onKeyDown?: React.KeyboardEventHandler;\n      onOptionClick?: (\n        nextSelectedOptions: Record<string, boolean>,\n        clickedOption: any,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      onClickOutside?: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n      minWidth?: SizingProps['minWidth'];\n      maxHeight?: SizingProps['maxHeight'];\n      [key: string]: unknown;\n    };\n  }\n\n  export interface SectionProps extends CommonProps<SectionProps> {\n    label?: string;\n  }\n\n  export type SeparatorProps = CommonProps<SeparatorProps>;\n\n  export interface SingleWithSubmenuProps extends Omit<SingleProps, 'render'>, Omit<SubmenuProps, 'render'> {\n    render?: React.ComponentType<SingleWithSubmenuProps>;\n  }\n  export type AllTypeItems = ActionProps | MultiProps | SingleProps | SubmenuProps | SectionProps | SeparatorProps;\n}\n\nconst noop = () => null;\n\nexport const defaultCommonProps: Partial<Omit<DSMenuItemT.CommonProps, 'render'>> = {\n  innerRef: noop,\n  wrapperStyles: {},\n};\n\nexport const defaultActionProps: Partial<DSMenuItemT.ActionProps> = {\n  ...defaultCommonProps,\n  label: '',\n  value: undefined,\n  disabled: false,\n  isActive: false,\n  onClick: noop,\n  optionsShouldHavePadding: false,\n  tabIndex: 0,\n};\n\nexport const defaultMultiProps: Partial<DSMenuItemT.MultiProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSelected: false,\n  onClick: noop,\n  onMouseDown: noop,\n  onMouseEnter: noop,\n  onMouseLeave: noop,\n  tabIndex: 0,\n};\n\nexport const defaultSingleProps: Partial<DSMenuItemT.SingleProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSelected: false,\n  onClick: noop,\n  onMouseDown: noop,\n  onMouseEnter: noop,\n  onMouseLeave: noop,\n  dataTestid: 'ds-menu-item',\n  tabIndex: 0,\n};\n\nexport const defaultSubmenuProps: Partial<DSMenuItemT.SubmenuProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSubmenuOpened: false,\n  onSubmenuOpen: noop,\n  rightAddon: 'chevron',\n  optionsShouldHavePadding: false,\n  Dropdown: noop,\n  dropdownProps: {\n    options: [],\n    onSubmenuToggle: noop,\n    openedSubmenus: {},\n    selectedOptions: {},\n    onKeyDown: noop,\n    onOptionClick: noop,\n    onClickOutside: noop,\n    minWidth: 'auto',\n    maxHeight: 'auto',\n  },\n};\n\nexport const defaultSectionProps: Partial<DSMenuItemT.SectionProps> = {\n  ...defaultCommonProps,\n  label: '',\n};\n\nexport const defaultSeparatorProps: Partial<DSMenuItemT.SeparatorProps> = {\n  ...defaultCommonProps,\n};\n\nexport const defaultSingleWithSubmenuProps: Partial<Omit<DSMenuItemT.SingleWithSubmenuProps, 'render'>> = {\n  ...defaultSingleProps,\n  ...defaultSubmenuProps,\n};\n\nexport const itemProps = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  dsId: PropTypes.string,\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n  wrapperStyles: PropTypes.object,\n  render: PropTypes.func,\n} as WeakValidationMap<unknown>;\n\nexport const MenuItemPropTypes = {\n  dsId: PropTypes.string.description('The unique ID for the menu item.').isRequired,\n  innerRef: PropTypes.oneOfType([\n    PropTypes.shape({\n      current: PropTypes.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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",
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { PropsWithChildren, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nexport namespace DSMenuItemT {\n  export interface CommonProps<T = Record<string, unknown>> {\n    dsId: string;\n    innerRef?: React.RefObject<HTMLLIElement> | ((_ref: HTMLLIElement) => void);\n    wrapperStyles?: Record<string, unknown>;\n    render?: React.ComponentType<T>;\n    original?: Record<string, unknown>;\n  }\n\n  export interface ActionProps extends CommonProps<ActionProps> {\n    label?: string;\n    secondaryLabel?: string;\n    value?: unknown;\n    disabled?: boolean;\n    isActive?: boolean;\n    onClick?: React.MouseEventHandler;\n    optionsShouldHavePadding?: boolean;\n    tabIndex: WCAGTabIndex;\n  }\n\n  export interface SkeletonProps extends CommonProps<ActionProps> {\n    secondaryLabel?: string;\n    isActive?: boolean;\n    onClick?: React.MouseEventHandler;\n    tabIndex?: WCAGTabIndex;\n  }\n\n  export interface MultiProps extends CommonProps<MultiProps> {\n    label?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSelected?: boolean;\n    onClick?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    dataTestid?: string;\n    tabIndex?: WCAGTabIndex;\n  }\n\n  export interface SingleProps extends CommonProps<SingleProps> {\n    label?: string;\n    secondaryLabel?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSelected?: boolean;\n    onClick?: React.MouseEventHandler;\n    onMouseDown?: React.MouseEventHandler;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    dataTestid?: string;\n    tabIndex?: number;\n  }\n\n  export interface SubmenuProps extends CommonProps<SubmenuProps> {\n    label?: string;\n    secondaryLabel?: string;\n    isActive?: boolean;\n    disabled?: boolean;\n    isSubmenuOpened?: boolean;\n    onSubmenuOpen?: React.MouseEventHandler;\n    onSubmenuClose?: React.MouseEventHandler;\n    rightAddon?: 'ellipsis' | 'chevron';\n    optionsShouldHavePadding?: boolean;\n    onMouseEnter?: React.MouseEventHandler;\n    onMouseLeave?: React.MouseEventHandler;\n    Dropdown: React.ComponentType<PropsWithChildren<SubmenuProps['dropdownProps']>>;\n    dropdownProps?: {\n      options: any[];\n      onSubmenuToggle?: (\n        nextOpenedSubmenus: Record<string, boolean>,\n        submenu: any,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      openedSubmenus?: Record<string, boolean>;\n      selectedOptions?: Record<string, boolean>;\n      onKeyDown?: React.KeyboardEventHandler;\n      onOptionClick?: (\n        nextSelectedOptions: Record<string, boolean>,\n        clickedOption: any,\n        e: React.MouseEvent | React.KeyboardEvent,\n      ) => void;\n      onClickOutside?: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n      minWidth?: SizingProps['minWidth'];\n      maxHeight?: SizingProps['maxHeight'];\n      [key: string]: unknown;\n    };\n  }\n\n  export interface SectionProps extends CommonProps<SectionProps> {\n    label?: string;\n  }\n\n  export type SeparatorProps = CommonProps<SeparatorProps>;\n\n  export interface SingleWithSubmenuProps extends Omit<SingleProps, 'render'>, Omit<SubmenuProps, 'render'> {\n    render?: React.ComponentType<SingleWithSubmenuProps>;\n  }\n  export type AllTypeItems = ActionProps | MultiProps | SingleProps | SubmenuProps | SectionProps | SeparatorProps;\n}\n\nconst noop = () => null;\n\nexport const defaultCommonProps: Partial<Omit<DSMenuItemT.CommonProps, 'render'>> = {\n  innerRef: noop,\n  wrapperStyles: {},\n};\n\nexport const defaultActionProps: Partial<DSMenuItemT.ActionProps> = {\n  ...defaultCommonProps,\n  label: '',\n  value: undefined,\n  disabled: false,\n  isActive: false,\n  onClick: noop,\n  optionsShouldHavePadding: false,\n  tabIndex: 0,\n};\n\nexport const defaultMultiProps: Partial<DSMenuItemT.MultiProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSelected: false,\n  onClick: noop,\n  onMouseDown: noop,\n  onMouseEnter: noop,\n  onMouseLeave: noop,\n  tabIndex: 0,\n};\n\nexport const defaultSingleProps: Partial<DSMenuItemT.SingleProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSelected: false,\n  onClick: noop,\n  onMouseDown: noop,\n  onMouseEnter: noop,\n  onMouseLeave: noop,\n  dataTestid: 'ds-menu-item',\n  tabIndex: 0,\n};\n\nexport const defaultSubmenuProps: Partial<DSMenuItemT.SubmenuProps> = {\n  ...defaultCommonProps,\n  label: '',\n  isActive: false,\n  disabled: false,\n  isSubmenuOpened: false,\n  onSubmenuOpen: noop,\n  rightAddon: 'chevron',\n  optionsShouldHavePadding: false,\n  Dropdown: noop,\n  dropdownProps: {\n    options: [],\n    onSubmenuToggle: noop,\n    openedSubmenus: {},\n    selectedOptions: {},\n    onKeyDown: noop,\n    onOptionClick: noop,\n    onClickOutside: noop,\n    minWidth: 'auto',\n    maxHeight: 'auto',\n  },\n};\n\nexport const defaultSectionProps: Partial<DSMenuItemT.SectionProps> = {\n  ...defaultCommonProps,\n  label: '',\n};\n\nexport const defaultSeparatorProps: Partial<DSMenuItemT.SeparatorProps> = {\n  ...defaultCommonProps,\n};\n\nexport const defaultSingleWithSubmenuProps: Partial<Omit<DSMenuItemT.SingleWithSubmenuProps, 'render'>> = {\n  ...defaultSingleProps,\n  ...defaultSubmenuProps,\n};\n\nexport const itemProps = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  dsId: PropTypes.string,\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n  wrapperStyles: PropTypes.object,\n  render: PropTypes.func,\n} as WeakValidationMap<unknown>;\n\nexport const MenuItemPropTypes = {\n  dsId: PropTypes.string.description('The unique ID for the menu item.').isRequired,\n  innerRef: PropTypes.oneOfType([\n    PropTypes.shape({\n      current: PropTypes.node,\n    }),\n    PropTypes.func.description(\n      ' A ref object or callback function to access the underlying DOM element (HTMLLIElement) of the menu item.',\n    ),\n  ]),\n  render: PropTypes.func.description('A custom render function to render the content of the menu item.'),\n} as WeakValidationMap<unknown>;\n\nexport const SingleMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n  secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.'),\n  disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n  isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const MultiMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n  secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.'),\n  disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n  isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const ActionMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n  value: PropTypes.any.description('The value of the menu item.'),\n  disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n  isActive: PropTypes.bool.description('Whether the menu item is active.'),\n} as WeakValidationMap<unknown>;\n\nexport const SectionMenuItemPropTypes = {\n  ...MenuItemPropTypes,\n  label: PropTypes.string.description('The label of the menu item.'),\n} as WeakValidationMap<unknown>;\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -23,7 +23,7 @@ export declare namespace DSMenuItemT {
         secondaryLabel?: string;
         isActive?: boolean;
         onClick?: React.MouseEventHandler;
-        tabIndex: WCAGTabIndex;
+        tabIndex?: WCAGTabIndex;
     }
     interface MultiProps extends CommonProps<MultiProps> {
         label?: string;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-menu-items",
-  "version": "3.22.0-next.8",
+  "version": "3.22.0-rc.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Menu Items",
   "files": [
@@ -37,16 +37,21 @@
   "dependencies": {
     "@xstyled/system": "~3.7.3",
     "@xstyled/util": "3.7.0",
-    "@elliemae/ds-form-checkbox": "3.22.0-next.8",
-    "@elliemae/ds-skeleton": "3.22.0-next.8",
-    "@elliemae/ds-grid": "3.22.0-next.8",
-    "@elliemae/ds-system": "3.22.0-next.8",
-    "@elliemae/ds-props-helpers": "3.22.0-next.8",
-    "@elliemae/ds-icons": "3.22.0-next.8"
+    "@elliemae/ds-grid": "3.22.0-rc.1",
+    "@elliemae/ds-props-helpers": "3.22.0-rc.1",
+    "@elliemae/ds-icons": "3.22.0-rc.1",
+    "@elliemae/ds-skeleton": "3.22.0-rc.1",
+    "@elliemae/ds-system": "3.22.0-rc.1",
+    "@elliemae/ds-form-checkbox": "3.22.0-rc.1"
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "~9.0.0-next.17",
-    "@elliemae/ds-monorepo-devops": "3.22.0-next.8"
+    "@elliemae/pui-cli": "~9.0.0-next.22",
+    "@testing-library/jest-dom": "~5.16.5",
+    "@testing-library/react": "~12.1.3",
+    "@testing-library/user-event": "~13.5.0",
+    "jest-axe": "^7.0.1",
+    "styled-components": "~5.3.9",
+    "@elliemae/ds-monorepo-devops": "3.22.0-rc.1"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
@@ -59,14 +64,14 @@
     "typeSafety": false
   },
   "scripts": {
-    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
     "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",
+    "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",
     "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/*\""
+    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
   }
 }