@elliemae/ds-menu 1.60.0 → 2.0.0-alpha.12

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 (114) hide show
  1. package/cjs/Menu.js +191 -39
  2. package/cjs/MenuCombobox.js +38 -80
  3. package/cjs/MenuContext.js +1 -2
  4. package/cjs/MenuItems/CheckboxGroup.js +17 -10
  5. package/cjs/MenuItems/MenuItem.js +199 -36
  6. package/cjs/MenuItems/MenuItemCheckable.js +114 -35
  7. package/cjs/MenuItems/MenuItemCheckbox.js +39 -34
  8. package/cjs/MenuItems/MenuItemRadio.js +36 -35
  9. package/cjs/MenuItems/RadioGroup.js +17 -10
  10. package/cjs/MenuItems/SearchableGroup.js +49 -57
  11. package/cjs/MenuItems/SearchableList.js +35 -51
  12. package/cjs/MenuItems/SelectionGroup.js +103 -36
  13. package/cjs/MenuItems/Separator.js +17 -16
  14. package/cjs/MenuItems/SubMenu.js +199 -36
  15. package/cjs/MenuItems/menuItemFactory.js +67 -36
  16. package/cjs/VirtualMenuList.js +27 -23
  17. package/cjs/index.js +27 -48
  18. package/cjs/utils/useHeightByAmountOfItems.js +8 -9
  19. package/esm/Menu.js +180 -31
  20. package/esm/MenuCombobox.js +33 -74
  21. package/esm/MenuContext.js +0 -1
  22. package/esm/MenuItems/CheckboxGroup.js +15 -7
  23. package/esm/MenuItems/MenuItem.js +191 -31
  24. package/esm/MenuItems/MenuItemCheckable.js +107 -30
  25. package/esm/MenuItems/MenuItemCheckbox.js +33 -30
  26. package/esm/MenuItems/MenuItemRadio.js +31 -30
  27. package/esm/MenuItems/RadioGroup.js +15 -7
  28. package/esm/MenuItems/SearchableGroup.js +48 -55
  29. package/esm/MenuItems/SearchableList.js +34 -47
  30. package/esm/MenuItems/SelectionGroup.js +97 -31
  31. package/esm/MenuItems/Separator.js +14 -13
  32. package/esm/MenuItems/SubMenu.js +190 -31
  33. package/esm/MenuItems/menuItemFactory.js +62 -31
  34. package/esm/VirtualMenuList.js +25 -21
  35. package/esm/index.js +7 -28
  36. package/esm/utils/useHeightByAmountOfItems.js +8 -9
  37. package/package.json +109 -21
  38. package/types/Menu.d.ts +28 -0
  39. package/types/MenuCombobox.d.ts +28 -0
  40. package/types/MenuContext.d.ts +3 -0
  41. package/types/MenuItems/CheckboxGroup.d.ts +32 -0
  42. package/types/MenuItems/MenuItem.d.ts +79 -0
  43. package/types/MenuItems/MenuItemCheckable.d.ts +86 -0
  44. package/types/MenuItems/MenuItemCheckbox.d.ts +6 -0
  45. package/types/MenuItems/MenuItemRadio.d.ts +37 -0
  46. package/types/MenuItems/RadioGroup.d.ts +26 -0
  47. package/types/MenuItems/SearchableGroup.d.ts +18 -0
  48. package/types/MenuItems/SearchableList.d.ts +106 -0
  49. package/types/MenuItems/SelectionGroup.d.ts +98 -0
  50. package/types/MenuItems/Separator.d.ts +34 -0
  51. package/types/MenuItems/SubMenu.d.ts +122 -0
  52. package/types/MenuItems/menuItemFactory.d.ts +3 -0
  53. package/types/VirtualMenuList.d.ts +8 -0
  54. package/types/index.d.ts +13 -0
  55. package/types/tests/Menu.test.d.ts +1 -0
  56. package/types/tests/MenuItem.test.d.ts +1 -0
  57. package/types/utils/useHeightByAmountOfItems.d.ts +5 -0
  58. package/Menu/package.json +0 -10
  59. package/MenuCombobox/package.json +0 -10
  60. package/MenuContext/package.json +0 -10
  61. package/MenuItems/CheckboxGroup/package.json +0 -10
  62. package/MenuItems/MenuItem/package.json +0 -10
  63. package/MenuItems/MenuItemCheckable/package.json +0 -10
  64. package/MenuItems/MenuItemCheckbox/package.json +0 -10
  65. package/MenuItems/MenuItemRadio/package.json +0 -10
  66. package/MenuItems/RadioGroup/package.json +0 -10
  67. package/MenuItems/SearchableGroup/package.json +0 -10
  68. package/MenuItems/SearchableList/package.json +0 -10
  69. package/MenuItems/SelectionGroup/package.json +0 -10
  70. package/MenuItems/Separator/package.json +0 -10
  71. package/MenuItems/SubMenu/package.json +0 -10
  72. package/MenuItems/menuItemFactory/package.json +0 -10
  73. package/VirtualMenuList/package.json +0 -10
  74. package/cjs/Menu.js.map +0 -1
  75. package/cjs/MenuCombobox.js.map +0 -1
  76. package/cjs/MenuContext.js.map +0 -1
  77. package/cjs/MenuItems/CheckboxGroup.js.map +0 -1
  78. package/cjs/MenuItems/MenuItem.js.map +0 -1
  79. package/cjs/MenuItems/MenuItemCheckable.js.map +0 -1
  80. package/cjs/MenuItems/MenuItemCheckbox.js.map +0 -1
  81. package/cjs/MenuItems/MenuItemRadio.js.map +0 -1
  82. package/cjs/MenuItems/RadioGroup.js.map +0 -1
  83. package/cjs/MenuItems/SearchableGroup.js.map +0 -1
  84. package/cjs/MenuItems/SearchableList.js.map +0 -1
  85. package/cjs/MenuItems/SelectionGroup.js.map +0 -1
  86. package/cjs/MenuItems/Separator.js.map +0 -1
  87. package/cjs/MenuItems/SubMenu.js.map +0 -1
  88. package/cjs/MenuItems/menuItemFactory.js.map +0 -1
  89. package/cjs/SubMenu-22be0a18.js +0 -806
  90. package/cjs/SubMenu-22be0a18.js.map +0 -1
  91. package/cjs/VirtualMenuList.js.map +0 -1
  92. package/cjs/index.js.map +0 -1
  93. package/cjs/utils/useHeightByAmountOfItems.js.map +0 -1
  94. package/esm/Menu.js.map +0 -1
  95. package/esm/MenuCombobox.js.map +0 -1
  96. package/esm/MenuContext.js.map +0 -1
  97. package/esm/MenuItems/CheckboxGroup.js.map +0 -1
  98. package/esm/MenuItems/MenuItem.js.map +0 -1
  99. package/esm/MenuItems/MenuItemCheckable.js.map +0 -1
  100. package/esm/MenuItems/MenuItemCheckbox.js.map +0 -1
  101. package/esm/MenuItems/MenuItemRadio.js.map +0 -1
  102. package/esm/MenuItems/RadioGroup.js.map +0 -1
  103. package/esm/MenuItems/SearchableGroup.js.map +0 -1
  104. package/esm/MenuItems/SearchableList.js.map +0 -1
  105. package/esm/MenuItems/SelectionGroup.js.map +0 -1
  106. package/esm/MenuItems/Separator.js.map +0 -1
  107. package/esm/MenuItems/SubMenu.js.map +0 -1
  108. package/esm/MenuItems/menuItemFactory.js.map +0 -1
  109. package/esm/SubMenu-a25e69ec.js +0 -778
  110. package/esm/SubMenu-a25e69ec.js.map +0 -1
  111. package/esm/VirtualMenuList.js.map +0 -1
  112. package/esm/index.js.map +0 -1
  113. package/esm/utils/useHeightByAmountOfItems.js.map +0 -1
  114. package/utils/useHeightByAmountOfItems/package.json +0 -10
