@elliemae/ds-menu 2.1.1-rc.1 → 2.2.0-alpha.4

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 (100) hide show
  1. package/cjs/Menu.js +137 -181
  2. package/cjs/Menu.js.map +7 -0
  3. package/cjs/MenuCombobox.js +67 -53
  4. package/cjs/MenuCombobox.js.map +7 -0
  5. package/cjs/MenuContext.js +38 -11
  6. package/cjs/MenuContext.js.map +7 -0
  7. package/cjs/MenuExports.js +28 -0
  8. package/cjs/MenuExports.js.map +7 -0
  9. package/cjs/MenuItems/CheckboxGroup.js +49 -42
  10. package/cjs/MenuItems/CheckboxGroup.js.map +7 -0
  11. package/cjs/MenuItems/MenuItem.js +116 -163
  12. package/cjs/MenuItems/MenuItem.js.map +7 -0
  13. package/cjs/MenuItems/MenuItemCheckable.js +77 -108
  14. package/cjs/MenuItems/MenuItemCheckable.js.map +7 -0
  15. package/cjs/MenuItems/MenuItemCheckbox.js +47 -41
  16. package/cjs/MenuItems/MenuItemCheckbox.js.map +7 -0
  17. package/cjs/MenuItems/MenuItemRadio.js +50 -38
  18. package/cjs/MenuItems/MenuItemRadio.js.map +7 -0
  19. package/cjs/MenuItems/RadioGroup.js +48 -39
  20. package/cjs/MenuItems/RadioGroup.js.map +7 -0
  21. package/cjs/MenuItems/SearchableGroup.js +88 -92
  22. package/cjs/MenuItems/SearchableGroup.js.map +7 -0
  23. package/cjs/MenuItems/SearchableList.js +92 -95
  24. package/cjs/MenuItems/SearchableList.js.map +7 -0
  25. package/cjs/MenuItems/SelectionGroup.js +85 -90
  26. package/cjs/MenuItems/SelectionGroup.js.map +7 -0
  27. package/cjs/MenuItems/Separator.js +55 -40
  28. package/cjs/MenuItems/Separator.js.map +7 -0
  29. package/cjs/MenuItems/SubMenu.js +143 -160
  30. package/cjs/MenuItems/SubMenu.js.map +7 -0
  31. package/cjs/MenuItems/menuItemFactory.js +39 -71
  32. package/cjs/MenuItems/menuItemFactory.js.map +7 -0
  33. package/cjs/MenuItems/renderMenuItems.js +53 -0
  34. package/cjs/MenuItems/renderMenuItems.js.map +7 -0
  35. package/cjs/VirtualMenuList.js +69 -39
  36. package/cjs/VirtualMenuList.js.map +7 -0
  37. package/cjs/index.js +63 -36
  38. package/cjs/index.js.map +7 -0
  39. package/cjs/utils/useHeightByAmountOfItems.js +43 -14
  40. package/cjs/utils/useHeightByAmountOfItems.js.map +7 -0
  41. package/esm/Menu.js +91 -149
  42. package/esm/Menu.js.map +7 -0
  43. package/esm/MenuCombobox.js +38 -45
  44. package/esm/MenuCombobox.js.map +7 -0
  45. package/esm/MenuContext.js +9 -5
  46. package/esm/MenuContext.js.map +7 -0
  47. package/esm/MenuExports.js +3 -0
  48. package/esm/MenuExports.js.map +7 -0
  49. package/esm/MenuItems/CheckboxGroup.js +19 -31
  50. package/esm/MenuItems/CheckboxGroup.js.map +7 -0
  51. package/esm/MenuItems/MenuItem.js +84 -148
  52. package/esm/MenuItems/MenuItem.js.map +7 -0
  53. package/esm/MenuItems/MenuItemCheckable.js +47 -96
  54. package/esm/MenuItems/MenuItemCheckable.js.map +7 -0
  55. package/esm/MenuItems/MenuItemCheckbox.js +18 -33
  56. package/esm/MenuItems/MenuItemCheckbox.js.map +7 -0
  57. package/esm/MenuItems/MenuItemRadio.js +20 -28
  58. package/esm/MenuItems/MenuItemRadio.js.map +7 -0
  59. package/esm/MenuItems/RadioGroup.js +18 -28
  60. package/esm/MenuItems/RadioGroup.js.map +7 -0
  61. package/esm/MenuItems/SearchableGroup.js +53 -76
  62. package/esm/MenuItems/SearchableGroup.js.map +7 -0
  63. package/esm/MenuItems/SearchableList.js +59 -82
  64. package/esm/MenuItems/SearchableList.js.map +7 -0
  65. package/esm/MenuItems/SelectionGroup.js +54 -78
  66. package/esm/MenuItems/SelectionGroup.js.map +7 -0
  67. package/esm/MenuItems/Separator.js +26 -29
  68. package/esm/MenuItems/Separator.js.map +7 -0
  69. package/esm/MenuItems/SubMenu.js +107 -140
  70. package/esm/MenuItems/SubMenu.js.map +7 -0
  71. package/esm/MenuItems/menuItemFactory.js +11 -63
  72. package/esm/MenuItems/menuItemFactory.js.map +7 -0
  73. package/esm/MenuItems/renderMenuItems.js +24 -0
  74. package/esm/MenuItems/renderMenuItems.js.map +7 -0
  75. package/esm/VirtualMenuList.js +39 -32
  76. package/esm/VirtualMenuList.js.map +7 -0
  77. package/esm/index.js +34 -13
  78. package/esm/index.js.map +7 -0
  79. package/esm/utils/useHeightByAmountOfItems.js +13 -11
  80. package/esm/utils/useHeightByAmountOfItems.js.map +7 -0
  81. package/package.json +19 -11
  82. package/types/Menu.d.ts +3 -2
  83. package/types/MenuContext.d.ts +3 -2
  84. package/types/MenuExports.d.ts +1 -0
  85. package/types/MenuItems/CheckboxGroup.d.ts +5 -5
  86. package/types/MenuItems/MenuItem.d.ts +5 -5
  87. package/types/MenuItems/MenuItemCheckable.d.ts +15 -15
  88. package/types/MenuItems/MenuItemCheckbox.d.ts +3 -2
  89. package/types/MenuItems/MenuItemRadio.d.ts +5 -5
  90. package/types/MenuItems/RadioGroup.d.ts +5 -5
  91. package/types/MenuItems/SearchableGroup.d.ts +3 -3
  92. package/types/MenuItems/SearchableList.d.ts +16 -16
  93. package/types/MenuItems/SelectionGroup.d.ts +16 -16
  94. package/types/MenuItems/Separator.d.ts +2 -1
  95. package/types/MenuItems/SubMenu.d.ts +18 -18
  96. package/types/MenuItems/menuItemFactory.d.ts +2 -3
  97. package/types/MenuItems/renderMenuItems.d.ts +1 -0
  98. package/types/VirtualMenuList.d.ts +3 -1
  99. package/types/index.d.ts +3 -2
  100. package/types/utils/useHeightByAmountOfItems.d.ts +3 -1
