@carbon/ibm-products 2.43.2-canary.145 → 2.43.2-canary.149

package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js

@@ -51,23 +51,25 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     showConditionSubGroupPreview = _useState4[0],
     setShowConditionSubGroupPreview = _useState4[1];
   useState(false);
-  var conditionBuilderContentRef = useRef();
+  var conditionBuilderContentRef = useRef(null);
   var onRemoveHandler = function onRemoveHandler(conditionId, evt, conditionIndex) {
-    if (group.conditions.length > 1) {
+    if (group && group.conditions && group.conditions.length > 1) {
       variant == 'tree' ? handleFocusOnCloseTree(evt) : handleFocusOnClose(evt, conditionIndex);
       if (!checkGroupHaveCondition(group.conditions, conditionId)) {
+        var _group$conditions;
         //when we delete the last  condition of a group without deleting  the subgroup, we need to restructure the group.
         //we will shift the group one level up. The subgroups will open up as conditions.
 
         //spreading out the condition inside the subgroup
-        var allConditions = group.conditions.reduce(function (acc, condition) {
-          if (condition.conditions) {
+        var allConditions = group === null || group === void 0 || (_group$conditions = group.conditions) === null || _group$conditions === void 0 ? void 0 : _group$conditions.reduce(function (acc, condition) {
+          var _condition = condition;
+          if (_condition.conditions) {
             //this is a subgroup
-            return acc.concat(condition.conditions);
+            return acc.concat(_condition.conditions);
           }
           return acc;
         }, []);
-        onChange(_objectSpread2(_objectSpread2({}, group), {}, {
+        onChange === null || onChange === void 0 || onChange(_objectSpread2(_objectSpread2({}, group), {}, {
           conditions: allConditions
         }));
       } else {
@@ -77,15 +79,16 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         //This is to handle a edge case.
         //When a group has structure as 1 condition,1 subgroup, 1 condition and if we delete first condition,
         //the group will start with a subgroup. To avoid this,opening up that subgroup.
-        if (filteredConditions !== null && filteredConditions !== void 0 && filteredConditions[0].conditions) {
-          filteredConditions.splice.apply(filteredConditions, [0, 1].concat(_toConsumableArray(filteredConditions[0].conditions)));
+        if ((filteredConditions === null || filteredConditions === void 0 ? void 0 : filteredConditions[0]).conditions) {
+          var firstFilteredConditions = filteredConditions[0];
+          filteredConditions.splice.apply(filteredConditions, [0, 1].concat(_toConsumableArray(firstFilteredConditions === null || firstFilteredConditions === void 0 ? void 0 : firstFilteredConditions.conditions)));
         }
-        onChange(_objectSpread2(_objectSpread2({}, group), {}, {
+        onChange === null || onChange === void 0 || onChange(_objectSpread2(_objectSpread2({}, group), {}, {
           conditions: filteredConditions
         }));
       }
     } else {
-      onRemove(evt);
+      onRemove === null || onRemove === void 0 || onRemove(evt);
     }
   };
   //check to identify a group without a plain condition
@@ -95,9 +98,11 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     });
   };
   var onChangeHandler = function onChangeHandler(updatedCondition, conditionIndex) {
-    var updatedConditions = [].concat(_toConsumableArray(group.conditions.slice(0, conditionIndex)), [updatedCondition], _toConsumableArray(group.conditions.slice(conditionIndex + 1)));
-    onChange(_objectSpread2(_objectSpread2({}, group), {}, {
-      conditions: updatedConditions
+    var _group$id;
+    var updatedConditions = [].concat(_toConsumableArray(group !== null && group !== void 0 && group.conditions ? group.conditions.slice(0, conditionIndex) : []), [updatedCondition], _toConsumableArray(group !== null && group !== void 0 && group.conditions ? group.conditions.slice(conditionIndex + 1) : []));
+    onChange === null || onChange === void 0 || onChange(_objectSpread2(_objectSpread2({}, group), {}, {
+      conditions: updatedConditions,
+      id: (_group$id = group === null || group === void 0 ? void 0 : group.id) !== null && _group$id !== void 0 ? _group$id : uuidv4()
     }));
   };
   var addConditionHandler = function addConditionHandler(conditionIndex) {
@@ -108,8 +113,8 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       popoverToOpen: 'propertyField',
       id: uuidv4()
     };
-    onChange(_objectSpread2(_objectSpread2({}, group), {}, {
-      conditions: [].concat(_toConsumableArray(group.conditions.slice(0, conditionIndex + 1)), [newCondition], _toConsumableArray(group.conditions.slice(conditionIndex + 1)))
+    onChange === null || onChange === void 0 || onChange(_objectSpread2(_objectSpread2({}, group), {}, {
+      conditions: [].concat(_toConsumableArray(group.conditions ? group.conditions.slice(0, conditionIndex + 1) : []), [newCondition], _toConsumableArray(group.conditions ? group.conditions.slice(conditionIndex + 1) : []))
     }));
   };
   var handleFocusOnClose = function handleFocusOnClose(e, conditionIndex) {
@@ -154,10 +159,11 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
           ariaPosInSet: nextRow.ariaPosInSet
         };
         setTimeout(function () {
-          var currentRowToFocus = conditionBuilderContentRef.current.querySelector("[role=\"row\"][aria-level=\"".concat(rowIdentity.ariaLevel, "\"][aria-posinset=\"").concat(rowIdentity.ariaPosInSet, "\"]"));
+          var _conditionBuilderCont5;
+          var currentRowToFocus = (_conditionBuilderCont5 = conditionBuilderContentRef.current) === null || _conditionBuilderCont5 === void 0 ? void 0 : _conditionBuilderCont5.querySelector("[role=\"row\"][aria-level=\"".concat(rowIdentity.ariaLevel, "\"][aria-posinset=\"").concat(rowIdentity.ariaPosInSet, "\"]"));
           manageTabIndexAndFocus(currentRowToFocus === null || currentRowToFocus === void 0 ? void 0 : currentRowToFocus.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
         }, 0);
-      } else if ((prevRows === null || prevRows === void 0 ? void 0 : prevRows.length) > 1) {
+      } else if (prevRows !== null && prevRows !== void 0 && prevRows.length && prevRows.length > 1) {
         var _prevRows;
         manageTabIndexAndFocus((_prevRows = prevRows[prevRows.length - 2]) === null || _prevRows === void 0 ? void 0 : _prevRows.querySelector('[data-name="closeCondition"]'), conditionBuilderRef);
       }
@@ -165,9 +171,9 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
   };
   var addConditionSubGroupHandler = function addConditionSubGroupHandler(conditionIndex) {
     onChange(_objectSpread2(_objectSpread2({}, group), {}, {
-      conditions: [].concat(_toConsumableArray(group.conditions.slice(0, conditionIndex + 1)), [{
-        groupOperator: 'and',
+      conditions: [].concat(_toConsumableArray(group.conditions ? group.conditions.slice(0, conditionIndex + 1) : []), [{
         statement: 'if',
+        groupOperator: 'and',
         conditions: [{
           property: undefined,
           operator: '',
@@ -176,7 +182,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
           id: uuidv4()
         }],
         id: uuidv4()
-      }], _toConsumableArray(group.conditions.slice(conditionIndex + 1)))
+      }], _toConsumableArray(group.conditions ? group.conditions.slice(conditionIndex + 1) : []))
     }));
   };
   var isLastCondition = function isLastCondition(conditionIndex, conditionArr) {
@@ -210,14 +216,15 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     }));
   };
   var getSentenceVariant = function getSentenceVariant() {
-    var _group$conditions;
+    var _group$conditions2;
     return /*#__PURE__*/React__default.createElement("div", {
       className: "".concat(className, "  eachGroup")
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "".concat(blockClass, "__condition-wrapper"),
       role: "grid",
       "aria-label": conditionBuilderText
-    }, group === null || group === void 0 || (_group$conditions = group.conditions) === null || _group$conditions === void 0 ? void 0 : _group$conditions.map(function (eachCondition, conditionIndex) {
+    }, group === null || group === void 0 || (_group$conditions2 = group.conditions) === null || _group$conditions2 === void 0 ? void 0 : _group$conditions2.map(function (eachCondition, conditionIndex) {
+      var _group$conditions3;
       return /*#__PURE__*/React__default.createElement("div", {
         key: eachCondition.id,
         className: "".concat(blockClass, "__group-wrapper")
@@ -226,7 +233,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         aria: {
           level: aria.level + 1,
           posinset: conditionIndex + 1,
-          setsize: group.conditions.length
+          setsize: group === null || group === void 0 || (_group$conditions3 = group.conditions) === null || _group$conditions3 === void 0 ? void 0 : _group$conditions3.length
         },
         isStatement: conditionIndex == 0,
         condition: eachCondition,
@@ -246,7 +253,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     })));
   };
   var getTreeVariant = function getTreeVariant() {
-    var _group$conditions2;
+    var _group$conditions4;
     return /*#__PURE__*/React__default.createElement("div", {
       className: "".concat(className, " ").concat(blockClass, "__condition-wrapper"),
       role: aria.level === 1 ? 'rowgroup' : undefined,
@@ -276,11 +283,12 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       config: {
         options: statementConfig
       }
-    }))), group === null || group === void 0 || (_group$conditions2 = group.conditions) === null || _group$conditions2 === void 0 ? void 0 : _group$conditions2.map(function (eachCondition, conditionIndex) {
+    }))), group === null || group === void 0 || (_group$conditions4 = group.conditions) === null || _group$conditions4 === void 0 ? void 0 : _group$conditions4.map(function (eachCondition, conditionIndex) {
+      var _group$conditions$len, _group$conditions5, _group$conditions$len2, _group$conditions6;
       return /*#__PURE__*/React__default.createElement(Fragment, {
         key: eachCondition.id
       }, eachCondition.conditions ? /*#__PURE__*/React__default.createElement("div", {
-        className: cx("".concat(blockClass, "__condition-block subgroup  ").concat(blockClass, "__gap"), _defineProperty({}, "".concat(blockClass, "__gap-bottom"), group.conditions.length < conditionIndex + 1), {})
+        className: cx("".concat(blockClass, "__condition-block subgroup  ").concat(blockClass, "__gap"), _defineProperty({}, "".concat(blockClass, "__gap-bottom"), group && group.conditions && group.conditions.length < conditionIndex + 1), {})
       }, /*#__PURE__*/React__default.createElement(ConditionConnector, {
         className: "".concat(blockClass, "__gap ").concat(blockClass, "__gap-bottom ").concat(blockClass, "__groupConnector"),
         operator: group.groupOperator,
@@ -289,7 +297,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         aria: {
           level: aria.level + 1,
           posinset: conditionIndex + 1,
-          setsize: group.conditions.length
+          setsize: (_group$conditions$len = (_group$conditions5 = group.conditions) === null || _group$conditions5 === void 0 ? void 0 : _group$conditions5.length) !== null && _group$conditions$len !== void 0 ? _group$conditions$len : 0
         },
         className: "".concat(blockClass, "__group"),
         group: eachCondition,
@@ -297,14 +305,14 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
           onChangeHandler(updatedConditions, conditionIndex);
         },
         onRemove: function onRemove(e) {
-          onRemoveHandler(eachCondition.id, e);
+          onRemoveHandler(eachCondition.id, e, conditionIndex);
         }
       })) : /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(ConditionBlock, {
         conjunction: conditionIndex > 0 ? group.groupOperator : undefined,
         aria: {
           level: aria.level + 1,
           posinset: conditionIndex + 1,
-          setsize: group.conditions.length
+          setsize: (_group$conditions$len2 = (_group$conditions6 = group.conditions) === null || _group$conditions6 === void 0 ? void 0 : _group$conditions6.length) !== null && _group$conditions$len2 !== void 0 ? _group$conditions$len2 : 0
         },
         isStatement: false,
         condition: eachCondition,
@@ -316,7 +324,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
           onChangeHandler(updatedConditions, conditionIndex);
         },
         onRemove: function onRemove(e) {
-          onRemoveHandler(eachCondition.id, e);
+          onRemoveHandler(eachCondition.id, e, conditionIndex);
         },
         onConnectorOperatorChange: onConnectorOperatorChange,
         onStatementChange: onStatementChangeHandler,
@@ -340,7 +348,6 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
   };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, variant == 'tree' && getTreeVariant(), variant == 'sentence' && getSentenceVariant());
 };
-var ConditionGroupBuilder$1 = ConditionGroupBuilder;
 ConditionGroupBuilder.propTypes = {
   /**
    * object contains the aria attributes
@@ -364,4 +371,4 @@ ConditionGroupBuilder.propTypes = {
   onRemove: PropTypes.func
 };
 
-export { ConditionGroupBuilder$1 as default };
+export { ConditionGroupBuilder as default };

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

@@ -1,14 +1,31 @@
-export default ConditionPreview;
-declare function ConditionPreview({ previewType, group, colorIndex }: {
-    previewType: any;
-    group: any;
-    colorIndex: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace ConditionPreview {
-    namespace propTypes {
-        let colorIndex: PropTypes.Requireable<number>;
-        let group: PropTypes.Requireable<object>;
-        let previewType: PropTypes.Requireable<string>;
-    }
-}
+/**
+ * Copyright IBM Corp. 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 PropTypes from 'prop-types';
+import { ConditionGroup } from '../ConditionBuilder.types';
+interface ConditionPreviewProps {
+    previewType: 'newGroup' | 'subGroup' | 'condition';
+    group: ConditionGroup;
+    colorIndex?: number;
+}
+declare const ConditionPreview: {
+    ({ previewType, group, colorIndex, }: ConditionPreviewProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * index of the color for next group
+         */
+        colorIndex: PropTypes.Requireable<number>;
+        /**
+         * current conditional group
+         */
+        group: PropTypes.Requireable<object>;
+        /**
+         * type of review to be displayed
+         */
+        previewType: PropTypes.Requireable<string>;
+    };
+};
+export default ConditionPreview;

package/es/components/ConditionBuilder/ConditionPreview/ConditionPreview.js

@@ -82,7 +82,6 @@ var ConditionPreview = function ConditionPreview(_ref) {
     popOverClassName: "".concat(blockClass, "__gap")
   }), getConditionSection())));
 };
-var ConditionPreview$1 = ConditionPreview;
 ConditionPreview.propTypes = {
   /**
    * index of the color for next group
@@ -98,4 +97,4 @@ ConditionPreview.propTypes = {
   previewType: PropTypes.oneOf(['condition', 'subGroup', 'newGroup'])
 };
 
-export { ConditionPreview$1 as default };
+export { ConditionPreview as default };

package/es/components/ConditionBuilder/utils/handleKeyboardEvents.js

@@ -78,9 +78,9 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
         if (document.activeElement.type !== 'button') {
           var _document$activeEleme2;
           //for button , enter key is click which already handled by framework, for other elements trigger click
+          evt.preventDefault();
           (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
         }
-        evt.preventDefault();
       } else {
         if (document.activeElement.type !== 'button') {
           var _document$activeEleme3;

package/es/components/Datagrid/useFiltering.d.ts

@@ -5,5 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { Hooks } from 'react-table';
+export declare const exactText: (rows: any, ids: any, filterValue: any) => any;
 declare const useFiltering: (hooks: Hooks) => void;
 export default useFiltering;

package/es/components/Datagrid/useFiltering.js

@@ -7,9 +7,18 @@
 
 import { defineProperty as _defineProperty, slicedToArray as _slicedToArray, typeof as _typeof, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useMemo } from 'react';
-import { MULTISELECT, DATE, NUMBER, CHECKBOX, BATCH } from './Datagrid/addons/Filtering/constants.js';
+import { RADIO, DATE, NUMBER, CHECKBOX, MULTISELECT, BATCH } from './Datagrid/addons/Filtering/constants.js';
 import FilterFlyout from './Datagrid/addons/Filtering/FilterFlyout.js';
 
+// This function was taken from https://github.com/TanStack/table/blob/v7/src/filterTypes.js
+var exactText = function exactText(rows, ids, filterValue) {
+  return rows.filter(function (row) {
+    return ids.some(function (id) {
+      var rowValue = row.values[id];
+      return rowValue !== undefined ? String(rowValue).toLowerCase() === String(filterValue).toLowerCase() : true;
+    });
+  });
+};
 var handleMultiFilter = function handleMultiFilter(rows, id, value) {
   // gets all the items that are selected and returns their value
   var selectedItems = value.filter(function (item) {
@@ -30,7 +39,7 @@ var handleMultiFilter = function handleMultiFilter(rows, id, value) {
 var useFiltering = function useFiltering(hooks) {
   /* istanbul ignore next */
   var filterTypes = useMemo(function () {
-    return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, DATE, function (rows, id, _ref) {
+    return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, DATE, function (rows, id, _ref) {
       var _ref2 = _slicedToArray(_ref, 2),
         startDate = _ref2[0],
         endDate = _ref2[1];
@@ -60,6 +69,8 @@ var useFiltering = function useFiltering(hooks) {
       return handleMultiFilter(rows, id, value);
     }), MULTISELECT, function (rows, id, value) {
       return handleMultiFilter(rows, id, value);
+    }), RADIO, function (rows, id, value) {
+      return exactText(rows, id, value);
     });
   }, []);
   hooks.useInstance.push(function (instance) {
@@ -94,4 +105,4 @@ var useFiltering = function useFiltering(hooks) {
 };
 var useFiltering$1 = useFiltering;
 
-export { useFiltering$1 as default };
+export { useFiltering$1 as default, exactText };

package/lib/components/Card/Card.js

@@ -245,7 +245,9 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       secondaryButtonText: secondaryButtonText
     };
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", getCardProps(), !getStarted && media && /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    "aria-disabled": disabled
+  }, getCardProps()), !getStarted && media && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__media")
   }, media), Pictogram && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__pictogram")

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

