@elliemae/ds-menu-items-commons 3.70.0-next.26 → 3.70.0-next.28
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 +18 -6
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/styled.js +18 -6
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/styled.d.ts +1 -1
- package/package.json +8 -8
package/dist/cjs/styled.js
CHANGED
|
@@ -63,12 +63,24 @@ const borderOutside = () => import_ds_system.css`
|
|
|
63
63
|
`;
|
|
64
64
|
const disabledOption = () => import_ds_system.css`
|
|
65
65
|
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
66
|
+
/** Checkbox label has its own color rule (n700 per checkbox spec) so the wrapper's color does not cascade through it
|
|
67
|
+
* The multi-select menu item needs explicit label overrides in both non-hover and hover states.
|
|
68
|
+
*/
|
|
69
|
+
label {
|
|
70
|
+
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
71
|
+
}
|
|
66
72
|
:hover {
|
|
67
73
|
color: ${({ theme }) => theme.colors.neutral[600]};
|
|
68
|
-
// lets target the label to controll the checkbox for multi select menu item.
|
|
69
74
|
label {
|
|
70
75
|
color: ${({ theme }) => theme.colors.neutral[600]};
|
|
71
76
|
}
|
|
77
|
+
/** single menu item spec:
|
|
78
|
+
* aria-disabled-selected + hover → checkmark icon goes from neutral-400 to neutral-500
|
|
79
|
+
* ds-icons sets svg fill via !important internally — override with same flag at higher specificity
|
|
80
|
+
*/
|
|
81
|
+
svg {
|
|
82
|
+
fill: ${({ theme }) => theme.colors.neutral[500]} !important;
|
|
83
|
+
}
|
|
72
84
|
}
|
|
73
85
|
cursor: not-allowed;
|
|
74
86
|
* {
|
|
@@ -95,7 +107,7 @@ const StyledGlobalMenuItemWrapper = (0, import_ds_system.styled)("li", {
|
|
|
95
107
|
}};
|
|
96
108
|
|
|
97
109
|
${(props) => {
|
|
98
|
-
if (props.disabled || props.applyAriaDisabled) return disabledOption();
|
|
110
|
+
if (props.disabled || props.applyAriaDisabled || props.readOnly) return disabledOption();
|
|
99
111
|
return "";
|
|
100
112
|
}};
|
|
101
113
|
|
|
@@ -175,10 +187,10 @@ const StyledSeparatorWrapper = (0, import_ds_system.styled)("li", {
|
|
|
175
187
|
|
|
176
188
|
${import_ds_system.xStyledCommonProps}
|
|
177
189
|
`;
|
|
178
|
-
const StyledGroupLabel = (0, import_ds_system.styled)(
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
190
|
+
const StyledGroupLabel = (0, import_ds_system.styled)(import_ds_typography.DSTypography, {
|
|
191
|
+
name: import_constants.DSMenuItemName,
|
|
192
|
+
slot: import_constants.DSMenuItemSlots.MENU_ITEM_GROUP_LABEL
|
|
193
|
+
})``;
|
|
182
194
|
const StyledSectionWrapper = (0, import_ds_system.styled)("li", {
|
|
183
195
|
name: import_constants.DSMenuItemName,
|
|
184
196
|
slot: import_constants.DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER
|
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 { DSTypography } from '@elliemae/ds-typography';\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,2BAA6B;AAC7B,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;AAAA,
|
|
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\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: 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 || 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\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
|
@@ -19,12 +19,24 @@ const borderOutside = () => css`
|
|
|
19
19
|
`;
|
|
20
20
|
const disabledOption = () => css`
|
|
21
21
|
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
22
|
+
/** Checkbox label has its own color rule (n700 per checkbox spec) so the wrapper's color does not cascade through it
|
|
23
|
+
* The multi-select menu item needs explicit label overrides in both non-hover and hover states.
|
|
24
|
+
*/
|
|
25
|
+
label {
|
|
26
|
+
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
27
|
+
}
|
|
22
28
|
:hover {
|
|
23
29
|
color: ${({ theme }) => theme.colors.neutral[600]};
|
|
24
|
-
// lets target the label to controll the checkbox for multi select menu item.
|
|
25
30
|
label {
|
|
26
31
|
color: ${({ theme }) => theme.colors.neutral[600]};
|
|
27
32
|
}
|
|
33
|
+
/** single menu item spec:
|
|
34
|
+
* aria-disabled-selected + hover → checkmark icon goes from neutral-400 to neutral-500
|
|
35
|
+
* ds-icons sets svg fill via !important internally — override with same flag at higher specificity
|
|
36
|
+
*/
|
|
37
|
+
svg {
|
|
38
|
+
fill: ${({ theme }) => theme.colors.neutral[500]} !important;
|
|
39
|
+
}
|
|
28
40
|
}
|
|
29
41
|
cursor: not-allowed;
|
|
30
42
|
* {
|
|
@@ -51,7 +63,7 @@ const StyledGlobalMenuItemWrapper = styled("li", {
|
|
|
51
63
|
}};
|
|
52
64
|
|
|
53
65
|
${(props) => {
|
|
54
|
-
if (props.disabled || props.applyAriaDisabled) return disabledOption();
|
|
66
|
+
if (props.disabled || props.applyAriaDisabled || props.readOnly) return disabledOption();
|
|
55
67
|
return "";
|
|
56
68
|
}};
|
|
57
69
|
|
|
@@ -131,10 +143,10 @@ const StyledSeparatorWrapper = styled("li", {
|
|
|
131
143
|
|
|
132
144
|
${xStyledCommonProps}
|
|
133
145
|
`;
|
|
134
|
-
const StyledGroupLabel = styled(
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
146
|
+
const StyledGroupLabel = styled(DSTypography, {
|
|
147
|
+
name: DSMenuItemName,
|
|
148
|
+
slot: DSMenuItemSlots.MENU_ITEM_GROUP_LABEL
|
|
149
|
+
})``;
|
|
138
150
|
const StyledSectionWrapper = styled("li", {
|
|
139
151
|
name: DSMenuItemName,
|
|
140
152
|
slot: DSMenuItemSlots.MENU_ITEM_SECTION_WRAPPER
|
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 { DSTypography } from '@elliemae/ds-typography';\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,oBAAoB;AAC7B,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;AAAA,
|
|
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\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: 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 || 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\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
|
@@ -19,7 +19,7 @@ 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
23
|
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
24
|
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
25
|
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.28",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Menu Items Commons",
|
|
6
6
|
"files": [
|
|
@@ -36,22 +36,22 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-grid": "3.70.0-next.
|
|
40
|
-
"@elliemae/ds-props-helpers": "3.70.0-next.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
39
|
+
"@elliemae/ds-grid": "3.70.0-next.28",
|
|
40
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.28",
|
|
41
|
+
"@elliemae/ds-system": "3.70.0-next.28",
|
|
42
|
+
"@elliemae/ds-typography": "3.70.0-next.28"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"jest": "^30.0.0",
|
|
46
|
-
"lodash-es": "^4.
|
|
46
|
+
"lodash-es": "^4.18.1",
|
|
47
47
|
"styled-components": "~5.3.9",
|
|
48
|
-
"@elliemae/ds-monorepo-devops": "3.70.0-next.
|
|
48
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.28"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"@testing-library/jest-dom": "^6.6.3",
|
|
52
52
|
"@testing-library/react": "^16.0.1",
|
|
53
53
|
"@testing-library/user-event": "~14.6.1",
|
|
54
|
-
"lodash-es": "^4.
|
|
54
|
+
"lodash-es": "^4.18.1",
|
|
55
55
|
"react": "^18.3.1",
|
|
56
56
|
"react-dom": "^18.3.1",
|
|
57
57
|
"styled-components": "~5.3.9"
|