@elliemae/ds-menu 2.1.0 → 2.2.0-alpha.3
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/cjs/Menu.js +137 -181
- package/cjs/Menu.js.map +7 -0
- package/cjs/MenuCombobox.js +67 -53
- package/cjs/MenuCombobox.js.map +7 -0
- package/cjs/MenuContext.js +38 -11
- package/cjs/MenuContext.js.map +7 -0
- package/cjs/MenuExports.js +28 -0
- package/cjs/MenuExports.js.map +7 -0
- package/cjs/MenuItems/CheckboxGroup.js +49 -42
- package/cjs/MenuItems/CheckboxGroup.js.map +7 -0
- package/cjs/MenuItems/MenuItem.js +116 -163
- package/cjs/MenuItems/MenuItem.js.map +7 -0
- package/cjs/MenuItems/MenuItemCheckable.js +77 -108
- package/cjs/MenuItems/MenuItemCheckable.js.map +7 -0
- package/cjs/MenuItems/MenuItemCheckbox.js +47 -41
- package/cjs/MenuItems/MenuItemCheckbox.js.map +7 -0
- package/cjs/MenuItems/MenuItemRadio.js +50 -38
- package/cjs/MenuItems/MenuItemRadio.js.map +7 -0
- package/cjs/MenuItems/RadioGroup.js +48 -39
- package/cjs/MenuItems/RadioGroup.js.map +7 -0
- package/cjs/MenuItems/SearchableGroup.js +88 -92
- package/cjs/MenuItems/SearchableGroup.js.map +7 -0
- package/cjs/MenuItems/SearchableList.js +92 -95
- package/cjs/MenuItems/SearchableList.js.map +7 -0
- package/cjs/MenuItems/SelectionGroup.js +85 -90
- package/cjs/MenuItems/SelectionGroup.js.map +7 -0
- package/cjs/MenuItems/Separator.js +55 -40
- package/cjs/MenuItems/Separator.js.map +7 -0
- package/cjs/MenuItems/SubMenu.js +143 -160
- package/cjs/MenuItems/SubMenu.js.map +7 -0
- package/cjs/MenuItems/menuItemFactory.js +38 -68
- package/cjs/MenuItems/menuItemFactory.js.map +7 -0
- package/cjs/MenuItems/renderMenuItems.js +53 -0
- package/cjs/MenuItems/renderMenuItems.js.map +7 -0
- package/cjs/VirtualMenuList.js +69 -39
- package/cjs/VirtualMenuList.js.map +7 -0
- package/cjs/index.js +63 -36
- package/cjs/index.js.map +7 -0
- package/cjs/utils/useHeightByAmountOfItems.js +43 -14
- package/cjs/utils/useHeightByAmountOfItems.js.map +7 -0
- package/esm/Menu.js +91 -149
- package/esm/Menu.js.map +7 -0
- package/esm/MenuCombobox.js +38 -45
- package/esm/MenuCombobox.js.map +7 -0
- package/esm/MenuContext.js +9 -5
- package/esm/MenuContext.js.map +7 -0
- package/esm/MenuExports.js +3 -0
- package/esm/MenuExports.js.map +7 -0
- package/esm/MenuItems/CheckboxGroup.js +19 -31
- package/esm/MenuItems/CheckboxGroup.js.map +7 -0
- package/esm/MenuItems/MenuItem.js +84 -148
- package/esm/MenuItems/MenuItem.js.map +7 -0
- package/esm/MenuItems/MenuItemCheckable.js +47 -96
- package/esm/MenuItems/MenuItemCheckable.js.map +7 -0
- package/esm/MenuItems/MenuItemCheckbox.js +18 -33
- package/esm/MenuItems/MenuItemCheckbox.js.map +7 -0
- package/esm/MenuItems/MenuItemRadio.js +20 -28
- package/esm/MenuItems/MenuItemRadio.js.map +7 -0
- package/esm/MenuItems/RadioGroup.js +18 -28
- package/esm/MenuItems/RadioGroup.js.map +7 -0
- package/esm/MenuItems/SearchableGroup.js +53 -76
- package/esm/MenuItems/SearchableGroup.js.map +7 -0
- package/esm/MenuItems/SearchableList.js +59 -82
- package/esm/MenuItems/SearchableList.js.map +7 -0
- package/esm/MenuItems/SelectionGroup.js +54 -78
- package/esm/MenuItems/SelectionGroup.js.map +7 -0
- package/esm/MenuItems/Separator.js +26 -29
- package/esm/MenuItems/Separator.js.map +7 -0
- package/esm/MenuItems/SubMenu.js +107 -140
- package/esm/MenuItems/SubMenu.js.map +7 -0
- package/esm/MenuItems/menuItemFactory.js +10 -60
- package/esm/MenuItems/menuItemFactory.js.map +7 -0
- package/esm/MenuItems/renderMenuItems.js +24 -0
- package/esm/MenuItems/renderMenuItems.js.map +7 -0
- package/esm/VirtualMenuList.js +39 -32
- package/esm/VirtualMenuList.js.map +7 -0
- package/esm/index.js +34 -13
- package/esm/index.js.map +7 -0
- package/esm/utils/useHeightByAmountOfItems.js +13 -11
- package/esm/utils/useHeightByAmountOfItems.js.map +7 -0
- package/package.json +19 -11
- package/types/Menu.d.ts +3 -2
- package/types/MenuContext.d.ts +3 -2
- package/types/MenuExports.d.ts +1 -0
- package/types/MenuItems/CheckboxGroup.d.ts +5 -5
- package/types/MenuItems/MenuItem.d.ts +5 -5
- package/types/MenuItems/MenuItemCheckable.d.ts +15 -15
- package/types/MenuItems/MenuItemCheckbox.d.ts +3 -2
- package/types/MenuItems/MenuItemRadio.d.ts +5 -5
- package/types/MenuItems/RadioGroup.d.ts +5 -5
- package/types/MenuItems/SearchableGroup.d.ts +3 -3
- package/types/MenuItems/SearchableList.d.ts +16 -16
- package/types/MenuItems/SelectionGroup.d.ts +16 -16
- package/types/MenuItems/Separator.d.ts +2 -1
- package/types/MenuItems/SubMenu.d.ts +18 -18
- package/types/MenuItems/menuItemFactory.d.ts +2 -3
- package/types/MenuItems/renderMenuItems.d.ts +1 -0
- package/types/VirtualMenuList.d.ts +3 -1
- package/types/index.d.ts +3 -2
- package/types/utils/useHeightByAmountOfItems.d.ts +3 -1
|
@@ -1,45 +1,52 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var CheckboxGroup_exports = {};
|
|
29
|
+
__export(CheckboxGroup_exports, {
|
|
30
|
+
CheckboxGroup: () => CheckboxGroup,
|
|
31
|
+
DSMenuCheckboxGroupWithSchema: () => DSMenuCheckboxGroupWithSchema,
|
|
32
|
+
default: () => CheckboxGroup_default
|
|
33
|
+
});
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
var import_react = __toESM(require("react"));
|
|
36
|
+
var import_react_desc = __toESM(require("react-desc"));
|
|
37
|
+
var import_CheckableGroup = __toESM(require("@elliemae/ds-shared/CheckableGroup"));
|
|
38
|
+
const CheckboxGroup = (props2) => /* @__PURE__ */ import_react.default.createElement(import_CheckableGroup.CheckableGroup, {
|
|
39
|
+
...props2,
|
|
40
|
+
multi: true
|
|
41
|
+
});
|
|
31
42
|
const props = {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
/* Whether is multi select or not */
|
|
36
|
-
multi: reactDesc.PropTypes.bool.description('Whether is multi select or not'),
|
|
37
|
-
|
|
38
|
-
/* Handler when a user checks an item */
|
|
39
|
-
onCheck: reactDesc.PropTypes.func.description('Handler when a user checks an item')
|
|
43
|
+
active: import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.string).description("The item (if multi false) or items (if multi true) selected"),
|
|
44
|
+
multi: import_react_desc.PropTypes.bool.description("Whether is multi select or not"),
|
|
45
|
+
onCheck: import_react_desc.PropTypes.func.description("Handler when a user checks an item")
|
|
40
46
|
};
|
|
41
|
-
|
|
47
|
+
CheckboxGroup.propTypes = props;
|
|
48
|
+
const DSMenuCheckboxGroupWithSchema = (0, import_react_desc.describe)(CheckboxGroup);
|
|
42
49
|
DSMenuCheckboxGroupWithSchema.propTypes = props;
|
|
43
|
-
|
|
44
|
-
exports
|
|
45
|
-
|
|
50
|
+
var CheckboxGroup_default = CheckboxGroup;
|
|
51
|
+
module.exports = __toCommonJS(CheckboxGroup_exports);
|
|
52
|
+
//# sourceMappingURL=CheckboxGroup.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/MenuItems/CheckboxGroup.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { CheckableGroup } from '@elliemae/ds-shared/CheckableGroup';\n\nconst CheckboxGroup = (props) => <CheckableGroup {...props} multi />;\n\nconst props = {\n /* The item (if multi false) or items (if multi true) selected */\n active: PropTypes.arrayOf(PropTypes.string).description(\n 'The item (if multi false) or items (if multi true) selected',\n ),\n /* Whether is multi select or not */\n multi: PropTypes.bool.description('Whether is multi select or not'),\n /* Handler when a user checks an item */\n onCheck: PropTypes.func.description('Handler when a user checks an item'),\n};\n\nCheckboxGroup.propTypes = props;\n\nconst DSMenuCheckboxGroupWithSchema = describe(CheckboxGroup);\nDSMenuCheckboxGroupWithSchema.propTypes = props;\n\nexport { DSMenuCheckboxGroupWithSchema, CheckboxGroup };\nexport default CheckboxGroup;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAoC;AACpC,4BAA+B;AAE/B,MAAM,gBAAgB,CAAC,WAAU,mDAAC,sCAAD;AAAA,KAAoB;AAAA,EAAO,OAAK;AAAA;AAEjE,MAAM,QAAQ;AAAA,EAEZ,QAAQ,4BAAU,QAAQ,4BAAU,QAAQ,YAC1C;AAAA,EAGF,OAAO,4BAAU,KAAK,YAAY;AAAA,EAElC,SAAS,4BAAU,KAAK,YAAY;AAAA;AAGtC,cAAc,YAAY;AAE1B,MAAM,gCAAgC,gCAAS;AAC/C,8BAA8B,YAAY;AAG1C,IAAO,wBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,98 +1,77 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
var reactDesc = require('react-desc');
|
|
18
|
-
var lodash = require('lodash');
|
|
19
|
-
var dsClassnames = require('@elliemae/ds-classnames');
|
|
20
|
-
var dsUtilities = require('@elliemae/ds-utilities');
|
|
21
|
-
var FocusGroup = require('@elliemae/ds-shared/FocusGroup');
|
|
22
|
-
var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
|
|
23
|
-
var menuItemFactory = require('./menuItemFactory.js');
|
|
24
|
-
var SubMenu = require('./SubMenu.js');
|
|
25
|
-
var MenuContext = require('../MenuContext.js');
|
|
26
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
27
|
-
|
|
28
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
29
|
-
|
|
30
|
-
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
31
|
-
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
32
|
-
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
33
|
-
var DSTruncatedTooltipText__default = /*#__PURE__*/_interopDefaultLegacy(DSTruncatedTooltipText);
|
|
34
|
-
|
|
35
|
-
const _excluded = ["innerRef", "as", "role", "leftAddon", "rightAddon", "disabledAddonInactive", "label", "children", "tabIndex", "onKeyDown", "fixedItem", "noAddon", "disabled", "customRenderer", "maxOption", "closeMenu", "style"];
|
|
36
|
-
|
|
37
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
38
|
-
|
|
39
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
40
|
-
|
|
41
|
-
const noop = () => null;
|
|
42
|
-
|
|
43
|
-
const blockName = 'menu-item';
|
|
44
|
-
const Content = dsClassnames.aggregatedClasses('div')(blockName, 'content');
|
|
45
|
-
const Addon = dsClassnames.aggregatedClasses('div')(blockName, 'addon', _ref => {
|
|
46
|
-
let {
|
|
47
|
-
empty,
|
|
48
|
-
fixedItem
|
|
49
|
-
} = _ref;
|
|
50
|
-
return {
|
|
51
|
-
empty,
|
|
52
|
-
fixedItem
|
|
53
|
-
};
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
const renderAddon = (addon, fixedItem, addonId) => /*#__PURE__*/_jsx__default["default"](Addon, {
|
|
57
|
-
classProps: {
|
|
58
|
-
fixedItem
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
59
17
|
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
customRenderer,
|
|
69
|
-
fixedItem,
|
|
70
|
-
type
|
|
71
|
-
} = _ref2;
|
|
72
|
-
return {
|
|
73
|
-
disabled,
|
|
74
|
-
disabledAddonInactive,
|
|
75
|
-
customRenderer,
|
|
76
|
-
fixedItem,
|
|
77
|
-
["menu-type-".concat(type)]: type
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
78
26
|
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var MenuItem_exports = {};
|
|
29
|
+
__export(MenuItem_exports, {
|
|
30
|
+
DSMenuItemWithSchema: () => DSMenuItemWithSchema,
|
|
31
|
+
MenuItem: () => MenuItem,
|
|
32
|
+
default: () => MenuItem_default
|
|
79
33
|
});
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
var import_react = __toESM(require("react"));
|
|
36
|
+
var import_react_desc = __toESM(require("react-desc"));
|
|
37
|
+
var import_lodash = __toESM(require("lodash"));
|
|
38
|
+
var import_ds_classnames = __toESM(require("@elliemae/ds-classnames"));
|
|
39
|
+
var import_ds_utilities = __toESM(require("@elliemae/ds-utilities"));
|
|
40
|
+
var import_FocusGroup = __toESM(require("@elliemae/ds-shared/FocusGroup"));
|
|
41
|
+
var import_ds_truncated_tooltip_text = __toESM(require("@elliemae/ds-truncated-tooltip-text"));
|
|
42
|
+
var import_MenuContext = __toESM(require("../MenuContext"));
|
|
43
|
+
var import_menuItemFactory = __toESM(require("./menuItemFactory"));
|
|
44
|
+
var import_renderMenuItems = __toESM(require("./renderMenuItems"));
|
|
45
|
+
const noop = () => null;
|
|
46
|
+
const blockName = "menu-item";
|
|
47
|
+
const Content = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "content");
|
|
48
|
+
const Addon = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "addon", ({ empty, fixedItem }) => ({ empty, fixedItem }));
|
|
49
|
+
const renderAddon = (addon, fixedItem, addonId) => /* @__PURE__ */ import_react.default.createElement(Addon, {
|
|
50
|
+
key: addonId,
|
|
51
|
+
classProps: { fixedItem }
|
|
52
|
+
}, addon);
|
|
53
|
+
const renderAddons = (addons, fixedItem) => Array.isArray(addons) ? addons.map(renderAddon) : renderAddon(addons, fixedItem);
|
|
54
|
+
const Wrapper = (0, import_ds_classnames.aggregatedClasses)("li")(blockName, null, ({ disabled, disabledAddonInactive, customRenderer, fixedItem, type }) => ({
|
|
55
|
+
disabled,
|
|
56
|
+
disabledAddonInactive,
|
|
57
|
+
customRenderer,
|
|
58
|
+
fixedItem,
|
|
59
|
+
[`menu-type-${type}`]: type
|
|
60
|
+
}));
|
|
61
|
+
const calculateSize = (length = 0) => {
|
|
62
|
+
if (length > 45)
|
|
63
|
+
return 45 * 7;
|
|
84
64
|
return length * 7;
|
|
85
65
|
};
|
|
86
|
-
|
|
87
|
-
function MenuItem(props) {
|
|
66
|
+
const MenuItem = (props2) => {
|
|
88
67
|
const {
|
|
89
68
|
innerRef,
|
|
90
|
-
as =
|
|
91
|
-
role =
|
|
69
|
+
as = "li",
|
|
70
|
+
role = "menuitem",
|
|
92
71
|
leftAddon = null,
|
|
93
|
-
rightAddon =
|
|
94
|
-
disabledAddonInactive =
|
|
95
|
-
label =
|
|
72
|
+
rightAddon = void 0,
|
|
73
|
+
disabledAddonInactive = void 0,
|
|
74
|
+
label = void 0,
|
|
96
75
|
children,
|
|
97
76
|
tabIndex = -1,
|
|
98
77
|
onKeyDown = noop,
|
|
@@ -102,33 +81,28 @@ function MenuItem(props) {
|
|
|
102
81
|
customRenderer,
|
|
103
82
|
maxOption,
|
|
104
83
|
closeMenu,
|
|
105
|
-
style
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
const
|
|
110
|
-
|
|
111
|
-
FocusGroup.useFocusGroupItem(ref);
|
|
112
|
-
|
|
84
|
+
style,
|
|
85
|
+
...otherProps
|
|
86
|
+
} = props2;
|
|
87
|
+
const menuCxt = (0, import_react.useContext)(import_MenuContext.MenuContext);
|
|
88
|
+
const ref = (0, import_react.useRef)(null);
|
|
89
|
+
(0, import_FocusGroup.useFocusGroupItem)(ref);
|
|
113
90
|
if (otherProps.subItems) {
|
|
114
|
-
return
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
}));
|
|
91
|
+
return /* @__PURE__ */ import_react.default.createElement(SubMenu, {
|
|
92
|
+
...props2,
|
|
93
|
+
closeMenu: menuCxt.closeMenu
|
|
94
|
+
}, (0, import_renderMenuItems.renderMenuItems)(otherProps.subItems));
|
|
118
95
|
}
|
|
119
|
-
|
|
120
|
-
const
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
if (wrapperProps.onClick) wrapperProps.onClick(...arguments);
|
|
124
|
-
|
|
96
|
+
const wrapperProps = (0, import_react.useMemo)(() => (0, import_lodash.omit)(otherProps, ["icon"]), [otherProps]);
|
|
97
|
+
const onClick = (...args) => {
|
|
98
|
+
if (wrapperProps.onClick)
|
|
99
|
+
wrapperProps.onClick(...args);
|
|
125
100
|
if (wrapperProps.closeOnClick && menuCxt.closeMenu) {
|
|
126
|
-
menuCxt.closeMenu(...
|
|
101
|
+
menuCxt.closeMenu(...args);
|
|
127
102
|
}
|
|
128
103
|
};
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
as: as,
|
|
104
|
+
return /* @__PURE__ */ import_react.default.createElement(Wrapper, {
|
|
105
|
+
as,
|
|
132
106
|
classProps: {
|
|
133
107
|
disabled,
|
|
134
108
|
disabledAddonInactive,
|
|
@@ -137,67 +111,46 @@ function MenuItem(props) {
|
|
|
137
111
|
type: otherProps.type
|
|
138
112
|
},
|
|
139
113
|
id: otherProps.id,
|
|
140
|
-
innerRef: otherProps.type !==
|
|
141
|
-
onKeyDown: !fixedItem &&
|
|
142
|
-
if (e.key ===
|
|
114
|
+
innerRef: otherProps.type !== "disabled" ? (0, import_ds_utilities.mergeRefs)(innerRef, ref) : innerRef,
|
|
115
|
+
onKeyDown: !fixedItem && (0, import_ds_utilities.runAll)((e) => {
|
|
116
|
+
if (e.key === " " || e.key === "Enter") {
|
|
143
117
|
e.preventDefault();
|
|
144
|
-
e.target.dispatchEvent(new MouseEvent(
|
|
118
|
+
e.target.dispatchEvent(new MouseEvent("click", {
|
|
145
119
|
view: window,
|
|
146
120
|
bubbles: true,
|
|
147
121
|
cancelable: false
|
|
148
122
|
}));
|
|
149
123
|
}
|
|
150
124
|
}, onKeyDown),
|
|
151
|
-
role
|
|
152
|
-
style
|
|
153
|
-
tabIndex
|
|
154
|
-
|
|
155
|
-
onClick
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
}
|
|
166
|
-
|
|
125
|
+
role,
|
|
126
|
+
style,
|
|
127
|
+
tabIndex,
|
|
128
|
+
...wrapperProps,
|
|
129
|
+
onClick
|
|
130
|
+
}, !noAddon && renderAddons(leftAddon, fixedItem), label && /* @__PURE__ */ import_react.default.createElement(Content, {
|
|
131
|
+
style: maxOption > 0 ? {
|
|
132
|
+
width: `${calculateSize(maxOption)}px`,
|
|
133
|
+
maxWidth: `${calculateSize(maxOption)}px`
|
|
134
|
+
} : void 0
|
|
135
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.DSTruncatedTooltipText, {
|
|
136
|
+
value: label
|
|
137
|
+
})), customRenderer, rightAddon && renderAddons(rightAddon), children);
|
|
138
|
+
};
|
|
167
139
|
const props = {
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
/** Renders the passed element to the left */
|
|
179
|
-
leftAddon: reactDesc.PropTypes.element.description('Renders the passed element to the left'),
|
|
180
|
-
|
|
181
|
-
/** Renders the passed element to the right */
|
|
182
|
-
rightAddon: reactDesc.PropTypes.element.description('Renders the passed element to the right'),
|
|
183
|
-
|
|
184
|
-
/** Label for the menu item */
|
|
185
|
-
label: reactDesc.PropTypes.string.description('Label for the menu item'),
|
|
186
|
-
|
|
187
|
-
/** style object for menu item wrapper */
|
|
188
|
-
style: reactDesc.PropTypes.object.description('style object for menu item wrapper'),
|
|
189
|
-
|
|
190
|
-
/** disable menu item */
|
|
191
|
-
disabled: reactDesc.PropTypes.bool.description('disable menu item'),
|
|
192
|
-
|
|
193
|
-
/** HTML tabindex to manage focus order */
|
|
194
|
-
tabindex: reactDesc.PropTypes.number.description('HTML tabindex to manage focus order'),
|
|
195
|
-
|
|
196
|
-
/** a11y role */
|
|
197
|
-
role: reactDesc.PropTypes.string.description('a11y role')
|
|
140
|
+
as: import_react_desc.PropTypes.element.description("Renders the MenuItem with a specific html element"),
|
|
141
|
+
innerRef: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.func, import_react_desc.PropTypes.shape({ current: import_react_desc.PropTypes.any })]).description("reference to the component"),
|
|
142
|
+
leftAddon: import_react_desc.PropTypes.element.description("Renders the passed element to the left"),
|
|
143
|
+
rightAddon: import_react_desc.PropTypes.element.description("Renders the passed element to the right"),
|
|
144
|
+
label: import_react_desc.PropTypes.string.description("Label for the menu item"),
|
|
145
|
+
style: import_react_desc.PropTypes.object.description("style object for menu item wrapper"),
|
|
146
|
+
disabled: import_react_desc.PropTypes.bool.description("disable menu item"),
|
|
147
|
+
tabindex: import_react_desc.PropTypes.number.description("HTML tabindex to manage focus order"),
|
|
148
|
+
role: import_react_desc.PropTypes.string.description("a11y role")
|
|
198
149
|
};
|
|
199
|
-
|
|
150
|
+
MenuItem.propTypes = props;
|
|
151
|
+
(0, import_menuItemFactory.registerMenuItem)("menuitem", MenuItem);
|
|
152
|
+
const DSMenuItemWithSchema = (0, import_react_desc.describe)(MenuItem);
|
|
200
153
|
DSMenuItemWithSchema.propTypes = props;
|
|
201
|
-
|
|
202
|
-
exports
|
|
203
|
-
|
|
154
|
+
var MenuItem_default = MenuItem;
|
|
155
|
+
module.exports = __toCommonJS(MenuItem_exports);
|
|
156
|
+
//# sourceMappingURL=MenuItem.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/MenuItems/MenuItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable import/no-cycle */\nimport React, { useRef, useMemo, useContext } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { omit } from 'lodash';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { mergeRefs, runAll } from '@elliemae/ds-utilities';\nimport { useFocusGroupItem } from '@elliemae/ds-shared/FocusGroup';\nimport { DSTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { MenuContext } from '../MenuContext';\nimport { registerMenuItem } from './menuItemFactory';\nimport { renderMenuItems } from './renderMenuItems';\n\nconst noop = () => null;\n\nconst blockName = 'menu-item';\n\nconst Content = aggregatedClasses('div')(blockName, 'content');\nconst Addon = aggregatedClasses('div')(blockName, 'addon', ({ empty, fixedItem }) => ({ empty, fixedItem }));\n\nconst renderAddon = (addon, fixedItem, addonId) => (\n <Addon key={addonId} classProps={{ fixedItem }}>\n {addon}\n </Addon>\n);\n\nconst renderAddons = (addons, fixedItem) =>\n Array.isArray(addons) ? addons.map(renderAddon) : renderAddon(addons, fixedItem);\n\nconst Wrapper = aggregatedClasses('li')(\n blockName,\n null,\n ({ disabled, disabledAddonInactive, customRenderer, fixedItem, type }) => ({\n disabled,\n disabledAddonInactive,\n customRenderer,\n fixedItem,\n [`menu-type-${type}`]: type,\n }),\n);\nconst calculateSize = (length = 0) => {\n if (length > 45) return 45 * 7;\n return length * 7;\n};\n\nconst MenuItem = (props) => {\n const {\n innerRef,\n as = 'li',\n role = 'menuitem',\n leftAddon = null,\n rightAddon = undefined,\n disabledAddonInactive = undefined,\n label = undefined,\n children,\n tabIndex = -1,\n onKeyDown = noop,\n fixedItem = false,\n noAddon,\n disabled = false,\n customRenderer,\n maxOption,\n closeMenu,\n style,\n ...otherProps\n } = props;\n\n const menuCxt = useContext(MenuContext);\n const ref = useRef(null);\n useFocusGroupItem(ref);\n if (otherProps.subItems) {\n return (\n <SubMenu {...props} closeMenu={menuCxt.closeMenu}>\n {renderMenuItems(otherProps.subItems)}\n </SubMenu>\n );\n }\n\n const wrapperProps = useMemo(() => omit(otherProps, ['icon']), [otherProps]);\n\n const onClick = (...args) => {\n if (wrapperProps.onClick) wrapperProps.onClick(...args);\n if (wrapperProps.closeOnClick && menuCxt.closeMenu) {\n menuCxt.closeMenu(...args);\n }\n };\n\n return (\n <Wrapper\n as={as}\n classProps={{\n disabled,\n disabledAddonInactive,\n customRenderer,\n fixedItem,\n type: otherProps.type,\n }}\n id={otherProps.id}\n innerRef={otherProps.type !== 'disabled' ? mergeRefs(innerRef, ref) : innerRef}\n onKeyDown={\n !fixedItem &&\n runAll((e) => {\n if (e.key === ' ' || e.key === 'Enter') {\n e.preventDefault();\n e.target.dispatchEvent(\n new MouseEvent('click', {\n view: window,\n bubbles: true,\n cancelable: false,\n }),\n );\n }\n }, onKeyDown)\n }\n role={role}\n style={style}\n tabIndex={tabIndex}\n {...wrapperProps}\n onClick={onClick}\n >\n {!noAddon && renderAddons(leftAddon, fixedItem)}\n {label && (\n <Content\n style={\n maxOption > 0\n ? {\n width: `${calculateSize(maxOption)}px`,\n maxWidth: `${calculateSize(maxOption)}px`,\n }\n : undefined\n }\n >\n <DSTruncatedTooltipText value={label} />\n </Content>\n )}\n {customRenderer}\n {rightAddon && renderAddons(rightAddon)}\n {children}\n </Wrapper>\n );\n};\n\nconst props = {\n /** Renders the MenuItem with a specific html element */\n as: PropTypes.element.description('Renders the MenuItem with a specific html element'),\n /**\n * reference to the component\n */\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n 'reference to the component',\n ),\n /** Renders the passed element to the left */\n leftAddon: PropTypes.element.description('Renders the passed element to the left'),\n /** Renders the passed element to the right */\n rightAddon: PropTypes.element.description('Renders the passed element to the right'),\n /** Label for the menu item */\n label: PropTypes.string.description('Label for the menu item'),\n /** style object for menu item wrapper */\n style: PropTypes.object.description('style object for menu item wrapper'),\n /** disable menu item */\n disabled: PropTypes.bool.description('disable menu item'),\n /** HTML tabindex to manage focus order */\n tabindex: PropTypes.number.description('HTML tabindex to manage focus order'),\n /** a11y role */\n role: PropTypes.string.description('a11y role'),\n};\n\nMenuItem.propTypes = props;\nregisterMenuItem('menuitem', MenuItem);\n\nconst DSMenuItemWithSchema = describe(MenuItem);\nDSMenuItemWithSchema.propTypes = props;\n\nexport { DSMenuItemWithSchema, MenuItem };\nexport default MenuItem;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|