@elliemae/ds-menu-items 3.12.0-rc.2 → 3.12.0-rc.3

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

@@ -34,9 +34,10 @@ var import_react = require("react");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_react_desc_prop_types = require("../../react-desc-prop-types");
 var import_styled = require("../styled");
+var import_exported_related = require("../../exported-related");
 const ActionMenuItem = (props) => {
   const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultActionProps);
-  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.itemProps);
+  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.itemProps, `${import_exported_related.DSMenuItemName}Action`);
   const {
     dsId,
     label,
@@ -55,38 +56,27 @@ const ActionMenuItem = (props) => {
       cols.push("min-content");
     return cols;
   }, [secondaryLabel]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledGlobalMenuItemWrapper, {
-    id: dsId,
-    role: "option",
-    isActive,
-    disabled,
-    onClick: !disabled ? onClick : void 0,
-    ref: innerRef,
-    pl: optionsShouldHavePadding ? 40 : 16,
-    style: wrapperStyles,
-    "data-type": "action",
-    children: Render !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, {
-      ...propsWithDefault
-    }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledContentWrapper, {
-      cols: gridLayout,
-      minHeight: "16px",
-      gutter: "xxs",
-      alignItems: "center",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemLabel, {
-            children: label
-          }),
-          secondaryLabel !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemSecondaryLabel, {
-            children: secondaryLabel
-          })
-        ]
-      })
-    })
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styled.StyledGlobalMenuItemWrapper,
+    {
+      id: dsId,
+      role: "option",
+      isActive,
+      disabled,
+      onClick: !disabled ? onClick : void 0,
+      ref: innerRef,
+      pl: optionsShouldHavePadding ? 40 : 16,
+      style: wrapperStyles,
+      "data-type": "action",
+      children: Render !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, { ...propsWithDefault }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledContentWrapper, { cols: gridLayout, minHeight: "16px", gutter: "xxs", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemLabel, { children: label }),
+        secondaryLabel !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemSecondaryLabel, { children: secondaryLabel })
+      ] }) })
+    }
+  );
 };
 ActionMenuItem.propTypes = import_react_desc_prop_types.itemProps;
