@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.
- 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
package/cjs/Menu.js
CHANGED
|
@@ -1,151 +1,195 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
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
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.some.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.some.js');
|
|
11
|
+
require('core-js/modules/esnext.async-iterator.constructor.js');
|
|
12
|
+
require('core-js/modules/esnext.async-iterator.to-array.js');
|
|
13
|
+
require('core-js/modules/esnext.iterator.to-array.js');
|
|
14
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
15
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
16
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
17
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
18
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
19
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
20
|
+
var React = require('react');
|
|
21
|
+
var reactDesc = require('react-desc');
|
|
22
|
+
var lodash = require('lodash');
|
|
23
|
+
var dsClassnames = require('@elliemae/ds-classnames');
|
|
24
|
+
var web = require('react-spring/web');
|
|
25
|
+
var hooks = require('@elliemae/ds-utilities/hooks');
|
|
26
|
+
var system = require('@elliemae/ds-utilities/system');
|
|
27
|
+
var FocusGroup = require('@elliemae/ds-shared/FocusGroup');
|
|
28
|
+
var dsHidden = require('@elliemae/ds-hidden');
|
|
29
|
+
var MenuItemRadio = require('./MenuItems/MenuItemRadio.js');
|
|
30
|
+
var MenuItemCheckbox = require('./MenuItems/MenuItemCheckbox.js');
|
|
31
|
+
var CheckboxGroup = require('./MenuItems/CheckboxGroup.js');
|
|
32
|
+
var RadioGroup = require('./MenuItems/RadioGroup.js');
|
|
33
|
+
var Separator = require('./MenuItems/Separator.js');
|
|
34
|
+
var MenuItem = require('./MenuItems/MenuItem.js');
|
|
35
|
+
var SubMenu = require('./MenuItems/SubMenu.js');
|
|
36
|
+
var SearchableGroup = require('./MenuItems/SearchableGroup.js');
|
|
37
|
+
var SelectionGroup = require('./MenuItems/SelectionGroup.js');
|
|
38
|
+
var menuItemFactory = require('./MenuItems/menuItemFactory.js');
|
|
39
|
+
var MenuContext = require('./MenuContext.js');
|
|
40
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
41
|
+
|
|
42
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
43
|
+
|
|
44
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
45
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
46
|
+
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
47
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
48
|
+
|
|
49
|
+
const _excluded = ["containerProps", "innerRef", "as", "children", "onClickOutside", "visible", "focusOnOpen", "maxOption", "style", "minWidth", "maxWidth", "closeMenu", "responsiveHeight"],
|
|
50
|
+
_excluded2 = ["destroyed"];
|
|
51
|
+
|
|
52
|
+
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; }
|
|
53
|
+
|
|
54
|
+
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; }
|
|
55
|
+
const RESPONSIVE_HEIHGT_MARGIN = 120;
|
|
56
|
+
const blockName = 'menu';
|
|
57
|
+
|
|
58
|
+
const noop = () => {};
|
|
59
|
+
|
|
60
|
+
const MenuComponent = dsClassnames.aggregatedClasses('div')(blockName, '', _ref => {
|
|
61
|
+
let {
|
|
62
|
+
menuComboBox,
|
|
63
|
+
type
|
|
64
|
+
} = _ref;
|
|
65
|
+
return {
|
|
66
|
+
'menu-combo-box': menuComboBox,
|
|
67
|
+
["type-".concat(type)]: type
|
|
26
68
|
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var Menu_exports = {};
|
|
29
|
-
__export(Menu_exports, {
|
|
30
|
-
DSMenuWithSchema: () => DSMenuWithSchema,
|
|
31
|
-
Menu: () => Menu,
|
|
32
|
-
default: () => Menu_default,
|
|
33
|
-
menuItemFactory: () => import_menuItemFactory.menuItemFactory,
|
|
34
|
-
renderMenuItems: () => import_renderMenuItems.renderMenuItems
|
|
35
69
|
});
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
var import_web = __toESM(require("react-spring/web"));
|
|
42
|
-
var import_hooks = __toESM(require("@elliemae/ds-utilities/hooks"));
|
|
43
|
-
var import_system = __toESM(require("@elliemae/ds-utilities/system"));
|
|
44
|
-
var import_FocusGroup = __toESM(require("@elliemae/ds-shared/FocusGroup"));
|
|
45
|
-
var import_ds_hidden = __toESM(require("@elliemae/ds-hidden"));
|
|
46
|
-
var import_MenuItemRadio = __toESM(require("./MenuItems/MenuItemRadio"));
|
|
47
|
-
var import_MenuItemCheckbox = __toESM(require("./MenuItems/MenuItemCheckbox"));
|
|
48
|
-
var import_CheckboxGroup = __toESM(require("./MenuItems/CheckboxGroup"));
|
|
49
|
-
var import_RadioGroup = __toESM(require("./MenuItems/RadioGroup"));
|
|
50
|
-
var import_Separator = __toESM(require("./MenuItems/Separator"));
|
|
51
|
-
var import_MenuItem = __toESM(require("./MenuItems/MenuItem"));
|
|
52
|
-
var import_SubMenu = __toESM(require("./MenuItems/SubMenu"));
|
|
53
|
-
var import_SearchableGroup = __toESM(require("./MenuItems/SearchableGroup"));
|
|
54
|
-
var import_SelectionGroup = __toESM(require("./MenuItems/SelectionGroup"));
|
|
55
|
-
var import_menuItemFactory = __toESM(require("./MenuItems/menuItemFactory"));
|
|
56
|
-
var import_renderMenuItems = __toESM(require("./MenuItems/renderMenuItems"));
|
|
57
|
-
var import_MenuContext = __toESM(require("./MenuContext"));
|
|
58
|
-
const RESPONSIVE_HEIHGT_MARGIN = 120;
|
|
59
|
-
const blockName = "menu";
|
|
60
|
-
const noop = () => {
|
|
61
|
-
};
|
|
62
|
-
const MenuComponent = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "", ({ menuComboBox, type }) => ({
|
|
63
|
-
"menu-combo-box": menuComboBox,
|
|
64
|
-
[`type-${type}`]: type
|
|
65
|
-
}));
|
|
70
|
+
/**
|
|
71
|
+
* todo: -- IDEA -- each menu could have an overlay based on an overlay stack context so we can
|
|
72
|
+
* capture the context of the clicks on very nested components
|
|
73
|
+
*/
|
|
74
|
+
|
|
66
75
|
const isChildOfType = (child, type) => child.type.name === type;
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
76
|
+
|
|
77
|
+
function DSMenu(_ref2) {
|
|
78
|
+
let {
|
|
79
|
+
containerProps = {},
|
|
80
|
+
innerRef,
|
|
81
|
+
as: MenuTag = web.animated.ul,
|
|
82
|
+
children = undefined,
|
|
83
|
+
onClickOutside = noop,
|
|
84
|
+
// handlers from hidden
|
|
85
|
+
visible = undefined,
|
|
86
|
+
focusOnOpen = false,
|
|
87
|
+
maxOption = 0,
|
|
88
|
+
style = {},
|
|
89
|
+
minWidth = undefined,
|
|
90
|
+
maxWidth = undefined,
|
|
91
|
+
closeMenu,
|
|
92
|
+
responsiveHeight = false
|
|
93
|
+
} = _ref2,
|
|
94
|
+
otherProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
|
|
95
|
+
|
|
96
|
+
const menuRef = React.useRef(null);
|
|
97
|
+
const {
|
|
98
|
+
focusFirst
|
|
99
|
+
} = React.useContext(FocusGroup.FocusGroupContext);
|
|
100
|
+
|
|
101
|
+
const _useHiddenTransition = dsHidden.useHiddenTransition({
|
|
102
|
+
visible,
|
|
103
|
+
style
|
|
104
|
+
}),
|
|
105
|
+
hiddenProps = _objectWithoutProperties__default["default"](_useHiddenTransition, _excluded2); // force no addon to the children if the menu doesn't have any item with leftAddon like SelectionGroup
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
const nextChildren = React.useMemo(() => {
|
|
109
|
+
const forceLeftAddon = React__default["default"].Children.toArray(children).some(child => isChildOfType(child, 'SelectionGroup') || isChildOfType(child, 'MenuItemCheckbox') || isChildOfType(child, 'MenuItemRadio') || child.props.leftAddon);
|
|
110
|
+
return React__default["default"].Children.map(children, child => child && /*#__PURE__*/React__default["default"].cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
|
|
111
|
+
noAddon: !forceLeftAddon ? true : undefined,
|
|
91
112
|
maxOption,
|
|
92
113
|
closeMenu
|
|
93
|
-
}));
|
|
114
|
+
})));
|
|
94
115
|
}, [children]);
|
|
95
|
-
|
|
96
|
-
|
|
116
|
+
hooks.useOnClickOutside(menuRef, onClickOutside);
|
|
117
|
+
React.useEffect(() => {
|
|
97
118
|
if (focusOnOpen && visible) {
|
|
98
119
|
setTimeout(() => {
|
|
99
120
|
focusFirst();
|
|
100
121
|
}, 0);
|
|
101
122
|
}
|
|
102
|
-
}, [visible, focusOnOpen]);
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
as: MenuTag,
|
|
109
|
-
classProps: { ...otherProps.classProps || {}, type: otherProps.type },
|
|
110
|
-
innerRef: (0, import_system.mergeRefs)(innerRef, menuRef),
|
|
111
|
-
role: "menu",
|
|
112
|
-
...(0, import_lodash.omit)(otherProps, ["scheduleUpdate"]),
|
|
113
|
-
...hiddenProps
|
|
114
|
-
}, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
115
|
-
className: "menu-component-internal-wrapper",
|
|
116
|
-
style: {
|
|
117
|
-
...style,
|
|
118
|
-
minWidth,
|
|
119
|
-
maxWidth,
|
|
120
|
-
...responsiveHeight ? {
|
|
121
|
-
overflowY: "scroll",
|
|
122
|
-
maxHeight: responsiveHeight ? `${window.innerHeight - RESPONSIVE_HEIHGT_MARGIN}px` : void 0
|
|
123
|
-
} : {}
|
|
123
|
+
}, [visible, focusOnOpen]); // todo: find out a better approach to this
|
|
124
|
+
|
|
125
|
+
return !hiddenProps.destroyed ? /*#__PURE__*/_jsx__default["default"](MenuContext.Provider, {
|
|
126
|
+
value: {
|
|
127
|
+
visible,
|
|
128
|
+
closeMenu
|
|
124
129
|
}
|
|
125
|
-
},
|
|
126
|
-
|
|
127
|
-
|
|
130
|
+
}, void 0, /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
|
|
131
|
+
"data-testid": containerProps !== null && containerProps !== void 0 && containerProps['data-testid'] ? containerProps['data-testid'] : "em-ds-menu"
|
|
132
|
+
}, containerProps), {}, {
|
|
133
|
+
as: MenuTag,
|
|
134
|
+
classProps: _objectSpread(_objectSpread({}, otherProps.classProps || {}), {}, {
|
|
135
|
+
type: otherProps.type
|
|
136
|
+
}),
|
|
137
|
+
innerRef: system.mergeRefs(innerRef, menuRef),
|
|
138
|
+
role: "menu"
|
|
139
|
+
}, lodash.omit(otherProps, ['scheduleUpdate'])), hiddenProps), {}, {
|
|
140
|
+
children: /*#__PURE__*/_jsx__default["default"]("div", {
|
|
141
|
+
className: "menu-component-internal-wrapper",
|
|
142
|
+
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
143
|
+
minWidth,
|
|
144
|
+
maxWidth
|
|
145
|
+
}, responsiveHeight ? {
|
|
146
|
+
overflowY: 'scroll',
|
|
147
|
+
maxHeight: responsiveHeight ? "".concat(window.innerHeight - RESPONSIVE_HEIHGT_MARGIN, "px") : undefined
|
|
148
|
+
} : {})
|
|
149
|
+
}, void 0, nextChildren)
|
|
150
|
+
}))) : null;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
const Menu = FocusGroup.focusGroupManagerHoc(DSMenu, {
|
|
154
|
+
loop: true
|
|
155
|
+
});
|
|
128
156
|
const props = {
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
157
|
+
/** Injected props to wrapper element of component */
|
|
158
|
+
containerProps: reactDesc.PropTypes.object.description('Injected props to wrapper element of component'),
|
|
159
|
+
|
|
160
|
+
/** Renders the menu with a specific html element */
|
|
161
|
+
as: reactDesc.PropTypes.element.description('Renders the menu with a specific html element'),
|
|
162
|
+
|
|
163
|
+
/** Handler when a user clicks outside the menu */
|
|
164
|
+
onClickOutside: reactDesc.PropTypes.func.description('Handler when a user clicks outside the menu'),
|
|
165
|
+
|
|
166
|
+
/** Whether the menu is visible or not */
|
|
167
|
+
visible: reactDesc.PropTypes.bool.description('Whether the menu is visible or not'),
|
|
168
|
+
|
|
169
|
+
/** When set to true, it's going to focus the first item */
|
|
170
|
+
focusOnOpen: reactDesc.PropTypes.bool.description("When set to true, it's going to focus the first item"),
|
|
171
|
+
|
|
172
|
+
/** Customize menu minWidth. Can be undefined or 'number' */
|
|
173
|
+
minWidth: reactDesc.PropTypes.number.description("Customize menu minWidth. Can be undefined or 'number'"),
|
|
174
|
+
|
|
175
|
+
/** Customize menu maxWidth. Can be undefined or 'number' */
|
|
176
|
+
maxWidth: reactDesc.PropTypes.number.description("Customize menu maxWidth. Can be undefined or 'number'")
|
|
136
177
|
};
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
Menu.Item =
|
|
141
|
-
Menu.ItemCheckbox =
|
|
142
|
-
Menu.ItemRadio =
|
|
143
|
-
Menu.SubMenu =
|
|
144
|
-
Menu.Separator =
|
|
145
|
-
Menu.CheckboxGroup =
|
|
146
|
-
Menu.RadioGroup =
|
|
147
|
-
Menu.SearchableGroup =
|
|
148
|
-
Menu.SelectionGroup =
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
178
|
+
const DSMenuWithSchema = reactDesc.describe(DSMenu);
|
|
179
|
+
DSMenuWithSchema.propTypes = props; // todo: add a handler to get this kind of exports for documentation
|
|
180
|
+
|
|
181
|
+
Menu.Item = MenuItem["default"];
|
|
182
|
+
Menu.ItemCheckbox = MenuItemCheckbox;
|
|
183
|
+
Menu.ItemRadio = MenuItemRadio["default"];
|
|
184
|
+
Menu.SubMenu = SubMenu["default"];
|
|
185
|
+
Menu.Separator = Separator["default"];
|
|
186
|
+
Menu.CheckboxGroup = CheckboxGroup["default"];
|
|
187
|
+
Menu.RadioGroup = RadioGroup["default"];
|
|
188
|
+
Menu.SearchableGroup = SearchableGroup["default"];
|
|
189
|
+
Menu.SelectionGroup = SelectionGroup["default"];
|
|
190
|
+
|
|
191
|
+
exports.menuItemFactory = menuItemFactory.menuItemFactory;
|
|
192
|
+
exports.renderMenuItems = menuItemFactory.renderMenuItems;
|
|
193
|
+
exports.DSMenuWithSchema = DSMenuWithSchema;
|
|
194
|
+
exports.Menu = Menu;
|
|
195
|
+
exports["default"] = Menu;
|
package/cjs/MenuCombobox.js
CHANGED
|
@@ -1,70 +1,56 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
var import_react = __toESM(require("react"));
|
|
34
|
-
var import_prop_types = __toESM(require("prop-types"));
|
|
35
|
-
var import_SearchableList = __toESM(require("./MenuItems/SearchableList"));
|
|
36
|
-
var import_Menu = __toESM(require("./Menu"));
|
|
37
|
-
function MenuCombobox({
|
|
38
|
-
dropdownFilterOptions = {},
|
|
39
|
-
options = [],
|
|
40
|
-
onSelectMenuItem = () => null,
|
|
41
|
-
innerRef,
|
|
42
|
-
maxOptions = 10,
|
|
43
|
-
loading = false,
|
|
44
|
-
...rest
|
|
45
|
-
}) {
|
|
46
|
-
return /* @__PURE__ */ import_react.default.createElement(import_Menu.Menu, {
|
|
47
|
-
...rest,
|
|
48
|
-
classProps: { menuComboBox: true },
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
4
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
5
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
8
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
9
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
10
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
11
|
+
require('react');
|
|
12
|
+
var SearchableList = require('./MenuItems/SearchableList.js');
|
|
13
|
+
var Menu = require('./Menu.js');
|
|
14
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
15
|
+
|
|
16
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
17
|
+
|
|
18
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
19
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
20
|
+
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
21
|
+
|
|
22
|
+
const _excluded = ["dropdownFilterOptions", "options", "onSelectMenuItem", "innerRef", "maxOptions", "loading"];
|
|
23
|
+
|
|
24
|
+
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; }
|
|
25
|
+
|
|
26
|
+
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; }
|
|
27
|
+
|
|
28
|
+
function MenuCombobox(_ref) {
|
|
29
|
+
let {
|
|
30
|
+
dropdownFilterOptions = {},
|
|
31
|
+
options = [],
|
|
32
|
+
onSelectMenuItem = () => null,
|
|
49
33
|
innerRef,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
34
|
+
maxOptions = 10,
|
|
35
|
+
loading = false
|
|
36
|
+
} = _ref,
|
|
37
|
+
rest = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
38
|
+
|
|
39
|
+
return /*#__PURE__*/jsxRuntime.jsx(Menu.Menu, _objectSpread(_objectSpread({}, rest), {}, {
|
|
40
|
+
classProps: {
|
|
41
|
+
menuComboBox: true
|
|
42
|
+
},
|
|
43
|
+
innerRef: innerRef,
|
|
44
|
+
visible: true,
|
|
45
|
+
children: /*#__PURE__*/_jsx__default["default"](SearchableList["default"], {
|
|
46
|
+
appendTermInList: true,
|
|
47
|
+
extraListProps: dropdownFilterOptions,
|
|
48
|
+
items: options,
|
|
49
|
+
onSelectMenuItem: onSelectMenuItem,
|
|
50
|
+
maxOptions: maxOptions,
|
|
51
|
+
loading: loading
|
|
52
|
+
})
|
|
58
53
|
}));
|
|
59
54
|
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
options: import_prop_types.default.arrayOf(import_prop_types.default.object),
|
|
63
|
-
onSelectMenuItem: import_prop_types.default.func,
|
|
64
|
-
innerRef: import_prop_types.default.oneOfType([import_prop_types.default.func, import_prop_types.default.object]),
|
|
65
|
-
maxOptions: import_prop_types.default.number,
|
|
66
|
-
loading: import_prop_types.default.bool
|
|
67
|
-
};
|
|
68
|
-
var MenuCombobox_default = MenuCombobox;
|
|
69
|
-
module.exports = __toCommonJS(MenuCombobox_exports);
|
|
70
|
-
//# sourceMappingURL=MenuCombobox.js.map
|
|
55
|
+
|
|
56
|
+
module.exports = MenuCombobox;
|
package/cjs/MenuContext.js
CHANGED
|
@@ -1,38 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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 MenuContext_exports = {};
|
|
29
|
-
__export(MenuContext_exports, {
|
|
30
|
-
MenuContext: () => MenuContext,
|
|
31
|
-
default: () => MenuContext_default
|
|
32
|
-
});
|
|
33
|
-
var React = __toESM(require("react"));
|
|
34
|
-
var import_react = __toESM(require("react"));
|
|
35
|
-
const MenuContext = import_react.default.createContext();
|
|
36
|
-
var MenuContext_default = MenuContext;
|
|
37
|
-
module.exports = __toCommonJS(MenuContext_exports);
|
|
38
|
-
//# sourceMappingURL=MenuContext.js.map
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
6
|
+
|
|
7
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
8
|
+
|
|
9
|
+
var MenuContext = /*#__PURE__*/React__default["default"].createContext();
|
|
10
|
+
|
|
11
|
+
module.exports = MenuContext;
|
|
@@ -1,52 +1,45 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
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
|
-
});
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
10
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
11
|
+
require('react');
|
|
12
|
+
var reactDesc = require('react-desc');
|
|
13
|
+
var CheckableGroup = require('@elliemae/ds-shared/CheckableGroup');
|
|
14
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
15
|
+
|
|
16
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
17
|
+
|
|
18
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
19
|
+
var CheckableGroup__default = /*#__PURE__*/_interopDefaultLegacy(CheckableGroup);
|
|
20
|
+
|
|
21
|
+
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; }
|
|
22
|
+
|
|
23
|
+
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; }
|
|
24
|
+
|
|
25
|
+
function CheckboxGroup(props) {
|
|
26
|
+
return /*#__PURE__*/jsxRuntime.jsx(CheckableGroup__default["default"], _objectSpread(_objectSpread({}, props), {}, {
|
|
27
|
+
multi: true
|
|
28
|
+
}));
|
|
29
|
+
}
|
|
30
|
+
|
|
42
31
|
const props = {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
32
|
+
/* The item (if multi false) or items (if multi true) selected */
|
|
33
|
+
active: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('The item (if multi false) or items (if multi true) selected'),
|
|
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')
|
|
46
40
|
};
|
|
47
|
-
|
|
48
|
-
const DSMenuCheckboxGroupWithSchema = (0, import_react_desc.describe)(CheckboxGroup);
|
|
41
|
+
const DSMenuCheckboxGroupWithSchema = reactDesc.describe(CheckboxGroup);
|
|
49
42
|
DSMenuCheckboxGroupWithSchema.propTypes = props;
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
43
|
+
|
|
44
|
+
exports.DSMenuCheckboxGroupWithSchema = DSMenuCheckboxGroupWithSchema;
|
|
45
|
+
exports["default"] = CheckboxGroup;
|