@rhc-shared-components/form-multi-select-component 1.0.5 → 2.0.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.
Files changed (4) hide show
  1. package/dist/FormMultiSelectInput.d.ts +2 -2
  2. package/dist/index.js +203 -231
  3. package/dist/index.modern.js +169 -196
  4. package/package.json +9 -11
package/dist/FormMultiSelectInput.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import { FC } from 'react';
2
2
  import { SelectOptionProps } from '@patternfly/react-core';
3
3
  export interface FormMultiSelectInputProps {
4
4
  name: string;
@@ -14,5 +14,5 @@ export interface FormMultiSelectInputProps {
14
14
  extraProps?: any;
15
15
  isScrollable?: boolean;
16
16
  }
17
- declare const FormMultiSelectInput: React.FunctionComponent<FormMultiSelectInputProps>;
17
+ declare const FormMultiSelectInput: FC<FormMultiSelectInputProps>;
18
18
  export { FormMultiSelectInput };
package/dist/index.js CHANGED
@@ -1,10 +1,9 @@
1
+ var jsxRuntime = require('react/jsx-runtime');
1
2
  var React = require('react');
2
3
  var reactCore = require('@patternfly/react-core');
3
4
  var formGroupContainer = require('@rhc-shared-components/form-group-container');
4
5
  var formik = require('formik');
5
6
 
6
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
7
-
8
7
  function _interopNamespace(e) {
9
8
  if (e && e.__esModule) return e;
10
9
  var n = Object.create(null);
@@ -24,39 +23,32 @@ function _interopNamespace(e) {
24
23
  }
25
24
 
26
25
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
27
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
28
26
 
29
27
  function _extends() {
30
- _extends = Object.assign || function (target) {
31
- for (var i = 1; i < arguments.length; i++) {
32
- var source = arguments[i];
33
-
34
- for (var key in source) {
35
- if (Object.prototype.hasOwnProperty.call(source, key)) {
36
- target[key] = source[key];
37
- }
38
- }
28
+ return _extends = Object.assign ? Object.assign.bind() : function (n) {
29
+ for (var e = 1; e < arguments.length; e++) {
30
+ var t = arguments[e];
31
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
39
32
  }
40
-
41
- return target;
42
- };
43
-
44
- return _extends.apply(this, arguments);
33
+ return n;
34
+ }, _extends.apply(null, arguments);
45
35
  }
46
-
47
- function _objectWithoutPropertiesLoose(source, excluded) {
48
- if (source == null) return {};
49
- var target = {};
50
- var sourceKeys = Object.keys(source);
51
- var key, i;
52
-
53
- for (i = 0; i < sourceKeys.length; i++) {
54
- key = sourceKeys[i];
55
- if (excluded.indexOf(key) >= 0) continue;
56
- target[key] = source[key];
36
+ function _inheritsLoose(t, o) {
37
+ t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
38
+ }
39
+ function _objectWithoutPropertiesLoose(r, e) {
40
+ if (null == r) return {};
41
+ var t = {};
42
+ for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
43
+ if (-1 !== e.indexOf(n)) continue;
44
+ t[n] = r[n];
57
45
  }
58
-
59
- return target;
46
+ return t;
47
+ }
48
+ function _setPrototypeOf(t, e) {
49
+ return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
50
+ return t.__proto__ = e, t;
51
+ }, _setPrototypeOf(t, e);
60
52
  }
61
53
 
62
54
  /******************************************************************************
@@ -73,162 +65,162 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
73
65
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
74
66
  PERFORMANCE OF THIS SOFTWARE.
75
67
  ***************************************************************************** */
76
-
77
68
  function __rest(s, e) {
78
69
  var t = {};
79
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
80
- t[p] = s[p];
81
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
82
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
83
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
84
- t[p[i]] = s[p[i]];
85
- }
70
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
71
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
72
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
73
+ }
86
74
  return t;
87
75
  }
88
-
89
76
  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
90
77
  var e = new Error(message);
91
78
  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
92
79
  };
93
80
 
94
- let currentId = 0;
81
+ var currentId = 0;
95
82
  /**
96
83
  * Factory to create Icon class components for consumers
97
84
  */
