@elliemae/ds-menu-items-commons 3.27.0-next.11

package/dist/cjs/constants/index.js

@@ -0,0 +1,51 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var constants_exports = {};
+__export(constants_exports, {
+  DSMenuItemName: () => DSMenuItemName,
+  DSMenuItemSlots: () => DSMenuItemSlots
+});
+module.exports = __toCommonJS(constants_exports);
+var React = __toESM(require("react"));
+const DSMenuItemName = "DSMenuItem";
+const DSMenuItemSlots = {
+  MENU_ITEM_WRAPPER: "menu-item-wrapper",
+  MENU_ITEM_LABEL: "menu-item-label",
+  MENU_ITEM_SECONDARY_LABEL: "menu-item-secondary-label",
+  MENU_ITEM_ICON: "menu-item-icon",
+  MENU_ITEM_ELLIPSIS_BUTTON: "menu-item-ellipsis-button",
+  MENU_ITEM_CONTENT: "menu-item-content",
+  MENU_ITEM_SEPARATOR: "menu-item-separator",
+  MENU_ITEM_SEPARATOR_WRAPPER: "menu-item-separator-wrapper",
+  MENU_ITEM_GROUP_LABEL: "menu-item-group-label",
+  MENU_ITEM_SECTION_WRAPPER: "menu-item-section-wrapper",
+  MENU_ITEM_VERTICAL_SEPARATOR: "menu-item-vertical-separator",
+  MENU_ITEM_CONTENT_WRAPPER: "menu-item-content-wrapper"
+};
+//# sourceMappingURL=index.js.map

package/dist/cjs/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["// this package is about exposing common constants for the menu items components\n// this is where we solve the problem of avoiding breaking changes after splitting the DSMenuItems package into sub-packages\n// for this reason the values of the constants are not following the pattern ( they are not using the name of the component as prefix)\n// not following the patterns assure we don't break the existing code that was using the constants from the DSMenuItems package.\n// yes, this means that the values are repeating the 'menu-item-' prefix, but this is the price to pay to avoid breaking changes.\nexport const DSMenuItemName = 'DSMenuItem';\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} as const;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKhB,MAAM,iBAAiB;AACvB,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/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+__export(src_exports, {
+  DSMenuItemName: () => import_constants.DSMenuItemName,
+  DSMenuItemSlots: () => import_constants.DSMenuItemSlots,
+  DSMenuItemsCommonsDefaultProps: () => import_react_desc_prop_types.DSMenuItemsCommonsDefaultProps,
+  DSMenuItemsCommonsPropTypes: () => import_react_desc_prop_types.DSMenuItemsCommonsPropTypes,
+  StyleMenuItemLabel: () => import_styled.StyleMenuItemLabel,
+  StyleMenuItemSecondaryLabel: () => import_styled.StyleMenuItemSecondaryLabel,
+  StyledContentWrapper: () => import_styled.StyledContentWrapper,
+  StyledEllipsisButton: () => import_styled.StyledEllipsisButton,
+  StyledGlobalMenuItemWrapper: () => import_styled.StyledGlobalMenuItemWrapper,
+  StyledGroupLabel: () => import_styled.StyledGroupLabel,
+  StyledIconContainer: () => import_styled.StyledIconContainer,
+  StyledItemContent: () => import_styled.StyledItemContent,
+  StyledSectionWrapper: () => import_styled.StyledSectionWrapper,
+  StyledSeparator: () => import_styled.StyledSeparator,
+  StyledSeparatorWrapper: () => import_styled.StyledSeparatorWrapper,
+  StyledVerticalSeparator: () => import_styled.StyledVerticalSeparator
+});
+module.exports = __toCommonJS(src_exports);
+var React = __toESM(require("react"));
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+var import_constants = require("./constants/index.js");
+var import_styled = require("./styled.js");
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\nexport {\n  type DSMenuItemsCommonsT,\n  DSMenuItemsCommonsPropTypes,\n  DSMenuItemsCommonsDefaultProps,\n} from './react-desc-prop-types.js';\nexport { DSMenuItemName, DSMenuItemSlots } from './constants/index.js';\n\nexport {\n  StyledGlobalMenuItemWrapper,\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledIconContainer,\n  StyledEllipsisButton,\n  StyledItemContent,\n  StyledSeparator,\n  StyledSeparatorWrapper,\n  StyledGroupLabel,\n  StyledSectionWrapper,\n  StyledVerticalSeparator,\n  StyledContentWrapper,\n} from './styled.js';\n\n// this and related `ds-menu-` components are NOT meant to be polymorphic\n// the plan for the `ds-menu-` components is for them to be following the OOP inheritance model instead\n// check \"WhatIsGoingOn.md\" for more details.\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;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mCAIO;AACP,uBAAgD;AAEhD,oBAaO;",
+  "names": []
+}

package/dist/cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

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

