@elliemae/ds-menu 2.0.0-alpha.1 → 2.0.0-alpha.13
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 +41 -26
- package/cjs/MenuCombobox.js +8 -3
- package/cjs/MenuContext.js +1 -1
- package/cjs/MenuItems/CheckboxGroup.js +8 -3
- package/cjs/MenuItems/MenuItem.js +53 -39
- package/cjs/MenuItems/MenuItemCheckable.js +21 -16
- package/cjs/MenuItems/MenuItemCheckbox.js +10 -6
- package/cjs/MenuItems/MenuItemRadio.js +9 -4
- package/cjs/MenuItems/RadioGroup.js +8 -3
- package/cjs/MenuItems/SearchableGroup.js +23 -15
- package/cjs/MenuItems/SearchableList.js +25 -19
- package/cjs/MenuItems/SelectionGroup.js +26 -16
- package/cjs/MenuItems/Separator.js +9 -6
- package/cjs/MenuItems/SubMenu.js +31 -28
- package/cjs/MenuItems/menuItemFactory.js +21 -10
- package/cjs/VirtualMenuList.js +22 -15
- package/cjs/index.js +1 -1
- package/cjs/utils/useHeightByAmountOfItems.js +6 -5
- package/esm/Menu.js +26 -11
- package/esm/MenuCombobox.js +5 -0
- package/esm/MenuItems/CheckboxGroup.js +5 -0
- package/esm/MenuItems/MenuItem.js +43 -29
- 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 +20 -12
- package/esm/MenuItems/SearchableList.js +21 -14
- package/esm/MenuItems/SelectionGroup.js +22 -12
- package/esm/MenuItems/Separator.js +7 -4
- package/esm/MenuItems/SubMenu.js +25 -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/package.json +0 -7
- package/esm/package.json +0 -7
|
@@ -1,13 +1,20 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
6
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
7
|
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
3
8
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
9
|
+
import 'core-js/modules/esnext.async-iterator.map.js';
|
|
10
|
+
import 'core-js/modules/esnext.iterator.map.js';
|
|
11
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
4
12
|
import { useContext, useRef, useMemo } from 'react';
|
|
5
13
|
import { PropTypes, describe } from 'react-desc';
|
|
6
14
|
import { omit } from 'lodash';
|
|
7
15
|
import { aggregatedClasses } from '@elliemae/ds-classnames';
|
|
8
|
-
import { mergeRefs } from '@elliemae/ds-utilities
|
|
16
|
+
import { mergeRefs, runAll } from '@elliemae/ds-utilities';
|
|
9
17
|
import { useFocusGroupItem } from '@elliemae/ds-shared/FocusGroup';
|
|
10
|
-
import { runAll } from '@elliemae/ds-utilities/utils';
|
|
11
18
|
import DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';
|
|
12
19
|
import { renderMenuItems } from './menuItemFactory.js';
|
|
13
20
|
import SubMenu from './SubMenu.js';
|
|
@@ -24,13 +31,16 @@ const noop = () => null;
|
|
|
24
31
|
|
|
25
32
|
const blockName = 'menu-item';
|
|
26
33
|
const Content = aggregatedClasses('div')(blockName, 'content');
|
|
27
|
-
const Addon = aggregatedClasses('div')(blockName, 'addon',
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
+
const Addon = aggregatedClasses('div')(blockName, 'addon', _ref => {
|
|
35
|
+
let {
|
|
36
|
+
empty,
|
|
37
|
+
fixedItem
|
|
38
|
+
} = _ref;
|
|
39
|
+
return {
|
|
40
|
+
empty,
|
|
41
|
+
fixedItem
|
|
42
|
+
};
|
|
43
|
+
});
|
|
34
44
|
|
|
35
45
|
const renderAddon = (addon, fixedItem, addonId) => /*#__PURE__*/_jsx(Addon, {
|
|
36
46
|
classProps: {
|
|
@@ -40,21 +50,25 @@ const renderAddon = (addon, fixedItem, addonId) => /*#__PURE__*/_jsx(Addon, {
|
|
|
40
50
|
|
|
41
51
|
const renderAddons = (addons, fixedItem) => Array.isArray(addons) ? addons.map(renderAddon) : renderAddon(addons, fixedItem);
|
|
42
52
|
|
|
43
|
-
const Wrapper = aggregatedClasses('li')(blockName, null,
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
53
|
+
const Wrapper = aggregatedClasses('li')(blockName, null, _ref2 => {
|
|
54
|
+
let {
|
|
55
|
+
disabled,
|
|
56
|
+
disabledAddonInactive,
|
|
57
|
+
customRenderer,
|
|
58
|
+
fixedItem,
|
|
59
|
+
type
|
|
60
|
+
} = _ref2;
|
|
61
|
+
return {
|
|
62
|
+
disabled,
|
|
63
|
+
disabledAddonInactive,
|
|
64
|
+
customRenderer,
|
|
65
|
+
fixedItem,
|
|
66
|
+
["menu-type-".concat(type)]: type
|
|
67
|
+
};
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
const calculateSize = function () {
|
|
71
|
+
let length = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
58
72
|
if (length > 45) return 45 * 7;
|
|
59
73
|
return length * 7;
|
|
60
74
|
};
|
|
@@ -94,11 +108,11 @@ function MenuItem(props) {
|
|
|
94
108
|
|
|
95
109
|
const wrapperProps = useMemo(() => omit(otherProps, ['icon']), [otherProps]);
|
|
96
110
|
|
|
97
|
-
const onClick = (
|
|
98
|
-
if (wrapperProps.onClick) wrapperProps.onClick(...
|
|
111
|
+
const onClick = function () {
|
|
112
|
+
if (wrapperProps.onClick) wrapperProps.onClick(...arguments);
|
|
99
113
|
|
|
100
114
|
if (wrapperProps.closeOnClick && menuCxt.closeMenu) {
|
|
101
|
-
menuCxt.closeMenu(...
|
|
115
|
+
menuCxt.closeMenu(...arguments);
|
|
102
116
|
}
|
|
103
117
|
};
|
|
104
118
|
|
|
@@ -130,8 +144,8 @@ function MenuItem(props) {
|
|
|
130
144
|
onClick: onClick,
|
|
131
145
|
children: [!noAddon && renderAddons(leftAddon, fixedItem), label && /*#__PURE__*/_jsx(Content, {
|
|
132
146
|
style: maxOption > 0 ? {
|
|
133
|
-
width:
|
|
134
|
-
maxWidth:
|
|
147
|
+
width: "".concat(calculateSize(maxOption), "px"),
|
|
148
|
+
maxWidth: "".concat(calculateSize(maxOption), "px")
|
|
135
149
|
} : undefined
|
|
136
150
|
}, void 0, /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
|
|
137
151
|
value: label
|
|
@@ -1,10 +1,15 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
6
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
7
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
3
8
|
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
4
9
|
import 'react';
|
|
5
10
|
import { PropTypes, describe } from 'react-desc';
|
|
6
|
-
import Checkmark from '@elliemae/ds-icons
|
|
7
|
-
import { runAll } from '@elliemae/ds-utilities
|
|
11
|
+
import { Checkmark } from '@elliemae/ds-icons';
|
|
12
|
+
import { runAll } from '@elliemae/ds-utilities';
|
|
8
13
|
import MenuItem from './MenuItem.js';
|
|
9
14
|
import { jsx } from 'react/jsx-runtime';
|
|
10
15
|
|
|
@@ -16,9 +21,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
16
21
|
|
|
17
22
|
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(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; }
|
|
18
23
|
|
|
19
|
-
function useCheckable({
|
|
20
|
-
|
|
21
|
-
|
|
24
|
+
function useCheckable(_ref) {
|
|
25
|
+
let {
|
|
26
|
+
checked
|
|
27
|
+
} = _ref;
|
|
22
28
|
return {
|
|
23
29
|
checked,
|
|
24
30
|
'aria-checked': checked
|
|
@@ -38,7 +44,7 @@ function useCheckable({
|
|
|
38
44
|
*/
|
|
39
45
|
|
|
40
46
|
|
|
41
|
-
function MenuItemCheckable(
|
|
47
|
+
function MenuItemCheckable(_ref2) {
|
|
42
48
|
let {
|
|
43
49
|
role = 'menuitemcheckbox',
|
|
44
50
|
checked = false,
|
|
@@ -50,8 +56,8 @@ function MenuItemCheckable(_ref) {
|
|
|
50
56
|
children,
|
|
51
57
|
leftAddon,
|
|
52
58
|
item = undefined
|
|
53
|
-
} =
|
|
54
|
-
otherProps = _objectWithoutProperties(
|
|
59
|
+
} = _ref2,
|
|
60
|
+
otherProps = _objectWithoutProperties(_ref2, _excluded);
|
|
55
61
|
|
|
56
62
|
const checkableProps = useCheckable({
|
|
57
63
|
checked,
|
|
@@ -1,8 +1,13 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
6
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
7
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
3
8
|
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
4
9
|
import 'react';
|
|
5
|
-
import DSCheckbox from '@elliemae/ds-form
|
|
10
|
+
import { DSCheckbox } from '@elliemae/ds-form';
|
|
6
11
|
import MenuItemCheckable from './MenuItemCheckable.js';
|
|
7
12
|
import { jsx } from 'react/jsx-runtime';
|
|
8
13
|
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
6
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
7
|
import 'react';
|
|
3
8
|
import { PropTypes, describe } from 'react-desc';
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
6
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
7
|
import 'react';
|
|
3
8
|
import { PropTypes, describe } from 'react-desc';
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
3
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
2
6
|
import { useRef, useState, useEffect, useContext, useMemo } from 'react';
|
|
3
7
|
import { aggregatedClasses } from '@elliemae/ds-classnames';
|
|
4
8
|
import { focusGroupManagerHoc } from '@elliemae/ds-shared/FocusGroup';
|
|
@@ -11,15 +15,16 @@ import { jsxs, Fragment } from 'react/jsx-runtime';
|
|
|
11
15
|
const SearchBoxWrapper = aggregatedClasses('div')('menu-search-group', 'search-wrapper');
|
|
12
16
|
const NoOptionsWrapper = aggregatedClasses('div')('menu-search-group', 'no-options');
|
|
13
17
|
|
|
14
|
-
function SearchableGroup({
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
function SearchableGroup(_ref) {
|
|
19
|
+
let {
|
|
20
|
+
children,
|
|
21
|
+
amountItemsInWindow = 5,
|
|
22
|
+
searchTerm: searchTermProp = '',
|
|
23
|
+
noOptionsText = 'No options',
|
|
24
|
+
height,
|
|
25
|
+
width,
|
|
26
|
+
focusOnOpen = false
|
|
27
|
+
} = _ref;
|
|
23
28
|
const searchRef = useRef(null);
|
|
24
29
|
const [searchTerm, setSearchTerm] = useState(searchTermProp);
|
|
25
30
|
useEffect(() => {
|
|
@@ -39,9 +44,12 @@ function SearchableGroup({
|
|
|
39
44
|
return /*#__PURE__*/jsxs(Fragment, {
|
|
40
45
|
children: [/*#__PURE__*/_jsx(SearchBoxWrapper, {}, void 0, /*#__PURE__*/_jsx(DSSearchBox, {
|
|
41
46
|
innerRef: searchRef,
|
|
42
|
-
onSearch:
|
|
43
|
-
|
|
44
|
-
|
|
47
|
+
onSearch: _ref2 => {
|
|
48
|
+
let {
|
|
49
|
+
value
|
|
50
|
+
} = _ref2;
|
|
51
|
+
return setSearchTerm(value);
|
|
52
|
+
},
|
|
45
53
|
searchOnEnter: false,
|
|
46
54
|
showIcon: false,
|
|
47
55
|
value: searchTerm
|
|
@@ -1,8 +1,14 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
6
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
7
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
2
8
|
import { useState, useCallback, useMemo } from 'react';
|
|
3
9
|
import { PropTypes, describe } from 'react-desc';
|
|
4
|
-
import { uniqBy } from '@elliemae/ds-utilities
|
|
5
|
-
import DSComboBox from '@elliemae/ds-form
|
|
10
|
+
import { uniqBy } from '@elliemae/ds-utilities';
|
|
11
|
+
import { DSComboBox } from '@elliemae/ds-form';
|
|
6
12
|
import { jsx } from 'react/jsx-runtime';
|
|
7
13
|
|
|
8
14
|
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; }
|
|
@@ -11,18 +17,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
11
17
|
|
|
12
18
|
const noop = () => {};
|
|
13
19
|
|
|
14
|
-
function SearchableList({
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
20
|
+
function SearchableList(_ref) {
|
|
21
|
+
let {
|
|
22
|
+
onSelectMenuItem = noop,
|
|
23
|
+
components = {},
|
|
24
|
+
searchTerm: searchTermProp = '',
|
|
25
|
+
items = [],
|
|
26
|
+
dropdownFilterOptions = {},
|
|
27
|
+
returnValue,
|
|
28
|
+
extraListProps = {},
|
|
29
|
+
appendTermInList = false,
|
|
30
|
+
maxOptions = 10,
|
|
31
|
+
loading = false
|
|
32
|
+
} = _ref;
|
|
26
33
|
const [searchTerm, setInputValue] = useState(searchTermProp);
|
|
27
34
|
const handleInputChange = useCallback((value, args) => {
|
|
28
35
|
const action = args ? args.action : null;
|
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
2
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
3
|
+
import 'core-js/modules/esnext.async-iterator.map.js';
|
|
4
|
+
import 'core-js/modules/esnext.iterator.map.js';
|
|
5
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
6
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
7
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
8
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
9
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
3
10
|
import { useMemo, createElement } from 'react';
|
|
4
11
|
import { PropTypes, describe } from 'react-desc';
|
|
5
12
|
import { useCheckableGroup } from '@elliemae/ds-shared/CheckableGroup';
|
|
@@ -13,17 +20,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
13
20
|
|
|
14
21
|
const noop = () => null;
|
|
15
22
|
|
|
16
|
-
function SelectionGroup({
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
function SelectionGroup(_ref) {
|
|
24
|
+
let {
|
|
25
|
+
multi = false,
|
|
26
|
+
searchable = false,
|
|
27
|
+
focusOnOpen = false,
|
|
28
|
+
onSelect = noop,
|
|
29
|
+
children,
|
|
30
|
+
items = undefined,
|
|
31
|
+
active = multi ? [] : '',
|
|
32
|
+
width,
|
|
33
|
+
height,
|
|
34
|
+
maxOptions = 5
|
|
35
|
+
} = _ref;
|
|
27
36
|
const renderedItems = useMemo(() => items && items.map(item => {
|
|
28
37
|
const Component = menuItemFactory(multi ? 'checkbox' : 'radio');
|
|
29
38
|
return /*#__PURE__*/createElement(Component, _objectSpread(_objectSpread({}, item), {}, {
|
|
@@ -51,7 +60,8 @@ function SelectionGroup({
|
|
|
51
60
|
return /*#__PURE__*/_jsx(VirtualMenuList, {
|
|
52
61
|
height: height,
|
|
53
62
|
items: decoratedGroupChildren,
|
|
54
|
-
width: width
|
|
63
|
+
width: width,
|
|
64
|
+
amountItemsInWindow: maxOptions
|
|
55
65
|
});
|
|
56
66
|
}
|
|
57
67
|
|
|
@@ -12,10 +12,13 @@ const Li = /*#__PURE__*/styled.li.withConfig({
|
|
|
12
12
|
})(["display:flex;align-items:flex-start;flex-direction:column;"]);
|
|
13
13
|
const Title = aggregatedClasses('h5')(blockName, 'title');
|
|
14
14
|
|
|
15
|
-
const MenuSeparator =
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
const MenuSeparator = _ref => {
|
|
16
|
+
let {
|
|
17
|
+
title,
|
|
18
|
+
showSeparator = true
|
|
19
|
+
} = _ref;
|
|
20
|
+
return /*#__PURE__*/_jsx(Li, {}, void 0, showSeparator && (_DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx(DSSeparator, {}))), title && /*#__PURE__*/_jsx(Title, {}, void 0, title));
|
|
21
|
+
};
|
|
19
22
|
|
|
20
23
|
const props = {
|
|
21
24
|
/** menu separator h5 title */
|
package/esm/MenuItems/SubMenu.js
CHANGED
|
@@ -1,14 +1,18 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
6
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
7
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
8
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
3
9
|
import { useRef, useState, useCallback } from 'react';
|
|
4
10
|
import { PropTypes, describe } from 'react-desc';
|
|
5
|
-
import
|
|
6
|
-
import VerticalElipsis from '@elliemae/ds-icons/MoreOptionsVert';
|
|
11
|
+
import { MoreOptionsVert, ChevronSmallRight } from '@elliemae/ds-icons';
|
|
7
12
|
import { useFocusGroupItem } from '@elliemae/ds-shared/FocusGroup';
|
|
8
13
|
import { useHiddenController } from '@elliemae/ds-hidden';
|
|
9
14
|
import DSButton, { BUTTON_VARIANT } from '@elliemae/ds-button';
|
|
10
|
-
import DSPopper from '@elliemae/ds-popper';
|
|
11
|
-
import { interactions } from '@elliemae/ds-popper/interaction';
|
|
15
|
+
import DSPopper, { interactions } from '@elliemae/ds-popper';
|
|
12
16
|
import styled from 'styled-components';
|
|
13
17
|
import { Menu } from '../Menu.js';
|
|
14
18
|
import MenuItem from './MenuItem.js';
|
|
@@ -21,20 +25,21 @@ const ChevronRightComp = /*#__PURE__*/styled.div.withConfig({
|
|
|
21
25
|
componentId: "sc-1qhp1z-0"
|
|
22
26
|
})(["display:flex;justify-content:center;align-items:center;width:28px;"]);
|
|
23
27
|
|
|
24
|
-
function SubMenu({
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
28
|
+
function SubMenu(_ref) {
|
|
29
|
+
let {
|
|
30
|
+
noAddon,
|
|
31
|
+
leftAddon = undefined,
|
|
32
|
+
label = undefined,
|
|
33
|
+
interactionType = 'hover',
|
|
34
|
+
children: subitems,
|
|
35
|
+
rightAddonType,
|
|
36
|
+
disabledAddonInactive,
|
|
37
|
+
checkableProps = {},
|
|
38
|
+
customRenderer,
|
|
39
|
+
onClick,
|
|
40
|
+
closeMenu,
|
|
41
|
+
id
|
|
42
|
+
} = _ref;
|
|
38
43
|
const itemRef = useRef(null);
|
|
39
44
|
const focusOnOpen = useRef(false);
|
|
40
45
|
const [isAddonHovered, setIsAddonHovered] = useState(false);
|
|
@@ -90,7 +95,7 @@ function SubMenu({
|
|
|
90
95
|
"aria-label": "vertical-elipsis",
|
|
91
96
|
"data-testid": "vertical-elipsis",
|
|
92
97
|
buttonType: "text",
|
|
93
|
-
leftIcon: /*#__PURE__*/_jsx(
|
|
98
|
+
leftIcon: /*#__PURE__*/_jsx(MoreOptionsVert, {
|
|
94
99
|
className: "submenu-arrow",
|
|
95
100
|
color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
|
|
96
101
|
size: "s"
|
|
@@ -98,7 +103,7 @@ function SubMenu({
|
|
|
98
103
|
onClick: e => handleShowSubItemsWithMouse(e),
|
|
99
104
|
size: "m",
|
|
100
105
|
variant: BUTTON_VARIANT.DEFAULT
|
|
101
|
-
}) : /*#__PURE__*/_jsx(ChevronRightComp, {}, void 0, /*#__PURE__*/_jsx(
|
|
106
|
+
}) : /*#__PURE__*/_jsx(ChevronRightComp, {}, void 0, /*#__PURE__*/_jsx(ChevronSmallRight, {
|
|
102
107
|
"data-testid": "chevron-right",
|
|
103
108
|
className: "submenu-arrow",
|
|
104
109
|
color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
|
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
|
+
import 'core-js/modules/esnext.async-iterator.map.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.map.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
6
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
7
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
8
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
2
9
|
import { createElement } from 'react';
|
|
3
|
-
import { isFunction } from '@elliemae/ds-utilities
|
|
10
|
+
import { isFunction } from '@elliemae/ds-utilities';
|
|
4
11
|
import MenuSeparator from './Separator.js';
|
|
5
12
|
import MenuItem from './MenuItem.js';
|
|
6
13
|
import SubMenu from './SubMenu.js';
|
|
@@ -22,12 +29,16 @@ const itemTypes = {
|
|
|
22
29
|
const fallback = {
|
|
23
30
|
SelectionGroup: 'selection-group'
|
|
24
31
|
};
|
|
25
|
-
function menuItemFactory(
|
|
32
|
+
function menuItemFactory() {
|
|
33
|
+
let type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
34
|
+
let items = arguments.length > 1 ? arguments[1] : undefined;
|
|
35
|
+
let defaultItem = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : itemTypes.menuitem;
|
|
26
36
|
const itemsObject = items || itemTypes;
|
|
27
37
|
const parsedType = fallback[type] || type.toLowerCase();
|
|
28
38
|
return itemsObject[parsedType] || defaultItem;
|
|
29
39
|
}
|
|
30
|
-
function renderMenuItems(options
|
|
40
|
+
function renderMenuItems(options) {
|
|
41
|
+
let factory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : menuItemFactory;
|
|
31
42
|
return options.map((option, index) => {
|
|
32
43
|
if (isFunction(option.renderer)) {
|
|
33
44
|
return option.renderer({
|
package/esm/VirtualMenuList.js
CHANGED
|
@@ -1,23 +1,30 @@
|
|
|
1
1
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
4
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
2
5
|
import 'react';
|
|
3
6
|
import { FixedSizeList } from 'react-window';
|
|
4
7
|
import useHeightByAmountOfItems from './utils/useHeightByAmountOfItems.js';
|
|
5
8
|
|
|
6
|
-
const MenuItem =
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
const MenuItem = _ref => {
|
|
10
|
+
let {
|
|
11
|
+
data,
|
|
12
|
+
index,
|
|
13
|
+
style
|
|
14
|
+
} = _ref;
|
|
15
|
+
return /*#__PURE__*/_jsx("div", {
|
|
16
|
+
style: style
|
|
17
|
+
}, index, data && data[index] ? data[index] : '');
|
|
18
|
+
}; // eslint-disable-next-line no-unused-vars
|
|
13
19
|
|
|
14
|
-
function VirtualMenuList({
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
20
|
+
function VirtualMenuList(_ref2) {
|
|
21
|
+
let {
|
|
22
|
+
items,
|
|
23
|
+
itemHeight = 32,
|
|
24
|
+
amountItemsInWindow = 5,
|
|
25
|
+
width,
|
|
26
|
+
height
|
|
27
|
+
} = _ref2;
|
|
21
28
|
const computedListHeight = useHeightByAmountOfItems({
|
|
22
29
|
amountItems: amountItemsInWindow,
|
|
23
30
|
itemHeight,
|
|
@@ -5,11 +5,12 @@ const calculateHeight = (itemHeight, amountItemsInWindow, itemsLength) => {
|
|
|
5
5
|
return itemHeight * realAmountItemsInWindow;
|
|
6
6
|
};
|
|
7
7
|
|
|
8
|
-
function useHeightByAmountOfItems({
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
function useHeightByAmountOfItems(_ref) {
|
|
9
|
+
let {
|
|
10
|
+
itemHeight,
|
|
11
|
+
amountItems,
|
|
12
|
+
items
|
|
13
|
+
} = _ref;
|
|
13
14
|
const calculatedHeight = useMemo(() => calculateHeight(itemHeight, amountItems, items.length), [amountItems, items]);
|
|
14
15
|
return calculatedHeight;
|
|
15
16
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-menu",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.13",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Menu",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -100,29 +100,32 @@
|
|
|
100
100
|
"build": "node ../../scripts/build/build.js"
|
|
101
101
|
},
|
|
102
102
|
"dependencies": {
|
|
103
|
-
"@elliemae/ds-button": "2.0.0-alpha.
|
|
104
|
-
"@elliemae/ds-classnames": "2.0.0-alpha.
|
|
105
|
-
"@elliemae/ds-form": "2.0.0-alpha.
|
|
106
|
-
"@elliemae/ds-hidden": "2.0.0-alpha.
|
|
107
|
-
"@elliemae/ds-icons": "2.0.0-alpha.
|
|
108
|
-
"@elliemae/ds-popper": "2.0.0-alpha.
|
|
109
|
-
"@elliemae/ds-separator": "2.0.0-alpha.
|
|
110
|
-
"@elliemae/ds-shared": "2.0.0-alpha.
|
|
111
|
-
"@elliemae/ds-truncated-tooltip-text": "2.0.0-alpha.
|
|
112
|
-
"@elliemae/ds-utilities": "2.0.0-alpha.
|
|
103
|
+
"@elliemae/ds-button": "2.0.0-alpha.13",
|
|
104
|
+
"@elliemae/ds-classnames": "2.0.0-alpha.13",
|
|
105
|
+
"@elliemae/ds-form": "2.0.0-alpha.13",
|
|
106
|
+
"@elliemae/ds-hidden": "2.0.0-alpha.13",
|
|
107
|
+
"@elliemae/ds-icons": "2.0.0-alpha.13",
|
|
108
|
+
"@elliemae/ds-popper": "2.0.0-alpha.13",
|
|
109
|
+
"@elliemae/ds-separator": "2.0.0-alpha.13",
|
|
110
|
+
"@elliemae/ds-shared": "2.0.0-alpha.13",
|
|
111
|
+
"@elliemae/ds-truncated-tooltip-text": "2.0.0-alpha.13",
|
|
112
|
+
"@elliemae/ds-utilities": "2.0.0-alpha.13",
|
|
113
113
|
"prop-types": "~15.7.2",
|
|
114
114
|
"react-desc": "~4.1.3",
|
|
115
115
|
"react-spring": "~8.0.27",
|
|
116
116
|
"react-window": "~1.8.6"
|
|
117
117
|
},
|
|
118
118
|
"devDependencies": {
|
|
119
|
-
"
|
|
119
|
+
"@testing-library/jest-dom": "~5.15.0",
|
|
120
|
+
"@testing-library/react": "~12.1.2",
|
|
121
|
+
"jest-styled-components": "~7.0.6",
|
|
122
|
+
"styled-components": "~5.3.3"
|
|
120
123
|
},
|
|
121
124
|
"peerDependencies": {
|
|
122
125
|
"lodash": "^4.17.21",
|
|
123
126
|
"react": "^17.0.2",
|
|
124
127
|
"react-dom": "^17.0.2",
|
|
125
|
-
"styled-components": "^5.3.
|
|
128
|
+
"styled-components": "^5.3.3"
|
|
126
129
|
},
|
|
127
130
|
"publishConfig": {
|
|
128
131
|
"access": "public",
|
package/types/Menu.d.ts
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
|
+
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
2
|
+
import React from 'react';
|
|
1
3
|
import { renderMenuItems, menuItemFactory } from './MenuItems/menuItemFactory';
|
|
2
4
|
declare const Menu: any;
|
|
3
|
-
declare const DSMenuWithSchema:
|
|
5
|
+
declare const DSMenuWithSchema: {
|
|
6
|
+
(props?: {
|
|
7
|
+
[x: string]: any;
|
|
8
|
+
containerProps?: {} | undefined;
|
|
9
|
+
innerRef: any;
|
|
10
|
+
as?: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof React.HTMLAttributes<HTMLUListElement>> & {
|
|
11
|
+
ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
|
|
12
|
+
}> | undefined;
|
|
13
|
+
children?: undefined;
|
|
14
|
+
onClickOutside?: (() => void) | undefined;
|
|
15
|
+
visible?: undefined;
|
|
16
|
+
focusOnOpen?: boolean | undefined;
|
|
17
|
+
maxOption?: number | undefined;
|
|
18
|
+
style?: {} | undefined;
|
|
19
|
+
minWidth?: undefined;
|
|
20
|
+
maxWidth?: undefined;
|
|
21
|
+
closeMenu: any;
|
|
22
|
+
responsiveHeight?: boolean | undefined;
|
|
23
|
+
} | undefined): JSX.Element;
|
|
24
|
+
propTypes: unknown;
|
|
25
|
+
toTypescript: () => import("react-desc").TypescriptSchema;
|
|
26
|
+
};
|
|
4
27
|
export { Menu, menuItemFactory, renderMenuItems, DSMenuWithSchema };
|
|
5
28
|
export default Menu;
|