-ActionMenuItem.displayName = "ActionMenuItem";
+ActionMenuItem.displayName = `${import_exported_related.DSMenuItemName}Action`;
 const ActionMenuItemWithSchema = (0, import_ds_utilities.describe)(ActionMenuItem);
 ActionMenuItemWithSchema.propTypes = import_react_desc_prop_types.itemProps;
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/ActionMenuItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSMenuItemT } from '../../react-desc-prop-types';\nimport { defaultActionProps, itemProps } from '../../react-desc-prop-types';\nimport {\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n} from '../styled';\n\nconst ActionMenuItem: React.ComponentType<DSMenuItemT.ActionProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultActionProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, itemProps);\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 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    >\n      {Render !== undefined ? (\n        <Render {...propsWithDefault} />\n      ) : (\n        <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n          <>\n            <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n            {secondaryLabel !== undefined && (\n              <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n            )}\n          </>\n        </StyledContentWrapper>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nActionMenuItem.propTypes = itemProps;\nActionMenuItem.displayName = 'ActionMenuItem';\nconst ActionMenuItemWithSchema = describe(ActionMenuItem);\nActionMenuItemWithSchema.propTypes = itemProps;\n\nexport { ActionMenuItem, ActionMenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDf;AAhDR,mBAA+B;AAC/B,0BAAuF;AAEvF,mCAA8C;AAC9C,oBAKO;AAEP,MAAM,iBAA+D,CAAC,UAAU;AAC9E,QAAM,uBAAmB,kDAA6B,OAAO,+CAAkB;AAE/E,0DAA+B,kBAAkB,sCAAS;AAE1D,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,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,4CAAC;AAAA,IACC,IAAI;AAAA,IACJ,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,SAAS,CAAC,WAAW,UAAU;AAAA,IAC/B,KAAK;AAAA,IACL,IAAI,2BAA2B,KAAK;AAAA,IACpC,OAAO;AAAA,IACP,aAAU;AAAA,IAET,qBAAW,SACV,4CAAC;AAAA,MAAQ,GAAG;AAAA,KAAkB,IAE9B,4CAAC;AAAA,MAAqB,MAAM;AAAA,MAAY,WAAU;AAAA,MAAO,QAAO;AAAA,MAAM,YAAW;AAAA,MAC/E;AAAA,QACE;AAAA,sDAAC;AAAA,YAAoB;AAAA,WAAM;AAAA,UAC1B,mBAAmB,UAClB,4CAAC;AAAA,YAA6B;AAAA,WAAe;AAAA;AAAA,OAEjD;AAAA,KACF;AAAA,GAEJ;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,+BAA2B,8BAAS,cAAc;AACxD,yBAAyB,YAAY;",
+  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSMenuItemT } from '../../react-desc-prop-types';\nimport { defaultActionProps, itemProps } from '../../react-desc-prop-types';\nimport {\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n} from '../styled';\nimport { DSMenuItemName } from '../../exported-related';\n\nconst ActionMenuItem: React.ComponentType<DSMenuItemT.ActionProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultActionProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, itemProps, `${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 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    >\n      {Render !== undefined ? (\n        <Render {...propsWithDefault} />\n      ) : (\n        <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n          <>\n            <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n            {secondaryLabel !== undefined && (\n              <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n            )}\n          </>\n        </StyledContentWrapper>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nActionMenuItem.propTypes = itemProps;\nActionMenuItem.displayName = `${DSMenuItemName}Action`;\nconst ActionMenuItemWithSchema = describe(ActionMenuItem);\nActionMenuItemWithSchema.propTypes = itemProps;\n\nexport { ActionMenuItem, ActionMenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiDf;AAjDR,mBAA+B;AAC/B,0BAAuF;AAEvF,mCAA8C;AAC9C,oBAKO;AACP,8BAA+B;AAE/B,MAAM,iBAA+D,CAAC,UAAU;AAC9E,QAAM,uBAAmB,kDAA6B,OAAO,+CAAkB;AAE/E,0DAA+B,kBAAkB,wCAAW,GAAG,8CAAsB;AAErF,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,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,MAET,qBAAW,SACV,4CAAC,UAAQ,GAAG,kBAAkB,IAE9B,4CAAC,sCAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E,sFACE;AAAA,oDAAC,oCAAoB,iBAAM;AAAA,QAC1B,mBAAmB,UAClB,4CAAC,6CAA6B,0BAAe;AAAA,SAEjD,GACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc,GAAG;AAChC,MAAM,+BAA2B,8BAAS,cAAc;AACxD,yBAAyB,YAAY;",
   "names": []
 }

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

@@ -34,10 +34,11 @@ var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_form_checkbox = require("@elliemae/ds-form-checkbox");
 var import_react_desc_prop_types = require("../../react-desc-prop-types");
 var import_styled = require("../styled");
+var import_exported_related = require("../../exported-related");
 const noop = () => null;
 const MultiMenuItem = (props) => {
   const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultMultiProps);
-  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.itemProps);
+  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.itemProps, `${import_exported_related.DSMenuItemName}Multi`);
   const {
     dsId,
     label,
@@ -54,41 +55,43 @@ const MultiMenuItem = (props) => {
     tabIndex,
     render: Render
   } = propsWithDefault;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledGlobalMenuItemWrapper, {
-    id: dsId,
-    disabled,
-    isActive,
-    isSelected,
-    ref: innerRef,
-    onMouseDown,
-    onMouseEnter,
-    onMouseLeave,
-    role: "option",
-    className: isActive ? "ds-list-item-active" : "",
-    "aria-selected": isSelected,
-    style: wrapperStyles,
-    onClick,
-    "data-testid": dataTestid,
-    "data-type": "multi",
-    children: Render !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, {
-      ...props
-    }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledItemContent, {
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form_checkbox.DSControlledCheckbox, {
-        disabled,
-        checked: isSelected,
-        onMouseDown,
-        name: label,
-        label,
-        onChange: noop,
-        tabIndex,
-        wrapLabel: true,
-        device: "desktop"
-      })
-    })
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styled.StyledGlobalMenuItemWrapper,
+    {
+      id: dsId,
+      disabled,
+      isActive,
+      isSelected,
+      ref: innerRef,
+      onMouseDown,
+      onMouseEnter,
+      onMouseLeave,
+      role: "option",
+      className: isActive ? "ds-list-item-active" : "",
+      "aria-selected": isSelected,
+      style: wrapperStyles,
+      onClick,
+      "data-testid": dataTestid,
+      "data-type": "multi",
+      children: Render !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledItemContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ds_form_checkbox.DSControlledCheckbox,
+        {
+          disabled,
+          checked: isSelected,
+          onMouseDown,
+          name: label,
+          label,
+          onChange: noop,
+          tabIndex,
+          wrapLabel: true,
+          device: "desktop"
+        }
+      ) })
+    }
+  );
 };
 MultiMenuItem.propTypes = import_react_desc_prop_types.itemProps;
-MultiMenuItem.displayName = "MultiMenuItem";
+MultiMenuItem.displayName = `${import_exported_related.DSMenuItemName}Multi`;
 const MultiMenuItemWithSchema = (0, import_ds_utilities.describe)(MultiMenuItem);
 MultiMenuItemWithSchema.propTypes = import_react_desc_prop_types.itemProps;
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/MultiMenuItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport type { DSMenuItemT } from '../../react-desc-prop-types';\nimport { defaultMultiProps, itemProps } from '../../react-desc-prop-types';\nimport { StyledGlobalMenuItemWrapper, StyledItemContent } from '../styled';\nimport { width } from 'styled-system';\n\nconst noop = () => null;\n\nconst MultiMenuItem: React.ComponentType<DSMenuItemT.MultiProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultMultiProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, itemProps);\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  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    >\n      {Render !== undefined ? (\n        <Render {...props} />\n      ) : (\n        <StyledItemContent>\n          <DSControlledCheckbox\n            disabled={disabled}\n            checked={isSelected}\n            onMouseDown={onMouseDown}\n            name={label}\n            label={label}\n            onChange={noop}\n            tabIndex={tabIndex}\n            wrapLabel\n            device=\"desktop\"\n          />\n        </StyledItemContent>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nMultiMenuItem.propTypes = itemProps;\nMultiMenuItem.displayName = 'MultiMenuItem';\nconst MultiMenuItemWithSchema = describe(MultiMenuItem);\nMultiMenuItemWithSchema.propTypes = itemProps;\n\nexport { MultiMenuItem, MultiMenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmDf;AAlDR,0BAAuF;AACvF,8BAAqC;AAErC,mCAA6C;AAC7C,oBAA+D;AAG/D,MAAM,OAAO,MAAM;AAEnB,MAAM,gBAA6D,CAAC,UAAU;AAC5E,QAAM,uBAAmB,kDAA6B,OAAO,8CAAiB;AAE9E,0DAA+B,kBAAkB,sCAAS;AAE1D,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;AAEJ,SACE,4CAAC;AAAA,IACC,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAK;AAAA,IACL,WAAW,WAAW,wBAAwB;AAAA,IAC9C,iBAAe;AAAA,IACf,OAAO;AAAA,IACP;AAAA,IACA,eAAa;AAAA,IACb,aAAU;AAAA,IAET,qBAAW,SACV,4CAAC;AAAA,MAAQ,GAAG;AAAA,KAAO,IAEnB,4CAAC;AAAA,MACC,sDAAC;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,MAAM;AAAA,QACN;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA,WAAS;AAAA,QACT,QAAO;AAAA,OACT;AAAA,KACF;AAAA,GAEJ;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,8BAA0B,8BAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport type { DSMenuItemT } from '../../react-desc-prop-types';\nimport { defaultMultiProps, itemProps } from '../../react-desc-prop-types';\nimport { StyledGlobalMenuItemWrapper, StyledItemContent } from '../styled';\nimport { DSMenuItemName } from '../../exported-related';\n\nconst noop = () => null;\n\nconst MultiMenuItem: React.ComponentType<DSMenuItemT.MultiProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultMultiProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, itemProps, `${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  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    >\n      {Render !== undefined ? (\n        <Render {...props} />\n      ) : (\n        <StyledItemContent>\n          <DSControlledCheckbox\n            disabled={disabled}\n            checked={isSelected}\n            onMouseDown={onMouseDown}\n            name={label}\n            label={label}\n            onChange={noop}\n            tabIndex={tabIndex}\n            wrapLabel\n            device=\"desktop\"\n          />\n        </StyledItemContent>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nMultiMenuItem.propTypes = itemProps;\nMultiMenuItem.displayName = `${DSMenuItemName}Multi`;\nconst MultiMenuItemWithSchema = describe(MultiMenuItem);\nMultiMenuItemWithSchema.propTypes = itemProps;\n\nexport { MultiMenuItem, MultiMenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmDf;AAlDR,0BAAuF;AACvF,8BAAqC;AAErC,mCAA6C;AAC7C,oBAA+D;AAC/D,8BAA+B;AAE/B,MAAM,OAAO,MAAM;AAEnB,MAAM,gBAA6D,CAAC,UAAU;AAC5E,QAAM,uBAAmB,kDAA6B,OAAO,8CAAiB;AAE9E,0DAA+B,kBAAkB,wCAAW,GAAG,6CAAqB;AAEpF,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;AAEJ,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,MAET,qBAAW,SACV,4CAAC,UAAQ,GAAG,OAAO,IAEnB,4CAAC,mCACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA,MAAM;AAAA,UACN;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA,WAAS;AAAA,UACT,QAAO;AAAA;AAAA,MACT,GACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc,GAAG;AAC/B,MAAM,8BAA0B,8BAAS,aAAa;AACtD,wBAAwB,YAAY;",
   "names": []
 }

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

@@ -33,23 +33,15 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_react_desc_prop_types = require("../../react-desc-prop-types");
 var import_styled = require("../styled");
+var import_exported_related = require("../../exported-related");
 const Section = (props) => {
   const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultSectionProps);
-  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.itemProps);
+  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.itemProps, `${import_exported_related.DSMenuItemName}Section`);
   const { label, wrapperStyles, innerRef, render: Render } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSectionWrapper, {
-    style: wrapperStyles,
-    ref: innerRef,
-    role: "presentation",
-    children: Render !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, {
-      ...props
-    }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledGroupLabel, {
-      children: label
-    })
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSectionWrapper, { style: wrapperStyles, ref: innerRef, role: "presentation", children: Render !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledGroupLabel, { children: label }) });
 };
 Section.propTypes = import_react_desc_prop_types.itemProps;