98
- function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath }) {
99
- var _a;
100
- return _a = class SVGIcon extends React__namespace.Component {
101
- constructor() {
102
- super(...arguments);
103
- this.id = `icon-title-${currentId++}`;
104
- }
105
- render() {
106
- const _a = this.props, { title, className } = _a, props = __rest(_a, ["title", "className"]);
107
- const classes = className ? `pf-v5-svg ${className}` : 'pf-v5-svg';
108
- const hasTitle = Boolean(title);
109
- const viewBox = [xOffset, yOffset, width, height].join(' ');
110
- return (React__namespace.createElement("svg", Object.assign({ className: classes, viewBox: viewBox, fill: "currentColor", "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img", width: "1em", height: "1em" }, props),
111
- hasTitle && React__namespace.createElement("title", { id: this.id }, title),
112
- React__namespace.createElement("path", { d: svgPath })));
113
- }
114
- },
115
- _a.displayName = name,
116
- _a;
85
+ function createIcon(_ref) {
86
+ var name = _ref.name,
87
+ _ref$xOffset = _ref.xOffset,
88
+ xOffset = _ref$xOffset === void 0 ? 0 : _ref$xOffset,
89
+ _ref$yOffset = _ref.yOffset,
90
+ yOffset = _ref$yOffset === void 0 ? 0 : _ref$yOffset,
91
+ width = _ref.width,
92
+ height = _ref.height,
93
+ svgPath = _ref.svgPath;
94
+ var _a;
95
+ return _a = /*#__PURE__*/function (_React$Component) {
96
+ function SVGIcon() {
97
+ var _this;
98
+ _this = _React$Component.apply(this, arguments) || this;
99
+ _this.id = "icon-title-" + currentId++;
100
+ return _this;
101
+ }
102
+ _inheritsLoose(SVGIcon, _React$Component);
103
+ var _proto = SVGIcon.prototype;
104
+ _proto.render = function render() {
105
+ var _b = this.props,
106
+ title = _b.title,
107
+ className = _b.className,
108
+ props = __rest(_b, ["title", "className"]);
109
+ var classes = className ? "pf-v5-svg " + className : 'pf-v5-svg';
110
+ var hasTitle = Boolean(title);
111
+ var viewBox = [xOffset, yOffset, width, height].join(' ');
112
+ return React__namespace.createElement("svg", Object.assign({
113
+ className: classes,
114
+ viewBox: viewBox,
115
+ fill: "currentColor",
116
+ "aria-labelledby": hasTitle ? this.id : null,
117
+ "aria-hidden": hasTitle ? null : true,
118
+ role: "img",
119
+ width: "1em",
120
+ height: "1em"
121
+ }, props), hasTitle && React__namespace.createElement("title", {
122
+ id: this.id
123
+ }, title), React__namespace.createElement("path", {
124
+ d: svgPath
125
+ }));
126
+ };
127
+ return SVGIcon;
128
+ }(React__namespace.Component), _a.displayName = name, _a;
117
129
  }
118
130
 
119
- const TimesIconConfig = {
131
+ var TimesIconConfig = {
120
132
  name: 'TimesIcon',
121
133
  height: 512,
122
134
  width: 352,
123
135
  svgPath: 'M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z',
124
136
  yOffset: 0,
125
- xOffset: 0,
137
+ xOffset: 0
126
138
  };
127
-
128
- const TimesIcon = createIcon(TimesIconConfig);
129
-
139
+ var TimesIcon = createIcon(TimesIconConfig);
130
140
  var TimesIcon$1 = TimesIcon;
131
141
 
132
- var _excluded = ["label", "isRequired", "children", "selectMenuOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "extraProps", "isScrollable"];
133
-
142
+ var _excluded = ["label", "isRequired", "selectMenuOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "extraProps", "isScrollable"];
134
143
  var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
135
144
  var label = _ref.label,
136
- isRequired = _ref.isRequired,
137
- selectMenuOptions = _ref.selectMenuOptions,
138
- placeholder = _ref.placeholder,
139
- helperText = _ref.helperText,
140
- maxHeight = _ref.maxHeight,
141
- _ref$isDisabled = _ref.isDisabled,
142
- isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
143
- rest = _objectWithoutPropertiesLoose(_ref, _excluded);
144
-
145
+ isRequired = _ref.isRequired,
146
+ selectMenuOptions = _ref.selectMenuOptions,
147
+ placeholder = _ref.placeholder,
148
+ helperText = _ref.helperText,
149
+ maxHeight = _ref.maxHeight,
150
+ _ref$isDisabled = _ref.isDisabled,
151
+ isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
152
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded);
145
153
  var _useField = formik.useField(rest),
146
- meta = _useField[1];
147
-
154
+ meta = _useField[1];
148
155
  var value = meta.value;
149
-
150
156
  var _useFormikContext = formik.useFormikContext(),
151
- isSubmitting = _useFormikContext.isSubmitting,
152
- setFieldValue = _useFormikContext.setFieldValue,
153
- setFieldTouched = _useFormikContext.setFieldTouched;
154
-
155
- var _React$useState = React__default["default"].useState(false),
156
- isOpen = _React$useState[0],
157
- setIsOpen = _React$useState[1];
158
-
159
- var _React$useState2 = React__default["default"].useState(''),
160
- inputValue = _React$useState2[0],
161
- setInputValue = _React$useState2[1];
162
-
163
- var _React$useState3 = React__default["default"].useState([]),
164
- selected = _React$useState3[0],
165
- setSelected = _React$useState3[1];
166
-
167
- var _React$useState4 = React__default["default"].useState(selectMenuOptions),
168
- selectOptions = _React$useState4[0],
169
- setSelectOptions = _React$useState4[1];
170
-
171
- var _React$useState5 = React__default["default"].useState(null),
172
- focusedItemIndex = _React$useState5[0],
173
- setFocusedItemIndex = _React$useState5[1];
174
-
175
- var _React$useState6 = React__default["default"].useState(null),
176
- activeItemId = _React$useState6[0],
177
- setActiveItemId = _React$useState6[1];
178
-
179
- var textInputRef = React__default["default"].useRef();
157
+ isSubmitting = _useFormikContext.isSubmitting,
158
+ setFieldValue = _useFormikContext.setFieldValue,
159
+ setFieldTouched = _useFormikContext.setFieldTouched;
160
+ var _useState = React.useState(false),
161
+ isOpen = _useState[0],
162
+ setIsOpen = _useState[1];
163
+ var _useState2 = React.useState(''),
164
+ inputValue = _useState2[0],
165
+ setInputValue = _useState2[1];
166
+ var _useState3 = React.useState([]),
167
+ selected = _useState3[0],
168
+ setSelected = _useState3[1];
169
+ var _useState4 = React.useState(selectMenuOptions),
170
+ selectOptions = _useState4[0],
171
+ setSelectOptions = _useState4[1];
172
+ var _useState5 = React.useState(null),
173
+ focusedItemIndex = _useState5[0],
174
+ setFocusedItemIndex = _useState5[1];
175
+ var _useState6 = React.useState(null),
176
+ activeItemId = _useState6[0],
177
+ setActiveItemId = _useState6[1];
178
+ var textInputRef = React.useRef(null);
180
179
  var NO_RESULTS = 'no results';
181
- React__default["default"].useEffect(function () {
182
- var newSelectOptions = selectMenuOptions; // Filter menu items based on the text input value when one exists
183
-
180
+ React.useEffect(function () {
181
+ var newSelectOptions = selectMenuOptions;
182
+ // Filter menu items based on the text input value when one exists
184
183
  if (inputValue) {
185
184
  newSelectOptions = selectMenuOptions.filter(function (menuItem) {
186
185
  return String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase());
187
- }); // When no options are found after filtering, display 'No results found'
188
-
186
+ });
187
+ // When no options are found after filtering, display 'No results found'
189
188
  if (!newSelectOptions.length) {
190
189
  newSelectOptions = [{
191
190
  isAriaDisabled: true,
192
191
  children: "No results found for \"" + inputValue + "\"",
193
192
  value: NO_RESULTS
194
193
  }];
195
- } // Open the menu when the input value changes and the new value is not empty
196
-
197
-
194
+ }
195
+ // Open the menu when the input value changes and the new value is not empty
198
196
  if (!isOpen) {
199
197
  setIsOpen(true);
200
198
  }
201
199
  }
202
-
203
200
  setSelectOptions(newSelectOptions);
204
- }, [inputValue]);
205
- React__default["default"].useEffect(function () {
201
+ }, [inputValue, isOpen, selectMenuOptions]);
202
+ React.useEffect(function () {
206
203
  if ((value == null ? void 0 : value.length) > 0) {
207
204
  setFieldValue(rest.name, value, true);
208
205
  setSelected(value);
209
206
  }
210
- }, []);
211
-
207
+ }, [rest.name, value, setFieldValue]);
212
208
  var createItemId = function createItemId(value) {
213
209
  return "select-multi-typeahead-" + value.replace(' ', '-');
214
210
  };