@@ -1,58 +1,47 @@
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;
1
+ import * as React from "react";
2
+ import React2, { useCallback, useMemo, useState } from "react";
3
+ import { PropTypes, describe } from "react-desc";
4
+ import { uniqBy } from "@elliemae/ds-utilities";
5
+ import { DSComboBox2 as DSComboBox } from "@elliemae/ds-form/ComboBox/v2/Combobox";
6
+ const noop = () => {
7
+ };
8
+ const SearchableList = ({
9
+ onSelectMenuItem = noop,
10
+ components = {},
11
+ searchTerm: searchTermProp = "",
12
+ items = [],
13
+ dropdownFilterOptions = {},
14
+ returnValue,
15
+ extraListProps = {},
16
+ appendTermInList = false,
17
+ maxOptions = 10,
18
+ loading = false
19
+ }) => {
33
20
  const [searchTerm, setInputValue] = useState(searchTermProp);
34
21
  const handleInputChange = useCallback((value, args) => {
35
22
  const action = args ? args.action : null;
36
- if (action === 'input-blur' || action === 'menu-close') return;
23
+ if (action === "input-blur" || action === "menu-close")
24
+ return;
37
25
  setInputValue(value);
38
26
  }, [searchTerm]);
39
27
  const handleFilterByText = useCallback(() => {
40
- if (searchTerm) onSelectMenuItem(searchTerm);
28
+ if (searchTerm)
29
+ onSelectMenuItem(searchTerm);
41
30
  }, [searchTerm]);
42
- const handleKeyDown = useCallback(e => {
43
- if (e.key === 'ArrowRight') {
31
+ const handleKeyDown = useCallback((e) => {
32
+ if (e.key === "ArrowRight") {
44
33
  handleFilterByText();
45
34
  }
46
35
  }, [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({
36
+ const options = useMemo(() => searchTerm && appendTermInList ? uniqBy([
37
+ {
38
+ id: searchTerm,
39
+ label: searchTerm
40
+ }
41
+ ].concat(items), (item) => item.label) : items, [searchTerm, appendTermInList]);
42
+ return /* @__PURE__ */ React2.createElement(DSComboBox, {
52
43
  autoFocus: true,
53
- components: _objectSpread({
54
- DropdownIndicator: null
55
- }, components),
44
+ components: { DropdownIndicator: null, ...components },
56
45
  customMenuItemOptions: {
57
46
  useTruncatedText: true
58
47
  },
@@ -63,46 +52,34 @@ function SearchableList(_ref) {
63
52
  onFilterByInputText: handleFilterByText,
64
53
  onInputChange: handleInputChange,
65
54
  onKeyDown: handleKeyDown,
66
- options: options,
67
- returnValue: returnValue,
55
+ options,
56
+ returnValue,
68
57
  valueProperty: "id",
69
- maxOptions: maxOptions,
70
- loading: loading
71
- }, extraListProps), dropdownFilterOptions));
72
- }
73
-
58
+ maxOptions,
59
+ loading,
60
+ ...extraListProps,
61
+ ...dropdownFilterOptions
62
+ });
63
+ };
74
64
  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')
65
+ onSelectMenuItem: PropTypes.func.description("callback after item gets selected"),
66
+ components: PropTypes.shape({}).description("Object with custom components for react-select"),
67
+ searchTerm: PropTypes.string.description("search term to filter for"),
68
+ items: PropTypes.array.description("item options"),
69
+ dropdownFilterOptions: PropTypes.shape({}).description("options"),
70
+ returnValue: PropTypes.bool.description("Whether the combo box is has value to return or not"),
71
+ extraListProps: PropTypes.shape({}).description("extra props to pass down to combo"),
72
+ appendTermInList: PropTypes.bool.description("append search term as item on the list"),
73
+ maxOptions: PropTypes.number.description("maxoptions for combobox"),
74
+ loading: PropTypes.bool.description("loading flag")
104
75
  };
76
+ SearchableList.propTypes = props;
105
77
  const DSMenuSearchableListWithSchema = describe(SearchableList);
106
78
  DSMenuSearchableListWithSchema.propTypes = props;
107
-
108
- export { DSMenuSearchableListWithSchema, SearchableList as default };
79
+ var SearchableList_default = SearchableList;
80
+ export {
81
+ DSMenuSearchableListWithSchema,
82
+ SearchableList,
83
+ SearchableList_default as default
84
+ };
85
+ //# sourceMappingURL=SearchableList.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/SearchableList.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo, useState } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { uniqBy } from '@elliemae/ds-utilities';\nimport { DSComboBox2 as DSComboBox } from '@elliemae/ds-form/ComboBox/v2/Combobox';\n\nconst noop = () => {};\n\nconst SearchableList = ({\n onSelectMenuItem = noop,\n components = {},\n searchTerm: searchTermProp = '',\n items = [],\n dropdownFilterOptions = {},\n returnValue,\n extraListProps = {},\n appendTermInList = false,\n maxOptions = 10,\n loading = false,\n}) => {\n const [searchTerm, setInputValue] = useState(searchTermProp);\n\n const handleInputChange = useCallback(\n (value, args) => {\n const action = args ? args.action : null;\n if (action === 'input-blur' || action === 'menu-close') return;\n setInputValue(value);\n },\n [searchTerm],\n );\n\n const handleFilterByText = useCallback(() => {\n if (searchTerm) onSelectMenuItem(searchTerm);\n }, [searchTerm]);\n\n const handleKeyDown = useCallback(\n (e) => {\n if (e.key === 'ArrowRight') {\n handleFilterByText();\n }\n },\n [searchTerm],\n );\n\n const options = useMemo(\n () =>\n searchTerm && appendTermInList\n ? uniqBy(\n [\n {\n id: searchTerm,\n label: searchTerm,\n },\n ].concat(items),\n (item) => item.label,\n )\n : items,\n [searchTerm, appendTermInList],\n );\n\n return (\n <DSComboBox\n autoFocus\n components={{ DropdownIndicator: null, ...components }}\n customMenuItemOptions={{\n useTruncatedText: true,\n }}\n inlineMenu\n inputValue={searchTerm}\n menuIsOpen\n onChange={onSelectMenuItem}\n onFilterByInputText={handleFilterByText}\n onInputChange={handleInputChange}\n onKeyDown={handleKeyDown}\n options={options}\n returnValue={returnValue}\n valueProperty=\"id\"\n maxOptions={maxOptions}\n loading={loading}\n {...extraListProps}\n {...dropdownFilterOptions}\n />\n );\n};\n\nconst props = {\n /** callback after item gets selected */\n onSelectMenuItem: PropTypes.func.description('callback after item gets selected'),\n /** Object with custom components for react-select */\n components: PropTypes.shape({}).description('Object with custom components for react-select'),\n /** search term to filter for */\n searchTerm: PropTypes.string.description('search term to filter for'),\n /** item options */\n items: PropTypes.array.description('item options'),\n /** options */\n dropdownFilterOptions: PropTypes.shape({}).description('options'),\n /** Whether the combo box is has value to return or not */\n returnValue: PropTypes.bool.description('Whether the combo box is has value to return or not'),\n /** extra props to pass down to combo */\n extraListProps: PropTypes.shape({}).description('extra props to pass down to combo'),\n /** append search term as item on the list */\n appendTermInList: PropTypes.bool.description('append search term as item on the list'),\n /** maxoptions for combobox */\n maxOptions: PropTypes.number.description('maxoptions for combobox'),\n /** loading flag */\n loading: PropTypes.bool.description('loading flag'),\n};\n\nSearchableList.propTypes = props;\n\nconst DSMenuSearchableListWithSchema = describe(SearchableList);\n\nDSMenuSearchableListWithSchema.propTypes = props;\n\nexport { DSMenuSearchableListWithSchema, SearchableList };\nexport default SearchableList;\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,OAAO,MAAM;AAAA;AAEnB,MAAM,iBAAiB,CAAC;AAAA,EACtB,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,YAAY,iBAAiB;AAAA,EAC7B,QAAQ;AAAA,EACR,wBAAwB;AAAA,EACxB;AAAA,EACA,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,UAAU;AAAA,MACN;AACJ,QAAM,CAAC,YAAY,iBAAiB,SAAS;AAE7C,QAAM,oBAAoB,YACxB,CAAC,OAAO,SAAS;AACf,UAAM,SAAS,OAAO,KAAK,SAAS;AACpC,QAAI,WAAW,gBAAgB,WAAW;AAAc;AACxD,kBAAc;AAAA,KAEhB,CAAC;AAGH,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI;AAAY,uBAAiB;AAAA,KAChC,CAAC;AAEJ,QAAM,gBAAgB,YACpB,CAAC,MAAM;AACL,QAAI,EAAE,QAAQ,cAAc;AAC1B;AAAA;AAAA,KAGJ,CAAC;AAGH,QAAM,UAAU,QACd,MACE,cAAc,mBACV,OACE;AAAA,IACE;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA;AAAA,IAET,OAAO,QACT,CAAC,SAAS,KAAK,SAEjB,OACN,CAAC,YAAY;AAGf,SACE,qCAAC,YAAD;AAAA,IACE,WAAS;AAAA,IACT,YAAY,EAAE,mBAAmB,SAAS;AAAA,IAC1C,uBAAuB;AAAA,MACrB,kBAAkB;AAAA;AAAA,IAEpB,YAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAU;AAAA,IACV,UAAU;AAAA,IACV,qBAAqB;AAAA,IACrB,eAAe;AAAA,IACf,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,eAAc;AAAA,IACd;AAAA,IACA;AAAA,OACI;AAAA,OACA;AAAA;AAAA;AAKV,MAAM,QAAQ;AAAA,EAEZ,kBAAkB,UAAU,KAAK,YAAY;AAAA,EAE7C,YAAY,UAAU,MAAM,IAAI,YAAY;AAAA,EAE5C,YAAY,UAAU,OAAO,YAAY;AAAA,EAEzC,OAAO,UAAU,MAAM,YAAY;AAAA,EAEnC,uBAAuB,UAAU,MAAM,IAAI,YAAY;AAAA,EAEvD,aAAa,UAAU,KAAK,YAAY;AAAA,EAExC,gBAAgB,UAAU,MAAM,IAAI,YAAY;AAAA,EAEhD,kBAAkB,UAAU,KAAK,YAAY;AAAA,EAE7C,YAAY,UAAU,OAAO,YAAY;AAAA,EAEzC,SAAS,UAAU,KAAK,YAAY;AAAA;AAGtC,eAAe,YAAY;AAE3B,MAAM,iCAAiC,SAAS;AAEhD,+BAA+B,YAAY;AAG3C,IAAO,yBAAQ;",
6
+ "names": []
7
+ }
@@ -1,45 +1,31 @@
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
-
1
+ import * as React from "react";
2
+ import React2, { useMemo } from "react";
3
+ import { PropTypes, describe } from "react-desc";
4
+ import { useCheckableGroup } from "@elliemae/ds-shared/CheckableGroup";
5
+ import { SearchableGroup } from "./SearchableGroup";
6
+ import { registerMenuItem, menuItemFactory } from "./menuItemFactory";
7
+ import { VirtualMenuList } from "../VirtualMenuList";
21
8
  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), {}, {
9
+ const SelectionGroup = ({
10
+ multi = false,
11
+ searchable = false,
12
+ focusOnOpen = false,
13
+ onSelect = noop,
14
+ children,
15
+ items = void 0,
16
+ active = multi ? [] : "",
17
+ width,
18
+ height,
19
+ maxOptions = 5
20
+ }) => {
21
+ const renderedItems = useMemo(() => items && items.map((item) => {
22
+ const Component = menuItemFactory(multi ? "checkbox" : "radio");
23
+ return /* @__PURE__ */ React2.createElement(Component, {
24
+ ...item,
39
25
  key: item.name || item.id || item.key,
40
- item: item,
26
+ item,
41
27
  name: item.id || item.name
42
- }));
28
+ });
43
29
  }), [items]);