-Section.displayName = "Section";
+Section.displayName = `${import_exported_related.DSMenuItemName}Section`;
 const SectionWithSchema = (0, import_ds_utilities.describe)(Section);
 SectionWithSchema.propTypes = import_react_desc_prop_types.itemProps;
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/Section/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSMenuItemT } from '../../react-desc-prop-types';\nimport { defaultSectionProps, itemProps } from '../../react-desc-prop-types';\nimport { StyledSectionWrapper, StyledGroupLabel } from '../styled';\n\nconst Section: React.ComponentType<DSMenuItemT.SectionProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSectionProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, itemProps);\n\n  const { label, wrapperStyles, innerRef, render: Render } = props;\n\n  return (\n    <StyledSectionWrapper style={wrapperStyles} ref={innerRef} role=\"presentation\">\n      {Render !== undefined ? <Render {...props} /> : <StyledGroupLabel>{label}</StyledGroupLabel>}\n    </StyledSectionWrapper>\n  );\n};\n\nSection.propTypes = itemProps;\nSection.displayName = 'Section';\nconst SectionWithSchema = describe(Section);\nSectionWithSchema.propTypes = itemProps;\n\nexport { Section, SectionWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBO;AAd9B,0BAAuF;AAEvF,mCAA+C;AAC/C,oBAAuD;AAEvD,MAAM,UAAyD,CAAC,UAAU;AACxE,QAAM,uBAAmB,kDAA6B,OAAO,gDAAmB;AAEhF,0DAA+B,kBAAkB,sCAAS;AAE1D,QAAM,EAAE,OAAO,eAAe,UAAU,QAAQ,OAAO,IAAI;AAE3D,SACE,4CAAC;AAAA,IAAqB,OAAO;AAAA,IAAe,KAAK;AAAA,IAAU,MAAK;AAAA,IAC7D,qBAAW,SAAY,4CAAC;AAAA,MAAQ,GAAG;AAAA,KAAO,IAAK,4CAAC;AAAA,MAAkB;AAAA,KAAM;AAAA,GAC3E;AAEJ;AAEA,QAAQ,YAAY;AACpB,QAAQ,cAAc;AACtB,MAAM,wBAAoB,8BAAS,OAAO;AAC1C,kBAAkB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSMenuItemT } from '../../react-desc-prop-types';\nimport { defaultSectionProps, itemProps } from '../../react-desc-prop-types';\nimport { StyledSectionWrapper, StyledGroupLabel } from '../styled';\nimport { DSMenuItemName } from '../../exported-related';\n\nconst Section: React.ComponentType<DSMenuItemT.SectionProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSectionProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, itemProps, `${DSMenuItemName}Section`);\n\n  const { label, wrapperStyles, innerRef, render: Render } = props;\n\n  return (\n    <StyledSectionWrapper style={wrapperStyles} ref={innerRef} role=\"presentation\">\n      {Render !== undefined ? <Render {...props} /> : <StyledGroupLabel>{label}</StyledGroupLabel>}\n    </StyledSectionWrapper>\n  );\n};\n\nSection.propTypes = itemProps;\nSection.displayName = `${DSMenuItemName}Section`;\nconst SectionWithSchema = describe(Section);\nSectionWithSchema.propTypes = itemProps;\n\nexport { Section, SectionWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBO;AAf9B,0BAAuF;AAEvF,mCAA+C;AAC/C,oBAAuD;AACvD,8BAA+B;AAE/B,MAAM,UAAyD,CAAC,UAAU;AACxE,QAAM,uBAAmB,kDAA6B,OAAO,gDAAmB;AAEhF,0DAA+B,kBAAkB,wCAAW,GAAG,+CAAuB;AAEtF,QAAM,EAAE,OAAO,eAAe,UAAU,QAAQ,OAAO,IAAI;AAE3D,SACE,4CAAC,sCAAqB,OAAO,eAAe,KAAK,UAAU,MAAK,gBAC7D,qBAAW,SAAY,4CAAC,UAAQ,GAAG,OAAO,IAAK,4CAAC,kCAAkB,iBAAM,GAC3E;AAEJ;AAEA,QAAQ,YAAY;AACpB,QAAQ,cAAc,GAAG;AACzB,MAAM,wBAAoB,8BAAS,OAAO;AAC1C,kBAAkB,YAAY;",
   "names": []
 }

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