215
-
216
211
  var setActiveAndFocusedItem = function setActiveAndFocusedItem(itemIndex) {
217
212
  setFocusedItemIndex(itemIndex);
218
213
  var focusedItem = selectOptions[itemIndex];
219
214
  setActiveItemId(createItemId(focusedItem.value));
220
215
  };
221
-
222
216
  var resetActiveAndFocusedItem = function resetActiveAndFocusedItem() {
223
217
  setFocusedItemIndex(null);
224
218
  setActiveItemId(null);
225
219
  };
226
-
227
220
  var closeMenu = function closeMenu() {
228
221
  setIsOpen(false);
229
222
  resetActiveAndFocusedItem();
230
223
  };
231
-
232
224
  var onInputClick = function onInputClick() {
233
225
  if (!isOpen) {
234
226
  setIsOpen(true);
@@ -236,10 +228,8 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
236
228
  closeMenu();
237
229
  }
238
230
  };
239
-
240
231
  var _onSelect = function onSelect(value) {
241
232
  var _textInputRef$current;
242
-
243
233
  if (value && value !== NO_RESULTS) {
244
234
  var selectedValues = selected.includes(value) ? selected.filter(function (selection) {
245
235
  return selection !== value;
@@ -247,86 +237,68 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
247
237
  setSelected(selectedValues);
248
238
  setFieldTouched(rest.name, true, false);
249
239
  setFieldValue(rest.name, selectedValues, true);
250
- } // eslint-disable-next-line no-unused-expressions
251
-
252
-
253
- (_textInputRef$current = textInputRef.current) == null ? void 0 : _textInputRef$current.focus();
240
+ }
241
+ // eslint-disable-next-line no-unused-expressions
242
+ (_textInputRef$current = textInputRef.current) == null || _textInputRef$current.focus();
254
243
  };
255
-
256
244
  var onTextInputChange = function onTextInputChange(_event, value) {
257
245
  setInputValue(value);
258
246
  resetActiveAndFocusedItem();
259
247
  };
260
-
261
248
  var handleMenuArrowKeys = function handleMenuArrowKeys(key) {
262
249
  var indexToFocus = 0;
263
-
264
250
  if (!isOpen) {
265
251
  setIsOpen(true);
266
252
  }
267
-
268
253
  if (selectOptions.every(function (option) {
269
254
  return option.isDisabled;
270
255
  })) {
271
256
  return;
272
257
  }
273
-
274
258
  if (key === 'ArrowUp') {
275
259
  // When no index is set or at the first index, focus to the last, otherwise decrement focus index
276
260
  if (focusedItemIndex === null || focusedItemIndex === 0) {
277
261
  indexToFocus = selectOptions.length - 1;
278
262
  } else {
279
263
  indexToFocus = focusedItemIndex - 1;
280
- } // Skip disabled options
281
-
282
-
264
+ }
265
+ // Skip disabled options
283
266
  while (selectOptions[indexToFocus].isDisabled) {
284
267
  indexToFocus--;
285
-
286
268
  if (indexToFocus === -1) {
287
269
  indexToFocus = selectOptions.length - 1;
288
270
  }
289
271
  }
290
272
  }
291
-
292
273
  if (key === 'ArrowDown') {
293
274
  // When no index is set or at the last index, focus to the first, otherwise increment focus index
294
275
  if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
295
276
  indexToFocus = 0;
296
277
  } else {
297
278
  indexToFocus = focusedItemIndex + 1;
298
- } // Skip disabled options
299
-
300
-
279
+ }
280
+ // Skip disabled options
301
281
  while (selectOptions[indexToFocus].isDisabled) {
302
282
  indexToFocus++;
303
-
304
283
  if (indexToFocus === selectOptions.length) {
305
284
  indexToFocus = 0;
306
285
  }
307
286
  }
308
287
  }
309
-
310
288
  setActiveAndFocusedItem(indexToFocus);
311
289
  };
312
-
313
290
  var onInputKeyDown = function onInputKeyDown(event) {
314
291
  var focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
315
-
316
292
  switch (event.key) {
317
293
  case 'Enter':
318
294
  event.preventDefault();
319
-
320
295
  if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) {
321
296
  _onSelect(focusedItem.value);
322
297
  }
323
-
324
298
  if (!isOpen) {
325
299
  setIsOpen(true);
326
300
  }
327
-
328
301
  break;
329
-
330
302
  case 'ArrowUp':
331
303
  case 'ArrowDown':
332
304
  event.preventDefault();
@@ -334,115 +306,115 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
334
306
  break;
335
307
  }
336
308
  };
337
-
338
309
  var onToggleClick = function onToggleClick() {
339
310
  var _textInputRef$current2;
340
-
341
- setIsOpen(!isOpen); // eslint-disable-next-line no-unused-expressions
342
-
343
- textInputRef == null ? void 0 : (_textInputRef$current2 = textInputRef.current) == null ? void 0 : _textInputRef$current2.focus();
311
+ setIsOpen(!isOpen);
312
+ // eslint-disable-next-line no-unused-expressions
313
+ textInputRef == null || (_textInputRef$current2 = textInputRef.current) == null || _textInputRef$current2.focus();
344
314
  };
345
-
346
315
  var onClearButtonClick = function onClearButtonClick() {
347
316
  var _textInputRef$current3;
348
-
349
317
  setSelected([]);
350
318
  setInputValue('');
351
319
  resetActiveAndFocusedItem();
352
- textInputRef == null ? void 0 : (_textInputRef$current3 = textInputRef.current) == null ? void 0 : _textInputRef$current3.focus();
320
+ textInputRef == null || (_textInputRef$current3 = textInputRef.current) == null || _textInputRef$current3.focus();
353
321
  setFieldValue(rest.name, [], true);
354
322
  };
