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

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

@@ -15,46 +15,38 @@ var useTranslations = require('../../utils/useTranslations.js');
 var util = require('../../utils/util.js');
 var ConditionBuilderProvider = require('../../ConditionBuilderContext/ConditionBuilderProvider.js');
 
-var ConditionBuilderItemDate = function ConditionBuilderItemDate(_ref) {
-  var conditionState = _ref.conditionState,
-    onChange = _ref.onChange,
-    parentRef = _ref.parentRef,
-    config = _ref.config;
-  var DatePickerInputRef = React.useRef(null);
-  var _useTranslations = useTranslations.useTranslations(['startText', 'endText']),
-    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 2),
-    startText = _useTranslations2[0],
-    endText = _useTranslations2[1];
-  var _useState = React.useState(),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    dateFromState = _useState2[0],
-    setDateFromState = _useState2[1];
-  var dateFormat = config.dateFormat || 'm/d/Y';
-  var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
-    conditionBuilderRef = _useContext.conditionBuilderRef;
-  var datePickerType = conditionState.operator == 'between' || util.checkForMultiSelectOperator(conditionState, config) ? 'range' : 'single';
-  React.useEffect(function () {
+const ConditionBuilderItemDate = _ref => {
+  let {
+    conditionState,
+    onChange,
+    parentRef,
+    config
+  } = _ref;
+  const DatePickerInputRef = React.useRef(null);
+  const [startText, endText] = useTranslations.useTranslations(['startText', 'endText']);
+  const [dateFromState, setDateFromState] = React.useState();
+  const dateFormat = config.dateFormat || 'm/d/Y';
+  const {
+    conditionBuilderRef
+  } = React.useContext(ConditionBuilderProvider.ConditionBuilderContext);
+  const datePickerType = conditionState.operator == 'between' || util.checkForMultiSelectOperator(conditionState, config) ? 'range' : 'single';
+  React.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 = _rollupPluginBabelHelpers.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));
     }
@@ -63,21 +55,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);
       }
