@rhc-shared-components/form-multi-select-component 1.0.6 → 2.0.1

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 +206 -229
  3. package/dist/index.modern.js +172 -194
  4. package/package.json +8 -12
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,167 @@ 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
+ if (textInputRef != null && textInputRef.current && isRequired !== undefined) {
182
+ textInputRef.current.setAttribute('aria-required', String(isRequired));
183
+ }
184
+ }, [isRequired, textInputRef.current]);
185
+ React.useEffect(function () {
186
+ var newSelectOptions = selectMenuOptions;
187
+ // Filter menu items based on the text input value when one exists
184
188
  if (inputValue) {
185
189
  newSelectOptions = selectMenuOptions.filter(function (menuItem) {
186
190
  return String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase());
187
- }); // When no options are found after filtering, display 'No results found'
188
-
191
+ });
192
+ // When no options are found after filtering, display 'No results found'
189
193
  if (!newSelectOptions.length) {
190
194
  newSelectOptions = [{
191
195
  isAriaDisabled: true,
192
196
  children: "No results found for \"" + inputValue + "\"",
193
197
  value: NO_RESULTS
194
198
  }];
195
- } // Open the menu when the input value changes and the new value is not empty
196
-
197
-
199
+ }
200
+ // Open the menu when the input value changes and the new value is not empty
198
201
  if (!isOpen) {
199
202
  setIsOpen(true);
200
203
  }
201
204
  }
202
-
203
205
  setSelectOptions(newSelectOptions);
204
206
  }, [inputValue, isOpen, selectMenuOptions]);
205
- React__default["default"].useEffect(function () {
207
+ React.useEffect(function () {
206
208
  if ((value == null ? void 0 : value.length) > 0) {
207
209
  setFieldValue(rest.name, value, true);
208
210
  setSelected(value);
209
211
  }
210
212
  }, [rest.name, value, setFieldValue]);
211
-
212
213
  var createItemId = function createItemId(value) {
213
214
  return "select-multi-typeahead-" + value.replace(' ', '-');
214
215
  };
215
-
216
216
  var setActiveAndFocusedItem = function setActiveAndFocusedItem(itemIndex) {
217
217
  setFocusedItemIndex(itemIndex);
218
218
  var focusedItem = selectOptions[itemIndex];
219
219
  setActiveItemId(createItemId(focusedItem.value));
220
220
  };
221
-
222
221
  var resetActiveAndFocusedItem = function resetActiveAndFocusedItem() {
223
222
  setFocusedItemIndex(null);
224
223
  setActiveItemId(null);
225
224
  };
226
-
227
225
  var closeMenu = function closeMenu() {
228
226
  setIsOpen(false);
229
227
  resetActiveAndFocusedItem();
230
228
  };
231
-
232
229
  var onInputClick = function onInputClick() {
233
230
  if (!isOpen) {
234
231
  setIsOpen(true);
@@ -236,10 +233,8 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
236
233
  closeMenu();
237
234
  }
238
235
  };
239
-
240
236
  var _onSelect = function onSelect(value) {
241
237
  var _textInputRef$current;
242
-
243
238
  if (value && value !== NO_RESULTS) {
244
239
  var selectedValues = selected.includes(value) ? selected.filter(function (selection) {
245
240
  return selection !== value;
@@ -247,86 +242,68 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
247
242
  setSelected(selectedValues);
248
243
  setFieldTouched(rest.name, true, false);
249
244
  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();
245
+ }
246
+ // eslint-disable-next-line no-unused-expressions
247
+ (_textInputRef$current = textInputRef.current) == null || _textInputRef$current.focus();
254
248
  };
255
-
256
249
  var onTextInputChange = function onTextInputChange(_event, value) {
257
250
  setInputValue(value);
258
251
  resetActiveAndFocusedItem();
259
252
  };
260
-
261
253
  var handleMenuArrowKeys = function handleMenuArrowKeys(key) {
262
254
  var indexToFocus = 0;
263
-
264
255
  if (!isOpen) {
265
256
  setIsOpen(true);
266
257
  }
267
-
268
258
  if (selectOptions.every(function (option) {
269
259
  return option.isDisabled;
270
260
  })) {
271
261
  return;
272
262
  }
273
-
274
263
  if (key === 'ArrowUp') {
275
264
  // When no index is set or at the first index, focus to the last, otherwise decrement focus index
276
265
  if (focusedItemIndex === null || focusedItemIndex === 0) {
277
266
  indexToFocus = selectOptions.length - 1;
278
267
  } else {
279
268
  indexToFocus = focusedItemIndex - 1;
280
- } // Skip disabled options
281
-
282
-
269
+ }
270
+ // Skip disabled options
283
271
  while (selectOptions[indexToFocus].isDisabled) {
284
272
  indexToFocus--;
285
-
286
273
  if (indexToFocus === -1) {
287
274
  indexToFocus = selectOptions.length - 1;
288
275
  }
289
276
  }
290
277
  }
291
-
292
278
  if (key === 'ArrowDown') {
293
279
  // When no index is set or at the last index, focus to the first, otherwise increment focus index
294
280
  if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
295
281
  indexToFocus = 0;
296
282
  } else {
297
283
  indexToFocus = focusedItemIndex + 1;
298
- } // Skip disabled options
299
-
300
-
284
+ }
285
+ // Skip disabled options
301
286
  while (selectOptions[indexToFocus].isDisabled) {
302
287
  indexToFocus++;
303
-
304
288
  if (indexToFocus === selectOptions.length) {
305
289
  indexToFocus = 0;
306
290
  }
307
291
  }
308
292
  }
309
-
310
293
  setActiveAndFocusedItem(indexToFocus);
311
294
  };
312
-
313
295
  var onInputKeyDown = function onInputKeyDown(event) {
314
296
  var focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
315
-
316
297
  switch (event.key) {
317
298
  case 'Enter':
318
299
  event.preventDefault();
319
-
320
300
  if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) {
321
301
  _onSelect(focusedItem.value);
322
302
  }
323
-
324
303
  if (!isOpen) {
325
304
  setIsOpen(true);
326
305
  }
327
-
328
306
  break;
329
-
330
307
  case 'ArrowUp':
331
308
  case 'ArrowDown':
332
309
  event.preventDefault();
@@ -334,115 +311,115 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
334
311
  break;
335
312
  }
336
313
  };
