@elliemae/ds-menu-items-submenu 3.51.0-next.2 → 3.51.0-next.4
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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSMenuItemsSubmenu.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe } 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 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 // 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}\n pl={optionsShouldHavePadding ? 40 : 16}\n as={'div' as keyof JSX.IntrinsicElements}\n data-type=\"submenu\"\n >\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n {secondaryLabel !== undefined && (\n <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n )}\n <StyledIconContainer>\n <StyledVerticalSeparator />\n {rightAddon === 'ellipsis' ? (\n <StyledEllipsisButton\n tabIndex={-1}\n onClick={onEllipsisClick}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\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"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe } 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 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 // 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}\n pl={optionsShouldHavePadding ? 40 : 16}\n as={'div' as keyof React.JSX.IntrinsicElements}\n data-type=\"submenu\"\n >\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n {secondaryLabel !== undefined && (\n <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n )}\n <StyledIconContainer>\n <StyledVerticalSeparator />\n {rightAddon === 'ellipsis' ? (\n <StyledEllipsisButton\n tabIndex={-1}\n onClick={onEllipsisClick}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\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
5
|
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -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", "import React from 'react';\nimport { describe } 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 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 // 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}\n pl={optionsShouldHavePadding ? 40 : 16}\n as={'div' as keyof JSX.IntrinsicElements}\n data-type=\"submenu\"\n >\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n {secondaryLabel !== undefined && (\n <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n )}\n <StyledIconContainer>\n <StyledVerticalSeparator />\n {rightAddon === 'ellipsis' ? (\n <StyledEllipsisButton\n tabIndex={-1}\n onClick={onEllipsisClick}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\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"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } 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 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 // 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}\n pl={optionsShouldHavePadding ? 40 : 16}\n as={'div' as keyof React.JSX.IntrinsicElements}\n data-type=\"submenu\"\n >\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n {secondaryLabel !== undefined && (\n <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n )}\n <StyledIconContainer>\n <StyledVerticalSeparator />\n {rightAddon === 'ellipsis' ? (\n <StyledEllipsisButton\n tabIndex={-1}\n onClick={onEllipsisClick}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\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
5
|
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-menu-items-submenu",
|
|
3
|
-
"version": "3.51.0-next.
|
|
3
|
+
"version": "3.51.0-next.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Menu Items Submenu",
|
|
6
6
|
"files": [
|
|
@@ -37,17 +37,17 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@xstyled/styled-components": "~3.7.3",
|
|
40
|
-
"@elliemae/ds-grid": "3.51.0-next.
|
|
41
|
-
"@elliemae/ds-menu-items-commons": "3.51.0-next.
|
|
42
|
-
"@elliemae/ds-icons": "3.51.0-next.
|
|
43
|
-
"@elliemae/ds-props-helpers": "3.51.0-next.
|
|
44
|
-
"@elliemae/ds-system": "3.51.0-next.
|
|
40
|
+
"@elliemae/ds-grid": "3.51.0-next.4",
|
|
41
|
+
"@elliemae/ds-menu-items-commons": "3.51.0-next.4",
|
|
42
|
+
"@elliemae/ds-icons": "3.51.0-next.4",
|
|
43
|
+
"@elliemae/ds-props-helpers": "3.51.0-next.4",
|
|
44
|
+
"@elliemae/ds-system": "3.51.0-next.4"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"jest": "~29.7.0",
|
|
48
48
|
"lodash": "^4.17.21",
|
|
49
49
|
"styled-components": "~5.3.9",
|
|
50
|
-
"@elliemae/ds-monorepo-devops": "3.51.0-next.
|
|
50
|
+
"@elliemae/ds-monorepo-devops": "3.51.0-next.4"
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|
|
53
53
|
"@testing-library/jest-dom": "^6.6.3",
|