@elliemae/ds-menu-items-commons 3.50.1-next.9 → 3.51.0-beta.2
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 +1 -1
- package/dist/cjs/constants/index.js.map +1 -1
- package/dist/cjs/styled.js +22 -4
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/constants/index.js +1 -1
- package/dist/esm/constants/index.js.map +1 -1
- package/dist/esm/styled.js +22 -4
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/constants/index.d.ts +1 -1
- package/package.json +12 -12
|
@@ -33,7 +33,7 @@ __export(constants_exports, {
|
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(constants_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
|
-
const DSMenuItemName = "
|
|
36
|
+
const DSMenuItemName = "DSMenuitem";
|
|
37
37
|
const DSMenuItemSlots = {
|
|
38
38
|
MENU_ITEM_WRAPPER: "menu-item-wrapper",
|
|
39
39
|
MENU_ITEM_LABEL: "menu-item-label",
|
|
@@ -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 = '
|
|
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
5
|
"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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -60,9 +60,17 @@ const borderOutside = () => import_ds_system.css`
|
|
|
60
60
|
z-index: 7;
|
|
61
61
|
}
|
|
62
62
|
`;
|
|
63
|
-
const disabledOption = () => import_ds_system.css`
|
|
63
|
+
const disabledOption = (args) => import_ds_system.css`
|
|
64
64
|
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
65
|
-
background-color: ${({ theme }) =>
|
|
65
|
+
background-color: ${({ theme }) => {
|
|
66
|
+
if (args?.ariaDisabled) {
|
|
67
|
+
if (args?.isActive) {
|
|
68
|
+
return theme.colors.brand[200];
|
|
69
|
+
}
|
|
70
|
+
return theme.colors.neutral["050"];
|
|
71
|
+
}
|
|
72
|
+
return theme.colors.neutral["080"];
|
|
73
|
+
}};
|
|
66
74
|
cursor: not-allowed;
|
|
67
75
|
* {
|
|
68
76
|
cursor: not-allowed;
|
|
@@ -83,11 +91,15 @@ const StyledGlobalMenuItemWrapper = (0, import_ds_system.styled)("li", {
|
|
|
83
91
|
position: relative;
|
|
84
92
|
|
|
85
93
|
${(props) => {
|
|
86
|
-
if (props.disabled || props.applyAriaDisabled) return disabledOption();
|
|
87
94
|
if (props.isActive) return borderOutside();
|
|
88
95
|
return "";
|
|
89
96
|
}};
|
|
90
97
|
|
|
98
|
+
${(props) => {
|
|
99
|
+
if (props.disabled || props.applyAriaDisabled) return disabledOption();
|
|
100
|
+
return "";
|
|
101
|
+
}};
|
|
102
|
+
|
|
91
103
|
background-color: ${(props) => props.isActive ? props.theme.colors.brand[200] : props.theme.colors.neutral["000"]};
|
|
92
104
|
|
|
93
105
|
// focus style for standalone version
|
|
@@ -105,7 +117,13 @@ const StyledGlobalMenuItemWrapper = (0, import_ds_system.styled)("li", {
|
|
|
105
117
|
}
|
|
106
118
|
|
|
107
119
|
&[aria-disabled='true'] {
|
|
108
|
-
${disabledOption()}
|
|
120
|
+
${({ applyAriaDisabled, isActive }) => disabledOption({ ariaDisabled: applyAriaDisabled, isActive })}
|
|
121
|
+
&[aria-selected='true'] {
|
|
122
|
+
background-color: ${({ theme, isActive }) => isActive ? theme.colors.brand[200] : theme.colors.neutral["000"]};
|
|
123
|
+
}
|
|
124
|
+
&:hover {
|
|
125
|
+
background-color: ${({ applyAriaDisabled, theme }) => applyAriaDisabled && theme.colors.brand[200]};
|
|
126
|
+
}
|
|
109
127
|
}
|
|
110
128
|
${import_ds_system.xStyledCommonProps}
|
|
111
129
|
`;
|
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 background-color: ${({ theme }) => theme.colors.neutral['
|
|
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;AAEhD,MAAM,gBAAgB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASJ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAM9D,MAAM,iBAAiB,
|
|
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 = (args?: { ariaDisabled?: boolean; isActive?: boolean }) => css`\n color: ${({ theme }) => theme.colors.neutral[500]};\n background-color: ${({ theme }) => {\n if (args?.ariaDisabled) {\n if (args?.isActive) {\n return theme.colors.brand[200];\n }\n return theme.colors.neutral['050'];\n }\n return theme.colors.neutral['080'];\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}\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.isActive) return borderOutside();\n return '';\n }};\n\n ${(props) => {\n if (props.disabled || props.applyAriaDisabled) 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) => (!props.disabled || !props.applyAriaDisabled) && props.theme.colors.brand[200]};\n }\n\n &[aria-disabled='true'] {\n ${({ applyAriaDisabled, isActive }) => disabledOption({ ariaDisabled: applyAriaDisabled, isActive })}\n &[aria-selected='true'] {\n background-color: ${({ theme, isActive }) => (isActive ? theme.colors.brand[200] : theme.colors.neutral['000'])};\n }\n &:hover {\n background-color: ${({ applyAriaDisabled, theme }) => applyAriaDisabled && theme.colors.brand[200]};\n }\n }\n ${xStyledCommonProps}\n`;\n\nexport const StyleMenuItemLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`\n padding: 8px 0;\n font-size: 1rem;\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('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL })`\n font-size: 1rem;\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 min-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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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 = '
|
|
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
5
|
"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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
|
@@ -16,9 +16,17 @@ const borderOutside = () => css`
|
|
|
16
16
|
z-index: 7;
|
|
17
17
|
}
|
|
18
18
|
`;
|
|
19
|
-
const disabledOption = () => css`
|
|
19
|
+
const disabledOption = (args) => css`
|
|
20
20
|
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
21
|
-
background-color: ${({ theme }) =>
|
|
21
|
+
background-color: ${({ theme }) => {
|
|
22
|
+
if (args?.ariaDisabled) {
|
|
23
|
+
if (args?.isActive) {
|
|
24
|
+
return theme.colors.brand[200];
|
|
25
|
+
}
|
|
26
|
+
return theme.colors.neutral["050"];
|
|
27
|
+
}
|
|
28
|
+
return theme.colors.neutral["080"];
|
|
29
|
+
}};
|
|
22
30
|
cursor: not-allowed;
|
|
23
31
|
* {
|
|
24
32
|
cursor: not-allowed;
|
|
@@ -39,11 +47,15 @@ const StyledGlobalMenuItemWrapper = styled("li", {
|
|
|
39
47
|
position: relative;
|
|
40
48
|
|
|
41
49
|
${(props) => {
|
|
42
|
-
if (props.disabled || props.applyAriaDisabled) return disabledOption();
|
|
43
50
|
if (props.isActive) return borderOutside();
|
|
44
51
|
return "";
|
|
45
52
|
}};
|
|
46
53
|
|
|
54
|
+
${(props) => {
|
|
55
|
+
if (props.disabled || props.applyAriaDisabled) return disabledOption();
|
|
56
|
+
return "";
|
|
57
|
+
}};
|
|
58
|
+
|
|
47
59
|
background-color: ${(props) => props.isActive ? props.theme.colors.brand[200] : props.theme.colors.neutral["000"]};
|
|
48
60
|
|
|
49
61
|
// focus style for standalone version
|
|
@@ -61,7 +73,13 @@ const StyledGlobalMenuItemWrapper = styled("li", {
|
|
|
61
73
|
}
|
|
62
74
|
|
|
63
75
|
&[aria-disabled='true'] {
|
|
64
|
-
${disabledOption()}
|
|
76
|
+
${({ applyAriaDisabled, isActive }) => disabledOption({ ariaDisabled: applyAriaDisabled, isActive })}
|
|
77
|
+
&[aria-selected='true'] {
|
|
78
|
+
background-color: ${({ theme, isActive }) => isActive ? theme.colors.brand[200] : theme.colors.neutral["000"]};
|
|
79
|
+
}
|
|
80
|
+
&:hover {
|
|
81
|
+
background-color: ${({ applyAriaDisabled, theme }) => applyAriaDisabled && theme.colors.brand[200]};
|
|
82
|
+
}
|
|
65
83
|
}
|
|
66
84
|
${xStyledCommonProps}
|
|
67
85
|
`;
|
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 background-color: ${({ theme }) => theme.colors.neutral['
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD,SAAS,YAAY;AACrB,SAAS,gBAAgB,uBAAuB;AAEhD,MAAM,gBAAgB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASJ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAM9D,MAAM,iBAAiB,
|
|
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 = (args?: { ariaDisabled?: boolean; isActive?: boolean }) => css`\n color: ${({ theme }) => theme.colors.neutral[500]};\n background-color: ${({ theme }) => {\n if (args?.ariaDisabled) {\n if (args?.isActive) {\n return theme.colors.brand[200];\n }\n return theme.colors.neutral['050'];\n }\n return theme.colors.neutral['080'];\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}\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.isActive) return borderOutside();\n return '';\n }};\n\n ${(props) => {\n if (props.disabled || props.applyAriaDisabled) 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) => (!props.disabled || !props.applyAriaDisabled) && props.theme.colors.brand[200]};\n }\n\n &[aria-disabled='true'] {\n ${({ applyAriaDisabled, isActive }) => disabledOption({ ariaDisabled: applyAriaDisabled, isActive })}\n &[aria-selected='true'] {\n background-color: ${({ theme, isActive }) => (isActive ? theme.colors.brand[200] : theme.colors.neutral['000'])};\n }\n &:hover {\n background-color: ${({ applyAriaDisabled, theme }) => applyAriaDisabled && theme.colors.brand[200]};\n }\n }\n ${xStyledCommonProps}\n`;\n\nexport const StyleMenuItemLabel = styled('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_LABEL })`\n padding: 8px 0;\n font-size: 1rem;\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('span', { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL })`\n font-size: 1rem;\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 min-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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-menu-items-commons",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.51.0-beta.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Menu Items Commons",
|
|
6
6
|
"files": [
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"url": "https://git.elliemae.io/platform-ui/dimsum.git"
|
|
26
26
|
},
|
|
27
27
|
"engines": {
|
|
28
|
-
"pnpm": ">=
|
|
29
|
-
"node": ">=
|
|
28
|
+
"pnpm": ">=9",
|
|
29
|
+
"node": ">=22"
|
|
30
30
|
},
|
|
31
31
|
"author": "ICE MT",
|
|
32
32
|
"jestSonar": {
|
|
@@ -37,23 +37,23 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@xstyled/styled-components": "~3.7.3",
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-system": "3.
|
|
40
|
+
"@elliemae/ds-props-helpers": "3.51.0-beta.2",
|
|
41
|
+
"@elliemae/ds-grid": "3.51.0-beta.2",
|
|
42
|
+
"@elliemae/ds-system": "3.51.0-beta.2"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"jest": "~29.7.0",
|
|
46
46
|
"lodash": "^4.17.21",
|
|
47
47
|
"styled-components": "~5.3.9",
|
|
48
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
48
|
+
"@elliemae/ds-monorepo-devops": "3.51.0-beta.2"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
|
-
"@testing-library/jest-dom": "^
|
|
52
|
-
"@testing-library/react": "^
|
|
53
|
-
"@testing-library/user-event": "~
|
|
51
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
52
|
+
"@testing-library/react": "^16.0.1",
|
|
53
|
+
"@testing-library/user-event": "~14.5.2",
|
|
54
54
|
"lodash": "^4.17.21",
|
|
55
|
-
"react": "^
|
|
56
|
-
"react-dom": "^
|
|
55
|
+
"react": "^18.3.1",
|
|
56
|
+
"react-dom": "^18.3.1",
|
|
57
57
|
"styled-components": "~5.3.9"
|
|
58
58
|
},
|
|
59
59
|
"publishConfig": {
|