@carbon/ibm-products 2.65.0 → 2.66.0

package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useContext, useRef, useState, useEffect, useCallback } from 'react';
 import PropTypes from '../../../_virtual/index.js';
 import { Button, Section, Heading } from '@carbon/react';
 import { Add, TextNewLine } from '@carbon/react/icons';
-import _ConditionGroupBuilder from '../ConditionGroupBuilder/ConditionGroupBuilder.js';
+import ConditionGroupBuilder from '../ConditionGroupBuilder/ConditionGroupBuilder.js';
 import { ConditionBuilderContext, emptyState } from '../ConditionBuilderContext/ConditionBuilderProvider.js';
 import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton.js';
 import uuidv4 from '../../../global/js/utils/uuidv4.js';
@@ -21,167 +21,160 @@ import { useTranslations } from '../utils/useTranslations.js';
 import { blockClass, HIERARCHICAL_VARIANT } from '../utils/util.js';
 
 var _GroupConnector;
-var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
-  var _rootState$groups4;
-  var startConditionLabel = _ref.startConditionLabel,
-    getConditionState = _ref.getConditionState,
-    getActionsState = _ref.getActionsState,
-    initialState = _ref.initialState,
-    actions = _ref.actions;
-  var _useContext = useContext(ConditionBuilderContext),
-    rootState = _useContext.rootState,
-    setRootState = _useContext.setRootState,
-    variant = _useContext.variant,
-    actionState = _useContext.actionState;
-  var initialConditionState = useRef(initialState !== null && initialState !== void 0 && initialState.state ? JSON.parse(JSON.stringify(initialState === null || initialState === void 0 ? void 0 : initialState.state)) : null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isConditionBuilderActive = _useState2[0],
-    setIsConditionBuilderActive = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    showConditionGroupPreview = _useState4[0],
-    setShowConditionGroupPreview = _useState4[1];
-  var _useTranslations = useTranslations(['addConditionGroupText', 'conditionHeadingText', 'conditionBuilderHierarchicalText']),
-    _useTranslations2 = _slicedToArray(_useTranslations, 3),
-    addConditionGroupText = _useTranslations2[0],
-    conditionHeadingText = _useTranslations2[1],
-    conditionBuilderHierarchicalText = _useTranslations2[2];
-  var showConditionGroupPreviewHandler = function showConditionGroupPreviewHandler() {
+const ConditionBuilderContent = _ref => {
+  let {
+    startConditionLabel,
+    getConditionState,
+    getActionsState,
+    initialState,
+    actions
+  } = _ref;
+  const {
+    rootState,
+    setRootState,
+    variant,
+    actionState,
+    onAddItem
+  } = useContext(ConditionBuilderContext);
+  const initialConditionState = useRef(initialState?.state ? JSON.parse(JSON.stringify(initialState?.state)) : null);
+  const [isConditionBuilderActive, setIsConditionBuilderActive] = useState(false);
+  const [showConditionGroupPreview, setShowConditionGroupPreview] = useState(false);
+  const [addConditionGroupText, conditionHeadingText, conditionBuilderHierarchicalText] = useTranslations(['addConditionGroupText', 'conditionHeadingText', 'conditionBuilderHierarchicalText']);
+  const showConditionGroupPreviewHandler = () => {
     setShowConditionGroupPreview(true);
   };
-  var hideConditionGroupPreviewHandler = function hideConditionGroupPreviewHandler() {
+  const hideConditionGroupPreviewHandler = () => {
     setShowConditionGroupPreview(false);
   };
-  useEffect(function () {
-    var _rootState$groups;
-    if (rootState !== null && rootState !== void 0 && (_rootState$groups = rootState.groups) !== null && _rootState$groups !== void 0 && _rootState$groups.length) {
+  useEffect(() => {
+    if (rootState?.groups?.length) {
       setIsConditionBuilderActive(true);
     } else {
       setIsConditionBuilderActive(false);
     }
     if (getConditionState) {
-      getConditionState(rootState !== null && rootState !== void 0 ? rootState : {});
+      getConditionState(rootState ?? {});
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rootState]);
-  useEffect(function () {
-    getActionsState === null || getActionsState === void 0 || getActionsState(actionState !== null && actionState !== void 0 ? actionState : []);
+  useEffect(() => {
+    getActionsState?.(actionState ?? []);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [actionState]);
-  useEffect(function () {
-    if (initialState !== null && initialState !== void 0 && initialState.enabledDefault) {
-      setRootState === null || setRootState === void 0 || setRootState(initialState.state);
+  useEffect(() => {
+    if (initialState?.enabledDefault) {
+      setRootState?.(initialState.state);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialState]);
-  var onStartConditionBuilder = function onStartConditionBuilder() {
-    var _initialConditionStat;
+  const onStartConditionBuilder = () => {
     //when add condition button is clicked.
     setIsConditionBuilderActive(true);
-    if (initialConditionState !== null && initialConditionState !== void 0 && (_initialConditionStat = initialConditionState.current) !== null && _initialConditionStat !== void 0 && (_initialConditionStat = _initialConditionStat.groups) !== null && _initialConditionStat !== void 0 && _initialConditionStat.length) {
-      setRootState === null || setRootState === void 0 || setRootState(initialConditionState.current);
+    if (initialConditionState?.current?.groups?.length) {
+      setRootState?.(initialConditionState.current);
       initialConditionState.current = null;
     } else {
-      setRootState === null || setRootState === void 0 || setRootState(emptyState); //here we can set an empty skeleton object for an empty condition builder,
+      setRootState?.(emptyState); //here we can set an empty skeleton object for an empty condition builder,
     }
 
     //or we can even pre-populate some existing builder and continue editing
   };
-  var _onRemove = useCallback(function (groupId) {
-    var _rootState$groups2;
-    var groups = rootState === null || rootState === void 0 || (_rootState$groups2 = rootState.groups) === null || _rootState$groups2 === void 0 ? void 0 : _rootState$groups2.filter(function (group) {
-      return groupId !== (group === null || group === void 0 ? void 0 : group.id);
-    });
-    setRootState === null || setRootState === void 0 || setRootState(_objectSpread2(_objectSpread2({}, rootState), {}, {
+  const onRemove = useCallback(groupId => {
+    const groups = rootState?.groups?.filter(group => groupId !== group?.id);
+    setRootState?.({
+      ...rootState,
       groups: rootState ? groups : []
-    }));
+    });
     //set the initial state to empty.
-    if ((groups === null || groups === void 0 ? void 0 : groups.length) === 0) {
+    if (groups?.length === 0) {
       initialConditionState.current = null;
     }
   }, [setRootState, rootState]);
-  var onChangeHandler = function onChangeHandler(updatedGroup, groupIndex) {
+  const onChangeHandler = (updatedGroup, groupIndex) => {
     /**
      * This method is triggered from inner components. This will be called every time when any change is to be updated in the rootState.
      * This gets the updated group as argument.
      */
     if (rootState && rootState.groups) {
-      var groups = [].concat(_toConsumableArray(rootState.groups ? rootState.groups.slice(0, groupIndex) : []), [updatedGroup], _toConsumableArray(rootState.groups ? rootState.groups.slice(groupIndex + 1) : []));
-      setRootState === null || setRootState === void 0 || setRootState(_objectSpread2(_objectSpread2({}, rootState), {}, {
-        groups: groups
-      }));
+      const groups = [...(rootState.groups ? rootState.groups.slice(0, groupIndex) : []), updatedGroup, ...(rootState.groups ? rootState.groups.slice(groupIndex + 1) : [])];
+      setRootState?.({
+        ...rootState,
+        groups
+      });
     }
   };
-  var addConditionGroupHandler = function addConditionGroupHandler() {
-    var newGroup = {
-      statement: 'ifAll',
-      groupOperator: 'and',
-      id: uuidv4(),
-      conditions: [{
-        property: undefined,
-        operator: '',
-        value: '',
-        popoverToOpen: 'propertyField',
-        id: uuidv4()
-      }]
-    };
-    setRootState === null || setRootState === void 0 || setRootState(_objectSpread2(_objectSpread2({}, rootState), {}, {
-      groups: rootState && rootState.groups ? [].concat(_toConsumableArray(rootState.groups), [newGroup]) : [newGroup]
-    }));
+  const addConditionGroupHandler = () => {
+    const {
+      preventAdd
+    } = onAddItem?.({
+      type: 'group',
+      state: rootState
+    }) ?? {};
+    if (!preventAdd) {
+      const newGroup = {
+        statement: 'ifAll',
+        groupOperator: 'and',
+        id: uuidv4(),
+        conditions: [{
+          property: undefined,
+          operator: '',
+          value: '',
+          popoverToOpen: 'propertyField',
+          id: uuidv4()
+        }]
+      };
+      setRootState?.({
+        ...rootState,
+        groups: rootState && rootState.groups ? [...rootState.groups, newGroup] : [newGroup]
+      });
+    }
   };
-  var getColorIndex = function getColorIndex() {
-    var _rootState$groups$len, _rootState$groups3;
-    var groupLength = (_rootState$groups$len = rootState === null || rootState === void 0 || (_rootState$groups3 = rootState.groups) === null || _rootState$groups3 === void 0 ? void 0 : _rootState$groups3.length) !== null && _rootState$groups$len !== void 0 ? _rootState$groups$len : 0;
+  const getColorIndex = () => {
+    const groupLength = rootState?.groups?.length ?? 0;
     return groupLength % 5;
   };
   if (!isConditionBuilderActive) {
     return /*#__PURE__*/React__default.createElement(Button, {
-      className: "".concat(blockClass, "__addConditionText-button"),
-      renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/React__default.createElement(Add, props);
-      },
+      className: `${blockClass}__addConditionText-button`,
+      renderIcon: props => /*#__PURE__*/React__default.createElement(Add, props),
       iconDescription: startConditionLabel,
       kind: "ghost",
       size: "sm",
       onClick: onStartConditionBuilder
     }, startConditionLabel);
   }
-  var wrapperRole = variant === HIERARCHICAL_VARIANT ? {
+  const wrapperRole = variant === HIERARCHICAL_VARIANT ? {
     role: 'treegrid',
     'aria-label': conditionBuilderHierarchicalText
   } : null;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Section, {
-    className: "".concat(blockClass, "__heading"),
+    className: `${blockClass}__heading`,
     level: 4
   }, /*#__PURE__*/React__default.createElement(Heading, null, conditionHeadingText)), /*#__PURE__*/React__default.createElement("div", _extends({
-    className: "".concat(blockClass, "__content-container")
-  }, wrapperRole), rootState && (rootState === null || rootState === void 0 || (_rootState$groups4 = rootState.groups) === null || _rootState$groups4 === void 0 ? void 0 : _rootState$groups4.map(function (eachGroup, groupIndex) {
-    var _ref2;
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: eachGroup.id,
-      className: "".concat(blockClass, "__group-wrapper")
-    }, /*#__PURE__*/React__default.createElement(_ConditionGroupBuilder, {
-      className: "".concat(blockClass, "__group"),
-      aria: {
-        level: 1,
-        posinset: groupIndex * 2 + 1,
-        setsize: (_ref2 = rootState.groups && rootState.groups.length * 2) !== null && _ref2 !== void 0 ? _ref2 : 0
-      },
-      group: eachGroup,
-      onRemove: function onRemove() {
-        _onRemove(eachGroup.id);
-      },
-      onChange: function onChange(updatedGroup) {
-        onChangeHandler(updatedGroup, groupIndex);
-      }
-    }), rootState.groups && groupIndex < rootState.groups.length - 1 && (_GroupConnector || (_GroupConnector = /*#__PURE__*/React__default.createElement(GroupConnector, null))));
-  })), variant == HIERARCHICAL_VARIANT && /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__content-container`
+  }, wrapperRole), rootState && rootState?.groups?.map((eachGroup, groupIndex) => /*#__PURE__*/React__default.createElement("div", {
+    key: eachGroup.id,
+    className: `${blockClass}__group-wrapper`
+  }, /*#__PURE__*/React__default.createElement(ConditionGroupBuilder, {
+    className: `${blockClass}__group`,
+    aria: {
+      level: 1,
+      posinset: groupIndex * 2 + 1,
+      setsize: (rootState.groups && rootState.groups.length * 2) ?? 0
+    },
+    group: eachGroup,
+    onRemove: () => {
+      onRemove(eachGroup.id);
+    },
+    onChange: updatedGroup => {
+      onChangeHandler(updatedGroup, groupIndex);
+    }
+  }), rootState.groups && groupIndex < rootState.groups.length - 1 && (_GroupConnector || (_GroupConnector = /*#__PURE__*/React__default.createElement(GroupConnector, null))))), variant == HIERARCHICAL_VARIANT && /*#__PURE__*/React__default.createElement("div", {
     role: "row",
     tabIndex: -1,
     "aria-level": 1,
-    className: "".concat(blockClass, "__add-group")
+    className: `${blockClass}__add-group`
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, {
     renderIcon: TextNewLine,
     onClick: addConditionGroupHandler,
@@ -189,7 +182,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     onMouseLeave: hideConditionGroupPreviewHandler,
     onFocus: showConditionGroupPreviewHandler,
     onBlur: hideConditionGroupPreviewHandler,
-    className: "".concat(blockClass, "__add-condition-group "),
+    className: `${blockClass}__add-condition-group `,
     hideLabel: true,
     label: addConditionGroupText,
     wrapperProps: {
@@ -200,12 +193,12 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     previewType: "newGroup",
     colorIndex: getColorIndex(),
     group: {
-      groupOperator: rootState === null || rootState === void 0 ? void 0 : rootState.operator,
+      groupOperator: rootState?.operator,
       id: uuidv4()
     }
   })), actions && /*#__PURE__*/React__default.createElement(ConditionBuilderActions, {
     actions: actions,
-    className: "".concat(blockClass, "__actions-container")
+    className: `${blockClass}__actions-container`
   }));
 };
 ConditionBuilderContent.propTypes = {

package/es/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.js

@@ -5,12 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, createContext } from 'react';
 import PropTypes from '../../../_virtual/index.js';
 import uuidv4 from '../../../global/js/utils/uuidv4.js';
 
-var emptyState = {
+const emptyState = {
   operator: 'or',
   groups: [{
     groupOperator: 'and',
@@ -25,34 +24,29 @@ var emptyState = {
     }]
   }]
 };
-var ConditionBuilderContext = /*#__PURE__*/createContext({
+const ConditionBuilderContext = /*#__PURE__*/createContext({
   rootState: {
     groups: []
   }
 });
-var ConditionBuilderProvider = function ConditionBuilderProvider(props) {
-  var _useState = useState({
-      groups: []
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    rootState = _useState2[0],
-    setRootState = _useState2[1];
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    actionState = _useState4[0],
-    setActionState = _useState4[1];
-  var contextValue = {
-    rootState: rootState,
-    setRootState: setRootState,
-    actionState: actionState,
-    setActionState: setActionState,
+const ConditionBuilderProvider = props => {
+  const [rootState, setRootState] = useState({
+    groups: []
+  });
+  const [actionState, setActionState] = useState([]);
+  const contextValue = {
+    rootState,
+    setRootState,
+    actionState,
+    setActionState,
     inputConfig: props.inputConfig,
     popOverSearchThreshold: props.popOverSearchThreshold,
     getOptions: props.getOptions,
     variant: props.variant,
     translateWithId: props.translateWithId,
     conditionBuilderRef: props.conditionBuilderRef,
-    statementConfigCustom: props.statementConfigCustom
+    statementConfigCustom: props.statementConfigCustom,
+    onAddItem: props.onAddItem
   };
   return /*#__PURE__*/React__default.createElement(ConditionBuilderContext.Provider, {
     value: contextValue

package/es/components/ConditionBuilder/ConditionBuilderContext/translationObject.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var translationsObject = {
+const translationsObject = {
   ifText: 'if',
   unlessText: 'unless',
   excl_if: 'excl.if',

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, 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 { Popover, PopoverContent, Layer, Section, Heading } from '@carbon/react';
 import PropTypes from '../../../_virtual/index.js';
@@ -17,74 +17,68 @@ import { handleKeyDownForPopover } from '../utils/handleKeyboardEvents.js';
 import { checkForMultiSelectOperator, blockClass, getValue } from '../utils/util.js';
 import { translationsObject } from '../ConditionBuilderContext/translationObject.js';
 
-var _excluded = ["children", "className", "label", "renderIcon", "title", "type", "showToolTip", "condition", "popOverClassName", "config", "renderChildren", "onChange", "description"];
-var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    label = _ref.label,
-    renderIcon = _ref.renderIcon,
-    title = _ref.title,
-    type = _ref.type,
-    showToolTip = _ref.showToolTip,
-    condition = _ref.condition,
-    popOverClassName = _ref.popOverClassName,
-    config = _ref.config,
-    renderChildren = _ref.renderChildren,
-    onChange = _ref.onChange,
-    description = _ref.description,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var popoverRef = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  var _useContext = useContext(ConditionBuilderContext),
-    conditionBuilderRef = _useContext.conditionBuilderRef,
-    statementConfigCustom = _useContext.statementConfigCustom;
-  var statementIdMap = {
+const ConditionBuilderItem = _ref => {
+  let {
+    children,
+    className,
+    label,
+    renderIcon,
+    title,
+    type,
+    showToolTip,
+    condition,
+    popOverClassName,
+    config,
+    renderChildren,
+    onChange,
+    description,
+    ...rest
+  } = _ref;
+  const popoverRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const {
+    conditionBuilderRef,
+    statementConfigCustom
+  } = useContext(ConditionBuilderContext);
+  const statementIdMap = {
     ifAll: translationsObject.ifText,
     ifAny: translationsObject.ifText,
     unlessAll: translationsObject.unlessText,
     unlessAny: translationsObject.unlessText
   };
   //Appending statements from custom statement configuration if present
-  statementConfigCustom === null || statementConfigCustom === void 0 || statementConfigCustom.forEach(function (statement) {
+  statementConfigCustom?.forEach(statement => {
     statementIdMap[statement.id] = statement.label;
   });
-  var _useTranslations = useTranslations(['invalidText', 'addConditionText', 'addPropertyText', 'addOperatorText', 'addValueText', label], statementIdMap),
-    _useTranslations2 = _slicedToArray(_useTranslations, 6),
-    invalidText = _useTranslations2[0],
-    addConditionText = _useTranslations2[1],
-    addPropertyText = _useTranslations2[2],
-    addOperatorText = _useTranslations2[3],
-    addValueText = _useTranslations2[4],
-    labelText = _useTranslations2[5];
-  var getPropertyDetails = function getPropertyDetails() {
-    var _ref2 = condition || {},
-      property = _ref2.property,
-      operator = _ref2.operator;
+  const [invalidText, addConditionText, addPropertyText, addOperatorText, addValueText, labelText] = useTranslations(['invalidText', 'addConditionText', 'addPropertyText', 'addOperatorText', 'addValueText', label], statementIdMap);
+  const getPropertyDetails = () => {
+    const {
+      property,
+      operator
+    } = condition || {};
     if (label === 'INVALID' || rest['data-name'] === 'propertyField' && property === 'INVALID' || rest['data-name'] === 'operatorField' && operator === 'INVALID') {
       return {
         propertyLabel: invalidText,
         isInvalid: true
       };
     }
-    var propertyId = rest['data-name'] == 'valueField' && type ? getValue(type, label, config) : labelText;
+    const propertyId = rest['data-name'] == 'valueField' && type ? getValue(type, label, config) : labelText;
     return {
       isInvalid: false,
       propertyLabel: propertyId
     };
   };
-  var _getPropertyDetails = getPropertyDetails(),
-    propertyLabel = _getPropertyDetails.propertyLabel,
-    isInvalid = _getPropertyDetails.isInvalid;
-  useEffect(function () {
+  const {
+    propertyLabel,
+    isInvalid
+  } = getPropertyDetails();
+  useEffect(() => {
     /**
      * rest['data-name'] holds the current field name
      * popoverToOpen hold the next popover to be opened if required
      */
     if (condition) {
-      var currentField = rest['data-name'];
+      const currentField = rest['data-name'];
       //if any condition is changed, state prop is triggered
       if (condition.popoverToOpen && currentField !== condition.popoverToOpen) {
         // close the previous popover
@@ -104,54 +98,47 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [condition, label]);
-  useEffect(function () {
+  useEffect(() => {
     //this will focus the first input field in the popover
     if (open && popoverRef.current) {
-      var _popoverRef$current;
-      var firstFocusableElement = popoverRef === null || popoverRef === void 0 || (_popoverRef$current = popoverRef.current) === null || _popoverRef$current === void 0 ? void 0 : _popoverRef$current.querySelector('input,textarea');
+      const firstFocusableElement = popoverRef?.current?.querySelector('input,textarea');
       if (firstFocusableElement) {
-        setTimeout(function () {
-          return firstFocusableElement.focus();
-        }, 0);
+        setTimeout(() => firstFocusableElement.focus(), 0);
       }
     }
   }, [popoverRef, open]);
-  var manageInvalidSelection = function manageInvalidSelection() {
+  const manageInvalidSelection = () => {
     //when the user didn't select any value , we need to show as incomplete
-    if (rest['data-name'] === 'propertyField' && !(condition !== null && condition !== void 0 && condition.property) || rest['data-name'] === 'operatorField' && !(condition !== null && condition !== void 0 && condition.operator) || rest['data-name'] === 'valueField' && !(condition !== null && condition !== void 0 && condition.value)) {
-      onChange === null || onChange === void 0 || onChange('INVALID');
+    if (rest['data-name'] === 'propertyField' && !condition?.property || rest['data-name'] === 'operatorField' && !condition?.operator || rest['data-name'] === 'valueField' && !condition?.value) {
+      onChange?.('INVALID');
     }
   };
-  var closePopover = function closePopover() {
+  const closePopover = () => {
     if (open) {
       manageInvalidSelection();
     }
     setOpen(false);
   };
-  var openPopOver = function openPopOver() {
-    return setOpen(true);
-  };
-  var togglePopover = function togglePopover() {
+  const openPopOver = () => setOpen(true);
+  const togglePopover = () => {
     if (children || renderChildren) {
       setOpen(!open);
     }
   };
-  var handleKeyDownHandler = function handleKeyDownHandler(evt) {
+  const handleKeyDownHandler = evt => {
     handleKeyDownForPopover(evt, conditionBuilderRef, popoverRef);
     if (evt.key === 'Escape') {
       manageInvalidSelection();
     }
   };
-  var getCustomOperatorLabel = function getCustomOperatorLabel(propertyLabel) {
-    var _config$operators;
-    return propertyLabel && (config === null || config === void 0 || (_config$operators = config.operators) === null || _config$operators === void 0 ? void 0 : _config$operators.find(function (operator) {
+  const getCustomOperatorLabel = propertyLabel => {
+    return propertyLabel && config?.operators?.find(operator => {
       return operator.id === propertyLabel;
-    }));
+    });
   };
-  var getLabel = function getLabel() {
-    if (config !== null && config !== void 0 && config.operators && rest['data-name'] === 'operatorField') {
-      var _getCustomOperatorLab, _getCustomOperatorLab2;
-      return (_getCustomOperatorLab = (_getCustomOperatorLab2 = getCustomOperatorLabel(propertyLabel)) === null || _getCustomOperatorLab2 === void 0 ? void 0 : _getCustomOperatorLab2.label) !== null && _getCustomOperatorLab !== void 0 ? _getCustomOperatorLab : addOperatorText;
+  const getLabel = () => {
+    if (config?.operators && rest['data-name'] === 'operatorField') {
+      return getCustomOperatorLabel(propertyLabel)?.label ?? addOperatorText;
     } else if (propertyLabel) {
       return propertyLabel;
     } else if (rest['data-name'] === 'propertyField') {
@@ -168,7 +155,7 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     open: open,
     isTabTip: true,
     role: "gridcell",
-    className: "".concat(popOverClassName, " ").concat(blockClass, "__popover"),
+    className: `${popOverClassName} ${blockClass}__popover`,
     ref: popoverRef,
     onRequestClose: closePopover
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, _extends({
@@ -183,14 +170,14 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     isInvalid: isInvalid,
     description: description
   }, rest)), open && /*#__PURE__*/React__default.createElement(PopoverContent, {
-    className: "".concat(blockClass, "__popover-content-wrapper"),
+    className: `${blockClass}__popover-content-wrapper`,
     role: "dialog",
     "aria-label": title,
     onKeyDown: handleKeyDownHandler
   }, /*#__PURE__*/React__default.createElement(Layer, null, /*#__PURE__*/React__default.createElement(Section, null, /*#__PURE__*/React__default.createElement(Heading, {
-    className: "".concat(blockClass, "__item__title")
+    className: `${blockClass}__item__title`
   }, title), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__popover-content")
+    className: `${blockClass}__popover-content`
   }, renderChildren ? renderChildren(popoverRef) : children)))));
 };
 ConditionBuilderItem.propTypes = {