@elliemae/ds-menu 2.2.0-alpha.4 → 3.0.0-next.2
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.
- package/cjs/Menu.js +181 -137
- package/cjs/MenuCombobox.js +53 -67
- package/cjs/MenuContext.js +11 -38
- package/cjs/MenuItems/CheckboxGroup.js +42 -49
- package/cjs/MenuItems/MenuItem.js +163 -116
- package/cjs/MenuItems/MenuItemCheckable.js +108 -77
- package/cjs/MenuItems/MenuItemCheckbox.js +41 -47
- package/cjs/MenuItems/MenuItemRadio.js +38 -50
- package/cjs/MenuItems/RadioGroup.js +39 -48
- package/cjs/MenuItems/SearchableGroup.js +92 -88
- package/cjs/MenuItems/SearchableList.js +95 -92
- package/cjs/MenuItems/SelectionGroup.js +90 -85
- package/cjs/MenuItems/Separator.js +40 -55
- package/cjs/MenuItems/SubMenu.js +160 -143
- package/cjs/MenuItems/menuItemFactory.js +68 -38
- package/cjs/VirtualMenuList.js +39 -69
- package/cjs/index.js +36 -63
- package/cjs/utils/useHeightByAmountOfItems.js +14 -43
- package/esm/Menu.js +149 -91
- package/esm/MenuCombobox.js +45 -38
- package/esm/MenuContext.js +5 -9
- package/esm/MenuItems/CheckboxGroup.js +31 -19
- package/esm/MenuItems/MenuItem.js +148 -84
- package/esm/MenuItems/MenuItemCheckable.js +96 -47
- package/esm/MenuItems/MenuItemCheckbox.js +33 -18
- package/esm/MenuItems/MenuItemRadio.js +28 -20
- package/esm/MenuItems/RadioGroup.js +28 -18
- package/esm/MenuItems/SearchableGroup.js +76 -53
- package/esm/MenuItems/SearchableList.js +82 -59
- package/esm/MenuItems/SelectionGroup.js +78 -54
- package/esm/MenuItems/Separator.js +29 -26
- package/esm/MenuItems/SubMenu.js +140 -107
- package/esm/MenuItems/menuItemFactory.js +60 -10
- package/esm/VirtualMenuList.js +32 -39
- package/esm/index.js +13 -34
- package/esm/utils/useHeightByAmountOfItems.js +11 -13
- package/package.json +11 -19
- package/types/Menu.d.ts +2 -3
- package/types/MenuContext.d.ts +2 -3
- package/types/MenuItems/CheckboxGroup.d.ts +5 -5
- package/types/MenuItems/MenuItem.d.ts +5 -5
- package/types/MenuItems/MenuItemCheckable.d.ts +15 -15
- package/types/MenuItems/MenuItemCheckbox.d.ts +2 -3
- package/types/MenuItems/MenuItemRadio.d.ts +5 -5
- package/types/MenuItems/RadioGroup.d.ts +5 -5
- package/types/MenuItems/SearchableGroup.d.ts +3 -3
- package/types/MenuItems/SearchableList.d.ts +16 -16
- package/types/MenuItems/SelectionGroup.d.ts +16 -16
- package/types/MenuItems/Separator.d.ts +1 -2
- package/types/MenuItems/SubMenu.d.ts +18 -18
- package/types/MenuItems/menuItemFactory.d.ts +3 -2
- package/types/VirtualMenuList.d.ts +1 -3
- package/types/index.d.ts +2 -3
- package/types/utils/useHeightByAmountOfItems.d.ts +1 -3
- package/cjs/Menu.js.map +0 -7
- package/cjs/MenuCombobox.js.map +0 -7
- package/cjs/MenuContext.js.map +0 -7
- package/cjs/MenuExports.js +0 -28
- package/cjs/MenuExports.js.map +0 -7
- package/cjs/MenuItems/CheckboxGroup.js.map +0 -7
- package/cjs/MenuItems/MenuItem.js.map +0 -7
- package/cjs/MenuItems/MenuItemCheckable.js.map +0 -7
- package/cjs/MenuItems/MenuItemCheckbox.js.map +0 -7
- package/cjs/MenuItems/MenuItemRadio.js.map +0 -7
- package/cjs/MenuItems/RadioGroup.js.map +0 -7
- package/cjs/MenuItems/SearchableGroup.js.map +0 -7
- package/cjs/MenuItems/SearchableList.js.map +0 -7
- package/cjs/MenuItems/SelectionGroup.js.map +0 -7
- package/cjs/MenuItems/Separator.js.map +0 -7
- package/cjs/MenuItems/SubMenu.js.map +0 -7
- package/cjs/MenuItems/menuItemFactory.js.map +0 -7
- package/cjs/MenuItems/renderMenuItems.js +0 -53
- package/cjs/MenuItems/renderMenuItems.js.map +0 -7
- package/cjs/VirtualMenuList.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/cjs/utils/useHeightByAmountOfItems.js.map +0 -7
- package/esm/Menu.js.map +0 -7
- package/esm/MenuCombobox.js.map +0 -7
- package/esm/MenuContext.js.map +0 -7
- package/esm/MenuExports.js +0 -3
- package/esm/MenuExports.js.map +0 -7
- package/esm/MenuItems/CheckboxGroup.js.map +0 -7
- package/esm/MenuItems/MenuItem.js.map +0 -7
- package/esm/MenuItems/MenuItemCheckable.js.map +0 -7
- package/esm/MenuItems/MenuItemCheckbox.js.map +0 -7
- package/esm/MenuItems/MenuItemRadio.js.map +0 -7
- package/esm/MenuItems/RadioGroup.js.map +0 -7
- package/esm/MenuItems/SearchableGroup.js.map +0 -7
- package/esm/MenuItems/SearchableList.js.map +0 -7
- package/esm/MenuItems/SelectionGroup.js.map +0 -7
- package/esm/MenuItems/Separator.js.map +0 -7
- package/esm/MenuItems/SubMenu.js.map +0 -7
- package/esm/MenuItems/menuItemFactory.js.map +0 -7
- package/esm/MenuItems/renderMenuItems.js +0 -24
- package/esm/MenuItems/renderMenuItems.js.map +0 -7
- package/esm/VirtualMenuList.js.map +0 -7
- package/esm/index.js.map +0 -7
- package/esm/utils/useHeightByAmountOfItems.js.map +0 -7
- package/types/MenuExports.d.ts +0 -1
- package/types/MenuItems/renderMenuItems.d.ts +0 -1
|
@@ -1,53 +1,41 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
})
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
DSMenuItemRadioWithSchema: () => DSMenuItemRadioWithSchema,
|
|
31
|
-
MenuItemRadio: () => MenuItemRadio,
|
|
32
|
-
default: () => MenuItemRadio_default
|
|
33
|
-
});
|
|
34
|
-
var React = __toESM(require("react"));
|
|
35
|
-
var import_react = __toESM(require("react"));
|
|
36
|
-
var import_react_desc = require("react-desc");
|
|
37
|
-
var import_MenuItemCheckable = require("./MenuItemCheckable");
|
|
38
|
-
var import_menuItemFactory = require("./menuItemFactory");
|
|
39
|
-
const MenuItemRadio = (props2) => /* @__PURE__ */ import_react.default.createElement(import_MenuItemCheckable.MenuItemCheckable, {
|
|
40
|
-
...props2,
|
|
41
|
-
role: "menuitemradio"
|
|
42
|
-
});
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
10
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
11
|
+
require('react');
|
|
12
|
+
var reactDesc = require('react-desc');
|
|
13
|
+
var MenuItemCheckable = require('./MenuItemCheckable.js');
|
|
14
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
15
|
+
|
|
16
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
17
|
+
|
|
18
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
19
|
+
|
|
20
|
+
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; }
|
|
21
|
+
|
|
22
|
+
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; }
|
|
23
|
+
|
|
24
|
+
function MenuItemRadio(props) {
|
|
25
|
+
return /*#__PURE__*/jsxRuntime.jsx(MenuItemCheckable["default"], _objectSpread(_objectSpread({}, props), {}, {
|
|
26
|
+
role: "menuitemradio"
|
|
27
|
+
}));
|
|
28
|
+
}
|
|
29
|
+
|
|
43
30
|
const props = {
|
|
44
|
-
|
|
45
|
-
|
|
31
|
+
/** Whether the item is checked or not */
|
|
32
|
+
checked: reactDesc.PropTypes.bool.description('Whether the item is checked or not'),
|
|
33
|
+
|
|
34
|
+
/** A custom item when the item is checked */
|
|
35
|
+
checkIcon: reactDesc.PropTypes.element.description('A custom item when the item is checked')
|
|
46
36
|
};
|
|
47
|
-
|
|
48
|
-
(0, import_menuItemFactory.registerMenuItem)("radio", MenuItemRadio);
|
|
49
|
-
const DSMenuItemRadioWithSchema = (0, import_react_desc.describe)(import_MenuItemCheckable.MenuItemCheckable);
|
|
37
|
+
const DSMenuItemRadioWithSchema = reactDesc.describe(MenuItemCheckable["default"]);
|
|
50
38
|
DSMenuItemRadioWithSchema.propTypes = props;
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
39
|
+
|
|
40
|
+
exports.DSMenuItemRadioWithSchema = DSMenuItemRadioWithSchema;
|
|
41
|
+
exports["default"] = MenuItemRadio;
|
|
@@ -1,51 +1,42 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
RadioGroup: () => RadioGroup,
|
|
32
|
-
default: () => RadioGroup_default
|
|
33
|
-
});
|
|
34
|
-
var React = __toESM(require("react"));
|
|
35
|
-
var import_react = __toESM(require("react"));
|
|
36
|
-
var import_react_desc = require("react-desc");
|
|
37
|
-
var import_CheckableGroup = require("@elliemae/ds-shared/CheckableGroup");
|
|
38
|
-
const RadioGroup = (props2) => /* @__PURE__ */ import_react.default.createElement(import_CheckableGroup.CheckableGroup, {
|
|
39
|
-
...props2,
|
|
40
|
-
multi: false
|
|
41
|
-
});
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
10
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
11
|
+
require('react');
|
|
12
|
+
var reactDesc = require('react-desc');
|
|
13
|
+
var CheckableGroup = require('@elliemae/ds-shared/CheckableGroup');
|
|
14
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
15
|
+
|
|
16
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
17
|
+
|
|
18
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
19
|
+
var CheckableGroup__default = /*#__PURE__*/_interopDefaultLegacy(CheckableGroup);
|
|
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__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; }
|
|
24
|
+
|
|
25
|
+
function RadioGroup(props) {
|
|
26
|
+
return /*#__PURE__*/jsxRuntime.jsx(CheckableGroup__default["default"], _objectSpread(_objectSpread({}, props), {}, {
|
|
27
|
+
multi: false
|
|
28
|
+
}));
|
|
29
|
+
}
|
|
30
|
+
|
|
42
31
|
const props = {
|
|
43
|
-
|
|
44
|
-
|
|
32
|
+
/* The item selected */
|
|
33
|
+
active: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('the item selected'),
|
|
34
|
+
|
|
35
|
+
/* Handler when a user checks an item */
|
|
36
|
+
onCheck: reactDesc.PropTypes.func.description('Handler when a user checks an item')
|
|
45
37
|
};
|
|
46
|
-
|
|
47
|
-
const DSMenuRadioGroupWithSchema = (0, import_react_desc.describe)(RadioGroup);
|
|
38
|
+
const DSMenuRadioGroupWithSchema = reactDesc.describe(RadioGroup);
|
|
48
39
|
DSMenuRadioGroupWithSchema.propTypes = props;
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
40
|
+
|
|
41
|
+
exports.DSMenuRadioGroupWithSchema = DSMenuRadioGroupWithSchema;
|
|
42
|
+
exports["default"] = RadioGroup;
|
|
@@ -1,97 +1,101 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
var import_MenuContext = require("../MenuContext");
|
|
42
|
-
const SearchBoxWrapper = (0, import_ds_classnames.aggregatedClasses)("div")("menu-search-group", "search-wrapper");
|
|
43
|
-
const NoOptionsWrapper = (0, import_ds_classnames.aggregatedClasses)("div")("menu-search-group", "no-options");
|
|
44
|
-
const SearchableGroup = ({
|
|
45
|
-
children,
|
|
46
|
-
amountItemsInWindow = 5,
|
|
47
|
-
searchTerm: searchTermProp = "",
|
|
48
|
-
noOptionsText = "No options",
|
|
49
|
-
height,
|
|
50
|
-
width,
|
|
51
|
-
focusOnOpen = false
|
|
52
|
-
}) => {
|
|
53
|
-
const searchRef = (0, import_react.useRef)(null);
|
|
54
|
-
const [searchTerm, setSearchTerm] = (0, import_react.useState)(searchTermProp);
|
|
55
|
-
(0, import_react.useEffect)(() => {
|
|
56
|
-
if (searchRef.current)
|
|
57
|
-
searchRef.current.focus();
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
7
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
10
|
+
var React = require('react');
|
|
11
|
+
var dsClassnames = require('@elliemae/ds-classnames');
|
|
12
|
+
var FocusGroup = require('@elliemae/ds-shared/FocusGroup');
|
|
13
|
+
var DSSearchBox = require('@elliemae/ds-form/SearchBox');
|
|
14
|
+
var reactDesc = require('react-desc');
|
|
15
|
+
var VirtualMenuList = require('../VirtualMenuList.js');
|
|
16
|
+
var MenuContext = require('../MenuContext.js');
|
|
17
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
18
|
+
|
|
19
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
20
|
+
|
|
21
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
22
|
+
var DSSearchBox__default = /*#__PURE__*/_interopDefaultLegacy(DSSearchBox);
|
|
23
|
+
|
|
24
|
+
const SearchBoxWrapper = dsClassnames.aggregatedClasses('div')('menu-search-group', 'search-wrapper');
|
|
25
|
+
const NoOptionsWrapper = dsClassnames.aggregatedClasses('div')('menu-search-group', 'no-options');
|
|
26
|
+
|
|
27
|
+
function SearchableGroup(_ref) {
|
|
28
|
+
let {
|
|
29
|
+
children,
|
|
30
|
+
amountItemsInWindow = 5,
|
|
31
|
+
searchTerm: searchTermProp = '',
|
|
32
|
+
noOptionsText = 'No options',
|
|
33
|
+
height,
|
|
34
|
+
width,
|
|
35
|
+
focusOnOpen = false
|
|
36
|
+
} = _ref;
|
|
37
|
+
const searchRef = React.useRef(null);
|
|
38
|
+
const [searchTerm, setSearchTerm] = React.useState(searchTermProp);
|
|
39
|
+
React.useEffect(() => {
|
|
40
|
+
if (searchRef.current) searchRef.current.focus();
|
|
58
41
|
}, []);
|
|
59
|
-
const {
|
|
60
|
-
|
|
42
|
+
const {
|
|
43
|
+
visible
|
|
44
|
+
} = React.useContext(MenuContext) || {};
|
|
45
|
+
React.useEffect(() => {
|
|
61
46
|
if (focusOnOpen && visible) {
|
|
62
47
|
setTimeout(() => {
|
|
63
|
-
if (searchRef.current)
|
|
64
|
-
searchRef.current.focus();
|
|
48
|
+
if (searchRef.current) searchRef.current.focus();
|
|
65
49
|
}, 0);
|
|
66
50
|
}
|
|
67
51
|
}, [focusOnOpen, visible]);
|
|
68
|
-
const filteredChildren =
|
|
69
|
-
return
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
}
|
|
52
|
+
const filteredChildren = React.useMemo(() => children.filter(child => !searchTerm || child.props.label.toLowerCase().startsWith(searchTerm.toLowerCase())), [children, searchTerm]);
|
|
53
|
+
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
54
|
+
children: [/*#__PURE__*/_jsx__default["default"](SearchBoxWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSSearchBox__default["default"], {
|
|
55
|
+
innerRef: searchRef,
|
|
56
|
+
onSearch: _ref2 => {
|
|
57
|
+
let {
|
|
58
|
+
value
|
|
59
|
+
} = _ref2;
|
|
60
|
+
return setSearchTerm(value);
|
|
61
|
+
},
|
|
62
|
+
searchOnEnter: false,
|
|
63
|
+
showIcon: false,
|
|
64
|
+
value: searchTerm
|
|
65
|
+
})), !filteredChildren.length && /*#__PURE__*/_jsx__default["default"](NoOptionsWrapper, {}, void 0, noOptionsText), /*#__PURE__*/_jsx__default["default"](VirtualMenuList, {
|
|
66
|
+
amountItemsInWindow: amountItemsInWindow,
|
|
67
|
+
height: height,
|
|
68
|
+
items: filteredChildren,
|
|
69
|
+
width: width
|
|
70
|
+
})]
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
|
|
82
74
|
const props = {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
75
|
+
/** The amount of items that are going to be rendered in the group */
|
|
76
|
+
amountItemsInWindow: reactDesc.PropTypes.number.description('The amount of items that are going to be rendered in the group'),
|
|
77
|
+
|
|
78
|
+
/** A search term */
|
|
79
|
+
searchTerm: reactDesc.PropTypes.string.description('A search term'),
|
|
80
|
+
|
|
81
|
+
/** Text to show when there's no options to show */
|
|
82
|
+
noOptionsText: reactDesc.PropTypes.string.description("Text to show when there's no options to show"),
|
|
83
|
+
|
|
84
|
+
/** array of children for search list */
|
|
85
|
+
children: reactDesc.PropTypes.array.description('array of children for search list'),
|
|
86
|
+
|
|
87
|
+
/** height for virtual list wrapper */
|
|
88
|
+
height: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('height for virtual list wrapper'),
|
|
89
|
+
|
|
90
|
+
/** width for virtual list wrapper */
|
|
91
|
+
width: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('width for virtual list wrapper'),
|
|
92
|
+
|
|
93
|
+
/** weather to focus on searchable group on open */
|
|
94
|
+
focusOnOpen: reactDesc.PropTypes.bool.description('weather to focus on searchable group on open')
|
|
90
95
|
};
|
|
91
|
-
|
|
92
|
-
const DSMenuSearchableGroupWithSchema = (0, import_react_desc.describe)(SearchableGroup);
|
|
96
|
+
const DSMenuSearchableGroupWithSchema = reactDesc.describe(SearchableGroup);
|
|
93
97
|
DSMenuSearchableGroupWithSchema.propTypes = props;
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
+
var SearchableGroup$1 = FocusGroup.focusGroupManagerHoc(SearchableGroup);
|
|
99
|
+
|
|
100
|
+
exports.DSMenuSearchableGroupWithSchema = DSMenuSearchableGroupWithSchema;
|
|
101
|
+
exports["default"] = SearchableGroup$1;
|
|
@@ -1,80 +1,66 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
};
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
components = {},
|
|
44
|
-
searchTerm: searchTermProp = "",
|
|
45
|
-
items = [],
|
|
46
|
-
dropdownFilterOptions = {},
|
|
47
|
-
returnValue,
|
|
48
|
-
extraListProps = {},
|
|
49
|
-
appendTermInList = false,
|
|
50
|
-
maxOptions = 10,
|
|
51
|
-
loading = false
|
|
52
|
-
}) => {
|
|
53
|
-
const [searchTerm, setInputValue] = (0, import_react.useState)(searchTermProp);
|
|
54
|
-
const handleInputChange = (0, import_react.useCallback)((value, args) => {
|
|
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/web.dom-collections.iterator.js');
|
|
7
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
10
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
12
|
+
var React = require('react');
|
|
13
|
+
var reactDesc = require('react-desc');
|
|
14
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
15
|
+
var dsForm = require('@elliemae/ds-form');
|
|
16
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
17
|
+
|
|
18
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
19
|
+
|
|
20
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
21
|
+
|
|
22
|
+
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; }
|
|
23
|
+
|
|
24
|
+
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; }
|
|
25
|
+
|
|
26
|
+
const noop = () => {};
|
|
27
|
+
|
|
28
|
+
function SearchableList(_ref) {
|
|
29
|
+
let {
|
|
30
|
+
onSelectMenuItem = noop,
|
|
31
|
+
components = {},
|
|
32
|
+
searchTerm: searchTermProp = '',
|
|
33
|
+
items = [],
|
|
34
|
+
dropdownFilterOptions = {},
|
|
35
|
+
returnValue,
|
|
36
|
+
extraListProps = {},
|
|
37
|
+
appendTermInList = false,
|
|
38
|
+
maxOptions = 10,
|
|
39
|
+
loading = false
|
|
40
|
+
} = _ref;
|
|
41
|
+
const [searchTerm, setInputValue] = React.useState(searchTermProp);
|
|
42
|
+
const handleInputChange = React.useCallback((value, args) => {
|
|
55
43
|
const action = args ? args.action : null;
|
|
56
|
-
if (action ===
|
|
57
|
-
return;
|
|
44
|
+
if (action === 'input-blur' || action === 'menu-close') return;
|
|
58
45
|
setInputValue(value);
|
|
59
46
|
}, [searchTerm]);
|
|
60
|
-
const handleFilterByText =
|
|
61
|
-
if (searchTerm)
|
|
62
|
-
onSelectMenuItem(searchTerm);
|
|
47
|
+
const handleFilterByText = React.useCallback(() => {
|
|
48
|
+
if (searchTerm) onSelectMenuItem(searchTerm);
|
|
63
49
|
}, [searchTerm]);
|
|
64
|
-
const handleKeyDown =
|
|
65
|
-
if (e.key ===
|
|
50
|
+
const handleKeyDown = React.useCallback(e => {
|
|
51
|
+
if (e.key === 'ArrowRight') {
|
|
66
52
|
handleFilterByText();
|
|
67
53
|
}
|
|
68
54
|
}, [searchTerm]);
|
|
69
|
-
const options =
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
].concat(items), (item) => item.label) : items, [searchTerm, appendTermInList]);
|
|
75
|
-
return /* @__PURE__ */ import_react.default.createElement(import_Combobox.DSComboBox2, {
|
|
55
|
+
const options = React.useMemo(() => searchTerm && appendTermInList ? dsUtilities.uniqBy([{
|
|
56
|
+
id: searchTerm,
|
|
57
|
+
label: searchTerm
|
|
58
|
+
}].concat(items), item => item.label) : items, [searchTerm, appendTermInList]);
|
|
59
|
+
return /*#__PURE__*/jsxRuntime.jsx(dsForm.DSComboBox, _objectSpread(_objectSpread({
|
|
76
60
|
autoFocus: true,
|
|
77
|
-
components: {
|
|
61
|
+
components: _objectSpread({
|
|
62
|
+
DropdownIndicator: null
|
|
63
|
+
}, components),
|
|
78
64
|
customMenuItemOptions: {
|
|
79
65
|
useTruncatedText: true
|
|
80
66
|
},
|
|
@@ -85,30 +71,47 @@ const SearchableList = ({
|
|
|
85
71
|
onFilterByInputText: handleFilterByText,
|
|
86
72
|
onInputChange: handleInputChange,
|
|
87
73
|
onKeyDown: handleKeyDown,
|
|
88
|
-
options,
|
|
89
|
-
returnValue,
|
|
74
|
+
options: options,
|
|
75
|
+
returnValue: returnValue,
|
|
90
76
|
valueProperty: "id",
|
|
91
|
-
maxOptions,
|
|
92
|
-
loading
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
};
|
|
77
|
+
maxOptions: maxOptions,
|
|
78
|
+
loading: loading
|
|
79
|
+
}, extraListProps), dropdownFilterOptions));
|
|
80
|
+
}
|
|
81
|
+
|
|
97
82
|
const props = {
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
83
|
+
/** callback after item gets selected */
|
|
84
|
+
onSelectMenuItem: reactDesc.PropTypes.func.description('callback after item gets selected'),
|
|
85
|
+
|
|
86
|
+
/** Object with custom components for react-select */
|
|
87
|
+
components: reactDesc.PropTypes.shape({}).description('Object with custom components for react-select'),
|
|
88
|
+
|
|
89
|
+
/** search term to filter for */
|
|
90
|
+
searchTerm: reactDesc.PropTypes.string.description('search term to filter for'),
|
|
91
|
+
|
|
92
|
+
/** item options */
|
|
93
|
+
items: reactDesc.PropTypes.array.description('item options'),
|
|
94
|
+
|
|
95
|
+
/** options */
|
|
96
|
+
dropdownFilterOptions: reactDesc.PropTypes.shape({}).description('options'),
|
|
97
|
+
|
|
98
|
+
/** Whether the combo box is has value to return or not */
|
|
99
|
+
returnValue: reactDesc.PropTypes.bool.description('Whether the combo box is has value to return or not'),
|
|
100
|
+
|
|
101
|
+
/** extra props to pass down to combo */
|
|
102
|
+
extraListProps: reactDesc.PropTypes.shape({}).description('extra props to pass down to combo'),
|
|
103
|
+
|
|
104
|
+
/** append search term as item on the list */
|
|
105
|
+
appendTermInList: reactDesc.PropTypes.bool.description('append search term as item on the list'),
|
|
106
|
+
|
|
107
|
+
/** maxoptions for combobox */
|
|
108
|
+
maxOptions: reactDesc.PropTypes.number.description('maxoptions for combobox'),
|
|
109
|
+
|
|
110
|
+
/** loading flag */
|
|
111
|
+
loading: reactDesc.PropTypes.bool.description('loading flag')
|
|
108
112
|
};
|
|
109
|
-
|
|
110
|
-
const DSMenuSearchableListWithSchema = (0, import_react_desc.describe)(SearchableList);
|
|
113
|
+
const DSMenuSearchableListWithSchema = reactDesc.describe(SearchableList);
|
|
111
114
|
DSMenuSearchableListWithSchema.propTypes = props;
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
+
|
|
116
|
+
exports.DSMenuSearchableListWithSchema = DSMenuSearchableListWithSchema;
|
|
117
|
+
exports["default"] = SearchableList;
|