@elliemae/ds-menu 3.0.0-next.2 → 3.0.0-next.6

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