337
-
338
314
  var onToggleClick = function onToggleClick() {
339
315
  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();
316
+ setIsOpen(!isOpen);
317
+ // eslint-disable-next-line no-unused-expressions
318
+ textInputRef == null || (_textInputRef$current2 = textInputRef.current) == null || _textInputRef$current2.focus();
344
319
  };
345
-
346
320
  var onClearButtonClick = function onClearButtonClick() {
347
321
  var _textInputRef$current3;
348
-
349
322
  setSelected([]);
350
323
  setInputValue('');
351
324
  resetActiveAndFocusedItem();
352
- textInputRef == null ? void 0 : (_textInputRef$current3 = textInputRef.current) == null ? void 0 : _textInputRef$current3.focus();
325
+ textInputRef == null || (_textInputRef$current3 = textInputRef.current) == null || _textInputRef$current3.focus();
353
326
  setFieldValue(rest.name, [], true);
354
327
  };
355
-
356
328
  var getChildren = function getChildren(value) {
357
329
  var _selectMenuOptions$fi;
358
-
359
330
  return (_selectMenuOptions$fi = selectMenuOptions.find(function (option) {
360
331
  return option.value === value;
361
332
  })) == null ? void 0 : _selectMenuOptions$fi.children;
362
333
  };
363
-
364
334
  var toggle = function toggle(toggleRef) {
365
- return React__default["default"].createElement(reactCore.MenuToggle, {
335
+ return jsxRuntime.jsx(reactCore.MenuToggle, {
366
336
  variant: 'typeahead',
367
337
  "aria-label": 'menu toggle',
368
338
  onClick: onToggleClick,
369
339
  innerRef: toggleRef,
370
340
  isExpanded: isOpen,
371
341
  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
- })))));
342
+ isFullWidth: true,
343
+ children: jsxRuntime.jsxs(reactCore.TextInputGroup, {
344
+ isPlain: true,
345
+ children: [jsxRuntime.jsx(reactCore.TextInputGroupMain, _extends({
346
+ value: inputValue,
347
+ onClick: onInputClick,
348
+ onChange: onTextInputChange,
349
+ onKeyDown: onInputKeyDown,
350
+ id: 'multi-typeahead-select-input',
351
+ autoComplete: 'off',
352
+ innerRef: textInputRef,
353
+ placeholder: placeholder
354
+ }, activeItemId && {
355
+ 'aria-activedescendant': activeItemId
356
+ }, {
357
+ role: 'combobox',
358
+ isExpanded: isOpen,
359
+ "aria-controls": 'select-multi-typeahead-listbox',
360
+ children: jsxRuntime.jsx(reactCore.ChipGroup, {
361
+ "aria-label": 'Current selections',
362
+ children: selected.map(function (selection, index) {
363
+ return jsxRuntime.jsx(reactCore.Chip, {
364
+ onClick: function onClick(ev) {
365
+ ev.stopPropagation();
366
+ _onSelect(selection);
367
+ },
368
+ children: getChildren(selection)
369
+ }, index);
370
+ })
371
+ })
372
+ })), jsxRuntime.jsx(reactCore.TextInputGroupUtilities, _extends({}, selected.length === 0 ? {
373
+ style: {
374
+ display: 'none'
375
+ }
376
+ } : {}, {
377
+ children: jsxRuntime.jsx(reactCore.Button, {
378
+ variant: 'plain',
379
+ onClick: onClearButtonClick,
380
+ "aria-label": 'Clear input value',
381
+ children: jsxRuntime.jsx(TimesIcon$1, {
382
+ "aria-hidden": true
383
+ })
384
+ })
385
+ }))]
386
+ })
387
+ });
412
388
  };