@@ -33,21 +33,15 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_react_desc_prop_types = require("../../react-desc-prop-types");
 var import_styled = require("../styled");
+var import_exported_related = require("../../exported-related");
 const Separator = (props) => {
   const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultSeparatorProps);
-  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.itemProps);
+  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.itemProps, `${import_exported_related.DSMenuItemName}Separator`);
   const { wrapperStyles, innerRef, render: Render } = propsWithDefault;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSeparatorWrapper, {
-    style: wrapperStyles,
-    ref: innerRef,
-    role: "separator",
-    children: Render ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, {
-      ...props
-    }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSeparator, {})
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSeparatorWrapper, { style: wrapperStyles, ref: innerRef, role: "separator", children: Render ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSeparator, {}) });
 };
 Separator.propTypes = import_react_desc_prop_types.itemProps;
-Separator.displayName = "Separator";
+Separator.displayName = `${import_exported_related.DSMenuItemName}Separator`;
 const SeparatorWithSchema = (0, import_ds_utilities.describe)(Separator);
 SeparatorWithSchema.propTypes = import_react_desc_prop_types.itemProps;
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/Separator/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSMenuItemT } from '../../react-desc-prop-types';\nimport { itemProps, defaultSeparatorProps } from '../../react-desc-prop-types';\nimport { StyledSeparatorWrapper, StyledSeparator } from '../styled';\n\nconst Separator: React.ComponentType<DSMenuItemT.SeparatorProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSeparatorProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, itemProps);\n  const { wrapperStyles, innerRef, render: Render } = propsWithDefault;\n  return (\n    <StyledSeparatorWrapper style={wrapperStyles} ref={innerRef} role=\"separator\">\n      {Render ? <Render {...props} /> : <StyledSeparator />}\n    </StyledSeparatorWrapper>\n  );\n};\n\nSeparator.propTypes = itemProps;\nSeparator.displayName = 'Separator';\nconst SeparatorWithSchema = describe(Separator);\nSeparatorWithSchema.propTypes = itemProps;\n\nexport { Separator, SeparatorWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADaP;AAZhB,0BAAuF;AAEvF,mCAAiD;AACjD,oBAAwD;AAExD,MAAM,YAA6D,CAAC,UAAU;AAC5E,QAAM,uBAAmB,kDAA6B,OAAO,kDAAqB;AAElF,0DAA+B,kBAAkB,sCAAS;AAC1D,QAAM,EAAE,eAAe,UAAU,QAAQ,OAAO,IAAI;AACpD,SACE,4CAAC;AAAA,IAAuB,OAAO;AAAA,IAAe,KAAK;AAAA,IAAU,MAAK;AAAA,IAC/D,mBAAS,4CAAC;AAAA,MAAQ,GAAG;AAAA,KAAO,IAAK,4CAAC,iCAAgB;AAAA,GACrD;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,0BAAsB,8BAAS,SAAS;AAC9C,oBAAoB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSMenuItemT } from '../../react-desc-prop-types';\nimport { itemProps, defaultSeparatorProps } from '../../react-desc-prop-types';\nimport { StyledSeparatorWrapper, StyledSeparator } from '../styled';\nimport { DSMenuItemName } from '../../exported-related';\n\nconst Separator: React.ComponentType<DSMenuItemT.SeparatorProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSeparatorProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, itemProps, `${DSMenuItemName}Separator`);\n  const { wrapperStyles, innerRef, render: Render } = propsWithDefault;\n  return (\n    <StyledSeparatorWrapper style={wrapperStyles} ref={innerRef} role=\"separator\">\n      {Render ? <Render {...props} /> : <StyledSeparator />}\n    </StyledSeparatorWrapper>\n  );\n};\n\nSeparator.propTypes = itemProps;\nSeparator.displayName = `${DSMenuItemName}Separator`;\nconst SeparatorWithSchema = describe(Separator);\nSeparatorWithSchema.propTypes = itemProps;\n\nexport { Separator, SeparatorWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcP;AAbhB,0BAAuF;AAEvF,mCAAiD;AACjD,oBAAwD;AACxD,8BAA+B;AAE/B,MAAM,YAA6D,CAAC,UAAU;AAC5E,QAAM,uBAAmB,kDAA6B,OAAO,kDAAqB;AAElF,0DAA+B,kBAAkB,wCAAW,GAAG,iDAAyB;AACxF,QAAM,EAAE,eAAe,UAAU,QAAQ,OAAO,IAAI;AACpD,SACE,4CAAC,wCAAuB,OAAO,eAAe,KAAK,UAAU,MAAK,aAC/D,mBAAS,4CAAC,UAAQ,GAAG,OAAO,IAAK,4CAAC,iCAAgB,GACrD;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc,GAAG;AAC3B,MAAM,0BAAsB,8BAAS,SAAS;AAC9C,oBAAoB,YAAY;",
   "names": []
 }

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

