@elliemae/ds-menu 2.2.0-alpha.4 → 3.0.0-next.2
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 +181 -137
- package/cjs/MenuCombobox.js +53 -67
- package/cjs/MenuContext.js +11 -38
- package/cjs/MenuItems/CheckboxGroup.js +42 -49
- package/cjs/MenuItems/MenuItem.js +163 -116
- package/cjs/MenuItems/MenuItemCheckable.js +108 -77
- package/cjs/MenuItems/MenuItemCheckbox.js +41 -47
- package/cjs/MenuItems/MenuItemRadio.js +38 -50
- package/cjs/MenuItems/RadioGroup.js +39 -48
- package/cjs/MenuItems/SearchableGroup.js +92 -88
- package/cjs/MenuItems/SearchableList.js +95 -92
- package/cjs/MenuItems/SelectionGroup.js +90 -85
- package/cjs/MenuItems/Separator.js +40 -55
- package/cjs/MenuItems/SubMenu.js +160 -143
- package/cjs/MenuItems/menuItemFactory.js +68 -38
- package/cjs/VirtualMenuList.js +39 -69
- package/cjs/index.js +36 -63
- package/cjs/utils/useHeightByAmountOfItems.js +14 -43
- package/esm/Menu.js +149 -91
- package/esm/MenuCombobox.js +45 -38
- package/esm/MenuContext.js +5 -9
- package/esm/MenuItems/CheckboxGroup.js +31 -19
- package/esm/MenuItems/MenuItem.js +148 -84
- package/esm/MenuItems/MenuItemCheckable.js +96 -47
- package/esm/MenuItems/MenuItemCheckbox.js +33 -18
- package/esm/MenuItems/MenuItemRadio.js +28 -20
- package/esm/MenuItems/RadioGroup.js +28 -18
- package/esm/MenuItems/SearchableGroup.js +76 -53
- package/esm/MenuItems/SearchableList.js +82 -59
- package/esm/MenuItems/SelectionGroup.js +78 -54
- package/esm/MenuItems/Separator.js +29 -26
- package/esm/MenuItems/SubMenu.js +140 -107
- package/esm/MenuItems/menuItemFactory.js +60 -10
- package/esm/VirtualMenuList.js +32 -39
- package/esm/index.js +13 -34
- package/esm/utils/useHeightByAmountOfItems.js +11 -13
- package/package.json +11 -19
- package/types/Menu.d.ts +2 -3
- package/types/MenuContext.d.ts +2 -3
- 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 +2 -3
- 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 +1 -2
- package/types/MenuItems/SubMenu.d.ts +18 -18
- package/types/MenuItems/menuItemFactory.d.ts +3 -2
- package/types/VirtualMenuList.d.ts +1 -3
- package/types/index.d.ts +2 -3
- package/types/utils/useHeightByAmountOfItems.d.ts +1 -3
- package/cjs/Menu.js.map +0 -7
- package/cjs/MenuCombobox.js.map +0 -7
- package/cjs/MenuContext.js.map +0 -7
- package/cjs/MenuExports.js +0 -28
- package/cjs/MenuExports.js.map +0 -7
- package/cjs/MenuItems/CheckboxGroup.js.map +0 -7
- package/cjs/MenuItems/MenuItem.js.map +0 -7
- package/cjs/MenuItems/MenuItemCheckable.js.map +0 -7
- package/cjs/MenuItems/MenuItemCheckbox.js.map +0 -7
- package/cjs/MenuItems/MenuItemRadio.js.map +0 -7
- package/cjs/MenuItems/RadioGroup.js.map +0 -7
- package/cjs/MenuItems/SearchableGroup.js.map +0 -7
- package/cjs/MenuItems/SearchableList.js.map +0 -7
- package/cjs/MenuItems/SelectionGroup.js.map +0 -7
- package/cjs/MenuItems/Separator.js.map +0 -7
- package/cjs/MenuItems/SubMenu.js.map +0 -7
- package/cjs/MenuItems/menuItemFactory.js.map +0 -7
- package/cjs/MenuItems/renderMenuItems.js +0 -53
- package/cjs/MenuItems/renderMenuItems.js.map +0 -7
- package/cjs/VirtualMenuList.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/cjs/utils/useHeightByAmountOfItems.js.map +0 -7
- package/esm/Menu.js.map +0 -7
- package/esm/MenuCombobox.js.map +0 -7
- package/esm/MenuContext.js.map +0 -7
- package/esm/MenuExports.js +0 -3
- package/esm/MenuExports.js.map +0 -7
- package/esm/MenuItems/CheckboxGroup.js.map +0 -7
- package/esm/MenuItems/MenuItem.js.map +0 -7
- package/esm/MenuItems/MenuItemCheckable.js.map +0 -7
- package/esm/MenuItems/MenuItemCheckbox.js.map +0 -7
- package/esm/MenuItems/MenuItemRadio.js.map +0 -7
- package/esm/MenuItems/RadioGroup.js.map +0 -7
- package/esm/MenuItems/SearchableGroup.js.map +0 -7
- package/esm/MenuItems/SearchableList.js.map +0 -7
- package/esm/MenuItems/SelectionGroup.js.map +0 -7
- package/esm/MenuItems/Separator.js.map +0 -7
- package/esm/MenuItems/SubMenu.js.map +0 -7
- package/esm/MenuItems/menuItemFactory.js.map +0 -7
- package/esm/MenuItems/renderMenuItems.js +0 -24
- package/esm/MenuItems/renderMenuItems.js.map +0 -7
- package/esm/VirtualMenuList.js.map +0 -7
- package/esm/index.js.map +0 -7
- package/esm/utils/useHeightByAmountOfItems.js.map +0 -7
- package/types/MenuExports.d.ts +0 -1
- package/types/MenuItems/renderMenuItems.d.ts +0 -1
|
@@ -1,102 +1,107 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
var
|
|
29
|
-
|
|
30
|
-
DSMenuSelectionGroupWithSchema: () => DSMenuSelectionGroupWithSchema,
|
|
31
|
-
SelectionGroup: () => SelectionGroup,
|
|
32
|
-
default: () => SelectionGroup_default
|
|
33
|
-
});
|
|
34
|
-
var React = __toESM(require("react"));
|
|
35
|
-
var import_react = __toESM(require("react"));
|
|
36
|
-
var import_react_desc = require("react-desc");
|
|
37
|
-
var import_CheckableGroup = require("@elliemae/ds-shared/CheckableGroup");
|
|
38
|
-
var import_SearchableGroup = require("./SearchableGroup");
|
|
39
|
-
var import_menuItemFactory = require("./menuItemFactory");
|
|
40
|
-
var import_VirtualMenuList = require("../VirtualMenuList");
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
7
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
9
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
12
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
13
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
14
|
+
var React = require('react');
|
|
15
|
+
var reactDesc = require('react-desc');
|
|
16
|
+
var CheckableGroup = require('@elliemae/ds-shared/CheckableGroup');
|
|
17
|
+
var SearchableGroup = require('./SearchableGroup.js');
|
|
18
|
+
var menuItemFactory = require('./menuItemFactory.js');
|
|
19
|
+
var VirtualMenuList = require('../VirtualMenuList.js');
|
|
20
|
+
|
|
21
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
22
|
+
|
|
23
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
24
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
25
|
+
|
|
26
|
+
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; }
|
|
27
|
+
|
|
28
|
+
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; }
|
|
29
|
+
|
|
41
30
|
const noop = () => null;
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
31
|
+
|
|
32
|
+
function SelectionGroup(_ref) {
|
|
33
|
+
let {
|
|
34
|
+
multi = false,
|
|
35
|
+
searchable = false,
|
|
36
|
+
focusOnOpen = false,
|
|
37
|
+
onSelect = noop,
|
|
38
|
+
children,
|
|
39
|
+
items = undefined,
|
|
40
|
+
active = multi ? [] : '',
|
|
41
|
+
width,
|
|
42
|
+
height,
|
|
43
|
+
maxOptions = 5
|
|
44
|
+
} = _ref;
|
|
45
|
+
const renderedItems = React.useMemo(() => items && items.map(item => {
|
|
46
|
+
const Component = menuItemFactory.menuItemFactory(multi ? 'checkbox' : 'radio');
|
|
47
|
+
return /*#__PURE__*/React.createElement(Component, _objectSpread(_objectSpread({}, item), {}, {
|
|
58
48
|
key: item.name || item.id || item.key,
|
|
59
|
-
item,
|
|
49
|
+
item: item,
|
|
60
50
|
name: item.id || item.name
|
|
61
|
-
});
|
|
51
|
+
}));
|
|
62
52
|
}), [items]);
|
|
63
|
-
const decoratedGroupChildren =
|
|
53
|
+
const decoratedGroupChildren = CheckableGroup.useCheckableGroup({
|
|
64
54
|
children: renderedItems || children,
|
|
65
55
|
multi,
|
|
66
56
|
active,
|
|
67
57
|
onCheck: onSelect
|
|
68
58
|
});
|
|
59
|
+
|
|
69
60
|
if (searchable) {
|
|
70
|
-
return
|
|
71
|
-
focusOnOpen,
|
|
72
|
-
height,
|
|
73
|
-
items,
|
|
74
|
-
width
|
|
75
|
-
}, decoratedGroupChildren);
|
|
61
|
+
return /*#__PURE__*/_jsx__default["default"](SearchableGroup["default"], {
|
|
62
|
+
focusOnOpen: focusOnOpen,
|
|
63
|
+
height: height,
|
|
64
|
+
items: items,
|
|
65
|
+
width: width
|
|
66
|
+
}, void 0, decoratedGroupChildren);
|
|
76
67
|
}
|
|
77
|
-
|
|
78
|
-
|
|
68
|
+
|
|
69
|
+
return /*#__PURE__*/_jsx__default["default"](VirtualMenuList, {
|
|
70
|
+
height: height,
|
|
79
71
|
items: decoratedGroupChildren,
|
|
80
|
-
width,
|
|
72
|
+
width: width,
|
|
81
73
|
amountItemsInWindow: maxOptions
|
|
82
74
|
});
|
|
83
|
-
}
|
|
75
|
+
}
|
|
76
|
+
|
|
84
77
|
const props = {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
78
|
+
/** toggle on multi select */
|
|
79
|
+
multi: reactDesc.PropTypes.bool.description('toggle on multi select'),
|
|
80
|
+
|
|
81
|
+
/** toggle on searchable behavior */
|
|
82
|
+
searchable: reactDesc.PropTypes.bool.description('toggle on searchable behavior'),
|
|
83
|
+
|
|
84
|
+
/** toggle to focus component on open */
|
|
85
|
+
focusOnOpen: reactDesc.PropTypes.bool.description('toggle to focus component on open'),
|
|
86
|
+
|
|
87
|
+
/** callback that triggers when select happens */
|
|
88
|
+
onSelect: reactDesc.PropTypes.func.description('callback that triggers when select happens'),
|
|
89
|
+
children: reactDesc.PropTypes.node.description(''),
|
|
90
|
+
|
|
91
|
+
/** selection group items */
|
|
92
|
+
items: reactDesc.PropTypes.array.description('selection group items'),
|
|
93
|
+
|
|
94
|
+
/** array of values for multi and string for single selection */
|
|
95
|
+
active: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.array]).description('array of values for multi and string for single selection'),
|
|
96
|
+
|
|
97
|
+
/** selection group width */
|
|
98
|
+
width: reactDesc.PropTypes.number.description('selection group width'),
|
|
99
|
+
|
|
100
|
+
/** selection group height */
|
|
101
|
+
height: reactDesc.PropTypes.number.description('selection group height')
|
|
94
102
|
};
|
|
95
|
-
|
|
96
|
-
(0, import_menuItemFactory.registerMenuItem)("selectiongroup", SelectionGroup);
|
|
97
|
-
(0, import_menuItemFactory.registerMenuItem)("SelectionGroup", SelectionGroup);
|
|
98
|
-
const DSMenuSelectionGroupWithSchema = (0, import_react_desc.describe)(SelectionGroup);
|
|
103
|
+
const DSMenuSelectionGroupWithSchema = reactDesc.describe(SelectionGroup);
|
|
99
104
|
DSMenuSelectionGroupWithSchema.propTypes = props;
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
105
|
+
|
|
106
|
+
exports.DSMenuSelectionGroupWithSchema = DSMenuSelectionGroupWithSchema;
|
|
107
|
+
exports["default"] = SelectionGroup;
|
|
@@ -1,59 +1,44 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
|
+
require('react');
|
|
7
|
+
var reactDesc = require('react-desc');
|
|
8
|
+
var dsClassnames = require('@elliemae/ds-classnames');
|
|
9
|
+
var DSSeparator = require('@elliemae/ds-separator');
|
|
10
|
+
var styled = require('styled-components');
|
|
11
|
+
|
|
12
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
|
+
|
|
14
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
15
|
+
var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
|
|
16
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
17
|
+
|
|
18
|
+
var _DSSeparator;
|
|
19
|
+
const blockName = 'menu-separator';
|
|
20
|
+
const Li = /*#__PURE__*/styled__default["default"].li.withConfig({
|
|
21
|
+
componentId: "sc-aysbq3-0"
|
|
22
|
+
})(["display:flex;align-items:flex-start;flex-direction:column;"]);
|
|
23
|
+
const Title = dsClassnames.aggregatedClasses('h5')(blockName, 'title');
|
|
24
|
+
|
|
25
|
+
const MenuSeparator = _ref => {
|
|
26
|
+
let {
|
|
27
|
+
title,
|
|
28
|
+
showSeparator = true
|
|
29
|
+
} = _ref;
|
|
30
|
+
return /*#__PURE__*/_jsx__default["default"](Li, {}, void 0, showSeparator && (_DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx__default["default"](DSSeparator__default["default"], {}))), title && /*#__PURE__*/_jsx__default["default"](Title, {}, void 0, title));
|
|
11
31
|
};
|
|
12
|
-
|
|
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 Separator_exports = {};
|
|
29
|
-
__export(Separator_exports, {
|
|
30
|
-
DSMenuSeparatorWithSchema: () => DSMenuSeparatorWithSchema,
|
|
31
|
-
MenuSeparator: () => MenuSeparator,
|
|
32
|
-
default: () => Separator_default
|
|
33
|
-
});
|
|
34
|
-
var React = __toESM(require("react"));
|
|
35
|
-
var import_react = __toESM(require("react"));
|
|
36
|
-
var import_react_desc = require("react-desc");
|
|
37
|
-
var import_ds_classnames = require("@elliemae/ds-classnames");
|
|
38
|
-
var import_ds_separator = require("@elliemae/ds-separator");
|
|
39
|
-
var import_styled_components = __toESM(require("styled-components"));
|
|
40
|
-
var import_menuItemFactory = require("./menuItemFactory");
|
|
41
|
-
const blockName = "menu-separator";
|
|
42
|
-
const Li = import_styled_components.default.li`
|
|
43
|
-
display: flex;
|
|
44
|
-
align-items: flex-start;
|
|
45
|
-
flex-direction: column;
|
|
46
|
-
`;
|
|
47
|
-
const Title = (0, import_ds_classnames.aggregatedClasses)("h5")(blockName, "title");
|
|
48
|
-
const MenuSeparator = ({ title, showSeparator = true }) => /* @__PURE__ */ import_react.default.createElement(Li, null, showSeparator && /* @__PURE__ */ import_react.default.createElement(import_ds_separator.DSSeparator, null), title && /* @__PURE__ */ import_react.default.createElement(Title, null, title));
|
|
32
|
+
|
|
49
33
|
const props = {
|
|
50
|
-
|
|
51
|
-
|
|
34
|
+
/** menu separator h5 title */
|
|
35
|
+
title: reactDesc.PropTypes.string.description('menu separator h5 title'),
|
|
36
|
+
|
|
37
|
+
/** toggle separator on and off */
|
|
38
|
+
showSeparator: reactDesc.PropTypes.bool.description('toggle separator on and off')
|
|
52
39
|
};
|
|
53
|
-
|
|
54
|
-
(0, import_menuItemFactory.registerMenuItem)("separator", MenuSeparator);
|
|
55
|
-
const DSMenuSeparatorWithSchema = (0, import_react_desc.describe)(MenuSeparator);
|
|
40
|
+
const DSMenuSeparatorWithSchema = reactDesc.describe(MenuSeparator);
|
|
56
41
|
DSMenuSeparatorWithSchema.propTypes = props;
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
42
|
+
|
|
43
|
+
exports.DSMenuSeparatorWithSchema = DSMenuSeparatorWithSchema;
|
|
44
|
+
exports["default"] = MenuSeparator;
|