@elliemae/ds-menu-items 3.22.0-next.23 → 3.22.0-next.24
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/components/SingleWithSubmenuItem/index.js +5 -0
- package/dist/cjs/components/SingleWithSubmenuItem/index.js.map +2 -2
- package/dist/cjs/components/SkeletonMenuItem/index.js +2 -1
- package/dist/cjs/components/SkeletonMenuItem/index.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/esm/components/SingleWithSubmenuItem/index.js +5 -0
- package/dist/esm/components/SingleWithSubmenuItem/index.js.map +2 -2
- package/dist/esm/components/SkeletonMenuItem/index.js +2 -1
- package/dist/esm/components/SkeletonMenuItem/index.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/types/react-desc-prop-types.d.ts +1 -1
- package/package.json +8 -8
|
@@ -41,6 +41,7 @@ var import_react_desc_prop_types = require("../../react-desc-prop-types.js");
|
|
|
41
41
|
var import_styled = require("../styled.js");
|
|
42
42
|
var import_useGetSubmenuHandlers = require("./useGetSubmenuHandlers.js");
|
|
43
43
|
var import_exported_related = require("../../exported-related/index.js");
|
|
44
|
+
var import_useGetGlobalsAndXStyledProps = require("../useGetGlobalsAndXStyledProps.js");
|
|
44
45
|
const SingleWithSubmenuItem = (props) => {
|
|
45
46
|
const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(
|
|
46
47
|
props,
|
|
@@ -74,6 +75,8 @@ const SingleWithSubmenuItem = (props) => {
|
|
|
74
75
|
}
|
|
75
76
|
} = propsWithDefault;
|
|
76
77
|
const [delayedIsOpened, setDelayedIsOpened] = (0, import_react.useState)(false);
|
|
78
|
+
const { globalAttributes, xStyledProps } = (0, import_useGetGlobalsAndXStyledProps.useGetGlobalsAndXStyledProps)(propsWithDefault);
|
|
79
|
+
const { minWidth: customMinWidth, ...restXStyled } = xStyledProps;
|
|
77
80
|
(0, import_react.useEffect)(() => {
|
|
78
81
|
setTimeout(() => setDelayedIsOpened(isSubmenuOpened));
|
|
79
82
|
}, [isSubmenuOpened]);
|
|
@@ -122,6 +125,8 @@ const SingleWithSubmenuItem = (props) => {
|
|
|
122
125
|
as: "div",
|
|
123
126
|
ref: innerRef,
|
|
124
127
|
"data-type": "single-with-submenu",
|
|
128
|
+
...globalAttributes,
|
|
129
|
+
...restXStyled,
|
|
125
130
|
children: [
|
|
126
131
|
Render !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, { ...propsWithDefault }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledContentWrapper, { cols: gridLayout, gutter: "xxs", alignItems: "center", children: [
|
|
127
132
|
isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Checkmark, { size: "s", color: disabled ? ["neutral", "500"] : ["brand-primary", "600"] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/SingleWithSubmenuItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useEffect, useState, useMemo } from 'react';\nimport { MoreOptionsVert, ChevronRight, Checkmark } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSingleWithSubmenuProps, itemProps } from '../../react-desc-prop-types.js';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledIconContainer,\n StyledEllipsisButton,\n StyledGlobalMenuItemWrapper,\n StyledVerticalSeparator,\n StyledContentWrapper,\n} from '../styled.js';\nimport { useGetSubmenuHandlers } from './useGetSubmenuHandlers.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst SingleWithSubmenuItem: React.ComponentType<DSMenuItemT.SingleWithSubmenuProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSMenuItemT.SingleWithSubmenuProps>>(\n props,\n defaultSingleWithSubmenuProps,\n );\n\n useValidateTypescriptPropTypes(propsWithDefault, itemProps, `${DSMenuItemName}SingleWithSubmenu`);\n\n const {\n dsId,\n label,\n secondaryLabel,\n isActive,\n disabled,\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] = useState(false);\n\n useEffect(() => {\n setTimeout(() => setDelayedIsOpened(isSubmenuOpened));\n }, [isSubmenuOpened]);\n\n const { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick } = useGetSubmenuHandlers(propsWithDefault);\n\n const gridLayout = 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 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 as=\"li\"\n role=\"option\"\n aria-selected={isSubmenuOpened}\n aria-describedby={`dropdownmenu-submenu-${dsId}`}\n id={dsId}\n >\n <StyledGlobalMenuItemWrapper\n pr={0}\n onClick={!disabled ? onClick : undefined}\n isSelected={isSubmenuOpened}\n disabled={disabled}\n isActive={isActive}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n as={'div' as keyof JSX.IntrinsicElements}\n ref={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 size=\"s\" color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} />\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 tabIndex={-1} onClick={onEllipsisClick} disabled={disabled}>\n <MoreOptionsVert\n className=\"ds-dropdown-menu-v2-more-options\"\n color={disabled ? ['neutral', '500'] : ['brand-primary', '600']}\n size=\"s\"\n />\n </StyledEllipsisButton>\n ) : (\n <ChevronRight color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} size=\"s\" />\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\nSingleWithSubmenuItem.displayName = `${DSMenuItemName}SingleWithSubmenu`;\nconst SingleWithSubmenuItemWithSchema = describe(SingleWithSubmenuItem);\nSingleWithSubmenuItemWithSchema.propTypes = itemProps;\n\nexport { SingleWithSubmenuItem, SingleWithSubmenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable max-lines */\nimport React, { useEffect, useState, useMemo } from 'react';\nimport { MoreOptionsVert, ChevronRight, Checkmark } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSingleWithSubmenuProps, itemProps } from '../../react-desc-prop-types.js';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledIconContainer,\n StyledEllipsisButton,\n StyledGlobalMenuItemWrapper,\n StyledVerticalSeparator,\n StyledContentWrapper,\n} from '../styled.js';\nimport { useGetSubmenuHandlers } from './useGetSubmenuHandlers.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\n\nconst SingleWithSubmenuItem: React.ComponentType<DSMenuItemT.SingleWithSubmenuProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSMenuItemT.SingleWithSubmenuProps>>(\n props,\n defaultSingleWithSubmenuProps,\n );\n\n useValidateTypescriptPropTypes(propsWithDefault, itemProps, `${DSMenuItemName}SingleWithSubmenu`);\n\n const {\n dsId,\n label,\n secondaryLabel,\n isActive,\n disabled,\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] = useState(false);\n\n const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(propsWithDefault);\n const { minWidth: customMinWidth, ...restXStyled } = xStyledProps;\n\n useEffect(() => {\n setTimeout(() => setDelayedIsOpened(isSubmenuOpened));\n }, [isSubmenuOpened]);\n\n const { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick } = useGetSubmenuHandlers(propsWithDefault);\n\n const gridLayout = 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 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 as=\"li\"\n role=\"option\"\n aria-selected={isSubmenuOpened}\n aria-describedby={`dropdownmenu-submenu-${dsId}`}\n id={dsId}\n >\n <StyledGlobalMenuItemWrapper\n pr={0}\n onClick={!disabled ? onClick : undefined}\n isSelected={isSubmenuOpened}\n disabled={disabled}\n isActive={isActive}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n as={'div' as keyof JSX.IntrinsicElements}\n ref={innerRef}\n data-type=\"single-with-submenu\"\n {...globalAttributes}\n {...restXStyled}\n >\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n {isSelected ? (\n <Checkmark size=\"s\" color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} />\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 tabIndex={-1} onClick={onEllipsisClick} disabled={disabled}>\n <MoreOptionsVert\n className=\"ds-dropdown-menu-v2-more-options\"\n color={disabled ? ['neutral', '500'] : ['brand-primary', '600']}\n size=\"s\"\n />\n </StyledEllipsisButton>\n ) : (\n <ChevronRight color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} size=\"s\" />\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\nSingleWithSubmenuItem.displayName = `${DSMenuItemName}SingleWithSubmenu`;\nconst SingleWithSubmenuItemWithSchema = describe(SingleWithSubmenuItem);\nSingleWithSubmenuItemWithSchema.propTypes = itemProps;\n\nexport { SingleWithSubmenuItem, SingleWithSubmenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -38,11 +38,12 @@ var import_react = require("react");
|
|
|
38
38
|
var import_ds_skeleton = require("@elliemae/ds-skeleton");
|
|
39
39
|
var import_styled = require("../styled.js");
|
|
40
40
|
const SkeletonMenuItem = (props) => {
|
|
41
|
-
const { wrapperStyles, isActive } = props;
|
|
41
|
+
const { wrapperStyles, isActive, dsId } = props;
|
|
42
42
|
const gridLayout = (0, import_react.useMemo)(() => ["16px", "auto"], []);
|
|
43
43
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
44
44
|
import_styled.StyledGlobalMenuItemWrapper,
|
|
45
45
|
{
|
|
46
|
+
id: dsId,
|
|
46
47
|
"data-type": "skeleton",
|
|
47
48
|
"data-testid": "ds-skeleton-menu-item",
|
|
48
49
|
role: "option",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/SkeletonMenuItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo } from 'react';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { type DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { StyledContentWrapper, StyledGlobalMenuItemWrapper } from '../styled.js';\nconst SkeletonMenuItem: React.ComponentType<DSMenuItemT.SkeletonProps> = (props) => {\n const { wrapperStyles, isActive } = props;\n const gridLayout = useMemo(() => ['16px', 'auto'], []);\n\n return (\n <StyledGlobalMenuItemWrapper\n data-type=\"skeleton\"\n data-testid=\"ds-skeleton-menu-item\"\n role=\"option\"\n aria-label=\"skeleton\"\n style={wrapperStyles}\n isActive={isActive}\n >\n <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n <DSSkeleton variant=\"rectangular\" width={'100%'} />\n <DSSkeleton variant=\"rectangular\" width={'100%'} />\n </StyledContentWrapper>\n </StyledGlobalMenuItemWrapper>\n );\n};\n\nexport { SkeletonMenuItem, SkeletonMenuItem as DSSkeletonMenuItem };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { type DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { StyledContentWrapper, StyledGlobalMenuItemWrapper } from '../styled.js';\nconst SkeletonMenuItem: React.ComponentType<DSMenuItemT.SkeletonProps> = (props) => {\n const { wrapperStyles, isActive, dsId } = props;\n const gridLayout = useMemo(() => ['16px', 'auto'], []);\n\n return (\n <StyledGlobalMenuItemWrapper\n id={dsId}\n data-type=\"skeleton\"\n data-testid=\"ds-skeleton-menu-item\"\n role=\"option\"\n aria-label=\"skeleton\"\n style={wrapperStyles}\n isActive={isActive}\n >\n <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n <DSSkeleton variant=\"rectangular\" width={'100%'} />\n <DSSkeleton variant=\"rectangular\" width={'100%'} />\n </StyledContentWrapper>\n </StyledGlobalMenuItemWrapper>\n );\n};\n\nexport { SkeletonMenuItem, SkeletonMenuItem as DSSkeletonMenuItem };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBjB;AAlBN,mBAA+B;AAC/B,yBAA2B;AAE3B,oBAAkE;AAClE,MAAM,mBAAmE,CAAC,UAAU;AAClF,QAAM,EAAE,eAAe,UAAU,KAAK,IAAI;AAC1C,QAAM,iBAAa,sBAAQ,MAAM,CAAC,QAAQ,MAAM,GAAG,CAAC,CAAC;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,cAAW;AAAA,MACX,OAAO;AAAA,MACP;AAAA,MAEA,uDAAC,sCAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E;AAAA,oDAAC,iCAAW,SAAQ,eAAc,OAAO,QAAQ;AAAA,QACjD,4CAAC,iCAAW,SAAQ,eAAc,OAAO,QAAQ;AAAA,SACnD;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { PropsWithChildren, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nexport namespace DSMenuItemT {\n export interface CommonProps<T = Record<string, unknown>> {\n dsId: string;\n innerRef?: React.RefObject<HTMLLIElement> | ((_ref: HTMLLIElement) => void);\n wrapperStyles?: Record<string, unknown>;\n render?: React.ComponentType<T>;\n original?: Record<string, unknown>;\n }\n\n export interface ActionProps extends CommonProps<ActionProps> {\n label?: string;\n secondaryLabel?: string;\n value?: unknown;\n disabled?: boolean;\n isActive?: boolean;\n onClick?: React.MouseEventHandler;\n optionsShouldHavePadding?: boolean;\n tabIndex: WCAGTabIndex;\n }\n\n export interface SkeletonProps extends CommonProps<ActionProps> {\n secondaryLabel?: string;\n isActive?: boolean;\n onClick?: React.MouseEventHandler;\n tabIndex
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { PropsWithChildren, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nexport namespace DSMenuItemT {\n export interface CommonProps<T = Record<string, unknown>> {\n dsId: string;\n innerRef?: React.RefObject<HTMLLIElement> | ((_ref: HTMLLIElement) => void);\n wrapperStyles?: Record<string, unknown>;\n render?: React.ComponentType<T>;\n original?: Record<string, unknown>;\n }\n\n export interface ActionProps extends CommonProps<ActionProps> {\n label?: string;\n secondaryLabel?: string;\n value?: unknown;\n disabled?: boolean;\n isActive?: boolean;\n onClick?: React.MouseEventHandler;\n optionsShouldHavePadding?: boolean;\n tabIndex: WCAGTabIndex;\n }\n\n export interface SkeletonProps extends CommonProps<ActionProps> {\n secondaryLabel?: string;\n isActive?: boolean;\n onClick?: React.MouseEventHandler;\n tabIndex?: WCAGTabIndex;\n }\n\n export interface MultiProps extends CommonProps<MultiProps> {\n label?: string;\n isActive?: boolean;\n disabled?: boolean;\n isSelected?: boolean;\n onClick?: React.MouseEventHandler;\n onMouseDown?: React.MouseEventHandler;\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n dataTestid?: string;\n tabIndex?: WCAGTabIndex;\n }\n\n export interface SingleProps extends CommonProps<SingleProps> {\n label?: string;\n secondaryLabel?: string;\n isActive?: boolean;\n disabled?: boolean;\n isSelected?: boolean;\n onClick?: React.MouseEventHandler;\n onMouseDown?: React.MouseEventHandler;\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n dataTestid?: string;\n tabIndex?: number;\n }\n\n export interface SubmenuProps extends CommonProps<SubmenuProps> {\n label?: string;\n secondaryLabel?: string;\n isActive?: boolean;\n disabled?: boolean;\n isSubmenuOpened?: boolean;\n onSubmenuOpen?: React.MouseEventHandler;\n onSubmenuClose?: React.MouseEventHandler;\n rightAddon?: 'ellipsis' | 'chevron';\n optionsShouldHavePadding?: boolean;\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n Dropdown: React.ComponentType<PropsWithChildren<SubmenuProps['dropdownProps']>>;\n dropdownProps?: {\n options: any[];\n onSubmenuToggle?: (\n nextOpenedSubmenus: Record<string, boolean>,\n submenu: any,\n e: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n openedSubmenus?: Record<string, boolean>;\n selectedOptions?: Record<string, boolean>;\n onKeyDown?: React.KeyboardEventHandler;\n onOptionClick?: (\n nextSelectedOptions: Record<string, boolean>,\n clickedOption: any,\n e: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n onClickOutside?: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n minWidth?: SizingProps['minWidth'];\n maxHeight?: SizingProps['maxHeight'];\n [key: string]: unknown;\n };\n }\n\n export interface SectionProps extends CommonProps<SectionProps> {\n label?: string;\n }\n\n export type SeparatorProps = CommonProps<SeparatorProps>;\n\n export interface SingleWithSubmenuProps extends Omit<SingleProps, 'render'>, Omit<SubmenuProps, 'render'> {\n render?: React.ComponentType<SingleWithSubmenuProps>;\n }\n export type AllTypeItems = ActionProps | MultiProps | SingleProps | SubmenuProps | SectionProps | SeparatorProps;\n}\n\nconst noop = () => null;\n\nexport const defaultCommonProps: Partial<Omit<DSMenuItemT.CommonProps, 'render'>> = {\n innerRef: noop,\n wrapperStyles: {},\n};\n\nexport const defaultActionProps: Partial<DSMenuItemT.ActionProps> = {\n ...defaultCommonProps,\n label: '',\n value: undefined,\n disabled: false,\n isActive: false,\n onClick: noop,\n optionsShouldHavePadding: false,\n tabIndex: 0,\n};\n\nexport const defaultMultiProps: Partial<DSMenuItemT.MultiProps> = {\n ...defaultCommonProps,\n label: '',\n isActive: false,\n disabled: false,\n isSelected: false,\n onClick: noop,\n onMouseDown: noop,\n onMouseEnter: noop,\n onMouseLeave: noop,\n tabIndex: 0,\n};\n\nexport const defaultSingleProps: Partial<DSMenuItemT.SingleProps> = {\n ...defaultCommonProps,\n label: '',\n isActive: false,\n disabled: false,\n isSelected: false,\n onClick: noop,\n onMouseDown: noop,\n onMouseEnter: noop,\n onMouseLeave: noop,\n dataTestid: 'ds-menu-item',\n tabIndex: 0,\n};\n\nexport const defaultSubmenuProps: Partial<DSMenuItemT.SubmenuProps> = {\n ...defaultCommonProps,\n label: '',\n isActive: false,\n disabled: false,\n isSubmenuOpened: false,\n onSubmenuOpen: noop,\n rightAddon: 'chevron',\n optionsShouldHavePadding: false,\n Dropdown: noop,\n dropdownProps: {\n options: [],\n onSubmenuToggle: noop,\n openedSubmenus: {},\n selectedOptions: {},\n onKeyDown: noop,\n onOptionClick: noop,\n onClickOutside: noop,\n minWidth: 'auto',\n maxHeight: 'auto',\n },\n};\n\nexport const defaultSectionProps: Partial<DSMenuItemT.SectionProps> = {\n ...defaultCommonProps,\n label: '',\n};\n\nexport const defaultSeparatorProps: Partial<DSMenuItemT.SeparatorProps> = {\n ...defaultCommonProps,\n};\n\nexport const defaultSingleWithSubmenuProps: Partial<Omit<DSMenuItemT.SingleWithSubmenuProps, 'render'>> = {\n ...defaultSingleProps,\n ...defaultSubmenuProps,\n};\n\nexport const itemProps = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n dsId: PropTypes.string,\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n wrapperStyles: PropTypes.object,\n render: PropTypes.func,\n} as WeakValidationMap<unknown>;\n\nexport const MenuItemPropTypes = {\n dsId: PropTypes.string.description('The unique ID for the menu item.').isRequired,\n innerRef: PropTypes.oneOfType([\n PropTypes.shape({\n current: PropTypes.instanceOf(HTMLLIElement),\n }),\n PropTypes.func.description(\n ' A ref object or callback function to access the underlying DOM element (HTMLLIElement) of the menu item.',\n ),\n ]),\n render: PropTypes.func.description('A custom render function to render the content of the menu item.'),\n} as WeakValidationMap<unknown>;\n\nexport const SingleMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n isActive: PropTypes.bool.description('Whether the menu item is active.'),\n disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const MultiMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n isActive: PropTypes.bool.description('Whether the menu item is active.'),\n disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const ActionMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n value: PropTypes.any.description('The value of the menu item.'),\n disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n isActive: PropTypes.bool.description('Whether the menu item is active.'),\n} as WeakValidationMap<unknown>;\n\nexport const SectionMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -15,6 +15,7 @@ import {
|
|
|
15
15
|
} from "../styled.js";
|
|
16
16
|
import { useGetSubmenuHandlers } from "./useGetSubmenuHandlers.js";
|
|
17
17
|
import { DSMenuItemName } from "../../exported-related/index.js";
|
|
18
|
+
import { useGetGlobalsAndXStyledProps } from "../useGetGlobalsAndXStyledProps.js";
|
|
18
19
|
const SingleWithSubmenuItem = (props) => {
|
|
19
20
|
const propsWithDefault = useMemoMergePropsWithDefault(
|
|
20
21
|
props,
|
|
@@ -48,6 +49,8 @@ const SingleWithSubmenuItem = (props) => {
|
|
|
48
49
|
}
|
|
49
50
|
} = propsWithDefault;
|
|
50
51
|
const [delayedIsOpened, setDelayedIsOpened] = useState(false);
|
|
52
|
+
const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(propsWithDefault);
|
|
53
|
+
const { minWidth: customMinWidth, ...restXStyled } = xStyledProps;
|
|
51
54
|
useEffect(() => {
|
|
52
55
|
setTimeout(() => setDelayedIsOpened(isSubmenuOpened));
|
|
53
56
|
}, [isSubmenuOpened]);
|
|
@@ -96,6 +99,8 @@ const SingleWithSubmenuItem = (props) => {
|
|
|
96
99
|
as: "div",
|
|
97
100
|
ref: innerRef,
|
|
98
101
|
"data-type": "single-with-submenu",
|
|
102
|
+
...globalAttributes,
|
|
103
|
+
...restXStyled,
|
|
99
104
|
children: [
|
|
100
105
|
Render !== void 0 ? /* @__PURE__ */ jsx(Render, { ...propsWithDefault }) : /* @__PURE__ */ jsxs(StyledContentWrapper, { cols: gridLayout, gutter: "xxs", alignItems: "center", children: [
|
|
101
106
|
isSelected ? /* @__PURE__ */ jsx(Checkmark, { size: "s", color: disabled ? ["neutral", "500"] : ["brand-primary", "600"] }) : /* @__PURE__ */ jsx("div", {}),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SingleWithSubmenuItem/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useEffect, useState, useMemo } from 'react';\nimport { MoreOptionsVert, ChevronRight, Checkmark } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSingleWithSubmenuProps, itemProps } from '../../react-desc-prop-types.js';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledIconContainer,\n StyledEllipsisButton,\n StyledGlobalMenuItemWrapper,\n StyledVerticalSeparator,\n StyledContentWrapper,\n} from '../styled.js';\nimport { useGetSubmenuHandlers } from './useGetSubmenuHandlers.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\n\nconst SingleWithSubmenuItem: React.ComponentType<DSMenuItemT.SingleWithSubmenuProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSMenuItemT.SingleWithSubmenuProps>>(\n props,\n defaultSingleWithSubmenuProps,\n );\n\n useValidateTypescriptPropTypes(propsWithDefault, itemProps, `${DSMenuItemName}SingleWithSubmenu`);\n\n const {\n dsId,\n label,\n secondaryLabel,\n isActive,\n disabled,\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] = useState(false);\n\n useEffect(() => {\n setTimeout(() => setDelayedIsOpened(isSubmenuOpened));\n }, [isSubmenuOpened]);\n\n const { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick } = useGetSubmenuHandlers(propsWithDefault);\n\n const gridLayout = 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 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 as=\"li\"\n role=\"option\"\n aria-selected={isSubmenuOpened}\n aria-describedby={`dropdownmenu-submenu-${dsId}`}\n id={dsId}\n >\n <StyledGlobalMenuItemWrapper\n pr={0}\n onClick={!disabled ? onClick : undefined}\n isSelected={isSubmenuOpened}\n disabled={disabled}\n isActive={isActive}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n as={'div' as keyof JSX.IntrinsicElements}\n ref={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 size=\"s\" color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} />\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 tabIndex={-1} onClick={onEllipsisClick} disabled={disabled}>\n <MoreOptionsVert\n className=\"ds-dropdown-menu-v2-more-options\"\n color={disabled ? ['neutral', '500'] : ['brand-primary', '600']}\n size=\"s\"\n />\n </StyledEllipsisButton>\n ) : (\n <ChevronRight color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} size=\"s\" />\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\nSingleWithSubmenuItem.displayName = `${DSMenuItemName}SingleWithSubmenu`;\nconst SingleWithSubmenuItemWithSchema = describe(SingleWithSubmenuItem);\nSingleWithSubmenuItemWithSchema.propTypes = itemProps;\n\nexport { SingleWithSubmenuItem, SingleWithSubmenuItemWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable max-lines */\nimport React, { useEffect, useState, useMemo } from 'react';\nimport { MoreOptionsVert, ChevronRight, Checkmark } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { defaultSingleWithSubmenuProps, itemProps } from '../../react-desc-prop-types.js';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledIconContainer,\n StyledEllipsisButton,\n StyledGlobalMenuItemWrapper,\n StyledVerticalSeparator,\n StyledContentWrapper,\n} from '../styled.js';\nimport { useGetSubmenuHandlers } from './useGetSubmenuHandlers.js';\nimport { DSMenuItemName } from '../../exported-related/index.js';\nimport { useGetGlobalsAndXStyledProps } from '../useGetGlobalsAndXStyledProps.js';\n\nconst SingleWithSubmenuItem: React.ComponentType<DSMenuItemT.SingleWithSubmenuProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSMenuItemT.SingleWithSubmenuProps>>(\n props,\n defaultSingleWithSubmenuProps,\n );\n\n useValidateTypescriptPropTypes(propsWithDefault, itemProps, `${DSMenuItemName}SingleWithSubmenu`);\n\n const {\n dsId,\n label,\n secondaryLabel,\n isActive,\n disabled,\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] = useState(false);\n\n const { globalAttributes, xStyledProps } = useGetGlobalsAndXStyledProps(propsWithDefault);\n const { minWidth: customMinWidth, ...restXStyled } = xStyledProps;\n\n useEffect(() => {\n setTimeout(() => setDelayedIsOpened(isSubmenuOpened));\n }, [isSubmenuOpened]);\n\n const { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick } = useGetSubmenuHandlers(propsWithDefault);\n\n const gridLayout = 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 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 as=\"li\"\n role=\"option\"\n aria-selected={isSubmenuOpened}\n aria-describedby={`dropdownmenu-submenu-${dsId}`}\n id={dsId}\n >\n <StyledGlobalMenuItemWrapper\n pr={0}\n onClick={!disabled ? onClick : undefined}\n isSelected={isSubmenuOpened}\n disabled={disabled}\n isActive={isActive}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n as={'div' as keyof JSX.IntrinsicElements}\n ref={innerRef}\n data-type=\"single-with-submenu\"\n {...globalAttributes}\n {...restXStyled}\n >\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <StyledContentWrapper cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n {isSelected ? (\n <Checkmark size=\"s\" color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} />\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 tabIndex={-1} onClick={onEllipsisClick} disabled={disabled}>\n <MoreOptionsVert\n className=\"ds-dropdown-menu-v2-more-options\"\n color={disabled ? ['neutral', '500'] : ['brand-primary', '600']}\n size=\"s\"\n />\n </StyledEllipsisButton>\n ) : (\n <ChevronRight color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} size=\"s\" />\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\nSingleWithSubmenuItem.displayName = `${DSMenuItemName}SingleWithSubmenu`;\nconst SingleWithSubmenuItemWithSchema = describe(SingleWithSubmenuItem);\nSingleWithSubmenuItemWithSchema.propTypes = itemProps;\n\nexport { SingleWithSubmenuItem, SingleWithSubmenuItemWithSchema };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,11 +4,12 @@ import { useMemo } from "react";
|
|
|
4
4
|
import { DSSkeleton } from "@elliemae/ds-skeleton";
|
|
5
5
|
import { StyledContentWrapper, StyledGlobalMenuItemWrapper } from "../styled.js";
|
|
6
6
|
const SkeletonMenuItem = (props) => {
|
|
7
|
-
const { wrapperStyles, isActive } = props;
|
|
7
|
+
const { wrapperStyles, isActive, dsId } = props;
|
|
8
8
|
const gridLayout = useMemo(() => ["16px", "auto"], []);
|
|
9
9
|
return /* @__PURE__ */ jsx(
|
|
10
10
|
StyledGlobalMenuItemWrapper,
|
|
11
11
|
{
|
|
12
|
+
id: dsId,
|
|
12
13
|
"data-type": "skeleton",
|
|
13
14
|
"data-testid": "ds-skeleton-menu-item",
|
|
14
15
|
role: "option",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SkeletonMenuItem/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { type DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { StyledContentWrapper, StyledGlobalMenuItemWrapper } from '../styled.js';\nconst SkeletonMenuItem: React.ComponentType<DSMenuItemT.SkeletonProps> = (props) => {\n const { wrapperStyles, isActive } = props;\n const gridLayout = useMemo(() => ['16px', 'auto'], []);\n\n return (\n <StyledGlobalMenuItemWrapper\n data-type=\"skeleton\"\n data-testid=\"ds-skeleton-menu-item\"\n role=\"option\"\n aria-label=\"skeleton\"\n style={wrapperStyles}\n isActive={isActive}\n >\n <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n <DSSkeleton variant=\"rectangular\" width={'100%'} />\n <DSSkeleton variant=\"rectangular\" width={'100%'} />\n </StyledContentWrapper>\n </StyledGlobalMenuItemWrapper>\n );\n};\n\nexport { SkeletonMenuItem, SkeletonMenuItem as DSSkeletonMenuItem };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { type DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { StyledContentWrapper, StyledGlobalMenuItemWrapper } from '../styled.js';\nconst SkeletonMenuItem: React.ComponentType<DSMenuItemT.SkeletonProps> = (props) => {\n const { wrapperStyles, isActive, dsId } = props;\n const gridLayout = useMemo(() => ['16px', 'auto'], []);\n\n return (\n <StyledGlobalMenuItemWrapper\n id={dsId}\n data-type=\"skeleton\"\n data-testid=\"ds-skeleton-menu-item\"\n role=\"option\"\n aria-label=\"skeleton\"\n style={wrapperStyles}\n isActive={isActive}\n >\n <StyledContentWrapper cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n <DSSkeleton variant=\"rectangular\" width={'100%'} />\n <DSSkeleton variant=\"rectangular\" width={'100%'} />\n </StyledContentWrapper>\n </StyledGlobalMenuItemWrapper>\n );\n};\n\nexport { SkeletonMenuItem, SkeletonMenuItem as DSSkeletonMenuItem };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACkBjB,SACE,KADF;AAlBN,SAAgB,eAAe;AAC/B,SAAS,kBAAkB;AAE3B,SAAS,sBAAsB,mCAAmC;AAClE,MAAM,mBAAmE,CAAC,UAAU;AAClF,QAAM,EAAE,eAAe,UAAU,KAAK,IAAI;AAC1C,QAAM,aAAa,QAAQ,MAAM,CAAC,QAAQ,MAAM,GAAG,CAAC,CAAC;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,cAAW;AAAA,MACX,OAAO;AAAA,MACP;AAAA,MAEA,+BAAC,wBAAqB,MAAM,YAAY,WAAU,QAAO,QAAO,OAAM,YAAW,UAC/E;AAAA,4BAAC,cAAW,SAAQ,eAAc,OAAO,QAAQ;AAAA,QACjD,oBAAC,cAAW,SAAQ,eAAc,OAAO,QAAQ;AAAA,SACnD;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { PropsWithChildren, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nexport namespace DSMenuItemT {\n export interface CommonProps<T = Record<string, unknown>> {\n dsId: string;\n innerRef?: React.RefObject<HTMLLIElement> | ((_ref: HTMLLIElement) => void);\n wrapperStyles?: Record<string, unknown>;\n render?: React.ComponentType<T>;\n original?: Record<string, unknown>;\n }\n\n export interface ActionProps extends CommonProps<ActionProps> {\n label?: string;\n secondaryLabel?: string;\n value?: unknown;\n disabled?: boolean;\n isActive?: boolean;\n onClick?: React.MouseEventHandler;\n optionsShouldHavePadding?: boolean;\n tabIndex: WCAGTabIndex;\n }\n\n export interface SkeletonProps extends CommonProps<ActionProps> {\n secondaryLabel?: string;\n isActive?: boolean;\n onClick?: React.MouseEventHandler;\n tabIndex
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { PropsWithChildren, WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nexport namespace DSMenuItemT {\n export interface CommonProps<T = Record<string, unknown>> {\n dsId: string;\n innerRef?: React.RefObject<HTMLLIElement> | ((_ref: HTMLLIElement) => void);\n wrapperStyles?: Record<string, unknown>;\n render?: React.ComponentType<T>;\n original?: Record<string, unknown>;\n }\n\n export interface ActionProps extends CommonProps<ActionProps> {\n label?: string;\n secondaryLabel?: string;\n value?: unknown;\n disabled?: boolean;\n isActive?: boolean;\n onClick?: React.MouseEventHandler;\n optionsShouldHavePadding?: boolean;\n tabIndex: WCAGTabIndex;\n }\n\n export interface SkeletonProps extends CommonProps<ActionProps> {\n secondaryLabel?: string;\n isActive?: boolean;\n onClick?: React.MouseEventHandler;\n tabIndex?: WCAGTabIndex;\n }\n\n export interface MultiProps extends CommonProps<MultiProps> {\n label?: string;\n isActive?: boolean;\n disabled?: boolean;\n isSelected?: boolean;\n onClick?: React.MouseEventHandler;\n onMouseDown?: React.MouseEventHandler;\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n dataTestid?: string;\n tabIndex?: WCAGTabIndex;\n }\n\n export interface SingleProps extends CommonProps<SingleProps> {\n label?: string;\n secondaryLabel?: string;\n isActive?: boolean;\n disabled?: boolean;\n isSelected?: boolean;\n onClick?: React.MouseEventHandler;\n onMouseDown?: React.MouseEventHandler;\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n dataTestid?: string;\n tabIndex?: number;\n }\n\n export interface SubmenuProps extends CommonProps<SubmenuProps> {\n label?: string;\n secondaryLabel?: string;\n isActive?: boolean;\n disabled?: boolean;\n isSubmenuOpened?: boolean;\n onSubmenuOpen?: React.MouseEventHandler;\n onSubmenuClose?: React.MouseEventHandler;\n rightAddon?: 'ellipsis' | 'chevron';\n optionsShouldHavePadding?: boolean;\n onMouseEnter?: React.MouseEventHandler;\n onMouseLeave?: React.MouseEventHandler;\n Dropdown: React.ComponentType<PropsWithChildren<SubmenuProps['dropdownProps']>>;\n dropdownProps?: {\n options: any[];\n onSubmenuToggle?: (\n nextOpenedSubmenus: Record<string, boolean>,\n submenu: any,\n e: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n openedSubmenus?: Record<string, boolean>;\n selectedOptions?: Record<string, boolean>;\n onKeyDown?: React.KeyboardEventHandler;\n onOptionClick?: (\n nextSelectedOptions: Record<string, boolean>,\n clickedOption: any,\n e: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n onClickOutside?: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n minWidth?: SizingProps['minWidth'];\n maxHeight?: SizingProps['maxHeight'];\n [key: string]: unknown;\n };\n }\n\n export interface SectionProps extends CommonProps<SectionProps> {\n label?: string;\n }\n\n export type SeparatorProps = CommonProps<SeparatorProps>;\n\n export interface SingleWithSubmenuProps extends Omit<SingleProps, 'render'>, Omit<SubmenuProps, 'render'> {\n render?: React.ComponentType<SingleWithSubmenuProps>;\n }\n export type AllTypeItems = ActionProps | MultiProps | SingleProps | SubmenuProps | SectionProps | SeparatorProps;\n}\n\nconst noop = () => null;\n\nexport const defaultCommonProps: Partial<Omit<DSMenuItemT.CommonProps, 'render'>> = {\n innerRef: noop,\n wrapperStyles: {},\n};\n\nexport const defaultActionProps: Partial<DSMenuItemT.ActionProps> = {\n ...defaultCommonProps,\n label: '',\n value: undefined,\n disabled: false,\n isActive: false,\n onClick: noop,\n optionsShouldHavePadding: false,\n tabIndex: 0,\n};\n\nexport const defaultMultiProps: Partial<DSMenuItemT.MultiProps> = {\n ...defaultCommonProps,\n label: '',\n isActive: false,\n disabled: false,\n isSelected: false,\n onClick: noop,\n onMouseDown: noop,\n onMouseEnter: noop,\n onMouseLeave: noop,\n tabIndex: 0,\n};\n\nexport const defaultSingleProps: Partial<DSMenuItemT.SingleProps> = {\n ...defaultCommonProps,\n label: '',\n isActive: false,\n disabled: false,\n isSelected: false,\n onClick: noop,\n onMouseDown: noop,\n onMouseEnter: noop,\n onMouseLeave: noop,\n dataTestid: 'ds-menu-item',\n tabIndex: 0,\n};\n\nexport const defaultSubmenuProps: Partial<DSMenuItemT.SubmenuProps> = {\n ...defaultCommonProps,\n label: '',\n isActive: false,\n disabled: false,\n isSubmenuOpened: false,\n onSubmenuOpen: noop,\n rightAddon: 'chevron',\n optionsShouldHavePadding: false,\n Dropdown: noop,\n dropdownProps: {\n options: [],\n onSubmenuToggle: noop,\n openedSubmenus: {},\n selectedOptions: {},\n onKeyDown: noop,\n onOptionClick: noop,\n onClickOutside: noop,\n minWidth: 'auto',\n maxHeight: 'auto',\n },\n};\n\nexport const defaultSectionProps: Partial<DSMenuItemT.SectionProps> = {\n ...defaultCommonProps,\n label: '',\n};\n\nexport const defaultSeparatorProps: Partial<DSMenuItemT.SeparatorProps> = {\n ...defaultCommonProps,\n};\n\nexport const defaultSingleWithSubmenuProps: Partial<Omit<DSMenuItemT.SingleWithSubmenuProps, 'render'>> = {\n ...defaultSingleProps,\n ...defaultSubmenuProps,\n};\n\nexport const itemProps = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n dsId: PropTypes.string,\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n wrapperStyles: PropTypes.object,\n render: PropTypes.func,\n} as WeakValidationMap<unknown>;\n\nexport const MenuItemPropTypes = {\n dsId: PropTypes.string.description('The unique ID for the menu item.').isRequired,\n innerRef: PropTypes.oneOfType([\n PropTypes.shape({\n current: PropTypes.instanceOf(HTMLLIElement),\n }),\n PropTypes.func.description(\n ' A ref object or callback function to access the underlying DOM element (HTMLLIElement) of the menu item.',\n ),\n ]),\n render: PropTypes.func.description('A custom render function to render the content of the menu item.'),\n} as WeakValidationMap<unknown>;\n\nexport const SingleMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n isActive: PropTypes.bool.description('Whether the menu item is active.'),\n disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const MultiMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n secondaryLabel: PropTypes.string.description('The secondary label of the menu item.'),\n isActive: PropTypes.bool.description('Whether the menu item is active.'),\n disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n isSelected: PropTypes.bool.description('Whether the menu item is selected.'),\n} as WeakValidationMap<unknown>;\n\nexport const ActionMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n value: PropTypes.any.description('The value of the menu item.'),\n disabled: PropTypes.bool.description('Whether the menu item is disabled.'),\n isActive: PropTypes.bool.description('Whether the menu item is active.'),\n} as WeakValidationMap<unknown>;\n\nexport const SectionMenuItemPropTypes = {\n ...MenuItemPropTypes,\n label: PropTypes.string.description('The label of the menu item.'),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -23,7 +23,7 @@ export declare namespace DSMenuItemT {
|
|
|
23
23
|
secondaryLabel?: string;
|
|
24
24
|
isActive?: boolean;
|
|
25
25
|
onClick?: React.MouseEventHandler;
|
|
26
|
-
tabIndex
|
|
26
|
+
tabIndex?: WCAGTabIndex;
|
|
27
27
|
}
|
|
28
28
|
interface MultiProps extends CommonProps<MultiProps> {
|
|
29
29
|
label?: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-menu-items",
|
|
3
|
-
"version": "3.22.0-next.
|
|
3
|
+
"version": "3.22.0-next.24",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Menu Items",
|
|
6
6
|
"files": [
|
|
@@ -37,16 +37,16 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@xstyled/system": "~3.7.3",
|
|
39
39
|
"@xstyled/util": "3.7.0",
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-grid": "3.22.0-next.24",
|
|
41
|
+
"@elliemae/ds-icons": "3.22.0-next.24",
|
|
42
|
+
"@elliemae/ds-form-checkbox": "3.22.0-next.24",
|
|
43
|
+
"@elliemae/ds-props-helpers": "3.22.0-next.24",
|
|
44
|
+
"@elliemae/ds-skeleton": "3.22.0-next.24",
|
|
45
|
+
"@elliemae/ds-system": "3.22.0-next.24"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@elliemae/pui-cli": "~9.0.0-next.22",
|
|
49
|
-
"@elliemae/ds-monorepo-devops": "3.22.0-next.
|
|
49
|
+
"@elliemae/ds-monorepo-devops": "3.22.0-next.24"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"lodash": "^4.17.21",
|