@@ -34,9 +34,10 @@ var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_react_desc_prop_types = require("../../react-desc-prop-types");
 var import_styled = require("../styled");
+var import_exported_related = require("../../exported-related");
 const SingleMenuItem = (props) => {
   const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultSingleProps);
-  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.itemProps);
+  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.itemProps, `${import_exported_related.DSMenuItemName}Single`);
   const {
     dsId,
     label,
@@ -59,48 +60,34 @@ const SingleMenuItem = (props) => {
       cols.push("min-content");
     return cols;
   }, [secondaryLabel]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledGlobalMenuItemWrapper, {
-    "aria-selected": isSelected,
-    id: dsId,
-    role: "option",
-    isActive,
-    isSelected,
-    onClick,
-    ref: innerRef,
-    onMouseDown,
-    onMouseEnter,
-    onMouseLeave,
-    className: isActive ? "ds-list-item-active" : "",
-    style: wrapperStyles,
-    "data-testid": dataTestid,
-    disabled,
-    "data-type": "single",
-    children: Render !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, {
-      ...props
-    }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledContentWrapper, {
-      cols: gridLayout,
-      minHeight: "16px",
-      gutter: "xxs",
-      alignItems: "center",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-          children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Checkmark, {
-            size: "s",
-            color: ["brand-primary", "600"]
-          })
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemLabel, {
-          children: label
-        }),
-        secondaryLabel !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemSecondaryLabel, {
-          children: secondaryLabel
-        })
-      ]
-    })
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styled.StyledGlobalMenuItemWrapper,
+    {
+      "aria-selected": isSelected,
+      id: dsId,
+      role: "option",
+      isActive,
+      isSelected,
+      onClick,
+      ref: innerRef,
+      onMouseDown,
+      onMouseEnter,
+      onMouseLeave,
+      className: isActive ? "ds-list-item-active" : "",
+      style: wrapperStyles,
+      "data-testid": dataTestid,
+      disabled,
+      "data-type": "single",
+      children: Render !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledContentWrapper, { cols: gridLayout, minHeight: "16px", gutter: "xxs", alignItems: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Checkmark, { size: "s", color: ["brand-primary", "600"] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemLabel, { children: label }),
+        secondaryLabel !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemSecondaryLabel, { children: secondaryLabel })
+      ] })
+    }
+  );
 };
 SingleMenuItem.propTypes = import_react_desc_prop_types.itemProps;
