@elliemae/ds-menu-items-submenu 3.70.0-next.3 → 3.70.0-next.30
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/DSMenuItemsSubmenu.js +10 -6
- package/dist/cjs/DSMenuItemsSubmenu.js.map +2 -2
- package/dist/esm/DSMenuItemsSubmenu.js +11 -7
- package/dist/esm/DSMenuItemsSubmenu.js.map +2 -2
- package/dist/types/tests/DSMenuItemsSubmenu.get-owner-props-arguments-slots.test.d.ts +1 -0
- package/package.json +9 -9
|
@@ -49,6 +49,7 @@ const DSMenuItemsSubmenu = (props) => {
|
|
|
49
49
|
isActive,
|
|
50
50
|
disabled,
|
|
51
51
|
applyAriaDisabled,
|
|
52
|
+
readOnly,
|
|
52
53
|
isSubmenuOpened,
|
|
53
54
|
rightAddon,
|
|
54
55
|
innerRef,
|
|
@@ -68,6 +69,7 @@ const DSMenuItemsSubmenu = (props) => {
|
|
|
68
69
|
maxHeight
|
|
69
70
|
}
|
|
70
71
|
} = propsWithDefault;
|
|
72
|
+
const { getOwnerProps } = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault);
|
|
71
73
|
const [delayedIsOpened, setDelayedIsOpened] = import_react.default.useState(false);
|
|
72
74
|
import_react.default.useEffect(() => {
|
|
73
75
|
setTimeout(() => setDelayedIsOpened(Boolean(isSubmenuOpened)));
|
|
@@ -119,16 +121,17 @@ const DSMenuItemsSubmenu = (props) => {
|
|
|
119
121
|
onMouseLeave: onMouseLeaveHandler,
|
|
120
122
|
innerRef,
|
|
121
123
|
disabled,
|
|
122
|
-
"aria-disabled": applyAriaDisabled,
|
|
124
|
+
"aria-disabled": applyAriaDisabled || disabled || readOnly,
|
|
123
125
|
pl: optionsShouldHavePadding ? 40 : 16,
|
|
124
126
|
as: "div",
|
|
125
127
|
"data-type": "submenu",
|
|
128
|
+
getOwnerProps,
|
|
126
129
|
children: [
|
|
127
|
-
Render !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, { ...propsWithDefault }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_menu_items_commons.StyledContentWrapper, { cols: gridLayout, gutter: "xxs", alignItems: "center", children: [
|
|
128
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyleMenuItemLabel, { children: label }),
|
|
129
|
-
secondaryLabel !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyleMenuItemSecondaryLabel, { children: secondaryLabel }),
|
|
130
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_menu_items_commons.StyledIconContainer, { children: [
|
|
131
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyledVerticalSeparator, {}),
|
|
130
|
+
Render !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, { ...propsWithDefault }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_menu_items_commons.StyledContentWrapper, { cols: gridLayout, gutter: "xxs", alignItems: "center", getOwnerProps, children: [
|
|
131
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyleMenuItemLabel, { getOwnerProps, variant: "b2", component: "span", children: label }),
|
|
132
|
+
secondaryLabel !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyleMenuItemSecondaryLabel, { getOwnerProps, children: secondaryLabel }),
|
|
133
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_menu_items_commons.StyledIconContainer, { getOwnerProps, children: [
|
|
134
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyledVerticalSeparator, { getOwnerProps }),
|
|
132
135
|
rightAddon === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
133
136
|
import_ds_menu_items_commons.StyledEllipsisButton,
|
|
134
137
|
{
|
|
@@ -136,6 +139,7 @@ const DSMenuItemsSubmenu = (props) => {
|
|
|
136
139
|
onClick: onEllipsisClick,
|
|
137
140
|
disabled,
|
|
138
141
|
applyAriaDisabled,
|
|
142
|
+
getOwnerProps,
|
|
139
143
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
140
144
|
import_ds_icons.MoreOptionsVert,
|
|
141
145
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSMenuItemsSubmenu.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React from 'react';\nimport { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { MoreOptionsVert, ChevronRight } from '@elliemae/ds-icons';\nimport {\n StyledGlobalMenuItemWrapper,\n StyledContentWrapper,\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledIconContainer,\n StyledVerticalSeparator,\n StyledEllipsisButton,\n} from '@elliemae/ds-menu-items-commons';\nimport { type DSMenuItemsSubmenuT, DSMenuItemsSubmenuPropTypesSchema } from './react-desc-prop-types.js';\nimport { useMenuItemsSubmenu } from './config/useMenuItemsSubmenu.js';\n\nconst DSMenuItemsSubmenu: React.ComponentType<DSMenuItemsSubmenuT.Props> = (props) => {\n const { propsWithDefault, globalProps, xstyledProps, eventHandlers } = useMenuItemsSubmenu(props);\n const {\n dsId,\n label,\n secondaryLabel,\n isActive,\n disabled,\n applyAriaDisabled,\n readOnly,\n isSubmenuOpened,\n rightAddon,\n innerRef,\n wrapperStyles,\n optionsShouldHavePadding,\n render: Render,\n Dropdown,\n dropdownProps: {\n options,\n openedSubmenus,\n onSubmenuToggle,\n selectedOptions,\n onKeyDown,\n onOptionClick,\n onClickOutside,\n minWidth,\n maxHeight,\n },\n } = propsWithDefault;\n\n const { getOwnerProps } = useOwnerProps(propsWithDefault);\n\n // If we don't delay the opening of the poppers, the position will not be placed correctly\n // That why we delay it for the next render using the useEffect hook\n // TODO -- @carusox move this to utilities as a hook\n const [delayedIsOpened, setDelayedIsOpened] = React.useState(false);\n React.useEffect(() => {\n setTimeout(() => setDelayedIsOpened(Boolean(isSubmenuOpened)));\n }, [isSubmenuOpened]);\n\n const gridLayout = React.useMemo(() => {\n const cols = ['auto'];\n if (secondaryLabel !== undefined) cols.push('min-content');\n cols.push('min-content');\n return cols;\n }, [secondaryLabel]);\n\n // We need to exclude minWidth because we have already used it as a key value for the dropdown menu options.\n // i dont think there is a workaround for this at the moment\n // we need a complete refactor in how we build the submenus\n // eslint-disable-next-line no-unused-vars\n const { minWidth: customMinWidth, ...restXStyled } = xstyledProps;\n // eslint-disable-next-line no-unused-vars\n const { onMouseLeave, onMouseEnter, onMouseDown, ...restGlobalAttributes } = globalProps;\n\n const { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick } = eventHandlers;\n\n return (\n <Dropdown\n isOpened={delayedIsOpened}\n options={options ?? []}\n onOptionClick={onOptionClick}\n startPlacementPreference=\"right-start\"\n placementOrderPreference={['right-start', 'right-end', 'left-start', 'left-end']}\n selectedOptions={selectedOptions}\n openedSubmenus={openedSubmenus}\n onSubmenuToggle={onSubmenuToggle}\n onKeyDown={onKeyDown}\n onClickOutside={onClickOutside}\n customOffset={[-4, 1]}\n wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n as=\"li\"\n role=\"option\"\n minWidth={minWidth}\n maxHeight={maxHeight}\n aria-selected={isSubmenuOpened}\n aria-describedby={`dropdownmenu-submenu-${dsId}`}\n data-popover-label={label}\n id={dsId}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n onMouseDown={onMouseDownHandler}\n {...restGlobalAttributes}\n {...restXStyled}\n >\n <StyledGlobalMenuItemWrapper\n pr={0}\n isSelected={isSubmenuOpened}\n isActive={isActive}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n innerRef={innerRef}\n disabled={disabled}\n aria-disabled={applyAriaDisabled || disabled || readOnly}\n pl={optionsShouldHavePadding ? 40 : 16}\n as={'div' as keyof React.JSX.IntrinsicElements}\n data-type=\"submenu\"\n getOwnerProps={getOwnerProps}\n >\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\" getOwnerProps={getOwnerProps}>\n <StyleMenuItemLabel getOwnerProps={getOwnerProps} variant=\"b2\" component=\"span\">\n {label}\n </StyleMenuItemLabel>\n {secondaryLabel !== undefined && (\n <StyleMenuItemSecondaryLabel getOwnerProps={getOwnerProps}>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n )}\n <StyledIconContainer getOwnerProps={getOwnerProps}>\n <StyledVerticalSeparator getOwnerProps={getOwnerProps} />\n {rightAddon === 'ellipsis' ? (\n <StyledEllipsisButton\n tabIndex={-1}\n onClick={onEllipsisClick}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n getOwnerProps={getOwnerProps}\n >\n <MoreOptionsVert\n className=\"ds-dropdown-menu-v2-more-options\"\n color={disabled || applyAriaDisabled ? ['neutral', '500'] : ['brand-primary', '600']}\n size=\"s\"\n />\n </StyledEllipsisButton>\n ) : (\n <ChevronRight\n color={disabled || applyAriaDisabled ? ['neutral', '500'] : ['brand-primary', '600']}\n size=\"s\"\n />\n )}\n </StyledIconContainer>\n </StyledContentWrapper>\n )}\n <span id={`dropdownmenu-submenu-${dsId}`} style={{ display: 'none' }}>\n submenu, to open this submenu press the Right Arrow key\n </span>\n </StyledGlobalMenuItemWrapper>\n </Dropdown>\n );\n};\n\nDSMenuItemsSubmenu.displayName = 'DSMenuItemSubmenu';\nconst DSMenuItemsSubmenuWithSchema = describe(DSMenuItemsSubmenu);\nDSMenuItemsSubmenuWithSchema.propTypes = DSMenuItemsSubmenuPropTypesSchema;\n\nexport { DSMenuItemsSubmenu, DSMenuItemsSubmenuWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import React2 from "react";
|
|
4
|
-
import { describe } from "@elliemae/ds-props-helpers";
|
|
4
|
+
import { describe, useOwnerProps } from "@elliemae/ds-props-helpers";
|
|
5
5
|
import { MoreOptionsVert, ChevronRight } from "@elliemae/ds-icons";
|
|
6
6
|
import {
|
|
7
7
|
StyledGlobalMenuItemWrapper,
|
|
@@ -23,6 +23,7 @@ const DSMenuItemsSubmenu = (props) => {
|
|
|
23
23
|
isActive,
|
|
24
24
|
disabled,
|
|
25
25
|
applyAriaDisabled,
|
|
26
|
+
readOnly,
|
|
26
27
|
isSubmenuOpened,
|
|
27
28
|
rightAddon,
|
|
28
29
|
innerRef,
|
|
@@ -42,6 +43,7 @@ const DSMenuItemsSubmenu = (props) => {
|
|
|
42
43
|
maxHeight
|
|
43
44
|
}
|
|
44
45
|
} = propsWithDefault;
|
|
46
|
+
const { getOwnerProps } = useOwnerProps(propsWithDefault);
|
|
45
47
|
const [delayedIsOpened, setDelayedIsOpened] = React2.useState(false);
|
|
46
48
|
React2.useEffect(() => {
|
|
47
49
|
setTimeout(() => setDelayedIsOpened(Boolean(isSubmenuOpened)));
|
|
@@ -93,16 +95,17 @@ const DSMenuItemsSubmenu = (props) => {
|
|
|
93
95
|
onMouseLeave: onMouseLeaveHandler,
|
|
94
96
|
innerRef,
|
|
95
97
|
disabled,
|
|
96
|
-
"aria-disabled": applyAriaDisabled,
|
|
98
|
+
"aria-disabled": applyAriaDisabled || disabled || readOnly,
|
|
97
99
|
pl: optionsShouldHavePadding ? 40 : 16,
|
|
98
100
|
as: "div",
|
|
99
101
|
"data-type": "submenu",
|
|
102
|
+
getOwnerProps,
|
|
100
103
|
children: [
|
|
101
|
-
Render !== void 0 ? /* @__PURE__ */ jsx(Render, { ...propsWithDefault }) : /* @__PURE__ */ jsxs(StyledContentWrapper, { cols: gridLayout, gutter: "xxs", alignItems: "center", children: [
|
|
102
|
-
/* @__PURE__ */ jsx(StyleMenuItemLabel, { children: label }),
|
|
103
|
-
secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, { children: secondaryLabel }),
|
|
104
|
-
/* @__PURE__ */ jsxs(StyledIconContainer, { children: [
|
|
105
|
-
/* @__PURE__ */ jsx(StyledVerticalSeparator, {}),
|
|
104
|
+
Render !== void 0 ? /* @__PURE__ */ jsx(Render, { ...propsWithDefault }) : /* @__PURE__ */ jsxs(StyledContentWrapper, { cols: gridLayout, gutter: "xxs", alignItems: "center", getOwnerProps, children: [
|
|
105
|
+
/* @__PURE__ */ jsx(StyleMenuItemLabel, { getOwnerProps, variant: "b2", component: "span", children: label }),
|
|
106
|
+
secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, { getOwnerProps, children: secondaryLabel }),
|
|
107
|
+
/* @__PURE__ */ jsxs(StyledIconContainer, { getOwnerProps, children: [
|
|
108
|
+
/* @__PURE__ */ jsx(StyledVerticalSeparator, { getOwnerProps }),
|
|
106
109
|
rightAddon === "ellipsis" ? /* @__PURE__ */ jsx(
|
|
107
110
|
StyledEllipsisButton,
|
|
108
111
|
{
|
|
@@ -110,6 +113,7 @@ const DSMenuItemsSubmenu = (props) => {
|
|
|
110
113
|
onClick: onEllipsisClick,
|
|
111
114
|
disabled,
|
|
112
115
|
applyAriaDisabled,
|
|
116
|
+
getOwnerProps,
|
|
113
117
|
children: /* @__PURE__ */ jsx(
|
|
114
118
|
MoreOptionsVert,
|
|
115
119
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSMenuItemsSubmenu.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React from 'react';\nimport { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { MoreOptionsVert, ChevronRight } from '@elliemae/ds-icons';\nimport {\n StyledGlobalMenuItemWrapper,\n StyledContentWrapper,\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledIconContainer,\n StyledVerticalSeparator,\n StyledEllipsisButton,\n} from '@elliemae/ds-menu-items-commons';\nimport { type DSMenuItemsSubmenuT, DSMenuItemsSubmenuPropTypesSchema } from './react-desc-prop-types.js';\nimport { useMenuItemsSubmenu } from './config/useMenuItemsSubmenu.js';\n\nconst DSMenuItemsSubmenu: React.ComponentType<DSMenuItemsSubmenuT.Props> = (props) => {\n const { propsWithDefault, globalProps, xstyledProps, eventHandlers } = useMenuItemsSubmenu(props);\n const {\n dsId,\n label,\n secondaryLabel,\n isActive,\n disabled,\n applyAriaDisabled,\n readOnly,\n isSubmenuOpened,\n rightAddon,\n innerRef,\n wrapperStyles,\n optionsShouldHavePadding,\n render: Render,\n Dropdown,\n dropdownProps: {\n options,\n openedSubmenus,\n onSubmenuToggle,\n selectedOptions,\n onKeyDown,\n onOptionClick,\n onClickOutside,\n minWidth,\n maxHeight,\n },\n } = propsWithDefault;\n\n const { getOwnerProps } = useOwnerProps(propsWithDefault);\n\n // If we don't delay the opening of the poppers, the position will not be placed correctly\n // That why we delay it for the next render using the useEffect hook\n // TODO -- @carusox move this to utilities as a hook\n const [delayedIsOpened, setDelayedIsOpened] = React.useState(false);\n React.useEffect(() => {\n setTimeout(() => setDelayedIsOpened(Boolean(isSubmenuOpened)));\n }, [isSubmenuOpened]);\n\n const gridLayout = React.useMemo(() => {\n const cols = ['auto'];\n if (secondaryLabel !== undefined) cols.push('min-content');\n cols.push('min-content');\n return cols;\n }, [secondaryLabel]);\n\n // We need to exclude minWidth because we have already used it as a key value for the dropdown menu options.\n // i dont think there is a workaround for this at the moment\n // we need a complete refactor in how we build the submenus\n // eslint-disable-next-line no-unused-vars\n const { minWidth: customMinWidth, ...restXStyled } = xstyledProps;\n // eslint-disable-next-line no-unused-vars\n const { onMouseLeave, onMouseEnter, onMouseDown, ...restGlobalAttributes } = globalProps;\n\n const { onMouseEnterHandler, onMouseLeaveHandler, onMouseDownHandler, onEllipsisClick } = eventHandlers;\n\n return (\n <Dropdown\n isOpened={delayedIsOpened}\n options={options ?? []}\n onOptionClick={onOptionClick}\n startPlacementPreference=\"right-start\"\n placementOrderPreference={['right-start', 'right-end', 'left-start', 'left-end']}\n selectedOptions={selectedOptions}\n openedSubmenus={openedSubmenus}\n onSubmenuToggle={onSubmenuToggle}\n onKeyDown={onKeyDown}\n onClickOutside={onClickOutside}\n customOffset={[-4, 1]}\n wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n as=\"li\"\n role=\"option\"\n minWidth={minWidth}\n maxHeight={maxHeight}\n aria-selected={isSubmenuOpened}\n aria-describedby={`dropdownmenu-submenu-${dsId}`}\n data-popover-label={label}\n id={dsId}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n onMouseDown={onMouseDownHandler}\n {...restGlobalAttributes}\n {...restXStyled}\n >\n <StyledGlobalMenuItemWrapper\n pr={0}\n isSelected={isSubmenuOpened}\n isActive={isActive}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n innerRef={innerRef}\n disabled={disabled}\n aria-disabled={applyAriaDisabled || disabled || readOnly}\n pl={optionsShouldHavePadding ? 40 : 16}\n as={'div' as keyof React.JSX.IntrinsicElements}\n data-type=\"submenu\"\n getOwnerProps={getOwnerProps}\n >\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\" getOwnerProps={getOwnerProps}>\n <StyleMenuItemLabel getOwnerProps={getOwnerProps} variant=\"b2\" component=\"span\">\n {label}\n </StyleMenuItemLabel>\n {secondaryLabel !== undefined && (\n <StyleMenuItemSecondaryLabel getOwnerProps={getOwnerProps}>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n )}\n <StyledIconContainer getOwnerProps={getOwnerProps}>\n <StyledVerticalSeparator getOwnerProps={getOwnerProps} />\n {rightAddon === 'ellipsis' ? (\n <StyledEllipsisButton\n tabIndex={-1}\n onClick={onEllipsisClick}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n getOwnerProps={getOwnerProps}\n >\n <MoreOptionsVert\n className=\"ds-dropdown-menu-v2-more-options\"\n color={disabled || applyAriaDisabled ? ['neutral', '500'] : ['brand-primary', '600']}\n size=\"s\"\n />\n </StyledEllipsisButton>\n ) : (\n <ChevronRight\n color={disabled || applyAriaDisabled ? ['neutral', '500'] : ['brand-primary', '600']}\n size=\"s\"\n />\n )}\n </StyledIconContainer>\n </StyledContentWrapper>\n )}\n <span id={`dropdownmenu-submenu-${dsId}`} style={{ display: 'none' }}>\n submenu, to open this submenu press the Right Arrow key\n </span>\n </StyledGlobalMenuItemWrapper>\n </Dropdown>\n );\n};\n\nDSMenuItemsSubmenu.displayName = 'DSMenuItemSubmenu';\nconst DSMenuItemsSubmenuWithSchema = describe(DSMenuItemsSubmenu);\nDSMenuItemsSubmenuWithSchema.propTypes = DSMenuItemsSubmenuPropTypesSchema;\n\nexport { DSMenuItemsSubmenu, DSMenuItemsSubmenuWithSchema };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-menu-items-submenu",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.30",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Menu Items Submenu",
|
|
6
6
|
"files": [
|
|
@@ -36,23 +36,23 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-grid": "3.70.0-next.
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-system": "3.70.0-next.
|
|
39
|
+
"@elliemae/ds-grid": "3.70.0-next.30",
|
|
40
|
+
"@elliemae/ds-menu-items-commons": "3.70.0-next.30",
|
|
41
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.30",
|
|
42
|
+
"@elliemae/ds-icons": "3.70.0-next.30",
|
|
43
|
+
"@elliemae/ds-system": "3.70.0-next.30"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"jest": "^30.0.0",
|
|
47
|
-
"lodash-es": "^4.
|
|
47
|
+
"lodash-es": "^4.18.1",
|
|
48
48
|
"styled-components": "~5.3.9",
|
|
49
|
-
"@elliemae/ds-monorepo-devops": "3.70.0-next.
|
|
49
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.30"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"@testing-library/jest-dom": "^6.6.3",
|
|
53
53
|
"@testing-library/react": "^16.0.1",
|
|
54
54
|
"@testing-library/user-event": "~14.6.1",
|
|
55
|
-
"lodash-es": "^4.
|
|
55
|
+
"lodash-es": "^4.18.1",
|
|
56
56
|
"react": "^18.3.1",
|
|
57
57
|
"react-dom": "^18.3.1",
|
|
58
58
|
"styled-components": "~5.3.9"
|