@carbon/ibm-products 2.43.2-canary.7 → 2.44.0-rc.0

package/lib/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
-var ConditionBuilderItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js');
+var ItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js');
 var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
 var index = require('../../../node_modules/prop-types/index.js');
 var util = require('../utils/util.js');
@@ -65,7 +65,7 @@ var ConditionConnector = function ConditionConnector(_ref) {
   }, rest, {
     popOverClassName: className,
     className: "".concat(DataConfigs.blockClass, "__connector-button ")
-  }), /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
+  }), /*#__PURE__*/React__default["default"].createElement(ItemOption.ItemOption, {
     config: {
       options: DataConfigs.connectorConfig
     },

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

@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
 var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
-var ConditionBuilderItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js');
+var ItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js');
 var util = require('../utils/util.js');
 var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
 
@@ -34,7 +34,7 @@ var GroupConnector = function GroupConnector() {
     "data-name": "connectorField",
     popOverClassName: "".concat(DataConfigs.blockClass, "__gap"),
     className: "".concat(DataConfigs.blockClass, "__statement-button")
-  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
+  }, /*#__PURE__*/React__default["default"].createElement(ItemOption.ItemOption, {
     conditionState: {
       value: rootState.operator,
       label: DataConfigs.translateWithId('condition')

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

@@ -1,30 +1,28 @@
 export default ConditionBuilderContent;
-declare function ConditionBuilderContent({ startConditionLabel, conditionBuilderRef, getConditionState, initialState, }: {
+declare function ConditionBuilderContent({ startConditionLabel, conditionBuilderRef, getConditionState, getActionsState, initialState, actions, }: {
     startConditionLabel: any;
     conditionBuilderRef: any;
     getConditionState: any;
+    getActionsState: any;
     initialState: any;
+    actions: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace ConditionBuilderContent {
     namespace propTypes {
         let actions: PropTypes.Requireable<(PropTypes.InferProps<{
-            id: PropTypes.Requireable<number>;
-            label: PropTypes.Requireable<string>;
+            id: PropTypes.Validator<NonNullable<NonNullable<string | number | null | undefined>>>;
+            label: PropTypes.Validator<string>;
         }> | null | undefined)[]>;
         let conditionBuilderRef: PropTypes.Requireable<object>;
         let getActionsState: PropTypes.Requireable<(...args: any[]) => any>;
         let getConditionState: PropTypes.Validator<(...args: any[]) => any>;
         let initialState: PropTypes.Requireable<PropTypes.InferProps<{
             groups: PropTypes.Requireable<(PropTypes.InferProps<{
-                groupSeparateOperator: PropTypes.Requireable<string>;
-                groupOperator: PropTypes.Requireable<string>;
-                statement: PropTypes.Requireable<string>;
-                conditions: PropTypes.Requireable<(PropTypes.InferProps<{
-                    property: PropTypes.Requireable<string>;
-                    operator: PropTypes.Requireable<string>;
-                    value: PropTypes.Requireable<string>;
-                }> | null | undefined)[]>;
+                groupOperator: PropTypes.Validator<string>;
+                statement: PropTypes.Validator<string>;
+                conditions: PropTypes.Requireable<(object | null | undefined)[]>;
             }> | null | undefined)[]>;
+            operator: PropTypes.Requireable<string>;
         }>>;
         let startConditionLabel: PropTypes.Validator<string>;
     }

package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js

@@ -21,6 +21,7 @@ var ConditionBuilderButton = require('../ConditionBuilderButton/ConditionBuilder
 var uuidv4 = require('../../../global/js/utils/uuidv4.js');
 var ConditionPreview = require('../ConditionPreview/ConditionPreview.js');
 var GroupConnector = require('../ConditionBuilderConnector/GroupConnector.js');
+var ConditionBuilderActions = require('../ConditionBuilderActions/ConditionBuilderActions.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -32,14 +33,14 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
   var startConditionLabel = _ref.startConditionLabel,
     conditionBuilderRef = _ref.conditionBuilderRef,
     getConditionState = _ref.getConditionState,
-    initialState = _ref.initialState;
-  // const { rootState, setRootState, variant, actionState } = useContext(
-  //   ConditionBuilderContext
-  // );
+    getActionsState = _ref.getActionsState,
+    initialState = _ref.initialState,
+    actions = _ref.actions;
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     rootState = _useContext.rootState,
     setRootState = _useContext.setRootState,
-    variant = _useContext.variant;
+    variant = _useContext.variant,
+    actionState = _useContext.actionState;
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isConditionBuilderActive = _useState2[0],
@@ -61,11 +62,10 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rootState]);
-
-  // useEffect(() => {
-  //   getActionsState?.(actionState);
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, [actionState]);
+  React.useEffect(function () {
+    getActionsState === null || getActionsState === void 0 || getActionsState(actionState);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [actionState]);
   var onStartConditionBuilder = function onStartConditionBuilder() {
     //when add condition button is clicked.
     setIsConditionBuilderActive(true);
@@ -91,8 +91,6 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
   };
   var addConditionGroupHandler = function addConditionGroupHandler() {
     var newGroup = {
-      groupSeparateOperator: 'and',
-      // 'or'|'and'|'null',
       groupOperator: 'and',
       //'and|or',
       statement: 'if',
@@ -111,7 +109,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     }));
   };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isConditionBuilderActive && /*#__PURE__*/React__default["default"].createElement(react.Button, {
-    className: "".concat(DataConfigs.blockClass, "__add-condition-button"),
+    className: "".concat(DataConfigs.blockClass, "__add_condition-button"),
     renderIcon: function renderIcon(props) {
       return /*#__PURE__*/React__default["default"].createElement(icons.Add, _rollupPluginBabelHelpers["extends"]({
         size: 16
@@ -121,10 +119,7 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     kind: "ghost",
     size: "sm",
     onClick: onStartConditionBuilder
-  }, startConditionLabel), isConditionBuilderActive &&
-  /*#__PURE__*/
-  // <h5 >Condition</h5>
-  React__default["default"].createElement(react.Section, {
+  }, startConditionLabel), isConditionBuilderActive && /*#__PURE__*/React__default["default"].createElement(react.Section, {
     className: "".concat(DataConfigs.blockClass, "__heading"),
     level: 4
   }, _Heading || (_Heading = /*#__PURE__*/React__default["default"].createElement(react.Heading, null, "Condition"))), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -164,16 +159,19 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
     onMouseLeave: function onMouseLeave() {
       setShowConditionGroupPreview(false);
     },
-    className: "".concat(DataConfigs.blockClass, "__add-condition-group "),
+    className: "".concat(DataConfigs.blockClass, "__add_condition_group "),
     hideLabel: true,
-    label: DataConfigs.translateWithId('add-condition-sub-group'),
+    label: DataConfigs.translateWithId('add_condition_group'),
     wrapperProps: {
       role: 'gridcell',
-      'aria-label': DataConfigs.translateWithId('add-condition-sub-group')
+      'aria-label': DataConfigs.translateWithId('add_condition_group')
     }
   })), showConditionGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
     previewType: "newGroup"
-  }))))));
+  }))))), isConditionBuilderActive && actions && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderActions["default"], {
+    actions: actions,
+    className: "".concat(DataConfigs.blockClass, "__actions-container")
+  }));
 };
 var ConditionBuilderContent$1 = ConditionBuilderContent;
 ConditionBuilderContent.propTypes = {
@@ -181,8 +179,8 @@ ConditionBuilderContent.propTypes = {
    * optional array of object that give the list of actions.
    */
   actions: index["default"].arrayOf(index["default"].shape({
-    id: index["default"].number,
-    label: index["default"].string
+    id: index["default"].oneOfType([index["default"].string, index["default"].number]).isRequired,
+    label: index["default"].string.isRequired
   })),
   /**
    * ref of condition builder
@@ -201,15 +199,21 @@ ConditionBuilderContent.propTypes = {
    */
   initialState: index["default"].shape({
     groups: index["default"].arrayOf(index["default"].shape({
-      groupSeparateOperator: index["default"].string,
-      groupOperator: index["default"].string,
-      statement: index["default"].string,
-      conditions: index["default"].arrayOf(index["default"].shape({
-        property: index["default"].string,
-        operator: index["default"].string,
-        value: index["default"].string
-      }))
-    }))
+      groupOperator: index["default"].string.isRequired,
+      statement: index["default"].string.isRequired,
+      conditions: index["default"].arrayOf(index["default"].oneOfType([index["default"].shape({
+        property: index["default"].string.isRequired,
+        operator: index["default"].string.isRequired,
+        value: index["default"].oneOfType([index["default"].string, index["default"].arrayOf(index["default"].shape({
+          id: index["default"].string,
+          label: index["default"].string
+        })), index["default"].shape({
+          id: index["default"].string,
+          label: index["default"].string
+        })])
+      }), index["default"].object]))
+    })),
+    operator: index["default"].string
   }),
   /* Provide a label to the button that starts condition builder
    */

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