413
-
414
- return React__default["default"].createElement(formGroupContainer.FormGroupContainer, {
389
+ return jsxRuntime.jsx(formGroupContainer.FormGroupContainer, {
415
390
  validated: meta.touched && meta.error ? reactCore.ValidatedOptions.error : reactCore.ValidatedOptions["default"],
416
391
  helperTextInvalid: meta.error,
417
392
  isRequired: isRequired,
418
393
  fieldId: rest.name,
419
394
  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
- }))));
395
+ helperText: helperText,
396
+ children: jsxRuntime.jsx(reactCore.Select, {
397
+ id: 'multi-typeahead-select',
398
+ isOpen: isOpen,
399
+ selected: selected,
400
+ onSelect: function onSelect(_ev, selection) {
401
+ return _onSelect(selection);
402
+ },
403
+ toggle: toggle,
404
+ isScrollable: true,
405
+ maxMenuHeight: maxHeight,
406
+ onOpenChange: function onOpenChange(isOpen) {
407
+ !isOpen && closeMenu();
408
+ },
409
+ children: jsxRuntime.jsx(reactCore.SelectList, {
410
+ isAriaMultiselectable: true,
411
+ id: 'select-multi-typeahead-listbox',
412
+ children: selectOptions == null ? void 0 : selectOptions.map(function (option, index) {
413
+ return jsxRuntime.jsx(reactCore.SelectOption, _extends({
414
+ isFocused: focusedItemIndex === index,
415
+ className: option.className,
416
+ id: createItemId(option.value),
417
+ isDisabled: option.isDisabled || isSubmitting
418
+ }, option), option.value || option.children);
419
+ })
420
+ })
421
+ })
422
+ });
446
423
  };
447
424
 
448
425
  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,59 @@ 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
+ if (textInputRef != null && textInputRef.current && isRequired !== undefined) {
143
+ textInputRef.current.setAttribute('aria-required', String(isRequired));
144
+ }
145
+ }, [isRequired, textInputRef.current]);
146
+ useEffect(() => {
147
+ let newSelectOptions = selectMenuOptions;
148
+ // Filter menu items based on the text input value when one exists
145
149
  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
-
150
+ newSelectOptions = selectMenuOptions.filter(menuItem => String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase()));
151
+ // When no options are found after filtering, display 'No results found'
148
152
  if (!newSelectOptions.length) {
149
153
  newSelectOptions = [{
150
154
  isAriaDisabled: true,
151
155
  children: `No results found for "${inputValue}"`,
152
156
  value: NO_RESULTS
153
157
  }];
154
- } // Open the menu when the input value changes and the new value is not empty
155
-
156
-
158
+ }
159
+ // Open the menu when the input value changes and the new value is not empty
157
160
  if (!isOpen) {
158
161
  setIsOpen(true);
159
162
  }
160
163
  }
161
-
162
164
  setSelectOptions(newSelectOptions);
163
165
  }, [inputValue, isOpen, selectMenuOptions]);
