@elliemae/ds-menu-items-single-with-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.
@@ -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,
@@ -70,6 +71,7 @@ const DSMenuItemsSingleWithSubmenu = (props) => {
70
71
  maxHeight
71
72
  }
72
73
  } = propsWithDefault;
74
+ const { getOwnerProps } = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault);
73
75
  const [delayedIsOpened, setDelayedIsOpened] = import_react.default.useState(false);
74
76
  const { minWidth: _widthToRemoveFromGlobals, ...restXStyled } = xstyledProps;
75
77
  import_react.default.useEffect(() => {
@@ -122,15 +124,16 @@ const DSMenuItemsSingleWithSubmenu = (props) => {
122
124
  onClick: handleOnClick,
123
125
  isSelected: isSubmenuOpened,
124
126
  disabled,
125
- "aria-disabled": applyAriaDisabled,
127
+ "aria-disabled": applyAriaDisabled || disabled || readOnly,
126
128
  isActive,
127
129
  onMouseEnter: onMouseEnterHandler,
128
130
  onMouseLeave: onMouseLeaveHandler,
129
131
  as: "div",
130
132
  innerRef,
131
133
  "data-type": "single-with-submenu",
134
+ getOwnerProps,
132
135
  children: [
133
- 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: [
136
+ 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: [
134
137
  isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
135
138
  import_ds_icons.Checkmark,
136
139
  {
@@ -138,10 +141,10 @@ const DSMenuItemsSingleWithSubmenu = (props) => {
138
141
  color: disabled || applyAriaDisabled ? ["neutral", "500"] : ["brand-primary", "600"]
139
142
  }
140
143
  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
141
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyleMenuItemLabel, { children: label }),
142
- secondaryLabel !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyleMenuItemSecondaryLabel, { children: secondaryLabel }),
143
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_menu_items_commons.StyledIconContainer, { children: [
144
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyledVerticalSeparator, {}),
144
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyleMenuItemLabel, { getOwnerProps, variant: "b2", component: "span", children: label }),
145
+ secondaryLabel !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyleMenuItemSecondaryLabel, { getOwnerProps, children: secondaryLabel }),
146
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_menu_items_commons.StyledIconContainer, { getOwnerProps, children: [
147
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items_commons.StyledVerticalSeparator, { getOwnerProps }),
145
148
  rightAddon === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
146
149
  import_ds_menu_items_commons.StyledEllipsisButton,
147
150
  {
@@ -149,6 +152,7 @@ const DSMenuItemsSingleWithSubmenu = (props) => {
149
152
  onClick: onEllipsisClick,
150
153
  disabled,
151
154
  applyAriaDisabled,
155
+ getOwnerProps,
152
156
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
153
157
  import_ds_icons.MoreOptionsVert,
154
158
  {
@@ -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 } 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 // 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 >\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n {isSelected ? (\n <Checkmark\n size=\"s\"\n color={disabled || applyAriaDisabled ? ['neutral', '500'] : ['brand-primary', '600']}\n />\n ) : (\n <div />\n )}\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\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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",
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\" 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\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
  }
@@ -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, Checkmark } from "@elliemae/ds-icons";
6
6
  import {
7
7
  StyledGlobalMenuItemWrapper,
@@ -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,
@@ -46,6 +47,7 @@ const DSMenuItemsSingleWithSubmenu = (props) => {
46
47
  maxHeight
47
48
  }
48
49
  } = propsWithDefault;
50
+ const { getOwnerProps } = useOwnerProps(propsWithDefault);
49
51
  const [delayedIsOpened, setDelayedIsOpened] = React2.useState(false);
50
52
  const { minWidth: _widthToRemoveFromGlobals, ...restXStyled } = xstyledProps;
51
53
  React2.useEffect(() => {
@@ -98,15 +100,16 @@ const DSMenuItemsSingleWithSubmenu = (props) => {
98
100
  onClick: handleOnClick,
99
101
  isSelected: isSubmenuOpened,
100
102
  disabled,
101
- "aria-disabled": applyAriaDisabled,
103
+ "aria-disabled": applyAriaDisabled || disabled || readOnly,
102
104
  isActive,
103
105
  onMouseEnter: onMouseEnterHandler,
104
106
  onMouseLeave: onMouseLeaveHandler,
105
107
  as: "div",
106
108
  innerRef,
107
109
  "data-type": "single-with-submenu",
110
+ getOwnerProps,
108
111
  children: [
109
- Render !== void 0 ? /* @__PURE__ */ jsx(Render, { ...propsWithDefault }) : /* @__PURE__ */ jsxs(StyledContentWrapper, { cols: gridLayout, gutter: "xxs", alignItems: "center", children: [
112
+ Render !== void 0 ? /* @__PURE__ */ jsx(Render, { ...propsWithDefault }) : /* @__PURE__ */ jsxs(StyledContentWrapper, { cols: gridLayout, gutter: "xxs", alignItems: "center", getOwnerProps, children: [
110
113
  isSelected ? /* @__PURE__ */ jsx(
111
114
  Checkmark,
112
115
  {
@@ -114,10 +117,10 @@ const DSMenuItemsSingleWithSubmenu = (props) => {
114
117
  color: disabled || applyAriaDisabled ? ["neutral", "500"] : ["brand-primary", "600"]
115
118
  }
116
119
  ) : /* @__PURE__ */ jsx("div", {}),
117
- /* @__PURE__ */ jsx(StyleMenuItemLabel, { children: label }),
118
- secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, { children: secondaryLabel }),
119
- /* @__PURE__ */ jsxs(StyledIconContainer, { children: [
120
- /* @__PURE__ */ jsx(StyledVerticalSeparator, {}),
120
+ /* @__PURE__ */ jsx(StyleMenuItemLabel, { getOwnerProps, variant: "b2", component: "span", children: label }),
121
+ secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, { getOwnerProps, children: secondaryLabel }),
122
+ /* @__PURE__ */ jsxs(StyledIconContainer, { getOwnerProps, children: [
123
+ /* @__PURE__ */ jsx(StyledVerticalSeparator, { getOwnerProps }),
121
124
  rightAddon === "ellipsis" ? /* @__PURE__ */ jsx(
122
125
  StyledEllipsisButton,
123
126
  {
@@ -125,6 +128,7 @@ const DSMenuItemsSingleWithSubmenu = (props) => {
125
128
  onClick: onEllipsisClick,
126
129
  disabled,
127
130
  applyAriaDisabled,
131
+ getOwnerProps,
128
132
  children: /* @__PURE__ */ jsx(
129
133
  MoreOptionsVert,
130
134
  {
@@ -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 } 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 // 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 >\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n {isSelected ? (\n <Checkmark\n size=\"s\"\n color={disabled || applyAriaDisabled ? ['neutral', '500'] : ['brand-primary', '600']}\n />\n ) : (\n <div />\n )}\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\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;ACsHb,cAeE,YAfF;AArHV,OAAOA,YAAW;AAClB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB,cAAc,iBAAiB;AACzD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EAEE;AAAA,OACK;AACP,SAAS,qCAAqC;AAE9C,MAAM,+BAAyF,CAAC,UAAU;AACxG,QAAM,EAAE,kBAAkB,aAAa,cAAc,cAAc,IAAI,8BAA8B,KAAK;AAC1G,QAAM,EAAE,qBAAqB,qBAAqB,gBAAgB,IAAI;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,eAAe;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI;AAKJ,QAAM,CAAC,iBAAiB,kBAAkB,IAAIA,OAAM,SAAS,KAAK;AAGlE,QAAM,EAAE,UAAU,2BAA2B,GAAG,YAAY,IAAI;AAEhE,EAAAA,OAAM,UAAU,MAAM;AACpB,eAAW,MAAM,mBAAmB,eAAe,CAAC;AAAA,EACtD,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,aAAaA,OAAM,QAAQ,MAAM;AACrC,UAAM,OAAO,CAAC,QAAQ,MAAM;AAC5B,QAAI,eAAgB,MAAK,KAAK,aAAa;AAC3C,SAAK,KAAK,aAAa;AACvB,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAA2C;AAC1C,UAAI,YAAY,kBAAmB;AACnC,gBAAU,CAAC;AAAA,IACb;AAAA,IACA,CAAC,UAAU,mBAAmB,OAAO;AAAA,EACvC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,SAAS,WAAW,CAAC;AAAA,MACrB;AAAA,MACA,0BAAyB;AAAA,MACzB,0BAA0B,CAAC,eAAe,aAAa,cAAc,UAAU;AAAA,MAC/E;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc,CAAC,IAAI,CAAC;AAAA,MACpB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,eAAe,EAAE,GAAG,eAAe,GAAG,OAAO;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,sBAAoB;AAAA,MACpB,IAAG;AAAA,MACH,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,oBAAkB,wBAAwB,IAAI;AAAA,MAC9C,IAAI;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,SAAS;AAAA,UACT,YAAY;AAAA,UACZ;AAAA,UACA,iBAAe;AAAA,UACf;AAAA,UACA,cAAc;AAAA,UACd,cAAc;AAAA,UACd,IAAI;AAAA,UACJ;AAAA,UACA,aAAU;AAAA,UAET;AAAA,uBAAW,SACV,oBAAC,UAAQ,GAAG,kBAAkB,IAE9B,qBAAC,wBAAqB,MAAM,YAAY,QAAO,OAAM,YAAW,UAC7D;AAAA,2BACC;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,OAAO,YAAY,oBAAoB,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK;AAAA;AAAA,cACrF,IAEA,oBAAC,SAAI;AAAA,cAEP,oBAAC,sBAAoB,iBAAM;AAAA,cAC1B,mBAAmB,UAClB,oBAAC,+BAA6B,0BAAe;AAAA,cAE/C,qBAAC,uBACC;AAAA,oCAAC,2BAAwB;AAAA,gBACxB,eAAe,aACd;AAAA,kBAAC;AAAA;AAAA,oBACC,UAAU;AAAA,oBACV,SAAS;AAAA,oBACT;AAAA,oBACA;AAAA,oBAEA;AAAA,sBAAC;AAAA;AAAA,wBACC,WAAU;AAAA,wBACV,OAAO,YAAY,oBAAoB,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK;AAAA,wBACnF,MAAK;AAAA;AAAA,oBACP;AAAA;AAAA,gBACF,IAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO,YAAY,oBAAoB,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK;AAAA,oBACnF,MAAK;AAAA;AAAA,gBACP;AAAA,iBAEJ;AAAA,eACF;AAAA,YAEF,oBAAC,UAAK,IAAI,wBAAwB,IAAI,IAAI,OAAO,EAAE,SAAS,OAAO,GAAG,qEAEtE;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAGA,6BAA6B,cAAc;AAC3C,MAAM,yCAAyC,SAAS,4BAA4B;AAEpF,uCAAuC,YAAY;",
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\" 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\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",
3
+ "version": "3.70.0-next.30",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Menu Items Single With Submenu",
6
6
  "files": [
@@ -36,23 +36,23 @@
36
36
  "indent": 4
37
37
  },
38
38
  "dependencies": {
39
- "@elliemae/ds-icons": "3.70.0-next.3",
40
- "@elliemae/ds-grid": "3.70.0-next.3",
41
- "@elliemae/ds-props-helpers": "3.70.0-next.3",
42
- "@elliemae/ds-system": "3.70.0-next.3",
43
- "@elliemae/ds-menu-items-commons": "3.70.0-next.3"
39
+ "@elliemae/ds-grid": "3.70.0-next.30",
40
+ "@elliemae/ds-icons": "3.70.0-next.30",
41
+ "@elliemae/ds-props-helpers": "3.70.0-next.30",
42
+ "@elliemae/ds-menu-items-commons": "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.17.21",
47
+ "lodash-es": "^4.18.1",
48
48
  "styled-components": "~5.3.9",
49
- "@elliemae/ds-monorepo-devops": "3.70.0-next.3"
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.17.21",
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"