@carbon/ibm-products 2.65.0-rc.0 → 2.66.0-rc.0

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState, useContext, useEffect } from 'react';
 import { DatePicker, DatePickerInput } from '@carbon/react';
 import PropTypes from '../../../../_virtual/index.js';
@@ -13,46 +13,38 @@ import { useTranslations } from '../../utils/useTranslations.js';
 import { checkForMultiSelectOperator, blockClass, focusThisField } from '../../utils/util.js';
 import { ConditionBuilderContext } from '../../ConditionBuilderContext/ConditionBuilderProvider.js';
 
-var ConditionBuilderItemDate = function ConditionBuilderItemDate(_ref) {
-  var conditionState = _ref.conditionState,
-    onChange = _ref.onChange,
-    parentRef = _ref.parentRef,
-    config = _ref.config;
-  var DatePickerInputRef = useRef(null);
-  var _useTranslations = useTranslations(['startText', 'endText']),
-    _useTranslations2 = _slicedToArray(_useTranslations, 2),
-    startText = _useTranslations2[0],
-    endText = _useTranslations2[1];
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    dateFromState = _useState2[0],
-    setDateFromState = _useState2[1];
-  var dateFormat = config.dateFormat || 'm/d/Y';
-  var _useContext = useContext(ConditionBuilderContext),
-    conditionBuilderRef = _useContext.conditionBuilderRef;
-  var datePickerType = conditionState.operator == 'between' || checkForMultiSelectOperator(conditionState, config) ? 'range' : 'single';
-  useEffect(function () {
+const ConditionBuilderItemDate = _ref => {
+  let {
+    conditionState,
+    onChange,
+    parentRef,
+    config
+  } = _ref;
+  const DatePickerInputRef = useRef(null);
+  const [startText, endText] = useTranslations(['startText', 'endText']);
+  const [dateFromState, setDateFromState] = useState();
+  const dateFormat = config.dateFormat || 'm/d/Y';
+  const {
+    conditionBuilderRef
+  } = useContext(ConditionBuilderContext);
+  const datePickerType = conditionState.operator == 'between' || checkForMultiSelectOperator(conditionState, config) ? 'range' : 'single';
+  useEffect(() => {
     if (datePickerType === 'range') {
-      var _getParsedDate;
-      setDateFromState((_getParsedDate = getParsedDate(conditionState.value)) !== null && _getParsedDate !== void 0 ? _getParsedDate : undefined);
+      setDateFromState(getParsedDate(conditionState.value) ?? undefined);
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   //This method will convert the date string from the condition state to date object based on the dateFormat
-  var getParsedDate = function getParsedDate(dateToParse) {
-    var _DatePickerInputRef$c;
+  const getParsedDate = dateToParse => {
     // @ts-ignore
-    var calendarInstance = DatePickerInputRef === null || DatePickerInputRef === void 0 || (_DatePickerInputRef$c = DatePickerInputRef.current) === null || _DatePickerInputRef$c === void 0 ? void 0 : _DatePickerInputRef$c.calendar;
+    const calendarInstance = DatePickerInputRef?.current?.calendar;
     if (!calendarInstance || !dateToParse) {
       return null;
     }
-    var _dateToParse$split = dateToParse.split(' - '),
-      _dateToParse$split2 = _slicedToArray(_dateToParse$split, 2),
-      startDate = _dateToParse$split2[0],
-      endDate = _dateToParse$split2[1];
-    var parsedDates = [];
+    const [startDate, endDate] = dateToParse.split(' - ');
+    const parsedDates = [];
     if (startDate && startDate !== 'INVALID') {
       parsedDates.push(calendarInstance.parseDate(startDate, dateFormat));
     }
@@ -61,21 +53,20 @@ var ConditionBuilderItemDate = function ConditionBuilderItemDate(_ref) {
     }
     return parsedDates.length ? parsedDates : null;
   };
-  var onCloseHandler = function onCloseHandler(selectedDate, selectedDateStr, instance) {
-    var formattedDate = selectedDateStr;
+  const onCloseHandler = (selectedDate, selectedDateStr, instance) => {
+    let formattedDate = selectedDateStr;
     if (datePickerType === 'range' && selectedDate.length === 2) {
-      formattedDate = "".concat(instance.formatDate(selectedDate[0], dateFormat), " - ").concat(instance.formatDate(selectedDate[1], dateFormat));
+      formattedDate = `${instance.formatDate(selectedDate[0], dateFormat)} - ${instance.formatDate(selectedDate[1], dateFormat)}`;
     }
     onChange(formattedDate || 'INVALID');
   };
 
   // this will close the popover on enter key press
   //Note: has to use onKeyPress instead of onKeyDown, since core is stop propagating for onKeydown(fixEventsPlugin.js)
-  var onKeyPressHandler = function onKeyPressHandler(evt) {
+  const onKeyPressHandler = evt => {
     if (evt.key === 'Enter') {
-      var _DatePickerInputRef$c2;
       // @ts-ignore
-      var calendarInstance = DatePickerInputRef === null || DatePickerInputRef === void 0 || (_DatePickerInputRef$c2 = DatePickerInputRef.current) === null || _DatePickerInputRef$c2 === void 0 ? void 0 : _DatePickerInputRef$c2.calendar;
+      const calendarInstance = DatePickerInputRef?.current?.calendar;
       if (calendarInstance) {
         onCloseHandler(calendarInstance.selectedDates, evt.target.value, calendarInstance);
       }
@@ -83,14 +74,14 @@ var ConditionBuilderItemDate = function ConditionBuilderItemDate(_ref) {
     }
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__item-date ")
+    className: `${blockClass}__item-date `
   }, datePickerType == 'single' && /*#__PURE__*/React__default.createElement(DatePicker, _extends({}, config, {
     ref: DatePickerInputRef,
     datePickerType: "single",
     value: conditionState.value,
     onClose: onCloseHandler,
     onKeyPress: onKeyPressHandler,
-    appendTo: parentRef === null || parentRef === void 0 ? void 0 : parentRef.current
+    appendTo: parentRef?.current
   }), /*#__PURE__*/React__default.createElement(DatePickerInput, {
     id: "datePicker",
     placeholder: "dd/mm/yyyy",
@@ -101,7 +92,7 @@ var ConditionBuilderItemDate = function ConditionBuilderItemDate(_ref) {
     onClose: onCloseHandler,
     onKeyPress: onKeyPressHandler,
     value: dateFromState,
-    appendTo: parentRef === null || parentRef === void 0 ? void 0 : parentRef.current
+    appendTo: parentRef?.current
   }), /*#__PURE__*/React__default.createElement(DatePickerInput, {
     id: "datePickerStart",
     placeholder: "dd/mm/yyyy",

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js

@@ -5,31 +5,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import { NumberInput } from '@carbon/react';
 import PropTypes from '../../../../_virtual/index.js';
 import { useTranslations } from '../../utils/useTranslations.js';
 import { blockClass } from '../../utils/util.js';
 
-var ConditionBuilderItemNumber = function ConditionBuilderItemNumber(_ref) {
-  var _conditionState$prope;
-  var conditionState = _ref.conditionState,
-    config = _ref.config,
-    onChange = _ref.onChange;
-  var _useTranslations = useTranslations(['invalidNumberWarnText']),
-    _useTranslations2 = _slicedToArray(_useTranslations, 1),
-    invalidNumberWarnText = _useTranslations2[0];
-  var onChangeHandler = function onChangeHandler(e, _ref2) {
-    var value = _ref2.value;
+const ConditionBuilderItemNumber = _ref => {
+  let {
+    conditionState,
+    config,
+    onChange
+  } = _ref;
+  const [invalidNumberWarnText] = useTranslations(['invalidNumberWarnText']);
+  const onChangeHandler = (e, _ref2) => {
+    let {
+      value
+    } = _ref2;
     if (value !== '' && !isNaN(value) && checkIfValid(value)) {
-      var _config$unit;
-      onChange("".concat(value, " ").concat((_config$unit = config.unit) !== null && _config$unit !== void 0 ? _config$unit : ''));
+      onChange(`${value} ${config.unit ?? ''}`);
     } else {
       onChange('INVALID');
     }
   };
-  var checkIfValid = function checkIfValid(value) {
+  const checkIfValid = value => {
     if (config.max !== undefined && config.min === undefined && value > config.max) {
       return false;
     }
@@ -41,16 +41,15 @@ var ConditionBuilderItemNumber = function ConditionBuilderItemNumber(_ref) {
     }
     return true;
   };
-  var getDefaultValue = function getDefaultValue() {
-    var _split$, _conditionState$value;
-    return (_split$ = (_conditionState$value = conditionState.value) === null || _conditionState$value === void 0 || (_conditionState$value = _conditionState$value.split(' ')) === null || _conditionState$value === void 0 ? void 0 : _conditionState$value[0]) !== null && _split$ !== void 0 ? _split$ : '';
+  const getDefaultValue = () => {
+    return conditionState.value?.split(' ')?.[0] ?? '';
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__item-number")
+    className: `${blockClass}__item-number`
   }, /*#__PURE__*/React__default.createElement(NumberInput, _extends({}, config, {
     label: conditionState.property,
     hideLabel: true,
-    id: (_conditionState$prope = conditionState.property) === null || _conditionState$prope === void 0 ? void 0 : _conditionState$prope.replace(/\s/g, ''),
+    id: conditionState.property?.replace(/\s/g, ''),
     invalidText: invalidNumberWarnText,
     allowEmpty: true,
     onChange: onChangeHandler,

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useContext, useRef, useState, useEffect } from 'react';
 import { Search } from '@carbon/react';
 import { Checkmark } from '@carbon/react/icons';
@@ -14,97 +13,87 @@ import { ConditionBuilderContext } from '../../ConditionBuilderContext/Condition
 import { useTranslations } from '../../utils/useTranslations.js';
 import { blockClass, onKeyDownHandlerForSearch } from '../../utils/util.js';
 
-var ItemOption = function ItemOption(_ref) {
-  var _ref$conditionState = _ref.conditionState,
-    conditionState = _ref$conditionState === void 0 ? {} : _ref$conditionState,
-    _ref$config = _ref.config,
-    config = _ref$config === void 0 ? {} : _ref$config,
-    onChange = _ref.onChange;
-  var _useContext = useContext(ConditionBuilderContext),
-    popOverSearchThreshold = _useContext.popOverSearchThreshold;
-  var contentRef = useRef(null);
-  var _useTranslations = useTranslations(['propertyText', 'clearSearchText']),
-    _useTranslations2 = _slicedToArray(_useTranslations, 2),
-    propertyText = _useTranslations2[0],
-    clearSearchText = _useTranslations2[1];
-  var _useContext2 = useContext(ConditionBuilderContext),
-    conditionBuilderRef = _useContext2.conditionBuilderRef;
-  var allOptions = config.options;
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    searchValue = _useState2[0],
-    setSearchValue = _useState2[1];
-  var selection = conditionState.value;
-  var filteredItems = searchValue ? allOptions === null || allOptions === void 0 ? void 0 : allOptions.filter(function (opt) {
-    var _opt$label;
-    return (_opt$label = opt.label) === null || _opt$label === void 0 ? void 0 : _opt$label.toLowerCase().includes(searchValue.toLowerCase());
-  }) : allOptions;
-  useEffect(function () {
+const ItemOption = _ref => {
+  let {
+    conditionState = {},
+    config = {},
+    onChange
+  } = _ref;
+  const {
+    popOverSearchThreshold
+  } = useContext(ConditionBuilderContext);
+  const contentRef = useRef(null);
+  const [propertyText, clearSearchText] = useTranslations(['propertyText', 'clearSearchText']);
+  const {
+    conditionBuilderRef
+  } = useContext(ConditionBuilderContext);
+  const allOptions = config.options;
+  const [searchValue, setSearchValue] = useState('');
+  const selection = conditionState.value;
+  const filteredItems = searchValue ? allOptions?.filter(opt => opt.label?.toLowerCase().includes(searchValue.toLowerCase())) : allOptions;
+  useEffect(() => {
     //this will focus the first input field in the popover
 
     if (contentRef.current) {
-      var _contentRef$current;
-      var firstFocusableElement = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.querySelector('input, button,li');
+      const firstFocusableElement = contentRef.current?.querySelector('input, button,li');
       if (firstFocusableElement) {
         firstFocusableElement.focus();
       }
     }
   }, [allOptions]);
-  var onClickHandler = function onClickHandler(evt, option) {
+  const onClickHandler = (evt, option) => {
     onChange(option.id, evt);
   };
-  var onSearchChangeHandler = function onSearchChangeHandler(evt) {
-    var value = evt.target.value;
+  const onSearchChangeHandler = evt => {
+    const {
+      value
+    } = evt.target;
     setSearchValue(value);
   };
-  var getAriaLabel = function getAriaLabel() {
+  const getAriaLabel = () => {
     return conditionState.label ? conditionState.label : propertyText;
   };
-  var getStatementContent = function getStatementContent(option) {
+  const getStatementContent = option => {
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(blockClass, "__statement_wrapper")
+      className: `${blockClass}__statement_wrapper`
     }, /*#__PURE__*/React__default.createElement("div", null, option.label, " (", option.connector, ")"), /*#__PURE__*/React__default.createElement("div", null, option.secondaryLabel));
   };
   if (!allOptions) {
     return;
   }
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__item-option"),
+    className: `${blockClass}__item-option`,
     ref: contentRef
   }, popOverSearchThreshold && allOptions.length > popOverSearchThreshold && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__item-option__search")
+    className: `${blockClass}__item-option__search`
   }, /*#__PURE__*/React__default.createElement(Search, {
     size: "sm",
     labelText: clearSearchText,
     closeButtonLabelText: clearSearchText,
     onChange: onSearchChangeHandler,
-    onKeyDown: function onKeyDown(evt) {
-      return onKeyDownHandlerForSearch(evt, conditionBuilderRef);
-    }
+    onKeyDown: evt => onKeyDownHandlerForSearch(evt, conditionBuilderRef)
   })), /*#__PURE__*/React__default.createElement("ul", {
     "aria-label": getAriaLabel(),
     role: "listbox"
-  }, filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map(function (option) {
-    var isSelected = selection === option.id;
-    var Icon = option.icon;
+  }, filteredItems?.map(option => {
+    const isSelected = selection === option.id;
+    const Icon = option.icon;
     return /*#__PURE__*/React__default.createElement("li", {
       tabIndex: 0,
       key: option.id,
       role: "option",
       "aria-selected": isSelected,
-      className: "".concat(blockClass, "__item-option__option"),
-      onKeyUp: function onKeyUp() {
+      className: `${blockClass}__item-option__option`,
+      onKeyUp: () => {
         return false;
       },
-      onClick: function onClick(evt) {
-        return onClickHandler(evt, option);
-      }
+      onClick: evt => onClickHandler(evt, option)
     }, /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(blockClass, "__item-option__option-content")
+      className: `${blockClass}__item-option__option-content`
     }, /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__item-option__option-label")
+      className: `${blockClass}__item-option__option-label`
     }, Icon && /*#__PURE__*/React__default.createElement(Icon, null), config.isStatement ? getStatementContent(option) : option.label), isSelected && /*#__PURE__*/React__default.createElement(Checkmark, {
-      className: "".concat(blockClass, "__checkmark")
+      className: `${blockClass}__checkmark`
     })));
   })));
 };

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useContext, useRef, useState, useEffect } from 'react';
 import { SelectSkeleton, Search, Button } from '@carbon/react';
 import { CheckboxCheckedFilled, Checkbox, Checkmark } from '@carbon/react/icons';
@@ -15,37 +14,28 @@ import { useTranslations } from '../../utils/useTranslations.js';
 import { checkForMultiSelectOperator, blockClass, onKeyDownHandlerForSearch } from '../../utils/util.js';
 
 var _SelectSkeleton, _CheckboxCheckedFille, _Checkbox;
-var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
-  var _ref$conditionState = _ref.conditionState,
-    conditionState = _ref$conditionState === void 0 ? {} : _ref$conditionState,
-    _ref$config = _ref.config,
-    config = _ref$config === void 0 ? {} : _ref$config,
-    onChange = _ref.onChange;
-  var multiSelectable = checkForMultiSelectOperator(conditionState, config);
-  var _useContext = useContext(ConditionBuilderContext),
-    popOverSearchThreshold = _useContext.popOverSearchThreshold,
-    getOptions = _useContext.getOptions,
-    rootState = _useContext.rootState;
-  var _useTranslations = useTranslations(['propertyText', 'clearSearchText']),
-    _useTranslations2 = _slicedToArray(_useTranslations, 2),
-    propertyText = _useTranslations2[0],
-    clearSearchText = _useTranslations2[1];
-  var _useContext2 = useContext(ConditionBuilderContext),
-    conditionBuilderRef = _useContext2.conditionBuilderRef;
-  var contentRef = useRef(null);
-  var _useState = useState(config.options),
-    _useState2 = _slicedToArray(_useState, 2),
-    allOptions = _useState2[0],
-    setAllOptions = _useState2[1];
-  var _useState3 = useState(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    searchValue = _useState4[0],
-    setSearchValue = _useState4[1];
-  var filteredItems = allOptions === null || allOptions === void 0 ? void 0 : allOptions.filter(function (opt) {
-    return opt.label.toLowerCase().includes(searchValue.toLowerCase());
-  });
-  var selection = Array.isArray(conditionState.value) ? conditionState.value : conditionState.value !== undefined ? [conditionState.value] : [];
-  useEffect(function () {
+const ItemOptionForValueField = _ref => {
+  let {
+    conditionState = {},
+    config = {},
+    onChange
+  } = _ref;
+  const multiSelectable = checkForMultiSelectOperator(conditionState, config);
+  const {
+    popOverSearchThreshold,
+    getOptions,
+    rootState
+  } = useContext(ConditionBuilderContext);
+  const [propertyText, clearSearchText] = useTranslations(['propertyText', 'clearSearchText']);
+  const {
+    conditionBuilderRef
+  } = useContext(ConditionBuilderContext);
+  const contentRef = useRef(null);
+  const [allOptions, setAllOptions] = useState(config.options);
+  const [searchValue, setSearchValue] = useState('');
+  const filteredItems = allOptions?.filter(opt => opt.label.toLowerCase().includes(searchValue.toLowerCase()));
+  const selection = Array.isArray(conditionState.value) ? conditionState.value : conditionState.value !== undefined ? [conditionState.value] : [];
+  useEffect(() => {
     //this commented code is kept as intentional. Alternate approach to pass async options instead of getOptions callback.
     // if(rest['data-name'] == 'valueField'){
     //   const fetchData = async () => {
@@ -67,66 +57,47 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
     // }
 
     if (!allOptions && getOptions) {
-      var fetchData = /*#__PURE__*/function () {
-        var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-          var response;
-          return _regeneratorRuntime().wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                _context.next = 2;
-                return getOptions(rootState, conditionState);
-              case 2:
-                response = _context.sent;
-                if ((response === null || response === void 0 ? void 0 : response.length) > 0 && Object.keys(response[0]).includes('label') && Object.keys(response[0]).includes('id')) {
-                  setAllOptions(response);
-                }
-              case 4:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee);
-        }));
-        return function fetchData() {
-          return _ref2.apply(this, arguments);
-        };
-      }();
+      const fetchData = async () => {
+        const response = await getOptions(rootState, conditionState);
+        if (response?.length > 0 && Object.keys(response[0]).includes('label') && Object.keys(response[0]).includes('id')) {
+          setAllOptions(response);
+        }
+      };
       fetchData(); // Call the async method
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     //this will focus the first input field in the popover
 
     if (contentRef.current) {
-      var firstFocusableElement = contentRef.current.querySelector('input, button,li');
+      const firstFocusableElement = contentRef.current.querySelector('input, button,li');
       if (firstFocusableElement) {
-        firstFocusableElement === null || firstFocusableElement === void 0 || firstFocusableElement.focus();
+        firstFocusableElement?.focus();
       }
     }
   }, [allOptions]);
-  var handleSelectAll = function handleSelectAll(evt) {
+  const handleSelectAll = evt => {
     if (evt.currentTarget.dataset.selectedAll == 'false') {
       onChange(undefined);
     } else {
       onChange(allOptions);
     }
   };
-  var onSearchChangeHandler = function onSearchChangeHandler(evt) {
-    var value = evt.target.value;
+  const onSearchChangeHandler = evt => {
+    const {
+      value
+    } = evt.target;
     setSearchValue(value);
   };
-  var onClickHandler = function onClickHandler(evt, option, isSelected) {
-    var updatedSelections = selection.filter(function (item) {
-      return item !== 'INVALID';
-    });
+  const onClickHandler = (evt, option, isSelected) => {
+    const updatedSelections = selection.filter(item => item !== 'INVALID');
     if (multiSelectable) {
       if (isSelected) {
-        var items = updatedSelections.filter(function (v) {
-          return v.id !== option.id;
-        });
+        const items = updatedSelections.filter(v => v.id !== option.id);
         onChange(items.length > 0 ? items : undefined);
       } else {
-        onChange([].concat(_toConsumableArray(updatedSelections), [option]));
+        onChange([...updatedSelections, option]);
       }
     } else {
       onChange(option, evt);
@@ -136,66 +107,60 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
       //stop propagate event , since this closes the popover when clicked on checkboxes which are SVGs.
     }
   };
-  var getAriaLabel = function getAriaLabel() {
+  const getAriaLabel = () => {
     return conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : propertyText;
   };
   if (!allOptions) {
     return _SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React__default.createElement(SelectSkeleton, null));
   }
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__item-option"),
+    className: `${blockClass}__item-option`,
     ref: contentRef
   }, popOverSearchThreshold && allOptions.length > popOverSearchThreshold && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__item-option__search")
+    className: `${blockClass}__item-option__search`
   }, /*#__PURE__*/React__default.createElement(Search, {
     size: "sm",
     labelText: clearSearchText,
     closeButtonLabelText: clearSearchText,
     onChange: onSearchChangeHandler,
-    onKeyDown: function onKeyDown(evt) {
-      return onKeyDownHandlerForSearch(evt, conditionBuilderRef);
-    }
+    onKeyDown: evt => onKeyDownHandlerForSearch(evt, conditionBuilderRef)
   })), multiSelectable && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__multiselectSelectionStatusContainer")
+    className: `${blockClass}__multiselectSelectionStatusContainer`
   }, /*#__PURE__*/React__default.createElement("label", null, selection.length, "/", allOptions.length, " Selected"), /*#__PURE__*/React__default.createElement(Button, {
     kind: 'ghost',
     size: 'sm',
-    "data-selected-all": "".concat(selection.length == 0 ? true : false),
+    "data-selected-all": `${selection.length == 0 ? true : false}`,
     onClick: handleSelectAll,
-    className: "".concat(blockClass, "__selectAll-button")
+    className: `${blockClass}__selectAll-button`
   }, selection.length == 0 ? 'Select all' : 'Deselect all')), /*#__PURE__*/React__default.createElement("ul", {
     "aria-label": getAriaLabel(),
     role: "listbox",
     "data-multi-select": multiSelectable
-  }, filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map(function (option) {
-    var isSelected = selection.map(function (option) {
-      return option.id;
-    }).includes(option.id);
-    var Icon = option.icon;
+  }, filteredItems?.map(option => {
+    const isSelected = selection.map(option => option.id).includes(option.id);
+    const Icon = option.icon;
     return /*#__PURE__*/React__default.createElement("li", {
       tabIndex: 0,
       key: option.id,
       role: "option",
       "aria-selected": isSelected,
-      className: "".concat(blockClass, "__item-option__option"),
-      onKeyUp: function onKeyUp() {
+      className: `${blockClass}__item-option__option`,
+      onKeyUp: () => {
         return false;
       },
-      onClick: function onClick(evt) {
-        return onClickHandler(evt, option, isSelected);
-      }
+      onClick: evt => onClickHandler(evt, option, isSelected)
     }, /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(blockClass, "__item-option__option-content")
+      className: `${blockClass}__item-option__option-content`
     }, multiSelectable ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__option-check-box")
+      className: `${blockClass}__option-check-box`
     }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default.createElement(CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default.createElement(Checkbox, null))), /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__item-option__option-label")
+      className: `${blockClass}__item-option__option-label`
     }, option.label), Icon && /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__option-icon")
+      className: `${blockClass}__option-icon`
     }, /*#__PURE__*/React__default.createElement(Icon, null))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__item-option__option-label")
+      className: `${blockClass}__item-option__option-label`
     }, Icon && /*#__PURE__*/React__default.createElement(Icon, null), option.label), isSelected && /*#__PURE__*/React__default.createElement(Checkmark, {
-      className: "".concat(blockClass, "__checkmark")
+      className: `${blockClass}__checkmark`
     }))));
   })));
 };

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js

@@ -5,29 +5,30 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectSpread2 as _objectSpread2 } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import { TextArea, TextInput } from '@carbon/react';
 import PropTypes from '../../../../_virtual/index.js';
 import { checkIsValid, blockClass } from '../../utils/util.js';
 
-var ConditionBuilderItemText = function ConditionBuilderItemText(_ref) {
-  var _conditionState$prope;
-  var conditionState = _ref.conditionState,
-    _onChange = _ref.onChange,
-    config = _ref.config,
-    type = _ref.type;
-  var inputProps = _objectSpread2(_objectSpread2({}, config), {}, {
+const ConditionBuilderItemText = _ref => {
+  let {
+    conditionState,
+    onChange,
+    config,
+    type
+  } = _ref;
+  const inputProps = {
+    ...config,
     hideLabel: true,
     value: checkIsValid(conditionState.value) ? conditionState.value : '',
-    id: (_conditionState$prope = conditionState.property) === null || _conditionState$prope === void 0 ? void 0 : _conditionState$prope.replace(/\s/g, ''),
-    onChange: function onChange(evt) {
-      _onChange(evt.target.value);
+    id: conditionState.property?.replace(/\s/g, ''),
+    onChange: evt => {
+      onChange(evt.target.value);
     },
     labelText: conditionState.property
-  });
+  };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__item-text")
+    className: `${blockClass}__item-text`
   }, type == 'textarea' ? /*#__PURE__*/React__default.createElement(TextArea, inputProps) : /*#__PURE__*/React__default.createElement(TextInput, inputProps));
 };
 ConditionBuilderItemText.propTypes = {