164
- React__default.useEffect(() => {
166
+ useEffect(() => {
165
167
  if ((value == null ? void 0 : value.length) > 0) {
166
168
  setFieldValue(rest.name, value, true);
167
169
  setSelected(value);
168
170
  }
169
171
  }, [rest.name, value, setFieldValue]);
170
-
171
172
  const createItemId = value => `select-multi-typeahead-${value.replace(' ', '-')}`;
172
-
173
173
  const setActiveAndFocusedItem = itemIndex => {
174
174
  setFocusedItemIndex(itemIndex);
175
175
  const focusedItem = selectOptions[itemIndex];
176
176
  setActiveItemId(createItemId(focusedItem.value));
177
177
  };
178
-
179
178
  const resetActiveAndFocusedItem = () => {
180
179
  setFocusedItemIndex(null);
181
180
  setActiveItemId(null);
182
181
  };
183
-
184
182
  const closeMenu = () => {
185
183
  setIsOpen(false);
186
184
  resetActiveAndFocusedItem();
187
185
  };
188
-
189
186
  const onInputClick = () => {
190
187
  if (!isOpen) {
191
188
  setIsOpen(true);
@@ -193,93 +190,73 @@ const FormMultiSelectInput = _ref => {
193
190
  closeMenu();
194
191
  }
195
192
  };
196
-
197
193
  const onSelect = value => {
198
194
  var _textInputRef$current;
199
-
200
195
  if (value && value !== NO_RESULTS) {
201
196
  const selectedValues = selected.includes(value) ? selected.filter(selection => selection !== value) : [...selected, value];
202
197
  setSelected(selectedValues);
203
198
  setFieldTouched(rest.name, true, false);
204
199
  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();
200
+ }
201
+ // eslint-disable-next-line no-unused-expressions
202
+ (_textInputRef$current = textInputRef.current) == null || _textInputRef$current.focus();
209
203
  };
210
-
211
204
  const onTextInputChange = (_event, value) => {
212
205
  setInputValue(value);
213
206
  resetActiveAndFocusedItem();
214
207
  };
215
-
216
208
  const handleMenuArrowKeys = key => {
217
209
  let indexToFocus = 0;
218
-
219
210
  if (!isOpen) {
220
211
  setIsOpen(true);
221
212
  }
222
-
223
213
  if (selectOptions.every(option => option.isDisabled)) {
224
214
  return;
225
215
  }
226
-
227
216
  if (key === 'ArrowUp') {
228
217
  // When no index is set or at the first index, focus to the last, otherwise decrement focus index
229
218
  if (focusedItemIndex === null || focusedItemIndex === 0) {
230
219
  indexToFocus = selectOptions.length - 1;
231
220
  } else {
232
221
  indexToFocus = focusedItemIndex - 1;
233
- } // Skip disabled options
234
-
235
-
222
+ }
223
+ // Skip disabled options
236
224
  while (selectOptions[indexToFocus].isDisabled) {
237
225
  indexToFocus--;
238
-
239
226
  if (indexToFocus === -1) {
240
227
  indexToFocus = selectOptions.length - 1;
241
228
  }
242
229
  }
243
230
  }
244
-
245
231
  if (key === 'ArrowDown') {
246
232
  // When no index is set or at the last index, focus to the first, otherwise increment focus index
247
233
  if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
248
234
  indexToFocus = 0;
249
235
  } else {
250
236
  indexToFocus = focusedItemIndex + 1;
251
- } // Skip disabled options
252
-
253
-
237
+ }
238
+ // Skip disabled options
254
239
  while (selectOptions[indexToFocus].isDisabled) {
255
240
  indexToFocus++;
256
-
257
241
  if (indexToFocus === selectOptions.length) {
258
242
  indexToFocus = 0;
259
243
  }
260
244
  }
261
245
  }
262
-
263
246
  setActiveAndFocusedItem(indexToFocus);
264
247
  };
265
-
266
248
  const onInputKeyDown = event => {
267
249
  const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
268
-
269
250
  switch (event.key) {
270
251
  case 'Enter':
271
252
  event.preventDefault();
272
-
273
253
  if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) {
274
254
  onSelect(focusedItem.value);
275
255
  }
276
-
277
256
  if (!isOpen) {
278
257
  setIsOpen(true);
279
258
  }
280
-
281
259
  break;
282
-
283
260
  case 'ArrowUp':
284
261
  case 'ArrowDown':
285
262
  event.preventDefault();
@@ -287,104 +264,105 @@ const FormMultiSelectInput = _ref => {
287
264
  break;
288
265
  }
289
266
  };
290
-
291
267
  const onToggleClick = () => {
292
268
  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();
269
+ setIsOpen(!isOpen);
270
+ // eslint-disable-next-line no-unused-expressions
271
+ textInputRef == null || (_textInputRef$current2 = textInputRef.current) == null || _textInputRef$current2.focus();
297
272
  };
