@elliemae/ds-menu-items-single-with-submenu 3.70.0-next.27 → 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.
|
@@ -50,6 +50,7 @@ const DSMenuItemsSingleWithSubmenu = (props) => {
|
|
|
50
50
|
isActive,
|
|
51
51
|
disabled,
|
|
52
52
|
applyAriaDisabled,
|
|
53
|
+
readOnly,
|
|
53
54
|
onClick,
|
|
54
55
|
isSelected,
|
|
55
56
|
isSubmenuOpened,
|
|
@@ -123,7 +124,7 @@ const DSMenuItemsSingleWithSubmenu = (props) => {
|
|
|
123
124
|
onClick: handleOnClick,
|
|
124
125
|
isSelected: isSubmenuOpened,
|
|
125
126
|
disabled,
|
|
126
|
-
"aria-disabled": applyAriaDisabled,
|
|
127
|
+
"aria-disabled": applyAriaDisabled || disabled || readOnly,
|
|
127
128
|
isActive,
|
|
128
129
|
onMouseEnter: onMouseEnterHandler,
|
|
129
130
|
onMouseLeave: onMouseLeaveHandler,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSMenuItemsSingleWithSubmenu.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport React from 'react';\nimport { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { MoreOptionsVert, ChevronRight, Checkmark } 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 {\n type DSMenuItemsSingleWithSubmenuT,\n DSMenuItemsSingleWithSubmenuPropTypesSchema,\n} from './react-desc-prop-types.js';\nimport { useMenuItemsSingleWithSubmenu } from './config/useMenuItemsSingleWithSubmenu.js';\n\nconst DSMenuItemsSingleWithSubmenu: React.ComponentType<DSMenuItemsSingleWithSubmenuT.Props> = (props) => {\n const { propsWithDefault, globalProps, xstyledProps, eventHandlers } = useMenuItemsSingleWithSubmenu(props);\n const { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick } = eventHandlers;\n const {\n dsId,\n label,\n secondaryLabel,\n isActive,\n disabled,\n applyAriaDisabled,\n onClick,\n isSelected,\n isSubmenuOpened,\n rightAddon,\n innerRef,\n wrapperStyles,\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\n // eslint-disable-next-line @typescript-eslint/naming-convention, no-unused-vars\n const { minWidth: _widthToRemoveFromGlobals, ...restXStyled } = xstyledProps;\n\n React.useEffect(() => {\n setTimeout(() => setDelayedIsOpened(isSubmenuOpened));\n }, [isSubmenuOpened]);\n\n const gridLayout = React.useMemo(() => {\n const cols = ['16px', 'auto'];\n if (secondaryLabel) cols.push('min-content');\n cols.push('min-content');\n return cols;\n }, [secondaryLabel]);\n\n const handleOnClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled || applyAriaDisabled) return;\n onClick?.(e);\n },\n [disabled, applyAriaDisabled, onClick],\n );\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 onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n minWidth={minWidth}\n maxHeight={maxHeight}\n data-popover-label={label}\n as=\"li\"\n role=\"option\"\n aria-selected={isSubmenuOpened}\n aria-describedby={`dropdownmenu-submenu-${dsId}`}\n id={dsId}\n {...globalProps}\n {...restXStyled}\n >\n <StyledGlobalMenuItemWrapper\n pr={0}\n onClick={handleOnClick}\n isSelected={isSubmenuOpened}\n disabled={disabled}\n aria-disabled={applyAriaDisabled}\n isActive={isActive}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n as={'div' as keyof React.JSX.IntrinsicElements}\n innerRef={innerRef}\n data-type=\"single-with-submenu\"\n getOwnerProps={getOwnerProps}\n >\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\" getOwnerProps={getOwnerProps}>\n {isSelected ? (\n <Checkmark\n size=\"s\"\n color={disabled || applyAriaDisabled ? ['neutral', '500'] : ['brand-primary', '600']}\n />\n ) : (\n <div />\n )}\n <StyleMenuItemLabel getOwnerProps={getOwnerProps} variant=\"b2\">\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\n// this is `'DSMenuItemSingleWithSubmenu'` for legacy reasons, when moving to inheritance pattern this has been kept as it was to avoid complications\nDSMenuItemsSingleWithSubmenu.displayName = `DSMenuItemSingleWithSubmenu`;\nconst DSMenuItemsSingleWithSubmenuWithSchema = describe(DSMenuItemsSingleWithSubmenu);\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nDSMenuItemsSingleWithSubmenuWithSchema.propTypes = DSMenuItemsSingleWithSubmenuPropTypesSchema;\n\nexport { DSMenuItemsSingleWithSubmenu, DSMenuItemsSingleWithSubmenuWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
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, Checkmark } 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 {\n type DSMenuItemsSingleWithSubmenuT,\n DSMenuItemsSingleWithSubmenuPropTypesSchema,\n} from './react-desc-prop-types.js';\nimport { useMenuItemsSingleWithSubmenu } from './config/useMenuItemsSingleWithSubmenu.js';\n\nconst DSMenuItemsSingleWithSubmenu: React.ComponentType<DSMenuItemsSingleWithSubmenuT.Props> = (props) => {\n const { propsWithDefault, globalProps, xstyledProps, eventHandlers } = useMenuItemsSingleWithSubmenu(props);\n const { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick } = eventHandlers;\n const {\n dsId,\n label,\n secondaryLabel,\n isActive,\n disabled,\n applyAriaDisabled,\n readOnly,\n onClick,\n isSelected,\n isSubmenuOpened,\n rightAddon,\n innerRef,\n wrapperStyles,\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\n // eslint-disable-next-line @typescript-eslint/naming-convention, no-unused-vars\n const { minWidth: _widthToRemoveFromGlobals, ...restXStyled } = xstyledProps;\n\n React.useEffect(() => {\n setTimeout(() => setDelayedIsOpened(isSubmenuOpened));\n }, [isSubmenuOpened]);\n\n const gridLayout = React.useMemo(() => {\n const cols = ['16px', 'auto'];\n if (secondaryLabel) cols.push('min-content');\n cols.push('min-content');\n return cols;\n }, [secondaryLabel]);\n\n const handleOnClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled || applyAriaDisabled) return;\n onClick?.(e);\n },\n [disabled, applyAriaDisabled, onClick],\n );\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 onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n minWidth={minWidth}\n maxHeight={maxHeight}\n data-popover-label={label}\n as=\"li\"\n role=\"option\"\n aria-selected={isSubmenuOpened}\n aria-describedby={`dropdownmenu-submenu-${dsId}`}\n id={dsId}\n {...globalProps}\n {...restXStyled}\n >\n <StyledGlobalMenuItemWrapper\n pr={0}\n onClick={handleOnClick}\n isSelected={isSubmenuOpened}\n disabled={disabled}\n aria-disabled={applyAriaDisabled || disabled || readOnly}\n isActive={isActive}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n as={'div' as keyof React.JSX.IntrinsicElements}\n innerRef={innerRef}\n data-type=\"single-with-submenu\"\n getOwnerProps={getOwnerProps}\n >\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\" getOwnerProps={getOwnerProps}>\n {isSelected ? (\n <Checkmark\n size=\"s\"\n color={disabled || applyAriaDisabled ? ['neutral', '500'] : ['brand-primary', '600']}\n />\n ) : (\n <div />\n )}\n <StyleMenuItemLabel getOwnerProps={getOwnerProps} variant=\"b2\">\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\n// this is `'DSMenuItemSingleWithSubmenu'` for legacy reasons, when moving to inheritance pattern this has been kept as it was to avoid complications\nDSMenuItemsSingleWithSubmenu.displayName = `DSMenuItemSingleWithSubmenu`;\nconst DSMenuItemsSingleWithSubmenuWithSchema = describe(DSMenuItemsSingleWithSubmenu);\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nDSMenuItemsSingleWithSubmenuWithSchema.propTypes = DSMenuItemsSingleWithSubmenuPropTypesSchema;\n\nexport { DSMenuItemsSingleWithSubmenu, DSMenuItemsSingleWithSubmenuWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -26,6 +26,7 @@ const DSMenuItemsSingleWithSubmenu = (props) => {
|
|
|
26
26
|
isActive,
|
|
27
27
|
disabled,
|
|
28
28
|
applyAriaDisabled,
|
|
29
|
+
readOnly,
|
|
29
30
|
onClick,
|
|
30
31
|
isSelected,
|
|
31
32
|
isSubmenuOpened,
|
|
@@ -99,7 +100,7 @@ const DSMenuItemsSingleWithSubmenu = (props) => {
|
|
|
99
100
|
onClick: handleOnClick,
|
|
100
101
|
isSelected: isSubmenuOpened,
|
|
101
102
|
disabled,
|
|
102
|
-
"aria-disabled": applyAriaDisabled,
|
|
103
|
+
"aria-disabled": applyAriaDisabled || disabled || readOnly,
|
|
103
104
|
isActive,
|
|
104
105
|
onMouseEnter: onMouseEnterHandler,
|
|
105
106
|
onMouseLeave: onMouseLeaveHandler,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSMenuItemsSingleWithSubmenu.tsx"],
|
|
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, Checkmark } 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 {\n type DSMenuItemsSingleWithSubmenuT,\n DSMenuItemsSingleWithSubmenuPropTypesSchema,\n} from './react-desc-prop-types.js';\nimport { useMenuItemsSingleWithSubmenu } from './config/useMenuItemsSingleWithSubmenu.js';\n\nconst DSMenuItemsSingleWithSubmenu: React.ComponentType<DSMenuItemsSingleWithSubmenuT.Props> = (props) => {\n const { propsWithDefault, globalProps, xstyledProps, eventHandlers } = useMenuItemsSingleWithSubmenu(props);\n const { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick } = eventHandlers;\n const {\n dsId,\n label,\n secondaryLabel,\n isActive,\n disabled,\n applyAriaDisabled,\n onClick,\n isSelected,\n isSubmenuOpened,\n rightAddon,\n innerRef,\n wrapperStyles,\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\n // eslint-disable-next-line @typescript-eslint/naming-convention, no-unused-vars\n const { minWidth: _widthToRemoveFromGlobals, ...restXStyled } = xstyledProps;\n\n React.useEffect(() => {\n setTimeout(() => setDelayedIsOpened(isSubmenuOpened));\n }, [isSubmenuOpened]);\n\n const gridLayout = React.useMemo(() => {\n const cols = ['16px', 'auto'];\n if (secondaryLabel) cols.push('min-content');\n cols.push('min-content');\n return cols;\n }, [secondaryLabel]);\n\n const handleOnClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled || applyAriaDisabled) return;\n onClick?.(e);\n },\n [disabled, applyAriaDisabled, onClick],\n );\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 onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n minWidth={minWidth}\n maxHeight={maxHeight}\n data-popover-label={label}\n as=\"li\"\n role=\"option\"\n aria-selected={isSubmenuOpened}\n aria-describedby={`dropdownmenu-submenu-${dsId}`}\n id={dsId}\n {...globalProps}\n {...restXStyled}\n >\n <StyledGlobalMenuItemWrapper\n pr={0}\n onClick={handleOnClick}\n isSelected={isSubmenuOpened}\n disabled={disabled}\n aria-disabled={applyAriaDisabled}\n isActive={isActive}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n as={'div' as keyof React.JSX.IntrinsicElements}\n innerRef={innerRef}\n data-type=\"single-with-submenu\"\n getOwnerProps={getOwnerProps}\n >\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\" getOwnerProps={getOwnerProps}>\n {isSelected ? (\n <Checkmark\n size=\"s\"\n color={disabled || applyAriaDisabled ? ['neutral', '500'] : ['brand-primary', '600']}\n />\n ) : (\n <div />\n )}\n <StyleMenuItemLabel getOwnerProps={getOwnerProps} variant=\"b2\">\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\n// this is `'DSMenuItemSingleWithSubmenu'` for legacy reasons, when moving to inheritance pattern this has been kept as it was to avoid complications\nDSMenuItemsSingleWithSubmenu.displayName = `DSMenuItemSingleWithSubmenu`;\nconst DSMenuItemsSingleWithSubmenuWithSchema = describe(DSMenuItemsSingleWithSubmenu);\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nDSMenuItemsSingleWithSubmenuWithSchema.propTypes = DSMenuItemsSingleWithSubmenuPropTypesSchema;\n\nexport { DSMenuItemsSingleWithSubmenu, DSMenuItemsSingleWithSubmenuWithSchema };\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, Checkmark } 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 {\n type DSMenuItemsSingleWithSubmenuT,\n DSMenuItemsSingleWithSubmenuPropTypesSchema,\n} from './react-desc-prop-types.js';\nimport { useMenuItemsSingleWithSubmenu } from './config/useMenuItemsSingleWithSubmenu.js';\n\nconst DSMenuItemsSingleWithSubmenu: React.ComponentType<DSMenuItemsSingleWithSubmenuT.Props> = (props) => {\n const { propsWithDefault, globalProps, xstyledProps, eventHandlers } = useMenuItemsSingleWithSubmenu(props);\n const { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick } = eventHandlers;\n const {\n dsId,\n label,\n secondaryLabel,\n isActive,\n disabled,\n applyAriaDisabled,\n readOnly,\n onClick,\n isSelected,\n isSubmenuOpened,\n rightAddon,\n innerRef,\n wrapperStyles,\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\n // eslint-disable-next-line @typescript-eslint/naming-convention, no-unused-vars\n const { minWidth: _widthToRemoveFromGlobals, ...restXStyled } = xstyledProps;\n\n React.useEffect(() => {\n setTimeout(() => setDelayedIsOpened(isSubmenuOpened));\n }, [isSubmenuOpened]);\n\n const gridLayout = React.useMemo(() => {\n const cols = ['16px', 'auto'];\n if (secondaryLabel) cols.push('min-content');\n cols.push('min-content');\n return cols;\n }, [secondaryLabel]);\n\n const handleOnClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled || applyAriaDisabled) return;\n onClick?.(e);\n },\n [disabled, applyAriaDisabled, onClick],\n );\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 onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n wrapperStyles={{ ...wrapperStyles, w: '100%' }}\n minWidth={minWidth}\n maxHeight={maxHeight}\n data-popover-label={label}\n as=\"li\"\n role=\"option\"\n aria-selected={isSubmenuOpened}\n aria-describedby={`dropdownmenu-submenu-${dsId}`}\n id={dsId}\n {...globalProps}\n {...restXStyled}\n >\n <StyledGlobalMenuItemWrapper\n pr={0}\n onClick={handleOnClick}\n isSelected={isSubmenuOpened}\n disabled={disabled}\n aria-disabled={applyAriaDisabled || disabled || readOnly}\n isActive={isActive}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n as={'div' as keyof React.JSX.IntrinsicElements}\n innerRef={innerRef}\n data-type=\"single-with-submenu\"\n getOwnerProps={getOwnerProps}\n >\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\" getOwnerProps={getOwnerProps}>\n {isSelected ? (\n <Checkmark\n size=\"s\"\n color={disabled || applyAriaDisabled ? ['neutral', '500'] : ['brand-primary', '600']}\n />\n ) : (\n <div />\n )}\n <StyleMenuItemLabel getOwnerProps={getOwnerProps} variant=\"b2\">\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\n// this is `'DSMenuItemSingleWithSubmenu'` for legacy reasons, when moving to inheritance pattern this has been kept as it was to avoid complications\nDSMenuItemsSingleWithSubmenu.displayName = `DSMenuItemSingleWithSubmenu`;\nconst DSMenuItemsSingleWithSubmenuWithSchema = describe(DSMenuItemsSingleWithSubmenu);\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nDSMenuItemsSingleWithSubmenuWithSchema.propTypes = DSMenuItemsSingleWithSubmenuPropTypesSchema;\n\nexport { DSMenuItemsSingleWithSubmenu, DSMenuItemsSingleWithSubmenuWithSchema };\n"],
|
|
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-single-with-submenu",
|
|
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 Single With Submenu",
|
|
6
6
|
"files": [
|
|
@@ -36,17 +36,17 @@
|
|
|
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-
|
|
39
|
+
"@elliemae/ds-grid": "3.70.0-next.28",
|
|
40
|
+
"@elliemae/ds-icons": "3.70.0-next.28",
|
|
41
|
+
"@elliemae/ds-menu-items-commons": "3.70.0-next.28",
|
|
42
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.28",
|
|
43
|
+
"@elliemae/ds-system": "3.70.0-next.28"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"jest": "^30.0.0",
|
|
47
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.28"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"@testing-library/jest-dom": "^6.6.3",
|