@elliemae/ds-menu 2.2.0-alpha.3 → 3.0.0-next.0

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.
Files changed (100) hide show
  1. package/cjs/Menu.js +181 -137
  2. package/cjs/MenuCombobox.js +53 -67
  3. package/cjs/MenuContext.js +11 -38
  4. package/cjs/MenuItems/CheckboxGroup.js +42 -49
  5. package/cjs/MenuItems/MenuItem.js +163 -116
  6. package/cjs/MenuItems/MenuItemCheckable.js +108 -77
  7. package/cjs/MenuItems/MenuItemCheckbox.js +41 -47
  8. package/cjs/MenuItems/MenuItemRadio.js +38 -50
  9. package/cjs/MenuItems/RadioGroup.js +39 -48
  10. package/cjs/MenuItems/SearchableGroup.js +92 -88
  11. package/cjs/MenuItems/SearchableList.js +95 -92
  12. package/cjs/MenuItems/SelectionGroup.js +90 -85
  13. package/cjs/MenuItems/Separator.js +40 -55
  14. package/cjs/MenuItems/SubMenu.js +160 -143
  15. package/cjs/MenuItems/menuItemFactory.js +68 -38
  16. package/cjs/VirtualMenuList.js +39 -69
  17. package/cjs/index.js +36 -63
  18. package/cjs/utils/useHeightByAmountOfItems.js +14 -43
  19. package/esm/Menu.js +149 -91
  20. package/esm/MenuCombobox.js +45 -38
  21. package/esm/MenuContext.js +5 -9
  22. package/esm/MenuItems/CheckboxGroup.js +31 -19
  23. package/esm/MenuItems/MenuItem.js +148 -84
  24. package/esm/MenuItems/MenuItemCheckable.js +96 -47
  25. package/esm/MenuItems/MenuItemCheckbox.js +33 -18
  26. package/esm/MenuItems/MenuItemRadio.js +28 -20
  27. package/esm/MenuItems/RadioGroup.js +28 -18
  28. package/esm/MenuItems/SearchableGroup.js +76 -53
  29. package/esm/MenuItems/SearchableList.js +82 -59
  30. package/esm/MenuItems/SelectionGroup.js +78 -54
  31. package/esm/MenuItems/Separator.js +29 -26
  32. package/esm/MenuItems/SubMenu.js +140 -107
  33. package/esm/MenuItems/menuItemFactory.js +60 -10
  34. package/esm/VirtualMenuList.js +32 -39
  35. package/esm/index.js +13 -34
  36. package/esm/utils/useHeightByAmountOfItems.js +11 -13
  37. package/package.json +11 -19
  38. package/types/Menu.d.ts +2 -3
  39. package/types/MenuContext.d.ts +2 -3
  40. package/types/MenuItems/CheckboxGroup.d.ts +5 -5
  41. package/types/MenuItems/MenuItem.d.ts +5 -5
  42. package/types/MenuItems/MenuItemCheckable.d.ts +15 -15
  43. package/types/MenuItems/MenuItemCheckbox.d.ts +2 -3
  44. package/types/MenuItems/MenuItemRadio.d.ts +5 -5
  45. package/types/MenuItems/RadioGroup.d.ts +5 -5
  46. package/types/MenuItems/SearchableGroup.d.ts +3 -3
  47. package/types/MenuItems/SearchableList.d.ts +16 -16
  48. package/types/MenuItems/SelectionGroup.d.ts +16 -16
  49. package/types/MenuItems/Separator.d.ts +1 -2
  50. package/types/MenuItems/SubMenu.d.ts +18 -18
  51. package/types/MenuItems/menuItemFactory.d.ts +3 -2
  52. package/types/VirtualMenuList.d.ts +1 -3
  53. package/types/index.d.ts +2 -3
  54. package/types/utils/useHeightByAmountOfItems.d.ts +1 -3
  55. package/cjs/Menu.js.map +0 -7
  56. package/cjs/MenuCombobox.js.map +0 -7
  57. package/cjs/MenuContext.js.map +0 -7
  58. package/cjs/MenuExports.js +0 -28
  59. package/cjs/MenuExports.js.map +0 -7
  60. package/cjs/MenuItems/CheckboxGroup.js.map +0 -7
  61. package/cjs/MenuItems/MenuItem.js.map +0 -7
  62. package/cjs/MenuItems/MenuItemCheckable.js.map +0 -7
  63. package/cjs/MenuItems/MenuItemCheckbox.js.map +0 -7
  64. package/cjs/MenuItems/MenuItemRadio.js.map +0 -7
  65. package/cjs/MenuItems/RadioGroup.js.map +0 -7
  66. package/cjs/MenuItems/SearchableGroup.js.map +0 -7
  67. package/cjs/MenuItems/SearchableList.js.map +0 -7
  68. package/cjs/MenuItems/SelectionGroup.js.map +0 -7
  69. package/cjs/MenuItems/Separator.js.map +0 -7
  70. package/cjs/MenuItems/SubMenu.js.map +0 -7
  71. package/cjs/MenuItems/menuItemFactory.js.map +0 -7
  72. package/cjs/MenuItems/renderMenuItems.js +0 -53
  73. package/cjs/MenuItems/renderMenuItems.js.map +0 -7
  74. package/cjs/VirtualMenuList.js.map +0 -7
  75. package/cjs/index.js.map +0 -7
  76. package/cjs/utils/useHeightByAmountOfItems.js.map +0 -7
  77. package/esm/Menu.js.map +0 -7
  78. package/esm/MenuCombobox.js.map +0 -7
  79. package/esm/MenuContext.js.map +0 -7
  80. package/esm/MenuExports.js +0 -3
  81. package/esm/MenuExports.js.map +0 -7
  82. package/esm/MenuItems/CheckboxGroup.js.map +0 -7
  83. package/esm/MenuItems/MenuItem.js.map +0 -7
  84. package/esm/MenuItems/MenuItemCheckable.js.map +0 -7
  85. package/esm/MenuItems/MenuItemCheckbox.js.map +0 -7
  86. package/esm/MenuItems/MenuItemRadio.js.map +0 -7
  87. package/esm/MenuItems/RadioGroup.js.map +0 -7
  88. package/esm/MenuItems/SearchableGroup.js.map +0 -7
  89. package/esm/MenuItems/SearchableList.js.map +0 -7
  90. package/esm/MenuItems/SelectionGroup.js.map +0 -7
  91. package/esm/MenuItems/Separator.js.map +0 -7
  92. package/esm/MenuItems/SubMenu.js.map +0 -7
  93. package/esm/MenuItems/menuItemFactory.js.map +0 -7
  94. package/esm/MenuItems/renderMenuItems.js +0 -24
  95. package/esm/MenuItems/renderMenuItems.js.map +0 -7
  96. package/esm/VirtualMenuList.js.map +0 -7
  97. package/esm/index.js.map +0 -7
  98. package/esm/utils/useHeightByAmountOfItems.js.map +0 -7
  99. package/types/MenuExports.d.ts +0 -1
  100. package/types/MenuItems/renderMenuItems.d.ts +0 -1