355
-
356
323
  var getChildren = function getChildren(value) {
357
324
  var _selectMenuOptions$fi;
358
-
359
325
  return (_selectMenuOptions$fi = selectMenuOptions.find(function (option) {
360
326
  return option.value === value;
361
327
  })) == null ? void 0 : _selectMenuOptions$fi.children;
362
328
  };
363
-
364
329
  var toggle = function toggle(toggleRef) {
365
- return React__default["default"].createElement(reactCore.MenuToggle, {
330
+ return jsxRuntime.jsx(reactCore.MenuToggle, {
366
331
  variant: 'typeahead',
367
332
  "aria-label": 'menu toggle',
368
333
  onClick: onToggleClick,
369
334
  innerRef: toggleRef,
370
335
  isExpanded: isOpen,
371
336
  isDisabled: isSubmitting || isDisabled,
372
- isFullWidth: true
373
- }, React__default["default"].createElement(reactCore.TextInputGroup, {
374
- isPlain: true
375
- }, React__default["default"].createElement(reactCore.TextInputGroupMain, _extends({
376
- value: inputValue,
377
- onClick: onInputClick,
378
- onChange: onTextInputChange,
379
- onKeyDown: onInputKeyDown,
380
- id: 'multi-typeahead-select-input',
381
- autoComplete: 'off',
382
- innerRef: textInputRef,
383
- placeholder: placeholder
384
- }, activeItemId && {
385
- 'aria-activedescendant': activeItemId
386
- }, {
387
- role: 'combobox',
388
- isExpanded: isOpen,
389
- "aria-controls": 'select-multi-typeahead-listbox'
390
- }), React__default["default"].createElement(reactCore.ChipGroup, {
391
- "aria-label": 'Current selections'
392
- }, selected.map(function (selection, index) {
393
- return React__default["default"].createElement(reactCore.Chip, {
394
- key: index,
395
- onClick: function onClick(ev) {
396
- ev.stopPropagation();
397
-
398
- _onSelect(selection);
399
- }
400
- }, getChildren(selection));
401
- }))), React__default["default"].createElement(reactCore.TextInputGroupUtilities, _extends({}, selected.length === 0 ? {
402
- style: {
403
- display: 'none'
404
- }
405
- } : {}), React__default["default"].createElement(reactCore.Button, {
406
- variant: 'plain',
407
- onClick: onClearButtonClick,
408
- "aria-label": 'Clear input value'
409
- }, React__default["default"].createElement(TimesIcon$1, {
410
- "aria-hidden": true
411
- })))));
337
+ isFullWidth: true,
338
+ children: jsxRuntime.jsxs(reactCore.TextInputGroup, {
339
+ isPlain: true,
340
+ children: [jsxRuntime.jsx(reactCore.TextInputGroupMain, _extends({
341
+ value: inputValue,
342
+ onClick: onInputClick,
343
+ onChange: onTextInputChange,
344
+ onKeyDown: onInputKeyDown,
345
+ id: 'multi-typeahead-select-input',
346
+ autoComplete: 'off',
347
+ innerRef: textInputRef,
348
+ placeholder: placeholder
349
+ }, activeItemId && {
350
+ 'aria-activedescendant': activeItemId
351
+ }, {
352
+ role: 'combobox',
353
+ isExpanded: isOpen,
354
+ "aria-controls": 'select-multi-typeahead-listbox',
355
+ children: jsxRuntime.jsx(reactCore.ChipGroup, {
356
+ "aria-label": 'Current selections',
357
+ children: selected.map(function (selection, index) {
358
+ return jsxRuntime.jsx(reactCore.Chip, {
359
+ onClick: function onClick(ev) {
360
+ ev.stopPropagation();
361
+ _onSelect(selection);
362
+ },
363
+ children: getChildren(selection)
364
+ }, index);
365
+ })
366
+ })
367
+ })), jsxRuntime.jsx(reactCore.TextInputGroupUtilities, _extends({}, selected.length === 0 ? {
368
+ style: {
369
+ display: 'none'
370
+ }
371
+ } : {}, {
372
+ children: jsxRuntime.jsx(reactCore.Button, {
373
+ variant: 'plain',
374
+ onClick: onClearButtonClick,
375
+ "aria-label": 'Clear input value',
376
+ children: jsxRuntime.jsx(TimesIcon$1, {
377
+ "aria-hidden": true
378
+ })
379
+ })
380
+ }))]
381
+ })
382
+ });
412
383
  };
413
-
414
- return React__default["default"].createElement(formGroupContainer.FormGroupContainer, {
384
+ return jsxRuntime.jsx(formGroupContainer.FormGroupContainer, {
415
385
  validated: meta.touched && meta.error ? reactCore.ValidatedOptions.error : reactCore.ValidatedOptions["default"],
416
386
  helperTextInvalid: meta.error,
417
387
  isRequired: isRequired,
418
388
  fieldId: rest.name,
419
389
  label: label,
420
- helperText: helperText
421
- }, React__default["default"].createElement(reactCore.Select, {
422
- id: 'multi-typeahead-select',
423
- isOpen: isOpen,
424
- selected: selected,
425
- onSelect: function onSelect(_ev, selection) {
426
- return _onSelect(selection);
427
- },
428
- toggle: toggle,
429
- isScrollable: true,
430
- maxMenuHeight: maxHeight,
431
- onOpenChange: function onOpenChange(isOpen) {
432
- !isOpen && closeMenu();
433
- }
434
- }, React__default["default"].createElement(reactCore.SelectList, {
435
- isAriaMultiselectable: true,
436
- id: "select-multi-typeahead-listbox"
437
- }, selectOptions == null ? void 0 : selectOptions.map(function (option, index) {
438
- return React__default["default"].createElement(reactCore.SelectOption, _extends({
439
- key: option.value || option.children,
440
- isFocused: focusedItemIndex === index,
441
- className: option.className,
442
- id: createItemId(option.value),
443
- isDisabled: option.isDisabled || isSubmitting
444
- }, option));
445
- }))));
390
+ helperText: helperText,
391
+ children: jsxRuntime.jsx(reactCore.Select, {
392
+ id: 'multi-typeahead-select',
393
+ isOpen: isOpen,
394
+ selected: selected,
395
+ onSelect: function onSelect(_ev, selection) {
396
+ return _onSelect(selection);
397
+ },
398
+ toggle: toggle,
399
+ isScrollable: true,
400
+ maxMenuHeight: maxHeight,
401
+ onOpenChange: function onOpenChange(isOpen) {
402
+ !isOpen && closeMenu();
403
+ },
404
+ children: jsxRuntime.jsx(reactCore.SelectList, {
405
+ isAriaMultiselectable: true,
406
+ id: 'select-multi-typeahead-listbox',
407
+ children: selectOptions == null ? void 0 : selectOptions.map(function (option, index) {
408
+ return jsxRuntime.jsx(reactCore.SelectOption, _extends({
409
+ isFocused: focusedItemIndex === index,
410
+ className: option.className,
411
+ id: createItemId(option.value),
412
+ isDisabled: option.isDisabled || isSubmitting
413
+ }, option), option.value || option.children);
414
+ })
415
+ })
416
+ })
417
+ });
446
418
  };