44
30
  const decoratedGroupChildren = useCheckableGroup({
45
31
  children: renderedItems || children,
@@ -47,51 +33,41 @@ function SelectionGroup(_ref) {
47
33
  active,
48
34
  onCheck: onSelect
49
35
  });
50
-
51
36
  if (searchable) {
52
- return /*#__PURE__*/_jsx(SearchableGroup, {
53
- focusOnOpen: focusOnOpen,
54
- height: height,
55
- items: items,
56
- width: width
57
- }, void 0, decoratedGroupChildren);
37
+ return /* @__PURE__ */ React2.createElement(SearchableGroup, {
38
+ focusOnOpen,
39
+ height,
40
+ items,
41
+ width
42
+ }, decoratedGroupChildren);
58
43
  }
59
-
60
- return /*#__PURE__*/_jsx(VirtualMenuList, {
61
- height: height,
44
+ return /* @__PURE__ */ React2.createElement(VirtualMenuList, {
45
+ height,
62
46
  items: decoratedGroupChildren,
63
- width: width,
47
+ width,
64
48
  amountItemsInWindow: maxOptions
65
49
  });
66
- }
67
-
50
+ };
68
51
  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')
52
+ multi: PropTypes.bool.description("toggle on multi select"),
53
+ searchable: PropTypes.bool.description("toggle on searchable behavior"),
54
+ focusOnOpen: PropTypes.bool.description("toggle to focus component on open"),
55
+ onSelect: PropTypes.func.description("callback that triggers when select happens"),
56
+ children: PropTypes.node.description(""),
57
+ items: PropTypes.array.description("selection group items"),
58
+ active: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).description("array of values for multi and string for single selection"),
59
+ width: PropTypes.number.description("selection group width"),
60
+ height: PropTypes.number.description("selection group height")
93
61
  };
