@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.
Files changed (48) hide show
  1. package/cjs/Menu.js +41 -26
  2. package/cjs/MenuCombobox.js +8 -3
  3. package/cjs/MenuContext.js +1 -1
  4. package/cjs/MenuItems/CheckboxGroup.js +8 -3
  5. package/cjs/MenuItems/MenuItem.js +53 -39
  6. package/cjs/MenuItems/MenuItemCheckable.js +21 -16
  7. package/cjs/MenuItems/MenuItemCheckbox.js +10 -6
  8. package/cjs/MenuItems/MenuItemRadio.js +9 -4
  9. package/cjs/MenuItems/RadioGroup.js +8 -3
  10. package/cjs/MenuItems/SearchableGroup.js +23 -15
  11. package/cjs/MenuItems/SearchableList.js +25 -19
  12. package/cjs/MenuItems/SelectionGroup.js +26 -16
  13. package/cjs/MenuItems/Separator.js +9 -6
  14. package/cjs/MenuItems/SubMenu.js +31 -28
  15. package/cjs/MenuItems/menuItemFactory.js +21 -10
  16. package/cjs/VirtualMenuList.js +22 -15
  17. package/cjs/index.js +1 -1
  18. package/cjs/utils/useHeightByAmountOfItems.js +6 -5
  19. package/esm/Menu.js +26 -11
  20. package/esm/MenuCombobox.js +5 -0
  21. package/esm/MenuItems/CheckboxGroup.js +5 -0
  22. package/esm/MenuItems/MenuItem.js +43 -29
  23. package/esm/MenuItems/MenuItemCheckable.js +14 -8
  24. package/esm/MenuItems/MenuItemCheckbox.js +6 -1
  25. package/esm/MenuItems/MenuItemRadio.js +5 -0
  26. package/esm/MenuItems/RadioGroup.js +5 -0
  27. package/esm/MenuItems/SearchableGroup.js +20 -12
  28. package/esm/MenuItems/SearchableList.js +21 -14
  29. package/esm/MenuItems/SelectionGroup.js +22 -12
  30. package/esm/MenuItems/Separator.js +7 -4
  31. package/esm/MenuItems/SubMenu.js +25 -20
  32. package/esm/MenuItems/menuItemFactory.js +14 -3
  33. package/esm/VirtualMenuList.js +21 -14
  34. package/esm/utils/useHeightByAmountOfItems.js +6 -5
  35. package/package.json +16 -13
  36. package/types/Menu.d.ts +24 -1
  37. package/types/MenuItems/CheckboxGroup.d.ts +24 -4
  38. package/types/MenuItems/MenuItem.d.ts +60 -10
  39. package/types/MenuItems/MenuItemCheckable.d.ts +51 -7
  40. package/types/MenuItems/MenuItemRadio.d.ts +27 -3
  41. package/types/MenuItems/RadioGroup.d.ts +18 -3
  42. package/types/MenuItems/SearchableGroup.d.ts +15 -1
  43. package/types/MenuItems/SearchableList.d.ts +77 -11
  44. package/types/MenuItems/SelectionGroup.d.ts +73 -11
  45. package/types/MenuItems/Separator.d.ts +21 -3
  46. package/types/MenuItems/SubMenu.d.ts +91 -13
  47. package/cjs/package.json +0 -7
  48. 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/system';
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
- empty,
29
- fixedItem
30
- }) => ({
31
- empty,
32
- fixedItem
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
- disabled,
45
- disabledAddonInactive,
46
- customRenderer,
47
- fixedItem,
48
- type
49
- }) => ({
50
- disabled,
51
- disabledAddonInactive,
52
- customRenderer,
53
- fixedItem,
54
- [`menu-type-${type}`]: type
55
- }));
56
-
57
- const calculateSize = (length = 0) => {
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 = (...args) => {
98
- if (wrapperProps.onClick) wrapperProps.onClick(...args);
111
+ const onClick = function () {
112
+ if (wrapperProps.onClick) wrapperProps.onClick(...arguments);
99
113
 
100
114
  if (wrapperProps.closeOnClick && menuCxt.closeMenu) {
101
- menuCxt.closeMenu(...args);
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: `${calculateSize(maxOption)}px`,
134
- maxWidth: `${calculateSize(maxOption)}px`
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/Checkmark';
7
- import { runAll } from '@elliemae/ds-utilities/utils';
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
- checked
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(_ref) {
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
- } = _ref,
54
- otherProps = _objectWithoutProperties(_ref, _excluded);
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/Checkbox';
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
- children,
16
- amountItemsInWindow = 5,
17
- searchTerm: searchTermProp = '',
18
- noOptionsText = 'No options',
19
- height,
20
- width,
21
- focusOnOpen = false
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
- value
44
- }) => setSearchTerm(value),
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/utils';
5
- import DSComboBox from '@elliemae/ds-form/ComboBox';
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
- onSelectMenuItem = noop,
16
- components = {},
17
- searchTerm: searchTermProp = '',
18
- items = [],
19
- dropdownFilterOptions = {},
20
- returnValue,
21
- extraListProps = {},
22
- appendTermInList = false,
23
- maxOptions = 10,
24
- loading = false
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
- multi = false,
18
- searchable = false,
19
- focusOnOpen = false,
20
- onSelect = noop,
21
- children,
22
- items = undefined,
23
- active = multi ? [] : '',
24
- width,
25
- height
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
- title,
17
- showSeparator = true
18
- }) => /*#__PURE__*/_jsx(Li, {}, void 0, showSeparator && (_DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx(DSSeparator, {}))), title && /*#__PURE__*/_jsx(Title, {}, void 0, title));
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 */
@@ -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 ChevronRight from '@elliemae/ds-icons/ChevronSmallRight';
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
- noAddon,
26
- leftAddon = undefined,
27
- label = undefined,
28
- interactionType = 'hover',
29
- children: subitems,
30
- rightAddonType,
31
- disabledAddonInactive,
32
- checkableProps = {},
33
- customRenderer,
34
- onClick,
35
- closeMenu,
36
- id
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(VerticalElipsis, {
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(ChevronRight, {
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/utils';
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(type = '', items, defaultItem = itemTypes.menuitem) {
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, factory = menuItemFactory) {
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({
@@ -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
- data,
8
- index,
9
- style
10
- }) => /*#__PURE__*/_jsx("div", {
11
- style: style
12
- }, index, data && data[index] ? data[index] : ''); // eslint-disable-next-line no-unused-vars
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
- items,
16
- itemHeight = 32,
17
- amountItemsInWindow = 5,
18
- width,
19
- height
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
- itemHeight,
10
- amountItems,
11
- items
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.1",
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.1",
104
- "@elliemae/ds-classnames": "2.0.0-alpha.1",
105
- "@elliemae/ds-form": "2.0.0-alpha.1",
106
- "@elliemae/ds-hidden": "2.0.0-alpha.1",
107
- "@elliemae/ds-icons": "2.0.0-alpha.1",
108
- "@elliemae/ds-popper": "2.0.0-alpha.1",
109
- "@elliemae/ds-separator": "2.0.0-alpha.1",
110
- "@elliemae/ds-shared": "2.0.0-alpha.1",
111
- "@elliemae/ds-truncated-tooltip-text": "2.0.0-alpha.1",
112
- "@elliemae/ds-utilities": "2.0.0-alpha.1",
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
- "styled-components": "~5.3.1"
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.1"
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: any;
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;