@@ -0,0 +1,60 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  DSMenuItemsCommonsDefaultProps: () => DSMenuItemsCommonsDefaultProps,
+  DSMenuItemsCommonsPropTypes: () => DSMenuItemsCommonsPropTypes,
+  DSMenuItemsCommonsPropTypesSchema: () => DSMenuItemsCommonsPropTypesSchema
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+const DSMenuItemsCommonsDefaultProps = {
+  innerRef: () => {
+  },
+  wrapperStyles: {}
+};
+const DSMenuItemsCommonsPropTypes = {
+  dsId: import_ds_props_helpers.PropTypes.string.description(
+    "unique identifier that MUST NOT be repeated to ensure all functionalities works as expected"
+  ).isRequired,
+  wrapperStyles: import_ds_props_helpers.PropTypes.object.description("Styles to be applied to the wrapper element.").defaultValue(DSMenuItemsCommonsDefaultProps.wrapperStyles),
+  render: import_ds_props_helpers.PropTypes.func.description("A React component that can be used to render the menu item.").signature("React.ComponentType"),
+  innerRef: import_ds_props_helpers.PropTypes.oneOfType([
+    import_ds_props_helpers.PropTypes.shape({
+      current: import_ds_props_helpers.PropTypes.node
+    }),
+    import_ds_props_helpers.PropTypes.func.description(
+      " A ref object or callback function to access the main underlying DOM element of the menu item."
+    )
+  ]).defaultValue(`(() => {})`),
+  original: import_ds_props_helpers.PropTypes.object.description("")
+};
+const DSMenuItemsCommonsPropTypesSchema = DSMenuItemsCommonsPropTypes;
+//# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport type React from 'react';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSMenuItemsCommonsT {\n  export interface RequiredProps {\n    dsId: string;\n  }\n\n  export interface DefaultProps {\n    innerRef: React.RefObject<HTMLLIElement> | ((_ref: HTMLLIElement) => void);\n    wrapperStyles: React.CSSProperties;\n  }\n\n  export interface OptionalProps<T> {\n    render?: React.ComponentType<T>;\n    original?: Record<string, unknown>;\n  }\n\n  export interface Props<T = unknown>\n    extends Partial<DefaultProps>,\n      OptionalProps<T>,\n      // each single menu-item is in charge of spreading the GlobalAttributesT & XstyledProps\n      // they are NOT inherited from a common element from ds-menu-items-commons\n      // Omit<\n      //   GlobalAttributesT<HTMLButtonElement>,\n      //   keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      // >,\n      // XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps<T = unknown>\n    extends DefaultProps,\n      OptionalProps<T>,\n      // each single menu-item is in charge of spreading the GlobalAttributesT & XstyledProps\n      // they are NOT inherited from a common element from ds-menu-items-commons\n      // Omit<\n      //   GlobalAttributesT<HTMLButtonElement>,\n      //   keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      // >,\n      // XstyledProps,\n      RequiredProps {}\n}\n\nexport const DSMenuItemsCommonsDefaultProps: DSMenuItemsCommonsT.DefaultProps = {\n  innerRef: () => {},\n  wrapperStyles: {},\n} as const;\n\nexport const DSMenuItemsCommonsPropTypes: DSPropTypesSchema<DSMenuItemsCommonsT.Props> = {\n  dsId: PropTypes.string.description(\n    'unique identifier that MUST NOT be repeated to ensure all functionalities works as expected',\n  ).isRequired,\n  wrapperStyles: PropTypes.object\n    .description('Styles to be applied to the wrapper element.')\n    .defaultValue(DSMenuItemsCommonsDefaultProps.wrapperStyles),\n  render: PropTypes.func\n    .description('A React component that can be used to render the menu item.')\n    .signature('React.ComponentType'),\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 main underlying DOM element of the menu item.',\n    ),\n  ]).defaultValue(`(() => {})`),\n  original: PropTypes.object.description(''),\n};\n\nexport const DSMenuItemsCommonsPropTypesSchema =\n  DSMenuItemsCommonsPropTypes as unknown as WeakValidationMap<DSMenuItemsCommonsT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAA0B;AA4CnB,MAAM,iCAAmE;AAAA,EAC9E,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,eAAe,CAAC;AAClB;AAEO,MAAM,8BAA4E;AAAA,EACvF,MAAM,kCAAU,OAAO;AAAA,IACrB;AAAA,EACF,EAAE;AAAA,EACF,eAAe,kCAAU,OACtB,YAAY,8CAA8C,EAC1D,aAAa,+BAA+B,aAAa;AAAA,EAC5D,QAAQ,kCAAU,KACf,YAAY,6DAA6D,EACzE,UAAU,qBAAqB;AAAA,EAClC,UAAU,kCAAU,UAAU;AAAA,IAC5B,kCAAU,MAAM;AAAA,MACd,SAAS,kCAAU;AAAA,IACrB,CAAC;AAAA,IACD,kCAAU,KAAK;AAAA,MACb;AAAA,IACF;AAAA,EACF,CAAC,EAAE,aAAa,YAAY;AAAA,EAC5B,UAAU,kCAAU,OAAO,YAAY,EAAE;AAC3C;AAEO,MAAM,oCACX;",
+  "names": []
+}

package/dist/cjs/styled.js