@@ -1,28 +1,104 @@
-export default ConditionBlock;
+/**
+ * Copyright IBM Corp. 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 React from 'react';
+import PropTypes from 'prop-types';
+import { Condition, ConditionGroup, LogicalOperator } from '../ConditionBuilder.types';
 /**
  * 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 addConditionSubGroupHandler: PropTypes.Requireable<(...args: any[]) => any>;
-        let aria: PropTypes.Requireable<object>;
-        let condition: PropTypes.Requireable<object>;
-        let conditionIndex: PropTypes.Requireable<number>;
-        let conjunction: PropTypes.Requireable<string>;
-        let group: PropTypes.Requireable<object>;
-        let hideConditionPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
-        let hideConditionSubGroupPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
-        let isLastCondition: PropTypes.Requireable<(...args: any[]) => any>;
-        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 showConditionPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
-        let showConditionSubGroupPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
-        let state: PropTypes.Requireable<object>;
-    }
+interface ConditionBlockProps {
+    condition?: Condition;
+    onRemove: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onChange: (condition: Condition) => void;
+    onConnectorOperatorChange?: (op: string) => void;
+    onStatementChange?: (v: string) => void;
+    addConditionHandler?: (conditionIndex: number) => void;
+    addConditionSubGroupHandler?: (conditionIndex: number) => void;
+    hideConditionSubGroupPreviewHandler?: () => void;
+    showConditionSubGroupPreviewHandler?: () => void;
+    hideConditionPreviewHandler?: () => void;
+    showConditionPreviewHandler?: () => void;
+    conjunction?: LogicalOperator;
+    isStatement?: boolean;
+    group: ConditionGroup;
+    conditionIndex: number;
+    aria: {
+        level: number;
+        posinset: number;
+        setsize?: number;
+    };
+    isLastCondition: (index: number, conditions: (ConditionGroup | Condition)[]) => void;
 }
-import PropTypes from 'prop-types';
+declare const ConditionBlock: {
+    (props: ConditionBlockProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * callback to add a new condition
+         */
+        addConditionHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * callback to add a new condition subgroup
+         */
+        addConditionSubGroupHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * object hold aria attributes
+         */
+        aria: PropTypes.Requireable<object>;
+        condition: PropTypes.Requireable<object>;
+        conditionIndex: PropTypes.Requireable<number>;
+        /**
+         * string that decides to show the condition connector
+         */
+        conjunction: PropTypes.Requireable<string>;
+        /**
+         * object that hold the current group object where is condition is part of
+         */
+        group: PropTypes.Requireable<object>;
+        /**
+         * handler for hiding sub group preview
+         */
+        hideConditionPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * handler for hiding sub group preview
+         */
+        hideConditionSubGroupPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        isLastCondition: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         *  boolean that decides to show the statement(if/ excl.if)
+         */
+        isStatement: PropTypes.Requireable<boolean>;
+        /**
+         * callback to update the current condition of the state tree
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * callback to handle the connector(and/or) change
+         */
+        onConnectorOperatorChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * callback for Remove a condition
+         */
+        onRemove: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * callback to handle the statement(if/ excl.if) change
+         */
+        onStatementChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * handler for showing add condition preview
+         */
+        showConditionPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * handler for showing sub group preview
+         */
+        showConditionSubGroupPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * object that hold the current condition
+         */
+        state: PropTypes.Requireable<object>;
+    };
+};
+export default ConditionBlock;

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