-SingleMenuItem.displayName = "SingleMenuItem";
+SingleMenuItem.displayName = `${import_exported_related.DSMenuItemName}Single`;
 const SingleMenuItemWithSchema = (0, import_ds_utilities.describe)(SingleMenuItem);
 SingleMenuItemWithSchema.propTypes = import_react_desc_prop_types.itemProps;
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/SingleMenuItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport type { DSMenuItemT } from '../../react-desc-prop-types';\nimport { defaultSingleProps, itemProps } from '../../react-desc-prop-types';\nimport {\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n} from '../styled';\n\nconst SingleMenuItem: React.ComponentType<DSMenuItemT.SingleProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSingleProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, itemProps);\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 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    >\n      {Render !== undefined ? (\n        <Render {...props} />\n      ) : (\n        <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n          <div>{isSelected && <Checkmark size=\"s\" color={['brand-primary', '600']} />}</div>\n          <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n          {secondaryLabel !== undefined && <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>}\n        </StyledContentWrapper>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nSingleMenuItem.propTypes = itemProps;\nSingleMenuItem.displayName = 'SingleMenuItem';\nconst SingleMenuItemWithSchema = describe(SingleMenuItem);\nSingleMenuItemWithSchema.propTypes = itemProps;\n\nexport { SingleMenuItem };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0Df;AA1DR,mBAA+B;AAC/B,0BAAuF;AACvF,sBAA0B;AAE1B,mCAA8C;AAC9C,oBAKO;AAEP,MAAM,iBAA+D,CAAC,UAAU;AAC9E,QAAM,uBAAmB,kDAA6B,OAAO,+CAAkB;AAE/E,0DAA+B,kBAAkB,sCAAS;AAC1D,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,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,4CAAC;AAAA,IACC,iBAAe;AAAA,IACf,IAAI;AAAA,IACJ,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,WAAW,wBAAwB;AAAA,IAC9C,OAAO;AAAA,IACP,eAAa;AAAA,IACb;AAAA,IACA,aAAU;AAAA,IAET,qBAAW,SACV,4CAAC;AAAA,MAAQ,GAAG;AAAA,KAAO,IAEnB,6CAAC;AAAA,MAAqB,MAAM;AAAA,MAAY,WAAU;AAAA,MAAO,QAAO;AAAA,MAAM,YAAW;AAAA,MAC/E;AAAA,oDAAC;AAAA,UAAK,wBAAc,4CAAC;AAAA,YAAU,MAAK;AAAA,YAAI,OAAO,CAAC,iBAAiB,KAAK;AAAA,WAAG;AAAA,SAAG;AAAA,QAC5E,4CAAC;AAAA,UAAoB;AAAA,SAAM;AAAA,QAC1B,mBAAmB,UAAa,4CAAC;AAAA,UAA6B;AAAA,SAAe;AAAA;AAAA,KAChF;AAAA,GAEJ;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,+BAA2B,8BAAS,cAAc;AACxD,yBAAyB,YAAY;",
+  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport type { DSMenuItemT } from '../../react-desc-prop-types';\nimport { defaultSingleProps, itemProps } from '../../react-desc-prop-types';\nimport {\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n} from '../styled';\nimport { DSMenuItemName } from '../../exported-related';\n\nconst SingleMenuItem: React.ComponentType<DSMenuItemT.SingleProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSingleProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, itemProps, `${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 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    >\n      {Render !== undefined ? (\n        <Render {...props} />\n      ) : (\n        <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n          <div>{isSelected && <Checkmark size=\"s\" color={['brand-primary', '600']} />}</div>\n          <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n          {secondaryLabel !== undefined && <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>}\n        </StyledContentWrapper>\n      )}\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n\nSingleMenuItem.propTypes = itemProps;\nSingleMenuItem.displayName = `${DSMenuItemName}Single`;\nconst SingleMenuItemWithSchema = describe(SingleMenuItem);\nSingleMenuItemWithSchema.propTypes = itemProps;\n\nexport { SingleMenuItem };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2Df;AA3DR,mBAA+B;AAC/B,0BAAuF;AACvF,sBAA0B;AAE1B,mCAA8C;AAC9C,oBAKO;AACP,8BAA+B;AAE/B,MAAM,iBAA+D,CAAC,UAAU;AAC9E,QAAM,uBAAmB,kDAA6B,OAAO,+CAAkB;AAE/E,0DAA+B,kBAAkB,wCAAW,GAAG,8CAAsB;AACrF,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,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,MAET,qBAAW,SACV,4CAAC,UAAQ,GAAG,OAAO,IAEnB,6CAAC,sCAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E;AAAA,oDAAC,SAAK,wBAAc,4CAAC,6BAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,GAAG;AAAA,QAC5E,4CAAC,oCAAoB,iBAAM;AAAA,QAC1B,mBAAmB,UAAa,4CAAC,6CAA6B,0BAAe;AAAA,SAChF;AAAA;AAAA,EAEJ;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc,GAAG;AAChC,MAAM,+BAA2B,8BAAS,cAAc;AACxD,yBAAyB,YAAY;",
   "names": []
 }

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

@@ -36,12 +36,13 @@ var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_react_desc_prop_types = require("../../react-desc-prop-types");
 var import_styled = require("../styled");
 var import_useGetSubmenuHandlers = require("./useGetSubmenuHandlers");
+var import_exported_related = require("../../exported-related");
 const SingleWithSubmenuItem = (props) => {
   const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(
     props,
     import_react_desc_prop_types.defaultSingleWithSubmenuProps
   );
-  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.itemProps);
+  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.itemProps, `${import_exported_related.DSMenuItemName}SingleWithSubmenu`);
   const {
     dsId,
     label,
@@ -80,87 +81,68 @@ const SingleWithSubmenuItem = (props) => {
     cols.push("min-content");
     return cols;
   }, [secondaryLabel]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dropdown, {
-    isOpened: delayedIsOpened,
-    options: options ?? [],
-    onOptionClick,
-    startPlacementPreference: "right-start",
-    placementOrderPreference: ["right-start", "right-end", "left-start", "left-end"],
-    selectedOptions,
-    openedSubmenus,
-    onSubmenuToggle,
-    onKeyDown,
-    onClickOutside,
-    customOffset: [-4, 1],
-    onMouseEnter: onMouseEnterHandler,
-    onMouseLeave: onMouseLeaveHandler,
-    wrapperStyles: { ...wrapperStyles, w: "100%" },
-    minWidth,
-    maxHeight,
-    as: "li",
-    role: "option",
-    "aria-selected": isSubmenuOpened,
-    "aria-describedby": `dropdownmenu-submenu-${dsId}`,
-    id: dsId,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledGlobalMenuItemWrapper, {
-      pr: 0,
-      onClick: !disabled ? onClick : void 0,
-      isSelected: isSubmenuOpened,
-      disabled,
-      isActive,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Dropdown,
+    {
+      isOpened: delayedIsOpened,
+      options: options ?? [],
+      onOptionClick,
+      startPlacementPreference: "right-start",
+      placementOrderPreference: ["right-start", "right-end", "left-start", "left-end"],
+      selectedOptions,
+      openedSubmenus,
+      onSubmenuToggle,
+      onKeyDown,
+      onClickOutside,
+      customOffset: [-4, 1],
       onMouseEnter: onMouseEnterHandler,
       onMouseLeave: onMouseLeaveHandler,
-      ref: innerRef,
-      "data-type": "single-with-submenu",
-      children: [
-        Render !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, {
-          ...propsWithDefault
-        }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledContentWrapper, {
-          cols: gridLayout,
-          gutter: "xxs",
-          alignItems: "center",
+      wrapperStyles: { ...wrapperStyles, w: "100%" },
+      minWidth,
+      maxHeight,
+      as: "li",
+      role: "option",
+      "aria-selected": isSubmenuOpened,
+      "aria-describedby": `dropdownmenu-submenu-${dsId}`,
+      id: dsId,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_styled.StyledGlobalMenuItemWrapper,
+        {
+          pr: 0,
+          onClick: !disabled ? onClick : void 0,
+          isSelected: isSubmenuOpened,
+          disabled,
+          isActive,
+          onMouseEnter: onMouseEnterHandler,
+          onMouseLeave: onMouseLeaveHandler,
+          ref: innerRef,
+          "data-type": "single-with-submenu",
           children: [
-            isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Checkmark, {
-              size: "s",
-              color: disabled ? ["neutral", "500"] : ["brand-primary", "600"]
-            }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemLabel, {
-              children: label
-            }),
-            secondaryLabel !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemSecondaryLabel, {
-              children: secondaryLabel
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledIconContainer, {
-              children: [
+            Render !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, { ...propsWithDefault }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledContentWrapper, { cols: gridLayout, gutter: "xxs", alignItems: "center", children: [
+              isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Checkmark, { size: "s", color: disabled ? ["neutral", "500"] : ["brand-primary", "600"] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemLabel, { children: label }),
+              secondaryLabel !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemSecondaryLabel, { children: secondaryLabel }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledIconContainer, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledVerticalSeparator, {}),
-                rightAddon === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledEllipsisButton, {
-                  tabIndex: -1,
-                  onClick: onEllipsisClick,
-                  disabled,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MoreOptionsVert, {
+                rightAddon === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledEllipsisButton, { tabIndex: -1, onClick: onEllipsisClick, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_ds_icons.MoreOptionsVert,
+                  {
                     className: "ds-dropdown-menu-v2-more-options",
                     color: disabled ? ["neutral", "500"] : ["brand-primary", "600"],
                     size: "s"
-                  })
-                }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronRight, {
-                  color: disabled ? ["neutral", "500"] : ["brand-primary", "600"],
-                  size: "s"
-                })
-              ]
-            })
+                  }
+                ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronRight, { color: disabled ? ["neutral", "500"] : ["brand-primary", "600"], size: "s" })
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: `dropdownmenu-submenu-${dsId}`, style: { display: "none" }, children: "submenu, to open this submenu press the Right Arrow key" })
           ]
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-          id: `dropdownmenu-submenu-${dsId}`,
-          style: { display: "none" },
-          children: "submenu, to open this submenu press the Right Arrow key"
-        })
-      ]
-    })
-  });
+        }
+      )
+    }
+  );
 };
 SingleWithSubmenuItem.propTypes = import_react_desc_prop_types.itemProps;
-SingleWithSubmenuItem.displayName = "SingleWithSubmenuItem";
+SingleWithSubmenuItem.displayName = `${import_exported_related.DSMenuItemName}SingleWithSubmenu`;
 const SingleWithSubmenuItemWithSchema = (0, import_ds_utilities.describe)(SingleWithSubmenuItem);
 SingleWithSubmenuItemWithSchema.propTypes = import_react_desc_prop_types.itemProps;
 //# sourceMappingURL=index.js.map