@@ -1,31 +1,97 @@
1
- import '@babel/runtime/helpers/esm/extends';
2
- import 'react';
3
- import 'react-desc';
4
- import '@elliemae/ds-shared/CheckableGroup';
5
- import './SearchableGroup.js';
6
- export { d as DSMenuSelectionGroupWithSchema, S as default } from '../SubMenu-a25e69ec.js';
7
- import '../VirtualMenuList.js';
8
- import '@babel/runtime/helpers/esm/slicedToArray';
9
- import '@elliemae/ds-classnames';
10
- import '@elliemae/ds-shared/FocusGroup';
11
- import '@elliemae/ds-form/SearchBox';
12
- import '../MenuContext.js';
13
- import 'react-window';
14
- import '../utils/useHeightByAmountOfItems.js';
15
- import '@elliemae/ds-icons';
16
- import '@elliemae/ds-hidden';
17
- import '@elliemae/ds-button';
18
- import '@elliemae/ds-popper';
19
- import 'styled-components';
20
- import '@babel/runtime/helpers/esm/objectWithoutProperties';
21
- import '@babel/runtime/helpers/esm/defineProperty';
22
- import 'lodash';
23
- import 'react-spring/web.cjs';
24
- import '@elliemae/ds-utilities';
25
- import '@elliemae/ds-truncated-tooltip-text';
26
- import './Separator.js';
27
- import '@elliemae/ds-separator';
28
- import '@elliemae/ds-form';
29
- import './CheckboxGroup.js';
30
- import './RadioGroup.js';
31
- //# sourceMappingURL=SelectionGroup.js.map
1
+ import _jsx from '@babel/runtime/helpers/esm/jsx';
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';
10
+ import { useMemo, createElement } from 'react';
11
+ import { PropTypes, describe } from 'react-desc';
12
+ import { useCheckableGroup } from '@elliemae/ds-shared/CheckableGroup';
13
+ import SearchableGroup from './SearchableGroup.js';
14
+ import { menuItemFactory } from './menuItemFactory.js';
15
+ import VirtualMenuList from '../VirtualMenuList.js';
16
+
17
+ 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; }
18
+
19
+ 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; }
20
+
21
+ const noop = () => null;
22
+
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;
36
+ const renderedItems = useMemo(() => items && items.map(item => {
37
+ const Component = menuItemFactory(multi ? 'checkbox' : 'radio');
38
+ return /*#__PURE__*/createElement(Component, _objectSpread(_objectSpread({}, item), {}, {
39
+ key: item.name || item.id || item.key,
40
+ item: item,
41
+ name: item.id || item.name
42
+ }));
43
+ }), [items]);
44
+ const decoratedGroupChildren = useCheckableGroup({
45
+ children: renderedItems || children,
46
+ multi,
47
+ active,
48
+ onCheck: onSelect
49
+ });
50
+
51
+ if (searchable) {
52
+ return /*#__PURE__*/_jsx(SearchableGroup, {
53
+ focusOnOpen: focusOnOpen,
54
+ height: height,
55
+ items: items,
56
+ width: width
57
+ }, void 0, decoratedGroupChildren);
58
+ }
59
+
60
+ return /*#__PURE__*/_jsx(VirtualMenuList, {
61
+ height: height,
62
+ items: decoratedGroupChildren,
63
+ width: width,
64
+ amountItemsInWindow: maxOptions
65
+ });
66
+ }
67
+
68
+ const props = {
69
+ /** toggle on multi select */
70
+ multi: PropTypes.bool.description('toggle on multi select'),
71
+
72
+ /** toggle on searchable behavior */
73
+ searchable: PropTypes.bool.description('toggle on searchable behavior'),
74
+
75
+ /** toggle to focus component on open */
76
+ focusOnOpen: PropTypes.bool.description('toggle to focus component on open'),
77
+
78
+ /** callback that triggers when select happens */
79
+ onSelect: PropTypes.func.description('callback that triggers when select happens'),
80
+ children: PropTypes.node.description(''),
81
+
82
+ /** selection group items */
83
+ items: PropTypes.array.description('selection group items'),
84
+
85
+ /** array of values for multi and string for single selection */
86
+ active: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).description('array of values for multi and string for single selection'),
87
+
88
+ /** selection group width */
89
+ width: PropTypes.number.description('selection group width'),
90
+
91
+ /** selection group height */
92
+ height: PropTypes.number.description('selection group height')
93
+ };
94
+ const DSMenuSelectionGroupWithSchema = describe(SelectionGroup);
95
+ DSMenuSelectionGroupWithSchema.propTypes = props;
96
+
97
+ export { DSMenuSelectionGroupWithSchema, SelectionGroup as default };
@@ -1,32 +1,33 @@
1
- import React from 'react';
1
+ import _jsx from '@babel/runtime/helpers/esm/jsx';
2
+ import 'react';
2
3
  import { PropTypes, describe } from 'react-desc';