@@ -0,0 +1,192 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styled_exports = {};
+__export(styled_exports, {
+  StyleMenuItemLabel: () => StyleMenuItemLabel,
+  StyleMenuItemSecondaryLabel: () => StyleMenuItemSecondaryLabel,
+  StyledContentWrapper: () => StyledContentWrapper,
+  StyledEllipsisButton: () => StyledEllipsisButton,
+  StyledGlobalMenuItemWrapper: () => StyledGlobalMenuItemWrapper,
+  StyledGroupLabel: () => StyledGroupLabel,
+  StyledIconContainer: () => StyledIconContainer,
+  StyledItemContent: () => StyledItemContent,
+  StyledSectionWrapper: () => StyledSectionWrapper,
+  StyledSeparator: () => StyledSeparator,
+  StyledSeparatorWrapper: () => StyledSeparatorWrapper,
+  StyledVerticalSeparator: () => StyledVerticalSeparator
+});
+module.exports = __toCommonJS(styled_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_constants = require("./constants/index.js");
+const borderOutside = () => import_ds_system.css`
+  :after {
+    display: block;
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid ${({ theme }) => theme.colors.brand[500]};
+    pointer-events: none;
+    z-index: 7;
+  }
+`;
+const disabledOption = () => import_ds_system.css`
+  color: ${({ theme }) => theme.colors.neutral[500]};
+  background-color: ${({ theme }) => theme.colors.neutral["000"]};
+  cursor: not-allowed;
+  * {
+    cursor: not-allowed;
+  }
+`;
+const StyledGlobalMenuItemWrapper = (0, import_ds_system.styled)("li", {
+  name: import_constants.DSMenuItemName,
+  slot: import_constants.DSMenuItemSlots.MENU_ITEM_WRAPPER
+})`
+  cursor: pointer;
+  min-height: 32px;
+
+  padding-left: 16px;
+  padding-right: 16px;
+  display: grid;
+  align-items: center;
+  list-style: none;
+  position: relative;
+
+  ${(props) => {
+  if (props.disabled)
+    return disabledOption();
+  if (props.isActive)
+    return borderOutside();
+  return "";
+}};
+
+  background-color: ${(props) => props.isActive ? props.theme.colors.brand[200] : props.theme.colors.neutral["000"]};
+
+  // focus style for standalone version
+  &:focus {
+    ${(props) => {
+  if (props.disabled)
+    return disabledOption();
+  return borderOutside();
+}};
+    outline: none;
+    background-color: ${(props) => !props.disabled ? props.theme.colors.brand[200] : props.theme.colors.neutral["000"]};
+  }
+  &:hover {
+    background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};
+  }
+  ${import_ds_system.xStyledCommonProps}
+`;
+const StyleMenuItemLabel = (0, import_ds_system.styled)("span", { name: import_constants.DSMenuItemName, slot: import_constants.DSMenuItemSlots.MENU_ITEM_LABEL })`
+  padding: 8px 0;
+  font-size: 13px;
+`;
+const StyleMenuItemSecondaryLabel = (0, import_ds_system.styled)("span", {
+  name: import_constants.DSMenuItemName,
+  slot: import_constants.DSMenuItemSlots.MENU_ITEM_SECONDARY_LABEL
+})`
+  padding: 8px 0;
+  font-size: 11px;
+  font-style: italic;
+  color: brand-800;
+`;
+const StyledIconContainer = (0, import_ds_system.styled)("div", { name: import_constants.DSMenuItemName, slot: import_constants.DSMenuItemSlots.MENU_ITEM_ICON })`
+  width: 25px;
+  height: 24px;
+  display: grid;
+  grid-template-columns: min-content auto;
+  place-items: center;
+`;
+const StyledEllipsisButton = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSMenuItemName,
+  slot: import_constants.DSMenuItemSlots.MENU_ITEM_ELLIPSIS_BUTTON
+})`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: transparent;
+  :active {
+    ${(props) => props.disabled ? "" : borderOutside()}
+  }
+`;
+const StyledItemContent = (0, import_ds_system.styled)("div", { name: import_constants.DSMenuItemName, slot: import_constants.DSMenuItemSlots.MENU_ITEM_CONTENT })`
+  display: flex;
+  width: 100%;
+  margin: 8px 0px;
+`;
+const StyledSeparator = (0, import_ds_system.styled)("hr", { name: import_constants.DSMenuItemName, slot: import_constants.DSMenuItemSlots.MENU_ITEM_SEPARATOR })`
+  border: 0;
+  border-top: 1px solid #697489;
+  margin: 4px 0px;
+  padding: 0;
+`;
+const StyledSeparatorWrapper = (0, import_ds_system.styled)("li", {
+  name: import_constants.DSMenuItemName,
+  slot: import_constants.DSMenuItemSlots.MENU_ITEM_SEPARATOR_WRAPPER
+})`
+  list-style: none;
+  padding: 0px 16px;
+
+  ${import_ds_system.xStyledCommonProps}
+`;
+const StyledGroupLabel = (0, import_ds_system.styled)("span", { name: import_constants.DSMenuItemName, slot: import_constants.DSMenuItemSlots.MENU_ITEM_GROUP_LABEL })`
+  font-size: 13px;
+  color: neutral-500;
+`;
+const StyledSectionWrapper = (0, import_ds_system.styled)("li", {
+  name: import_constants.DSMenuItemName,
+  slot: import_constants.DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER
+})`
+  list-style: none;
+  padding: 0px 16px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+
+  ${import_ds_system.xStyledCommonProps}
+`;
+const StyledVerticalSeparator = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSMenuItemName,
+  slot: import_constants.DSMenuItemSlots.MENU_ITEM_VERTICAL_SEPARATOR
+})`
+  width: 1px;
+  height: 18px;
+  background-color: neutral-300;
+`;
+const StyledContentWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
+  name: import_constants.DSMenuItemName,
+  slot: import_constants.DSMenuItemSlots.MENU_ITEM_CONTENT_WRAPPER
+})``;
+//# sourceMappingURL=styled.js.map

