@carbon/ibm-products 2.36.0-alpha.27 → 2.37.0

package/lib/_virtual/_rollupPluginBabelHelpers.js

@@ -165,7 +165,7 @@ function _regeneratorRuntime() {
   function makeInvokeMethod(e, r, n) {
     var o = h;
     return function (i, a) {
-      if (o === f) throw new Error("Generator is already running");
+      if (o === f) throw Error("Generator is already running");
       if (o === s) {
         if ("throw" === i) throw a;
         return {
@@ -307,7 +307,7 @@ function _regeneratorRuntime() {
           } else if (c) {
             if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
           } else {
-            if (!u) throw new Error("try statement without catch or finally");
+            if (!u) throw Error("try statement without catch or finally");
             if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
           }
         }
@@ -347,7 +347,7 @@ function _regeneratorRuntime() {
           return o;
         }
       }
-      throw new Error("illegal catch attempt");
+      throw Error("illegal catch attempt");
     },
     delegateYield: function (e, r, n) {
       return this.delegate = {
@@ -370,7 +370,7 @@ function _toPrimitive(t, r) {
 }
 function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : String(i);
+  return "symbol" == typeof i ? i : i + "";
 }
 function _typeof(o) {
   "@babel/helpers - typeof";
@@ -445,12 +445,11 @@ function _objectDestructuringEmpty(obj) {
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+  for (var key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
   }
   return target;
 }

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.d.ts

@@ -1,10 +1,11 @@
-export function BreadcrumbWithOverflow({ breadcrumbs, className, maxVisible, noTrailingSlash, overflowAriaLabel, ...other }: {
+export function BreadcrumbWithOverflow({ breadcrumbs, className, maxVisible, noTrailingSlash, overflowAriaLabel, overflowTooltipAlign, ...other }: {
     [x: string]: any;
     breadcrumbs: any;
     className: any;
     maxVisible: any;
     noTrailingSlash: any;
     overflowAriaLabel: any;
+    overflowTooltipAlign: any;
 }): import("react/jsx-runtime").JSX.Element;
 export namespace BreadcrumbWithOverflow {
     export namespace propTypes {
@@ -34,6 +35,7 @@ export namespace BreadcrumbWithOverflow {
         let maxVisible: PropTypes.Requireable<number>;
         let noTrailingSlash: PropTypes.Requireable<boolean>;
         let overflowAriaLabel: any;
+        let overflowTooltipAlign: any;
     }
     export { componentName as displayName };
 }

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -27,7 +27,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _TooltipTrigger;
-var _excluded = ["breadcrumbs", "className", "maxVisible", "noTrailingSlash", "overflowAriaLabel"],
+var _excluded = ["breadcrumbs", "className", "maxVisible", "noTrailingSlash", "overflowAriaLabel", "overflowTooltipAlign"],
   _excluded2 = ["label", "key", "title", "id"],
   _excluded3 = ["className", "key", "label", "title"];
 
@@ -47,6 +47,7 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
     maxVisible = _ref.maxVisible,
     noTrailingSlash = _ref.noTrailingSlash,
     overflowAriaLabel = _ref.overflowAriaLabel,
+    overflowTooltipAlign = _ref.overflowTooltipAlign,
     other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var carbonPrefix = react.usePrefix();
   var _useState = React.useState(3),
@@ -71,6 +72,7 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
     return /*#__PURE__*/React__default["default"].createElement(react.BreadcrumbItem, {
       key: "breadcrumb-overflow-".concat(internalId.current)
     }, /*#__PURE__*/React__default["default"].createElement(react.OverflowMenu, {
+      align: overflowTooltipAlign,
       "aria-label": overflowAriaLabel,
       iconDescription: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
       ,
@@ -328,6 +330,10 @@ exports.BreadcrumbWithOverflow.propTypes = {
   overflowAriaLabel: index["default"].string.isRequired.if(function (_ref6) {
     var breadcrumbs = _ref6.breadcrumbs;
     return breadcrumbs.length > 1;
-  })
+  }),
+  /**
+   * overflowTooltipAlign: align tooltip position
+   */
+  overflowTooltipAlign: react.Tooltip.propTypes.align
 };
 exports.BreadcrumbWithOverflow.displayName = componentName;

package/lib/components/Carousel/Carousel.d.ts

@@ -1,3 +1,47 @@
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+interface CarouselProps {
+    /**
+     * Provide the contents of the Carousel.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Disables the ability of the Carousel to scroll
+     * use a keyboard's left and right arrow keys.
+     */
+    disableArrowScroll?: boolean;
+    /**
+     * Enables the edges of the component to have faded styling.
+     *
+     * Pass a single string (`$color`) to specify the same color for left and right.
+     *
+     * Or pass an object (`{ left: $color1, right: $color2 }`) to specify different colors.
+     */
+    fadedEdgeColor?: string | {
+        left: string;
+        right: string;
+    };
+    /**
+     * An optional callback function that returns `true`
+     * when the carousel has enough content to be scrollable,
+     * and `false` when there is not enough content.
+     */
+    onChangeIsScrollable?: (isScrollable: boolean) => void;
+    /**
+     * An optional callback function that returns the scroll position as
+     * a value between 0 and 1.
+     */
+    onScroll?: (scrollPercent: number) => void;
+}
 /**
  * The Carousel acts as a scaffold for other Novice to Pro content.
  *
@@ -14,5 +58,5 @@
  * 2. From the right-aligned position, when scrolling left,
  *      the left-most item should again be left-aligned.
  */
-export const Carousel: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
+export { Carousel };

package/lib/components/Carousel/Carousel.js

@@ -23,7 +23,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "onChangeIsScrollable", "onScroll"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--carousel");
 var componentName = 'Carousel';
@@ -62,29 +61,31 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
     _ref$onScroll = _ref.onScroll,
     onScroll = _ref$onScroll === void 0 ? defaults.onScroll : _ref$onScroll,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var carouselRef = React.useRef();
-  var scrollRef = React.useRef();
+  var carouselRef = React.useRef(null);
+  var scrollRef = React.useRef(null);
   // Array of refs used to reference this component's children DOM elements
   var childElementsRef = React.useRef(Array(React__default["default"].Children.count(children)).fill(React.useRef(null)));
-  var leftFadedEdgeColor = (fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left) || fadedEdgeColor;
-  var rightFadedEdgeColor = (fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right) || fadedEdgeColor;
+  var leftFadedEdgeColor = _rollupPluginBabelHelpers["typeof"](fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left : fadedEdgeColor;
+  var rightFadedEdgeColor = _rollupPluginBabelHelpers["typeof"](fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right : fadedEdgeColor;
 
   // Trigger callbacks to report state of the carousel
   var handleOnScroll = React.useCallback(function () {
+    var _scrollRef$current, _scrollRef$current2, _scrollRef$current3;
+    if (!scrollRef.current) {
+      return;
+    }
+
     // viewport's width
-    var clientWidth = scrollRef.current.clientWidth;
+    var clientWidth = (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.clientWidth;
     // scroll position
-    var scrollLeft = parseInt(scrollRef.current.scrollLeft, 10);
+    var scrollLeft = parseInt("".concat((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.scrollLeft), 10);
     // scrollable width
-    var scrollWidth = scrollRef.current.scrollWidth;
+    var scrollWidth = (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.scrollWidth;
 
     // The maximum scrollLeft achievable is the scrollable width - the viewport width.
     var scrollLeftMax = scrollWidth - clientWidth;
     // if isNaN(scrollLeft / scrollLeftMax), then set to zero
     var scrollPercent = parseFloat((scrollLeft / scrollLeftMax).toFixed(2)) || 0;
-    if (!scrollRef.current) {
-      return;
-    }
 
     // Callback 1: Does the carousel have enough content to enable scrolling?
     onChangeIsScrollable(scrollWidth > clientWidth);
@@ -104,7 +105,8 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
 
   // Get all elements that are visible in the container.
   var getElementsInView = React.useCallback(function () {
-    var containerRect = scrollRef.current.getBoundingClientRect();
+    var _scrollRef$current4;
+    var containerRect = scrollRef === null || scrollRef === void 0 || (_scrollRef$current4 = scrollRef.current) === null || _scrollRef$current4 === void 0 ? void 0 : _scrollRef$current4.getBoundingClientRect();
     var inViewElements = childElementsRef.current.filter(function (el) {
       return getElementInView(containerRect, el.getBoundingClientRect());
     });
@@ -113,8 +115,9 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
 
   // Return container's and children's rect data
   var getContainerAndChildRectData = React.useCallback(function () {
+    var _scrollRef$current5;
     // Get the rect of the container
-    var containerRect = scrollRef.current.getBoundingClientRect();
+    var containerRect = scrollRef === null || scrollRef === void 0 || (_scrollRef$current5 = scrollRef.current) === null || _scrollRef$current5 === void 0 ? void 0 : _scrollRef$current5.getBoundingClientRect();
     // Get all child elements that are in view of the container, and return their bounding rects.
     var elementRectsInView = getElementsInView().map(function (el) {
       return el.getBoundingClientRect();
@@ -132,27 +135,37 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
     };
   }, [getElementsInView]);
   var handleScrollNext = React.useCallback(function () {
+    if (!scrollRef.current) {
+      return;
+    }
     var _getContainerAndChild = getContainerAndChildRectData(),
       containerRect = _getContainerAndChild.containerRect,
       visibleWidth = _getContainerAndChild.visibleWidth;
     // Set the scrollValue to the visibleWidth, but if the visibleWidth value is 0, set it to the container's width
-    var scrollValue = visibleWidth > 0 ? visibleWidth : containerRect.width;
+    var scrollValue = visibleWidth > 0 ? visibleWidth : containerRect === null || containerRect === void 0 ? void 0 : containerRect.width;
     // Increment the scrollLeft of the container
     scrollRef.current.scrollLeft += scrollValue;
   }, [getContainerAndChildRectData]);
   var handleScrollPrev = React.useCallback(function () {
+    var _containerRect$width, _containerRect$left;
+    if (!scrollRef.current) {
+      return;
+    }
     var _getContainerAndChild2 = getContainerAndChildRectData(),
       containerRect = _getContainerAndChild2.containerRect,
       elementRectsInView = _getContainerAndChild2.elementRectsInView,
       visibleWidth = _getContainerAndChild2.visibleWidth;
     // Set the scrollValue to the visibleWidth minus the first child's left value,
     // but if the visibleWidth value is 0, set it to the container's width plus the container's left value
-    var scrollValue = visibleWidth > 0 ? visibleWidth - elementRectsInView[0].left : containerRect.width + containerRect.left;
+    var scrollValue = visibleWidth > 0 ? visibleWidth - elementRectsInView[0].left : ((_containerRect$width = containerRect === null || containerRect === void 0 ? void 0 : containerRect.width) !== null && _containerRect$width !== void 0 ? _containerRect$width : 0) + ((_containerRect$left = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _containerRect$left !== void 0 ? _containerRect$left : 0);
 
     // Decrement the scrollLeft of the container
     scrollRef.current.scrollLeft -= scrollValue;
   }, [getContainerAndChildRectData]);
   var handleScrollReset = React.useCallback(function () {
+    if (!scrollRef.current) {
+      return;
+    }
     // This doesn't trigger "scrollend"...
     scrollRef.current.scrollLeft = 0;
     // ...so trigger a callback manually.
@@ -179,6 +192,9 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
   // On window.resize, reset carousel to zero.
   React.useEffect(function () {
     var handleWindowResize = function handleWindowResize() {
+      if (!scrollRef.current) {
+        return;
+      }
       scrollRef.current.scrollLeft = 0;
       handleOnScroll();
     };
@@ -194,9 +210,9 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
       handleOnScroll();
     };
     var scrollDiv = scrollRef.current;
-    scrollDiv.addEventListener('scrollend', handleScrollend);
+    scrollDiv === null || scrollDiv === void 0 || scrollDiv.addEventListener('scrollend', handleScrollend);
     return function () {
-      return scrollDiv.removeEventListener('scrollend', handleScrollend);
+      return scrollDiv === null || scrollDiv === void 0 ? void 0 : scrollDiv.removeEventListener('scrollend', handleScrollend);
     };
   }, [handleOnScroll]);
 
@@ -216,9 +232,7 @@ var Carousel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
         passive: false
       });
       return function () {
-        scrollDiv.removeEventListener('wheel', handleWheel, {
-          passive: false
-        });
+        scrollDiv.removeEventListener('wheel', handleWheel);
       };
     }
   }, []);
@@ -314,6 +328,7 @@ Carousel.propTypes = {
    *
    * Or pass an object (`{ left: $color1, right: $color2 }`) to specify different colors.
    */
+  /**@ts-ignore*/
   fadedEdgeColor: index["default"].oneOfType([index["default"].string, index["default"].shape({
     left: index["default"].string,
     right: index["default"].string

package/lib/components/Carousel/CarouselItem.d.ts

@@ -1,5 +1,22 @@
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+interface CarouselItemProps {
+    /**
+     * Provide the contents of the CarouselItem.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+}
 /**
  * TODO: A description of the component.
  */
-export const CarouselItem: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+declare const CarouselItem: React.ForwardRefExoticComponent<CarouselItemProps & React.RefAttributes<HTMLDivElement>>;
+export { CarouselItem };

package/lib/components/Carousel/CarouselItem.js

@@ -22,7 +22,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["children", "className"];
-
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 

package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.d.ts

@@ -0,0 +1,21 @@
+export default ConditionBlock;
+/**
+ * This component build each block of condition consisting of property, operator value and close button.
+ */
+declare function ConditionBlock(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace ConditionBlock {
+    namespace propTypes {
+        let addConditionHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        let aria: PropTypes.Requireable<object>;
+        let conditionIndex: PropTypes.Requireable<number>;
+        let conjunction: PropTypes.Requireable<string>;
+        let group: PropTypes.Requireable<object>;
+        let isStatement: PropTypes.Requireable<boolean>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let onConnectorOperatorChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let onRemove: PropTypes.Requireable<(...args: any[]) => any>;
+        let onStatementChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let state: PropTypes.Requireable<object>;
+    }
+}
+import PropTypes from 'prop-types';

package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.js

@@ -0,0 +1,270 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var icons = require('@carbon/react/icons');
+var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
+var index = require('../../../node_modules/prop-types/index.js');
+var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
+var ConditionBuilderItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js');
+var cx = require('classnames');
+var ConditionConnector = require('../ConditionConnector/ConditionConnector.js');
+var ConditionBuilderItemNumber = require('../ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js');
+var ConditionBuilderItemText = require('../ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js');
+var ConditionBuilderItemDate = require('../ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js');
+var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
+var ConditionBuilderButton = require('../ConditionBuilderButton/ConditionBuilderButton.js');
+var util = require('../utils/util.js');
+var ConditionBuilderItemTime = require('../ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js');
+var ConditionBuilderAdd = require('../ConditionBuilderAdd/ConditionBuilderAdd.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+/**
+ * This component build each block of condition consisting of property, operator value and close button.
+ */
+
+var ConditionBlock = function ConditionBlock(props) {
+  var _props$state = props.state,
+    property = _props$state.property,
+    value = _props$state.value,
+    operator = _props$state.operator;
+  var onRemove = props.onRemove,
+    onChange = props.onChange,
+    state = props.state,
+    conjunction = props.conjunction,
+    onConnectorOperatorChange = props.onConnectorOperatorChange,
+    isStatement = props.isStatement,
+    group = props.group,
+    onStatementChange = props.onStatementChange,
+    addConditionHandler = props.addConditionHandler,
+    conditionIndex = props.conditionIndex;
+  var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
+    inputConfig = _useContext.inputConfig;
+  var itemComponents = {
+    option: ConditionBuilderItemOption.ConditionBuilderItemOption,
+    text: ConditionBuilderItemText.ConditionBuilderItemText,
+    number: ConditionBuilderItemNumber.ConditionBuilderItemNumber,
+    date: ConditionBuilderItemDate.ConditionBuilderItemDate,
+    time: ConditionBuilderItemTime.ConditionBuilderItemTime
+  };
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    showDeletionPreview = _useState2[0],
+    setShowDeletionPreview = _useState2[1];
+
+  //filtering the current property to access its properties and config options
+  var getCurrentConfig = function getCurrentConfig(property) {
+    var _inputConfig$properti, _inputConfig$properti2;
+    return (_inputConfig$properti = (_inputConfig$properti2 = inputConfig.properties) === null || _inputConfig$properti2 === void 0 ? void 0 : _inputConfig$properti2.filter(function (eachProperty) {
+      var _eachProperty$label;
+      return ((_eachProperty$label = eachProperty.label) === null || _eachProperty$label === void 0 ? void 0 : _eachProperty$label.toUpperCase()) == (property === null || property === void 0 ? void 0 : property.toUpperCase());
+    })[0]) !== null && _inputConfig$properti !== void 0 ? _inputConfig$properti : {};
+  };
+  var isLastCondition = function isLastCondition(conditionIndex, conditionArr) {
+    return conditionIndex + 1 >= conditionArr.length || conditionArr.length - 1 != conditionIndex && conditionArr[conditionIndex + 1].conditions;
+  };
+  var _getCurrentConfig = getCurrentConfig(property),
+    icon = _getCurrentConfig.icon,
+    type = _getCurrentConfig.type,
+    config = _getCurrentConfig.config,
+    label = _getCurrentConfig.label;
+  var ItemComponent = property ? itemComponents[type] : null;
+  var onStatementChangeHandler = function onStatementChangeHandler(v, e) {
+    util.focusThisField(e);
+    onStatementChange(v);
+  };
+  var onConnectorOperatorChangeHandler = function onConnectorOperatorChangeHandler(op) {
+    onConnectorOperatorChange(op);
+  };
+  var onPropertyChangeHandler = function onPropertyChangeHandler(newProperty) {
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+      property: newProperty,
+      operator: undefined,
+      value: '',
+      popoverToOpen: 'operatorField'
+    }));
+  };
+  var onOperatorChangeHandler = function onOperatorChangeHandler(newOperator) {
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+      operator: newOperator,
+      value: undefined,
+      popoverToOpen: 'valueField'
+    }));
+  };
+  var onValueChangeHandler = function onValueChangeHandler(newValue) {
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+      value: newValue,
+      popoverToOpen: ''
+    }));
+  };
+  var handleShowDeletionPreview = function handleShowDeletionPreview() {
+    setShowDeletionPreview(true);
+  };
+  var handleHideDeletionPreview = function handleHideDeletionPreview() {
+    setShowDeletionPreview(false);
+  };
+  var getOperators = function getOperators() {
+    return DataConfigs.operatorConfig.filter(function (operator) {
+      return operator.type.indexOf(type) != -1 || operator.type == 'all';
+    });
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: cx__default["default"]("".concat(DataConfigs.blockClass, "__condition-block conditionBlockWrapper ").concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__condition-builder-condition__deletion-preview"), showDeletionPreview)),
+    key: conditionIndex,
+    role: "row",
+    "aria-label": DataConfigs.translateWithId('condition_row'),
+    tabIndex: -1
+  }, isStatement && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem
+  //   open={false}
+  , {
+    label: group.statement,
+    title: DataConfigs.translateWithId('condition'),
+    "data-name": "connectorField",
+    popOverClassName: "".concat(DataConfigs.blockClass, "__gap"),
+    className: "".concat(DataConfigs.blockClass, "__statement-button")
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
+    conditionState: {
+      value: group.statement,
+      label: DataConfigs.translateWithId('condition')
+    },
+    onChange: onStatementChangeHandler,
+    config: {
+      options: DataConfigs.statementConfig
+    }
+  })), conjunction && /*#__PURE__*/React__default["default"].createElement(ConditionConnector["default"], {
+    className: "".concat(DataConfigs.blockClass, "__gap"),
+    operator: conjunction,
+    onChange: onConnectorOperatorChangeHandler
+  }), /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    label: label,
+    title: DataConfigs.translateWithId('property'),
+    renderIcon: icon !== null && icon !== void 0 ? icon : null,
+    className: "".concat(DataConfigs.blockClass, "__property-field"),
+    "data-name": "propertyField",
+    state: state,
+    type: type
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
+    conditionState: {
+      value: property,
+      label: DataConfigs.translateWithId('property')
+    },
+    onChange: onPropertyChangeHandler,
+    config: {
+      options: inputConfig.properties
+    }
+  })), property && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    label: operator,
+    title: DataConfigs.translateWithId('operator'),
+    "data-name": "operatorField",
+    state: state,
+    type: type
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
+    config: {
+      options: getOperators()
+    },
+    conditionState: {
+      value: operator,
+      label: DataConfigs.translateWithId('operator')
+    },
+    onChange: onOperatorChangeHandler
+  })), property && operator && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    label: value,
+    type: type,
+    title: label,
+    showToolTip: true,
+    "data-name": "valueField",
+    state: state,
+    config: config
+  }, /*#__PURE__*/React__default["default"].createElement(ItemComponent, {
+    conditionState: {
+      property: property,
+      operator: operator,
+      value: value
+    },
+    onChange: onValueChangeHandler,
+    config: config
+  })), /*#__PURE__*/React__default["default"].createElement("span", {
+    role: "gridcell",
+    "aria-label": DataConfigs.translateWithId('remove_condition')
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, {
+    hideLabel: true,
+    label: DataConfigs.translateWithId('remove_condition'),
+    onClick: onRemove,
+    onMouseEnter: handleShowDeletionPreview,
+    onMouseLeave: handleHideDeletionPreview,
+    onFocus: handleShowDeletionPreview,
+    onBlur: handleHideDeletionPreview,
+    renderIcon: icons.Close,
+    className: "".concat(DataConfigs.blockClass, "__close-condition"),
+    "data-name": "closeCondition"
+  })), isLastCondition(conditionIndex, group.conditions) && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderAdd["default"], {
+    onClick: function onClick() {
+      addConditionHandler(conditionIndex);
+    }
+    //addConditionSubGroupHandler={()=>{addConditionSubGroupHandler(conditionIndex)}}
+    ,
+    className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-left")
+  }));
+};
+var ConditionBlock$1 = ConditionBlock;
+ConditionBlock.propTypes = {
+  /**
+   * callback to add a new condition
+   */
+  addConditionHandler: index["default"].func,
+  /**
+   * object hold aria attributes
+   */
+  aria: index["default"].object,
+  /**
+   * index of the current condition
+   */
+  conditionIndex: index["default"].number,
+  /**
+   * string that decides to show the condition connector
+   */
+  conjunction: index["default"].string,
+  /**
+   * object that hold the current group object where is condition is part of
+   */
+  group: index["default"].object,
+  /**
+   *  boolean that decides to show the statement(if/ excl.if)
+   */
+  isStatement: index["default"].bool,
+  /**
+   * callback to update the current condition of the state tree
+   */
+  onChange: index["default"].func,
+  /**
+   * callback to handle the connector(and/or) change
+   */
+  onConnectorOperatorChange: index["default"].func,
+  /**
+   * callback for Remove a condition
+   */
+  onRemove: index["default"].func,
+  /**
+   * callback to handle the statement(if/ excl.if) change
+   */
+  onStatementChange: index["default"].func,
+  /**
+   * object that hold the current condition
+   */
+  state: index["default"].object
+};
+
+exports["default"] = ConditionBlock$1;