447
419
 
448
420
  exports.FormMultiSelectInput = FormMultiSelectInput;
package/dist/index.modern.js CHANGED
@@ -1,40 +1,27 @@
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
1
2
  import * as React from 'react';
2
- import React__default from 'react';
3
+ import { useState, useRef, useEffect } from 'react';
3
4
  import { ValidatedOptions, Select, SelectList, SelectOption, MenuToggle, TextInputGroup, TextInputGroupMain, ChipGroup, Chip, TextInputGroupUtilities, Button } from '@patternfly/react-core';
4
5
  import { FormGroupContainer } from '@rhc-shared-components/form-group-container';
5
6
  import { useField, useFormikContext } from 'formik';
6
7
 
7
8
  function _extends() {
8
- _extends = Object.assign || function (target) {
9
- for (var i = 1; i < arguments.length; i++) {
10
- var source = arguments[i];
11
-
12
- for (var key in source) {
13
- if (Object.prototype.hasOwnProperty.call(source, key)) {
14
- target[key] = source[key];
15
- }
16
- }
9
+ return _extends = Object.assign ? Object.assign.bind() : function (n) {
10
+ for (var e = 1; e < arguments.length; e++) {
11
+ var t = arguments[e];
12
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
17
13
  }
18
-
19
- return target;
20
- };
21
-
22
- return _extends.apply(this, arguments);
14
+ return n;
15
+ }, _extends.apply(null, arguments);
23
16
  }
24
-
25
- function _objectWithoutPropertiesLoose(source, excluded) {
26
- if (source == null) return {};
27
- var target = {};
28
- var sourceKeys = Object.keys(source);
29
- var key, i;
30
-
31
- for (i = 0; i < sourceKeys.length; i++) {
32
- key = sourceKeys[i];
33
- if (excluded.indexOf(key) >= 0) continue;
34
- target[key] = source[key];
17
+ function _objectWithoutPropertiesLoose(r, e) {
18
+ if (null == r) return {};
19
+ var t = {};
20
+ for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
21
+ if (-1 !== e.indexOf(n)) continue;
22
+ t[n] = r[n];
35
23
  }
36
-
37
- return target;
24
+ return t;
38
25
  }
39
26
 
40
27
  /******************************************************************************
@@ -51,19 +38,14 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
51
38
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
52
39
  PERFORMANCE OF THIS SOFTWARE.
53
40
  ***************************************************************************** */
54
-
55
41
  function __rest(s, e) {
56
42
  var t = {};
57
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
58
- t[p] = s[p];
59
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
60
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
61
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
62
- t[p[i]] = s[p[i]];
63
- }
43
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
44
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
45
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
46
+ }
64
47
  return t;
65
48
  }
66
-
67
49
  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
68
50
  var e = new Error(message);
69
51
  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -73,25 +55,46 @@ let currentId = 0;
73
55
  /**
74
56
  * Factory to create Icon class components for consumers
75
57
  */