package/dist/cjs/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/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 './constants/index.js';\n\nconst borderOutside = () => css`\n  :after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 1px solid ${({ theme }) => theme.colors.brand[500]};\n    pointer-events: none;\n    z-index: 7;\n  }\n`;\n\nconst disabledOption = () => css`\n  color: ${({ theme }) => theme.colors.neutral[500]};\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  cursor: not-allowed;\n  * {\n    cursor: not-allowed;\n  }\n`;\n\ninterface StyledGlobalMenuItemWrapperT extends LayoutProps, SizingProps, PositionProps, SpaceProps {\n  isSelected?: boolean;\n  isActive?: boolean;\n  disabled?: boolean;\n}\n\nexport const StyledGlobalMenuItemWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_WRAPPER,\n})<StyledGlobalMenuItemWrapperT>`\n  cursor: pointer;\n  min-height: 32px;\n\n  padding-left: 16px;\n  padding-right: 16px;\n  display: grid;\n  align-items: center;\n  list-style: none;\n  position: relative;\n\n  ${(props) => {\n    if (props.disabled) return disabledOption();\n    if (props.isActive) return borderOutside();\n    return '';\n  }};\n\n  background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : props.theme.colors.neutral['000'])};\n\n  // focus style for standalone version\n  &:focus {\n    ${(props) => {\n      if (props.disabled) return disabledOption();\n      return borderOutside();\n    }};\n    outline: none;\n    background-color: ${(props) =>\n      !props.disabled ? props.theme.colors.brand[200] : props.theme.colors.neutral['000']};\n  }\n  &:hover {\n    background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};\n  }\n  ${xStyledCommonProps}\n`;\n\nexport const StyleMenuItemLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`\n  padding: 8px 0;\n  font-size: 13px;\n`;\n\nexport const StyleMenuItemSecondaryLabel = styled('span', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SECONDARY_LABEL,\n})`\n  padding: 8px 0;\n  font-size: 11px;\n  font-style: italic;\n  color: brand-800;\n`;\n\nexport const StyledIconContainer = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_ICON })`\n  width: 25px;\n  height: 24px;\n  display: grid;\n  grid-template-columns: min-content auto;\n  place-items: center;\n`;\n\nexport const StyledEllipsisButton = styled('div', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_ELLIPSIS_BUTTON,\n})<{ disabled: boolean }>`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: grid;\n  place-items: center;\n  background: transparent;\n  :active {\n    ${(props) => (props.disabled ? '' : borderOutside())}\n  }\n`;\n\nexport const StyledItemContent = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_CONTENT })`\n  display: flex;\n  width: 100%;\n  margin: 8px 0px;\n`;\n\nexport const StyledSeparator = styled('hr', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR })`\n  border: 0;\n  border-top: 1px solid #697489;\n  margin: 4px 0px;\n  padding: 0;\n`;\n\nexport const StyledSeparatorWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR_WRAPPER,\n})`\n  list-style: none;\n  padding: 0px 16px;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledGroupLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL })`\n  font-size: 13px;\n  color: neutral-500;\n`;\n\nexport const StyledSectionWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER,\n})`\n  list-style: none;\n  padding: 0px 16px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_VERTICAL_SEPARATOR,\n})`\n  width: 1px;\n  height: 18px;\n  background-color: neutral-300;\n`;\n\nexport const StyledContentWrapper = styled(Grid, {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_CONTENT_WRAPPER,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/constants/index.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const DSMenuItemName = "DSMenuItem";
+const DSMenuItemSlots = {
+  MENU_ITEM_WRAPPER: "menu-item-wrapper",
+  MENU_ITEM_LABEL: "menu-item-label",
+  MENU_ITEM_SECONDARY_LABEL: "menu-item-secondary-label",
+  MENU_ITEM_ICON: "menu-item-icon",
+  MENU_ITEM_ELLIPSIS_BUTTON: "menu-item-ellipsis-button",
+  MENU_ITEM_CONTENT: "menu-item-content",
+  MENU_ITEM_SEPARATOR: "menu-item-separator",
+  MENU_ITEM_SEPARATOR_WRAPPER: "menu-item-separator-wrapper",
+  MENU_ITEM_GROUP_LABEL: "menu-item-group-label",
+  MENU_ITEM_SECTION_WRAPPER: "menu-item-section-wrapper",
+  MENU_ITEM_VERTICAL_SEPARATOR: "menu-item-vertical-separator",
+  MENU_ITEM_CONTENT_WRAPPER: "menu-item-content-wrapper"
+};
+export {
+  DSMenuItemName,
+  DSMenuItemSlots
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this package is about exposing common constants for the menu items components\n// this is where we solve the problem of avoiding breaking changes after splitting the DSMenuItems package into sub-packages\n// for this reason the values of the constants are not following the pattern ( they are not using the name of the component as prefix)\n// not following the patterns assure we don't break the existing code that was using the constants from the DSMenuItems package.\n// yes, this means that the values are repeating the 'menu-item-' prefix, but this is the price to pay to avoid breaking changes.\nexport const DSMenuItemName = 'DSMenuItem';\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} as const;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACKhB,MAAM,iBAAiB;AACvB,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/index.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+import {
+  DSMenuItemsCommonsPropTypes,
+  DSMenuItemsCommonsDefaultProps
+} from "./react-desc-prop-types.js";
+import { DSMenuItemName, DSMenuItemSlots } from "./constants/index.js";
+import {
+  StyledGlobalMenuItemWrapper,
+  StyleMenuItemLabel,
+  StyleMenuItemSecondaryLabel,
+  StyledIconContainer,
+  StyledEllipsisButton,
+  StyledItemContent,
+  StyledSeparator,
+  StyledSeparatorWrapper,
+  StyledGroupLabel,
+  StyledSectionWrapper,
+  StyledVerticalSeparator,
+  StyledContentWrapper
+} from "./styled.js";
+export {
+  DSMenuItemName,
+  DSMenuItemSlots,
+  DSMenuItemsCommonsDefaultProps,
+  DSMenuItemsCommonsPropTypes,
+  StyleMenuItemLabel,
+  StyleMenuItemSecondaryLabel,
+  StyledContentWrapper,
+  StyledEllipsisButton,
+  StyledGlobalMenuItemWrapper,
+  StyledGroupLabel,
+  StyledIconContainer,
+  StyledItemContent,
+  StyledSectionWrapper,
+  StyledSeparator,
+  StyledSeparatorWrapper,
+  StyledVerticalSeparator
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\nexport {\n  type DSMenuItemsCommonsT,\n  DSMenuItemsCommonsPropTypes,\n  DSMenuItemsCommonsDefaultProps,\n} from './react-desc-prop-types.js';\nexport { DSMenuItemName, DSMenuItemSlots } from './constants/index.js';\n\nexport {\n  StyledGlobalMenuItemWrapper,\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledIconContainer,\n  StyledEllipsisButton,\n  StyledItemContent,\n  StyledSeparator,\n  StyledSeparatorWrapper,\n  StyledGroupLabel,\n  StyledSectionWrapper,\n  StyledVerticalSeparator,\n  StyledContentWrapper,\n} from './styled.js';\n\n// this and related `ds-menu-` components are NOT meant to be polymorphic\n// the plan for the `ds-menu-` components is for them to be following the OOP inheritance model instead\n// check \"WhatIsGoingOn.md\" for more details.\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB,uBAAuB;AAEhD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
+  "names": []
+}

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

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

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { PropTypes } from "@elliemae/ds-props-helpers";
+const DSMenuItemsCommonsDefaultProps = {
+  innerRef: () => {
+  },
+  wrapperStyles: {}
+};
+const DSMenuItemsCommonsPropTypes = {
+  dsId: PropTypes.string.description(
+    "unique identifier that MUST NOT be repeated to ensure all functionalities works as expected"
+  ).isRequired,
+  wrapperStyles: PropTypes.object.description("Styles to be applied to the wrapper element.").defaultValue(DSMenuItemsCommonsDefaultProps.wrapperStyles),
+  render: PropTypes.func.description("A React component that can be used to render the menu item.").signature("React.ComponentType"),
+  innerRef: PropTypes.oneOfType([
+    PropTypes.shape({
+      current: PropTypes.node
+    }),
+    PropTypes.func.description(
+      " A ref object or callback function to access the main underlying DOM element of the menu item."
+    )
+  ]).defaultValue(`(() => {})`),
+  original: PropTypes.object.description("")
+};
+const DSMenuItemsCommonsPropTypesSchema = DSMenuItemsCommonsPropTypes;
+export {
+  DSMenuItemsCommonsDefaultProps,
+  DSMenuItemsCommonsPropTypes,
+  DSMenuItemsCommonsPropTypesSchema
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -0,0 +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 @typescript-eslint/no-redundant-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport type React from 'react';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSMenuItemsCommonsT {\n  export interface RequiredProps {\n    dsId: string;\n  }\n\n  export interface DefaultProps {\n    innerRef: React.RefObject<HTMLLIElement> | ((_ref: HTMLLIElement) => void);\n    wrapperStyles: React.CSSProperties;\n  }\n\n  export interface OptionalProps<T> {\n    render?: React.ComponentType<T>;\n    original?: Record<string, unknown>;\n  }\n\n  export interface Props<T = unknown>\n    extends Partial<DefaultProps>,\n      OptionalProps<T>,\n      // each single menu-item is in charge of spreading the GlobalAttributesT & XstyledProps\n      // they are NOT inherited from a common element from ds-menu-items-commons\n      // Omit<\n      //   GlobalAttributesT<HTMLButtonElement>,\n      //   keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      // >,\n      // XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps<T = unknown>\n    extends DefaultProps,\n      OptionalProps<T>,\n      // each single menu-item is in charge of spreading the GlobalAttributesT & XstyledProps\n      // they are NOT inherited from a common element from ds-menu-items-commons\n      // Omit<\n      //   GlobalAttributesT<HTMLButtonElement>,\n      //   keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      // >,\n      // XstyledProps,\n      RequiredProps {}\n}\n\nexport const DSMenuItemsCommonsDefaultProps: DSMenuItemsCommonsT.DefaultProps = {\n  innerRef: () => {},\n  wrapperStyles: {},\n} as const;\n\nexport const DSMenuItemsCommonsPropTypes: DSPropTypesSchema<DSMenuItemsCommonsT.Props> = {\n  dsId: PropTypes.string.description(\n    'unique identifier that MUST NOT be repeated to ensure all functionalities works as expected',\n  ).isRequired,\n  wrapperStyles: PropTypes.object\n    .description('Styles to be applied to the wrapper element.')\n    .defaultValue(DSMenuItemsCommonsDefaultProps.wrapperStyles),\n  render: PropTypes.func\n    .description('A React component that can be used to render the menu item.')\n    .signature('React.ComponentType'),\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 main underlying DOM element of the menu item.',\n    ),\n  ]).defaultValue(`(() => {})`),\n  original: PropTypes.object.description(''),\n};\n\nexport const DSMenuItemsCommonsPropTypesSchema =\n  DSMenuItemsCommonsPropTypes as unknown as WeakValidationMap<DSMenuItemsCommonsT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,iBAAiB;AA4CnB,MAAM,iCAAmE;AAAA,EAC9E,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,eAAe,CAAC;AAClB;AAEO,MAAM,8BAA4E;AAAA,EACvF,MAAM,UAAU,OAAO;AAAA,IACrB;AAAA,EACF,EAAE;AAAA,EACF,eAAe,UAAU,OACtB,YAAY,8CAA8C,EAC1D,aAAa,+BAA+B,aAAa;AAAA,EAC5D,QAAQ,UAAU,KACf,YAAY,6DAA6D,EACzE,UAAU,qBAAqB;AAAA,EAClC,UAAU,UAAU,UAAU;AAAA,IAC5B,UAAU,MAAM;AAAA,MACd,SAAS,UAAU;AAAA,IACrB,CAAC;AAAA,IACD,UAAU,KAAK;AAAA,MACb;AAAA,IACF;AAAA,EACF,CAAC,EAAE,aAAa,YAAY;AAAA,EAC5B,UAAU,UAAU,OAAO,YAAY,EAAE;AAC3C;AAEO,MAAM,oCACX;",
+  "names": []
+}

package/dist/esm/styled.js

@@ -0,0 +1,162 @@
+import * as React from "react";
+import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
+import { Grid } from "@elliemae/ds-grid";
+import { DSMenuItemName, DSMenuItemSlots } from "./constants/index.js";
+const borderOutside = () => css`
+  :after {
+    display: block;
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid ${({ theme }) => theme.colors.brand[500]};
+    pointer-events: none;
+    z-index: 7;
+  }
+`;
+const disabledOption = () => css`
+  color: ${({ theme }) => theme.colors.neutral[500]};
+  background-color: ${({ theme }) => theme.colors.neutral["000"]};
+  cursor: not-allowed;
+  * {
+    cursor: not-allowed;
+  }
+`;
+const StyledGlobalMenuItemWrapper = styled("li", {
+  name: DSMenuItemName,
+  slot: DSMenuItemSlots.MENU_ITEM_WRAPPER
+})`
+  cursor: pointer;
+  min-height: 32px;
+
+  padding-left: 16px;
+  padding-right: 16px;
+  display: grid;
+  align-items: center;
+  list-style: none;
+  position: relative;
+
+  ${(props) => {
+  if (props.disabled)
+    return disabledOption();
+  if (props.isActive)
+    return borderOutside();
+  return "";
+}};
+
+  background-color: ${(props) => props.isActive ? props.theme.colors.brand[200] : props.theme.colors.neutral["000"]};
+
+  // focus style for standalone version
+  &:focus {
+    ${(props) => {
+  if (props.disabled)
+    return disabledOption();
+  return borderOutside();
+}};
+    outline: none;
+    background-color: ${(props) => !props.disabled ? props.theme.colors.brand[200] : props.theme.colors.neutral["000"]};
+  }
+  &:hover {
+    background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};
+  }
+  ${xStyledCommonProps}
+`;
+const StyleMenuItemLabel = styled("span", { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`
+  padding: 8px 0;
+  font-size: 13px;
+`;
+const StyleMenuItemSecondaryLabel = styled("span", {
+  name: DSMenuItemName,
+  slot: DSMenuItemSlots.MENU_ITEM_SECONDARY_LABEL
+})`
+  padding: 8px 0;
+  font-size: 11px;
+  font-style: italic;
+  color: brand-800;
+`;
+const StyledIconContainer = styled("div", { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_ICON })`
+  width: 25px;
+  height: 24px;
+  display: grid;
+  grid-template-columns: min-content auto;
+  place-items: center;
+`;
+const StyledEllipsisButton = styled("div", {
+  name: DSMenuItemName,
+  slot: DSMenuItemSlots.MENU_ITEM_ELLIPSIS_BUTTON
+})`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: transparent;
+  :active {
+    ${(props) => props.disabled ? "" : borderOutside()}
+  }
+`;
+const StyledItemContent = styled("div", { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_CONTENT })`
+  display: flex;
+  width: 100%;
+  margin: 8px 0px;
+`;
+const StyledSeparator = styled("hr", { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR })`
+  border: 0;
+  border-top: 1px solid #697489;
+  margin: 4px 0px;
+  padding: 0;
+`;
+const StyledSeparatorWrapper = styled("li", {
+  name: DSMenuItemName,
+  slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR_WRAPPER
+})`
+  list-style: none;
+  padding: 0px 16px;
+
+  ${xStyledCommonProps}
+`;
+const StyledGroupLabel = styled("span", { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL })`
+  font-size: 13px;
+  color: neutral-500;
+`;
+const StyledSectionWrapper = styled("li", {
+  name: DSMenuItemName,
+  slot: DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER
+})`
+  list-style: none;
+  padding: 0px 16px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+
+  ${xStyledCommonProps}
+`;
+const StyledVerticalSeparator = styled("div", {
+  name: DSMenuItemName,
+  slot: DSMenuItemSlots.MENU_ITEM_VERTICAL_SEPARATOR
+})`
+  width: 1px;
+  height: 18px;
+  background-color: neutral-300;
+`;
+const StyledContentWrapper = styled(Grid, {
+  name: DSMenuItemName,
+  slot: DSMenuItemSlots.MENU_ITEM_CONTENT_WRAPPER
+})``;
+export {
+  StyleMenuItemLabel,
+  StyleMenuItemSecondaryLabel,
+  StyledContentWrapper,
+  StyledEllipsisButton,
+  StyledGlobalMenuItemWrapper,
+  StyledGroupLabel,
+  StyledIconContainer,
+  StyledItemContent,
+  StyledSectionWrapper,
+  StyledSeparator,
+  StyledSeparatorWrapper,
+  StyledVerticalSeparator
+};
+//# sourceMappingURL=styled.js.map

package/dist/esm/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/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 './constants/index.js';\n\nconst borderOutside = () => css`\n  :after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 1px solid ${({ theme }) => theme.colors.brand[500]};\n    pointer-events: none;\n    z-index: 7;\n  }\n`;\n\nconst disabledOption = () => css`\n  color: ${({ theme }) => theme.colors.neutral[500]};\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  cursor: not-allowed;\n  * {\n    cursor: not-allowed;\n  }\n`;\n\ninterface StyledGlobalMenuItemWrapperT extends LayoutProps, SizingProps, PositionProps, SpaceProps {\n  isSelected?: boolean;\n  isActive?: boolean;\n  disabled?: boolean;\n}\n\nexport const StyledGlobalMenuItemWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_WRAPPER,\n})<StyledGlobalMenuItemWrapperT>`\n  cursor: pointer;\n  min-height: 32px;\n\n  padding-left: 16px;\n  padding-right: 16px;\n  display: grid;\n  align-items: center;\n  list-style: none;\n  position: relative;\n\n  ${(props) => {\n    if (props.disabled) return disabledOption();\n    if (props.isActive) return borderOutside();\n    return '';\n  }};\n\n  background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : props.theme.colors.neutral['000'])};\n\n  // focus style for standalone version\n  &:focus {\n    ${(props) => {\n      if (props.disabled) return disabledOption();\n      return borderOutside();\n    }};\n    outline: none;\n    background-color: ${(props) =>\n      !props.disabled ? props.theme.colors.brand[200] : props.theme.colors.neutral['000']};\n  }\n  &:hover {\n    background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};\n  }\n  ${xStyledCommonProps}\n`;\n\nexport const StyleMenuItemLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`\n  padding: 8px 0;\n  font-size: 13px;\n`;\n\nexport const StyleMenuItemSecondaryLabel = styled('span', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SECONDARY_LABEL,\n})`\n  padding: 8px 0;\n  font-size: 11px;\n  font-style: italic;\n  color: brand-800;\n`;\n\nexport const StyledIconContainer = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_ICON })`\n  width: 25px;\n  height: 24px;\n  display: grid;\n  grid-template-columns: min-content auto;\n  place-items: center;\n`;\n\nexport const StyledEllipsisButton = styled('div', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_ELLIPSIS_BUTTON,\n})<{ disabled: boolean }>`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: grid;\n  place-items: center;\n  background: transparent;\n  :active {\n    ${(props) => (props.disabled ? '' : borderOutside())}\n  }\n`;\n\nexport const StyledItemContent = styled('div', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_CONTENT })`\n  display: flex;\n  width: 100%;\n  margin: 8px 0px;\n`;\n\nexport const StyledSeparator = styled('hr', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR })`\n  border: 0;\n  border-top: 1px solid #697489;\n  margin: 4px 0px;\n  padding: 0;\n`;\n\nexport const StyledSeparatorWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SEPARATOR_WRAPPER,\n})`\n  list-style: none;\n  padding: 0px 16px;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledGroupLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL })`\n  font-size: 13px;\n  color: neutral-500;\n`;\n\nexport const StyledSectionWrapper = styled('li', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER,\n})`\n  list-style: none;\n  padding: 0px 16px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledVerticalSeparator = styled('div', {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_VERTICAL_SEPARATOR,\n})`\n  width: 1px;\n  height: 18px;\n  background-color: neutral-300;\n`;\n\nexport const StyledContentWrapper = styled(Grid, {\n  name: DSMenuItemName,\n  slot: DSMenuItemSlots.MENU_ITEM_CONTENT_WRAPPER,\n})``;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/types/constants/index.d.ts