62
+ SelectionGroup.propTypes = props;
63
+ registerMenuItem("selectiongroup", SelectionGroup);
64
+ registerMenuItem("SelectionGroup", SelectionGroup);
94
65
  const DSMenuSelectionGroupWithSchema = describe(SelectionGroup);
95
66
  DSMenuSelectionGroupWithSchema.propTypes = props;
96
-
97
- export { DSMenuSelectionGroupWithSchema, SelectionGroup as default };
67
+ var SelectionGroup_default = SelectionGroup;
68
+ export {
69
+ DSMenuSelectionGroupWithSchema,
70
+ SelectionGroup,
71
+ SelectionGroup_default as default
72
+ };
73
+ //# sourceMappingURL=SelectionGroup.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/SelectionGroup.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { useCheckableGroup } from '@elliemae/ds-shared/CheckableGroup';\nimport { SearchableGroup } from './SearchableGroup';\nimport { registerMenuItem, menuItemFactory } from './menuItemFactory';\nimport { VirtualMenuList } from '../VirtualMenuList';\n\nconst noop = () => null;\n\nconst SelectionGroup = ({\n multi = false,\n searchable = false,\n focusOnOpen = false,\n onSelect = noop,\n children,\n items = undefined,\n active = multi ? [] : '',\n width,\n height,\n maxOptions = 5,\n}) => {\n const renderedItems = useMemo(\n () =>\n items &&\n items.map((item) => {\n const Component = menuItemFactory(multi ? 'checkbox' : 'radio');\n return <Component {...item} key={item.name || item.id || item.key} item={item} name={item.id || item.name} />;\n }),\n [items],\n );\n const decoratedGroupChildren = useCheckableGroup({\n children: renderedItems || children,\n multi,\n active,\n onCheck: onSelect,\n });\n\n if (searchable) {\n return (\n <SearchableGroup focusOnOpen={focusOnOpen} height={height} items={items} width={width}>\n {decoratedGroupChildren}\n </SearchableGroup>\n );\n }\n return (\n <VirtualMenuList height={height} items={decoratedGroupChildren} width={width} amountItemsInWindow={maxOptions} />\n );\n};\n\nconst props = {\n /** toggle on multi select */\n multi: PropTypes.bool.description('toggle on multi select'),\n /** toggle on searchable behavior */\n searchable: PropTypes.bool.description('toggle on searchable behavior'),\n /** toggle to focus component on open */\n focusOnOpen: PropTypes.bool.description('toggle to focus component on open'),\n /** callback that triggers when select happens */\n onSelect: PropTypes.func.description('callback that triggers when select happens'),\n children: PropTypes.node.description(''),\n /** selection group items */\n items: PropTypes.array.description('selection group items'),\n /** array of values for multi and string for single selection */\n active: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).description(\n 'array of values for multi and string for single selection',\n ),\n /** selection group width */\n width: PropTypes.number.description('selection group width'),\n /** selection group height */\n height: PropTypes.number.description('selection group height'),\n};\n\nSelectionGroup.propTypes = props;\nregisterMenuItem('selectiongroup', SelectionGroup);\nregisterMenuItem('SelectionGroup', SelectionGroup);\n\nconst DSMenuSelectionGroupWithSchema = describe(SelectionGroup);\nDSMenuSelectionGroupWithSchema.propTypes = props;\n\nexport { DSMenuSelectionGroupWithSchema, SelectionGroup };\nexport default SelectionGroup;\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,OAAO,MAAM;AAEnB,MAAM,iBAAiB,CAAC;AAAA,EACtB,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,EACR,SAAS,QAAQ,KAAK;AAAA,EACtB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,MACT;AACJ,QAAM,gBAAgB,QACpB,MACE,SACA,MAAM,IAAI,CAAC,SAAS;AAClB,UAAM,YAAY,gBAAgB,QAAQ,aAAa;AACvD,WAAO,qCAAC,WAAD;AAAA,SAAe;AAAA,MAAM,KAAK,KAAK,QAAQ,KAAK,MAAM,KAAK;AAAA,MAAK;AAAA,MAAY,MAAM,KAAK,MAAM,KAAK;AAAA;AAAA,MAEzG,CAAC;AAEH,QAAM,yBAAyB,kBAAkB;AAAA,IAC/C,UAAU,iBAAiB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA,SAAS;AAAA;AAGX,MAAI,YAAY;AACd,WACE,qCAAC,iBAAD;AAAA,MAAiB;AAAA,MAA0B;AAAA,MAAgB;AAAA,MAAc;AAAA,OACtE;AAAA;AAIP,SACE,qCAAC,iBAAD;AAAA,IAAiB;AAAA,IAAgB,OAAO;AAAA,IAAwB;AAAA,IAAc,qBAAqB;AAAA;AAAA;AAIvG,MAAM,QAAQ;AAAA,EAEZ,OAAO,UAAU,KAAK,YAAY;AAAA,EAElC,YAAY,UAAU,KAAK,YAAY;AAAA,EAEvC,aAAa,UAAU,KAAK,YAAY;AAAA,EAExC,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,UAAU,UAAU,KAAK,YAAY;AAAA,EAErC,OAAO,UAAU,MAAM,YAAY;AAAA,EAEnC,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,YAC/D;AAAA,EAGF,OAAO,UAAU,OAAO,YAAY;AAAA,EAEpC,QAAQ,UAAU,OAAO,YAAY;AAAA;AAGvC,eAAe,YAAY;AAC3B,iBAAiB,kBAAkB;AACnC,iBAAiB,kBAAkB;AAEnC,MAAM,iCAAiC,SAAS;AAChD,+BAA+B,YAAY;AAG3C,IAAO,yBAAQ;",
6
+ "names": []
7
+ }
@@ -1,33 +1,30 @@
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
-
1
+ import * as React from "react";
2
+ import React2 from "react";
3
+ import { describe, PropTypes } from "react-desc";
4
+ import { aggregatedClasses } from "@elliemae/ds-classnames";
5
+ import { DSSeparator } from "@elliemae/ds-separator";
6
+ import styled from "styled-components";
7
+ import { registerMenuItem } from "./menuItemFactory";
8
+ const blockName = "menu-separator";
9
+ const Li = styled.li`
10
+ display: flex;
11
+ align-items: flex-start;
12
+ flex-direction: column;
13
+ `;
14
+ const Title = aggregatedClasses("h5")(blockName, "title");
15
+ const MenuSeparator = ({ title, showSeparator = true }) => /* @__PURE__ */ React2.createElement(Li, null, showSeparator && /* @__PURE__ */ React2.createElement(DSSeparator, null), title && /* @__PURE__ */ React2.createElement(Title, null, title));
23
16
  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')