@@ -1,7 +1,6 @@
 export namespace emptyState {
     let operator: string;
     let groups: {
-        groupSeparateOperator: null;
         groupOperator: string;
         statement: string;
         id: any;

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

@@ -21,7 +21,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var emptyState = {
   operator: 'or',
   groups: [{
-    groupSeparateOperator: null,
     groupOperator: 'and',
     statement: 'if',
     id: uuidv4["default"](),
@@ -58,10 +57,16 @@ var ConditionBuilderProvider = function ConditionBuilderProvider(props) {
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     rootState = _useState2[0],
     setRootState = _useState2[1];
+  var _useState3 = React.useState([]),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    actionState = _useState4[0],
+    setActionState = _useState4[1];
   return /*#__PURE__*/React__default["default"].createElement(ConditionBuilderContext.Provider, {
     value: {
       rootState: rootState,
       setRootState: setRootState,
+      actionState: actionState,
+      setActionState: setActionState,
       inputConfig: props.inputConfig,
       popOverSearchThreshold: props.popOverSearchThreshold,
       getOptions: props.getOptions,
@@ -95,7 +100,7 @@ ConditionBuilderProvider.propTypes = {
       id: index["default"].string,
       label: index["default"].string,
       icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
-      type: index["default"].oneOf(['text', 'number', 'date', 'option', 'time']),
+      type: index["default"].oneOf(['text', 'number', 'date', 'option', 'time', 'custom']),
       config: index["default"].shape({
         options: index["default"].arrayOf(index["default"].shape({
           id: index["default"].string,

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

@@ -6,6 +6,10 @@ export const connectorConfig: {
     label: string;
     id: string;
 }[];
+export const actionConfig: {
+    label: string;
+    id: string;
+}[];
 export const operatorConfig: {
     label: string;
     id: string;
@@ -16,7 +20,8 @@ export function translateWithId(key: any): any;
 export namespace valueRenderers {
     function text(val: any): any;
     function time(val: any): any;
-    function number(val: any, config: any): any;
+    function number(val: any): any;
     function option(value: any): any;
     function date(value: any): any;
+    function custom(value: any): any;
 }

package/lib/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.js

@@ -17,7 +17,7 @@ var statementConfig = [{
   id: 'if'
 }, {
   label: 'excl.if',
-  id: 'excl.if'
+  id: 'excl_if'
 }];
 var connectorConfig = [{
   label: 'and',
@@ -26,7 +26,6 @@ var connectorConfig = [{
   label: 'or',
   id: 'or'
 }];
-//op types : option, text, number, date,
 var operatorConfig = [{
   label: 'is',
   id: 'is',
@@ -37,7 +36,7 @@ var operatorConfig = [{
   type: 'number'
 }, {
   label: 'is greater than or equal to',
-  id: 'greater-equal',
+  id: 'greater_equal',
   type: 'number'
 }, {
   label: 'is lower than',
@@ -45,15 +44,15 @@ var operatorConfig = [{
   type: 'number'
 }, {
   label: 'is lower than or equal to',
-  id: 'lower-equal',
+  id: 'lower_equal',
   type: 'number'
 }, {
   label: 'starts with',
-  id: 'starts-with',
+  id: 'starts_with',
   type: 'text'
 }, {
   label: 'ends with',
-  id: 'ends-with',
+  id: 'ends_with',
   type: 'text'
 }, {
   label: 'contains',
@@ -61,7 +60,7 @@ var operatorConfig = [{
   type: 'text'
 }, {
   label: 'is one of',
-  id: 'one-of',
+  id: 'one_of',
   type: 'option'
 }, {
   label: 'is before',
@@ -96,11 +95,17 @@ var valueRenderers = {
   time: function time(val) {
     return val;
   },
-  number: function number(val, config) {
-    return config.unit && val ? "".concat(val, " ").concat(config.unit) : val;
+  number: function number(val) {
+    return val;
   },
   option: function option(value) {
-    return Array.isArray(value) ? value.join(', ') : value;
+    if (value && typeof value !== 'string') {
+      var selectedValues = Array.isArray(value) ? value : [value];
+      return selectedValues.map(function (option) {
+        return option.label;
+      }).join(', ');
+    }
+    return value;
   },
   date: function date(value) {
     if (Array.isArray(value) && value.length > 1) {
@@ -110,6 +115,9 @@ var valueRenderers = {
     } else {
       return value && new Date(value) ? formatDate(new Date(value)) : value;
     }
+  },
+  custom: function custom(value) {
+    return value;
   }
 };
 

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

@@ -1,38 +1,41 @@
 export namespace translationsObject {
-    let en: {
-        if: string;
-        'excl-if': string;
-        and: string;
-        or: string;
-        is: string;
-        greater: string;
-        'greater-equal': string;
-        lower: string;
-        'lower-equal': string;
-        'starts-with': string;
-        'ends-with': string;
-        contains: string;
-        'one-of': string;
-        before: string;
-        after: string;
-        between: string;
-        'add-condition': string;
-        'add-condition-group': string;
-        'add-condition-sub-group': string;
-        condition: string;
-        property: string;
-        operator: string;
-        value: string;
-        connector: string;
-        condition_row: string;
-        remove_condition: string;
-        add_condition_row: string;
-        start: string;
-        end: string;
-        clear_search: string;
-        actions: string;
-        then: string;
-        remove_action: string;
-        add_action: string;
-    };
+    namespace en {
+        let _if: string;
+        export { _if as if };
+        export let excl_if: string;
+        export let and: string;
+        export let or: string;
+        export let is: string;
+        export let greater: string;
+        export let greater_equal: string;
+        export let lower: string;
+        export let lower_equal: string;
+        export let starts_with: string;
+        export let ends_with: string;
+        export let contains: string;
+        export let one_of: string;
+        export let before: string;
+        export let after: string;
+        export let between: string;
+        export let add_condition: string;
+        export let add_condition_group: string;
+        export let add_subgroup: string;
+        export let condition: string;
+        export let property: string;
+        export let operator: string;
+        export let value: string;
+        export let connector: string;
+        export let condition_row: string;
+        export let remove_condition: string;
+        export let add_condition_row: string;
+        export let start: string;
+        export let end: string;
+        export let clear_search: string;
+        export let actions: string;
+        export let then: string;
+        export let remove_action: string;
+        export let add_action: string;
+        export let invalid_text: string;
+        export let text_invalid_number: string;
+    }
 }

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

@@ -12,24 +12,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var translationsObject = {
   en: {
     if: 'if',
-    'excl-if': 'excl.if',
+    excl_if: 'excl.if',
     and: 'and',
     or: 'or',
     is: 'is',
     greater: 'is greater than',
-    'greater-equal': 'is greater than or equal to',
+    greater_equal: 'is greater than or equal to',
     lower: 'is lower than',
-    'lower-equal': 'is lower than or equal to',
-    'starts-with': 'starts with',
-    'ends-with': 'ends with',
+    lower_equal: 'is lower than or equal to',
+    starts_with: 'starts with',
+    ends_with: 'ends with',
     contains: 'contains',
-    'one-of': 'is one of',
+    one_of: 'is one of',
     before: 'is before',
     after: 'is after',
     between: 'is between',
-    'add-condition': 'Add Condition',
-    'add-condition-group': 'Add Condition Group',
-    'add-condition-sub-group': 'Add Condition sub group',
+    add_condition: 'Add condition',
+    add_condition_group: 'Add condition group',
+    add_subgroup: 'Add subgroup',
     condition: 'Condition',
     property: 'Property',
     operator: 'Operator',
@@ -44,7 +44,9 @@ var translationsObject = {
     actions: 'Actions',
     then: 'then',
     remove_action: 'Remove Action',
-    add_action: 'Add action'
+    add_action: 'Add action',
+    invalid_text: 'Incomplete',
+    text_invalid_number: 'Invalid number, must be 0 or greater'
   }
 };
 

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

@@ -17,7 +17,7 @@ export namespace ConditionBuilderItem {
         let className: PropTypes.Requireable<string>;
         let condition: PropTypes.Requireable<object>;
         let config: PropTypes.Requireable<object>;
-        let label: PropTypes.Requireable<NonNullable<string | any[] | null | undefined>>;
+        let label: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
         let popOverClassName: PropTypes.Requireable<string>;
         let renderIcon: PropTypes.Requireable<object>;
         let showToolTip: PropTypes.Requireable<boolean>;

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js

@@ -35,19 +35,26 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     config = _ref.config,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var contentRef = React.useRef(null);
-  var _useState = React.useState(label),
+  var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    propertyLabel = _useState2[0],
-    setPropertyLabel = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    open = _useState4[0],
-    setOpen = _useState4[1];
-  React.useEffect(function () {
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var getPropertyDetails = function getPropertyDetails() {
+    if (label === 'INVALID') {
+      return {
+        propertyLabel: DataConfigs.translateWithId('invalid_text'),
+        isInvalid: true
+      };
+    }
     var propertyId = rest['data-name'] == 'valueField' && type ? DataConfigs.valueRenderers[type](label, config) : label;
-    setPropertyLabel(DataConfigs.translateWithId(propertyId));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [label]);
+    return {
+      isInvalid: false,
+      propertyLabel: DataConfigs.translateWithId(propertyId)
+    };
+  };
+  var _getPropertyDetails = getPropertyDetails(),
+    propertyLabel = _getPropertyDetails.propertyLabel,
+    isInvalid = _getPropertyDetails.isInvalid;
   React.useEffect(function () {
     /**
      * rest['data-name'] holds the current field name
@@ -59,7 +66,7 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
       if (condition.popoverToOpen && currentField !== condition.popoverToOpen) {
         // close the previous popover
         setOpen(false);
-      } else if (currentField == 'valueField' && type == 'option' && condition.operator !== 'one-of') {
+      } else if (currentField == 'valueField' && type == 'option' && condition.operator !== 'one_of') {
         //close the current popover if the field is valueField and  is a single select dropdown. For all other inputs ,popover need to be open on value changes.
         setOpen(false);
       }
@@ -92,7 +99,7 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
       setOpen(false);
     }
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, _rollupPluginBabelHelpers["extends"]({
-    label: propertyLabel !== null && propertyLabel !== void 0 ? propertyLabel : DataConfigs.translateWithId('add-condition'),
+    label: propertyLabel !== null && propertyLabel !== void 0 ? propertyLabel : DataConfigs.translateWithId('add_condition'),
     hideLabel: !label ? true : false,
     onClick: function onClick() {
       children ? setOpen(!open) : null;
@@ -101,7 +108,8 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     "aria-haspopup": true,
     "aria-expanded": open,
     renderIcon: renderIcon ? renderIcon : label == undefined ? icons.Add : null,
-    showToolTip: showToolTip
+    showToolTip: showToolTip,
+    isInvalid: isInvalid
   }, rest)), /*#__PURE__*/React__default["default"].createElement(react.PopoverContent, {
     className: "".concat(DataConfigs.blockClass, "__item__content"),
     role: "dialog",
@@ -133,7 +141,7 @@ ConditionBuilderItem.propTypes = {
   /**
    * text to be displayed in the field
    */
-  label: index["default"].oneOfType([index["default"].string, index["default"].array]),
+  label: index["default"].oneOfType([index["default"].string, index["default"].array, index["default"].object]),
   /**
    * class name for popover
    */

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js

@@ -11,14 +11,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var react = require('@carbon/react');
-var settings = require('../../../../settings.js');
 var index = require('../../../../node_modules/prop-types/index.js');
+var DataConfigs = require('../../ConditionBuilderContext/DataConfigs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var blockClass = "".concat(settings.pkg.prefix, "--condition-builder");
 var ConditionBuilderItemNumber = function ConditionBuilderItemNumber(_ref) {
   var _conditionState$prope;
   var conditionState = _ref.conditionState,
@@ -26,18 +25,34 @@ var ConditionBuilderItemNumber = function ConditionBuilderItemNumber(_ref) {
     onChange = _ref.onChange;
   var onChangeHandler = function onChangeHandler(e, _ref2) {
     var value = _ref2.value;
-    onChange(value + '');
+    if (checkIfValid(value)) {
+      var _config$unit;
+      onChange("".concat(value, " ").concat((_config$unit = config.unit) !== null && _config$unit !== void 0 ? _config$unit : ''));
+    } else {
+      onChange('INVALID');
+    }
+  };
+  var checkIfValid = function checkIfValid(value) {
+    if (value > config.max || value < config.min) {
+      return false;
+    }
+    return true;
+  };
+  var getDefaultValue = function getDefaultValue() {
+    var _conditionState$value;
+    return (_conditionState$value = conditionState.value) === null || _conditionState$value === void 0 || (_conditionState$value = _conditionState$value.split(' ')) === null || _conditionState$value === void 0 ? void 0 : _conditionState$value[0];
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(blockClass, "__item-number")
+    className: "".concat(DataConfigs.blockClass, "__item-number")
   }, /*#__PURE__*/React__default["default"].createElement(react.NumberInput, {
     label: conditionState.property,
     hideLabel: true,
+    defaultValue: getDefaultValue(),
     id: (_conditionState$prope = conditionState.property) === null || _conditionState$prope === void 0 ? void 0 : _conditionState$prope.replace(/\s/g, ''),
-    value: conditionState.value ? conditionState.value.split(' ')[0] : conditionState.value,
     min: config.min,
     max: config.max,
     step: config.step,
+    invalidText: DataConfigs.translateWithId('text_invalid_number'),
     allowEmpty: true,
     onChange: onChangeHandler
   }));

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.d.ts

@@ -0,0 +1,13 @@
+export function ItemOption({ conditionState, config, onChange }: {
+    conditionState?: {} | undefined;
+    config?: {} | undefined;
+    onChange: any;
+}): import("react/jsx-runtime").JSX.Element | undefined;
+export namespace ItemOption {
+    namespace propTypes {
+        let conditionState: PropTypes.Requireable<object>;
+        let config: PropTypes.Requireable<object>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from 'prop-types';