@@ -0,0 +1,15 @@
+export declare const DSMenuItemName = "DSMenuItem";
+export declare const DSMenuItemSlots: {
+    readonly MENU_ITEM_WRAPPER: "menu-item-wrapper";
+    readonly MENU_ITEM_LABEL: "menu-item-label";
+    readonly MENU_ITEM_SECONDARY_LABEL: "menu-item-secondary-label";
+    readonly MENU_ITEM_ICON: "menu-item-icon";
+    readonly MENU_ITEM_ELLIPSIS_BUTTON: "menu-item-ellipsis-button";
+    readonly MENU_ITEM_CONTENT: "menu-item-content";
+    readonly MENU_ITEM_SEPARATOR: "menu-item-separator";
+    readonly MENU_ITEM_SEPARATOR_WRAPPER: "menu-item-separator-wrapper";
+    readonly MENU_ITEM_GROUP_LABEL: "menu-item-group-label";
+    readonly MENU_ITEM_SECTION_WRAPPER: "menu-item-section-wrapper";
+    readonly MENU_ITEM_VERTICAL_SEPARATOR: "menu-item-vertical-separator";
+    readonly MENU_ITEM_CONTENT_WRAPPER: "menu-item-content-wrapper";
+};

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export { type DSMenuItemsCommonsT, DSMenuItemsCommonsPropTypes, DSMenuItemsCommonsDefaultProps, } from './react-desc-prop-types.js';
+export { DSMenuItemName, DSMenuItemSlots } from './constants/index.js';
+export { StyledGlobalMenuItemWrapper, StyleMenuItemLabel, StyleMenuItemSecondaryLabel, StyledIconContainer, StyledEllipsisButton, StyledItemContent, StyledSeparator, StyledSeparatorWrapper, StyledGroupLabel, StyledSectionWrapper, StyledVerticalSeparator, StyledContentWrapper, } from './styled.js';

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