17
+ title: PropTypes.string.description("menu separator h5 title"),
18
+ showSeparator: PropTypes.bool.description("toggle separator on and off")
29
19
  };
20
+ MenuSeparator.propTypes = props;
21
+ registerMenuItem("separator", MenuSeparator);
30
22
  const DSMenuSeparatorWithSchema = describe(MenuSeparator);
31
23
  DSMenuSeparatorWithSchema.propTypes = props;
32
-
33
- export { DSMenuSeparatorWithSchema, MenuSeparator as default };
24
+ var Separator_default = MenuSeparator;
25
+ export {
26
+ DSMenuSeparatorWithSchema,
27
+ MenuSeparator,
28
+ Separator_default as default
29
+ };
30
+ //# sourceMappingURL=Separator.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/Separator.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSSeparator } from '@elliemae/ds-separator';\nimport styled from 'styled-components';\nimport { registerMenuItem } from './menuItemFactory';\n\nconst blockName = 'menu-separator';\nconst Li = styled.li`\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n`;\n\nconst Title = aggregatedClasses('h5')(blockName, 'title');\nconst MenuSeparator = ({ title, showSeparator = true }) => (\n <Li>\n {showSeparator && <DSSeparator />}\n {title && <Title>{title}</Title>}\n </Li>\n);\n\nconst props = {\n /** menu separator h5 title */\n title: PropTypes.string.description('menu separator h5 title'),\n /** toggle separator on and off */\n showSeparator: PropTypes.bool.description('toggle separator on and off'),\n};\n\nMenuSeparator.propTypes = props;\nregisterMenuItem('separator', MenuSeparator);\n\nconst DSMenuSeparatorWithSchema = describe(MenuSeparator);\nDSMenuSeparatorWithSchema.propTypes = props;\n\nexport { DSMenuSeparatorWithSchema, MenuSeparator };\nexport default MenuSeparator;\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAClB,MAAM,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,QAAQ,kBAAkB,MAAM,WAAW;AACjD,MAAM,gBAAgB,CAAC,EAAE,OAAO,gBAAgB,WAC9C,qCAAC,IAAD,MACG,iBAAiB,qCAAC,aAAD,OACjB,SAAS,qCAAC,OAAD,MAAQ;AAItB,MAAM,QAAQ;AAAA,EAEZ,OAAO,UAAU,OAAO,YAAY;AAAA,EAEpC,eAAe,UAAU,KAAK,YAAY;AAAA;AAG5C,cAAc,YAAY;AAC1B,iBAAiB,aAAa;AAE9B,MAAM,4BAA4B,SAAS;AAC3C,0BAA0B,YAAY;AAGtC,IAAO,oBAAQ;",
6
+ "names": []
7
+ }