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

package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -18,7 +18,7 @@ import '../../global/js/utils/props-helper.js';
 import { TooltipTrigger } from '../TooltipTrigger/TooltipTrigger.js';
 
 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"];
 
@@ -38,6 +38,7 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
     maxVisible = _ref.maxVisible,
     noTrailingSlash = _ref.noTrailingSlash,
     overflowAriaLabel = _ref.overflowAriaLabel,
+    overflowTooltipAlign = _ref.overflowTooltipAlign,
     other = _objectWithoutProperties(_ref, _excluded);
   var carbonPrefix = usePrefix();
   var _useState = useState(3),
@@ -62,6 +63,7 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
     return /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
       key: "breadcrumb-overflow-".concat(internalId.current)
     }, /*#__PURE__*/React__default.createElement(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"
       ,
@@ -319,7 +321,11 @@ BreadcrumbWithOverflow.propTypes = {
   overflowAriaLabel: PropTypes.string.isRequired.if(function (_ref6) {
     var breadcrumbs = _ref6.breadcrumbs;
     return breadcrumbs.length > 1;
-  })
+  }),
+  /**
+   * overflowTooltipAlign: align tooltip position
+   */
+  overflowTooltipAlign: Tooltip.propTypes.align
 };
 BreadcrumbWithOverflow.displayName = componentName;
 

package/es/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/es/components/Carousel/Carousel.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, typeof as _typeof, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useCallback, useEffect, useImperativeHandle } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import { CarouselItem } from './CarouselItem.js';
@@ -14,7 +14,6 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 
 var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "onChangeIsScrollable", "onScroll"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--carousel");
 var componentName = 'Carousel';
@@ -53,29 +52,31 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _ref$onScroll = _ref.onScroll,
     onScroll = _ref$onScroll === void 0 ? defaults.onScroll : _ref$onScroll,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var carouselRef = useRef();
-  var scrollRef = useRef();
+  var carouselRef = useRef(null);
+  var scrollRef = useRef(null);
   // Array of refs used to reference this component's children DOM elements
   var childElementsRef = useRef(Array(React__default.Children.count(children)).fill(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 = _typeof(fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left : fadedEdgeColor;
+  var rightFadedEdgeColor = _typeof(fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right : fadedEdgeColor;
 
   // Trigger callbacks to report state of the carousel
   var handleOnScroll = 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);
@@ -95,7 +96,8 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 
   // Get all elements that are visible in the container.
   var getElementsInView = 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());
     });
@@ -104,8 +106,9 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 
   // Return container's and children's rect data
   var getContainerAndChildRectData = 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();
@@ -123,27 +126,37 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     };
   }, [getElementsInView]);
   var handleScrollNext = 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 = 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 = useCallback(function () {
+    if (!scrollRef.current) {
+      return;
+    }
     // This doesn't trigger "scrollend"...
     scrollRef.current.scrollLeft = 0;
     // ...so trigger a callback manually.
@@ -170,6 +183,9 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   // On window.resize, reset carousel to zero.
   useEffect(function () {
     var handleWindowResize = function handleWindowResize() {
+      if (!scrollRef.current) {
+        return;
+      }
       scrollRef.current.scrollLeft = 0;
       handleOnScroll();
     };
@@ -185,9 +201,9 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, 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]);
 
@@ -207,9 +223,7 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         passive: false
       });
       return function () {
-        scrollDiv.removeEventListener('wheel', handleWheel, {
-          passive: false
-        });
+        scrollDiv.removeEventListener('wheel', handleWheel);
       };
     }
   }, []);