76
- function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath }) {
77
- var _a;
78
- return _a = class SVGIcon extends React.Component {
79
- constructor() {
80
- super(...arguments);
81
- this.id = `icon-title-${currentId++}`;
82
- }
83
- render() {
84
- const _a = this.props, { title, className } = _a, props = __rest(_a, ["title", "className"]);
85
- const classes = className ? `pf-v5-svg ${className}` : 'pf-v5-svg';
86
- const hasTitle = Boolean(title);
87
- const viewBox = [xOffset, yOffset, width, height].join(' ');
88
- return (React.createElement("svg", Object.assign({ className: classes, viewBox: viewBox, fill: "currentColor", "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img", width: "1em", height: "1em" }, props),
89
- hasTitle && React.createElement("title", { id: this.id }, title),
90
- React.createElement("path", { d: svgPath })));
91
- }
92
- },
93
- _a.displayName = name,
94
- _a;
58
+ function createIcon({
59
+ name,
60
+ xOffset = 0,
61
+ yOffset = 0,
62
+ width,
63
+ height,
64
+ svgPath
65
+ }) {
66
+ var _a;
67
+ return _a = class SVGIcon extends React.Component {
68
+ constructor() {
69
+ super(...arguments);
70
+ this.id = `icon-title-${currentId++}`;
71
+ }
72
+ render() {
73
+ const _b = this.props,
74
+ {
75
+ title,
76
+ className
77
+ } = _b,
78
+ props = __rest(_b, ["title", "className"]);
79
+ const classes = className ? `pf-v5-svg ${className}` : 'pf-v5-svg';
80
+ const hasTitle = Boolean(title);
81
+ const viewBox = [xOffset, yOffset, width, height].join(' ');
82
+ return React.createElement("svg", Object.assign({
83
+ className: classes,
84
+ viewBox: viewBox,
85
+ fill: "currentColor",
86
+ "aria-labelledby": hasTitle ? this.id : null,
87
+ "aria-hidden": hasTitle ? null : true,
88
+ role: "img",
89
+ width: "1em",
90
+ height: "1em"
91
+ }, props), hasTitle && React.createElement("title", {
92
+ id: this.id
93
+ }, title), React.createElement("path", {
94
+ d: svgPath
95
+ }));
96
+ }
97
+ }, _a.displayName = name, _a;
95
98
  }
96
99
 
97
100
  const TimesIconConfig = {
@@ -100,28 +103,24 @@ const TimesIconConfig = {
100
103
  width: 352,
101
104
  svgPath: 'M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z',
102
105
  yOffset: 0,
103
- xOffset: 0,
106
+ xOffset: 0
104
107
  };
105
-
106
108
  const TimesIcon = createIcon(TimesIconConfig);
107
-
108
109
  var TimesIcon$1 = TimesIcon;
109
110
 
110
- const _excluded = ["label", "isRequired", "children", "selectMenuOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "extraProps", "isScrollable"];
111
-
111
+ const _excluded = ["label", "isRequired", "selectMenuOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "extraProps", "isScrollable"];
112
112
  const FormMultiSelectInput = _ref => {
113
113
  let {
114
- label,
115
- isRequired,
116
- selectMenuOptions,
117
- ariaLabel = 'Select a value',
118
- placeholder,
119
- helperText,
120
- maxHeight,
121
- isDisabled = false
122
- } = _ref,
123
- rest = _objectWithoutPropertiesLoose(_ref, _excluded);
124
-
114
+ label,
115
+ isRequired,
116
+ selectMenuOptions,
117
+ ariaLabel = 'Select a value',
118
+ placeholder,
119
+ helperText,
120
+ maxHeight,
121
+ isDisabled = false
122
+ } = _ref,
123
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded);
125
124
  const [, meta] = useField(rest);
126
125
  const {
127
126
  value
@@ -131,61 +130,54 @@ const FormMultiSelectInput = _ref => {
131
130
  setFieldValue,
132
131
  setFieldTouched
133
132
  } = useFormikContext();
134
- const [isOpen, setIsOpen] = React__default.useState(false);
135
- const [inputValue, setInputValue] = React__default.useState('');
136
- const [selected, setSelected] = React__default.useState([]);
137
- const [selectOptions, setSelectOptions] = React__default.useState(selectMenuOptions);
138
- const [focusedItemIndex, setFocusedItemIndex] = React__default.useState(null);
139
- const [activeItemId, setActiveItemId] = React__default.useState(null);
140
- const textInputRef = React__default.useRef();
133
+ const [isOpen, setIsOpen] = useState(false);
134
+ const [inputValue, setInputValue] = useState('');
135
+ const [selected, setSelected] = useState([]);
136
+ const [selectOptions, setSelectOptions] = useState(selectMenuOptions);
137
+ const [focusedItemIndex, setFocusedItemIndex] = useState(null);
138
+ const [activeItemId, setActiveItemId] = useState(null);
139
+ const textInputRef = useRef(null);
141
140
  const NO_RESULTS = 'no results';
142
- React__default.useEffect(() => {
143
- let newSelectOptions = selectMenuOptions; // Filter menu items based on the text input value when one exists
144
-
141
+ useEffect(() => {
142
+ let newSelectOptions = selectMenuOptions;
143
+ // Filter menu items based on the text input value when one exists
145
144
  if (inputValue) {
146
- newSelectOptions = selectMenuOptions.filter(menuItem => String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase())); // When no options are found after filtering, display 'No results found'
147
-
145
+ newSelectOptions = selectMenuOptions.filter(menuItem => String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase()));
146
+ // When no options are found after filtering, display 'No results found'
148
147
  if (!newSelectOptions.length) {
149
148
  newSelectOptions = [{
150
149
  isAriaDisabled: true,
151
150
  children: `No results found for "${inputValue}"`,
152
151
  value: NO_RESULTS
153
152
  }];
154
- } // Open the menu when the input value changes and the new value is not empty
155
-
156
-
153
+ }
154
+ // Open the menu when the input value changes and the new value is not empty
157
155
  if (!isOpen) {
158
156
  setIsOpen(true);
159
157
  }
160
158
  }
161
-
162
159
  setSelectOptions(newSelectOptions);
163
- }, [inputValue]);
164
- React__default.useEffect(() => {
160
+ }, [inputValue, isOpen, selectMenuOptions]);
161
+ useEffect(() => {
165
162
  if ((value == null ? void 0 : value.length) > 0) {
166
163
  setFieldValue(rest.name, value, true);
167
164
  setSelected(value);
168
165
  }
169
- }, []);
170
-
166
+ }, [rest.name, value, setFieldValue]);
171
167
  const createItemId = value => `select-multi-typeahead-${value.replace(' ', '-')}`;
172
-
173
168
  const setActiveAndFocusedItem = itemIndex => {
174
169
  setFocusedItemIndex(itemIndex);
175
170
  const focusedItem = selectOptions[itemIndex];
176
171
  setActiveItemId(createItemId(focusedItem.value));
177
172
  };
178
-
179
173
  const resetActiveAndFocusedItem = () => {
180
174
  setFocusedItemIndex(null);
181
175
  setActiveItemId(null);
182
176
  };
183
-
184
177
  const closeMenu = () => {
185
178
  setIsOpen(false);
186
179
  resetActiveAndFocusedItem();
187
180
  };
188
-
189
181
  const onInputClick = () => {
190
182
  if (!isOpen) {
191
183
  setIsOpen(true);
@@ -193,93 +185,73 @@ const FormMultiSelectInput = _ref => {
193
185
  closeMenu();
194
186
  }
195
187
  };
196
-
197
188
  const onSelect = value => {
198
189
  var _textInputRef$current;
199
-
200
190
  if (value && value !== NO_RESULTS) {
201
191
  const selectedValues = selected.includes(value) ? selected.filter(selection => selection !== value) : [...selected, value];
202
192
  setSelected(selectedValues);
203
193
  setFieldTouched(rest.name, true, false);
204
194
  setFieldValue(rest.name, selectedValues, true);
205
- } // eslint-disable-next-line no-unused-expressions
206
-
207
-
208
- (_textInputRef$current = textInputRef.current) == null ? void 0 : _textInputRef$current.focus();
195
+ }
196
+ // eslint-disable-next-line no-unused-expressions
197
+ (_textInputRef$current = textInputRef.current) == null || _textInputRef$current.focus();
209
198
  };
210
-
211
199
  const onTextInputChange = (_event, value) => {
212
200
  setInputValue(value);
213
201
  resetActiveAndFocusedItem();
214
202
  };
215
-
216
203
  const handleMenuArrowKeys = key => {
217
204
  let indexToFocus = 0;
218
-
219
205
  if (!isOpen) {
220
206
  setIsOpen(true);
221
207
  }
222
-
223
208
  if (selectOptions.every(option => option.isDisabled)) {
224
209
  return;
225
210
  }
226
-
227
211
  if (key === 'ArrowUp') {
228
212
  // When no index is set or at the first index, focus to the last, otherwise decrement focus index
229
213
  if (focusedItemIndex === null || focusedItemIndex === 0) {
230
214
  indexToFocus = selectOptions.length - 1;
231
215
  } else {
232
216
  indexToFocus = focusedItemIndex - 1;
233
- } // Skip disabled options
234
-
235
-
217
+ }
218
+ // Skip disabled options
236
219
  while (selectOptions[indexToFocus].isDisabled) {
237
220
  indexToFocus--;
238
-
239
221
  if (indexToFocus === -1) {
240
222
  indexToFocus = selectOptions.length - 1;
241
223
  }
242
224
  }
243
225
  }
244
-
245
226
  if (key === 'ArrowDown') {
246
227
  // When no index is set or at the last index, focus to the first, otherwise increment focus index
247
228
  if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
248
229
  indexToFocus = 0;
249
230
  } else {
250
231
  indexToFocus = focusedItemIndex + 1;
251
- } // Skip disabled options
252
-
253
-
232
+ }
233
+ // Skip disabled options
254
234
  while (selectOptions[indexToFocus].isDisabled) {
255
235
  indexToFocus++;
256
-
257
236
  if (indexToFocus === selectOptions.length) {
258
237
  indexToFocus = 0;
259
238
  }
260
239
  }
