@elliemae/ds-menu-items-commons 3.70.0-next.4 → 3.70.0-next.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/constants/index.js +3 -0
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/styled.js +23 -10
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/constants/index.js +3 -0
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/index.js +2 -1
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/styled.js +23 -10
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/constants/index.d.ts +14 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/styled.d.ts +11 -2
- package/package.json +8 -7
|
@@ -28,11 +28,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var constants_exports = {};
|
|
30
30
|
__export(constants_exports, {
|
|
31
|
+
DSMenuItemDataTestId: () => DSMenuItemDataTestId,
|
|
31
32
|
DSMenuItemName: () => DSMenuItemName,
|
|
32
33
|
DSMenuItemSlots: () => DSMenuItemSlots
|
|
33
34
|
});
|
|
34
35
|
module.exports = __toCommonJS(constants_exports);
|
|
35
36
|
var React = __toESM(require("react"));
|
|
37
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
36
38
|
const DSMenuItemName = "DSMenuitem";
|
|
37
39
|
const DSMenuItemSlots = {
|
|
38
40
|
MENU_ITEM_WRAPPER: "menu-item-wrapper",
|
|
@@ -48,4 +50,5 @@ const DSMenuItemSlots = {
|
|
|
48
50
|
MENU_ITEM_VERTICAL_SEPARATOR: "menu-item-vertical-separator",
|
|
49
51
|
MENU_ITEM_CONTENT_WRAPPER: "menu-item-content-wrapper"
|
|
50
52
|
};
|
|
53
|
+
const DSMenuItemDataTestId = (0, import_ds_system.slotObjectToDataTestIds)(DSMenuItemName, DSMenuItemSlots);
|
|
51
54
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"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"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"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.\nimport { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\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\nexport const DSMenuItemDataTestId = slotObjectToDataTestIds(DSMenuItemName, DSMenuItemSlots);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,uBAAwC;AAEjC,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;AAEO,MAAM,2BAAuB,0CAAwB,gBAAgB,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -28,6 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var index_exports = {};
|
|
30
30
|
__export(index_exports, {
|
|
31
|
+
DSMenuItemDataTestId: () => import_constants.DSMenuItemDataTestId,
|
|
31
32
|
DSMenuItemName: () => import_constants.DSMenuItemName,
|
|
32
33
|
DSMenuItemSlots: () => import_constants.DSMenuItemSlots,
|
|
33
34
|
DSMenuItemsCommonsDefaultProps: () => import_react_desc_prop_types.DSMenuItemsCommonsDefaultProps,
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"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"],
|
|
5
|
-
"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,
|
|
4
|
+
"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, DSMenuItemDataTestId } 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"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;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,uBAAsE;AAEtE,oBAaO;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -45,7 +45,9 @@ module.exports = __toCommonJS(styled_exports);
|
|
|
45
45
|
var React = __toESM(require("react"));
|
|
46
46
|
var import_ds_system = require("@elliemae/ds-system");
|
|
47
47
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
48
|
+
var import_ds_typography = require("@elliemae/ds-typography");
|
|
48
49
|
var import_constants = require("./constants/index.js");
|
|
50
|
+
const MENU_ITEM_ROW_HEIGHT = "32px";
|
|
49
51
|
const borderOutside = () => import_ds_system.css`
|
|
50
52
|
:after {
|
|
51
53
|
display: block;
|
|
@@ -62,12 +64,24 @@ const borderOutside = () => import_ds_system.css`
|
|
|
62
64
|
`;
|
|
63
65
|
const disabledOption = () => import_ds_system.css`
|
|
64
66
|
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
67
|
+
/** Checkbox label has its own color rule (n700 per checkbox spec) so the wrapper's color does not cascade through it
|
|
68
|
+
* The multi-select menu item needs explicit label overrides in both non-hover and hover states.
|
|
69
|
+
*/
|
|
70
|
+
label {
|
|
71
|
+
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
72
|
+
}
|
|
65
73
|
:hover {
|
|
66
74
|
color: ${({ theme }) => theme.colors.neutral[600]};
|
|
67
|
-
// lets target the label to controll the checkbox for multi select menu item.
|
|
68
75
|
label {
|
|
69
76
|
color: ${({ theme }) => theme.colors.neutral[600]};
|
|
70
77
|
}
|
|
78
|
+
/** single menu item spec:
|
|
79
|
+
* aria-disabled-selected + hover → checkmark icon goes from neutral-400 to neutral-500
|
|
80
|
+
* ds-icons sets svg fill via !important internally — override with same flag at higher specificity
|
|
81
|
+
*/
|
|
82
|
+
svg {
|
|
83
|
+
fill: ${({ theme }) => theme.colors.neutral[500]} !important;
|
|
84
|
+
}
|
|
71
85
|
}
|
|
72
86
|
cursor: not-allowed;
|
|
73
87
|
* {
|
|
@@ -79,7 +93,7 @@ const StyledGlobalMenuItemWrapper = (0, import_ds_system.styled)("li", {
|
|
|
79
93
|
slot: import_constants.DSMenuItemSlots.MENU_ITEM_WRAPPER
|
|
80
94
|
})`
|
|
81
95
|
cursor: pointer;
|
|
82
|
-
min-height:
|
|
96
|
+
min-height: ${MENU_ITEM_ROW_HEIGHT};
|
|
83
97
|
|
|
84
98
|
padding-left: 16px;
|
|
85
99
|
padding-right: 16px;
|
|
@@ -94,7 +108,7 @@ const StyledGlobalMenuItemWrapper = (0, import_ds_system.styled)("li", {
|
|
|
94
108
|
}};
|
|
95
109
|
|
|
96
110
|
${(props) => {
|
|
97
|
-
if (props.disabled || props.applyAriaDisabled) return disabledOption();
|
|
111
|
+
if (props.disabled || props.applyAriaDisabled || props.readOnly) return disabledOption();
|
|
98
112
|
return "";
|
|
99
113
|
}};
|
|
100
114
|
|
|
@@ -120,9 +134,8 @@ const StyledGlobalMenuItemWrapper = (0, import_ds_system.styled)("li", {
|
|
|
120
134
|
|
|
121
135
|
${import_ds_system.xStyledCommonProps}
|
|
122
136
|
`;
|
|
123
|
-
const StyleMenuItemLabel = (0, import_ds_system.styled)(
|
|
137
|
+
const StyleMenuItemLabel = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name: import_constants.DSMenuItemName, slot: import_constants.DSMenuItemSlots.MENU_ITEM_LABEL })`
|
|
124
138
|
padding: 8px 0;
|
|
125
|
-
font-size: 1rem;
|
|
126
139
|
`;
|
|
127
140
|
const StyleMenuItemSecondaryLabel = (0, import_ds_system.styled)("span", {
|
|
128
141
|
name: import_constants.DSMenuItemName,
|
|
@@ -175,17 +188,17 @@ const StyledSeparatorWrapper = (0, import_ds_system.styled)("li", {
|
|
|
175
188
|
|
|
176
189
|
${import_ds_system.xStyledCommonProps}
|
|
177
190
|
`;
|
|
178
|
-
const StyledGroupLabel = (0, import_ds_system.styled)(
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
191
|
+
const StyledGroupLabel = (0, import_ds_system.styled)(import_ds_typography.DSTypography, {
|
|
192
|
+
name: import_constants.DSMenuItemName,
|
|
193
|
+
slot: import_constants.DSMenuItemSlots.MENU_ITEM_GROUP_LABEL
|
|
194
|
+
})``;
|
|
182
195
|
const StyledSectionWrapper = (0, import_ds_system.styled)("li", {
|
|
183
196
|
name: import_constants.DSMenuItemName,
|
|
184
197
|
slot: import_constants.DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER
|
|
185
198
|
})`
|
|
186
199
|
list-style: none;
|
|
187
200
|
padding: 0px 16px;
|
|
188
|
-
min-height:
|
|
201
|
+
min-height: ${MENU_ITEM_ROW_HEIGHT};
|
|
189
202
|
display: flex;
|
|
190
203
|
align-items: center;
|
|
191
204
|
|
package/dist/cjs/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAgD;AAChD,qBAAqB;AACrB,uBAAgD;
|
|
4
|
+
"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 { DSTypography } from '@elliemae/ds-typography';\nimport { DSMenuItemName, DSMenuItemSlots } from './constants/index.js';\n\n/**\n * Single source for the menu list row height. The option row and the group-label/section row\n * are peers and must stay the same height \u2014 consuming one value keeps them aligned and prevents\n * the kind of drift fixed in PUI-18609 (group label was 24 while options were 32).\n */\nconst MENU_ITEM_ROW_HEIGHT = '32px';\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 /** Checkbox label has its own color rule (n700 per checkbox spec) so the wrapper's color does not cascade through it\n * The multi-select menu item needs explicit label overrides in both non-hover and hover states. \n */\n label {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n :hover {\n color: ${({ theme }) => theme.colors.neutral[600]};\n label {\n color: ${({ theme }) => theme.colors.neutral[600]};\n }\n /** single menu item spec: \n * aria-disabled-selected + hover \u2192 checkmark icon goes from neutral-400 to neutral-500\n * ds-icons sets svg fill via !important internally \u2014 override with same flag at higher specificity\n */\n svg {\n fill: ${({ theme }) => theme.colors.neutral[500]} !important;\n }\n }\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n`;\n\ninterface StyledGlobalMenuItemWrapperT extends LayoutProps, SizingProps, PositionProps, SpaceProps {\n isSelected?: boolean;\n isActive?: boolean;\n disabled?: boolean;\n applyAriaDisabled?: boolean;\n readOnly?: 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: ${MENU_ITEM_ROW_HEIGHT};\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.isActive) return borderOutside();\n return '';\n }};\n\n ${(props) => {\n if (props.disabled || props.applyAriaDisabled || props.readOnly) return disabledOption();\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 if (!props.disabled) return borderOutside();\n return '';\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) =>\n (!props.disabled || !props.applyAriaDisabled || !props.readOnly) && props.theme.colors.brand[200]};\n }\n\n &[aria-disabled='true'] {\n ${disabledOption()}\n }\n\n ${xStyledCommonProps}\n`;\n\nexport const StyleMenuItemLabel = styled(DSTypography, { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`\n padding: 8px 0;\n`;\n\nexport const StyleMenuItemSecondaryLabel = styled('span', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SECONDARY_LABEL,\n})<{ disabled?: boolean }>`\n padding: 8px 0;\n font-size: 0.8462rem;\n font-style: italic;\n color: ${(props) => (props.disabled ? props.theme.colors.neutral['500'] : props.theme.colors.brand['800'])};\n text-align: right;\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; applyAriaDisabled: 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 || props.applyAriaDisabled ? '' : 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(DSTypography, {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL,\n})``;\n\n/**\n * The \"section / group label\" row is reimplemented independently in three sibling surfaces, each\n * reaching the same 32px row by a different mechanism \u2014 keep all four in sync (PUI-18609):\n * - ds-form-combobox \u2192 src/parts/Section.tsx (height via label padding + b3-strong line-height)\n * - ds-form-layout-autocomplete \u2192 src/parts/Section.tsx (own StyledSectionWrapper min-height)\n * - ds-menu-button \u2192 parts/DSMenuItemRendererFactory (StyledGroupLabelWrapper min-height)\n * The duplication is intentional (different semantics + slot namespaces) and tracked in each\n * package's KNOWN_INTENTIONAL_DEVIATIONS.md.\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 min-height: ${MENU_ITEM_ROW_HEIGHT};\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { slotObjectToDataTestIds } from "@elliemae/ds-system";
|
|
2
3
|
const DSMenuItemName = "DSMenuitem";
|
|
3
4
|
const DSMenuItemSlots = {
|
|
4
5
|
MENU_ITEM_WRAPPER: "menu-item-wrapper",
|
|
@@ -14,7 +15,9 @@ const DSMenuItemSlots = {
|
|
|
14
15
|
MENU_ITEM_VERTICAL_SEPARATOR: "menu-item-vertical-separator",
|
|
15
16
|
MENU_ITEM_CONTENT_WRAPPER: "menu-item-content-wrapper"
|
|
16
17
|
};
|
|
18
|
+
const DSMenuItemDataTestId = slotObjectToDataTestIds(DSMenuItemName, DSMenuItemSlots);
|
|
17
19
|
export {
|
|
20
|
+
DSMenuItemDataTestId,
|
|
18
21
|
DSMenuItemName,
|
|
19
22
|
DSMenuItemSlots
|
|
20
23
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
|
|
4
|
-
"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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"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.\nimport { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\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\nexport const DSMenuItemDataTestId = slotObjectToDataTestIds(DSMenuItemName, DSMenuItemSlots);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACKvB,SAAS,+BAA+B;AAEjC,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;AAEO,MAAM,uBAAuB,wBAAwB,gBAAgB,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
DSMenuItemsCommonsPropTypes,
|
|
4
4
|
DSMenuItemsCommonsDefaultProps
|
|
5
5
|
} from "./react-desc-prop-types.js";
|
|
6
|
-
import { DSMenuItemName, DSMenuItemSlots } from "./constants/index.js";
|
|
6
|
+
import { DSMenuItemName, DSMenuItemSlots, DSMenuItemDataTestId } from "./constants/index.js";
|
|
7
7
|
import {
|
|
8
8
|
StyledGlobalMenuItemWrapper,
|
|
9
9
|
StyleMenuItemLabel,
|
|
@@ -19,6 +19,7 @@ import {
|
|
|
19
19
|
StyledContentWrapper
|
|
20
20
|
} from "./styled.js";
|
|
21
21
|
export {
|
|
22
|
+
DSMenuItemDataTestId,
|
|
22
23
|
DSMenuItemName,
|
|
23
24
|
DSMenuItemSlots,
|
|
24
25
|
DSMenuItemsCommonsDefaultProps,
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
|
|
4
|
-
"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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB,
|
|
4
|
+
"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, DSMenuItemDataTestId } 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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIvB;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB,iBAAiB,4BAA4B;AAEtE;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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
|
+
import { DSTypography } from "@elliemae/ds-typography";
|
|
4
5
|
import { DSMenuItemName, DSMenuItemSlots } from "./constants/index.js";
|
|
6
|
+
const MENU_ITEM_ROW_HEIGHT = "32px";
|
|
5
7
|
const borderOutside = () => css`
|
|
6
8
|
:after {
|
|
7
9
|
display: block;
|
|
@@ -18,12 +20,24 @@ const borderOutside = () => css`
|
|
|
18
20
|
`;
|
|
19
21
|
const disabledOption = () => css`
|
|
20
22
|
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
23
|
+
/** Checkbox label has its own color rule (n700 per checkbox spec) so the wrapper's color does not cascade through it
|
|
24
|
+
* The multi-select menu item needs explicit label overrides in both non-hover and hover states.
|
|
25
|
+
*/
|
|
26
|
+
label {
|
|
27
|
+
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
28
|
+
}
|
|
21
29
|
:hover {
|
|
22
30
|
color: ${({ theme }) => theme.colors.neutral[600]};
|
|
23
|
-
// lets target the label to controll the checkbox for multi select menu item.
|
|
24
31
|
label {
|
|
25
32
|
color: ${({ theme }) => theme.colors.neutral[600]};
|
|
26
33
|
}
|
|
34
|
+
/** single menu item spec:
|
|
35
|
+
* aria-disabled-selected + hover → checkmark icon goes from neutral-400 to neutral-500
|
|
36
|
+
* ds-icons sets svg fill via !important internally — override with same flag at higher specificity
|
|
37
|
+
*/
|
|
38
|
+
svg {
|
|
39
|
+
fill: ${({ theme }) => theme.colors.neutral[500]} !important;
|
|
40
|
+
}
|
|
27
41
|
}
|
|
28
42
|
cursor: not-allowed;
|
|
29
43
|
* {
|
|
@@ -35,7 +49,7 @@ const StyledGlobalMenuItemWrapper = styled("li", {
|
|
|
35
49
|
slot: DSMenuItemSlots.MENU_ITEM_WRAPPER
|
|
36
50
|
})`
|
|
37
51
|
cursor: pointer;
|
|
38
|
-
min-height:
|
|
52
|
+
min-height: ${MENU_ITEM_ROW_HEIGHT};
|
|
39
53
|
|
|
40
54
|
padding-left: 16px;
|
|
41
55
|
padding-right: 16px;
|
|
@@ -50,7 +64,7 @@ const StyledGlobalMenuItemWrapper = styled("li", {
|
|
|
50
64
|
}};
|
|
51
65
|
|
|
52
66
|
${(props) => {
|
|
53
|
-
if (props.disabled || props.applyAriaDisabled) return disabledOption();
|
|
67
|
+
if (props.disabled || props.applyAriaDisabled || props.readOnly) return disabledOption();
|
|
54
68
|
return "";
|
|
55
69
|
}};
|
|
56
70
|
|
|
@@ -76,9 +90,8 @@ const StyledGlobalMenuItemWrapper = styled("li", {
|
|
|
76
90
|
|
|
77
91
|
${xStyledCommonProps}
|
|
78
92
|
`;
|
|
79
|
-
const StyleMenuItemLabel = styled(
|
|
93
|
+
const StyleMenuItemLabel = styled(DSTypography, { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`
|
|
80
94
|
padding: 8px 0;
|
|
81
|
-
font-size: 1rem;
|
|
82
95
|
`;
|
|
83
96
|
const StyleMenuItemSecondaryLabel = styled("span", {
|
|
84
97
|
name: DSMenuItemName,
|
|
@@ -131,17 +144,17 @@ const StyledSeparatorWrapper = styled("li", {
|
|
|
131
144
|
|
|
132
145
|
${xStyledCommonProps}
|
|
133
146
|
`;
|
|
134
|
-
const StyledGroupLabel = styled(
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
147
|
+
const StyledGroupLabel = styled(DSTypography, {
|
|
148
|
+
name: DSMenuItemName,
|
|
149
|
+
slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL
|
|
150
|
+
})``;
|
|
138
151
|
const StyledSectionWrapper = styled("li", {
|
|
139
152
|
name: DSMenuItemName,
|
|
140
153
|
slot: DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER
|
|
141
154
|
})`
|
|
142
155
|
list-style: none;
|
|
143
156
|
padding: 0px 16px;
|
|
144
|
-
min-height:
|
|
157
|
+
min-height: ${MENU_ITEM_ROW_HEIGHT};
|
|
145
158
|
display: flex;
|
|
146
159
|
align-items: center;
|
|
147
160
|
|
package/dist/esm/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
|
|
4
|
-
"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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD,SAAS,YAAY;AACrB,SAAS,gBAAgB,uBAAuB;
|
|
4
|
+
"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 { DSTypography } from '@elliemae/ds-typography';\nimport { DSMenuItemName, DSMenuItemSlots } from './constants/index.js';\n\n/**\n * Single source for the menu list row height. The option row and the group-label/section row\n * are peers and must stay the same height \u2014 consuming one value keeps them aligned and prevents\n * the kind of drift fixed in PUI-18609 (group label was 24 while options were 32).\n */\nconst MENU_ITEM_ROW_HEIGHT = '32px';\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 /** Checkbox label has its own color rule (n700 per checkbox spec) so the wrapper's color does not cascade through it\n * The multi-select menu item needs explicit label overrides in both non-hover and hover states. \n */\n label {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n :hover {\n color: ${({ theme }) => theme.colors.neutral[600]};\n label {\n color: ${({ theme }) => theme.colors.neutral[600]};\n }\n /** single menu item spec: \n * aria-disabled-selected + hover \u2192 checkmark icon goes from neutral-400 to neutral-500\n * ds-icons sets svg fill via !important internally \u2014 override with same flag at higher specificity\n */\n svg {\n fill: ${({ theme }) => theme.colors.neutral[500]} !important;\n }\n }\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n`;\n\ninterface StyledGlobalMenuItemWrapperT extends LayoutProps, SizingProps, PositionProps, SpaceProps {\n isSelected?: boolean;\n isActive?: boolean;\n disabled?: boolean;\n applyAriaDisabled?: boolean;\n readOnly?: 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: ${MENU_ITEM_ROW_HEIGHT};\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.isActive) return borderOutside();\n return '';\n }};\n\n ${(props) => {\n if (props.disabled || props.applyAriaDisabled || props.readOnly) return disabledOption();\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 if (!props.disabled) return borderOutside();\n return '';\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) =>\n (!props.disabled || !props.applyAriaDisabled || !props.readOnly) && props.theme.colors.brand[200]};\n }\n\n &[aria-disabled='true'] {\n ${disabledOption()}\n }\n\n ${xStyledCommonProps}\n`;\n\nexport const StyleMenuItemLabel = styled(DSTypography, { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`\n padding: 8px 0;\n`;\n\nexport const StyleMenuItemSecondaryLabel = styled('span', {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_SECONDARY_LABEL,\n})<{ disabled?: boolean }>`\n padding: 8px 0;\n font-size: 0.8462rem;\n font-style: italic;\n color: ${(props) => (props.disabled ? props.theme.colors.neutral['500'] : props.theme.colors.brand['800'])};\n text-align: right;\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; applyAriaDisabled: 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 || props.applyAriaDisabled ? '' : 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(DSTypography, {\n name: DSMenuItemName,\n slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL,\n})``;\n\n/**\n * The \"section / group label\" row is reimplemented independently in three sibling surfaces, each\n * reaching the same 32px row by a different mechanism \u2014 keep all four in sync (PUI-18609):\n * - ds-form-combobox \u2192 src/parts/Section.tsx (height via label padding + b3-strong line-height)\n * - ds-form-layout-autocomplete \u2192 src/parts/Section.tsx (own StyledSectionWrapper min-height)\n * - ds-menu-button \u2192 parts/DSMenuItemRendererFactory (StyledGroupLabelWrapper min-height)\n * The duplication is intentional (different semantics + slot namespaces) and tracked in each\n * package's KNOWN_INTENTIONAL_DEVIATIONS.md.\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 min-height: ${MENU_ITEM_ROW_HEIGHT};\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -13,3 +13,17 @@ export declare const DSMenuItemSlots: {
|
|
|
13
13
|
readonly MENU_ITEM_VERTICAL_SEPARATOR: "menu-item-vertical-separator";
|
|
14
14
|
readonly MENU_ITEM_CONTENT_WRAPPER: "menu-item-content-wrapper";
|
|
15
15
|
};
|
|
16
|
+
export declare const DSMenuItemDataTestId: {
|
|
17
|
+
readonly MENU_ITEM_WRAPPER: "ds-menuitem-menu-item-wrapper";
|
|
18
|
+
readonly MENU_ITEM_LABEL: "ds-menuitem-menu-item-label";
|
|
19
|
+
readonly MENU_ITEM_SECONDARY_LABEL: "ds-menuitem-menu-item-secondary-label";
|
|
20
|
+
readonly MENU_ITEM_ICON: "ds-menuitem-menu-item-icon";
|
|
21
|
+
readonly MENU_ITEM_ELLIPSIS_BUTTON: "ds-menuitem-menu-item-ellipsis-button";
|
|
22
|
+
readonly MENU_ITEM_CONTENT: "ds-menuitem-menu-item-content";
|
|
23
|
+
readonly MENU_ITEM_SEPARATOR: "ds-menuitem-menu-item-separator";
|
|
24
|
+
readonly MENU_ITEM_SEPARATOR_WRAPPER: "ds-menuitem-menu-item-separator-wrapper";
|
|
25
|
+
readonly MENU_ITEM_GROUP_LABEL: "ds-menuitem-menu-item-group-label";
|
|
26
|
+
readonly MENU_ITEM_SECTION_WRAPPER: "ds-menuitem-menu-item-section-wrapper";
|
|
27
|
+
readonly MENU_ITEM_VERTICAL_SEPARATOR: "ds-menuitem-menu-item-vertical-separator";
|
|
28
|
+
readonly MENU_ITEM_CONTENT_WRAPPER: "ds-menuitem-menu-item-content-wrapper";
|
|
29
|
+
};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { type DSMenuItemsCommonsT, DSMenuItemsCommonsPropTypes, DSMenuItemsCommonsDefaultProps, } from './react-desc-prop-types.js';
|
|
2
|
-
export { DSMenuItemName, DSMenuItemSlots } from './constants/index.js';
|
|
2
|
+
export { DSMenuItemName, DSMenuItemSlots, DSMenuItemDataTestId } from './constants/index.js';
|
|
3
3
|
export { StyledGlobalMenuItemWrapper, StyleMenuItemLabel, StyleMenuItemSecondaryLabel, StyledIconContainer, StyledEllipsisButton, StyledItemContent, StyledSeparator, StyledSeparatorWrapper, StyledGroupLabel, StyledSectionWrapper, StyledVerticalSeparator, StyledContentWrapper, } from './styled.js';
|
package/dist/types/styled.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ interface StyledGlobalMenuItemWrapperT extends LayoutProps, SizingProps, Positio
|
|
|
7
7
|
readOnly?: boolean;
|
|
8
8
|
}
|
|
9
9
|
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>;
|
|
10
|
-
export declare const StyleMenuItemLabel: import("styled-components").StyledComponent<"
|
|
10
|
+
export declare const StyleMenuItemLabel: import("styled-components").StyledComponent<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>>, never>;
|
|
11
11
|
export declare const StyleMenuItemSecondaryLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, {
|
|
12
12
|
disabled?: boolean;
|
|
13
13
|
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
|
|
@@ -19,7 +19,16 @@ export declare const StyledEllipsisButton: import("styled-components").StyledCom
|
|
|
19
19
|
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>;
|
|
20
20
|
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>;
|
|
21
21
|
export declare const StyledSeparatorWrapper: import("styled-components").StyledComponent<"li", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"li">, never>;
|
|
22
|
-
export declare const StyledGroupLabel: import("styled-components").StyledComponent<"
|
|
22
|
+
export declare const StyledGroupLabel: import("styled-components").StyledComponent<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>>, never>;
|
|
23
|
+
/**
|
|
24
|
+
* The "section / group label" row is reimplemented independently in three sibling surfaces, each
|
|
25
|
+
* reaching the same 32px row by a different mechanism — keep all four in sync (PUI-18609):
|
|
26
|
+
* - ds-form-combobox → src/parts/Section.tsx (height via label padding + b3-strong line-height)
|
|
27
|
+
* - ds-form-layout-autocomplete → src/parts/Section.tsx (own StyledSectionWrapper min-height)
|
|
28
|
+
* - ds-menu-button → parts/DSMenuItemRendererFactory (StyledGroupLabelWrapper min-height)
|
|
29
|
+
* The duplication is intentional (different semantics + slot namespaces) and tracked in each
|
|
30
|
+
* package's KNOWN_INTENTIONAL_DEVIATIONS.md.
|
|
31
|
+
*/
|
|
23
32
|
export declare const StyledSectionWrapper: import("styled-components").StyledComponent<"li", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"li">, never>;
|
|
24
33
|
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>;
|
|
25
34
|
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>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-menu-items-commons",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.41",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Menu Items Commons",
|
|
6
6
|
"files": [
|
|
@@ -36,21 +36,22 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-grid": "3.70.0-next.
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
39
|
+
"@elliemae/ds-grid": "3.70.0-next.41",
|
|
40
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.41",
|
|
41
|
+
"@elliemae/ds-system": "3.70.0-next.41",
|
|
42
|
+
"@elliemae/ds-typography": "3.70.0-next.41"
|
|
42
43
|
},
|
|
43
44
|
"devDependencies": {
|
|
44
45
|
"jest": "^30.0.0",
|
|
45
|
-
"lodash-es": "^4.
|
|
46
|
+
"lodash-es": "^4.18.1",
|
|
46
47
|
"styled-components": "~5.3.9",
|
|
47
|
-
"@elliemae/ds-monorepo-devops": "3.70.0-next.
|
|
48
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.41"
|
|
48
49
|
},
|
|
49
50
|
"peerDependencies": {
|
|
50
51
|
"@testing-library/jest-dom": "^6.6.3",
|
|
51
52
|
"@testing-library/react": "^16.0.1",
|
|
52
53
|
"@testing-library/user-event": "~14.6.1",
|
|
53
|
-
"lodash-es": "^4.
|
|
54
|
+
"lodash-es": "^4.18.1",
|
|
54
55
|
"react": "^18.3.1",
|
|
55
56
|
"react-dom": "^18.3.1",
|
|
56
57
|
"styled-components": "~5.3.9"
|