@carbon/react 1.6.0 → 1.8.0-rc.0
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/es/components/ComposedModal/ComposedModal.js +1 -1
- package/es/components/ComposedModal/index.js +4 -4
- package/es/components/DataTable/DataTable.js +1 -1
- package/es/components/DataTable/Table.js +10 -2
- package/es/components/DataTable/TableContainer.js +20 -5
- package/es/components/DataTable/TableContext.js +15 -0
- package/es/components/DataTable/TableSelectRow.js +1 -1
- package/es/components/FileUploader/FileUploader.js +8 -1
- package/es/components/FileUploader/FileUploaderButton.js +3 -1
- package/es/components/FileUploader/FileUploaderDropContainer.js +3 -1
- package/es/components/FileUploader/FileUploaderItem.js +3 -1
- package/es/components/Form/Form.js +1 -1
- package/es/components/FormGroup/FormGroup.js +4 -4
- package/es/components/FormItem/FormItem.js +5 -6
- package/es/components/InlineLoading/InlineLoading.js +9 -5
- package/es/components/Loading/Loading.js +7 -18
- package/es/components/MultiSelect/FilterableMultiSelect.js +345 -386
- package/es/components/MultiSelect/index.js +4 -8
- package/es/components/Notification/Notification.js +322 -189
- package/es/components/Popover/index.js +137 -8
- package/es/components/ProgressBar/ProgressBar.js +6 -3
- package/es/components/RadioButton/RadioButton.js +58 -99
- package/es/components/RadioButton/index.js +2 -8
- package/es/components/RadioButtonGroup/RadioButtonGroup.js +72 -121
- package/es/components/RadioButtonGroup/index.js +2 -8
- package/es/components/Select/Select.js +14 -7
- package/es/components/Slider/Slider.js +2 -1
- package/es/components/Switch/Switch.js +0 -1
- package/es/components/TreeView/TreeView.js +19 -11
- package/es/components/UIShell/HeaderMenu.js +1 -1
- package/es/components/UIShell/HeaderMenuButton.js +4 -0
- package/es/components/UIShell/SideNavDetails.js +8 -3
- package/es/components/UIShell/SideNavLink.js +6 -9
- package/es/index.js +7 -6
- package/es/internal/createClassWrapper.js +2 -5
- package/lib/components/ComposedModal/index.js +7 -7
- package/lib/components/DataTable/DataTable.js +5 -5
- package/lib/components/DataTable/Table.js +9 -1
- package/lib/components/DataTable/TableContainer.js +19 -4
- package/lib/components/DataTable/TableContext.js +19 -0
- package/lib/components/DataTable/TableSelectRow.js +2 -2
- package/lib/components/FileUploader/FileUploader.js +8 -1
- package/lib/components/FileUploader/FileUploaderButton.js +3 -1
- package/lib/components/FileUploader/FileUploaderDropContainer.js +3 -1
- package/lib/components/FileUploader/FileUploaderItem.js +3 -1
- package/lib/components/Form/Form.js +1 -1
- package/lib/components/FormGroup/FormGroup.js +4 -4
- package/lib/components/FormItem/FormItem.js +5 -6
- package/lib/components/InlineLoading/InlineLoading.js +9 -5
- package/lib/components/Loading/Loading.js +6 -17
- package/lib/components/MultiSelect/FilterableMultiSelect.js +341 -382
- package/lib/components/MultiSelect/index.js +5 -28
- package/lib/components/Notification/Notification.js +321 -188
- package/lib/components/Popover/index.js +135 -6
- package/lib/components/ProgressBar/ProgressBar.js +6 -3
- package/lib/components/RadioButton/RadioButton.js +57 -99
- package/lib/components/RadioButton/index.js +2 -25
- package/lib/components/RadioButtonGroup/RadioButtonGroup.js +68 -117
- package/lib/components/RadioButtonGroup/index.js +2 -25
- package/lib/components/Select/Select.js +14 -7
- package/lib/components/Slider/Slider.js +2 -1
- package/lib/components/Switch/Switch.js +0 -1
- package/lib/components/TreeView/TreeView.js +18 -10
- package/lib/components/UIShell/HeaderMenu.js +1 -0
- package/lib/components/UIShell/HeaderMenuButton.js +4 -0
- package/lib/components/UIShell/SideNavDetails.js +8 -3
- package/lib/components/UIShell/SideNavLink.js +6 -9
- package/lib/index.js +83 -83
- package/lib/internal/createClassWrapper.js +2 -5
- package/package.json +8 -8
- package/es/components/MultiSelect/next/FilterableMultiSelect.js +0 -542
- package/es/components/Notification/index.js +0 -42
- package/es/components/Notification/next/Notification.js +0 -663
- package/es/components/RadioButton/next/RadioButton.js +0 -130
- package/es/components/RadioButtonGroup/next/RadioButtonGroup.js +0 -141
- package/lib/components/MultiSelect/next/FilterableMultiSelect.js +0 -554
- package/lib/components/Notification/index.js +0 -51
- package/lib/components/Notification/next/Notification.js +0 -677
- package/lib/components/RadioButton/next/RadioButton.js +0 -140
- package/lib/components/RadioButtonGroup/next/RadioButtonGroup.js +0 -151
|
@@ -1,554 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright IBM Corp. 2016, 2022
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
'use strict';
|
|
9
|
-
|
|
10
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
-
|
|
12
|
-
var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
|
|
13
|
-
var iconsReact = require('@carbon/icons-react');
|
|
14
|
-
var cx = require('classnames');
|
|
15
|
-
var Downshift = require('downshift');
|
|
16
|
-
var isEqual = require('lodash.isequal');
|
|
17
|
-
var PropTypes = require('prop-types');
|
|
18
|
-
var React = require('react');
|
|
19
|
-
var filter = require('../../ComboBox/tools/filter.js');
|
|
20
|
-
var MultiSelectPropTypes = require('../MultiSelectPropTypes.js');
|
|
21
|
-
require('../../ListBox/index.js');
|
|
22
|
-
var Selection = require('../../../internal/Selection.js');
|
|
23
|
-
var itemToString = require('../tools/itemToString.js');
|
|
24
|
-
var mergeRefs = require('../../../tools/mergeRefs.js');
|
|
25
|
-
var useId = require('../../../internal/useId.js');
|
|
26
|
-
var sorting = require('../tools/sorting.js');
|
|
27
|
-
var index = require('../../FeatureFlags/index.js');
|
|
28
|
-
var usePrefix = require('../../../internal/usePrefix.js');
|
|
29
|
-
var match = require('../../../internal/keyboard/match.js');
|
|
30
|
-
var ListBoxSelection = require('../../ListBox/next/ListBoxSelection.js');
|
|
31
|
-
var ListBoxTrigger = require('../../ListBox/next/ListBoxTrigger.js');
|
|
32
|
-
var ListBox = require('../../ListBox/ListBox.js');
|
|
33
|
-
var ListBoxPropTypes = require('../../ListBox/ListBoxPropTypes.js');
|
|
34
|
-
var keys = require('../../../internal/keyboard/keys.js');
|
|
35
|
-
|
|
36
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
37
|
-
|
|
38
|
-
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
39
|
-
var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
|
|
40
|
-
var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
|
|
41
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
42
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
43
|
-
|
|
44
|
-
var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function FilterableMultiSelect(_ref, ref) {
|
|
45
|
-
var _cx, _cx2, _cx3, _cx4;
|
|
46
|
-
|
|
47
|
-
var ariaLabel = _ref.ariaLabel,
|
|
48
|
-
containerClassName = _ref.className,
|
|
49
|
-
compareItems = _ref.compareItems,
|
|
50
|
-
direction = _ref.direction,
|
|
51
|
-
disabled = _ref.disabled,
|
|
52
|
-
downshiftProps = _ref.downshiftProps,
|
|
53
|
-
filterItems = _ref.filterItems,
|
|
54
|
-
helperText = _ref.helperText,
|
|
55
|
-
hideLabel = _ref.hideLabel,
|
|
56
|
-
id = _ref.id,
|
|
57
|
-
initialSelectedItems = _ref.initialSelectedItems,
|
|
58
|
-
invalid = _ref.invalid,
|
|
59
|
-
invalidText = _ref.invalidText,
|
|
60
|
-
items = _ref.items,
|
|
61
|
-
ItemToElement = _ref.itemToElement,
|
|
62
|
-
itemToString = _ref.itemToString,
|
|
63
|
-
light = _ref.light,
|
|
64
|
-
locale = _ref.locale,
|
|
65
|
-
onInputValueChange = _ref.onInputValueChange,
|
|
66
|
-
open = _ref.open,
|
|
67
|
-
onChange = _ref.onChange,
|
|
68
|
-
onMenuChange = _ref.onMenuChange,
|
|
69
|
-
placeholder = _ref.placeholder,
|
|
70
|
-
titleText = _ref.titleText,
|
|
71
|
-
type = _ref.type,
|
|
72
|
-
selectionFeedback = _ref.selectionFeedback,
|
|
73
|
-
size = _ref.size,
|
|
74
|
-
sortItems = _ref.sortItems,
|
|
75
|
-
translateWithId = _ref.translateWithId,
|
|
76
|
-
useTitleInItem = _ref.useTitleInItem,
|
|
77
|
-
warn = _ref.warn,
|
|
78
|
-
warnText = _ref.warnText;
|
|
79
|
-
|
|
80
|
-
var _useState = React.useState(open),
|
|
81
|
-
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
|
82
|
-
isOpen = _useState2[0],
|
|
83
|
-
setIsOpen = _useState2[1];
|
|
84
|
-
|
|
85
|
-
var _useState3 = React.useState(open),
|
|
86
|
-
_useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
|
|
87
|
-
prevOpen = _useState4[0],
|
|
88
|
-
setPrevOpen = _useState4[1];
|
|
89
|
-
|
|
90
|
-
var _useState5 = React.useState(''),
|
|
91
|
-
_useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
|
|
92
|
-
inputValue = _useState6[0],
|
|
93
|
-
setInputValue = _useState6[1];
|
|
94
|
-
|
|
95
|
-
var _useState7 = React.useState([]),
|
|
96
|
-
_useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
|
|
97
|
-
topItems = _useState8[0],
|
|
98
|
-
setTopItems = _useState8[1];
|
|
99
|
-
|
|
100
|
-
var _useState9 = React.useState(false),
|
|
101
|
-
_useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
|
|
102
|
-
inputFocused = _useState10[0],
|
|
103
|
-
setInputFocused = _useState10[1];
|
|
104
|
-
|
|
105
|
-
var _useState11 = React.useState(null),
|
|
106
|
-
_useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
|
|
107
|
-
highlightedIndex = _useState12[0],
|
|
108
|
-
setHighlightedIndex = _useState12[1];
|
|
109
|
-
|
|
110
|
-
var textInput = React.useRef();
|
|
111
|
-
var filterableMultiSelectInstanceId = useId.useId();
|
|
112
|
-
var enabled = index.useFeatureFlag('enable-v11-release');
|
|
113
|
-
var prefix = usePrefix.usePrefix();
|
|
114
|
-
|
|
115
|
-
if (prevOpen !== open) {
|
|
116
|
-
setIsOpen(open);
|
|
117
|
-
setPrevOpen(open);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
var inline = type === 'inline';
|
|
121
|
-
var showWarning = !invalid && warn;
|
|
122
|
-
var wrapperClasses = cx__default["default"]("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx));
|
|
123
|
-
var helperId = !helperText ? undefined : "filterablemultiselect-helper-text-".concat(filterableMultiSelectInstanceId);
|
|
124
|
-
var labelId = "".concat(id, "-label");
|
|
125
|
-
var titleClasses = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
|
|
126
|
-
var helperClasses = cx__default["default"]((_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--form__helper-text"), true), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--form__helper-text--disabled"), disabled), _cx3));
|
|
127
|
-
var inputClasses = cx__default["default"]((_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--text-input"), true), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--text-input--empty"), !inputValue), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--text-input--light"), light), _cx4));
|
|
128
|
-
var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
129
|
-
id: helperId,
|
|
130
|
-
className: helperClasses
|
|
131
|
-
}, helperText) : null;
|
|
132
|
-
var menuId = "".concat(id, "__menu");
|
|
133
|
-
var inputId = "".concat(id, "-input");
|
|
134
|
-
|
|
135
|
-
function handleOnChange(changes) {
|
|
136
|
-
if (onChange) {
|
|
137
|
-
onChange(changes);
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
function handleOnMenuChange(forceIsOpen) {
|
|
142
|
-
var nextIsOpen = forceIsOpen !== null && forceIsOpen !== void 0 ? forceIsOpen : !isOpen;
|
|
143
|
-
setIsOpen(nextIsOpen);
|
|
144
|
-
|
|
145
|
-
if (onMenuChange) {
|
|
146
|
-
onMenuChange(nextIsOpen);
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
function handleOnOuterClick() {
|
|
151
|
-
handleOnMenuChange(false);
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
function handleOnStateChange(changes, downshift) {
|
|
155
|
-
if (changes.isOpen && !isOpen) {
|
|
156
|
-
setTopItems(downshift.selectedItem);
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
var type = changes.type;
|
|
160
|
-
var stateChangeTypes = Downshift__default["default"].stateChangeTypes;
|
|
161
|
-
|
|
162
|
-
switch (type) {
|
|
163
|
-
case stateChangeTypes.keyDownArrowDown:
|
|
164
|
-
case stateChangeTypes.keyDownArrowUp:
|
|
165
|
-
case stateChangeTypes.keyDownHome:
|
|
166
|
-
case stateChangeTypes.keyDownEnd:
|
|
167
|
-
setHighlightedIndex(changes.highlightedIndex !== undefined ? changes.highlightedIndex : null);
|
|
168
|
-
|
|
169
|
-
if (stateChangeTypes.keyDownArrowDown === type && !isOpen) {
|
|
170
|
-
handleOnMenuChange(true);
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
break;
|
|
174
|
-
|
|
175
|
-
case stateChangeTypes.keyDownEscape:
|
|
176
|
-
handleOnMenuChange(false);
|
|
177
|
-
break;
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
function handleOnInputValueChange(inputValue, _ref2) {
|
|
182
|
-
var type = _ref2.type;
|
|
183
|
-
|
|
184
|
-
if (onInputValueChange) {
|
|
185
|
-
onInputValueChange(inputValue);
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
if (type !== Downshift__default["default"].stateChangeTypes.changeInput) {
|
|
189
|
-
return;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
if (Array.isArray(inputValue)) {
|
|
193
|
-
clearInputValue();
|
|
194
|
-
} else {
|
|
195
|
-
setInputValue(inputValue);
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
if (inputValue && !isOpen) {
|
|
199
|
-
handleOnMenuChange(true);
|
|
200
|
-
} else if (!inputValue && isOpen) {
|
|
201
|
-
handleOnMenuChange(false);
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
function clearInputValue() {
|
|
206
|
-
setInputValue('');
|
|
207
|
-
|
|
208
|
-
if (textInput.current) {
|
|
209
|
-
textInput.current.focus();
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
return /*#__PURE__*/React__default["default"].createElement(Selection["default"], {
|
|
214
|
-
disabled: disabled,
|
|
215
|
-
onChange: handleOnChange,
|
|
216
|
-
initialSelectedItems: initialSelectedItems,
|
|
217
|
-
render: function render(_ref3) {
|
|
218
|
-
var selectedItems = _ref3.selectedItems,
|
|
219
|
-
onItemChange = _ref3.onItemChange,
|
|
220
|
-
_clearSelection = _ref3.clearSelection;
|
|
221
|
-
return /*#__PURE__*/React__default["default"].createElement(Downshift__default["default"], _rollupPluginBabelHelpers["extends"]({}, downshiftProps, {
|
|
222
|
-
highlightedIndex: highlightedIndex,
|
|
223
|
-
id: id,
|
|
224
|
-
isOpen: isOpen,
|
|
225
|
-
inputValue: inputValue,
|
|
226
|
-
onInputValueChange: handleOnInputValueChange,
|
|
227
|
-
onChange: function onChange(selectedItem) {
|
|
228
|
-
if (selectedItem !== null) {
|
|
229
|
-
onItemChange(selectedItem);
|
|
230
|
-
}
|
|
231
|
-
},
|
|
232
|
-
itemToString: itemToString,
|
|
233
|
-
onStateChange: handleOnStateChange,
|
|
234
|
-
onOuterClick: handleOnOuterClick,
|
|
235
|
-
selectedItem: selectedItems,
|
|
236
|
-
labelId: labelId,
|
|
237
|
-
menuId: menuId,
|
|
238
|
-
inputId: inputId
|
|
239
|
-
}), function (_ref4) {
|
|
240
|
-
var _cx5;
|
|
241
|
-
|
|
242
|
-
var getInputProps = _ref4.getInputProps,
|
|
243
|
-
getItemProps = _ref4.getItemProps,
|
|
244
|
-
getLabelProps = _ref4.getLabelProps,
|
|
245
|
-
getMenuProps = _ref4.getMenuProps,
|
|
246
|
-
getRootProps = _ref4.getRootProps,
|
|
247
|
-
getToggleButtonProps = _ref4.getToggleButtonProps,
|
|
248
|
-
isOpen = _ref4.isOpen,
|
|
249
|
-
inputValue = _ref4.inputValue,
|
|
250
|
-
selectedItem = _ref4.selectedItem;
|
|
251
|
-
var className = cx__default["default"]("".concat(prefix, "--multi-select"), "".concat(prefix, "--combo-box"), "".concat(prefix, "--multi-select--filterable"), [enabled ? null : containerClassName], (_cx5 = {}, _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--multi-select--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--multi-select--open"), isOpen), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--multi-select--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--multi-select--selected"), selectedItem.length > 0), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--multi-select--filterable--input-focused"), inputFocused), _cx5));
|
|
252
|
-
var rootProps = getRootProps({}, {
|
|
253
|
-
suppressRefError: true
|
|
254
|
-
});
|
|
255
|
-
var labelProps = getLabelProps();
|
|
256
|
-
var buttonProps = getToggleButtonProps({
|
|
257
|
-
disabled: disabled,
|
|
258
|
-
onClick: function onClick() {
|
|
259
|
-
handleOnMenuChange(!isOpen);
|
|
260
|
-
|
|
261
|
-
if (textInput.current) {
|
|
262
|
-
textInput.current.focus();
|
|
263
|
-
}
|
|
264
|
-
},
|
|
265
|
-
// When we moved the "root node" of Downshift to the <input> for
|
|
266
|
-
// ARIA 1.2 compliance, we unfortunately hit this branch for the
|
|
267
|
-
// "mouseup" event that downshift listens to:
|
|
268
|
-
// https://github.com/downshift-js/downshift/blob/v5.2.1/src/downshift.js#L1051-L1065
|
|
269
|
-
//
|
|
270
|
-
// As a result, it will reset the state of the component and so we
|
|
271
|
-
// stop the event from propagating to prevent this. This allows the
|
|
272
|
-
// toggleMenu behavior for the toggleButton to correctly open and
|
|
273
|
-
// close the menu.
|
|
274
|
-
onMouseUp: function onMouseUp(event) {
|
|
275
|
-
event.stopPropagation();
|
|
276
|
-
}
|
|
277
|
-
});
|
|
278
|
-
var inputProps = getInputProps({
|
|
279
|
-
'aria-controls': isOpen ? menuId : null,
|
|
280
|
-
'aria-describedby': helperText ? helperId : null,
|
|
281
|
-
// Remove excess aria `aria-labelledby`. HTML <label for>
|
|
282
|
-
// provides this aria information.
|
|
283
|
-
'aria-labelledby': null,
|
|
284
|
-
disabled: disabled,
|
|
285
|
-
placeholder: placeholder,
|
|
286
|
-
onClick: function onClick() {
|
|
287
|
-
handleOnMenuChange(true);
|
|
288
|
-
},
|
|
289
|
-
onKeyDown: function onKeyDown(event) {
|
|
290
|
-
if (match.match(event, keys.Space)) {
|
|
291
|
-
event.stopPropagation();
|
|
292
|
-
}
|
|
293
|
-
},
|
|
294
|
-
onFocus: function onFocus() {
|
|
295
|
-
setInputFocused(true);
|
|
296
|
-
},
|
|
297
|
-
onBlur: function onBlur() {
|
|
298
|
-
setInputFocused(false);
|
|
299
|
-
}
|
|
300
|
-
});
|
|
301
|
-
var menuProps = getMenuProps({
|
|
302
|
-
'aria-label': ariaLabel
|
|
303
|
-
}, {
|
|
304
|
-
suppressRefError: true
|
|
305
|
-
});
|
|
306
|
-
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
307
|
-
className: wrapperClasses
|
|
308
|
-
}, titleText ? /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
|
|
309
|
-
className: titleClasses
|
|
310
|
-
}, labelProps), titleText) : null, /*#__PURE__*/React__default["default"].createElement(ListBox["default"], {
|
|
311
|
-
className: className,
|
|
312
|
-
disabled: disabled,
|
|
313
|
-
light: light,
|
|
314
|
-
ref: ref,
|
|
315
|
-
invalid: invalid,
|
|
316
|
-
invalidText: invalidText,
|
|
317
|
-
warn: warn,
|
|
318
|
-
warnText: warnText,
|
|
319
|
-
isOpen: isOpen,
|
|
320
|
-
size: size
|
|
321
|
-
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
322
|
-
className: "".concat(prefix, "--list-box__field")
|
|
323
|
-
}, selectedItem.length > 0 && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
|
|
324
|
-
clearSelection: function clearSelection() {
|
|
325
|
-
_clearSelection();
|
|
326
|
-
|
|
327
|
-
if (textInput.current) {
|
|
328
|
-
textInput.current.focus();
|
|
329
|
-
}
|
|
330
|
-
},
|
|
331
|
-
selectionCount: selectedItem.length,
|
|
332
|
-
translateWithId: translateWithId,
|
|
333
|
-
disabled: disabled
|
|
334
|
-
}), /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({
|
|
335
|
-
className: inputClasses
|
|
336
|
-
}, rootProps, inputProps, {
|
|
337
|
-
ref: mergeRefs["default"](textInput, rootProps.ref)
|
|
338
|
-
})), invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
|
|
339
|
-
className: "".concat(prefix, "--list-box__invalid-icon")
|
|
340
|
-
}), showWarning && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
|
|
341
|
-
className: "".concat(prefix, "--list-box__invalid-icon ").concat(prefix, "--list-box__invalid-icon--warning")
|
|
342
|
-
}), inputValue && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
|
|
343
|
-
clearSelection: clearInputValue,
|
|
344
|
-
disabled: disabled,
|
|
345
|
-
translateWithId: translateWithId,
|
|
346
|
-
onMouseUp: function onMouseUp(event) {
|
|
347
|
-
// If we do not stop this event from propagating,
|
|
348
|
-
// it seems like Downshift takes our event and
|
|
349
|
-
// prevents us from getting `onClick` /
|
|
350
|
-
// `clearSelection` from the underlying <button> in
|
|
351
|
-
// ListBoxSelection
|
|
352
|
-
event.stopPropagation();
|
|
353
|
-
}
|
|
354
|
-
}), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
|
|
355
|
-
isOpen: isOpen,
|
|
356
|
-
translateWithId: translateWithId
|
|
357
|
-
}))), isOpen ? /*#__PURE__*/React__default["default"].createElement(ListBox["default"].Menu, menuProps, sortItems(filterItems(items, {
|
|
358
|
-
itemToString: itemToString,
|
|
359
|
-
inputValue: inputValue
|
|
360
|
-
}), {
|
|
361
|
-
selectedItems: {
|
|
362
|
-
top: selectedItems,
|
|
363
|
-
fixed: [],
|
|
364
|
-
'top-after-reopen': topItems
|
|
365
|
-
}[selectionFeedback],
|
|
366
|
-
itemToString: itemToString,
|
|
367
|
-
compareItems: compareItems,
|
|
368
|
-
locale: locale
|
|
369
|
-
}).map(function (item, index) {
|
|
370
|
-
var itemProps = getItemProps({
|
|
371
|
-
item: item,
|
|
372
|
-
disabled: item.disabled
|
|
373
|
-
});
|
|
374
|
-
var itemText = itemToString(item);
|
|
375
|
-
var isChecked = selectedItem.filter(function (selected) {
|
|
376
|
-
return isEqual__default["default"](selected, item);
|
|
377
|
-
}).length > 0;
|
|
378
|
-
return /*#__PURE__*/React__default["default"].createElement(ListBox["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
|
|
379
|
-
key: itemProps.id,
|
|
380
|
-
"aria-label": itemText,
|
|
381
|
-
isActive: isChecked,
|
|
382
|
-
isHighlighted: highlightedIndex === index,
|
|
383
|
-
title: itemText
|
|
384
|
-
}, itemProps), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
385
|
-
className: "".concat(prefix, "--checkbox-wrapper")
|
|
386
|
-
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
387
|
-
title: useTitleInItem ? itemText : null,
|
|
388
|
-
className: "".concat(prefix, "--checkbox-label"),
|
|
389
|
-
"data-contained-checkbox-state": isChecked,
|
|
390
|
-
id: "".concat(itemProps.id, "-item")
|
|
391
|
-
}, ItemToElement ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
|
|
392
|
-
key: itemProps.id
|
|
393
|
-
}, item)) : itemText)));
|
|
394
|
-
})) : null), !inline && !invalid && !warn ? helper : null);
|
|
395
|
-
});
|
|
396
|
-
}
|
|
397
|
-
});
|
|
398
|
-
});
|
|
399
|
-
FilterableMultiSelect.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
|
|
400
|
-
/**
|
|
401
|
-
* 'aria-label' of the ListBox component.
|
|
402
|
-
*/
|
|
403
|
-
ariaLabel: PropTypes__default["default"].string,
|
|
404
|
-
|
|
405
|
-
/**
|
|
406
|
-
* Specify the direction of the multiselect dropdown. Can be either top or bottom.
|
|
407
|
-
*/
|
|
408
|
-
direction: PropTypes__default["default"].oneOf(['top', 'bottom']),
|
|
409
|
-
|
|
410
|
-
/**
|
|
411
|
-
* Disable the control
|
|
412
|
-
*/
|
|
413
|
-
disabled: PropTypes__default["default"].bool,
|
|
414
|
-
|
|
415
|
-
/**
|
|
416
|
-
* Additional props passed to Downshift
|
|
417
|
-
*/
|
|
418
|
-
downshiftProps: PropTypes__default["default"].shape(Downshift__default["default"].propTypes),
|
|
419
|
-
|
|
420
|
-
/**
|
|
421
|
-
* Specify whether the title text should be hidden or not
|
|
422
|
-
*/
|
|
423
|
-
hideLabel: PropTypes__default["default"].bool,
|
|
424
|
-
|
|
425
|
-
/**
|
|
426
|
-
* Specify a custom `id`
|
|
427
|
-
*/
|
|
428
|
-
id: PropTypes__default["default"].string.isRequired,
|
|
429
|
-
|
|
430
|
-
/**
|
|
431
|
-
* Allow users to pass in arbitrary items from their collection that are
|
|
432
|
-
* pre-selected
|
|
433
|
-
*/
|
|
434
|
-
initialSelectedItems: PropTypes__default["default"].array,
|
|
435
|
-
|
|
436
|
-
/**
|
|
437
|
-
* Is the current selection invalid?
|
|
438
|
-
*/
|
|
439
|
-
invalid: PropTypes__default["default"].bool,
|
|
440
|
-
|
|
441
|
-
/**
|
|
442
|
-
* If invalid, what is the error?
|
|
443
|
-
*/
|
|
444
|
-
invalidText: PropTypes__default["default"].node,
|
|
445
|
-
|
|
446
|
-
/**
|
|
447
|
-
* Function to render items as custom components instead of strings.
|
|
448
|
-
* Defaults to null and is overridden by a getter
|
|
449
|
-
*/
|
|
450
|
-
itemToElement: PropTypes__default["default"].func,
|
|
451
|
-
|
|
452
|
-
/**
|
|
453
|
-
* Helper function passed to downshift that allows the library to render a
|
|
454
|
-
* given item to a string label. By default, it extracts the `label` field
|
|
455
|
-
* from a given item to serve as the item label in the list.
|
|
456
|
-
*/
|
|
457
|
-
itemToString: PropTypes__default["default"].func,
|
|
458
|
-
|
|
459
|
-
/**
|
|
460
|
-
* We try to stay as generic as possible here to allow individuals to pass
|
|
461
|
-
* in a collection of whatever kind of data structure they prefer
|
|
462
|
-
*/
|
|
463
|
-
items: PropTypes__default["default"].array.isRequired,
|
|
464
|
-
|
|
465
|
-
/**
|
|
466
|
-
* `true` to use the light version.
|
|
467
|
-
*/
|
|
468
|
-
light: PropTypes__default["default"].bool,
|
|
469
|
-
|
|
470
|
-
/**
|
|
471
|
-
* Specify the locale of the control. Used for the default `compareItems`
|
|
472
|
-
* used for sorting the list of items in the control.
|
|
473
|
-
*/
|
|
474
|
-
locale: PropTypes__default["default"].string,
|
|
475
|
-
|
|
476
|
-
/**
|
|
477
|
-
* `onChange` is a utility for this controlled component to communicate to a
|
|
478
|
-
* consuming component what kind of internal state changes are occurring.
|
|
479
|
-
*/
|
|
480
|
-
onChange: PropTypes__default["default"].func,
|
|
481
|
-
|
|
482
|
-
/**
|
|
483
|
-
* `onInputValueChange` is a utility for this controlled component to communicate to
|
|
484
|
-
* the currently typed input.
|
|
485
|
-
*/
|
|
486
|
-
onInputValueChange: PropTypes__default["default"].func,
|
|
487
|
-
|
|
488
|
-
/**
|
|
489
|
-
* `onMenuChange` is a utility for this controlled component to communicate to a
|
|
490
|
-
* consuming component that the menu was opened(`true`)/closed(`false`).
|
|
491
|
-
*/
|
|
492
|
-
onMenuChange: PropTypes__default["default"].func,
|
|
493
|
-
|
|
494
|
-
/**
|
|
495
|
-
* Initialize the component with an open(`true`)/closed(`false`) menu.
|
|
496
|
-
*/
|
|
497
|
-
open: PropTypes__default["default"].bool,
|
|
498
|
-
|
|
499
|
-
/**
|
|
500
|
-
* Generic `placeholder` that will be used as the textual representation of
|
|
501
|
-
* what this field is for
|
|
502
|
-
*/
|
|
503
|
-
placeholder: PropTypes__default["default"].string,
|
|
504
|
-
|
|
505
|
-
/**
|
|
506
|
-
* Specify feedback (mode) of the selection.
|
|
507
|
-
* `top`: selected item jumps to top
|
|
508
|
-
* `fixed`: selected item stays at it's position
|
|
509
|
-
* `top-after-reopen`: selected item jump to top after reopen dropdown
|
|
510
|
-
*/
|
|
511
|
-
selectionFeedback: PropTypes__default["default"].oneOf(['top', 'fixed', 'top-after-reopen']),
|
|
512
|
-
|
|
513
|
-
/**
|
|
514
|
-
* Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
|
|
515
|
-
*/
|
|
516
|
-
size: ListBoxPropTypes.ListBoxSize
|
|
517
|
-
}, MultiSelectPropTypes.sortingPropTypes), {}, {
|
|
518
|
-
/**
|
|
519
|
-
* Callback function for translating ListBoxMenuIcon SVG title
|
|
520
|
-
*/
|
|
521
|
-
translateWithId: PropTypes__default["default"].func,
|
|
522
|
-
|
|
523
|
-
/**
|
|
524
|
-
* Specify title to show title on hover
|
|
525
|
-
*/
|
|
526
|
-
useTitleInItem: PropTypes__default["default"].bool,
|
|
527
|
-
|
|
528
|
-
/**
|
|
529
|
-
* Specify whether the control is currently in warning state
|
|
530
|
-
*/
|
|
531
|
-
warn: PropTypes__default["default"].bool,
|
|
532
|
-
|
|
533
|
-
/**
|
|
534
|
-
* Provide the text that is displayed when the control is in warning state
|
|
535
|
-
*/
|
|
536
|
-
warnText: PropTypes__default["default"].node
|
|
537
|
-
});
|
|
538
|
-
FilterableMultiSelect.defaultProps = {
|
|
539
|
-
ariaLabel: 'Choose an item',
|
|
540
|
-
compareItems: sorting.defaultCompareItems,
|
|
541
|
-
direction: 'bottom',
|
|
542
|
-
disabled: false,
|
|
543
|
-
filterItems: filter.defaultFilterItems,
|
|
544
|
-
initialSelectedItems: [],
|
|
545
|
-
itemToString: itemToString.defaultItemToString,
|
|
546
|
-
locale: 'en',
|
|
547
|
-
sortItems: sorting.defaultSortItems,
|
|
548
|
-
light: false,
|
|
549
|
-
open: false,
|
|
550
|
-
selectionFeedback: 'top-after-reopen'
|
|
551
|
-
};
|
|
552
|
-
var FilterableMultiSelectNext = FilterableMultiSelect;
|
|
553
|
-
|
|
554
|
-
exports["default"] = FilterableMultiSelectNext;
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright IBM Corp. 2016, 2022
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
'use strict';
|
|
9
|
-
|
|
10
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
-
|
|
12
|
-
var Notification = require('./next/Notification.js');
|
|
13
|
-
var Notification$1 = require('./Notification.js');
|
|
14
|
-
var ComponentToggle = require('../../internal/ComponentToggle.js');
|
|
15
|
-
|
|
16
|
-
var NotificationActionButton = ComponentToggle.createComponentToggle({
|
|
17
|
-
name: 'NotificationActionButton',
|
|
18
|
-
next: Notification.NotificationActionButton,
|
|
19
|
-
classic: Notification$1.NotificationActionButton
|
|
20
|
-
});
|
|
21
|
-
var NotificationTextDetails = ComponentToggle.createComponentToggle({
|
|
22
|
-
name: 'NotificationTextDetails',
|
|
23
|
-
classic: Notification$1.NotificationTextDetails
|
|
24
|
-
});
|
|
25
|
-
var NotificationButton = ComponentToggle.createComponentToggle({
|
|
26
|
-
name: 'NotificationButton',
|
|
27
|
-
next: Notification.NotificationButton,
|
|
28
|
-
classic: Notification$1.NotificationButton
|
|
29
|
-
});
|
|
30
|
-
var ToastNotification = ComponentToggle.createComponentToggle({
|
|
31
|
-
name: 'ToastNotification',
|
|
32
|
-
next: Notification.ToastNotification,
|
|
33
|
-
classic: Notification$1.ToastNotification
|
|
34
|
-
});
|
|
35
|
-
var InlineNotification = ComponentToggle.createComponentToggle({
|
|
36
|
-
name: 'InlineNotification',
|
|
37
|
-
next: Notification.InlineNotification,
|
|
38
|
-
classic: Notification$1.InlineNotification
|
|
39
|
-
});
|
|
40
|
-
var ActionableNotification = ComponentToggle.createComponentToggle({
|
|
41
|
-
name: 'ActionableNotification',
|
|
42
|
-
next: Notification.ActionableNotification,
|
|
43
|
-
classic: null
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
exports.ActionableNotification = ActionableNotification;
|
|
47
|
-
exports.InlineNotification = InlineNotification;
|
|
48
|
-
exports.NotificationActionButton = NotificationActionButton;
|
|
49
|
-
exports.NotificationButton = NotificationButton;
|
|
50
|
-
exports.NotificationTextDetails = NotificationTextDetails;
|
|
51
|
-
exports.ToastNotification = ToastNotification;
|