@elliemae/ds-menu 2.0.0-next.7 → 2.0.0-rc.10
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 +25 -10
- package/cjs/MenuCombobox.js +5 -0
- package/cjs/MenuItems/CheckboxGroup.js +5 -0
- package/cjs/MenuItems/MenuItem.js +42 -29
- package/cjs/MenuItems/MenuItemCheckable.js +16 -11
- package/cjs/MenuItems/MenuItemCheckbox.js +7 -3
- package/cjs/MenuItems/MenuItemRadio.js +5 -0
- package/cjs/MenuItems/RadioGroup.js +5 -0
- package/cjs/MenuItems/SearchableGroup.js +19 -12
- package/cjs/MenuItems/SearchableList.js +22 -17
- package/cjs/MenuItems/SelectionGroup.js +22 -12
- package/cjs/MenuItems/Separator.js +7 -4
- package/cjs/MenuItems/SubMenu.js +24 -22
- package/cjs/MenuItems/menuItemFactory.js +15 -4
- package/cjs/VirtualMenuList.js +21 -14
- package/cjs/utils/useHeightByAmountOfItems.js +6 -5
- package/esm/Menu.js +25 -10
- package/esm/MenuCombobox.js +5 -0
- package/esm/MenuItems/CheckboxGroup.js +5 -0
- package/esm/MenuItems/MenuItem.js +40 -27
- package/esm/MenuItems/MenuItemCheckable.js +14 -8
- package/esm/MenuItems/MenuItemCheckbox.js +6 -1
- package/esm/MenuItems/MenuItemRadio.js +5 -0
- package/esm/MenuItems/RadioGroup.js +5 -0
- package/esm/MenuItems/SearchableGroup.js +19 -12
- package/esm/MenuItems/SearchableList.js +20 -14
- package/esm/MenuItems/SelectionGroup.js +22 -12
- package/esm/MenuItems/Separator.js +7 -4
- package/esm/MenuItems/SubMenu.js +24 -20
- package/esm/MenuItems/menuItemFactory.js +14 -3
- package/esm/VirtualMenuList.js +21 -14
- package/esm/utils/useHeightByAmountOfItems.js +6 -5
- package/package.json +16 -13
- package/types/Menu.d.ts +24 -1
- package/types/MenuItems/CheckboxGroup.d.ts +24 -4
- package/types/MenuItems/MenuItem.d.ts +60 -10
- package/types/MenuItems/MenuItemCheckable.d.ts +51 -7
- package/types/MenuItems/MenuItemRadio.d.ts +27 -3
- package/types/MenuItems/RadioGroup.d.ts +18 -3
- package/types/MenuItems/SearchableGroup.d.ts +15 -1
- package/types/MenuItems/SearchableList.d.ts +77 -11
- package/types/MenuItems/SelectionGroup.d.ts +73 -11
- package/types/MenuItems/Separator.d.ts +21 -3
- package/types/MenuItems/SubMenu.d.ts +91 -13
package/cjs/Menu.js
CHANGED
|
@@ -5,6 +5,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
6
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
7
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');
|
|
8
20
|
var React = require('react');
|
|
9
21
|
var reactDesc = require('react-desc');
|
|
10
22
|
var lodash = require('lodash');
|
|
@@ -45,13 +57,16 @@ const blockName = 'menu';
|
|
|
45
57
|
|
|
46
58
|
const noop = () => {};
|
|
47
59
|
|
|
48
|
-
const MenuComponent = dsClassnames.aggregatedClasses('div')(blockName, '',
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
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
|
|
68
|
+
};
|
|
69
|
+
});
|
|
55
70
|
/**
|
|
56
71
|
* todo: -- IDEA -- each menu could have an overlay based on an overlay stack context so we can
|
|
57
72
|
* capture the context of the clicks on very nested components
|
|
@@ -59,7 +74,7 @@ const MenuComponent = dsClassnames.aggregatedClasses('div')(blockName, '', ({
|
|
|
59
74
|
|
|
60
75
|
const isChildOfType = (child, type) => child.type.name === type;
|
|
61
76
|
|
|
62
|
-
function DSMenu(
|
|
77
|
+
function DSMenu(_ref2) {
|
|
63
78
|
let {
|
|
64
79
|
containerProps = {},
|
|
65
80
|
innerRef,
|
|
@@ -75,8 +90,8 @@ function DSMenu(_ref) {
|
|
|
75
90
|
maxWidth = undefined,
|
|
76
91
|
closeMenu,
|
|
77
92
|
responsiveHeight = false
|
|
78
|
-
} =
|
|
79
|
-
otherProps = _objectWithoutProperties__default["default"](
|
|
93
|
+
} = _ref2,
|
|
94
|
+
otherProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
|
|
80
95
|
|
|
81
96
|
const menuRef = React.useRef(null);
|
|
82
97
|
const {
|
package/cjs/MenuCombobox.js
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
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');
|
|
3
8
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
9
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
5
10
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
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');
|
|
5
10
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
11
|
require('react');
|
|
7
12
|
var reactDesc = require('react-desc');
|
|
@@ -5,14 +5,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
6
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
7
7
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
8
10
|
require('core-js/modules/web.dom-collections.iterator.js');
|
|
11
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
12
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
13
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
14
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
15
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
9
16
|
var React = require('react');
|
|
10
17
|
var reactDesc = require('react-desc');
|
|
11
18
|
var lodash = require('lodash');
|
|
12
19
|
var dsClassnames = require('@elliemae/ds-classnames');
|
|
13
|
-
var
|
|
20
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
14
21
|
var FocusGroup = require('@elliemae/ds-shared/FocusGroup');
|
|
15
|
-
var utils = require('@elliemae/ds-utilities/utils');
|
|
16
22
|
var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
|
|
17
23
|
var menuItemFactory = require('./menuItemFactory.js');
|
|
18
24
|
var SubMenu = require('./SubMenu.js');
|
|
@@ -36,13 +42,16 @@ const noop = () => null;
|
|
|
36
42
|
|
|
37
43
|
const blockName = 'menu-item';
|
|
38
44
|
const Content = dsClassnames.aggregatedClasses('div')(blockName, 'content');
|
|
39
|
-
const Addon = dsClassnames.aggregatedClasses('div')(blockName, 'addon',
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
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
|
+
});
|
|
46
55
|
|
|
47
56
|
const renderAddon = (addon, fixedItem, addonId) => /*#__PURE__*/_jsx__default["default"](Addon, {
|
|
48
57
|
classProps: {
|
|
@@ -52,21 +61,25 @@ const renderAddon = (addon, fixedItem, addonId) => /*#__PURE__*/_jsx__default["d
|
|
|
52
61
|
|
|
53
62
|
const renderAddons = (addons, fixedItem) => Array.isArray(addons) ? addons.map(renderAddon) : renderAddon(addons, fixedItem);
|
|
54
63
|
|
|
55
|
-
const Wrapper = dsClassnames.aggregatedClasses('li')(blockName, null,
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
64
|
+
const Wrapper = dsClassnames.aggregatedClasses('li')(blockName, null, _ref2 => {
|
|
65
|
+
let {
|
|
66
|
+
disabled,
|
|
67
|
+
disabledAddonInactive,
|
|
68
|
+
customRenderer,
|
|
69
|
+
fixedItem,
|
|
70
|
+
type
|
|
71
|
+
} = _ref2;
|
|
72
|
+
return {
|
|
73
|
+
disabled,
|
|
74
|
+
disabledAddonInactive,
|
|
75
|
+
customRenderer,
|
|
76
|
+
fixedItem,
|
|
77
|
+
["menu-type-".concat(type)]: type
|
|
78
|
+
};
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
const calculateSize = function () {
|
|
82
|
+
let length = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
70
83
|
if (length > 45) return 45 * 7;
|
|
71
84
|
return length * 7;
|
|
72
85
|
};
|
|
@@ -106,11 +119,11 @@ function MenuItem(props) {
|
|
|
106
119
|
|
|
107
120
|
const wrapperProps = React.useMemo(() => lodash.omit(otherProps, ['icon']), [otherProps]);
|
|
108
121
|
|
|
109
|
-
const onClick = (
|
|
110
|
-
if (wrapperProps.onClick) wrapperProps.onClick(...
|
|
122
|
+
const onClick = function () {
|
|
123
|
+
if (wrapperProps.onClick) wrapperProps.onClick(...arguments);
|
|
111
124
|
|
|
112
125
|
if (wrapperProps.closeOnClick && menuCxt.closeMenu) {
|
|
113
|
-
menuCxt.closeMenu(...
|
|
126
|
+
menuCxt.closeMenu(...arguments);
|
|
114
127
|
}
|
|
115
128
|
};
|
|
116
129
|
|
|
@@ -124,8 +137,8 @@ function MenuItem(props) {
|
|
|
124
137
|
type: otherProps.type
|
|
125
138
|
},
|
|
126
139
|
id: otherProps.id,
|
|
127
|
-
innerRef: otherProps.type !== 'disabled' ?
|
|
128
|
-
onKeyDown: !fixedItem &&
|
|
140
|
+
innerRef: otherProps.type !== 'disabled' ? dsUtilities.mergeRefs(innerRef, ref) : innerRef,
|
|
141
|
+
onKeyDown: !fixedItem && dsUtilities.runAll(e => {
|
|
129
142
|
if (e.key === ' ' || e.key === 'Enter') {
|
|
130
143
|
e.preventDefault();
|
|
131
144
|
e.target.dispatchEvent(new MouseEvent('click', {
|
|
@@ -2,13 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
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');
|
|
5
10
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
11
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
7
12
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
8
13
|
require('react');
|
|
9
14
|
var reactDesc = require('react-desc');
|
|
10
|
-
var
|
|
11
|
-
var
|
|
15
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
16
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
12
17
|
var MenuItem = require('./MenuItem.js');
|
|
13
18
|
var jsxRuntime = require('react/jsx-runtime');
|
|
14
19
|
|
|
@@ -17,7 +22,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
17
22
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
18
23
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
19
24
|
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
20
|
-
var Checkmark__default = /*#__PURE__*/_interopDefaultLegacy(Checkmark);
|
|
21
25
|
|
|
22
26
|
var _div;
|
|
23
27
|
|
|
@@ -27,9 +31,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
27
31
|
|
|
28
32
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
29
33
|
|
|
30
|
-
function useCheckable({
|
|
31
|
-
|
|
32
|
-
|
|
34
|
+
function useCheckable(_ref) {
|
|
35
|
+
let {
|
|
36
|
+
checked
|
|
37
|
+
} = _ref;
|
|
33
38
|
return {
|
|
34
39
|
checked,
|
|
35
40
|
'aria-checked': checked
|
|
@@ -49,27 +54,27 @@ function useCheckable({
|
|
|
49
54
|
*/
|
|
50
55
|
|
|
51
56
|
|
|
52
|
-
function MenuItemCheckable(
|
|
57
|
+
function MenuItemCheckable(_ref2) {
|
|
53
58
|
let {
|
|
54
59
|
role = 'menuitemcheckbox',
|
|
55
60
|
checked = false,
|
|
56
61
|
name = '',
|
|
57
|
-
checkIcon = /*#__PURE__*/_jsx__default["default"](
|
|
62
|
+
checkIcon = /*#__PURE__*/_jsx__default["default"](dsIcons.Checkmark, {
|
|
58
63
|
color: ['brand-primary', 600]
|
|
59
64
|
}),
|
|
60
65
|
// eslint-disable-next-line react/prop-types
|
|
61
66
|
children,
|
|
62
67
|
leftAddon,
|
|
63
68
|
item = undefined
|
|
64
|
-
} =
|
|
65
|
-
otherProps = _objectWithoutProperties__default["default"](
|
|
69
|
+
} = _ref2,
|
|
70
|
+
otherProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
|
|
66
71
|
|
|
67
72
|
const checkableProps = useCheckable({
|
|
68
73
|
checked,
|
|
69
74
|
name
|
|
70
75
|
});
|
|
71
76
|
|
|
72
|
-
const handleClick = () =>
|
|
77
|
+
const handleClick = () => dsUtilities.runAll(otherProps.onClick, checkableProps.onClick)({
|
|
73
78
|
target: {
|
|
74
79
|
value: name,
|
|
75
80
|
checked
|
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
'use strict';
|
|
2
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');
|
|
3
8
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
9
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
5
10
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
6
11
|
require('react');
|
|
7
|
-
var
|
|
12
|
+
var dsForm = require('@elliemae/ds-form');
|
|
8
13
|
var MenuItemCheckable = require('./MenuItemCheckable.js');
|
|
9
14
|
var jsxRuntime = require('react/jsx-runtime');
|
|
10
15
|
|
|
@@ -13,7 +18,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
18
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
14
19
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
15
20
|
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
16
|
-
var DSCheckbox__default = /*#__PURE__*/_interopDefaultLegacy(DSCheckbox);
|
|
17
21
|
|
|
18
22
|
const _excluded = ["checked"];
|
|
19
23
|
|
|
@@ -28,7 +32,7 @@ function MenuItemCheckbox(_ref) {
|
|
|
28
32
|
rest = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
29
33
|
|
|
30
34
|
return /*#__PURE__*/jsxRuntime.jsx(MenuItemCheckable["default"], _objectSpread(_objectSpread({}, rest), {}, {
|
|
31
|
-
leftAddon: /*#__PURE__*/_jsx__default["default"](
|
|
35
|
+
leftAddon: /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
|
|
32
36
|
checked: checked
|
|
33
37
|
}),
|
|
34
38
|
role: "menuitemcheckbox"
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
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');
|
|
5
10
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
11
|
require('react');
|
|
7
12
|
var reactDesc = require('react-desc');
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
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');
|
|
5
10
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
11
|
require('react');
|
|
7
12
|
var reactDesc = require('react-desc');
|
|
@@ -4,6 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
6
|
require('core-js/modules/web.dom-collections.iterator.js');
|
|
7
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
7
10
|
var React = require('react');
|
|
8
11
|
var dsClassnames = require('@elliemae/ds-classnames');
|
|
9
12
|
var FocusGroup = require('@elliemae/ds-shared/FocusGroup');
|
|
@@ -21,15 +24,16 @@ var DSSearchBox__default = /*#__PURE__*/_interopDefaultLegacy(DSSearchBox);
|
|
|
21
24
|
const SearchBoxWrapper = dsClassnames.aggregatedClasses('div')('menu-search-group', 'search-wrapper');
|
|
22
25
|
const NoOptionsWrapper = dsClassnames.aggregatedClasses('div')('menu-search-group', 'no-options');
|
|
23
26
|
|
|
24
|
-
function SearchableGroup({
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
27
|
+
function SearchableGroup(_ref) {
|
|
28
|
+
let {
|
|
29
|
+
children,
|
|
30
|
+
amountItemsInWindow = 5,
|
|
31
|
+
searchTerm: searchTermProp = '',
|
|
32
|
+
noOptionsText = 'No options',
|
|
33
|
+
height,
|
|
34
|
+
width,
|
|
35
|
+
focusOnOpen = false
|
|
36
|
+
} = _ref;
|
|
33
37
|
const searchRef = React.useRef(null);
|
|
34
38
|
const [searchTerm, setSearchTerm] = React.useState(searchTermProp);
|
|
35
39
|
React.useEffect(() => {
|
|
@@ -49,9 +53,12 @@ function SearchableGroup({
|
|
|
49
53
|
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
50
54
|
children: [/*#__PURE__*/_jsx__default["default"](SearchBoxWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSSearchBox__default["default"], {
|
|
51
55
|
innerRef: searchRef,
|
|
52
|
-
onSearch:
|
|
53
|
-
|
|
54
|
-
|
|
56
|
+
onSearch: _ref2 => {
|
|
57
|
+
let {
|
|
58
|
+
value
|
|
59
|
+
} = _ref2;
|
|
60
|
+
return setSearchTerm(value);
|
|
61
|
+
},
|
|
55
62
|
searchOnEnter: false,
|
|
56
63
|
showIcon: false,
|
|
57
64
|
value: searchTerm
|
|
@@ -4,16 +4,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
6
|
require('core-js/modules/web.dom-collections.iterator.js');
|
|
7
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
10
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
7
12
|
var React = require('react');
|
|
8
13
|
var reactDesc = require('react-desc');
|
|
9
|
-
var
|
|
10
|
-
var
|
|
14
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
15
|
+
var dsForm = require('@elliemae/ds-form');
|
|
11
16
|
var jsxRuntime = require('react/jsx-runtime');
|
|
12
17
|
|
|
13
18
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
19
|
|
|
15
20
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
16
|
-
var DSComboBox__default = /*#__PURE__*/_interopDefaultLegacy(DSComboBox);
|
|
17
21
|
|
|
18
22
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
19
23
|
|
|
@@ -21,18 +25,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
21
25
|
|
|
22
26
|
const noop = () => {};
|
|
23
27
|
|
|
24
|
-
function SearchableList({
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
28
|
+
function SearchableList(_ref) {
|
|
29
|
+
let {
|
|
30
|
+
onSelectMenuItem = noop,
|
|
31
|
+
components = {},
|
|
32
|
+
searchTerm: searchTermProp = '',
|
|
33
|
+
items = [],
|
|
34
|
+
dropdownFilterOptions = {},
|
|
35
|
+
returnValue,
|
|
36
|
+
extraListProps = {},
|
|
37
|
+
appendTermInList = false,
|
|
38
|
+
maxOptions = 10,
|
|
39
|
+
loading = false
|
|
40
|
+
} = _ref;
|
|
36
41
|
const [searchTerm, setInputValue] = React.useState(searchTermProp);
|
|
37
42
|
const handleInputChange = React.useCallback((value, args) => {
|
|
38
43
|
const action = args ? args.action : null;
|
|
@@ -47,11 +52,11 @@ function SearchableList({
|
|
|
47
52
|
handleFilterByText();
|
|
48
53
|
}
|
|
49
54
|
}, [searchTerm]);
|
|
50
|
-
const options = React.useMemo(() => searchTerm && appendTermInList ?
|
|
55
|
+
const options = React.useMemo(() => searchTerm && appendTermInList ? dsUtilities.uniqBy([{
|
|
51
56
|
id: searchTerm,
|
|
52
57
|
label: searchTerm
|
|
53
58
|
}].concat(items), item => item.label) : items, [searchTerm, appendTermInList]);
|
|
54
|
-
return /*#__PURE__*/jsxRuntime.jsx(
|
|
59
|
+
return /*#__PURE__*/jsxRuntime.jsx(dsForm.DSComboBox, _objectSpread(_objectSpread({
|
|
55
60
|
autoFocus: true,
|
|
56
61
|
components: _objectSpread({
|
|
57
62
|
DropdownIndicator: null
|
|
@@ -4,6 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
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');
|
|
7
14
|
var React = require('react');
|
|
8
15
|
var reactDesc = require('react-desc');
|
|
9
16
|
var CheckableGroup = require('@elliemae/ds-shared/CheckableGroup');
|
|
@@ -22,17 +29,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
22
29
|
|
|
23
30
|
const noop = () => null;
|
|
24
31
|
|
|
25
|
-
function SelectionGroup({
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
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;
|
|
36
45
|
const renderedItems = React.useMemo(() => items && items.map(item => {
|
|
37
46
|
const Component = menuItemFactory.menuItemFactory(multi ? 'checkbox' : 'radio');
|
|
38
47
|
return /*#__PURE__*/React.createElement(Component, _objectSpread(_objectSpread({}, item), {}, {
|
|
@@ -60,7 +69,8 @@ function SelectionGroup({
|
|
|
60
69
|
return /*#__PURE__*/_jsx__default["default"](VirtualMenuList, {
|
|
61
70
|
height: height,
|
|
62
71
|
items: decoratedGroupChildren,
|
|
63
|
-
width: width
|
|
72
|
+
width: width,
|
|
73
|
+
amountItemsInWindow: maxOptions
|
|
64
74
|
});
|
|
65
75
|
}
|
|
66
76
|
|
|
@@ -22,10 +22,13 @@ const Li = /*#__PURE__*/styled__default["default"].li.withConfig({
|
|
|
22
22
|
})(["display:flex;align-items:flex-start;flex-direction:column;"]);
|
|
23
23
|
const Title = dsClassnames.aggregatedClasses('h5')(blockName, 'title');
|
|
24
24
|
|
|
25
|
-
const MenuSeparator =
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
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));
|
|
31
|
+
};
|
|
29
32
|
|
|
30
33
|
const props = {
|
|
31
34
|
/** menu separator h5 title */
|
package/cjs/MenuItems/SubMenu.js
CHANGED
|
@@ -5,15 +5,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
6
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
7
7
|
require('core-js/modules/web.dom-collections.iterator.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
11
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
12
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
8
13
|
var React = require('react');
|
|
9
14
|
var reactDesc = require('react-desc');
|
|
10
|
-
var
|
|
11
|
-
var VerticalElipsis = require('@elliemae/ds-icons/MoreOptionsVert');
|
|
15
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
12
16
|
var FocusGroup = require('@elliemae/ds-shared/FocusGroup');
|
|
13
17
|
var dsHidden = require('@elliemae/ds-hidden');
|
|
14
18
|
var DSButton = require('@elliemae/ds-button');
|
|
15
19
|
var DSPopper = require('@elliemae/ds-popper');
|
|
16
|
-
var interaction = require('@elliemae/ds-popper/interaction');
|
|
17
20
|
var styled = require('styled-components');
|
|
18
21
|
var Menu = require('../Menu.js');
|
|
19
22
|
var MenuItem = require('./MenuItem.js');
|
|
@@ -23,8 +26,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
23
26
|
|
|
24
27
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
25
28
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
26
|
-
var ChevronRight__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRight);
|
|
27
|
-
var VerticalElipsis__default = /*#__PURE__*/_interopDefaultLegacy(VerticalElipsis);
|
|
28
29
|
var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
|
|
29
30
|
var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
|
|
30
31
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
@@ -36,20 +37,21 @@ const ChevronRightComp = /*#__PURE__*/styled__default["default"].div.withConfig(
|
|
|
36
37
|
componentId: "sc-1qhp1z-0"
|
|
37
38
|
})(["display:flex;justify-content:center;align-items:center;width:28px;"]);
|
|
38
39
|
|
|
39
|
-
function SubMenu({
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
40
|
+
function SubMenu(_ref) {
|
|
41
|
+
let {
|
|
42
|
+
noAddon,
|
|
43
|
+
leftAddon = undefined,
|
|
44
|
+
label = undefined,
|
|
45
|
+
interactionType = 'hover',
|
|
46
|
+
children: subitems,
|
|
47
|
+
rightAddonType,
|
|
48
|
+
disabledAddonInactive,
|
|
49
|
+
checkableProps = {},
|
|
50
|
+
customRenderer,
|
|
51
|
+
onClick,
|
|
52
|
+
closeMenu,
|
|
53
|
+
id
|
|
54
|
+
} = _ref;
|
|
53
55
|
const itemRef = React.useRef(null);
|
|
54
56
|
const focusOnOpen = React.useRef(false);
|
|
55
57
|
const [isAddonHovered, setIsAddonHovered] = React.useState(false);
|
|
@@ -105,7 +107,7 @@ function SubMenu({
|
|
|
105
107
|
"aria-label": "vertical-elipsis",
|
|
106
108
|
"data-testid": "vertical-elipsis",
|
|
107
109
|
buttonType: "text",
|
|
108
|
-
leftIcon: /*#__PURE__*/_jsx__default["default"](
|
|
110
|
+
leftIcon: /*#__PURE__*/_jsx__default["default"](dsIcons.MoreOptionsVert, {
|
|
109
111
|
className: "submenu-arrow",
|
|
110
112
|
color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
|
|
111
113
|
size: "s"
|
|
@@ -113,7 +115,7 @@ function SubMenu({
|
|
|
113
115
|
onClick: e => handleShowSubItemsWithMouse(e),
|
|
114
116
|
size: "m",
|
|
115
117
|
variant: DSButton.BUTTON_VARIANT.DEFAULT
|
|
116
|
-
}) : /*#__PURE__*/_jsx__default["default"](ChevronRightComp, {}, void 0, /*#__PURE__*/_jsx__default["default"](
|
|
118
|
+
}) : /*#__PURE__*/_jsx__default["default"](ChevronRightComp, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallRight, {
|
|
117
119
|
"data-testid": "chevron-right",
|
|
118
120
|
className: "submenu-arrow",
|
|
119
121
|
color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
|
|
@@ -172,7 +174,7 @@ const props = {
|
|
|
172
174
|
label: reactDesc.PropTypes.string.description('submenu label'),
|
|
173
175
|
|
|
174
176
|
/** A type indicating how to open/close the tooltip */
|
|
175
|
-
interactionType: reactDesc.PropTypes.oneOf(
|
|
177
|
+
interactionType: reactDesc.PropTypes.oneOf(DSPopper.interactions).description('A type indicating how to open/close the tooltip'),
|
|
176
178
|
|
|
177
179
|
/** sub menu items */
|
|
178
180
|
children: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.array, reactDesc.PropTypes.node]).description('sub menu items'),
|