@@ -85,14 +76,14 @@ var ConditionBuilderItemDate = function ConditionBuilderItemDate(_ref) {
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(util.blockClass, "__item-date ")
+    className: `${util.blockClass}__item-date `
   }, datePickerType == 'single' && /*#__PURE__*/React.createElement(react.DatePicker, _rollupPluginBabelHelpers.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.createElement(react.DatePickerInput, {
     id: "datePicker",
     placeholder: "dd/mm/yyyy",
@@ -103,7 +94,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.createElement(react.DatePickerInput, {
     id: "datePickerStart",
     placeholder: "dd/mm/yyyy",

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

@@ -14,24 +14,24 @@ var index = require('../../../../_virtual/index.js');
 var useTranslations = require('../../utils/useTranslations.js');
 var util = require('../../utils/util.js');
 
-var ConditionBuilderItemNumber = function ConditionBuilderItemNumber(_ref) {
-  var _conditionState$prope;
-  var conditionState = _ref.conditionState,
-    config = _ref.config,
-    onChange = _ref.onChange;
-  var _useTranslations = useTranslations.useTranslations(['invalidNumberWarnText']),
-    _useTranslations2 = _rollupPluginBabelHelpers.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.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;
     }
@@ -43,16 +43,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.createElement("div", {
-    className: "".concat(util.blockClass, "__item-number")
+    className: `${util.blockClass}__item-number`
   }, /*#__PURE__*/React.createElement(react.NumberInput, _rollupPluginBabelHelpers.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/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js

@@ -7,7 +7,6 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
@@ -16,97 +15,87 @@ var ConditionBuilderProvider = require('../../ConditionBuilderContext/ConditionB
 var useTranslations = require('../../utils/useTranslations.js');
 var util = require('../../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 = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
-    popOverSearchThreshold = _useContext.popOverSearchThreshold;
-  var contentRef = React.useRef(null);
-  var _useTranslations = useTranslations.useTranslations(['propertyText', 'clearSearchText']),
-    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 2),
-    propertyText = _useTranslations2[0],
-    clearSearchText = _useTranslations2[1];
-  var _useContext2 = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
-    conditionBuilderRef = _useContext2.conditionBuilderRef;
-  var allOptions = config.options;
-  var _useState = React.useState(''),
-    _useState2 = _rollupPluginBabelHelpers.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;
-  React.useEffect(function () {
+const ItemOption = _ref => {
+  let {
+    conditionState = {},
+    config = {},
+    onChange
+  } = _ref;
+  const {
+    popOverSearchThreshold
+  } = React.useContext(ConditionBuilderProvider.ConditionBuilderContext);
+  const contentRef = React.useRef(null);
+  const [propertyText, clearSearchText] = useTranslations.useTranslations(['propertyText', 'clearSearchText']);
+  const {
+    conditionBuilderRef
+  } = React.useContext(ConditionBuilderProvider.ConditionBuilderContext);
+  const allOptions = config.options;
+  const [searchValue, setSearchValue] = React.useState('');
+  const selection = conditionState.value;
+  const filteredItems = searchValue ? allOptions?.filter(opt => opt.label?.toLowerCase().includes(searchValue.toLowerCase())) : allOptions;
+  React.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.createElement("div", {
-      className: "".concat(util.blockClass, "__statement_wrapper")
+      className: `${util.blockClass}__statement_wrapper`
     }, /*#__PURE__*/React.createElement("div", null, option.label, " (", option.connector, ")"), /*#__PURE__*/React.createElement("div", null, option.secondaryLabel));
   };
   if (!allOptions) {
     return;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(util.blockClass, "__item-option"),
+    className: `${util.blockClass}__item-option`,
     ref: contentRef
   }, popOverSearchThreshold && allOptions.length > popOverSearchThreshold && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(util.blockClass, "__item-option__search")
+    className: `${util.blockClass}__item-option__search`
   }, /*#__PURE__*/React.createElement(react.Search, {
     size: "sm",
     labelText: clearSearchText,
     closeButtonLabelText: clearSearchText,
     onChange: onSearchChangeHandler,
-    onKeyDown: function onKeyDown(evt) {
-      return util.onKeyDownHandlerForSearch(evt, conditionBuilderRef);
-    }
+    onKeyDown: evt => util.onKeyDownHandlerForSearch(evt, conditionBuilderRef)
   })), /*#__PURE__*/React.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.createElement("li", {
       tabIndex: 0,
       key: option.id,
       role: "option",
       "aria-selected": isSelected,
-      className: "".concat(util.blockClass, "__item-option__option"),
-      onKeyUp: function onKeyUp() {
+      className: `${util.blockClass}__item-option__option`,
+      onKeyUp: () => {
         return false;
       },
-      onClick: function onClick(evt) {
-        return onClickHandler(evt, option);
-      }
+      onClick: evt => onClickHandler(evt, option)
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(util.blockClass, "__item-option__option-content")
+      className: `${util.blockClass}__item-option__option-content`
     }, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(util.blockClass, "__item-option__option-label")
+      className: `${util.blockClass}__item-option__option-label`
     }, Icon && /*#__PURE__*/React.createElement(Icon, null), config.isStatement ? getStatementContent(option) : option.label), isSelected && /*#__PURE__*/React.createElement(icons.Checkmark, {
-      className: "".concat(util.blockClass, "__checkmark")
+      className: `${util.blockClass}__checkmark`
     })));
   })));
 };

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

@@ -7,7 +7,6 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
@@ -17,37 +16,28 @@ var useTranslations = require('../../utils/useTranslations.js');
 var util = require('../../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 = util.checkForMultiSelectOperator(conditionState, config);
-  var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
-    popOverSearchThreshold = _useContext.popOverSearchThreshold,
-    getOptions = _useContext.getOptions,
-    rootState = _useContext.rootState;
-  var _useTranslations = useTranslations.useTranslations(['propertyText', 'clearSearchText']),
-    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 2),
-    propertyText = _useTranslations2[0],
-    clearSearchText = _useTranslations2[1];
-  var _useContext2 = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
-    conditionBuilderRef = _useContext2.conditionBuilderRef;
-  var contentRef = React.useRef(null);
-  var _useState = React.useState(config.options),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    allOptions = _useState2[0],
-    setAllOptions = _useState2[1];
-  var _useState3 = React.useState(''),
-    _useState4 = _rollupPluginBabelHelpers.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] : [];
-  React.useEffect(function () {
+const ItemOptionForValueField = _ref => {
+  let {
+    conditionState = {},
+    config = {},
+    onChange
+  } = _ref;
+  const multiSelectable = util.checkForMultiSelectOperator(conditionState, config);
+  const {
+    popOverSearchThreshold,
+    getOptions,
+    rootState
+  } = React.useContext(ConditionBuilderProvider.ConditionBuilderContext);
+  const [propertyText, clearSearchText] = useTranslations.useTranslations(['propertyText', 'clearSearchText']);
+  const {
+    conditionBuilderRef
+  } = React.useContext(ConditionBuilderProvider.ConditionBuilderContext);
+  const contentRef = React.useRef(null);
+  const [allOptions, setAllOptions] = React.useState(config.options);
+  const [searchValue, setSearchValue] = React.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] : [];
+  React.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 () => {
@@ -69,66 +59,47 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
     // }
 
     if (!allOptions && getOptions) {
-      var fetchData = /*#__PURE__*/function () {
-        var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
-          var response;
-          return _rollupPluginBabelHelpers.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
   }, []);
-  React.useEffect(function () {
+  React.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(_rollupPluginBabelHelpers.toConsumableArray(updatedSelections), [option]));
+        onChange([...updatedSelections, option]);
       }
     } else {
       onChange(option, evt);
@@ -138,66 +109,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.createElement(react.SelectSkeleton, null));
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(util.blockClass, "__item-option"),
+    className: `${util.blockClass}__item-option`,
     ref: contentRef
   }, popOverSearchThreshold && allOptions.length > popOverSearchThreshold && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(util.blockClass, "__item-option__search")
+    className: `${util.blockClass}__item-option__search`
   }, /*#__PURE__*/React.createElement(react.Search, {
     size: "sm",
     labelText: clearSearchText,
     closeButtonLabelText: clearSearchText,
     onChange: onSearchChangeHandler,
-    onKeyDown: function onKeyDown(evt) {
-      return util.onKeyDownHandlerForSearch(evt, conditionBuilderRef);
-    }
+    onKeyDown: evt => util.onKeyDownHandlerForSearch(evt, conditionBuilderRef)
   })), multiSelectable && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(util.blockClass, "__multiselectSelectionStatusContainer")
