@elliemae/ds-menu-items-commons 3.45.1 → 3.46.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/styled.js +6 -9
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/styled.js +6 -9
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/styled.d.ts +3 -1
- package/package.json +5 -5
package/dist/cjs/styled.js
CHANGED
|
@@ -93,8 +93,9 @@ const StyledGlobalMenuItemWrapper = (0, import_ds_system.styled)("li", {
|
|
|
93
93
|
// focus style for standalone version
|
|
94
94
|
&:focus {
|
|
95
95
|
${(props) => {
|
|
96
|
-
if (props.disabled
|
|
97
|
-
return borderOutside();
|
|
96
|
+
if (props.disabled) return disabledOption();
|
|
97
|
+
if (!props.disabled) return borderOutside();
|
|
98
|
+
return "";
|
|
98
99
|
}};
|
|
99
100
|
outline: none;
|
|
100
101
|
background-color: ${(props) => !props.disabled ? props.theme.colors.brand[200] : props.theme.colors.neutral["000"]};
|
|
@@ -104,12 +105,7 @@ const StyledGlobalMenuItemWrapper = (0, import_ds_system.styled)("li", {
|
|
|
104
105
|
}
|
|
105
106
|
|
|
106
107
|
&[aria-disabled='true'] {
|
|
107
|
-
|
|
108
|
-
background-color: ${({ theme }) => theme.colors.neutral["000"]};
|
|
109
|
-
cursor: not-allowed;
|
|
110
|
-
* {
|
|
111
|
-
cursor: not-allowed;
|
|
112
|
-
}
|
|
108
|
+
${disabledOption()}
|
|
113
109
|
}
|
|
114
110
|
${import_ds_system.xStyledCommonProps}
|
|
115
111
|
`;
|
|
@@ -124,7 +120,8 @@ const StyleMenuItemSecondaryLabel = (0, import_ds_system.styled)("span", {
|
|
|
124
120
|
padding: 8px 0;
|
|
125
121
|
font-size: 0.8462rem;
|
|
126
122
|
font-style: italic;
|
|
127
|
-
color: brand
|
|
123
|
+
color: ${(props) => props.disabled ? props.theme.colors.neutral["500"] : props.theme.colors.brand["800"]};
|
|
124
|
+
text-align: right;
|
|
128
125
|
`;
|
|
129
126
|
const StyledIconContainer = (0, import_ds_system.styled)("div", { name: import_constants.DSMenuItemName, slot: import_constants.DSMenuItemSlots.MENU_ITEM_ICON })`
|
|
130
127
|
width: 25px;
|
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['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 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.disabled || props.applyAriaDisabled) 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
|
|
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,MAAM;AAAA,WAClB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,sBAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAczD,MAAM,kCAA8B,yBAAO,MAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWG,CAAC,UAAU;AACX,MAAI,MAAM,YAAY,MAAM,kBAAmB,QAAO,eAAe;AACrE,MAAI,MAAM,SAAU,QAAO,cAAc;AACzC,SAAO;AACT,CAAC;AAAA;AAAA,sBAEmB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAE;AAAA;AAAA;AAAA;AAAA,MAI/G,CAAC,UAAU;AACX,MAAI,MAAM,
|
|
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['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 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.disabled || props.applyAriaDisabled) 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 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 ${disabledOption()}\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
|
}
|
package/dist/esm/styled.js
CHANGED
|
@@ -49,8 +49,9 @@ const StyledGlobalMenuItemWrapper = styled("li", {
|
|
|
49
49
|
// focus style for standalone version
|
|
50
50
|
&:focus {
|
|
51
51
|
${(props) => {
|
|
52
|
-
if (props.disabled
|
|
53
|
-
return borderOutside();
|
|
52
|
+
if (props.disabled) return disabledOption();
|
|
53
|
+
if (!props.disabled) return borderOutside();
|
|
54
|
+
return "";
|
|
54
55
|
}};
|
|
55
56
|
outline: none;
|
|
56
57
|
background-color: ${(props) => !props.disabled ? props.theme.colors.brand[200] : props.theme.colors.neutral["000"]};
|
|
@@ -60,12 +61,7 @@ const StyledGlobalMenuItemWrapper = styled("li", {
|
|
|
60
61
|
}
|
|
61
62
|
|
|
62
63
|
&[aria-disabled='true'] {
|
|
63
|
-
|
|
64
|
-
background-color: ${({ theme }) => theme.colors.neutral["000"]};
|
|
65
|
-
cursor: not-allowed;
|
|
66
|
-
* {
|
|
67
|
-
cursor: not-allowed;
|
|
68
|
-
}
|
|
64
|
+
${disabledOption()}
|
|
69
65
|
}
|
|
70
66
|
${xStyledCommonProps}
|
|
71
67
|
`;
|
|
@@ -80,7 +76,8 @@ const StyleMenuItemSecondaryLabel = styled("span", {
|
|
|
80
76
|
padding: 8px 0;
|
|
81
77
|
font-size: 0.8462rem;
|
|
82
78
|
font-style: italic;
|
|
83
|
-
color: brand
|
|
79
|
+
color: ${(props) => props.disabled ? props.theme.colors.neutral["500"] : props.theme.colors.brand["800"]};
|
|
80
|
+
text-align: right;
|
|
84
81
|
`;
|
|
85
82
|
const StyledIconContainer = styled("div", { name: DSMenuItemName, slot: DSMenuItemSlots.MENU_ITEM_ICON })`
|
|
86
83
|
width: 25px;
|
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['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 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.disabled || props.applyAriaDisabled) 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
|
|
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,MAAM;AAAA,WAClB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,sBAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAczD,MAAM,8BAA8B,OAAO,MAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWG,CAAC,UAAU;AACX,MAAI,MAAM,YAAY,MAAM,kBAAmB,QAAO,eAAe;AACrE,MAAI,MAAM,SAAU,QAAO,cAAc;AACzC,SAAO;AACT,CAAC;AAAA;AAAA,sBAEmB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAE;AAAA;AAAA;AAAA;AAAA,MAI/G,CAAC,UAAU;AACX,MAAI,MAAM,
|
|
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['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 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.disabled || props.applyAriaDisabled) 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 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 ${disabledOption()}\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/dist/types/styled.d.ts
CHANGED
|
@@ -8,7 +8,9 @@ interface StyledGlobalMenuItemWrapperT extends LayoutProps, SizingProps, Positio
|
|
|
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
10
|
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>;
|
|
11
|
-
export declare const StyleMenuItemSecondaryLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme,
|
|
11
|
+
export declare const StyleMenuItemSecondaryLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, {
|
|
12
|
+
disabled?: boolean | undefined;
|
|
13
|
+
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
|
|
12
14
|
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>;
|
|
13
15
|
export declare const StyledEllipsisButton: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
|
|
14
16
|
disabled: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-menu-items-commons",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.46.0-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Menu Items Commons",
|
|
6
6
|
"files": [
|
|
@@ -37,14 +37,14 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@xstyled/styled-components": "~3.6.0",
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-props-helpers": "3.46.0-rc.1",
|
|
41
|
+
"@elliemae/ds-system": "3.46.0-rc.1",
|
|
42
|
+
"@elliemae/ds-grid": "3.46.0-rc.1"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"lodash": "^4.17.21",
|
|
46
46
|
"styled-components": "~5.3.9",
|
|
47
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
47
|
+
"@elliemae/ds-monorepo-devops": "3.46.0-rc.1"
|
|
48
48
|
},
|
|
49
49
|
"peerDependencies": {
|
|
50
50
|
"@testing-library/jest-dom": "~5.16.4",
|