3
4
  import { aggregatedClasses } from '@elliemae/ds-classnames';
4
5
  import DSSeparator from '@elliemae/ds-separator';
5
6
  import styled from 'styled-components';
6
7
 
7
- var blockName = 'menu-separator';
8
- var Li = /*#__PURE__*/styled.li.withConfig({
8
+ var _DSSeparator;
9
+ const blockName = 'menu-separator';
10
+ const Li = /*#__PURE__*/styled.li.withConfig({
9
11
  componentId: "sc-aysbq3-0"
10
12
  })(["display:flex;align-items:flex-start;flex-direction:column;"]);
11
- var Title = aggregatedClasses('h5')(blockName, 'title');
13
+ const Title = aggregatedClasses('h5')(blockName, 'title');
12
14
 
13
- var MenuSeparator = function MenuSeparator(_ref) {
14
- var title = _ref.title,
15
- _ref$showSeparator = _ref.showSeparator,
16
- showSeparator = _ref$showSeparator === void 0 ? true : _ref$showSeparator;
17
- return /*#__PURE__*/React.createElement(Li, null, showSeparator && /*#__PURE__*/React.createElement(DSSeparator, null), title && /*#__PURE__*/React.createElement(Title, null, 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));
18
21
  };
19
22
 
20
- var props = {
23
+ const props = {
21
24
  /** menu separator h5 title */
22
25
  title: PropTypes.string.description('menu separator h5 title'),
23
26
 
24
27
  /** toggle separator on and off */
25
28
  showSeparator: PropTypes.bool.description('toggle separator on and off')
26
29
  };
27
- MenuSeparator.propTypes = props;
28
- var DSMenuSeparatorWithSchema = describe(MenuSeparator);
30
+ const DSMenuSeparatorWithSchema = describe(MenuSeparator);
29
31
  DSMenuSeparatorWithSchema.propTypes = props;
30
32
 
31
33
  export { DSMenuSeparatorWithSchema, MenuSeparator as default };
32
- //# sourceMappingURL=Separator.js.map
@@ -1,31 +1,190 @@
1
- import '@babel/runtime/helpers/esm/extends';
2
- import '@babel/runtime/helpers/esm/slicedToArray';
3
- import 'react';
4
- import 'react-desc';
5
- import '@elliemae/ds-icons';
6
- import '@elliemae/ds-shared/FocusGroup';
7
- import '@elliemae/ds-hidden';
8
- import '@elliemae/ds-button';
9
- import '@elliemae/ds-popper';
10
- import 'styled-components';
11
- export { a as DSSubMenuWithSchema, j as default } from '../SubMenu-a25e69ec.js';
12
- import '@babel/runtime/helpers/esm/objectWithoutProperties';
13
- import '@babel/runtime/helpers/esm/defineProperty';
14
- import 'lodash';
15
- import '@elliemae/ds-classnames';
16
- import 'react-spring/web.cjs';
17
- import '@elliemae/ds-utilities';
18
- import '@elliemae/ds-truncated-tooltip-text';
19
- import './Separator.js';
20
- import '@elliemae/ds-separator';
21
- import '@elliemae/ds-shared/CheckableGroup';
22
- import './SearchableGroup.js';
23
- import '@elliemae/ds-form/SearchBox';
24
- import '../VirtualMenuList.js';
25
- import 'react-window';
26
- import '../utils/useHeightByAmountOfItems.js';
27
- import '../MenuContext.js';
28
- import '@elliemae/ds-form';
29
- import './CheckboxGroup.js';
30
- import './RadioGroup.js';
31
- //# sourceMappingURL=SubMenu.js.map
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';
6
+ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
+ import _jsx from '@babel/runtime/helpers/esm/jsx';
8
+ import 'core-js/modules/web.dom-collections.iterator.js';
9
+ import { useRef, useState, useCallback } from 'react';
10
+ import { PropTypes, describe } from 'react-desc';
11
+ import { MoreOptionsVert, ChevronSmallRight } from '@elliemae/ds-icons';
12
+ import { useFocusGroupItem } from '@elliemae/ds-shared/FocusGroup';
13
+ import { useHiddenController } from '@elliemae/ds-hidden';
14
+ import DSButton, { BUTTON_VARIANT } from '@elliemae/ds-button';
15
+ import DSPopper, { interactions } from '@elliemae/ds-popper';
16
+ import styled from 'styled-components';
17
+ import { Menu } from '../Menu.js';
18
+ import MenuItem from './MenuItem.js';
19
+ import { jsx, Fragment } from 'react/jsx-runtime';
20
+
21
+ 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; }
22
+
23
+ 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; }
24
+ const ChevronRightComp = /*#__PURE__*/styled.div.withConfig({
25
+ componentId: "sc-1qhp1z-0"
26
+ })(["display:flex;justify-content:center;align-items:center;width:28px;"]);
27
+
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;
43
+ const itemRef = useRef(null);
44
+ const focusOnOpen = useRef(false);
45
+ const [isAddonHovered, setIsAddonHovered] = useState(false);
46
+ const {
47
+ visible = false,
48
+ onShow,
49
+ onHide
50
+ } = useHiddenController(undefined, {
51
+ interaction: 'click'
52
+ });
53
+ const interaction = rightAddonType === 'elipsis' ? 'click' : 'hover';
54
+ const {
55
+ focusItemByNode
56
+ } = useFocusGroupItem(); // todo: create a menu state to handle all related menu things
57
+
58
+ const handleShowSubItemsWithMouse = e => {
59
+ e.stopPropagation();
60
+ onShow();
61
+ focusOnOpen.current = true;
62
+ };
63
+
64
+ const handleShowWithMouse = e => {
65
+ if (onClick) onClick(e);
66
+ };
67
+
68
+ const handleShowWithMouseHover = () => {
69
+ setIsAddonHovered(true);
70
+ onShow();
71
+ focusOnOpen.current = false;
72
+ };
73
+
74
+ const handleShowWithKeyboard = () => {
75
+ onShow();
76
+ focusOnOpen.current = true;
77
+ };
78
+
79
+ const handleOnMouseEnter = useCallback(() => {
80
+ setIsAddonHovered(true);
81
+ }, []);
82
+ const handleOnMouseLeave = useCallback(() => {
83
+ setIsAddonHovered(false);
84
+ }, []);
85
+ const hoverHandlers = interaction === 'hover' ? {
86
+ onMouseEnter: handleShowWithMouseHover,
87
+ onMouseLeave: () => {
88
+ onHide();
89
+ setIsAddonHovered(false);
90
+ }
91
+ } : {
92
+ onClick: handleShowWithMouse
93
+ };
94
+ const rightAddon = rightAddonType === 'elipsis' ? /*#__PURE__*/_jsx(DSButton, {
95
+ "aria-label": "vertical-elipsis",
96
+ "data-testid": "vertical-elipsis",
97
+ buttonType: "text",
98
+ leftIcon: /*#__PURE__*/_jsx(MoreOptionsVert, {
99
+ className: "submenu-arrow",
100
+ color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
101
+ size: "s"
102
+ }),
103
+ onClick: e => handleShowSubItemsWithMouse(e),
104
+ size: "m",
105
+ variant: BUTTON_VARIANT.DEFAULT
106
+ }) : /*#__PURE__*/_jsx(ChevronRightComp, {}, void 0, /*#__PURE__*/_jsx(ChevronSmallRight, {
107
+ "data-testid": "chevron-right",
108
+ className: "submenu-arrow",
109
+ color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
110
+ size: "sm"
111
+ }));
112
+ return /*#__PURE__*/jsx(Fragment, {
113
+ children: /*#__PURE__*/_jsx(DSPopper, {
114
+ contentComponent: /*#__PURE__*/jsx(Menu, _objectSpread(_objectSpread({
115
+ focusKeyBindings: {
116
+ ArrowLeft: [() => focusItemByNode(itemRef.current), 'exit']
117
+ },
118
+ focusOnOpen: focusOnOpen.current,
119
+ onExitFocusGroup: onHide
120
+ }, hoverHandlers), {}, {
121
+ closeMenu: closeMenu,
122
+ visible: visible,
123
+ children: subitems
124
+ })),
125
+ interactionType: interactionType,
126
+ isOpen: visible,
127
+ onOpen: opening => opening ? onShow() : onHide(),
128
+ placement: "right-start",
129
+ showArrow: false,
130
+ triggerComponent: /*#__PURE__*/jsx(MenuItem, _objectSpread(_objectSpread({
131
+ customRenderer: customRenderer,
132
+ disabledAddonInactive: disabledAddonInactive,
133
+ id: id,
134
+ innerRef: itemRef,
135
+ label: label,
136
+ leftAddon: leftAddon,
137
+ noAddon: noAddon,
138
+ onFocus: handleOnMouseEnter,
139
+ onBlur: handleOnMouseLeave,
140
+ onMouseEnter: handleOnMouseEnter,
141
+ onMouseLeave: handleOnMouseLeave
142
+ }, hoverHandlers), {}, {
143
+ onKeyDown: e => {
144
+ if (e.key === 'ArrowRight' || e.key === 'Enter' || e.keyCode === 32) {
145
+ handleShowWithKeyboard();
146
+ }
147
+ },
148
+ rightAddon: rightAddon
149
+ }, checkableProps))
150
+ })
151
+ });
152
+ }
153
+
154
+ const props = {
155
+ /** dont show addon for submenu */
156
+ noAddon: PropTypes.bool.description('dont show addon for submenu'),
157
+
158
+ /** left addon */
159
+ leftAddon: PropTypes.node.description('left addon'),
160
+
161
+ /** submenu label */
162
+ label: PropTypes.string.description('submenu label'),
163
+
164
+ /** A type indicating how to open/close the tooltip */
165
+ interactionType: PropTypes.oneOf(interactions).description('A type indicating how to open/close the tooltip'),
166
+
167
+ /** sub menu items */
168
+ children: PropTypes.oneOfType([PropTypes.array, PropTypes.node]).description('sub menu items'),
169
+
170
+ /** right addon, ellipsis or undefined */
171
+ rightAddonType: PropTypes.oneOf(['ellipsis']).description('right addon, ellipsis or undefined'),
172
+ disabledAddonInactive: PropTypes.bool.description(''),
173
+
174
+ /** props passed to MenuItem component */
175
+ checkableProps: PropTypes.object.description('props passed to MenuItem component'),
176
+
177
+ /** custom renderer for menu item */
178
+ customRenderer: PropTypes.func.description('custom renderer for menu item'),
179
+
180
+ /** on click handler */
181
+ onClick: PropTypes.func.description('on click handler'),
182
+ closeMenu: PropTypes.any.description(''),
183
+
184
+ /** component id */
185
+ id: PropTypes.string.description('component id')
186
+ };
187
+ const DSSubMenuWithSchema = describe(SubMenu);
188
+ DSSubMenuWithSchema.propTypes = props;
189
+
190
+ export { DSSubMenuWithSchema, SubMenu as default };
@@ -1,31 +1,62 @@
1
- import '@babel/runtime/helpers/esm/extends';
2
- import 'react';
3
- import '@elliemae/ds-utilities';
4
- import './Separator.js';
5
- export { m as menuItemFactory, r as renderMenuItems } from '../SubMenu-a25e69ec.js';
6
- import 'react-desc';
7
- import '@elliemae/ds-classnames';
8
- import '@elliemae/ds-separator';
9
- import 'styled-components';
10
- import '@babel/runtime/helpers/esm/slicedToArray';
11
- import '@elliemae/ds-icons';
12
- import '@elliemae/ds-shared/FocusGroup';
13
- import '@elliemae/ds-hidden';
14
- import '@elliemae/ds-button';
15
- import '@elliemae/ds-popper';
16
- import '@babel/runtime/helpers/esm/objectWithoutProperties';
17
- import '@babel/runtime/helpers/esm/defineProperty';
18
- import 'lodash';
19
- import 'react-spring/web.cjs';
20
- import '@elliemae/ds-truncated-tooltip-text';
21
- import '@elliemae/ds-shared/CheckableGroup';
22
- import './SearchableGroup.js';
23
- import '@elliemae/ds-form/SearchBox';
24
- import '../VirtualMenuList.js';
25
- import 'react-window';
26
- import '../utils/useHeightByAmountOfItems.js';
27
- import '../MenuContext.js';
28
- import '@elliemae/ds-form';
29
- import './CheckboxGroup.js';
30
- import './RadioGroup.js';
31
- //# sourceMappingURL=menuItemFactory.js.map
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';
9
+ import { createElement } from 'react';
10
+ import { isFunction } from '@elliemae/ds-utilities';
11
+ import MenuSeparator from './Separator.js';
12
+ import MenuItem from './MenuItem.js';
13
+ import SubMenu from './SubMenu.js';
14
+ import SelectionGroup from './SelectionGroup.js';
15
+ import MenuItemCheckbox from './MenuItemCheckbox.js';
16
+ import MenuItemRadio from './MenuItemRadio.js';
17
+
18
+ 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
+
20
+ 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; }
21
+ const itemTypes = {
22
+ separator: MenuSeparator,
23
+ menuitem: MenuItem,
24
+ radio: MenuItemRadio,
25
+ checkbox: MenuItemCheckbox,
26
+ submenu: SubMenu,
27
+ 'selection-group': SelectionGroup
28
+ };
29
+ const fallback = {
30
+ SelectionGroup: 'selection-group'
31
+ };
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;
36
+ const itemsObject = items || itemTypes;
37
+ const parsedType = fallback[type] || type.toLowerCase();
38
+ return itemsObject[parsedType] || defaultItem;
39
+ }
40
+ function renderMenuItems(options) {
41
+ let factory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : menuItemFactory;
42
+ return options.map((option, index) => {
43
+ if (isFunction(option.renderer)) {
44
+ return option.renderer({
45
+ key: option.id,
46
+ item: option
47
+ });
48
+ }
49
+
50
+ const ItemComponent = factory(option.type);
51
+ const children = option.subItems && renderMenuItems(option.subItems, factory);
52
+ return /*#__PURE__*/createElement(ItemComponent, _objectSpread(_objectSpread({}, option), {}, {
53
+ key: option.id || index,
54
+ item: option,
55
+ onClick: null,
56
+ onMouseDown: option.onClick // onClick callback called in onMouseDown due to events order issue
57
+
58
+ }), children);
59
+ });
60
+ }
61
+
62
+ export { menuItemFactory, renderMenuItems };
@@ -1,38 +1,42 @@
1
- import React from 'react';
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';
5
+ import 'react';
2
6
  import { FixedSizeList } from 'react-window';
