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

package/es/components/ConditionBuilder/ConditionBuilderActions/ConditionBuilderActions.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useContext, useState } from 'react';
 import PropTypes from '../../../_virtual/index.js';
 import cx from 'classnames';
@@ -20,119 +19,100 @@ import { useTranslations } from '../utils/useTranslations.js';
 import { ItemOptionForValueField } from '../ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js';
 import { blockClass } from '../utils/util.js';
 
-var ConditionBuilderActions = function ConditionBuilderActions(_ref) {
-  var actions = _ref.actions,
-    className = _ref.className;
-  var _useContext = useContext(ConditionBuilderContext),
-    _useContext$actionSta = _useContext.actionState,
-    actionState = _useContext$actionSta === void 0 ? [] : _useContext$actionSta,
-    setActionState = _useContext.setActionState;
-  var _useState = useState(-1),
-    _useState2 = _slicedToArray(_useState, 2),
-    showDeletionPreview = _useState2[0],
-    setShowDeletionPreview = _useState2[1];
-  var _useTranslations = useTranslations(['actionsText', 'then', 'and', 'removeActionText', 'addActionText', 'actionSectionText']),
-    _useTranslations2 = _slicedToArray(_useTranslations, 6),
-    actionsText = _useTranslations2[0],
-    thenText = _useTranslations2[1],
-    andText = _useTranslations2[2],
-    removeActionText = _useTranslations2[3],
-    addActionText = _useTranslations2[4],
-    actionSectionText = _useTranslations2[5];
-  var addActionHandler = function addActionHandler() {
-    var action = {
+const ConditionBuilderActions = _ref => {
+  let {
+    actions,
+    className
+  } = _ref;
+  const {
+    actionState = [],
+    setActionState
+  } = useContext(ConditionBuilderContext);
+  const [showDeletionPreview, setShowDeletionPreview] = useState(-1);
+  const [actionsText, thenText, andText, removeActionText, addActionText, actionSectionText] = useTranslations(['actionsText', 'then', 'and', 'removeActionText', 'addActionText', 'actionSectionText']);
+  const addActionHandler = () => {
+    const action = {
       id: uuidv4(),
       label: undefined,
       popoverToOpen: 'valueField'
     };
-    setActionState === null || setActionState === void 0 || setActionState([].concat(_toConsumableArray(actionState), [action]));
+    setActionState?.([...actionState, action]);
   };
-  var onchangeHandler = function onchangeHandler(selectedId, actionIndex) {
-    var action = actions.find(function (action) {
-      return action.id === selectedId;
-    }); //fetch the selected action from the input action array
+  const onchangeHandler = (selectedId, actionIndex) => {
+    const action = actions.find(action => action.id === selectedId); //fetch the selected action from the input action array
 
     // same actions can be added multiple times
-    var newAction = _objectSpread2(_objectSpread2({}, action), {}, {
+    const newAction = {
+      ...action,
       id: actionState[actionIndex].id
-    });
-    setActionState === null || setActionState === void 0 || setActionState([].concat(_toConsumableArray(actionState.slice(0, actionIndex)), [newAction], _toConsumableArray(actionState.slice(actionIndex + 1))));
+    };
+    setActionState?.([...actionState.slice(0, actionIndex), newAction, ...actionState.slice(actionIndex + 1)]);
   };
-  var onRemove = function onRemove(selectedId) {
-    setActionState === null || setActionState === void 0 || setActionState(actionState.filter(function (action) {
-      return action.id !== selectedId;
-    }));
+  const onRemove = selectedId => {
+    setActionState?.(actionState.filter(action => action.id !== selectedId));
   };
-  var handleShowDeletionPreview = function handleShowDeletionPreview(index) {
+  const handleShowDeletionPreview = index => {
     setShowDeletionPreview(index);
   };
-  var handleHideDeletionPreview = function handleHideDeletionPreview() {
+  const handleHideDeletionPreview = () => {
     setShowDeletionPreview(-1);
   };
   return /*#__PURE__*/React__default.createElement("div", {
     className: className
   }, /*#__PURE__*/React__default.createElement(Section, {
-    className: "".concat(blockClass, "__heading"),
+    className: `${blockClass}__heading`,
     level: 4
   }, /*#__PURE__*/React__default.createElement(Heading, null, actionsText)), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__condition-wrapper"),
+    className: `${blockClass}__condition-wrapper`,
     role: "grid",
     "aria-label": actionSectionText
-  }, actionState === null || actionState === void 0 ? void 0 : actionState.map(function (action, index) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: action.id,
-      role: "row",
-      className: cx("".concat(blockClass, "__condition-block ").concat(blockClass, "__gap ").concat(blockClass, "__gap-bottom"), _defineProperty({}, "".concat(blockClass, "__condition__deletion-preview"), showDeletionPreview == index))
-    }, /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
-      className: "".concat(blockClass, "__statement-button"),
-      tabIndex: 0,
-      popOverClassName: "".concat(blockClass, "__gap"),
-      label: index === 0 ? thenText : andText
-    }), /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
-      label: action.label,
-      title: actionsText,
-      condition: action,
-      "data-name": "valueField",
-      type: "option"
-    }, /*#__PURE__*/React__default.createElement(ItemOptionForValueField, {
-      conditionState: {
-        value: action.label
-      },
-      onChange: function onChange(selection) {
-        return onchangeHandler(selection.id, index);
-      },
-      config: {
-        options: actions
-      }
-    })), /*#__PURE__*/React__default.createElement("span", {
-      role: "gridcell",
-      "aria-label": removeActionText
-    }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, {
-      hideLabel: true,
-      label: removeActionText,
-      onClick: function onClick() {
-        return onRemove(action.id);
-      },
-      onMouseEnter: function onMouseEnter() {
-        return handleShowDeletionPreview(index);
-      },
-      onMouseLeave: handleHideDeletionPreview,
-      onFocus: function onFocus() {
-        return handleShowDeletionPreview(index);
-      },
-      onBlur: handleHideDeletionPreview,
-      renderIcon: Close,
-      className: "".concat(blockClass, "__close-condition"),
-      "data-name": "closeCondition"
-    })), actionState.length === index + 1 && /*#__PURE__*/React__default.createElement(ConditionBuilderAdd, {
-      onClick: addActionHandler,
-      className: "".concat(blockClass, "__gap ").concat(blockClass, "__gap-left"),
-      buttonLabel: addActionText,
-      tabIndex: 0
-    }));
-  }), actionState.length === 0 && /*#__PURE__*/React__default.createElement(ConditionBuilderAdd, {
+  }, actionState?.map((action, index) => /*#__PURE__*/React__default.createElement("div", {
+    key: action.id,
+    role: "row",
+    className: cx(`${blockClass}__condition-block ${blockClass}__gap ${blockClass}__gap-bottom`, {
+      [`${blockClass}__condition__deletion-preview`]: showDeletionPreview == index
+    })
+  }, /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+    className: `${blockClass}__statement-button`,
+    tabIndex: 0,
+    popOverClassName: `${blockClass}__gap`,
+    label: index === 0 ? thenText : andText
+  }), /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+    label: action.label,
+    title: actionsText,
+    condition: action,
+    "data-name": "valueField",
+    type: "option"
+  }, /*#__PURE__*/React__default.createElement(ItemOptionForValueField, {
+    conditionState: {
+      value: action.label
+    },
+    onChange: selection => onchangeHandler(selection.id, index),
+    config: {
+      options: actions
+    }
+  })), /*#__PURE__*/React__default.createElement("span", {
+    role: "gridcell",
+    "aria-label": removeActionText
+  }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, {
+    hideLabel: true,
+    label: removeActionText,
+    onClick: () => onRemove(action.id),
+    onMouseEnter: () => handleShowDeletionPreview(index),
+    onMouseLeave: handleHideDeletionPreview,
+    onFocus: () => handleShowDeletionPreview(index),
+    onBlur: handleHideDeletionPreview,
+    renderIcon: Close,
+    className: `${blockClass}__close-condition`,
+    "data-name": "closeCondition"
+  })), actionState.length === index + 1 && /*#__PURE__*/React__default.createElement(ConditionBuilderAdd, {
+    onClick: addActionHandler,
+    className: `${blockClass}__gap ${blockClass}__gap-left`,
+    buttonLabel: addActionText,
+    tabIndex: 0
+  }))), actionState.length === 0 && /*#__PURE__*/React__default.createElement(ConditionBuilderAdd, {
     onClick: addActionHandler,
-    className: "".concat(blockClass, "__gap ").concat(blockClass, "__gap-left"),
+    className: `${blockClass}__gap ${blockClass}__gap-left`,
     buttonLabel: addActionText,
     tabIndex: 0
   })));