261
240
  }
262
-
263
241
  setActiveAndFocusedItem(indexToFocus);
264
242
  };
265
-
266
243
  const onInputKeyDown = event => {
267
244
  const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
268
-
269
245
  switch (event.key) {
270
246
  case 'Enter':
271
247
  event.preventDefault();
272
-
273
248
  if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) {
274
249
  onSelect(focusedItem.value);
275
250
  }
276
-
277
251
  if (!isOpen) {
278
252
  setIsOpen(true);
279
253
  }
280
-
281
254
  break;
282
-
283
255
  case 'ArrowUp':
284
256
  case 'ArrowDown':
285
257
  event.preventDefault();
@@ -287,104 +259,105 @@ const FormMultiSelectInput = _ref => {
287
259
  break;
288
260
  }
289
261
  };
290
-
291
262
  const onToggleClick = () => {
292
263
  var _textInputRef$current2;
293
-
294
- setIsOpen(!isOpen); // eslint-disable-next-line no-unused-expressions
295
-
296
- textInputRef == null ? void 0 : (_textInputRef$current2 = textInputRef.current) == null ? void 0 : _textInputRef$current2.focus();
264
+ setIsOpen(!isOpen);
265
+ // eslint-disable-next-line no-unused-expressions
266
+ textInputRef == null || (_textInputRef$current2 = textInputRef.current) == null || _textInputRef$current2.focus();
297
267
  };
298
-
299
268
  const onClearButtonClick = () => {
300
269
  var _textInputRef$current3;
301
-
302
270
  setSelected([]);
303
271
  setInputValue('');
304
272
  resetActiveAndFocusedItem();
305
- textInputRef == null ? void 0 : (_textInputRef$current3 = textInputRef.current) == null ? void 0 : _textInputRef$current3.focus();
273
+ textInputRef == null || (_textInputRef$current3 = textInputRef.current) == null || _textInputRef$current3.focus();
306
274
  setFieldValue(rest.name, [], true);
307
275
  };
308
-
309
276
  const getChildren = value => {
310
277
  var _selectMenuOptions$fi;
311
-
312
278
  return (_selectMenuOptions$fi = selectMenuOptions.find(option => option.value === value)) == null ? void 0 : _selectMenuOptions$fi.children;
313
279
  };