298
-
299
273
  const onClearButtonClick = () => {
300
274
  var _textInputRef$current3;
301
-
302
275
  setSelected([]);
303
276
  setInputValue('');
304
277
  resetActiveAndFocusedItem();
305
- textInputRef == null ? void 0 : (_textInputRef$current3 = textInputRef.current) == null ? void 0 : _textInputRef$current3.focus();
278
+ textInputRef == null || (_textInputRef$current3 = textInputRef.current) == null || _textInputRef$current3.focus();
306
279
  setFieldValue(rest.name, [], true);
307
280
  };
308
-
309
281
  const getChildren = value => {
310
282
  var _selectMenuOptions$fi;
311
-
312
283
  return (_selectMenuOptions$fi = selectMenuOptions.find(option => option.value === value)) == null ? void 0 : _selectMenuOptions$fi.children;
313
284
  };
314
-
315
- const toggle = toggleRef => React__default.createElement(MenuToggle, {
285
+ const toggle = toggleRef => jsx(MenuToggle, {
316
286
  variant: 'typeahead',
317
287
  "aria-label": 'menu toggle',
318
288
  onClick: onToggleClick,
319
289
  innerRef: toggleRef,
320
290
  isExpanded: isOpen,
321
291
  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, {
292
+ isFullWidth: true,
293
+ children: jsxs(TextInputGroup, {
294
+ isPlain: true,
295
+ children: [jsx(TextInputGroupMain, _extends({
296
+ value: inputValue,
297
+ onClick: onInputClick,
298
+ onChange: onTextInputChange,
299
+ onKeyDown: onInputKeyDown,
300
+ id: 'multi-typeahead-select-input',
301
+ autoComplete: 'off',
302
+ innerRef: textInputRef,
303
+ placeholder: placeholder
304
+ }, activeItemId && {
305
+ 'aria-activedescendant': activeItemId
306
+ }, {
307
+ role: 'combobox',
308
+ isExpanded: isOpen,
309
+ "aria-controls": 'select-multi-typeahead-listbox',
310
+ children: jsx(ChipGroup, {
311
+ "aria-label": 'Current selections',
312
+ children: selected.map((selection, index) => jsx(Chip, {
313
+ onClick: ev => {
314
+ ev.stopPropagation();
315
+ onSelect(selection);
316
+ },
317
+ children: getChildren(selection)
318
+ }, index))
319
+ })
320
+ })), jsx(TextInputGroupUtilities, _extends({}, selected.length === 0 ? {
321
+ style: {
322
+ display: 'none'
323
+ }
324
+ } : {}, {
325
+ children: jsx(Button, {
326
+ variant: 'plain',
327
+ onClick: onClearButtonClick,
328
+ "aria-label": 'Clear input value',
329
+ children: jsx(TimesIcon$1, {
330
+ "aria-hidden": true
331
+ })
332
+ })
333
+ }))]
334
+ })
335
+ });
336
+ return jsx(FormGroupContainer, {
361
337
  validated: meta.touched && meta.error ? ValidatedOptions.error : ValidatedOptions.default,
362
338
  helperTextInvalid: meta.error,
363
339
  isRequired: isRequired,
364
340
  fieldId: rest.name,
365
341
  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))))));
342
+ helperText: helperText,
343
+ children: jsx(Select, {
344
+ id: 'multi-typeahead-select',
345
+ isOpen: isOpen,
346
+ selected: selected,
347
+ onSelect: (_ev, selection) => onSelect(selection),
348
+ toggle: toggle,
349
+ isScrollable: true,
350
+ maxMenuHeight: maxHeight,
351
+ onOpenChange: isOpen => {
352
+ !isOpen && closeMenu();
353
+ },
354
+ children: jsx(SelectList, {
355
+ isAriaMultiselectable: true,
356
+ id: 'select-multi-typeahead-listbox',
357
+ children: selectOptions == null ? void 0 : selectOptions.map((option, index) => jsx(SelectOption, _extends({
358
+ isFocused: focusedItemIndex === index,
359
+ className: option.className,
360
+ id: createItemId(option.value),
361
+ isDisabled: option.isDisabled || isSubmitting
362
+ }, option), option.value || option.children))
363
+ })
364
+ })
365
+ });
388
366
  };
389
367
 
390
368
  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.6",
3
+ "version": "2.0.1",
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,19 @@
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
- "@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"
67
+ "@rhc-shared-components/form-group-container": "^3.0.1"
72
68
  },
73
69
  "files": [
74
70
  "dist"