package/es/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import { ConditionGroup } from '../ConditionBuilder.types';
 interface ConditionBuilderAddProps {
     className?: string;
     onClick: () => void;
@@ -16,9 +17,10 @@ interface ConditionBuilderAddProps {
     enableSubGroup?: boolean;
     buttonLabel?: string;
     tabIndex?: number;
+    group?: ConditionGroup;
 }
 declare const ConditionBuilderAdd: {
-    ({ className, onClick, addConditionSubGroupHandler, showConditionSubGroupPreviewHandler, hideConditionSubGroupPreviewHandler, showConditionPreviewHandler, hideConditionPreviewHandler, enableSubGroup, buttonLabel, tabIndex, }: ConditionBuilderAddProps): React.JSX.Element;
+    ({ className, onClick, addConditionSubGroupHandler, showConditionSubGroupPreviewHandler, hideConditionSubGroupPreviewHandler, showConditionPreviewHandler, hideConditionPreviewHandler, enableSubGroup, buttonLabel, tabIndex, group, }: ConditionBuilderAddProps): React.JSX.Element;
     propTypes: {
         /**
          * handler for hiding sub group preview

package/es/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js

@@ -5,36 +5,49 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useContext } from 'react';
 import cx from 'classnames';
 import { AddAlt, TextNewLine } from '@carbon/react/icons';
 import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton.js';
 import PropTypes from '../../../_virtual/index.js';
 import { useTranslations } from '../utils/useTranslations.js';
 import { blockClass } from '../utils/util.js';
+import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBuilderProvider.js';
 
-var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
-  var className = _ref.className,
-    onClick = _ref.onClick,
-    addConditionSubGroupHandler = _ref.addConditionSubGroupHandler,
-    showConditionSubGroupPreviewHandler = _ref.showConditionSubGroupPreviewHandler,
-    hideConditionSubGroupPreviewHandler = _ref.hideConditionSubGroupPreviewHandler,
-    showConditionPreviewHandler = _ref.showConditionPreviewHandler,
-    hideConditionPreviewHandler = _ref.hideConditionPreviewHandler,
-    enableSubGroup = _ref.enableSubGroup,
-    buttonLabel = _ref.buttonLabel,
-    tabIndex = _ref.tabIndex;
-  var _useTranslations = useTranslations(['addConditionText', 'addConditionRowText', 'addSubgroupText']),
-    _useTranslations2 = _slicedToArray(_useTranslations, 3),
-    addConditionText = _useTranslations2[0],
-    addConditionRowText = _useTranslations2[1],
-    addSubgroupText = _useTranslations2[2];
-  var onClickHandler = function onClickHandler() {
-    hideConditionPreviewHandler === null || hideConditionPreviewHandler === void 0 || hideConditionPreviewHandler();
-    onClick();
+const ConditionBuilderAdd = _ref => {
+  let {
+    className,
+    onClick,
+    addConditionSubGroupHandler,
+    showConditionSubGroupPreviewHandler,
+    hideConditionSubGroupPreviewHandler,
+    showConditionPreviewHandler,
+    hideConditionPreviewHandler,
+    enableSubGroup,
+    buttonLabel,
+    tabIndex,
+    group
+  } = _ref;
+  const [addConditionText, addConditionRowText, addSubgroupText] = useTranslations(['addConditionText', 'addConditionRowText', 'addSubgroupText']);
+  const {
+    onAddItem,
+    rootState
+  } = useContext(ConditionBuilderContext);
+  const onClickHandler = () => {
+    const {
+      preventAdd
+    } = onAddItem?.({
+      type: 'condition',
+      state: rootState,
+      group
+    }) ?? {};
+    if (!preventAdd) {
+      hideConditionPreviewHandler?.();
+      onClick();
+    }
   };
-  var previewHandlers = function previewHandlers() {
+  const previewHandlers = () => {
     return enableSubGroup ? {
       onMouseEnter: showConditionPreviewHandler,
       onMouseLeave: hideConditionPreviewHandler,
@@ -42,22 +55,32 @@ var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
       onBlur: hideConditionPreviewHandler
     } : {};
   };
-  var previewHandlersForSubgroup = function previewHandlersForSubgroup() {
-    return {
-      onMouseEnter: showConditionSubGroupPreviewHandler,
-      onMouseLeave: hideConditionSubGroupPreviewHandler,
-      onFocus: showConditionSubGroupPreviewHandler,
-      onBlur: hideConditionSubGroupPreviewHandler
-    };
+  const previewHandlersForSubgroup = () => ({
+    onMouseEnter: showConditionSubGroupPreviewHandler,
+    onMouseLeave: hideConditionSubGroupPreviewHandler,
+    onFocus: showConditionSubGroupPreviewHandler,
+    onBlur: hideConditionSubGroupPreviewHandler
+  });
+  const handleAddSubGroup = () => {
+    const {
+      preventAdd
+    } = onAddItem?.({
+      type: 'subgroup',
+      state: rootState,
+      group
+    }) ?? {};
+    if (!preventAdd) {
+      addConditionSubGroupHandler?.();
+    }
   };
-  var getAriaLabel = function getAriaLabel() {
+  const getAriaLabel = () => {
     return buttonLabel ? buttonLabel : !enableSubGroup ? addConditionRowText : undefined;
   };
-  var wrapperProps = enableSubGroup ? {
+  const wrapperProps = enableSubGroup ? {
     role: 'gridcell'
   } : {};
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(className, " ").concat(blockClass, "__add-button-wrapper"),
+    className: `${className} ${blockClass}__add-button-wrapper`,
     role: !enableSubGroup ? 'gridcell' : 'none',
     "aria-label": getAriaLabel()
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, _extends({
@@ -65,20 +88,20 @@ var ConditionBuilderAdd = function ConditionBuilderAdd(_ref) {
     onClick: onClickHandler
   }, previewHandlers(), {
     wrapperProps: wrapperProps,
-    className: "".concat(blockClass, "__add-button"),
+    className: `${blockClass}__add-button`,
     hideLabel: true,
     "data-name": "addButton",
-    label: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : addConditionText,
+    label: buttonLabel ?? addConditionText,
     tabIndex: tabIndex,
-    wrapperClassName: "".concat(blockClass, "__add-condition-wrapper")
+    wrapperClassName: `${blockClass}__add-condition-wrapper`
   })), enableSubGroup && /*#__PURE__*/React__default.createElement(ConditionBuilderButton, _extends({
     renderIcon: TextNewLine,
-    onClick: addConditionSubGroupHandler,
-    className: cx("".concat(blockClass, "__add-condition-sub-group")),
+    onClick: handleAddSubGroup,
+    className: cx(`${blockClass}__add-condition-sub-group`),
     hideLabel: true,
     label: addSubgroupText,
     wrapperProps: wrapperProps,
-    wrapperClassName: "".concat(blockClass, "__add-condition-sub-group-wrapper ").concat(blockClass, "__gap-left")
+    wrapperClassName: `${blockClass}__add-condition-sub-group-wrapper ${blockClass}__gap-left`
   }, previewHandlersForSubgroup())));
 };
 ConditionBuilderAdd.propTypes = {

package/es/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import cx from 'classnames';
 import PropTypes from '../../../_virtual/index.js';
@@ -14,34 +14,38 @@ import { WarningAltFilled } from '@carbon/react/icons';
 import { blockClass } from '../utils/util.js';
 
 var _WarningAltFilled;
-var _excluded = ["className", "label", "hideLabel", "tooltipAlign", "renderIcon", "onClick", "showToolTip", "wrapperProps", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "isInvalid", "wrapperClassName", "tabIndex", "description"];
-var ConditionBuilderButton = function ConditionBuilderButton(_ref) {
+const ConditionBuilderButton = _ref => {
   var _Icon, _span;
-  var className = _ref.className,
-    label = _ref.label,
-    hideLabel = _ref.hideLabel,
-    tooltipAlign = _ref.tooltipAlign,
-    Icon = _ref.renderIcon,
-    onClick = _ref.onClick,
-    showToolTip = _ref.showToolTip,
-    wrapperProps = _ref.wrapperProps,
-    onBlur = _ref.onBlur,
-    onFocus = _ref.onFocus,
-    onMouseEnter = _ref.onMouseEnter,
-    onMouseLeave = _ref.onMouseLeave,
-    isInvalid = _ref.isInvalid,
-    wrapperClassName = _ref.wrapperClassName,
-    tabIndex = _ref.tabIndex,
-    description = _ref.description,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var tooltipText = description || label;
-  var carbonPrefix = usePrefix();
-  var Button = function Button() {
-    var _rest$dataName;
-    var dataName = (_rest$dataName = rest['data-name']) !== null && _rest$dataName !== void 0 ? _rest$dataName : '';
+  let {
+    className,
+    label,
+    hideLabel,
+    tooltipAlign,
+    renderIcon: Icon,
+    onClick,
+    showToolTip,
+    wrapperProps,
+    onBlur,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    isInvalid,
+    wrapperClassName,
+    tabIndex,
+    description,
+    ...rest
+  } = _ref;
+  const tooltipText = description || label;
+  const carbonPrefix = usePrefix();
+  const Button = () => {
+    const dataName = rest['data-name'] ?? '';
     return /*#__PURE__*/React__default.createElement("button", _extends({
       tabIndex: tabIndex !== undefined ? tabIndex : -1,
-      className: cx([className, "".concat(blockClass, "__button"), _defineProperty({}, "".concat(blockClass, "__text-ellipsis"), showToolTip && !hideLabel && !isInvalid), _defineProperty({}, "".concat(blockClass, "__invalid-input"), isInvalid)]),
+      className: cx([className, `${blockClass}__button`, {
+        [`${blockClass}__text-ellipsis`]: showToolTip && !hideLabel && !isInvalid
+      }, {
+        [`${blockClass}__invalid-input`]: isInvalid
+      }]),
       type: "button",
       onClick: onClick,
       onBlur: onBlur,
@@ -54,7 +58,7 @@ var ConditionBuilderButton = function ConditionBuilderButton(_ref) {
   return hideLabel || showToolTip || description ? /*#__PURE__*/React__default.createElement(Tooltip, _extends({
     label: tooltipText,
     align: tooltipAlign,
-    className: "".concat(wrapperClassName, " ").concat(blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
+    className: `${wrapperClassName} ${blockClass}__tooltip ${carbonPrefix}--icon-tooltip`
   }, wrapperProps, {
     leaveDelayMs: 0
   }), Button()) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, Button());

package/es/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.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, { useContext, useCallback } from 'react';
 import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem.js';
 import { ItemOption } from '../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js';
@@ -16,41 +16,42 @@ import { useTranslations } from '../utils/useTranslations.js';
 import { useDataConfigs } from '../utils/useDataConfigs.js';
 import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton.js';
 
-var _excluded = ["operator", "className", "onChange"];
-var ConditionConnector = function ConditionConnector(_ref) {
-  var operator = _ref.operator,
-    className = _ref.className,
-    onChange = _ref.onChange,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useContext = useContext(ConditionBuilderContext),
-    variant = _useContext.variant,
-    conditionBuilderRef = _useContext.conditionBuilderRef;
-  var _useTranslations = useTranslations(['connectorText']),
-    _useTranslations2 = _slicedToArray(_useTranslations, 1),
-    connectorText = _useTranslations2[0];
-  var _useDataConfigs = useDataConfigs(),
-    connectorConfig = _useDataConfigs.connectorConfig;
-  var handleConnectorHover = useCallback(function (parentGroup, isHover) {
+const ConditionConnector = _ref => {
+  let {
+    operator,
+    className,
+    onChange,
+    ...rest
+  } = _ref;
+  const {
+    variant,
+    conditionBuilderRef
+  } = useContext(ConditionBuilderContext);
+  const [connectorText] = useTranslations(['connectorText']);
+  const {
+    connectorConfig
+  } = useDataConfigs();
+  const handleConnectorHover = useCallback((parentGroup, isHover) => {
     if (isHover) {
       parentGroup.classList.add('hoveredConnector');
     } else {
       parentGroup.classList.remove('hoveredConnector');
     }
   }, []);
-  var activeConnectorHandler = function activeConnectorHandler(evt) {
-    var parentGroup = evt === null || evt === void 0 ? void 0 : evt.currentTarget.closest('.eachGroup');
+  const activeConnectorHandler = evt => {
+    const parentGroup = evt?.currentTarget.closest('.eachGroup');
     handleConnectorHover(parentGroup, true);
   };
-  var inActiveConnectorHandler = function inActiveConnectorHandler(evt) {
-    var parentGroup = evt === null || evt === void 0 ? void 0 : evt.currentTarget.closest('.eachGroup');
+  const inActiveConnectorHandler = evt => {
+    const parentGroup = evt?.currentTarget.closest('.eachGroup');
     handleConnectorHover(parentGroup, false);
   };
-  var onChangeHandler = function onChangeHandler(op, evt) {
-    onChange === null || onChange === void 0 || onChange(op);
+  const onChangeHandler = (op, evt) => {
+    onChange?.(op);
     focusThisField(evt, conditionBuilderRef);
   };
   return variant == HIERARCHICAL_VARIANT ? /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(className, " ").concat(blockClass, "__connector--disabled")
+    className: `${className} ${blockClass}__connector--disabled`
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, {
     label: operator
   })) : /*#__PURE__*/React__default.createElement(ConditionBuilderItem, _extends({
@@ -63,7 +64,7 @@ var ConditionConnector = function ConditionConnector(_ref) {
     onBlur: inActiveConnectorHandler
   }, rest, {
     popOverClassName: className,
-    className: "".concat(blockClass, "__connector-button")
+    className: `${blockClass}__connector-button`
   }), /*#__PURE__*/React__default.createElement(ItemOption, {
     config: {
       options: connectorConfig

package/es/components/ConditionBuilder/ConditionBuilderConnector/GroupConnector.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useContext } from 'react';
 import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem.js';
 import { ItemOption } from '../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js';
@@ -14,22 +13,23 @@ import { useTranslations } from '../utils/useTranslations.js';
 import { blockClass } from '../utils/util.js';
 import { useDataConfigs } from '../utils/useDataConfigs.js';
 
-var GroupConnector = function GroupConnector() {
-  var _useContext = useContext(ConditionBuilderContext),
-    rootState = _useContext.rootState,
-    setRootState = _useContext.setRootState;
-  var _useTranslations = useTranslations(['conditionText']),
-    _useTranslations2 = _slicedToArray(_useTranslations, 1),
-    conditionText = _useTranslations2[0];
-  var _useDataConfigs = useDataConfigs(),
-    connectorConfig = _useDataConfigs.connectorConfig;
-  var onStatementChangeHandler = function onStatementChangeHandler(updatedStatement) {
-    setRootState(_objectSpread2(_objectSpread2({}, rootState), {}, {
+const GroupConnector = () => {
+  const {
+    rootState,
+    setRootState
+  } = useContext(ConditionBuilderContext);
+  const [conditionText] = useTranslations(['conditionText']);
+  const {
+    connectorConfig
+  } = useDataConfigs();
+  const onStatementChangeHandler = updatedStatement => {
+    setRootState({
+      ...rootState,
       operator: updatedStatement
-    }));
+    });
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__group-separator ").concat(blockClass, "__group-separator-row"),
+    className: `${blockClass}__group-separator ${blockClass}__group-separator-row`,
     role: "row",
     tabIndex: -1,
     "aria-level": 1
@@ -37,8 +37,8 @@ var GroupConnector = function GroupConnector() {
     label: rootState.operator,
     title: conditionText,
     "data-name": "connectorField",
-    popOverClassName: "".concat(blockClass, "__gap"),
-    className: "".concat(blockClass, "__statement-button")
+    popOverClassName: `${blockClass}__gap`,
+    className: `${blockClass}__statement-button`
   }, /*#__PURE__*/React__default.createElement(ItemOption, {
     conditionState: {
       value: rootState.operator,