@@ -1,102 +1,107 @@
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 SelectionGroup_exports = {};
29
- __export(SelectionGroup_exports, {
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 = __toESM(require("react-desc"));
37
- var import_CheckableGroup = __toESM(require("@elliemae/ds-shared/CheckableGroup"));
38
- var import_SearchableGroup = __toESM(require("./SearchableGroup"));
39
- var import_menuItemFactory = __toESM(require("./menuItemFactory"));
40
- var import_VirtualMenuList = __toESM(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
- const SelectionGroup = ({
43
- multi = false,
44
- searchable = false,
45
- focusOnOpen = false,
46
- onSelect = noop,
47
- children,
48
- items = void 0,
49
- active = multi ? [] : "",
50
- width,
51
- height,
52
- maxOptions = 5
53
- }) => {
54
- const renderedItems = (0, import_react.useMemo)(() => items && items.map((item) => {
55
- const Component = (0, import_menuItemFactory.menuItemFactory)(multi ? "checkbox" : "radio");
56
- return /* @__PURE__ */ import_react.default.createElement(Component, {
57
- ...item,
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 = (0, import_CheckableGroup.useCheckableGroup)({
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 /* @__PURE__ */ import_react.default.createElement(import_SearchableGroup.SearchableGroup, {
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
- return /* @__PURE__ */ import_react.default.createElement(import_VirtualMenuList.VirtualMenuList, {
78
- height,
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
- multi: import_react_desc.PropTypes.bool.description("toggle on multi select"),
86
- searchable: import_react_desc.PropTypes.bool.description("toggle on searchable behavior"),
87
- focusOnOpen: import_react_desc.PropTypes.bool.description("toggle to focus component on open"),
88
- onSelect: import_react_desc.PropTypes.func.description("callback that triggers when select happens"),
89
- children: import_react_desc.PropTypes.node.description(""),
90
- items: import_react_desc.PropTypes.array.description("selection group items"),
91
- active: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.array]).description("array of values for multi and string for single selection"),
92
- width: import_react_desc.PropTypes.number.description("selection group width"),
93
- height: import_react_desc.PropTypes.number.description("selection group height")
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
- SelectionGroup.propTypes = props;
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
- var SelectionGroup_default = SelectionGroup;
101
- module.exports = __toCommonJS(SelectionGroup_exports);
102
- //# sourceMappingURL=SelectionGroup.js.map
105
+
106
+ exports.DSMenuSelectionGroupWithSchema = DSMenuSelectionGroupWithSchema;
107
+ exports["default"] = SelectionGroup;
@@ -1,59 +1,44 @@
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 });
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
- 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 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 = __toESM(require("react-desc"));
37
- var import_ds_classnames = __toESM(require("@elliemae/ds-classnames"));
38
- var import_ds_separator = __toESM(require("@elliemae/ds-separator"));
39
- var import_styled_components = __toESM(require("styled-components"));
40
- var import_menuItemFactory = __toESM(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
- title: import_react_desc.PropTypes.string.description("menu separator h5 title"),
51
- showSeparator: import_react_desc.PropTypes.bool.description("toggle separator on and off")
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
- MenuSeparator.propTypes = props;
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
- var Separator_default = MenuSeparator;
58
- module.exports = __toCommonJS(Separator_exports);
59
- //# sourceMappingURL=Separator.js.map
42
+
43
+ exports.DSMenuSeparatorWithSchema = DSMenuSeparatorWithSchema;
44
+ exports["default"] = MenuSeparator;