314
-
315
- const toggle = toggleRef => React__default.createElement(MenuToggle, {
280
+ const toggle = toggleRef => jsx(MenuToggle, {
316
281
  variant: 'typeahead',
317
282
  "aria-label": 'menu toggle',
318
283
  onClick: onToggleClick,
319
284
  innerRef: toggleRef,
320
285
  isExpanded: isOpen,
321
286
  isDisabled: isSubmitting || isDisabled,
322
- isFullWidth: true
323
- }, React__default.createElement(TextInputGroup, {
324
- isPlain: true
325
- }, React__default.createElement(TextInputGroupMain, _extends({
326
- value: inputValue,
327
- onClick: onInputClick,
328
- onChange: onTextInputChange,
329
- onKeyDown: onInputKeyDown,
330
- id: 'multi-typeahead-select-input',
331
- autoComplete: 'off',
332
- innerRef: textInputRef,
333
- placeholder: placeholder
334
- }, activeItemId && {
335
- 'aria-activedescendant': activeItemId
336
- }, {
337
- role: 'combobox',
338
- isExpanded: isOpen,
339
- "aria-controls": 'select-multi-typeahead-listbox'
340
- }), React__default.createElement(ChipGroup, {
341
- "aria-label": 'Current selections'
342
- }, selected.map((selection, index) => React__default.createElement(Chip, {
343
- key: index,
344
- onClick: ev => {
345
- ev.stopPropagation();
346
- onSelect(selection);
347
- }
348
- }, getChildren(selection))))), React__default.createElement(TextInputGroupUtilities, _extends({}, selected.length === 0 ? {
349
- style: {
350
- display: 'none'
351
- }
352
- } : {}), React__default.createElement(Button, {
353
- variant: 'plain',
354
- onClick: onClearButtonClick,
355
- "aria-label": 'Clear input value'
356
- }, React__default.createElement(TimesIcon$1, {
357
- "aria-hidden": true
358
- })))));
359
-
360
- return React__default.createElement(FormGroupContainer, {
287
+ isFullWidth: true,
288
+ children: jsxs(TextInputGroup, {
289
+ isPlain: true,
290
+ children: [jsx(TextInputGroupMain, _extends({
291
+ value: inputValue,
292
+ onClick: onInputClick,
293
+ onChange: onTextInputChange,
294
+ onKeyDown: onInputKeyDown,
295
+ id: 'multi-typeahead-select-input',
296
+ autoComplete: 'off',
297
+ innerRef: textInputRef,
298
+ placeholder: placeholder
299
+ }, activeItemId && {
300
+ 'aria-activedescendant': activeItemId
301
+ }, {
302
+ role: 'combobox',
303
+ isExpanded: isOpen,
304
+ "aria-controls": 'select-multi-typeahead-listbox',
305
+ children: jsx(ChipGroup, {
306
+ "aria-label": 'Current selections',
307
+ children: selected.map((selection, index) => jsx(Chip, {
308
+ onClick: ev => {
309
+ ev.stopPropagation();
310
+ onSelect(selection);
311
+ },
312
+ children: getChildren(selection)
313
+ }, index))
314
+ })
315
+ })), jsx(TextInputGroupUtilities, _extends({}, selected.length === 0 ? {
316
+ style: {
317
+ display: 'none'
318
+ }
319
+ } : {}, {
320
+ children: jsx(Button, {
321
+ variant: 'plain',
322
+ onClick: onClearButtonClick,
323
+ "aria-label": 'Clear input value',
324
+ children: jsx(TimesIcon$1, {
325
+ "aria-hidden": true
326
+ })
327
+ })
328
+ }))]
329
+ })
330
+ });
331
+ return jsx(FormGroupContainer, {
361
332
  validated: meta.touched && meta.error ? ValidatedOptions.error : ValidatedOptions.default,
362
333
  helperTextInvalid: meta.error,
363
334
  isRequired: isRequired,
364
335
  fieldId: rest.name,
365
336
  label: label,
366
- helperText: helperText
367
- }, React__default.createElement(Select, {
368
- id: 'multi-typeahead-select',
369
- isOpen: isOpen,
370
- selected: selected,
371
- onSelect: (_ev, selection) => onSelect(selection),
372
- toggle: toggle,
373
- isScrollable: true,
374
- maxMenuHeight: maxHeight,
375
- onOpenChange: isOpen => {
376
- !isOpen && closeMenu();
377
- }
378
- }, React__default.createElement(SelectList, {
379
- isAriaMultiselectable: true,
380
- id: "select-multi-typeahead-listbox"
381
- }, selectOptions == null ? void 0 : selectOptions.map((option, index) => React__default.createElement(SelectOption, _extends({
382
- key: option.value || option.children,
383
- isFocused: focusedItemIndex === index,
384
- className: option.className,
385
- id: createItemId(option.value),
386
- isDisabled: option.isDisabled || isSubmitting
387
- }, option))))));
337
+ helperText: helperText,
338
+ children: jsx(Select, {
339
+ id: 'multi-typeahead-select',
340
+ isOpen: isOpen,
341
+ selected: selected,
342
+ onSelect: (_ev, selection) => onSelect(selection),
343
+ toggle: toggle,
344
+ isScrollable: true,
345
+ maxMenuHeight: maxHeight,
346
+ onOpenChange: isOpen => {
347
+ !isOpen && closeMenu();
348
+ },
349
+ children: jsx(SelectList, {
350
+ isAriaMultiselectable: true,
351
+ id: 'select-multi-typeahead-listbox',
352
+ children: selectOptions == null ? void 0 : selectOptions.map((option, index) => jsx(SelectOption, _extends({
353
+ isFocused: focusedItemIndex === index,
354
+ className: option.className,
355
+ id: createItemId(option.value),
356
+ isDisabled: option.isDisabled || isSubmitting
357
+ }, option), option.value || option.children))
358
+ })
359
+ })
360
+ });
388
361
  };
389
362
 
390
363
  export { FormMultiSelectInput };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rhc-shared-components/form-multi-select-component",
3
- "version": "1.0.5",
3
+ "version": "2.0.0",
4
4
  "description": "project description",
5
5
  "author": "shkale",
6
6
  "license": "MIT",
@@ -30,13 +30,14 @@
30
30
  "react-dom": ">=16.13.1"
31
31
  },
32
32
  "devDependencies": {
33
+ "@patternfly/react-core": "^5.3.4",
33
34
  "@testing-library/jest-dom": "^4.2.4",
34
35
  "@testing-library/react": "^9.5.0",
35
36
  "@testing-library/user-event": "^7.2.1",
36
37
  "@types/jest": "^25.1.4",
37
38
  "@types/node": "^12.12.38",
38
- "@types/react": "^16.9.27",
39
- "@types/react-dom": "^16.9.7",
39
+ "@types/react": "^19.2.0",
40
+ "@types/react-dom": "^19.2.0",
40
41
  "@typescript-eslint/eslint-plugin": "^2.26.0",
41
42
  "@typescript-eslint/parser": "^2.26.0",
42
43
  "babel-eslint": "^10.0.3",
@@ -51,24 +52,21 @@
51
52
  "eslint-plugin-promise": "^4.2.1",
52
53
  "eslint-plugin-react": "^7.17.0",
53
54
  "eslint-plugin-standard": "^4.0.1",
55
+ "formik": "^2.1.4",
54
56
  "microbundle": "^0.13.3",
55
57
  "npm-run-all": "^4.1.5",
56
58
  "prettier": "^2.0.4",
57
- "react": "^16.13.1",
58
- "react-dom": "^16.13.1",
59
+ "react": "^19.2.0",
60
+ "react-dom": "^19.2.0",
59
61
  "react-scripts": "^3.4.1",
60
62
  "rimraf": "^3.0.2",
61
63
  "sass": "^1.57.1",
62
64
  "typescript": "~5.7.2"
63
65
  },
64
66
  "dependencies": {
65
- "@patternfly/react-core": "5.3.0",
66
- "@rhc-shared-components/form-group-container": "^1.0.1",
67
+ "@rhc-shared-components/form-group-container": "^3.0.1",
67
68
  "@types/lodash": "^4.14.177",
68
- "formik": "^2.1.4",
69
- "lodash": "^4.17.21",
70
- "react": "^16.13.1",
71
- "react-dom": "^16.13.1"
69
+ "lodash": "^4.17.21"
72
70
  },
73
71
  "files": [
74
72
  "dist"