@@ -41,13 +41,10 @@ var _div;
  */
 
 var ConditionBlock = function ConditionBlock(props) {
-  var _props$condition = props.condition,
-    property = _props$condition.property,
-    value = _props$condition.value,
-    operator = _props$condition.operator;
   var onRemove = props.onRemove,
     onChange = props.onChange,
-    condition = props.condition,
+    _props$condition = props.condition,
+    condition = _props$condition === void 0 ? {} : _props$condition,
     conjunction = props.conjunction,
     onConnectorOperatorChange = props.onConnectorOperatorChange,
     isStatement = props.isStatement,
@@ -62,6 +59,9 @@ var ConditionBlock = function ConditionBlock(props) {
     hideConditionPreviewHandler = props.hideConditionPreviewHandler,
     showConditionPreviewHandler = props.showConditionPreviewHandler,
     isLastCondition = props.isLastCondition;
+  var property = condition.property,
+    value = condition.value,
+    operator = condition.operator;
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     inputConfig = _useContext.inputConfig,
     variant = _useContext.variant,
@@ -85,15 +85,15 @@ var ConditionBlock = function ConditionBlock(props) {
   //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.find(function (eachProperty) {
+    return (_inputConfig$properti = inputConfig === null || inputConfig === void 0 || (_inputConfig$properti2 = inputConfig.properties) === null || _inputConfig$properti2 === void 0 ? void 0 : _inputConfig$properti2.find(function (eachProperty) {
       return eachProperty.id == property;
     })) !== null && _inputConfig$properti !== void 0 ? _inputConfig$properti : {};
   };
-  var _getCurrentConfig = getCurrentConfig(property),
-    icon = _getCurrentConfig.icon,
-    type = _getCurrentConfig.type,
-    config = _getCurrentConfig.config,
-    label = _getCurrentConfig.label;
+  var _ref = getCurrentConfig(property),
+    icon = _ref.icon,
+    type = _ref.type,
+    config = _ref.config,
+    label = _ref.label;
 
   //Below possible input types expected for value field.
   var itemComponents = {
@@ -105,7 +105,7 @@ var ConditionBlock = function ConditionBlock(props) {
     custom: config === null || config === void 0 ? void 0 : config.component,
     textarea: ConditionBuilderItemText.ConditionBuilderItemText
   };
-  var ItemComponent = property ? itemComponents[type] : null;
+  var ItemComponent = itemComponents[type];
   var showAllActionsHandler = function showAllActionsHandler() {
     setShowAllActions(true);
   };
@@ -114,7 +114,7 @@ var ConditionBlock = function ConditionBlock(props) {
   };
   var onStatementChangeHandler = function onStatementChangeHandler(v, evt) {
     util.focusThisField(evt, conditionBuilderRef);
-    onStatementChange(v);
+    onStatementChange === null || onStatementChange === void 0 || onStatementChange(v);
   };
   var onPropertyChangeHandler = function onPropertyChangeHandler(newProperty) {
     onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, condition), {}, {
@@ -192,7 +192,7 @@ var ConditionBlock = function ConditionBlock(props) {
     className: "".concat(DataConfigs.blockClass, "__gap"),
     operator: conjunction,
     onChange: function onChange(op) {
-      return onConnectorOperatorChange(op);
+      return onConnectorOperatorChange === null || onConnectorOperatorChange === void 0 ? void 0 : onConnectorOperatorChange(op);
     }
   }) : _div || (_div = /*#__PURE__*/React__default["default"].createElement("div", {
     role: "gridcell"
@@ -215,7 +215,7 @@ var ConditionBlock = function ConditionBlock(props) {
   })), /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
     label: label !== null && label !== void 0 ? label : condition === null || condition === void 0 ? void 0 : condition.property,
     title: propertyText,
-    renderIcon: icon !== null && icon !== void 0 ? icon : null,
+    renderIcon: icon !== null && icon !== void 0 ? icon : undefined,
     className: "".concat(DataConfigs.blockClass, "__property-field"),
     "data-name": "propertyField",
     condition: condition,
@@ -228,7 +228,7 @@ var ConditionBlock = function ConditionBlock(props) {
     },
     onChange: onPropertyChangeHandler,
     config: {
-      options: inputConfig.properties
+      options: inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.properties
     }
   })), util.checkIsValid(property) && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
     label: operator,
@@ -272,10 +272,10 @@ var ConditionBlock = function ConditionBlock(props) {
     "data-name": "closeCondition"
   })), manageActionButtons(conditionIndex, group.conditions) && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderAdd["default"], {
     onClick: function onClick() {
-      addConditionHandler(conditionIndex);
+      addConditionHandler === null || addConditionHandler === void 0 || addConditionHandler(conditionIndex);
     },
     addConditionSubGroupHandler: function addConditionSubGroupHandler() {
-      _addConditionSubGroupHandler(conditionIndex);
+      _addConditionSubGroupHandler === null || _addConditionSubGroupHandler === void 0 || _addConditionSubGroupHandler(conditionIndex);
     },
     showConditionSubGroupPreviewHandler: showConditionSubGroupPreviewHandler,
     hideConditionSubGroupPreviewHandler: hideConditionSubGroupPreviewHandler,
@@ -285,7 +285,6 @@ var ConditionBlock = function ConditionBlock(props) {
     className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-left")
   }));
 };
-var ConditionBlock$1 = ConditionBlock;
 ConditionBlock.propTypes = {
   /**
    * callback to add a new condition
@@ -352,4 +351,4 @@ ConditionBlock.propTypes = {
   state: index["default"].object
 };
 
-exports["default"] = ConditionBlock$1;
+exports["default"] = ConditionBlock;

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

@@ -1,5 +1,12 @@
 /**
- * TODO: A description of the component.
+ * Copyright IBM Corp. 2024, 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.
  */
-export let ConditionBuilder: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+import { ConditionBuilderProps } from './ConditionBuilder.types';
+/**
+ * TODO: A description of the component.
+ */
+export declare let ConditionBuilder: React.ForwardRefExoticComponent<ConditionBuilderProps & React.RefAttributes<HTMLDivElement>>;