@elliemae/ds-menu-items 3.9.0-next.5 → 3.9.1-rc.9
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/ActionMenuItem/index.js +26 -4
- package/dist/cjs/components/ActionMenuItem/index.js.map +2 -2
- package/dist/cjs/components/SingleMenuItem/index.js +14 -3
- package/dist/cjs/components/SingleMenuItem/index.js.map +3 -3
- package/dist/cjs/components/SingleWithSubmenuItem/index.js +13 -2
- package/dist/cjs/components/SingleWithSubmenuItem/index.js.map +2 -2
- package/dist/cjs/components/SubmenuItem/index.js +15 -3
- package/dist/cjs/components/SubmenuItem/index.js.map +2 -2
- package/dist/cjs/components/styled.js +8 -10
- package/dist/cjs/components/styled.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/components/ActionMenuItem/index.js +28 -6
- package/dist/esm/components/ActionMenuItem/index.js.map +2 -2
- package/dist/esm/components/SingleMenuItem/index.js +14 -3
- package/dist/esm/components/SingleMenuItem/index.js.map +2 -2
- package/dist/esm/components/SingleWithSubmenuItem/index.js +16 -4
- package/dist/esm/components/SingleWithSubmenuItem/index.js.map +2 -2
- package/dist/esm/components/SubmenuItem/index.js +18 -5
- package/dist/esm/components/SubmenuItem/index.js.map +2 -2
- package/dist/esm/components/styled.js +8 -10
- package/dist/esm/components/styled.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/package.json +6 -6
|
@@ -30,6 +30,8 @@ __export(ActionMenuItem_exports, {
|
|
|
30
30
|
module.exports = __toCommonJS(ActionMenuItem_exports);
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
|
+
var import_react = require("react");
|
|
34
|
+
var import_ds_grid = require("@elliemae/ds-grid");
|
|
33
35
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
34
36
|
var import_react_desc_prop_types = require("../../react-desc-prop-types");
|
|
35
37
|
var import_styled = require("../styled");
|
|
@@ -39,6 +41,7 @@ const ActionMenuItem = (props) => {
|
|
|
39
41
|
const {
|
|
40
42
|
dsId,
|
|
41
43
|
label,
|
|
44
|
+
secondaryLabel,
|
|
42
45
|
onClick,
|
|
43
46
|
isActive,
|
|
44
47
|
disabled,
|
|
@@ -47,6 +50,12 @@ const ActionMenuItem = (props) => {
|
|
|
47
50
|
optionsShouldHavePadding,
|
|
48
51
|
render: Render
|
|
49
52
|
} = propsWithDefault;
|
|
53
|
+
const gridLayout = (0, import_react.useMemo)(() => {
|
|
54
|
+
const cols = ["auto"];
|
|
55
|
+
if (secondaryLabel)
|
|
56
|
+
cols.push("min-content");
|
|
57
|
+
return cols;
|
|
58
|
+
}, [secondaryLabel]);
|
|
50
59
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledGlobalMenuItemWrapper, {
|
|
51
60
|
id: dsId,
|
|
52
61
|
role: "option",
|
|
@@ -56,10 +65,23 @@ const ActionMenuItem = (props) => {
|
|
|
56
65
|
ref: innerRef,
|
|
57
66
|
pl: optionsShouldHavePadding ? 40 : 16,
|
|
58
67
|
style: wrapperStyles,
|
|
59
|
-
children:
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
68
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
69
|
+
cols: gridLayout,
|
|
70
|
+
minHeight: "16px",
|
|
71
|
+
gutter: "xxs",
|
|
72
|
+
alignItems: "center",
|
|
73
|
+
children: Render !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, {
|
|
74
|
+
...propsWithDefault
|
|
75
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
76
|
+
children: [
|
|
77
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemLabel, {
|
|
78
|
+
children: label
|
|
79
|
+
}),
|
|
80
|
+
secondaryLabel !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemSecondaryLabel, {
|
|
81
|
+
children: secondaryLabel
|
|
82
|
+
})
|
|
83
|
+
]
|
|
84
|
+
})
|
|
63
85
|
})
|
|
64
86
|
});
|
|
65
87
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/ActionMenuItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSMenuItemT, defaultActionProps, itemProps } from '../../react-desc-prop-types';\nimport { StyledGlobalMenuItemWrapper,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSMenuItemT, defaultActionProps, itemProps } from '../../react-desc-prop-types';\nimport { StyledGlobalMenuItemWrapper, StyleMenuItemLabel, StyleMenuItemSecondaryLabel } from '../styled';\n\nconst ActionMenuItem = (props: DSMenuItemT.ActionProps): JSX.Element => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultActionProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, itemProps);\n\n const {\n dsId,\n label,\n secondaryLabel,\n onClick,\n isActive,\n disabled,\n innerRef,\n wrapperStyles,\n optionsShouldHavePadding,\n render: Render,\n } = propsWithDefault;\n\n const gridLayout = useMemo(() => {\n const cols = ['auto'];\n if (secondaryLabel) cols.push('min-content');\n return cols;\n }, [secondaryLabel]);\n\n return (\n <StyledGlobalMenuItemWrapper\n id={dsId}\n role=\"option\"\n isActive={isActive}\n disabled={disabled}\n onClick={!disabled ? onClick : undefined}\n ref={innerRef}\n pl={optionsShouldHavePadding ? 40 : 16}\n style={wrapperStyles}\n >\n <Grid cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <>\n <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n {secondaryLabel !== undefined && (\n <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n )}\n </>\n )}\n </Grid>\n </StyledGlobalMenuItemWrapper>\n );\n};\n\nActionMenuItem.propTypes = itemProps;\nActionMenuItem.displayName = 'ActionMenuItem';\nconst ActionMenuItemWithSchema = describe(ActionMenuItem);\nActionMenuItemWithSchema.propTypes = itemProps;\n\nexport { ActionMenuItem, ActionMenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA+B;AAC/B,qBAAqB;AACrB,0BAAuF;AACvF,mCAA2D;AAC3D,oBAA6F;AAE7F,MAAM,iBAAiB,CAAC,UAAgD;AACtE,QAAM,uBAAmB,kDAA6B,OAAO,+CAAkB;AAE/E,0DAA+B,kBAAkB,sCAAS;AAE1D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI;AAEJ,QAAM,iBAAa,sBAAQ,MAAM;AAC/B,UAAM,OAAO,CAAC,MAAM;AACpB,QAAI;AAAgB,WAAK,KAAK,aAAa;AAC3C,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE,4CAAC;AAAA,IACC,IAAI;AAAA,IACJ,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,SAAS,CAAC,WAAW,UAAU;AAAA,IAC/B,KAAK;AAAA,IACL,IAAI,2BAA2B,KAAK;AAAA,IACpC,OAAO;AAAA,IAEP,sDAAC;AAAA,MAAK,MAAM;AAAA,MAAY,WAAU;AAAA,MAAO,QAAO;AAAA,MAAM,YAAW;AAAA,MAC9D,qBAAW,SACV,4CAAC;AAAA,QAAQ,GAAG;AAAA,OAAkB,IAE9B;AAAA,QACE;AAAA,sDAAC;AAAA,YAAoB;AAAA,WAAM;AAAA,UAC1B,mBAAmB,UAClB,4CAAC;AAAA,YAA6B;AAAA,WAAe;AAAA;AAAA,OAEjD;AAAA,KAEJ;AAAA,GACF;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,+BAA2B,8BAAS,cAAc;AACxD,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -29,9 +29,10 @@ __export(SingleMenuItem_exports, {
|
|
|
29
29
|
module.exports = __toCommonJS(SingleMenuItem_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
31
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
|
+
var import_react = require("react");
|
|
32
33
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
33
34
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
34
|
-
var import_ds_grid =
|
|
35
|
+
var import_ds_grid = require("@elliemae/ds-grid");
|
|
35
36
|
var import_react_desc_prop_types = require("../../react-desc-prop-types");
|
|
36
37
|
var import_styled = require("../styled");
|
|
37
38
|
const SingleMenuItem = (props) => {
|
|
@@ -40,6 +41,7 @@ const SingleMenuItem = (props) => {
|
|
|
40
41
|
const {
|
|
41
42
|
dsId,
|
|
42
43
|
label,
|
|
44
|
+
secondaryLabel,
|
|
43
45
|
isSelected,
|
|
44
46
|
onClick,
|
|
45
47
|
isActive,
|
|
@@ -52,6 +54,12 @@ const SingleMenuItem = (props) => {
|
|
|
52
54
|
dataTestid,
|
|
53
55
|
disabled
|
|
54
56
|
} = propsWithDefault;
|
|
57
|
+
const gridLayout = (0, import_react.useMemo)(() => {
|
|
58
|
+
const cols = ["16px", "auto"];
|
|
59
|
+
if (secondaryLabel)
|
|
60
|
+
cols.push("min-content");
|
|
61
|
+
return cols;
|
|
62
|
+
}, [secondaryLabel]);
|
|
55
63
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledGlobalMenuItemWrapper, {
|
|
56
64
|
"aria-selected": isSelected,
|
|
57
65
|
id: dsId,
|
|
@@ -69,8 +77,8 @@ const SingleMenuItem = (props) => {
|
|
|
69
77
|
disabled,
|
|
70
78
|
children: Render !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, {
|
|
71
79
|
...props
|
|
72
|
-
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.
|
|
73
|
-
cols:
|
|
80
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, {
|
|
81
|
+
cols: gridLayout,
|
|
74
82
|
minHeight: "16px",
|
|
75
83
|
gutter: "xxs",
|
|
76
84
|
alignItems: "center",
|
|
@@ -83,6 +91,9 @@ const SingleMenuItem = (props) => {
|
|
|
83
91
|
}),
|
|
84
92
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemLabel, {
|
|
85
93
|
children: label
|
|
94
|
+
}),
|
|
95
|
+
secondaryLabel !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemSecondaryLabel, {
|
|
96
|
+
children: secondaryLabel
|
|
86
97
|
})
|
|
87
98
|
]
|
|
88
99
|
})
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/SingleMenuItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport Grid from '@elliemae/ds-grid';\nimport { DSMenuItemT, defaultSingleProps, itemProps } from '../../react-desc-prop-types';\nimport { StyledGlobalMenuItemWrapper, StyleMenuItemLabel } from '../styled';\n\nconst SingleMenuItem: React.ComponentType<DSMenuItemT.SingleProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSingleProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, itemProps);\n const {\n dsId,\n label,\n isSelected,\n onClick,\n isActive,\n innerRef,\n onMouseDown,\n onMouseEnter,\n onMouseLeave,\n wrapperStyles,\n render: Render,\n dataTestid,\n disabled,\n } = propsWithDefault;\n\n return (\n <StyledGlobalMenuItemWrapper\n aria-selected={isSelected}\n id={dsId}\n role=\"option\"\n isActive={isActive}\n isSelected={isSelected}\n onClick={onClick}\n ref={innerRef}\n onMouseDown={onMouseDown}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n className={isActive ? 'ds-list-item-active' : ''}\n style={wrapperStyles}\n data-testid={dataTestid}\n disabled={disabled}\n >\n {Render !== undefined ? (\n <Render {...props} />\n ) : (\n <Grid cols={
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;
|
|
6
|
-
"names": [
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuItemT, defaultSingleProps, itemProps } from '../../react-desc-prop-types';\nimport { StyledGlobalMenuItemWrapper, StyleMenuItemLabel, StyleMenuItemSecondaryLabel } from '../styled';\n\nconst SingleMenuItem: React.ComponentType<DSMenuItemT.SingleProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSingleProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, itemProps);\n const {\n dsId,\n label,\n secondaryLabel,\n isSelected,\n onClick,\n isActive,\n innerRef,\n onMouseDown,\n onMouseEnter,\n onMouseLeave,\n wrapperStyles,\n render: Render,\n dataTestid,\n disabled,\n } = propsWithDefault;\n\n const gridLayout = useMemo(() => {\n const cols = ['16px', 'auto'];\n if (secondaryLabel) cols.push('min-content');\n return cols;\n }, [secondaryLabel]);\n\n return (\n <StyledGlobalMenuItemWrapper\n aria-selected={isSelected}\n id={dsId}\n role=\"option\"\n isActive={isActive}\n isSelected={isSelected}\n onClick={onClick}\n ref={innerRef}\n onMouseDown={onMouseDown}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n className={isActive ? 'ds-list-item-active' : ''}\n style={wrapperStyles}\n data-testid={dataTestid}\n disabled={disabled}\n >\n {Render !== undefined ? (\n <Render {...props} />\n ) : (\n <Grid cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n <div>{isSelected && <Checkmark size=\"s\" color={['brand-primary', '600']} />}</div>\n <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n {secondaryLabel !== undefined && <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>}\n </Grid>\n )}\n </StyledGlobalMenuItemWrapper>\n );\n};\n\nSingleMenuItem.propTypes = itemProps;\nSingleMenuItem.displayName = 'SingleMenuItem';\nconst SingleMenuItemWithSchema = describe(SingleMenuItem);\nSingleMenuItemWithSchema.propTypes = itemProps;\n\nexport { SingleMenuItem };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA+B;AAC/B,0BAAuF;AACvF,sBAA0B;AAC1B,qBAAqB;AACrB,mCAA2D;AAC3D,oBAA6F;AAE7F,MAAM,iBAA+D,CAAC,UAAU;AAC9E,QAAM,uBAAmB,kDAA6B,OAAO,+CAAkB;AAE/E,0DAA+B,kBAAkB,sCAAS;AAC1D,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,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,iBAAa,sBAAQ,MAAM;AAC/B,UAAM,OAAO,CAAC,QAAQ,MAAM;AAC5B,QAAI;AAAgB,WAAK,KAAK,aAAa;AAC3C,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE,4CAAC;AAAA,IACC,iBAAe;AAAA,IACf,IAAI;AAAA,IACJ,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,WAAW,wBAAwB;AAAA,IAC9C,OAAO;AAAA,IACP,eAAa;AAAA,IACb;AAAA,IAEC,qBAAW,SACV,4CAAC;AAAA,MAAQ,GAAG;AAAA,KAAO,IAEnB,6CAAC;AAAA,MAAK,MAAM;AAAA,MAAY,WAAU;AAAA,MAAO,QAAO;AAAA,MAAM,YAAW;AAAA,MAC/D;AAAA,oDAAC;AAAA,UAAK,wBAAc,4CAAC;AAAA,YAAU,MAAK;AAAA,YAAI,OAAO,CAAC,iBAAiB,KAAK;AAAA,WAAG;AAAA,SAAG;AAAA,QAC5E,4CAAC;AAAA,UAAoB;AAAA,SAAM;AAAA,QAC1B,mBAAmB,UAAa,4CAAC;AAAA,UAA6B;AAAA,SAAe;AAAA;AAAA,KAChF;AAAA,GAEJ;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,+BAA2B,8BAAS,cAAc;AACxD,yBAAyB,YAAY;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -46,6 +46,7 @@ const SingleWithSubmenuItem = (props) => {
|
|
|
46
46
|
const {
|
|
47
47
|
dsId,
|
|
48
48
|
label,
|
|
49
|
+
secondaryLabel,
|
|
49
50
|
isActive,
|
|
50
51
|
disabled,
|
|
51
52
|
onClick,
|
|
@@ -73,6 +74,13 @@ const SingleWithSubmenuItem = (props) => {
|
|
|
73
74
|
setTimeout(() => setDelayedIsOpened(isSubmenuOpened));
|
|
74
75
|
}, [isSubmenuOpened]);
|
|
75
76
|
const { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick } = (0, import_useGetSubmenuHandlers.useGetSubmenuHandlers)(propsWithDefault);
|
|
77
|
+
const gridLayout = (0, import_react.useMemo)(() => {
|
|
78
|
+
const cols = ["16px", "auto"];
|
|
79
|
+
if (secondaryLabel)
|
|
80
|
+
cols.push("min-content");
|
|
81
|
+
cols.push("min-content");
|
|
82
|
+
return cols;
|
|
83
|
+
}, [secondaryLabel]);
|
|
76
84
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dropdown, {
|
|
77
85
|
isOpened: delayedIsOpened,
|
|
78
86
|
options: options ?? [],
|
|
@@ -109,7 +117,7 @@ const SingleWithSubmenuItem = (props) => {
|
|
|
109
117
|
Render !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, {
|
|
110
118
|
...propsWithDefault
|
|
111
119
|
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, {
|
|
112
|
-
cols:
|
|
120
|
+
cols: gridLayout,
|
|
113
121
|
gutter: "xxs",
|
|
114
122
|
alignItems: "center",
|
|
115
123
|
children: [
|
|
@@ -119,9 +127,12 @@ const SingleWithSubmenuItem = (props) => {
|
|
|
119
127
|
color: disabled ? ["neutral", "500"] : ["brand-primary", "600"]
|
|
120
128
|
})
|
|
121
129
|
}),
|
|
122
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.
|
|
130
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemLabel, {
|
|
123
131
|
children: label
|
|
124
132
|
}),
|
|
133
|
+
secondaryLabel !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemSecondaryLabel, {
|
|
134
|
+
children: secondaryLabel
|
|
135
|
+
}),
|
|
125
136
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledIconContainer, {
|
|
126
137
|
children: [
|
|
127
138
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledVerticalSeparator, {}),
|
|
@@ -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 } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { MoreOptionsVert, ChevronRight, Checkmark } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSMenuItemT, defaultSingleWithSubmenuProps, itemProps } from '../../react-desc-prop-types';\nimport {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useEffect, useState, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { MoreOptionsVert, ChevronRight, Checkmark } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSMenuItemT, defaultSingleWithSubmenuProps, itemProps } from '../../react-desc-prop-types';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledIconContainer,\n StyledEllipsisButton,\n StyledGlobalMenuItemWrapper,\n StyledVerticalSeparator,\n} from '../styled';\nimport { useGetSubmenuHandlers } from './useGetSubmenuHandlers';\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);\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 ref={innerRef}\n as=\"div\"\n >\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <Grid cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n <div>\n {isSelected && <Checkmark size=\"s\" color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} />}\n </div>\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 </Grid>\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.propTypes = itemProps;\nSingleWithSubmenuItem.displayName = 'SingleWithSubmenuItem';\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
|
}
|
|
@@ -43,6 +43,7 @@ const SubmenuItem = (props) => {
|
|
|
43
43
|
const {
|
|
44
44
|
dsId,
|
|
45
45
|
label,
|
|
46
|
+
secondaryLabel,
|
|
46
47
|
isActive,
|
|
47
48
|
disabled,
|
|
48
49
|
isSubmenuOpened,
|
|
@@ -69,6 +70,13 @@ const SubmenuItem = (props) => {
|
|
|
69
70
|
setTimeout(() => setDelayedIsOpened(isSubmenuOpened));
|
|
70
71
|
}, [isSubmenuOpened]);
|
|
71
72
|
const { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick } = (0, import_useGetSubmenuHandlers.useGetSubmenuHandlers)(propsWithDefault);
|
|
73
|
+
const gridLayout = (0, import_react.useMemo)(() => {
|
|
74
|
+
const cols = ["auto"];
|
|
75
|
+
if (secondaryLabel !== void 0)
|
|
76
|
+
cols.push("min-content");
|
|
77
|
+
cols.push("min-content");
|
|
78
|
+
return cols;
|
|
79
|
+
}, [secondaryLabel]);
|
|
72
80
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dropdown, {
|
|
73
81
|
isOpened: delayedIsOpened,
|
|
74
82
|
options: options ?? [],
|
|
@@ -99,18 +107,22 @@ const SubmenuItem = (props) => {
|
|
|
99
107
|
onMouseLeave: onMouseLeaveHandler,
|
|
100
108
|
ref: innerRef,
|
|
101
109
|
disabled,
|
|
102
|
-
pl: optionsShouldHavePadding ? 40 :
|
|
110
|
+
pl: optionsShouldHavePadding ? 40 : 16,
|
|
103
111
|
as: "div",
|
|
104
112
|
children: [
|
|
105
113
|
Render !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, {
|
|
106
114
|
...propsWithDefault
|
|
107
115
|
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, {
|
|
108
|
-
cols:
|
|
116
|
+
cols: gridLayout,
|
|
117
|
+
gutter: "xxs",
|
|
109
118
|
alignItems: "center",
|
|
110
119
|
children: [
|
|
111
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.
|
|
120
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemLabel, {
|
|
112
121
|
children: label
|
|
113
122
|
}),
|
|
123
|
+
secondaryLabel !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleMenuItemSecondaryLabel, {
|
|
124
|
+
children: secondaryLabel
|
|
125
|
+
}),
|
|
114
126
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledIconContainer, {
|
|
115
127
|
children: [
|
|
116
128
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledVerticalSeparator, {}),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/SubmenuItem/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useEffect, useState } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { MoreOptionsVert, ChevronRight } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSMenuItemT, defaultSubmenuProps, itemProps } from '../../react-desc-prop-types';\nimport {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { MoreOptionsVert, ChevronRight } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSMenuItemT, defaultSubmenuProps, itemProps } from '../../react-desc-prop-types';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledIconContainer,\n StyledEllipsisButton,\n StyledGlobalMenuItemWrapper,\n StyledVerticalSeparator,\n} from '../styled';\nimport { useGetSubmenuHandlers } from './useGetSubmenuHandlers';\n\nconst SubmenuItem: React.ComponentType<DSMenuItemT.SubmenuProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSMenuItemT.SubmenuProps>>(props, defaultSubmenuProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, itemProps);\n\n const {\n dsId,\n label,\n secondaryLabel,\n isActive,\n disabled,\n isSubmenuOpened,\n rightAddon,\n innerRef,\n wrapperStyles,\n optionsShouldHavePadding,\n render: Render,\n Dropdown,\n dropdownProps: {\n options,\n openedSubmenus,\n onSubmenuToggle,\n selectedOptions,\n onKeyDown,\n onOptionClick,\n onClickOutside,\n minWidth,\n maxHeight,\n },\n } = propsWithDefault;\n\n // If we don't delay the opening of the poppers, the position will not be placed correctly\n // That why we delay it for the next render using the useEffect hook\n // TODO -- @carusox move this to utilities as a hook\n const [delayedIsOpened, setDelayedIsOpened] = 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 = ['auto'];\n if (secondaryLabel !== undefined) 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 isSelected={isSubmenuOpened}\n isActive={isActive}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n ref={innerRef}\n disabled={disabled}\n pl={optionsShouldHavePadding ? 40 : 16}\n as=\"div\"\n >\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <Grid cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n {secondaryLabel !== undefined && (\n <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n )}\n <StyledIconContainer>\n <StyledVerticalSeparator />\n {rightAddon === 'ellipsis' ? (\n <StyledEllipsisButton 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 </Grid>\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\nSubmenuItem.propTypes = itemProps;\nSubmenuItem.displayName = 'SubmenuItem';\nconst SubmenuItemWithSchema = describe(SubmenuItem);\nSubmenuItemWithSchema.propTypes = itemProps;\n\nexport { SubmenuItem, SubmenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -25,12 +25,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
25
25
|
var styled_exports = {};
|
|
26
26
|
__export(styled_exports, {
|
|
27
27
|
StyleMenuItemLabel: () => StyleMenuItemLabel,
|
|
28
|
+
StyleMenuItemSecondaryLabel: () => StyleMenuItemSecondaryLabel,
|
|
28
29
|
StyledEllipsisButton: () => StyledEllipsisButton,
|
|
29
30
|
StyledGlobalMenuItemWrapper: () => StyledGlobalMenuItemWrapper,
|
|
30
31
|
StyledGroupLabel: () => StyledGroupLabel,
|
|
31
32
|
StyledIconContainer: () => StyledIconContainer,
|
|
32
33
|
StyledItemContent: () => StyledItemContent,
|
|
33
|
-
StyledItemLabel: () => StyledItemLabel,
|
|
34
34
|
StyledSectionWrapper: () => StyledSectionWrapper,
|
|
35
35
|
StyledSeparator: () => StyledSeparator,
|
|
36
36
|
StyledSeparatorWrapper: () => StyledSeparatorWrapper,
|
|
@@ -94,17 +94,15 @@ const StyleMenuItemLabel = import_ds_system.styled.span`
|
|
|
94
94
|
padding: 8px 0;
|
|
95
95
|
font-size: 13px;
|
|
96
96
|
`;
|
|
97
|
-
const
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
overflow: hidden;
|
|
103
|
-
width: 100%;
|
|
97
|
+
const StyleMenuItemSecondaryLabel = import_ds_system.styled.span`
|
|
98
|
+
padding: 8px 0;
|
|
99
|
+
font-size: 11px;
|
|
100
|
+
font-style: italic;
|
|
101
|
+
color: brand-800;
|
|
104
102
|
`;
|
|
105
103
|
const StyledIconContainer = import_ds_system.styled.div`
|
|
106
|
-
width:
|
|
107
|
-
height:
|
|
104
|
+
width: 25px;
|
|
105
|
+
height: 24px;
|
|
108
106
|
display: grid;
|
|
109
107
|
grid-template-columns: min-content auto;
|
|
110
108
|
place-items: center;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import {\n styled,\n css,\n layout,\n position,\n space,\n sizing,\n LayoutProps,\n SizingProps,\n PositionProps,\n SpaceProps,\n} from '@elliemae/ds-system';\n\nconst borderOutside = () => css`\n :after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 1px solid ${({ theme }) => theme.colors.brand[500]};\n pointer-events: none;\n z-index: 7;\n }\n`;\n\nconst disabledOption = () => css`\n color: ${({ theme }) => theme.colors.neutral[500]};\n\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledGlobalMenuItemWrapper = styled.li<\n { isSelected: boolean; isActive: boolean } & LayoutProps & SizingProps & PositionProps & SpaceProps\n>`\n cursor: pointer;\n min-height: 32px;\n\n padding-left: 16px;\n padding-right: 16px;\n display: grid;\n align-items: center;\n list-style: none;\n position: relative;\n ${position}\n ${layout}\n ${sizing}\n ${space}\n\n ${(props) => {\n if (props.disabled) return disabledOption();\n if (props.isActive) return borderOutside();\n return '';\n }};\n\n background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : 'white')};\n\n &:hover {\n background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};\n }\n`;\n\nexport const StyleMenuItemLabel = styled.span`\n padding: 8px 0;\n font-size: 13px;\n`;\n\nexport const
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAWO;AAEP,MAAM,gBAAgB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASJ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAM1D,MAAM,iBAAiB,MAAM;AAAA,WAClB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQxC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAY9C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA,CAAC,UAAU;AACX,MAAI,MAAM;AAAU,WAAO,eAAe;AAC1C,MAAI,MAAM;AAAU,WAAO,cAAc;AACzC,SAAO;AACT;AAAA;AAAA,sBAEoB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,OAAO;AAAA;AAAA;AAAA,wBAG3D,CAAC,UAAU,CAAC,MAAM,YAAY,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAIxE,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAKlC,MAAM,
|
|
4
|
+
"sourcesContent": ["import {\n styled,\n css,\n layout,\n position,\n space,\n sizing,\n LayoutProps,\n SizingProps,\n PositionProps,\n SpaceProps,\n} from '@elliemae/ds-system';\n\nconst borderOutside = () => css`\n :after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 1px solid ${({ theme }) => theme.colors.brand[500]};\n pointer-events: none;\n z-index: 7;\n }\n`;\n\nconst disabledOption = () => css`\n color: ${({ theme }) => theme.colors.neutral[500]};\n\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledGlobalMenuItemWrapper = styled.li<\n { isSelected: boolean; isActive: boolean } & LayoutProps & SizingProps & PositionProps & SpaceProps\n>`\n cursor: pointer;\n min-height: 32px;\n\n padding-left: 16px;\n padding-right: 16px;\n display: grid;\n align-items: center;\n list-style: none;\n position: relative;\n ${position}\n ${layout}\n ${sizing}\n ${space}\n\n ${(props) => {\n if (props.disabled) return disabledOption();\n if (props.isActive) return borderOutside();\n return '';\n }};\n\n background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : 'white')};\n\n &:hover {\n background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};\n }\n`;\n\nexport const StyleMenuItemLabel = styled.span`\n padding: 8px 0;\n font-size: 13px;\n`;\n\nexport const StyleMenuItemSecondaryLabel = styled.span`\n padding: 8px 0;\n font-size: 11px;\n font-style: italic;\n color: brand-800;\n`;\n\nexport const StyledIconContainer = styled.div`\n width: 25px;\n height: 24px;\n display: grid;\n grid-template-columns: min-content auto;\n place-items: center;\n`;\n\nexport const StyledEllipsisButton = styled.div`\n position: relative;\n width: 100%;\n height: 100%;\n display: grid;\n place-items: center;\n background: transparent;\n :active {\n ${(props) => (props.disabled ? '' : borderOutside())}\n }\n`;\n\nexport const StyledItemContent = styled.div`\n display: flex;\n width: 100%;\n`;\n\nexport const StyledSeparator = styled.hr`\n border: 0;\n border-top: 1px solid #697489;\n margin: 4px 0px;\n padding: 0;\n`;\n\nexport const StyledSeparatorWrapper = styled.li`\n list-style: none;\n padding: 0px 16px;\n ${position}\n ${layout}\n ${sizing}\n`;\n\nexport const StyledGroupLabel = styled.span`\n font-size: 13px;\n color: neutral-500;\n`;\n\nexport const StyledSectionWrapper = styled.li`\n ${position}\n ${layout}\n ${sizing}\n list-style: none;\n padding: 0px 16px;\n height: 24px;\n display: flex;\n align-items: center;\n`;\n\nexport const StyledVerticalSeparator = styled.div`\n width: 1px;\n height: 18px;\n background-color: neutral-300;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAWO;AAEP,MAAM,gBAAgB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASJ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAM1D,MAAM,iBAAiB,MAAM;AAAA,WAClB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQxC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAY9C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA,CAAC,UAAU;AACX,MAAI,MAAM;AAAU,WAAO,eAAe;AAC1C,MAAI,MAAM;AAAU,WAAO,cAAc;AACzC,SAAO;AACT;AAAA;AAAA,sBAEoB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,OAAO;AAAA;AAAA;AAAA,wBAG3D,CAAC,UAAU,CAAC,MAAM,YAAY,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAIxE,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAKlC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQnC,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQrC,CAAC,UAAW,MAAM,WAAW,KAAK,cAAc;AAAA;AAAA;AAI/C,MAAM,oBAAoB,wBAAO;AAAA;AAAA;AAAA;AAKjC,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/B,MAAM,yBAAyB,wBAAO;AAAA;AAAA;AAAA,IAGzC;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAKhC,MAAM,uBAAuB,wBAAO;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQG,MAAM,0BAA0B,wBAAO;AAAA;AAAA;AAAA;AAAA;",
|
|
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 @typescript-eslint/no-explicit-any */\nimport React, { PropsWithChildren, WeakValidationMap } from 'react';\nimport { SizingProps } from '@elliemae/ds-system';\nimport { PropTypes } from '@elliemae/ds-utilities';\n\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 }\n\n export interface ActionProps extends CommonProps<ActionProps> {\n label?: string;\n value?: unknown;\n disabled?: boolean;\n isActive?: boolean;\n onClick?: React.MouseEventHandler;\n optionsShouldHavePadding?: boolean;\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 tabIndex?: number;\n }\n\n export interface SingleProps extends CommonProps<SingleProps> {\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?: number;\n }\n\n export interface SubmenuProps extends CommonProps<SubmenuProps> {\n label?: 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: React.MouseEvent | React.KeyboardEvent | React.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}\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};\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: '',\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 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,0BAA0B;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { PropsWithChildren, WeakValidationMap } from 'react';\nimport { SizingProps } from '@elliemae/ds-system';\nimport { PropTypes } from '@elliemae/ds-utilities';\n\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 }\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 }\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 tabIndex?: number;\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: React.MouseEvent | React.KeyboardEvent | React.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}\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};\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: '',\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 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,0BAA0B;AA4F1B,MAAM,OAAO,MAAM;AAEZ,MAAM,qBAAuE;AAAA,EAClF,UAAU;AAAA,EACV,eAAe,CAAC;AAClB;AAEO,MAAM,qBAAuD;AAAA,EAClE,GAAG;AAAA,EACH,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,0BAA0B;AAC5B;AAEO,MAAM,oBAAqD;AAAA,EAChE,GAAG;AAAA,EACH,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,UAAU;AACZ;AAEO,MAAM,qBAAuD;AAAA,EAClE,GAAG;AAAA,EACH,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,UAAU;AACZ;AAEO,MAAM,sBAAyD;AAAA,EACpE,GAAG;AAAA,EACH,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,0BAA0B;AAAA,EAC1B,UAAU;AAAA,EACV,eAAe;AAAA,IACb,SAAS,CAAC;AAAA,IACV,iBAAiB;AAAA,IACjB,gBAAgB,CAAC;AAAA,IACjB,iBAAiB,CAAC;AAAA,IAClB,WAAW;AAAA,IACX,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,WAAW;AAAA,EACb;AACF;AAEO,MAAM,sBAAyD;AAAA,EACpE,GAAG;AAAA,EACH,OAAO;AACT;AAEO,MAAM,wBAA6D;AAAA,EACxE,GAAG;AACL;AAEO,MAAM,gCAA6F;AAAA,EACxG,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,YAAY;AAAA,EACvB,MAAM,8BAAU;AAAA,EAChB,UAAU,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,EAAE,SAAS,8BAAU,IAAI,CAAC,CAAC,CAAC;AAAA,EAC3F,eAAe,8BAAU;AAAA,EACzB,QAAQ,8BAAU;AACpB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useMemo } from "react";
|
|
4
|
+
import { Grid } from "@elliemae/ds-grid";
|
|
3
5
|
import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-utilities";
|
|
4
6
|
import { defaultActionProps, itemProps } from "../../react-desc-prop-types";
|
|
5
|
-
import { StyledGlobalMenuItemWrapper,
|
|
7
|
+
import { StyledGlobalMenuItemWrapper, StyleMenuItemLabel, StyleMenuItemSecondaryLabel } from "../styled";
|
|
6
8
|
const ActionMenuItem = (props) => {
|
|
7
9
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultActionProps);
|
|
8
10
|
useValidateTypescriptPropTypes(propsWithDefault, itemProps);
|
|
9
11
|
const {
|
|
10
12
|
dsId,
|
|
11
13
|
label,
|
|
14
|
+
secondaryLabel,
|
|
12
15
|
onClick,
|
|
13
16
|
isActive,
|
|
14
17
|
disabled,
|
|
@@ -17,6 +20,12 @@ const ActionMenuItem = (props) => {
|
|
|
17
20
|
optionsShouldHavePadding,
|
|
18
21
|
render: Render
|
|
19
22
|
} = propsWithDefault;
|
|
23
|
+
const gridLayout = useMemo(() => {
|
|
24
|
+
const cols = ["auto"];
|
|
25
|
+
if (secondaryLabel)
|
|
26
|
+
cols.push("min-content");
|
|
27
|
+
return cols;
|
|
28
|
+
}, [secondaryLabel]);
|
|
20
29
|
return /* @__PURE__ */ jsx(StyledGlobalMenuItemWrapper, {
|
|
21
30
|
id: dsId,
|
|
22
31
|
role: "option",
|
|
@@ -26,10 +35,23 @@ const ActionMenuItem = (props) => {
|
|
|
26
35
|
ref: innerRef,
|
|
27
36
|
pl: optionsShouldHavePadding ? 40 : 16,
|
|
28
37
|
style: wrapperStyles,
|
|
29
|
-
children:
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
38
|
+
children: /* @__PURE__ */ jsx(Grid, {
|
|
39
|
+
cols: gridLayout,
|
|
40
|
+
minHeight: "16px",
|
|
41
|
+
gutter: "xxs",
|
|
42
|
+
alignItems: "center",
|
|
43
|
+
children: Render !== void 0 ? /* @__PURE__ */ jsx(Render, {
|
|
44
|
+
...propsWithDefault
|
|
45
|
+
}) : /* @__PURE__ */ jsxs(Fragment, {
|
|
46
|
+
children: [
|
|
47
|
+
/* @__PURE__ */ jsx(StyleMenuItemLabel, {
|
|
48
|
+
children: label
|
|
49
|
+
}),
|
|
50
|
+
secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, {
|
|
51
|
+
children: secondaryLabel
|
|
52
|
+
})
|
|
53
|
+
]
|
|
54
|
+
})
|
|
33
55
|
})
|
|
34
56
|
});
|
|
35
57
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/ActionMenuItem/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSMenuItemT, defaultActionProps, itemProps } from '../../react-desc-prop-types';\nimport { StyledGlobalMenuItemWrapper,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSMenuItemT, defaultActionProps, itemProps } from '../../react-desc-prop-types';\nimport { StyledGlobalMenuItemWrapper, StyleMenuItemLabel, StyleMenuItemSecondaryLabel } from '../styled';\n\nconst ActionMenuItem = (props: DSMenuItemT.ActionProps): JSX.Element => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultActionProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, itemProps);\n\n const {\n dsId,\n label,\n secondaryLabel,\n onClick,\n isActive,\n disabled,\n innerRef,\n wrapperStyles,\n optionsShouldHavePadding,\n render: Render,\n } = propsWithDefault;\n\n const gridLayout = useMemo(() => {\n const cols = ['auto'];\n if (secondaryLabel) cols.push('min-content');\n return cols;\n }, [secondaryLabel]);\n\n return (\n <StyledGlobalMenuItemWrapper\n id={dsId}\n role=\"option\"\n isActive={isActive}\n disabled={disabled}\n onClick={!disabled ? onClick : undefined}\n ref={innerRef}\n pl={optionsShouldHavePadding ? 40 : 16}\n style={wrapperStyles}\n >\n <Grid cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <>\n <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n {secondaryLabel !== undefined && (\n <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n )}\n </>\n )}\n </Grid>\n </StyledGlobalMenuItemWrapper>\n );\n};\n\nActionMenuItem.propTypes = itemProps;\nActionMenuItem.displayName = 'ActionMenuItem';\nconst ActionMenuItemWithSchema = describe(ActionMenuItem);\nActionMenuItemWithSchema.propTypes = itemProps;\n\nexport { ActionMenuItem, ActionMenuItemWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,eAAe;AAC/B,SAAS,YAAY;AACrB,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAsB,oBAAoB,iBAAiB;AAC3D,SAAS,6BAA6B,oBAAoB,mCAAmC;AAE7F,MAAM,iBAAiB,CAAC,UAAgD;AACtE,QAAM,mBAAmB,6BAA6B,OAAO,kBAAkB;AAE/E,iCAA+B,kBAAkB,SAAS;AAE1D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI;AAEJ,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,OAAO,CAAC,MAAM;AACpB,QAAI;AAAgB,WAAK,KAAK,aAAa;AAC3C,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE,oBAAC;AAAA,IACC,IAAI;AAAA,IACJ,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,SAAS,CAAC,WAAW,UAAU;AAAA,IAC/B,KAAK;AAAA,IACL,IAAI,2BAA2B,KAAK;AAAA,IACpC,OAAO;AAAA,IAEP,8BAAC;AAAA,MAAK,MAAM;AAAA,MAAY,WAAU;AAAA,MAAO,QAAO;AAAA,MAAM,YAAW;AAAA,MAC9D,qBAAW,SACV,oBAAC;AAAA,QAAQ,GAAG;AAAA,OAAkB,IAE9B;AAAA,QACE;AAAA,8BAAC;AAAA,YAAoB;AAAA,WAAM;AAAA,UAC1B,mBAAmB,UAClB,oBAAC;AAAA,YAA6B;AAAA,WAAe;AAAA;AAAA,OAEjD;AAAA,KAEJ;AAAA,GACF;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useMemo } from "react";
|
|
3
4
|
import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-utilities";
|
|
4
5
|
import { Checkmark } from "@elliemae/ds-icons";
|
|
5
|
-
import Grid from "@elliemae/ds-grid";
|
|
6
|
+
import { Grid } from "@elliemae/ds-grid";
|
|
6
7
|
import { defaultSingleProps, itemProps } from "../../react-desc-prop-types";
|
|
7
|
-
import { StyledGlobalMenuItemWrapper, StyleMenuItemLabel } from "../styled";
|
|
8
|
+
import { StyledGlobalMenuItemWrapper, StyleMenuItemLabel, StyleMenuItemSecondaryLabel } from "../styled";
|
|
8
9
|
const SingleMenuItem = (props) => {
|
|
9
10
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSingleProps);
|
|
10
11
|
useValidateTypescriptPropTypes(propsWithDefault, itemProps);
|
|
11
12
|
const {
|
|
12
13
|
dsId,
|
|
13
14
|
label,
|
|
15
|
+
secondaryLabel,
|
|
14
16
|
isSelected,
|
|
15
17
|
onClick,
|
|
16
18
|
isActive,
|
|
@@ -23,6 +25,12 @@ const SingleMenuItem = (props) => {
|
|
|
23
25
|
dataTestid,
|
|
24
26
|
disabled
|
|
25
27
|
} = propsWithDefault;
|
|
28
|
+
const gridLayout = useMemo(() => {
|
|
29
|
+
const cols = ["16px", "auto"];
|
|
30
|
+
if (secondaryLabel)
|
|
31
|
+
cols.push("min-content");
|
|
32
|
+
return cols;
|
|
33
|
+
}, [secondaryLabel]);
|
|
26
34
|
return /* @__PURE__ */ jsx(StyledGlobalMenuItemWrapper, {
|
|
27
35
|
"aria-selected": isSelected,
|
|
28
36
|
id: dsId,
|
|
@@ -41,7 +49,7 @@ const SingleMenuItem = (props) => {
|
|
|
41
49
|
children: Render !== void 0 ? /* @__PURE__ */ jsx(Render, {
|
|
42
50
|
...props
|
|
43
51
|
}) : /* @__PURE__ */ jsxs(Grid, {
|
|
44
|
-
cols:
|
|
52
|
+
cols: gridLayout,
|
|
45
53
|
minHeight: "16px",
|
|
46
54
|
gutter: "xxs",
|
|
47
55
|
alignItems: "center",
|
|
@@ -54,6 +62,9 @@ const SingleMenuItem = (props) => {
|
|
|
54
62
|
}),
|
|
55
63
|
/* @__PURE__ */ jsx(StyleMenuItemLabel, {
|
|
56
64
|
children: label
|
|
65
|
+
}),
|
|
66
|
+
secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, {
|
|
67
|
+
children: secondaryLabel
|
|
57
68
|
})
|
|
58
69
|
]
|
|
59
70
|
})
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SingleMenuItem/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport Grid from '@elliemae/ds-grid';\nimport { DSMenuItemT, defaultSingleProps, itemProps } from '../../react-desc-prop-types';\nimport { StyledGlobalMenuItemWrapper, StyleMenuItemLabel } from '../styled';\n\nconst SingleMenuItem: React.ComponentType<DSMenuItemT.SingleProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSingleProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, itemProps);\n const {\n dsId,\n label,\n isSelected,\n onClick,\n isActive,\n innerRef,\n onMouseDown,\n onMouseEnter,\n onMouseLeave,\n wrapperStyles,\n render: Render,\n dataTestid,\n disabled,\n } = propsWithDefault;\n\n return (\n <StyledGlobalMenuItemWrapper\n aria-selected={isSelected}\n id={dsId}\n role=\"option\"\n isActive={isActive}\n isSelected={isSelected}\n onClick={onClick}\n ref={innerRef}\n onMouseDown={onMouseDown}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n className={isActive ? 'ds-list-item-active' : ''}\n style={wrapperStyles}\n data-testid={dataTestid}\n disabled={disabled}\n >\n {Render !== undefined ? (\n <Render {...props} />\n ) : (\n <Grid cols={
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSMenuItemT, defaultSingleProps, itemProps } from '../../react-desc-prop-types';\nimport { StyledGlobalMenuItemWrapper, StyleMenuItemLabel, StyleMenuItemSecondaryLabel } from '../styled';\n\nconst SingleMenuItem: React.ComponentType<DSMenuItemT.SingleProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSingleProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, itemProps);\n const {\n dsId,\n label,\n secondaryLabel,\n isSelected,\n onClick,\n isActive,\n innerRef,\n onMouseDown,\n onMouseEnter,\n onMouseLeave,\n wrapperStyles,\n render: Render,\n dataTestid,\n disabled,\n } = propsWithDefault;\n\n const gridLayout = useMemo(() => {\n const cols = ['16px', 'auto'];\n if (secondaryLabel) cols.push('min-content');\n return cols;\n }, [secondaryLabel]);\n\n return (\n <StyledGlobalMenuItemWrapper\n aria-selected={isSelected}\n id={dsId}\n role=\"option\"\n isActive={isActive}\n isSelected={isSelected}\n onClick={onClick}\n ref={innerRef}\n onMouseDown={onMouseDown}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n className={isActive ? 'ds-list-item-active' : ''}\n style={wrapperStyles}\n data-testid={dataTestid}\n disabled={disabled}\n >\n {Render !== undefined ? (\n <Render {...props} />\n ) : (\n <Grid cols={gridLayout} minHeight=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n <div>{isSelected && <Checkmark size=\"s\" color={['brand-primary', '600']} />}</div>\n <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n {secondaryLabel !== undefined && <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>}\n </Grid>\n )}\n </StyledGlobalMenuItemWrapper>\n );\n};\n\nSingleMenuItem.propTypes = itemProps;\nSingleMenuItem.displayName = 'SingleMenuItem';\nconst SingleMenuItemWithSchema = describe(SingleMenuItem);\nSingleMenuItemWithSchema.propTypes = itemProps;\n\nexport { SingleMenuItem };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,eAAe;AAC/B,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAsB,oBAAoB,iBAAiB;AAC3D,SAAS,6BAA6B,oBAAoB,mCAAmC;AAE7F,MAAM,iBAA+D,CAAC,UAAU;AAC9E,QAAM,mBAAmB,6BAA6B,OAAO,kBAAkB;AAE/E,iCAA+B,kBAAkB,SAAS;AAC1D,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,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,OAAO,CAAC,QAAQ,MAAM;AAC5B,QAAI;AAAgB,WAAK,KAAK,aAAa;AAC3C,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE,oBAAC;AAAA,IACC,iBAAe;AAAA,IACf,IAAI;AAAA,IACJ,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,WAAW,wBAAwB;AAAA,IAC9C,OAAO;AAAA,IACP,eAAa;AAAA,IACb;AAAA,IAEC,qBAAW,SACV,oBAAC;AAAA,MAAQ,GAAG;AAAA,KAAO,IAEnB,qBAAC;AAAA,MAAK,MAAM;AAAA,MAAY,WAAU;AAAA,MAAO,QAAO;AAAA,MAAM,YAAW;AAAA,MAC/D;AAAA,4BAAC;AAAA,UAAK,wBAAc,oBAAC;AAAA,YAAU,MAAK;AAAA,YAAI,OAAO,CAAC,iBAAiB,KAAK;AAAA,WAAG;AAAA,SAAG;AAAA,QAC5E,oBAAC;AAAA,UAAoB;AAAA,SAAM;AAAA,QAC1B,mBAAmB,UAAa,oBAAC;AAAA,UAA6B;AAAA,SAAe;AAAA;AAAA,KAChF;AAAA,GAEJ;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useEffect, useState } from "react";
|
|
3
|
+
import { useEffect, useState, useMemo } from "react";
|
|
4
4
|
import { Grid } from "@elliemae/ds-grid";
|
|
5
5
|
import { MoreOptionsVert, ChevronRight, Checkmark } from "@elliemae/ds-icons";
|
|
6
6
|
import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-utilities";
|
|
7
7
|
import { defaultSingleWithSubmenuProps, itemProps } from "../../react-desc-prop-types";
|
|
8
8
|
import {
|
|
9
|
-
|
|
9
|
+
StyleMenuItemLabel,
|
|
10
|
+
StyleMenuItemSecondaryLabel,
|
|
10
11
|
StyledIconContainer,
|
|
11
12
|
StyledEllipsisButton,
|
|
12
13
|
StyledGlobalMenuItemWrapper,
|
|
@@ -22,6 +23,7 @@ const SingleWithSubmenuItem = (props) => {
|
|
|
22
23
|
const {
|
|
23
24
|
dsId,
|
|
24
25
|
label,
|
|
26
|
+
secondaryLabel,
|
|
25
27
|
isActive,
|
|
26
28
|
disabled,
|
|
27
29
|
onClick,
|
|
@@ -49,6 +51,13 @@ const SingleWithSubmenuItem = (props) => {
|
|
|
49
51
|
setTimeout(() => setDelayedIsOpened(isSubmenuOpened));
|
|
50
52
|
}, [isSubmenuOpened]);
|
|
51
53
|
const { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick } = useGetSubmenuHandlers(propsWithDefault);
|
|
54
|
+
const gridLayout = useMemo(() => {
|
|
55
|
+
const cols = ["16px", "auto"];
|
|
56
|
+
if (secondaryLabel)
|
|
57
|
+
cols.push("min-content");
|
|
58
|
+
cols.push("min-content");
|
|
59
|
+
return cols;
|
|
60
|
+
}, [secondaryLabel]);
|
|
52
61
|
return /* @__PURE__ */ jsx(Dropdown, {
|
|
53
62
|
isOpened: delayedIsOpened,
|
|
54
63
|
options: options ?? [],
|
|
@@ -85,7 +94,7 @@ const SingleWithSubmenuItem = (props) => {
|
|
|
85
94
|
Render !== void 0 ? /* @__PURE__ */ jsx(Render, {
|
|
86
95
|
...propsWithDefault
|
|
87
96
|
}) : /* @__PURE__ */ jsxs(Grid, {
|
|
88
|
-
cols:
|
|
97
|
+
cols: gridLayout,
|
|
89
98
|
gutter: "xxs",
|
|
90
99
|
alignItems: "center",
|
|
91
100
|
children: [
|
|
@@ -95,9 +104,12 @@ const SingleWithSubmenuItem = (props) => {
|
|
|
95
104
|
color: disabled ? ["neutral", "500"] : ["brand-primary", "600"]
|
|
96
105
|
})
|
|
97
106
|
}),
|
|
98
|
-
/* @__PURE__ */ jsx(
|
|
107
|
+
/* @__PURE__ */ jsx(StyleMenuItemLabel, {
|
|
99
108
|
children: label
|
|
100
109
|
}),
|
|
110
|
+
secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, {
|
|
111
|
+
children: secondaryLabel
|
|
112
|
+
}),
|
|
101
113
|
/* @__PURE__ */ jsxs(StyledIconContainer, {
|
|
102
114
|
children: [
|
|
103
115
|
/* @__PURE__ */ jsx(StyledVerticalSeparator, {}),
|
|
@@ -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 } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { MoreOptionsVert, ChevronRight, Checkmark } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSMenuItemT, defaultSingleWithSubmenuProps, itemProps } from '../../react-desc-prop-types';\nimport {\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,WAAW,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useEffect, useState, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { MoreOptionsVert, ChevronRight, Checkmark } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSMenuItemT, defaultSingleWithSubmenuProps, itemProps } from '../../react-desc-prop-types';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledIconContainer,\n StyledEllipsisButton,\n StyledGlobalMenuItemWrapper,\n StyledVerticalSeparator,\n} from '../styled';\nimport { useGetSubmenuHandlers } from './useGetSubmenuHandlers';\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);\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 ref={innerRef}\n as=\"div\"\n >\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <Grid cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n <div>\n {isSelected && <Checkmark size=\"s\" color={disabled ? ['neutral', '500'] : ['brand-primary', '600']} />}\n </div>\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 </Grid>\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.propTypes = itemProps;\nSingleWithSubmenuItem.displayName = 'SingleWithSubmenuItem';\nconst SingleWithSubmenuItemWithSchema = describe(SingleWithSubmenuItem);\nSingleWithSubmenuItemWithSchema.propTypes = itemProps;\n\nexport { SingleWithSubmenuItem, SingleWithSubmenuItemWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,WAAW,UAAU,eAAe;AACpD,SAAS,YAAY;AACrB,SAAS,iBAAiB,cAAc,iBAAiB;AACzD,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAsB,+BAA+B,iBAAiB;AACtE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AAEtC,MAAM,wBAAiF,CAAC,UAAU;AAChG,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AAEA,iCAA+B,kBAAkB,SAAS;AAE1D,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,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,IAAI,SAAS,KAAK;AAE5D,YAAU,MAAM;AACd,eAAW,MAAM,mBAAmB,eAAe,CAAC;AAAA,EACtD,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,EAAE,qBAAqB,qBAAqB,gBAAgB,IAAI,sBAAsB,gBAAgB;AAE5G,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,OAAO,CAAC,QAAQ,MAAM;AAC5B,QAAI;AAAgB,WAAK,KAAK,aAAa;AAC3C,SAAK,KAAK,aAAa;AACvB,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE,oBAAC;AAAA,IACC,UAAU;AAAA,IACV,SAAS,WAAW,CAAC;AAAA,IACrB;AAAA,IACA,0BAAyB;AAAA,IACzB,0BAA0B,CAAC,eAAe,aAAa,cAAc,UAAU;AAAA,IAC/E;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc,CAAC,IAAI,CAAC;AAAA,IACpB,cAAc;AAAA,IACd,cAAc;AAAA,IACd,eAAe,EAAE,GAAG,eAAe,GAAG,OAAO;AAAA,IAC7C;AAAA,IACA;AAAA,IACA,IAAG;AAAA,IACH,MAAK;AAAA,IACL,iBAAe;AAAA,IACf,oBAAkB,wBAAwB;AAAA,IAC1C,IAAI;AAAA,IAEJ,+BAAC;AAAA,MACC,IAAI;AAAA,MACJ,SAAS,CAAC,WAAW,UAAU;AAAA,MAC/B,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,cAAc;AAAA,MACd,KAAK;AAAA,MACL,IAAG;AAAA,MAEF;AAAA,mBAAW,SACV,oBAAC;AAAA,UAAQ,GAAG;AAAA,SAAkB,IAE9B,qBAAC;AAAA,UAAK,MAAM;AAAA,UAAY,QAAO;AAAA,UAAM,YAAW;AAAA,UAC9C;AAAA,gCAAC;AAAA,cACE,wBAAc,oBAAC;AAAA,gBAAU,MAAK;AAAA,gBAAI,OAAO,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK;AAAA,eAAG;AAAA,aACtG;AAAA,YACA,oBAAC;AAAA,cAAoB;AAAA,aAAM;AAAA,YAC1B,mBAAmB,UAClB,oBAAC;AAAA,cAA6B;AAAA,aAAe;AAAA,YAE/C,qBAAC;AAAA,cACC;AAAA,oCAAC,2BAAwB;AAAA,gBACxB,eAAe,aACd,oBAAC;AAAA,kBAAqB,UAAU;AAAA,kBAAI,SAAS;AAAA,kBAAiB;AAAA,kBAC5D,8BAAC;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK;AAAA,oBAC9D,MAAK;AAAA,mBACP;AAAA,iBACF,IAEA,oBAAC;AAAA,kBAAa,OAAO,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK;AAAA,kBAAG,MAAK;AAAA,iBAAI;AAAA;AAAA,aAE5F;AAAA;AAAA,SACF;AAAA,QAEF,oBAAC;AAAA,UAAK,IAAI,wBAAwB;AAAA,UAAQ,OAAO,EAAE,SAAS,OAAO;AAAA,UAAG;AAAA,SAEtE;AAAA;AAAA,KACF;AAAA,GACF;AAEJ;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,kCAAkC,SAAS,qBAAqB;AACtE,gCAAgC,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useEffect, useState } from "react";
|
|
3
|
+
import { useEffect, useMemo, useState } from "react";
|
|
4
4
|
import { Grid } from "@elliemae/ds-grid";
|
|
5
5
|
import { MoreOptionsVert, ChevronRight } from "@elliemae/ds-icons";
|
|
6
6
|
import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-utilities";
|
|
7
7
|
import { defaultSubmenuProps, itemProps } from "../../react-desc-prop-types";
|
|
8
8
|
import {
|
|
9
|
-
|
|
9
|
+
StyleMenuItemLabel,
|
|
10
|
+
StyleMenuItemSecondaryLabel,
|
|
10
11
|
StyledIconContainer,
|
|
11
12
|
StyledEllipsisButton,
|
|
12
13
|
StyledGlobalMenuItemWrapper,
|
|
@@ -19,6 +20,7 @@ const SubmenuItem = (props) => {
|
|
|
19
20
|
const {
|
|
20
21
|
dsId,
|
|
21
22
|
label,
|
|
23
|
+
secondaryLabel,
|
|
22
24
|
isActive,
|
|
23
25
|
disabled,
|
|
24
26
|
isSubmenuOpened,
|
|
@@ -45,6 +47,13 @@ const SubmenuItem = (props) => {
|
|
|
45
47
|
setTimeout(() => setDelayedIsOpened(isSubmenuOpened));
|
|
46
48
|
}, [isSubmenuOpened]);
|
|
47
49
|
const { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick } = useGetSubmenuHandlers(propsWithDefault);
|
|
50
|
+
const gridLayout = useMemo(() => {
|
|
51
|
+
const cols = ["auto"];
|
|
52
|
+
if (secondaryLabel !== void 0)
|
|
53
|
+
cols.push("min-content");
|
|
54
|
+
cols.push("min-content");
|
|
55
|
+
return cols;
|
|
56
|
+
}, [secondaryLabel]);
|
|
48
57
|
return /* @__PURE__ */ jsx(Dropdown, {
|
|
49
58
|
isOpened: delayedIsOpened,
|
|
50
59
|
options: options ?? [],
|
|
@@ -75,18 +84,22 @@ const SubmenuItem = (props) => {
|
|
|
75
84
|
onMouseLeave: onMouseLeaveHandler,
|
|
76
85
|
ref: innerRef,
|
|
77
86
|
disabled,
|
|
78
|
-
pl: optionsShouldHavePadding ? 40 :
|
|
87
|
+
pl: optionsShouldHavePadding ? 40 : 16,
|
|
79
88
|
as: "div",
|
|
80
89
|
children: [
|
|
81
90
|
Render !== void 0 ? /* @__PURE__ */ jsx(Render, {
|
|
82
91
|
...propsWithDefault
|
|
83
92
|
}) : /* @__PURE__ */ jsxs(Grid, {
|
|
84
|
-
cols:
|
|
93
|
+
cols: gridLayout,
|
|
94
|
+
gutter: "xxs",
|
|
85
95
|
alignItems: "center",
|
|
86
96
|
children: [
|
|
87
|
-
/* @__PURE__ */ jsx(
|
|
97
|
+
/* @__PURE__ */ jsx(StyleMenuItemLabel, {
|
|
88
98
|
children: label
|
|
89
99
|
}),
|
|
100
|
+
secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, {
|
|
101
|
+
children: secondaryLabel
|
|
102
|
+
}),
|
|
90
103
|
/* @__PURE__ */ jsxs(StyledIconContainer, {
|
|
91
104
|
children: [
|
|
92
105
|
/* @__PURE__ */ jsx(StyledVerticalSeparator, {}),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SubmenuItem/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useEffect, useState } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { MoreOptionsVert, ChevronRight } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSMenuItemT, defaultSubmenuProps, itemProps } from '../../react-desc-prop-types';\nimport {\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,WAAW,gBAAgB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { MoreOptionsVert, ChevronRight } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSMenuItemT, defaultSubmenuProps, itemProps } from '../../react-desc-prop-types';\nimport {\n StyleMenuItemLabel,\n StyleMenuItemSecondaryLabel,\n StyledIconContainer,\n StyledEllipsisButton,\n StyledGlobalMenuItemWrapper,\n StyledVerticalSeparator,\n} from '../styled';\nimport { useGetSubmenuHandlers } from './useGetSubmenuHandlers';\n\nconst SubmenuItem: React.ComponentType<DSMenuItemT.SubmenuProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSMenuItemT.SubmenuProps>>(props, defaultSubmenuProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, itemProps);\n\n const {\n dsId,\n label,\n secondaryLabel,\n isActive,\n disabled,\n isSubmenuOpened,\n rightAddon,\n innerRef,\n wrapperStyles,\n optionsShouldHavePadding,\n render: Render,\n Dropdown,\n dropdownProps: {\n options,\n openedSubmenus,\n onSubmenuToggle,\n selectedOptions,\n onKeyDown,\n onOptionClick,\n onClickOutside,\n minWidth,\n maxHeight,\n },\n } = propsWithDefault;\n\n // If we don't delay the opening of the poppers, the position will not be placed correctly\n // That why we delay it for the next render using the useEffect hook\n // TODO -- @carusox move this to utilities as a hook\n const [delayedIsOpened, setDelayedIsOpened] = 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 = ['auto'];\n if (secondaryLabel !== undefined) 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 isSelected={isSubmenuOpened}\n isActive={isActive}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n ref={innerRef}\n disabled={disabled}\n pl={optionsShouldHavePadding ? 40 : 16}\n as=\"div\"\n >\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <Grid cols={gridLayout} gutter=\"xxs\" alignItems=\"center\">\n <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n {secondaryLabel !== undefined && (\n <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>\n )}\n <StyledIconContainer>\n <StyledVerticalSeparator />\n {rightAddon === 'ellipsis' ? (\n <StyledEllipsisButton 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 </Grid>\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\nSubmenuItem.propTypes = itemProps;\nSubmenuItem.displayName = 'SubmenuItem';\nconst SubmenuItemWithSchema = describe(SubmenuItem);\nSubmenuItemWithSchema.propTypes = itemProps;\n\nexport { SubmenuItem, SubmenuItemWithSchema };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -62,17 +62,15 @@ const StyleMenuItemLabel = styled.span`
|
|
|
62
62
|
padding: 8px 0;
|
|
63
63
|
font-size: 13px;
|
|
64
64
|
`;
|
|
65
|
-
const
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
overflow: hidden;
|
|
71
|
-
width: 100%;
|
|
65
|
+
const StyleMenuItemSecondaryLabel = styled.span`
|
|
66
|
+
padding: 8px 0;
|
|
67
|
+
font-size: 11px;
|
|
68
|
+
font-style: italic;
|
|
69
|
+
color: brand-800;
|
|
72
70
|
`;
|
|
73
71
|
const StyledIconContainer = styled.div`
|
|
74
|
-
width:
|
|
75
|
-
height:
|
|
72
|
+
width: 25px;
|
|
73
|
+
height: 24px;
|
|
76
74
|
display: grid;
|
|
77
75
|
grid-template-columns: min-content auto;
|
|
78
76
|
place-items: center;
|
|
@@ -126,12 +124,12 @@ const StyledVerticalSeparator = styled.div`
|
|
|
126
124
|
`;
|
|
127
125
|
export {
|
|
128
126
|
StyleMenuItemLabel,
|
|
127
|
+
StyleMenuItemSecondaryLabel,
|
|
129
128
|
StyledEllipsisButton,
|
|
130
129
|
StyledGlobalMenuItemWrapper,
|
|
131
130
|
StyledGroupLabel,
|
|
132
131
|
StyledIconContainer,
|
|
133
132
|
StyledItemContent,
|
|
134
|
-
StyledItemLabel,
|
|
135
133
|
StyledSectionWrapper,
|
|
136
134
|
StyledSeparator,
|
|
137
135
|
StyledSeparatorWrapper,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n styled,\n css,\n layout,\n position,\n space,\n sizing,\n LayoutProps,\n SizingProps,\n PositionProps,\n SpaceProps,\n} from '@elliemae/ds-system';\n\nconst borderOutside = () => css`\n :after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 1px solid ${({ theme }) => theme.colors.brand[500]};\n pointer-events: none;\n z-index: 7;\n }\n`;\n\nconst disabledOption = () => css`\n color: ${({ theme }) => theme.colors.neutral[500]};\n\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledGlobalMenuItemWrapper = styled.li<\n { isSelected: boolean; isActive: boolean } & LayoutProps & SizingProps & PositionProps & SpaceProps\n>`\n cursor: pointer;\n min-height: 32px;\n\n padding-left: 16px;\n padding-right: 16px;\n display: grid;\n align-items: center;\n list-style: none;\n position: relative;\n ${position}\n ${layout}\n ${sizing}\n ${space}\n\n ${(props) => {\n if (props.disabled) return disabledOption();\n if (props.isActive) return borderOutside();\n return '';\n }};\n\n background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : 'white')};\n\n &:hover {\n background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};\n }\n`;\n\nexport const StyleMenuItemLabel = styled.span`\n padding: 8px 0;\n font-size: 13px;\n`;\n\nexport const
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAEP,MAAM,gBAAgB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASJ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAM1D,MAAM,iBAAiB,MAAM;AAAA,WAClB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQxC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAY9C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA,CAAC,UAAU;AACX,MAAI,MAAM;AAAU,WAAO,eAAe;AAC1C,MAAI,MAAM;AAAU,WAAO,cAAc;AACzC,SAAO;AACT;AAAA;AAAA,sBAEoB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,OAAO;AAAA;AAAA;AAAA,wBAG3D,CAAC,UAAU,CAAC,MAAM,YAAY,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAIxE,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAKlC,MAAM,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n styled,\n css,\n layout,\n position,\n space,\n sizing,\n LayoutProps,\n SizingProps,\n PositionProps,\n SpaceProps,\n} from '@elliemae/ds-system';\n\nconst borderOutside = () => css`\n :after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 1px solid ${({ theme }) => theme.colors.brand[500]};\n pointer-events: none;\n z-index: 7;\n }\n`;\n\nconst disabledOption = () => css`\n color: ${({ theme }) => theme.colors.neutral[500]};\n\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledGlobalMenuItemWrapper = styled.li<\n { isSelected: boolean; isActive: boolean } & LayoutProps & SizingProps & PositionProps & SpaceProps\n>`\n cursor: pointer;\n min-height: 32px;\n\n padding-left: 16px;\n padding-right: 16px;\n display: grid;\n align-items: center;\n list-style: none;\n position: relative;\n ${position}\n ${layout}\n ${sizing}\n ${space}\n\n ${(props) => {\n if (props.disabled) return disabledOption();\n if (props.isActive) return borderOutside();\n return '';\n }};\n\n background-color: ${(props) => (props.isActive ? props.theme.colors.brand[200] : 'white')};\n\n &:hover {\n background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};\n }\n`;\n\nexport const StyleMenuItemLabel = styled.span`\n padding: 8px 0;\n font-size: 13px;\n`;\n\nexport const StyleMenuItemSecondaryLabel = styled.span`\n padding: 8px 0;\n font-size: 11px;\n font-style: italic;\n color: brand-800;\n`;\n\nexport const StyledIconContainer = styled.div`\n width: 25px;\n height: 24px;\n display: grid;\n grid-template-columns: min-content auto;\n place-items: center;\n`;\n\nexport const StyledEllipsisButton = styled.div`\n position: relative;\n width: 100%;\n height: 100%;\n display: grid;\n place-items: center;\n background: transparent;\n :active {\n ${(props) => (props.disabled ? '' : borderOutside())}\n }\n`;\n\nexport const StyledItemContent = styled.div`\n display: flex;\n width: 100%;\n`;\n\nexport const StyledSeparator = styled.hr`\n border: 0;\n border-top: 1px solid #697489;\n margin: 4px 0px;\n padding: 0;\n`;\n\nexport const StyledSeparatorWrapper = styled.li`\n list-style: none;\n padding: 0px 16px;\n ${position}\n ${layout}\n ${sizing}\n`;\n\nexport const StyledGroupLabel = styled.span`\n font-size: 13px;\n color: neutral-500;\n`;\n\nexport const StyledSectionWrapper = styled.li`\n ${position}\n ${layout}\n ${sizing}\n list-style: none;\n padding: 0px 16px;\n height: 24px;\n display: flex;\n align-items: center;\n`;\n\nexport const StyledVerticalSeparator = styled.div`\n width: 1px;\n height: 18px;\n background-color: neutral-300;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAEP,MAAM,gBAAgB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASJ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAM1D,MAAM,iBAAiB,MAAM;AAAA,WAClB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQxC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAY9C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA,CAAC,UAAU;AACX,MAAI,MAAM;AAAU,WAAO,eAAe;AAC1C,MAAI,MAAM;AAAU,WAAO,cAAc;AACzC,SAAO;AACT;AAAA;AAAA,sBAEoB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,OAAO;AAAA;AAAA;AAAA,wBAG3D,CAAC,UAAU,CAAC,MAAM,YAAY,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAIxE,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAKlC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQnC,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQrC,CAAC,UAAW,MAAM,WAAW,KAAK,cAAc;AAAA;AAAA;AAI/C,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAKjC,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/B,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA,IAGzC;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAKhC,MAAM,uBAAuB,OAAO;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQG,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;AAAA;",
|
|
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 @typescript-eslint/no-explicit-any */\nimport React, { PropsWithChildren, WeakValidationMap } from 'react';\nimport { SizingProps } from '@elliemae/ds-system';\nimport { PropTypes } from '@elliemae/ds-utilities';\n\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 }\n\n export interface ActionProps extends CommonProps<ActionProps> {\n label?: string;\n value?: unknown;\n disabled?: boolean;\n isActive?: boolean;\n onClick?: React.MouseEventHandler;\n optionsShouldHavePadding?: boolean;\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 tabIndex?: number;\n }\n\n export interface SingleProps extends CommonProps<SingleProps> {\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?: number;\n }\n\n export interface SubmenuProps extends CommonProps<SubmenuProps> {\n label?: 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: React.MouseEvent | React.KeyboardEvent | React.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}\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};\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: '',\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 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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,iBAAiB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { PropsWithChildren, WeakValidationMap } from 'react';\nimport { SizingProps } from '@elliemae/ds-system';\nimport { PropTypes } from '@elliemae/ds-utilities';\n\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 }\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 }\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 tabIndex?: number;\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: React.MouseEvent | React.KeyboardEvent | React.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}\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};\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: '',\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 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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,iBAAiB;AA4F1B,MAAM,OAAO,MAAM;AAEZ,MAAM,qBAAuE;AAAA,EAClF,UAAU;AAAA,EACV,eAAe,CAAC;AAClB;AAEO,MAAM,qBAAuD;AAAA,EAClE,GAAG;AAAA,EACH,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,0BAA0B;AAC5B;AAEO,MAAM,oBAAqD;AAAA,EAChE,GAAG;AAAA,EACH,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,UAAU;AACZ;AAEO,MAAM,qBAAuD;AAAA,EAClE,GAAG;AAAA,EACH,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,UAAU;AACZ;AAEO,MAAM,sBAAyD;AAAA,EACpE,GAAG;AAAA,EACH,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,0BAA0B;AAAA,EAC1B,UAAU;AAAA,EACV,eAAe;AAAA,IACb,SAAS,CAAC;AAAA,IACV,iBAAiB;AAAA,IACjB,gBAAgB,CAAC;AAAA,IACjB,iBAAiB,CAAC;AAAA,IAClB,WAAW;AAAA,IACX,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,WAAW;AAAA,EACb;AACF;AAEO,MAAM,sBAAyD;AAAA,EACpE,GAAG;AAAA,EACH,OAAO;AACT;AAEO,MAAM,wBAA6D;AAAA,EACxE,GAAG;AACL;AAEO,MAAM,gCAA6F;AAAA,EACxG,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,YAAY;AAAA,EACvB,MAAM,UAAU;AAAA,EAChB,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC;AAAA,EAC3F,eAAe,UAAU;AAAA,EACzB,QAAQ,UAAU;AACpB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-menu-items",
|
|
3
|
-
"version": "3.9.
|
|
3
|
+
"version": "3.9.1-rc.9",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Menu Items",
|
|
6
6
|
"files": [
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-form-checkbox": "3.9.
|
|
39
|
-
"@elliemae/ds-grid": "3.9.
|
|
40
|
-
"@elliemae/ds-icons": "3.9.
|
|
41
|
-
"@elliemae/ds-system": "3.9.
|
|
42
|
-
"@elliemae/ds-utilities": "3.9.
|
|
38
|
+
"@elliemae/ds-form-checkbox": "3.9.1-rc.9",
|
|
39
|
+
"@elliemae/ds-grid": "3.9.1-rc.9",
|
|
40
|
+
"@elliemae/ds-icons": "3.9.1-rc.9",
|
|
41
|
+
"@elliemae/ds-system": "3.9.1-rc.9",
|
|
42
|
+
"@elliemae/ds-utilities": "3.9.1-rc.9"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"lodash": "^4.17.21",
|