@@ -0,0 +1,22 @@
+import type { DSPropTypesSchema } from '@elliemae/ds-props-helpers';
+import type React from 'react';
+export declare namespace DSMenuItemsCommonsT {
+    interface RequiredProps {
+        dsId: string;
+    }
+    interface DefaultProps {
+        innerRef: React.RefObject<HTMLLIElement> | ((_ref: HTMLLIElement) => void);
+        wrapperStyles: React.CSSProperties;
+    }
+    interface OptionalProps<T> {
+        render?: React.ComponentType<T>;
+        original?: Record<string, unknown>;
+    }
+    interface Props<T = unknown> extends Partial<DefaultProps>, OptionalProps<T>, RequiredProps {
+    }
+    interface InternalProps<T = unknown> extends DefaultProps, OptionalProps<T>, RequiredProps {
+    }
+}
+export declare const DSMenuItemsCommonsDefaultProps: DSMenuItemsCommonsT.DefaultProps;
+export declare const DSMenuItemsCommonsPropTypes: DSPropTypesSchema<DSMenuItemsCommonsT.Props>;
+export declare const DSMenuItemsCommonsPropTypesSchema: React.WeakValidationMap<DSMenuItemsCommonsT.Props<unknown>>;

package/dist/types/styled.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import type { LayoutProps, SizingProps, PositionProps, SpaceProps } from '@elliemae/ds-system';
+interface StyledGlobalMenuItemWrapperT extends LayoutProps, SizingProps, PositionProps, SpaceProps {
+    isSelected?: boolean;
+    isActive?: boolean;
+    disabled?: boolean;
+}
+export declare const StyledGlobalMenuItemWrapper: import("styled-components").StyledComponent<"li", import("@elliemae/ds-system").Theme, StyledGlobalMenuItemWrapperT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"li">, never>;
+export declare const StyleMenuItemLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
+export declare const StyleMenuItemSecondaryLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
+export declare const StyledIconContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledEllipsisButton: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
+    disabled: boolean;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledItemContent: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledSeparator: import("styled-components").StyledComponent<"hr", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"hr">, never>;
+export declare const StyledSeparatorWrapper: import("styled-components").StyledComponent<"li", import("@elliemae/ds-system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").TypographyProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").BackgroundProps & SpaceProps & import("@xstyled/system").BoxShadowProps<import("@xstyled/system").Theme> & import("@xstyled/system").FlexboxesProps<import("@xstyled/system").Theme> & LayoutProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").ColorProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"li">, never>;
+export declare const StyledGroupLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
+export declare const StyledSectionWrapper: import("styled-components").StyledComponent<"li", import("@elliemae/ds-system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").TypographyProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").BackgroundProps & SpaceProps & import("@xstyled/system").BoxShadowProps<import("@xstyled/system").Theme> & import("@xstyled/system").FlexboxesProps<import("@xstyled/system").Theme> & LayoutProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").ColorProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"li">, never>;
+export declare const StyledVerticalSeparator: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledContentWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
+export {};

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@elliemae/ds-menu-items-commons",
+  "version": "3.27.0-next.11",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - Menu Items Commons",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum.git"
+  },
+  "engines": {
+    "pnpm": ">=6",
+    "node": ">=16"
+  },
+  "author": "ICE MT",
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
+  },
+  "dependencies": {
+    "@xstyled/styled-components": "~3.6.0",
+    "@elliemae/ds-grid": "3.27.0-next.11",
+    "@elliemae/ds-props-helpers": "3.27.0-next.11",
+    "@elliemae/ds-system": "3.27.0-next.11"
+  },
+  "devDependencies": {
+    "lodash": "^4.17.21",
+    "styled-components": "~5.3.9",
+    "@elliemae/ds-monorepo-devops": "3.27.0-next.11"
+  },
+  "peerDependencies": {
+    "@testing-library/jest-dom": "~5.16.4",
+    "@testing-library/react": "~12.1.3",
+    "@testing-library/user-event": "~13.5.0",
+    "lodash": "^4.17.21",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "~5.3.9"
+  },
+  "publishConfig": {
+    "access": "public",
+    "typeSafety": true
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
+    "test": "pui-cli test --passWithNoTests",
+    "lint": "node ../../../scripts/lint.mjs --fix",
+    "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
+    "dts": "node ../../scripts/dts.mjs",
+    "dts:withdeps": "pnpm --filter {.}... dts",
+    "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": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}