@elliemae/ds-menu-items 3.9.0-next.5
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 +70 -0
- package/dist/cjs/components/ActionMenuItem/index.js.map +7 -0
- package/dist/cjs/components/MultiMenuItem/index.js +92 -0
- package/dist/cjs/components/MultiMenuItem/index.js.map +7 -0
- package/dist/cjs/components/Section/index.js +58 -0
- package/dist/cjs/components/Section/index.js.map +7 -0
- package/dist/cjs/components/Separator/index.js +53 -0
- package/dist/cjs/components/Separator/index.js.map +7 -0
- package/dist/cjs/components/SingleMenuItem/index.js +95 -0
- package/dist/cjs/components/SingleMenuItem/index.js.map +7 -0
- package/dist/cjs/components/SingleWithSubmenuItem/index.js +158 -0
- package/dist/cjs/components/SingleWithSubmenuItem/index.js.map +7 -0
- package/dist/cjs/components/SingleWithSubmenuItem/useGetSubmenuHandlers.js +83 -0
- package/dist/cjs/components/SingleWithSubmenuItem/useGetSubmenuHandlers.js.map +7 -0
- package/dist/cjs/components/SubmenuItem/index.js +147 -0
- package/dist/cjs/components/SubmenuItem/index.js.map +7 -0
- package/dist/cjs/components/SubmenuItem/useGetSubmenuHandlers.js +83 -0
- package/dist/cjs/components/SubmenuItem/useGetSubmenuHandlers.js.map +7 -0
- package/dist/cjs/components/index.js +32 -0
- package/dist/cjs/components/index.js.map +7 -0
- package/dist/cjs/components/styled.js +159 -0
- package/dist/cjs/components/styled.js.map +7 -0
- package/dist/cjs/index.js +26 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/cjs/react-desc-prop-types.js +118 -0
- package/dist/cjs/react-desc-prop-types.js.map +7 -0
- package/dist/esm/components/ActionMenuItem/index.js +44 -0
- package/dist/esm/components/ActionMenuItem/index.js.map +7 -0
- package/dist/esm/components/MultiMenuItem/index.js +66 -0
- package/dist/esm/components/MultiMenuItem/index.js.map +7 -0
- package/dist/esm/components/Section/index.js +32 -0
- package/dist/esm/components/Section/index.js.map +7 -0
- package/dist/esm/components/Separator/index.js +27 -0
- package/dist/esm/components/Separator/index.js.map +7 -0
- package/dist/esm/components/SingleMenuItem/index.js +69 -0
- package/dist/esm/components/SingleMenuItem/index.js.map +7 -0
- package/dist/esm/components/SingleWithSubmenuItem/index.js +138 -0
- package/dist/esm/components/SingleWithSubmenuItem/index.js.map +7 -0
- package/dist/esm/components/SingleWithSubmenuItem/useGetSubmenuHandlers.js +57 -0
- package/dist/esm/components/SingleWithSubmenuItem/useGetSubmenuHandlers.js.map +7 -0
- package/dist/esm/components/SubmenuItem/index.js +127 -0
- package/dist/esm/components/SubmenuItem/index.js.map +7 -0
- package/dist/esm/components/SubmenuItem/useGetSubmenuHandlers.js +57 -0
- package/dist/esm/components/SubmenuItem/useGetSubmenuHandlers.js.map +7 -0
- package/dist/esm/components/index.js +9 -0
- package/dist/esm/components/index.js.map +7 -0
- package/dist/esm/components/styled.js +140 -0
- package/dist/esm/components/styled.js.map +7 -0
- package/dist/esm/index.js +3 -0
- package/dist/esm/index.js.map +7 -0
- package/dist/esm/react-desc-prop-types.js +92 -0
- package/dist/esm/react-desc-prop-types.js.map +7 -0
- package/package.json +62 -0
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
25
|
+
var useGetSubmenuHandlers_exports = {};
|
|
26
|
+
__export(useGetSubmenuHandlers_exports, {
|
|
27
|
+
useGetSubmenuHandlers: () => useGetSubmenuHandlers
|
|
28
|
+
});
|
|
29
|
+
module.exports = __toCommonJS(useGetSubmenuHandlers_exports);
|
|
30
|
+
var React = __toESM(require("react"));
|
|
31
|
+
var import_react = require("react");
|
|
32
|
+
const useGetSubmenuHandlers = ({
|
|
33
|
+
disabled,
|
|
34
|
+
rightAddon,
|
|
35
|
+
isSubmenuOpened,
|
|
36
|
+
onMouseEnter,
|
|
37
|
+
onSubmenuOpen,
|
|
38
|
+
onSubmenuClose,
|
|
39
|
+
onMouseLeave
|
|
40
|
+
}) => {
|
|
41
|
+
const timeoutRef = (0, import_react.useRef)(null);
|
|
42
|
+
const onMouseEnterHandler = (0, import_react.useCallback)(
|
|
43
|
+
(e) => {
|
|
44
|
+
if (rightAddon !== "ellipsis") {
|
|
45
|
+
if (timeoutRef.current !== null)
|
|
46
|
+
clearTimeout(timeoutRef.current);
|
|
47
|
+
else if (!isSubmenuOpened)
|
|
48
|
+
onSubmenuOpen(e);
|
|
49
|
+
timeoutRef.current = null;
|
|
50
|
+
}
|
|
51
|
+
onMouseEnter(e);
|
|
52
|
+
},
|
|
53
|
+
[isSubmenuOpened, onMouseEnter, onSubmenuOpen, rightAddon]
|
|
54
|
+
);
|
|
55
|
+
const onMouseLeaveHandler = (0, import_react.useCallback)(
|
|
56
|
+
(e) => {
|
|
57
|
+
if (rightAddon !== "ellipsis") {
|
|
58
|
+
if (timeoutRef.current === null) {
|
|
59
|
+
timeoutRef.current = setTimeout(() => {
|
|
60
|
+
timeoutRef.current = null;
|
|
61
|
+
onSubmenuClose(e);
|
|
62
|
+
}, 300);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
onMouseLeave(e);
|
|
66
|
+
},
|
|
67
|
+
[onMouseLeave, onSubmenuClose, rightAddon]
|
|
68
|
+
);
|
|
69
|
+
const onEllipsisClick = (0, import_react.useCallback)(
|
|
70
|
+
(e) => {
|
|
71
|
+
if (disabled)
|
|
72
|
+
return;
|
|
73
|
+
e.stopPropagation();
|
|
74
|
+
if (isSubmenuOpened)
|
|
75
|
+
onSubmenuClose(e);
|
|
76
|
+
else
|
|
77
|
+
onSubmenuOpen(e);
|
|
78
|
+
},
|
|
79
|
+
[disabled, isSubmenuOpened, onSubmenuClose, onSubmenuOpen]
|
|
80
|
+
);
|
|
81
|
+
return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };
|
|
82
|
+
};
|
|
83
|
+
//# sourceMappingURL=useGetSubmenuHandlers.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/SingleWithSubmenuItem/useGetSubmenuHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import { useRef, useCallback } from 'react';\nimport { DSMenuItemT } from '../../react-desc-prop-types';\n\nexport const useGetSubmenuHandlers = ({\n disabled,\n rightAddon,\n isSubmenuOpened,\n onMouseEnter,\n onSubmenuOpen,\n onSubmenuClose,\n onMouseLeave,\n}: Required<DSMenuItemT.SingleWithSubmenuProps>) => {\n const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n const onMouseEnterHandler = useCallback(\n (e: React.MouseEvent) => {\n if (rightAddon !== 'ellipsis') {\n if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);\n else if (!isSubmenuOpened) onSubmenuOpen(e);\n timeoutRef.current = null;\n }\n onMouseEnter(e);\n },\n [isSubmenuOpened, onMouseEnter, onSubmenuOpen, rightAddon],\n );\n\n const onMouseLeaveHandler = useCallback(\n (e: React.MouseEvent) => {\n if (rightAddon !== 'ellipsis') {\n if (timeoutRef.current === null) {\n timeoutRef.current = setTimeout(() => {\n timeoutRef.current = null;\n onSubmenuClose(e);\n }, 300);\n }\n }\n onMouseLeave(e);\n },\n [onMouseLeave, onSubmenuClose, rightAddon],\n );\n\n const onEllipsisClick: React.MouseEventHandler = useCallback(\n (e) => {\n if (disabled) return;\n e.stopPropagation();\n if (isSubmenuOpened) onSubmenuClose(e);\n else onSubmenuOpen(e);\n },\n [disabled, isSubmenuOpened, onSubmenuClose, onSubmenuOpen],\n );\n\n return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AAG7B,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAoD;AAClD,QAAM,iBAAa,qBAA8B,IAAI;AAErD,QAAM,0BAAsB;AAAA,IAC1B,CAAC,MAAwB;AACvB,UAAI,eAAe,YAAY;AAC7B,YAAI,WAAW,YAAY;AAAM,uBAAa,WAAW,OAAO;AAAA,iBACvD,CAAC;AAAiB,wBAAc,CAAC;AAC1C,mBAAW,UAAU;AAAA,MACvB;AACA,mBAAa,CAAC;AAAA,IAChB;AAAA,IACA,CAAC,iBAAiB,cAAc,eAAe,UAAU;AAAA,EAC3D;AAEA,QAAM,0BAAsB;AAAA,IAC1B,CAAC,MAAwB;AACvB,UAAI,eAAe,YAAY;AAC7B,YAAI,WAAW,YAAY,MAAM;AAC/B,qBAAW,UAAU,WAAW,MAAM;AACpC,uBAAW,UAAU;AACrB,2BAAe,CAAC;AAAA,UAClB,GAAG,GAAG;AAAA,QACR;AAAA,MACF;AACA,mBAAa,CAAC;AAAA,IAChB;AAAA,IACA,CAAC,cAAc,gBAAgB,UAAU;AAAA,EAC3C;AAEA,QAAM,sBAA2C;AAAA,IAC/C,CAAC,MAAM;AACL,UAAI;AAAU;AACd,QAAE,gBAAgB;AAClB,UAAI;AAAiB,uBAAe,CAAC;AAAA;AAChC,sBAAc,CAAC;AAAA,IACtB;AAAA,IACA,CAAC,UAAU,iBAAiB,gBAAgB,aAAa;AAAA,EAC3D;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,gBAAgB;AACrE;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
25
|
+
var SubmenuItem_exports = {};
|
|
26
|
+
__export(SubmenuItem_exports, {
|
|
27
|
+
SubmenuItem: () => SubmenuItem,
|
|
28
|
+
SubmenuItemWithSchema: () => SubmenuItemWithSchema
|
|
29
|
+
});
|
|
30
|
+
module.exports = __toCommonJS(SubmenuItem_exports);
|
|
31
|
+
var React = __toESM(require("react"));
|
|
32
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
|
+
var import_react = require("react");
|
|
34
|
+
var import_ds_grid = require("@elliemae/ds-grid");
|
|
35
|
+
var import_ds_icons = require("@elliemae/ds-icons");
|
|
36
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
37
|
+
var import_react_desc_prop_types = require("../../react-desc-prop-types");
|
|
38
|
+
var import_styled = require("../styled");
|
|
39
|
+
var import_useGetSubmenuHandlers = require("./useGetSubmenuHandlers");
|
|
40
|
+
const SubmenuItem = (props) => {
|
|
41
|
+
const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultSubmenuProps);
|
|
42
|
+
(0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.itemProps);
|
|
43
|
+
const {
|
|
44
|
+
dsId,
|
|
45
|
+
label,
|
|
46
|
+
isActive,
|
|
47
|
+
disabled,
|
|
48
|
+
isSubmenuOpened,
|
|
49
|
+
rightAddon,
|
|
50
|
+
innerRef,
|
|
51
|
+
wrapperStyles,
|
|
52
|
+
optionsShouldHavePadding,
|
|
53
|
+
render: Render,
|
|
54
|
+
Dropdown,
|
|
55
|
+
dropdownProps: {
|
|
56
|
+
options,
|
|
57
|
+
openedSubmenus,
|
|
58
|
+
onSubmenuToggle,
|
|
59
|
+
selectedOptions,
|
|
60
|
+
onKeyDown,
|
|
61
|
+
onOptionClick,
|
|
62
|
+
onClickOutside,
|
|
63
|
+
minWidth,
|
|
64
|
+
maxHeight
|
|
65
|
+
}
|
|
66
|
+
} = propsWithDefault;
|
|
67
|
+
const [delayedIsOpened, setDelayedIsOpened] = (0, import_react.useState)(false);
|
|
68
|
+
(0, import_react.useEffect)(() => {
|
|
69
|
+
setTimeout(() => setDelayedIsOpened(isSubmenuOpened));
|
|
70
|
+
}, [isSubmenuOpened]);
|
|
71
|
+
const { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick } = (0, import_useGetSubmenuHandlers.useGetSubmenuHandlers)(propsWithDefault);
|
|
72
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dropdown, {
|
|
73
|
+
isOpened: delayedIsOpened,
|
|
74
|
+
options: options ?? [],
|
|
75
|
+
onOptionClick,
|
|
76
|
+
startPlacementPreference: "right-start",
|
|
77
|
+
placementOrderPreference: ["right-start", "right-end", "left-start", "left-end"],
|
|
78
|
+
selectedOptions,
|
|
79
|
+
openedSubmenus,
|
|
80
|
+
onSubmenuToggle,
|
|
81
|
+
onKeyDown,
|
|
82
|
+
onClickOutside,
|
|
83
|
+
customOffset: [-4, 1],
|
|
84
|
+
onMouseEnter: onMouseEnterHandler,
|
|
85
|
+
onMouseLeave: onMouseLeaveHandler,
|
|
86
|
+
wrapperStyles: { ...wrapperStyles, w: "100%" },
|
|
87
|
+
minWidth,
|
|
88
|
+
maxHeight,
|
|
89
|
+
as: "li",
|
|
90
|
+
role: "option",
|
|
91
|
+
"aria-selected": isSubmenuOpened,
|
|
92
|
+
"aria-describedby": `dropdownmenu-submenu-${dsId}`,
|
|
93
|
+
id: dsId,
|
|
94
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledGlobalMenuItemWrapper, {
|
|
95
|
+
pr: 0,
|
|
96
|
+
isSelected: isSubmenuOpened,
|
|
97
|
+
isActive,
|
|
98
|
+
onMouseEnter: onMouseEnterHandler,
|
|
99
|
+
onMouseLeave: onMouseLeaveHandler,
|
|
100
|
+
ref: innerRef,
|
|
101
|
+
disabled,
|
|
102
|
+
pl: optionsShouldHavePadding ? 40 : 0,
|
|
103
|
+
as: "div",
|
|
104
|
+
children: [
|
|
105
|
+
Render !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, {
|
|
106
|
+
...propsWithDefault
|
|
107
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, {
|
|
108
|
+
cols: ["auto", "min-content"],
|
|
109
|
+
alignItems: "center",
|
|
110
|
+
children: [
|
|
111
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledItemLabel, {
|
|
112
|
+
children: label
|
|
113
|
+
}),
|
|
114
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledIconContainer, {
|
|
115
|
+
children: [
|
|
116
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledVerticalSeparator, {}),
|
|
117
|
+
rightAddon === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledEllipsisButton, {
|
|
118
|
+
tabIndex: -1,
|
|
119
|
+
onClick: onEllipsisClick,
|
|
120
|
+
disabled,
|
|
121
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MoreOptionsVert, {
|
|
122
|
+
className: "ds-dropdown-menu-v2-more-options",
|
|
123
|
+
color: disabled ? ["neutral", "500"] : ["brand-primary", "600"],
|
|
124
|
+
size: "s"
|
|
125
|
+
})
|
|
126
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronRight, {
|
|
127
|
+
color: disabled ? ["neutral", "500"] : ["brand-primary", "600"],
|
|
128
|
+
size: "s"
|
|
129
|
+
})
|
|
130
|
+
]
|
|
131
|
+
})
|
|
132
|
+
]
|
|
133
|
+
}),
|
|
134
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
135
|
+
id: `dropdownmenu-submenu-${dsId}`,
|
|
136
|
+
style: { display: "none" },
|
|
137
|
+
children: "submenu, to open this submenu press the Right Arrow key"
|
|
138
|
+
})
|
|
139
|
+
]
|
|
140
|
+
})
|
|
141
|
+
});
|
|
142
|
+
};
|
|
143
|
+
SubmenuItem.propTypes = import_react_desc_prop_types.itemProps;
|
|
144
|
+
SubmenuItem.displayName = "SubmenuItem";
|
|
145
|
+
const SubmenuItemWithSchema = (0, import_ds_utilities.describe)(SubmenuItem);
|
|
146
|
+
SubmenuItemWithSchema.propTypes = import_react_desc_prop_types.itemProps;
|
|
147
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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 StyledItemLabel,\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 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 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 : 0}\n as=\"div\"\n >\n {Render !== undefined ? (\n <Render {...propsWithDefault} />\n ) : (\n <Grid cols={['auto', 'min-content']} alignItems=\"center\">\n <StyledItemLabel>{label}</StyledItemLabel>\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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAA2C;AAC3C,qBAAqB;AACrB,sBAA8C;AAC9C,0BAAuF;AACvF,mCAA4D;AAC5D,oBAMO;AACP,mCAAsC;AAEtC,MAAM,cAA6D,CAAC,UAAU;AAC5E,QAAM,uBAAmB,kDAAiE,OAAO,gDAAmB;AAEpH,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,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,QAAI,uBAAS,KAAK;AAE5D,8BAAU,MAAM;AACd,eAAW,MAAM,mBAAmB,eAAe,CAAC;AAAA,EACtD,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,EAAE,qBAAqB,qBAAqB,gBAAgB,QAAI,oDAAsB,gBAAgB;AAE5G,SACE,4CAAC;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,uDAAC;AAAA,MACC,IAAI;AAAA,MACJ,YAAY;AAAA,MACZ;AAAA,MACA,cAAc;AAAA,MACd,cAAc;AAAA,MACd,KAAK;AAAA,MACL;AAAA,MACA,IAAI,2BAA2B,KAAK;AAAA,MACpC,IAAG;AAAA,MAEF;AAAA,mBAAW,SACV,4CAAC;AAAA,UAAQ,GAAG;AAAA,SAAkB,IAE9B,6CAAC;AAAA,UAAK,MAAM,CAAC,QAAQ,aAAa;AAAA,UAAG,YAAW;AAAA,UAC9C;AAAA,wDAAC;AAAA,cAAiB;AAAA,aAAM;AAAA,YACxB,6CAAC;AAAA,cACC;AAAA,4DAAC,yCAAwB;AAAA,gBACxB,eAAe,aACd,4CAAC;AAAA,kBAAqB,UAAU;AAAA,kBAAI,SAAS;AAAA,kBAAiB;AAAA,kBAC5D,sDAAC;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK;AAAA,oBAC9D,MAAK;AAAA,mBACP;AAAA,iBACF,IAEA,4CAAC;AAAA,kBAAa,OAAO,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK;AAAA,kBAAG,MAAK;AAAA,iBAAI;AAAA;AAAA,aAE5F;AAAA;AAAA,SACF;AAAA,QAEF,4CAAC;AAAA,UAAK,IAAI,wBAAwB;AAAA,UAAQ,OAAO,EAAE,SAAS,OAAO;AAAA,UAAG;AAAA,SAEtE;AAAA;AAAA,KACF;AAAA,GACF;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,4BAAwB,8BAAS,WAAW;AAClD,sBAAsB,YAAY;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
25
|
+
var useGetSubmenuHandlers_exports = {};
|
|
26
|
+
__export(useGetSubmenuHandlers_exports, {
|
|
27
|
+
useGetSubmenuHandlers: () => useGetSubmenuHandlers
|
|
28
|
+
});
|
|
29
|
+
module.exports = __toCommonJS(useGetSubmenuHandlers_exports);
|
|
30
|
+
var React = __toESM(require("react"));
|
|
31
|
+
var import_react = require("react");
|
|
32
|
+
const useGetSubmenuHandlers = ({
|
|
33
|
+
disabled,
|
|
34
|
+
rightAddon,
|
|
35
|
+
isSubmenuOpened,
|
|
36
|
+
onMouseEnter,
|
|
37
|
+
onSubmenuOpen,
|
|
38
|
+
onSubmenuClose,
|
|
39
|
+
onMouseLeave
|
|
40
|
+
}) => {
|
|
41
|
+
const timeoutRef = (0, import_react.useRef)(null);
|
|
42
|
+
const onMouseEnterHandler = (0, import_react.useCallback)(
|
|
43
|
+
(e) => {
|
|
44
|
+
if (rightAddon !== "ellipsis") {
|
|
45
|
+
if (timeoutRef.current !== null)
|
|
46
|
+
clearTimeout(timeoutRef.current);
|
|
47
|
+
else if (!isSubmenuOpened)
|
|
48
|
+
onSubmenuOpen(e);
|
|
49
|
+
timeoutRef.current = null;
|
|
50
|
+
}
|
|
51
|
+
onMouseEnter(e);
|
|
52
|
+
},
|
|
53
|
+
[isSubmenuOpened, onMouseEnter, onSubmenuOpen, rightAddon]
|
|
54
|
+
);
|
|
55
|
+
const onMouseLeaveHandler = (0, import_react.useCallback)(
|
|
56
|
+
(e) => {
|
|
57
|
+
if (rightAddon !== "ellipsis") {
|
|
58
|
+
if (timeoutRef.current === null) {
|
|
59
|
+
timeoutRef.current = setTimeout(() => {
|
|
60
|
+
timeoutRef.current = null;
|
|
61
|
+
onSubmenuClose(e);
|
|
62
|
+
}, 300);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
onMouseLeave(e);
|
|
66
|
+
},
|
|
67
|
+
[onMouseLeave, onSubmenuClose, rightAddon]
|
|
68
|
+
);
|
|
69
|
+
const onEllipsisClick = (0, import_react.useCallback)(
|
|
70
|
+
(e) => {
|
|
71
|
+
if (disabled)
|
|
72
|
+
return;
|
|
73
|
+
e.stopPropagation();
|
|
74
|
+
if (isSubmenuOpened)
|
|
75
|
+
onSubmenuClose(e);
|
|
76
|
+
else
|
|
77
|
+
onSubmenuOpen(e);
|
|
78
|
+
},
|
|
79
|
+
[disabled, isSubmenuOpened, onSubmenuClose, onSubmenuOpen]
|
|
80
|
+
);
|
|
81
|
+
return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };
|
|
82
|
+
};
|
|
83
|
+
//# sourceMappingURL=useGetSubmenuHandlers.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/SubmenuItem/useGetSubmenuHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import { useRef, useCallback } from 'react';\nimport { DSMenuItemT } from '../../react-desc-prop-types';\n\nexport const useGetSubmenuHandlers = ({\n disabled,\n rightAddon,\n isSubmenuOpened,\n onMouseEnter,\n onSubmenuOpen,\n onSubmenuClose,\n onMouseLeave,\n}: Required<DSMenuItemT.SubmenuProps>) => {\n const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n const onMouseEnterHandler = useCallback(\n (e: React.MouseEvent) => {\n if (rightAddon !== 'ellipsis') {\n if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);\n else if (!isSubmenuOpened) onSubmenuOpen(e);\n timeoutRef.current = null;\n }\n onMouseEnter(e);\n },\n [isSubmenuOpened, onMouseEnter, onSubmenuOpen, rightAddon],\n );\n\n const onMouseLeaveHandler = useCallback(\n (e: React.MouseEvent) => {\n if (rightAddon !== 'ellipsis') {\n if (timeoutRef.current === null) {\n timeoutRef.current = setTimeout(() => {\n timeoutRef.current = null;\n onSubmenuClose(e);\n }, 300);\n }\n }\n onMouseLeave(e);\n },\n [onMouseLeave, onSubmenuClose, rightAddon],\n );\n\n const onEllipsisClick: React.MouseEventHandler = useCallback(\n (e) => {\n if (disabled) return;\n e.stopPropagation();\n if (isSubmenuOpened) onSubmenuClose(e);\n else onSubmenuOpen(e);\n },\n [disabled, isSubmenuOpened, onSubmenuClose, onSubmenuOpen],\n );\n\n return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AAG7B,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0C;AACxC,QAAM,iBAAa,qBAA8B,IAAI;AAErD,QAAM,0BAAsB;AAAA,IAC1B,CAAC,MAAwB;AACvB,UAAI,eAAe,YAAY;AAC7B,YAAI,WAAW,YAAY;AAAM,uBAAa,WAAW,OAAO;AAAA,iBACvD,CAAC;AAAiB,wBAAc,CAAC;AAC1C,mBAAW,UAAU;AAAA,MACvB;AACA,mBAAa,CAAC;AAAA,IAChB;AAAA,IACA,CAAC,iBAAiB,cAAc,eAAe,UAAU;AAAA,EAC3D;AAEA,QAAM,0BAAsB;AAAA,IAC1B,CAAC,MAAwB;AACvB,UAAI,eAAe,YAAY;AAC7B,YAAI,WAAW,YAAY,MAAM;AAC/B,qBAAW,UAAU,WAAW,MAAM;AACpC,uBAAW,UAAU;AACrB,2BAAe,CAAC;AAAA,UAClB,GAAG,GAAG;AAAA,QACR;AAAA,MACF;AACA,mBAAa,CAAC;AAAA,IAChB;AAAA,IACA,CAAC,cAAc,gBAAgB,UAAU;AAAA,EAC3C;AAEA,QAAM,sBAA2C;AAAA,IAC/C,CAAC,MAAM;AACL,UAAI;AAAU;AACd,QAAE,gBAAgB;AAClB,UAAI;AAAiB,uBAAe,CAAC;AAAA;AAChC,sBAAc,CAAC;AAAA,IACtB;AAAA,IACA,CAAC,UAAU,iBAAiB,gBAAgB,aAAa;AAAA,EAC3D;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,gBAAgB;AACrE;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
12
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
13
|
+
}
|
|
14
|
+
return to;
|
|
15
|
+
};
|
|
16
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
17
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
18
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
19
|
+
mod
|
|
20
|
+
));
|
|
21
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
|
+
var components_exports = {};
|
|
23
|
+
module.exports = __toCommonJS(components_exports);
|
|
24
|
+
var React = __toESM(require("react"));
|
|
25
|
+
__reExport(components_exports, require("./ActionMenuItem"), module.exports);
|
|
26
|
+
__reExport(components_exports, require("./MultiMenuItem"), module.exports);
|
|
27
|
+
__reExport(components_exports, require("./Section"), module.exports);
|
|
28
|
+
__reExport(components_exports, require("./Separator"), module.exports);
|
|
29
|
+
__reExport(components_exports, require("./SingleMenuItem"), module.exports);
|
|
30
|
+
__reExport(components_exports, require("./SingleWithSubmenuItem"), module.exports);
|
|
31
|
+
__reExport(components_exports, require("./SubmenuItem"), module.exports);
|
|
32
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["export * from './ActionMenuItem';\nexport * from './MultiMenuItem';\nexport * from './Section';\nexport * from './Separator';\nexport * from './SingleMenuItem';\nexport * from './SingleWithSubmenuItem';\nexport * from './SubmenuItem';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAc,6BAAd;AACA,+BAAc,4BADd;AAEA,+BAAc,sBAFd;AAGA,+BAAc,wBAHd;AAIA,+BAAc,6BAJd;AAKA,+BAAc,oCALd;AAMA,+BAAc,0BANd;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
25
|
+
var styled_exports = {};
|
|
26
|
+
__export(styled_exports, {
|
|
27
|
+
StyleMenuItemLabel: () => StyleMenuItemLabel,
|
|
28
|
+
StyledEllipsisButton: () => StyledEllipsisButton,
|
|
29
|
+
StyledGlobalMenuItemWrapper: () => StyledGlobalMenuItemWrapper,
|
|
30
|
+
StyledGroupLabel: () => StyledGroupLabel,
|
|
31
|
+
StyledIconContainer: () => StyledIconContainer,
|
|
32
|
+
StyledItemContent: () => StyledItemContent,
|
|
33
|
+
StyledItemLabel: () => StyledItemLabel,
|
|
34
|
+
StyledSectionWrapper: () => StyledSectionWrapper,
|
|
35
|
+
StyledSeparator: () => StyledSeparator,
|
|
36
|
+
StyledSeparatorWrapper: () => StyledSeparatorWrapper,
|
|
37
|
+
StyledVerticalSeparator: () => StyledVerticalSeparator
|
|
38
|
+
});
|
|
39
|
+
module.exports = __toCommonJS(styled_exports);
|
|
40
|
+
var React = __toESM(require("react"));
|
|
41
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
42
|
+
const borderOutside = () => import_ds_system.css`
|
|
43
|
+
:after {
|
|
44
|
+
display: block;
|
|
45
|
+
content: ' ';
|
|
46
|
+
position: absolute;
|
|
47
|
+
top: 0;
|
|
48
|
+
left: 0;
|
|
49
|
+
right: 0;
|
|
50
|
+
bottom: 0;
|
|
51
|
+
border: 1px solid ${({ theme }) => theme.colors.brand[500]};
|
|
52
|
+
pointer-events: none;
|
|
53
|
+
z-index: 7;
|
|
54
|
+
}
|
|
55
|
+
`;
|
|
56
|
+
const disabledOption = () => import_ds_system.css`
|
|
57
|
+
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
58
|
+
|
|
59
|
+
cursor: not-allowed;
|
|
60
|
+
* {
|
|
61
|
+
cursor: not-allowed;
|
|
62
|
+
}
|
|
63
|
+
`;
|
|
64
|
+
const StyledGlobalMenuItemWrapper = import_ds_system.styled.li`
|
|
65
|
+
cursor: pointer;
|
|
66
|
+
min-height: 32px;
|
|
67
|
+
|
|
68
|
+
padding-left: 16px;
|
|
69
|
+
padding-right: 16px;
|
|
70
|
+
display: grid;
|
|
71
|
+
align-items: center;
|
|
72
|
+
list-style: none;
|
|
73
|
+
position: relative;
|
|
74
|
+
${import_ds_system.position}
|
|
75
|
+
${import_ds_system.layout}
|
|
76
|
+
${import_ds_system.sizing}
|
|
77
|
+
${import_ds_system.space}
|
|
78
|
+
|
|
79
|
+
${(props) => {
|
|
80
|
+
if (props.disabled)
|
|
81
|
+
return disabledOption();
|
|
82
|
+
if (props.isActive)
|
|
83
|
+
return borderOutside();
|
|
84
|
+
return "";
|
|
85
|
+
}};
|
|
86
|
+
|
|
87
|
+
background-color: ${(props) => props.isActive ? props.theme.colors.brand[200] : "white"};
|
|
88
|
+
|
|
89
|
+
&:hover {
|
|
90
|
+
background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};
|
|
91
|
+
}
|
|
92
|
+
`;
|
|
93
|
+
const StyleMenuItemLabel = import_ds_system.styled.span`
|
|
94
|
+
padding: 8px 0;
|
|
95
|
+
font-size: 13px;
|
|
96
|
+
`;
|
|
97
|
+
const StyledItemLabel = import_ds_system.styled.div`
|
|
98
|
+
display: grid;
|
|
99
|
+
align-items: center;
|
|
100
|
+
white-space: nowrap;
|
|
101
|
+
text-overflow: ellipsis;
|
|
102
|
+
overflow: hidden;
|
|
103
|
+
width: 100%;
|
|
104
|
+
`;
|
|
105
|
+
const StyledIconContainer = import_ds_system.styled.div`
|
|
106
|
+
width: 29px;
|
|
107
|
+
height: 28px;
|
|
108
|
+
display: grid;
|
|
109
|
+
grid-template-columns: min-content auto;
|
|
110
|
+
place-items: center;
|
|
111
|
+
`;
|
|
112
|
+
const StyledEllipsisButton = import_ds_system.styled.div`
|
|
113
|
+
position: relative;
|
|
114
|
+
width: 100%;
|
|
115
|
+
height: 100%;
|
|
116
|
+
display: grid;
|
|
117
|
+
place-items: center;
|
|
118
|
+
background: transparent;
|
|
119
|
+
:active {
|
|
120
|
+
${(props) => props.disabled ? "" : borderOutside()}
|
|
121
|
+
}
|
|
122
|
+
`;
|
|
123
|
+
const StyledItemContent = import_ds_system.styled.div`
|
|
124
|
+
display: flex;
|
|
125
|
+
width: 100%;
|
|
126
|
+
`;
|
|
127
|
+
const StyledSeparator = import_ds_system.styled.hr`
|
|
128
|
+
border: 0;
|
|
129
|
+
border-top: 1px solid #697489;
|
|
130
|
+
margin: 4px 0px;
|
|
131
|
+
padding: 0;
|
|
132
|
+
`;
|
|
133
|
+
const StyledSeparatorWrapper = import_ds_system.styled.li`
|
|
134
|
+
list-style: none;
|
|
135
|
+
padding: 0px 16px;
|
|
136
|
+
${import_ds_system.position}
|
|
137
|
+
${import_ds_system.layout}
|
|
138
|
+
${import_ds_system.sizing}
|
|
139
|
+
`;
|
|
140
|
+
const StyledGroupLabel = import_ds_system.styled.span`
|
|
141
|
+
font-size: 13px;
|
|
142
|
+
color: neutral-500;
|
|
143
|
+
`;
|
|
144
|
+
const StyledSectionWrapper = import_ds_system.styled.li`
|
|
145
|
+
${import_ds_system.position}
|
|
146
|
+
${import_ds_system.layout}
|
|
147
|
+
${import_ds_system.sizing}
|
|
148
|
+
list-style: none;
|
|
149
|
+
padding: 0px 16px;
|
|
150
|
+
height: 24px;
|
|
151
|
+
display: flex;
|
|
152
|
+
align-items: center;
|
|
153
|
+
`;
|
|
154
|
+
const StyledVerticalSeparator = import_ds_system.styled.div`
|
|
155
|
+
width: 1px;
|
|
156
|
+
height: 18px;
|
|
157
|
+
background-color: neutral-300;
|
|
158
|
+
`;
|
|
159
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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 StyledItemLabel = styled.div`\n display: grid;\n align-items: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\n`;\n\nexport const StyledIconContainer = styled.div`\n width: 29px;\n height: 28px;\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,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS/B,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
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
12
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
13
|
+
}
|
|
14
|
+
return to;
|
|
15
|
+
};
|
|
16
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
17
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
18
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
19
|
+
mod
|
|
20
|
+
));
|
|
21
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
|
+
var src_exports = {};
|
|
23
|
+
module.exports = __toCommonJS(src_exports);
|
|
24
|
+
var React = __toESM(require("react"));
|
|
25
|
+
__reExport(src_exports, require("./components"), module.exports);
|
|
26
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["export * from './components';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,yBAAd;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|