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

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,91 +0,0 @@
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';
6
- import { useRef, useState, useEffect, useContext, useMemo } from 'react';
7
- import { aggregatedClasses } from '@elliemae/ds-classnames';
8
- import { focusGroupManagerHoc } from '@elliemae/ds-shared/FocusGroup';
9
- import DSSearchBox from '@elliemae/ds-form/SearchBox';
10
- import { PropTypes, describe } from 'react-desc';
11
- import VirtualMenuList from '../VirtualMenuList.js';
12
- import MenuContext from '../MenuContext.js';
13
- import { jsxs, Fragment } from 'react/jsx-runtime';
14
-
15
- const SearchBoxWrapper = aggregatedClasses('div')('menu-search-group', 'search-wrapper');
16
- const NoOptionsWrapper = aggregatedClasses('div')('menu-search-group', 'no-options');
17
-
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;
28
- const searchRef = useRef(null);
29
- const [searchTerm, setSearchTerm] = useState(searchTermProp);
30
- useEffect(() => {
31
- if (searchRef.current) searchRef.current.focus();
32
- }, []);
33
- const {
34
- visible
35
- } = useContext(MenuContext) || {};
36
- useEffect(() => {
37
- if (focusOnOpen && visible) {
38
- setTimeout(() => {
39
- if (searchRef.current) searchRef.current.focus();
40
- }, 0);
41
- }
42
- }, [focusOnOpen, visible]);
43
- const filteredChildren = useMemo(() => children.filter(child => !searchTerm || child.props.label.toLowerCase().startsWith(searchTerm.toLowerCase())), [children, searchTerm]);
44
- return /*#__PURE__*/jsxs(Fragment, {
45
- children: [/*#__PURE__*/_jsx(SearchBoxWrapper, {}, void 0, /*#__PURE__*/_jsx(DSSearchBox, {
46
- innerRef: searchRef,
47
- onSearch: _ref2 => {
48
- let {
49
- value
50
- } = _ref2;
51
- return setSearchTerm(value);
52
- },
53
- searchOnEnter: false,
54
- showIcon: false,
55
- value: searchTerm
56
- })), !filteredChildren.length && /*#__PURE__*/_jsx(NoOptionsWrapper, {}, void 0, noOptionsText), /*#__PURE__*/_jsx(VirtualMenuList, {
57
- amountItemsInWindow: amountItemsInWindow,
58
- height: height,
59
- items: filteredChildren,
60
- width: width
61
- })]
62
- });
63
- }
64
-
65
- const props = {
66
- /** The amount of items that are going to be rendered in the group */
67
- amountItemsInWindow: PropTypes.number.description('The amount of items that are going to be rendered in the group'),
68
-
69
- /** A search term */
70
- searchTerm: PropTypes.string.description('A search term'),
71
-
72
- /** Text to show when there's no options to show */
73
- noOptionsText: PropTypes.string.description("Text to show when there's no options to show"),
74
-
75
- /** array of children for search list */
76
- children: PropTypes.array.description('array of children for search list'),
77
-
78
- /** height for virtual list wrapper */
79
- height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('height for virtual list wrapper'),
80
-
81
- /** width for virtual list wrapper */
82
- width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('width for virtual list wrapper'),
83
-
84
- /** weather to focus on searchable group on open */
85
- focusOnOpen: PropTypes.bool.description('weather to focus on searchable group on open')
86
- };
87
- const DSMenuSearchableGroupWithSchema = describe(SearchableGroup);
88
- DSMenuSearchableGroupWithSchema.propTypes = props;
89
- var SearchableGroup$1 = focusGroupManagerHoc(SearchableGroup);
90
-
91
- export { DSMenuSearchableGroupWithSchema, SearchableGroup$1 as default };
@@ -1,108 +0,0 @@
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 'core-js/modules/web.dom-collections.iterator.js';
8
- import { useState, useCallback, useMemo } from 'react';
9
- import { PropTypes, describe } from 'react-desc';
10
- import { uniqBy } from '@elliemae/ds-utilities';
11
- import { DSComboBox } from '@elliemae/ds-form';
12
- import { jsx } from 'react/jsx-runtime';
13
-
14
- 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; }
15
-
16
- 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(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; }
17
-
18
- const noop = () => {};
19
-
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;
33
- const [searchTerm, setInputValue] = useState(searchTermProp);
34
- const handleInputChange = useCallback((value, args) => {
35
- const action = args ? args.action : null;
36
- if (action === 'input-blur' || action === 'menu-close') return;
37
- setInputValue(value);
38
- }, [searchTerm]);
39
- const handleFilterByText = useCallback(() => {
40
- if (searchTerm) onSelectMenuItem(searchTerm);
41
- }, [searchTerm]);
42
- const handleKeyDown = useCallback(e => {
43
- if (e.key === 'ArrowRight') {
44
- handleFilterByText();
45
- }
46
- }, [searchTerm]);
47
- const options = useMemo(() => searchTerm && appendTermInList ? uniqBy([{
48
- id: searchTerm,
49
- label: searchTerm
50
- }].concat(items), item => item.label) : items, [searchTerm, appendTermInList]);
51
- return /*#__PURE__*/jsx(DSComboBox, _objectSpread(_objectSpread({
52
- autoFocus: true,
53
- components: _objectSpread({
54
- DropdownIndicator: null
55
- }, components),
56
- customMenuItemOptions: {
57
- useTruncatedText: true
58
- },
59
- inlineMenu: true,
60
- inputValue: searchTerm,
61
- menuIsOpen: true,
62
- onChange: onSelectMenuItem,
63
- onFilterByInputText: handleFilterByText,
64
- onInputChange: handleInputChange,
65
- onKeyDown: handleKeyDown,
66
- options: options,
67
- returnValue: returnValue,
68
- valueProperty: "id",
69
- maxOptions: maxOptions,
70
- loading: loading
71
- }, extraListProps), dropdownFilterOptions));
72
- }
73
-
74
- const props = {
75
- /** callback after item gets selected */
76
- onSelectMenuItem: PropTypes.func.description('callback after item gets selected'),
77
-
78
- /** Object with custom components for react-select */
79
- components: PropTypes.shape({}).description('Object with custom components for react-select'),
80
-
81
- /** search term to filter for */
82
- searchTerm: PropTypes.string.description('search term to filter for'),
83
-
84
- /** item options */
85
- items: PropTypes.array.description('item options'),
86
-
87
- /** options */
88
- dropdownFilterOptions: PropTypes.shape({}).description('options'),
89
-
90
- /** Whether the combo box is has value to return or not */
91
- returnValue: PropTypes.bool.description('Whether the combo box is has value to return or not'),
92
-
93
- /** extra props to pass down to combo */
94
- extraListProps: PropTypes.shape({}).description('extra props to pass down to combo'),
95
-
96
- /** append search term as item on the list */
97
- appendTermInList: PropTypes.bool.description('append search term as item on the list'),
98
-
99
- /** maxoptions for combobox */
100
- maxOptions: PropTypes.number.description('maxoptions for combobox'),
101
-
102
- /** loading flag */
103
- loading: PropTypes.bool.description('loading flag')
104
- };
105
- const DSMenuSearchableListWithSchema = describe(SearchableList);
106
- DSMenuSearchableListWithSchema.propTypes = props;
107
-
108
- export { DSMenuSearchableListWithSchema, SearchableList as default };
@@ -1,97 +0,0 @@
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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(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; }
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,33 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'react';
3
- import { PropTypes, describe } from 'react-desc';
4
- import { aggregatedClasses } from '@elliemae/ds-classnames';
5
- import DSSeparator from '@elliemae/ds-separator';
6
- import styled from 'styled-components';
7
-
8
- var _DSSeparator;
9
- const blockName = 'menu-separator';
10
- const Li = /*#__PURE__*/styled.li.withConfig({
11
- componentId: "sc-aysbq3-0"
12
- })(["display:flex;align-items:flex-start;flex-direction:column;"]);
13
- const Title = aggregatedClasses('h5')(blockName, 'title');
14
-
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
- };
22
-
23
- const props = {
24
- /** menu separator h5 title */
25
- title: PropTypes.string.description('menu separator h5 title'),
26
-
27
- /** toggle separator on and off */
28
- showSeparator: PropTypes.bool.description('toggle separator on and off')
29
- };
30
- const DSMenuSeparatorWithSchema = describe(MenuSeparator);
31
- DSMenuSeparatorWithSchema.propTypes = props;
32
-
33
- export { DSMenuSeparatorWithSchema, MenuSeparator as default };
@@ -1,190 +0,0 @@
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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(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; }
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,62 +0,0 @@
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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(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; }
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,42 +0,0 @@
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';
6
- import { FixedSizeList } from 'react-window';
7
- import useHeightByAmountOfItems from './utils/useHeightByAmountOfItems.js';
8
-
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
19
-
20
- function VirtualMenuList(_ref2) {
21
- let {
22
- items,
23
- itemHeight = 32,
24
- amountItemsInWindow = 5,
25
- width,
26
- height
27
- } = _ref2;
28
- const computedListHeight = useHeightByAmountOfItems({
29
- amountItems: amountItemsInWindow,
30
- itemHeight,
31
- items
32
- });
33
- return /*#__PURE__*/_jsx(FixedSizeList, {
34
- height: height || computedListHeight,
35
- itemCount: items.length,
36
- itemData: items,
37
- itemSize: itemHeight,
38
- width: width
39
- }, void 0, MenuItem);
40
- }
41
-
42
- export { VirtualMenuList as default };
package/esm/index.js DELETED
@@ -1,13 +0,0 @@
1
- export { DSMenuWithSchema, Menu, Menu as default } from './Menu.js';
2
- export { DSMenuItemWithSchema } from './MenuItems/MenuItem.js';
3
- export { DSSubMenuWithSchema } from './MenuItems/SubMenu.js';
4
- export { DSMenuCheckboxGroupWithSchema } from './MenuItems/CheckboxGroup.js';
5
- export { DSMenuItemCheckeableWithSchema } from './MenuItems/MenuItemCheckable.js';
6
- export { DSMenuItemRadioWithSchema } from './MenuItems/MenuItemRadio.js';
7
- export { DSMenuRadioGroupWithSchema } from './MenuItems/RadioGroup.js';
8
- export { DSMenuSearchableGroupWithSchema } from './MenuItems/SearchableGroup.js';
9
- export { DSMenuSearchableListWithSchema } from './MenuItems/SearchableList.js';
10
- export { DSMenuSeparatorWithSchema } from './MenuItems/Separator.js';
11
- export { DSMenuSelectionGroupWithSchema } from './MenuItems/SelectionGroup.js';
12
- export { default as MenuCombobox } from './MenuCombobox.js';
13
- export { menuItemFactory, renderMenuItems } from './MenuItems/menuItemFactory.js';
@@ -1,18 +0,0 @@
1
- import { useMemo } from 'react';
2
-
3
- const calculateHeight = (itemHeight, amountItemsInWindow, itemsLength) => {
4
- const realAmountItemsInWindow = itemsLength < amountItemsInWindow ? itemsLength : amountItemsInWindow;
5
- return itemHeight * realAmountItemsInWindow;
6
- };
7
-
8
- function useHeightByAmountOfItems(_ref) {
9
- let {
10
- itemHeight,
11
- amountItems,
12
- items
13
- } = _ref;
14
- const calculatedHeight = useMemo(() => calculateHeight(itemHeight, amountItems, items.length), [amountItems, items]);
15
- return calculatedHeight;
16
- }
17
-
18
- export { useHeightByAmountOfItems as default };