+    className: `${util.blockClass}__multiselectSelectionStatusContainer`
   }, /*#__PURE__*/React.createElement("label", null, selection.length, "/", allOptions.length, " Selected"), /*#__PURE__*/React.createElement(react.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(util.blockClass, "__selectAll-button")
+    className: `${util.blockClass}__selectAll-button`
   }, selection.length == 0 ? 'Select all' : 'Deselect all')), /*#__PURE__*/React.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.createElement("li", {
       tabIndex: 0,
       key: option.id,
       role: "option",
       "aria-selected": isSelected,
-      className: "".concat(util.blockClass, "__item-option__option"),
-      onKeyUp: function onKeyUp() {
+      className: `${util.blockClass}__item-option__option`,
+      onKeyUp: () => {
         return false;
       },
-      onClick: function onClick(evt) {
-        return onClickHandler(evt, option, isSelected);
-      }
+      onClick: evt => onClickHandler(evt, option, isSelected)
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(util.blockClass, "__item-option__option-content")
+      className: `${util.blockClass}__item-option__option-content`
     }, multiSelectable ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(util.blockClass, "__option-check-box")
+      className: `${util.blockClass}__option-check-box`
     }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React.createElement(icons.CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React.createElement(icons.Checkbox, null))), /*#__PURE__*/React.createElement("span", {
-      className: "".concat(util.blockClass, "__item-option__option-label")
+      className: `${util.blockClass}__item-option__option-label`
     }, option.label), Icon && /*#__PURE__*/React.createElement("span", {
-      className: "".concat(util.blockClass, "__option-icon")
+      className: `${util.blockClass}__option-icon`
     }, /*#__PURE__*/React.createElement(Icon, null))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(util.blockClass, "__item-option__option-label")
+      className: `${util.blockClass}__item-option__option-label`
     }, Icon && /*#__PURE__*/React.createElement(Icon, null), option.label), isSelected && /*#__PURE__*/React.createElement(icons.Checkmark, {
-      className: "".concat(util.blockClass, "__checkmark")
+      className: `${util.blockClass}__checkmark`
     }))));
   })));
 };

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

@@ -7,29 +7,30 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var react = require('@carbon/react');
 var index = require('../../../../_virtual/index.js');
 var util = require('../../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 = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), {}, {
+const ConditionBuilderItemText = _ref => {
+  let {
+    conditionState,
+    onChange,
+    config,
+    type
+  } = _ref;
+  const inputProps = {
+    ...config,
     hideLabel: true,
     value: util.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.createElement("div", {
-    className: "".concat(util.blockClass, "__item-text")
+    className: `${util.blockClass}__item-text`
   }, type == 'textarea' ? /*#__PURE__*/React.createElement(react.TextArea, inputProps) : /*#__PURE__*/React.createElement(react.TextInput, inputProps));
 };
 ConditionBuilderItemText.propTypes = {