@@ -305,6 +319,7 @@ Carousel.propTypes = {
    *
    * Or pass an object (`{ left: $color1, right: $color2 }`) to specify different colors.
    */
+  /**@ts-ignore*/
   fadedEdgeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     left: PropTypes.string,
     right: PropTypes.string

package/es/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/es/components/Carousel/CarouselItem.js

@@ -13,7 +13,6 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 
 var _excluded = ["children", "className"];
-
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 

package/es/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/es/components/ConditionBuilder/ConditionBlock/ConditionBlock.js

@@ -0,0 +1,261 @@
+/**
+ * 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.
+ */
+
+import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useContext, useState } from 'react';
+import { Close } from '@carbon/react/icons';
+import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem.js';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import { blockClass, translateWithId, statementConfig, operatorConfig } from '../ConditionBuilderContext/DataConfigs.js';
+import { ConditionBuilderItemOption } from '../ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js';
+import cx from 'classnames';
+import ConditionConnector from '../ConditionConnector/ConditionConnector.js';
+import { ConditionBuilderItemNumber } from '../ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js';
+import { ConditionBuilderItemText } from '../ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js';
+import { ConditionBuilderItemDate } from '../ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js';
+import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBuilderProvider.js';
+import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton.js';
+import { focusThisField } from '../utils/util.js';
+import { ConditionBuilderItemTime } from '../ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js';
+import ConditionBuilderAdd from '../ConditionBuilderAdd/ConditionBuilderAdd.js';
+
+/**
+ * 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 = useContext(ConditionBuilderContext),
+    inputConfig = _useContext.inputConfig;
+  var itemComponents = {
+    option: ConditionBuilderItemOption,
+    text: ConditionBuilderItemText,
+    number: ConditionBuilderItemNumber,
+    date: ConditionBuilderItemDate,
+    time: ConditionBuilderItemTime
+  };
+  var _useState = useState(false),
+    _useState2 = _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) {
+    focusThisField(e);
+    onStatementChange(v);
+  };
+  var onConnectorOperatorChangeHandler = function onConnectorOperatorChangeHandler(op) {
+    onConnectorOperatorChange(op);
+  };
+  var onPropertyChangeHandler = function onPropertyChangeHandler(newProperty) {
+    onChange(_objectSpread2(_objectSpread2({}, state), {}, {
+      property: newProperty,
+      operator: undefined,
+      value: '',
+      popoverToOpen: 'operatorField'
+    }));
+  };
+  var onOperatorChangeHandler = function onOperatorChangeHandler(newOperator) {
+    onChange(_objectSpread2(_objectSpread2({}, state), {}, {
+      operator: newOperator,
+      value: undefined,
+      popoverToOpen: 'valueField'
+    }));
+  };
+  var onValueChangeHandler = function onValueChangeHandler(newValue) {
+    onChange(_objectSpread2(_objectSpread2({}, state), {}, {
+      value: newValue,
+      popoverToOpen: ''
+    }));
+  };
+  var handleShowDeletionPreview = function handleShowDeletionPreview() {
+    setShowDeletionPreview(true);
+  };
+  var handleHideDeletionPreview = function handleHideDeletionPreview() {
+    setShowDeletionPreview(false);
+  };
+  var getOperators = function getOperators() {
+    return operatorConfig.filter(function (operator) {
+      return operator.type.indexOf(type) != -1 || operator.type == 'all';
+    });
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: cx("".concat(blockClass, "__condition-block conditionBlockWrapper ").concat(blockClass, "__gap ").concat(blockClass, "__gap-bottom"), _defineProperty({}, "".concat(blockClass, "__condition-builder-condition__deletion-preview"), showDeletionPreview)),
+    key: conditionIndex,
+    role: "row",
+    "aria-label": translateWithId('condition_row'),
+    tabIndex: -1
+  }, isStatement && /*#__PURE__*/React__default.createElement(ConditionBuilderItem
+  //   open={false}
+  , {
+    label: group.statement,
+    title: translateWithId('condition'),
+    "data-name": "connectorField",
+    popOverClassName: "".concat(blockClass, "__gap"),
+    className: "".concat(blockClass, "__statement-button")
+  }, /*#__PURE__*/React__default.createElement(ConditionBuilderItemOption, {
+    conditionState: {
+      value: group.statement,
+      label: translateWithId('condition')
+    },
+    onChange: onStatementChangeHandler,
+    config: {
+      options: statementConfig
+    }
+  })), conjunction && /*#__PURE__*/React__default.createElement(ConditionConnector, {
+    className: "".concat(blockClass, "__gap"),
+    operator: conjunction,
+    onChange: onConnectorOperatorChangeHandler
+  }), /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+    label: label,
+    title: translateWithId('property'),
+    renderIcon: icon !== null && icon !== void 0 ? icon : null,
+    className: "".concat(blockClass, "__property-field"),
+    "data-name": "propertyField",
+    state: state,
+    type: type
+  }, /*#__PURE__*/React__default.createElement(ConditionBuilderItemOption, {
+    conditionState: {
+      value: property,
+      label: translateWithId('property')
+    },
+    onChange: onPropertyChangeHandler,
+    config: {
+      options: inputConfig.properties
+    }
+  })), property && /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+    label: operator,
+    title: translateWithId('operator'),
+    "data-name": "operatorField",
+    state: state,
+    type: type
+  }, /*#__PURE__*/React__default.createElement(ConditionBuilderItemOption, {
+    config: {
+      options: getOperators()
+    },
+    conditionState: {
+      value: operator,
+      label: translateWithId('operator')
+    },
+    onChange: onOperatorChangeHandler
+  })), property && operator && /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+    label: value,
+    type: type,
+    title: label,
+    showToolTip: true,
+    "data-name": "valueField",
+    state: state,
+    config: config
+  }, /*#__PURE__*/React__default.createElement(ItemComponent, {
+    conditionState: {
+      property: property,
+      operator: operator,
+      value: value
+    },
+    onChange: onValueChangeHandler,
+    config: config
+  })), /*#__PURE__*/React__default.createElement("span", {
+    role: "gridcell",
+    "aria-label": translateWithId('remove_condition')
+  }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, {
+    hideLabel: true,
+    label: translateWithId('remove_condition'),
+    onClick: onRemove,
+    onMouseEnter: handleShowDeletionPreview,
+    onMouseLeave: handleHideDeletionPreview,
+    onFocus: handleShowDeletionPreview,
+    onBlur: handleHideDeletionPreview,
+    renderIcon: Close,
+    className: "".concat(blockClass, "__close-condition"),
+    "data-name": "closeCondition"
+  })), isLastCondition(conditionIndex, group.conditions) && /*#__PURE__*/React__default.createElement(ConditionBuilderAdd, {
+    onClick: function onClick() {
+      addConditionHandler(conditionIndex);
+    }
+    //addConditionSubGroupHandler={()=>{addConditionSubGroupHandler(conditionIndex)}}
+    ,
+    className: "".concat(blockClass, "__gap ").concat(blockClass, "__gap-left")
+  }));
+};
+var ConditionBlock$1 = ConditionBlock;
+ConditionBlock.propTypes = {
+  /**
+   * callback to add a new condition
+   */
+  addConditionHandler: PropTypes.func,
+  /**
+   * object hold aria attributes
+   */
+  aria: PropTypes.object,
+  /**
+   * index of the current condition
+   */
+  conditionIndex: PropTypes.number,
+  /**
+   * string that decides to show the condition connector
+   */
+  conjunction: PropTypes.string,
+  /**
+   * object that hold the current group object where is condition is part of
+   */
+  group: PropTypes.object,
+  /**
+   *  boolean that decides to show the statement(if/ excl.if)
+   */
+  isStatement: PropTypes.bool,
+  /**
+   * callback to update the current condition of the state tree
+   */
+  onChange: PropTypes.func,
+  /**
+   * callback to handle the connector(and/or) change
+   */
+  onConnectorOperatorChange: PropTypes.func,
+  /**
+   * callback for Remove a condition
+   */
+  onRemove: PropTypes.func,
+  /**
+   * callback to handle the statement(if/ excl.if) change
+   */
+  onStatementChange: PropTypes.func,
+  /**
+   * object that hold the current condition
+   */
+  state: PropTypes.object
+};
+
+export { ConditionBlock$1 as default };