3
7
  import useHeightByAmountOfItems from './utils/useHeightByAmountOfItems.js';
4
8
 
5
- var MenuItem = function MenuItem(_ref) {
6
- var data = _ref.data,
7
- index = _ref.index,
8
- style = _ref.style;
9
- return /*#__PURE__*/React.createElement("div", {
10
- key: index,
9
+ const MenuItem = _ref => {
10
+ let {
11
+ data,
12
+ index,
13
+ style
14
+ } = _ref;
15
+ return /*#__PURE__*/_jsx("div", {
11
16
  style: style
12
- }, data[index]);
17
+ }, index, data && data[index] ? data[index] : '');
13
18
  }; // eslint-disable-next-line no-unused-vars
14
19
 
15
20
  function VirtualMenuList(_ref2) {
16
- var items = _ref2.items,
17
- _ref2$itemHeight = _ref2.itemHeight,
18
- itemHeight = _ref2$itemHeight === void 0 ? 32 : _ref2$itemHeight,
19
- _ref2$amountItemsInWi = _ref2.amountItemsInWindow,
20
- amountItemsInWindow = _ref2$amountItemsInWi === void 0 ? 5 : _ref2$amountItemsInWi,
21
- width = _ref2.width,
22
- height = _ref2.height;
23
- var computedListHeight = useHeightByAmountOfItems({
21
+ let {
22
+ items,
23
+ itemHeight = 32,
24
+ amountItemsInWindow = 5,
25
+ width,
26
+ height
27
+ } = _ref2;
28
+ const computedListHeight = useHeightByAmountOfItems({
24
29
  amountItems: amountItemsInWindow,
25
- itemHeight: itemHeight,
26
- items: items
30
+ itemHeight,
31
+ items
27
32
  });
28
- return /*#__PURE__*/React.createElement(FixedSizeList, {
33
+ return /*#__PURE__*/_jsx(FixedSizeList, {
29
34
  height: height || computedListHeight,
30
35
  itemCount: items.length,
31
36
  itemData: items,
32
37
  itemSize: itemHeight,
33
38
  width: width
34
- }, MenuItem);
39
+ }, void 0, MenuItem);
35
40
  }
36
41
 
37
42
  export { VirtualMenuList as default };
38
- //# sourceMappingURL=VirtualMenuList.js.map
package/esm/index.js CHANGED
@@ -1,34 +1,13 @@
1
- export { b as DSMenuItemCheckeableWithSchema, c as DSMenuItemRadioWithSchema, D as DSMenuItemWithSchema, d as DSMenuSelectionGroupWithSchema, e as DSMenuWithSchema, a as DSSubMenuWithSchema, M as Menu, M as default, m as menuItemFactory, r as renderMenuItems } from './SubMenu-a25e69ec.js';
1
+ export { DSMenuWithSchema, Menu, Menu as default } from './Menu.js';
2
+ export { DSMenuItemWithSchema } from './MenuItems/MenuItem.js';
3
+ export { DSSubMenuWithSchema } from './MenuItems/SubMenu.js';
2
4
  export { DSMenuCheckboxGroupWithSchema } from './MenuItems/CheckboxGroup.js';
5
+ export { DSMenuItemCheckeableWithSchema } from './MenuItems/MenuItemCheckable.js';
6
+ export { DSMenuItemRadioWithSchema } from './MenuItems/MenuItemRadio.js';
3
7
  export { DSMenuRadioGroupWithSchema } from './MenuItems/RadioGroup.js';
4
8
  export { DSMenuSearchableGroupWithSchema } from './MenuItems/SearchableGroup.js';
5
9
  export { DSMenuSearchableListWithSchema } from './MenuItems/SearchableList.js';
6
10
  export { DSMenuSeparatorWithSchema } from './MenuItems/Separator.js';
11
+ export { DSMenuSelectionGroupWithSchema } from './MenuItems/SelectionGroup.js';
7
12
  export { default as MenuCombobox } from './MenuCombobox.js';
8
- import '@babel/runtime/helpers/esm/extends';
9
- import '@babel/runtime/helpers/esm/slicedToArray';
10
- import 'react';
11
- import 'react-desc';
12
- import '@elliemae/ds-icons';
13
- import '@elliemae/ds-shared/FocusGroup';
14
- import '@elliemae/ds-hidden';
15
- import '@elliemae/ds-button';
16
- import '@elliemae/ds-popper';
17
- import 'styled-components';
18
- import '@babel/runtime/helpers/esm/objectWithoutProperties';
19
- import '@babel/runtime/helpers/esm/defineProperty';
20
- import 'lodash';
21
- import '@elliemae/ds-classnames';
22
- import 'react-spring/web.cjs';
23
- import '@elliemae/ds-utilities';
24
- import '@elliemae/ds-truncated-tooltip-text';
25
- import '@elliemae/ds-shared/CheckableGroup';
26
- import './VirtualMenuList.js';
27
- import 'react-window';
28
- import './utils/useHeightByAmountOfItems.js';
29
- import '@elliemae/ds-form';
30
- import './MenuContext.js';
31
- import '@elliemae/ds-form/SearchBox';
32
- import '@elliemae/ds-separator';
33
- import 'prop-types';
34
- //# sourceMappingURL=index.js.map
13
+ export { menuItemFactory, renderMenuItems } from './MenuItems/menuItemFactory.js';
@@ -1,19 +1,18 @@
1
1
  import { useMemo } from 'react';
2
2
 
3
- var calculateHeight = function calculateHeight(itemHeight, amountItemsInWindow, itemsLength) {
4
- var realAmountItemsInWindow = itemsLength < amountItemsInWindow ? itemsLength : amountItemsInWindow;
3
+ const calculateHeight = (itemHeight, amountItemsInWindow, itemsLength) => {
4
+ const realAmountItemsInWindow = itemsLength < amountItemsInWindow ? itemsLength : amountItemsInWindow;
5
5
  return itemHeight * realAmountItemsInWindow;
6
6
  };
7
7
 
8
8
  function useHeightByAmountOfItems(_ref) {
9
- var itemHeight = _ref.itemHeight,
10
- amountItems = _ref.amountItems,
11
- items = _ref.items;
12
- var calculatedHeight = useMemo(function () {
13
- return calculateHeight(itemHeight, amountItems, items.length);
14
- }, [amountItems, items]);
9
+ let {
10
+ itemHeight,
11
+ amountItems,
12
+ items
13
+ } = _ref;
14
+ const calculatedHeight = useMemo(() => calculateHeight(itemHeight, amountItems, items.length), [amountItems, items]);
15
15
  return calculatedHeight;
16
16
  }
17
17
 
18
18
  export { useHeightByAmountOfItems as default };
19
- //# sourceMappingURL=useHeightByAmountOfItems.js.map