@carbon/ibm-products 2.43.2-canary.33 → 2.43.2-canary.330

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

@@ -7,61 +7,69 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 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 index = require('../../../../_virtual/index.js');
+var useTranslations = require('../../utils/useTranslations.js');
+var util = require('../../utils/util.js');
 
-var blockClass = "".concat(settings.pkg.prefix, "--condition-builder");
 var ConditionBuilderItemDate = function ConditionBuilderItemDate(_ref) {
   var conditionState = _ref.conditionState,
-    onChange = _ref.onChange;
-  var DatePickerInputRef = React.useRef();
+    onChange = _ref.onChange,
+    parentRef = _ref.parentRef;
+  var DatePickerInputRef = React.useRef(null);
+  var _useTranslations = useTranslations.useTranslations(['startText', 'endText']),
+    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 2),
+    startText = _useTranslations2[0],
+    endText = _useTranslations2[1];
   var datePickerType = conditionState.operator == 'between' ? 'range' : 'single';
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(blockClass, "__item-date ")
-  }, datePickerType == 'single' && /*#__PURE__*/React__default["default"].createElement(react.DatePicker, {
+  var onCloseHandler = function onCloseHandler(selectedDate) {
+    onChange(selectedDate && selectedDate.length > 0 ? selectedDate : 'INVALID');
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(util.blockClass, "__item-date ")
+  }, datePickerType == 'single' && /*#__PURE__*/React.createElement(react.DatePicker, {
     ref: DatePickerInputRef,
     dateFormat: "d/m/Y",
     datePickerType: "single",
-    onClose: onChange,
-    value: conditionState.value
-  }, /*#__PURE__*/React__default["default"].createElement(react.DatePickerInput, {
+    value: conditionState.value,
+    onClose: onCloseHandler,
+    appendTo: parentRef === null || parentRef === void 0 ? void 0 : parentRef.current
+  }, /*#__PURE__*/React.createElement(react.DatePickerInput, {
     id: "datePicker",
     placeholder: "dd/mm/yyyy",
     labelText: conditionState.property
-  })), datePickerType == 'range' && /*#__PURE__*/React__default["default"].createElement(react.DatePicker, {
+  })), datePickerType == 'range' && /*#__PURE__*/React.createElement(react.DatePicker, {
     ref: DatePickerInputRef,
     dateFormat: "d/m/Y",
     datePickerType: datePickerType,
-    onClose: onChange,
-    value: conditionState.value
-  }, /*#__PURE__*/React__default["default"].createElement(react.DatePickerInput, {
+    onClose: onCloseHandler,
+    value: conditionState.value,
+    appendTo: parentRef === null || parentRef === void 0 ? void 0 : parentRef.current
+  }, /*#__PURE__*/React.createElement(react.DatePickerInput, {
     id: "datePickerStart",
     placeholder: "dd/mm/yyyy",
-    labelText: DataConfigs.translateWithId('start')
-  }), /*#__PURE__*/React__default["default"].createElement(react.DatePickerInput, {
+    labelText: startText
+  }), /*#__PURE__*/React.createElement(react.DatePickerInput, {
     id: "datePickerEnd",
     placeholder: "dd/mm/yyyy",
-    labelText: DataConfigs.translateWithId('end')
+    labelText: endText
   })));
 };
 ConditionBuilderItemDate.propTypes = {
   /**
    * current condition object
    */
-  conditionState: index["default"].object,
+  conditionState: index.default.object,
   /**
    * callback to update state oin date change
    */
-  onChange: index["default"].func
+  onChange: index.default.func,
+  /**
+   * reference to the popover node
+   */
+  parentRef: index.default.object
 };
 
 exports.ConditionBuilderItemDate = ConditionBuilderItemDate;

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

@@ -1,13 +1,32 @@
-export function ConditionBuilderItemNumber({ conditionState, config, onChange, }: {
-    conditionState: any;
-    config: any;
-    onChange: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace ConditionBuilderItemNumber {
-    namespace propTypes {
-        let conditionState: PropTypes.Requireable<object>;
-        let config: PropTypes.Requireable<object>;
-        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-}
+/**
+ * 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, PropertyConfigNumber } from '../../ConditionBuilder.types';
+interface ConditionBuilderItemNumberProps {
+    conditionState: Condition;
+    config: PropertyConfigNumber['config'];
+    onChange: (value: string) => void;
+}
+export declare const ConditionBuilderItemNumber: {
+    ({ conditionState, config, onChange, }: ConditionBuilderItemNumberProps): React.JSX.Element;
+    propTypes: {
+        /**
+         * current condition object
+         */
+        conditionState: PropTypes.Requireable<object>;
+        /**
+         * current config object that this property is part of
+         */
+        config: PropTypes.Requireable<object>;
+        /**
+         * callback to update state oin date change
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
+export {};

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

@@ -7,25 +7,24 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var react = require('@carbon/react');
-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 index = require('../../../../_virtual/index.js');
+var useTranslations = require('../../utils/useTranslations.js');
+var util = require('../../utils/util.js');
 
 var ConditionBuilderItemNumber = function ConditionBuilderItemNumber(_ref) {
   var _conditionState$prope;
   var conditionState = _ref.conditionState,
     config = _ref.config,
     onChange = _ref.onChange;
+  var _useTranslations = useTranslations.useTranslations(['invalidNumberWarnText']),
+    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 1),
+    invalidNumberWarnText = _useTranslations2[0];
   var onChangeHandler = function onChangeHandler(e, _ref2) {
     var value = _ref2.value;
-    if (checkIfValid(value)) {
+    if (value !== '' && !isNaN(value) && checkIfValid(value)) {
       var _config$unit;
       onChange("".concat(value, " ").concat((_config$unit = config.unit) !== null && _config$unit !== void 0 ? _config$unit : ''));
     } else {
@@ -33,43 +32,46 @@ var ConditionBuilderItemNumber = function ConditionBuilderItemNumber(_ref) {
     }
   };
   var checkIfValid = function checkIfValid(value) {
-    if (value > config.max || value < config.min) {
+    if (config.max !== undefined && config.min === undefined && value > config.max) {
+      return false;
+    }
+    if (config.min !== undefined && config.max === undefined && value < config.min) {
+      return false;
+    }
+    if (config.max !== undefined && config.min !== undefined && (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];
+    var _split$, _conditionState$value;
+    return (_split$ = (_conditionState$value = conditionState.value) === null || _conditionState$value === void 0 || (_conditionState$value = _conditionState$value.split(' ')) === null || _conditionState$value === void 0 ? void 0 : _conditionState$value[0]) !== null && _split$ !== void 0 ? _split$ : '';
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__item-number")
-  }, /*#__PURE__*/React__default["default"].createElement(react.NumberInput, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(util.blockClass, "__item-number")
+  }, /*#__PURE__*/React.createElement(react.NumberInput, _rollupPluginBabelHelpers.extends({}, config, {
     label: conditionState.property,
     hideLabel: true,
-    defaultValue: getDefaultValue(),
     id: (_conditionState$prope = conditionState.property) === null || _conditionState$prope === void 0 ? void 0 : _conditionState$prope.replace(/\s/g, ''),
-    min: config.min,
-    max: config.max,
-    step: config.step,
-    invalidText: DataConfigs.translateWithId('text_invalid_number'),
+    invalidText: invalidNumberWarnText,
     allowEmpty: true,
-    onChange: onChangeHandler
-  }));
+    onChange: onChangeHandler,
+    defaultValue: getDefaultValue()
+  })));
 };
 ConditionBuilderItemNumber.propTypes = {
   /**
    * current condition object
    */
-  conditionState: index["default"].object,
+  conditionState: index.default.object,
   /**
    * current config object that this property is part of
    */
-  config: index["default"].object,
+  config: index.default.object,
   /**
    * callback to update state oin date change
    */
-  onChange: index["default"].func
+  onChange: index.default.func
 };
 
 exports.ConditionBuilderItemNumber = ConditionBuilderItemNumber;

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

@@ -1,13 +1,37 @@
-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>;
-    }
-}
+/**
+ * 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 { PropertyConfigOption } from '../../ConditionBuilder.types';
+interface ItemOptionProps {
+    conditionState: {
+        label?: string;
+        value?: string;
+    };
+    config: PropertyConfigOption['config'] & {
+        isStatement?: boolean;
+    };
+    onChange: (value: string, e: Event) => void;
+}
+export declare const ItemOption: {
+    ({ conditionState, config, onChange, }: ItemOptionProps): React.JSX.Element | undefined;
+    propTypes: {
+        /**
+         * current condition object
+         */
+        conditionState: PropTypes.Requireable<object>;
+        /**
+         * current config object that this property is part of
+         */
+        config: PropTypes.Requireable<object>;
+        /**
+         * callback to update state oin date change
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
+export {};

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

@@ -7,19 +7,14 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
-var index = require('../../../../node_modules/prop-types/index.js');
+var index = require('../../../../_virtual/index.js');
 var ConditionBuilderProvider = require('../../ConditionBuilderContext/ConditionBuilderProvider.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 useTranslations = require('../../utils/useTranslations.js');
+var util = require('../../utils/util.js');
 
 var ItemOption = function ItemOption(_ref) {
   var _ref$conditionState = _ref.conditionState,
@@ -29,21 +24,27 @@ var ItemOption = function ItemOption(_ref) {
     onChange = _ref.onChange;
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     popOverSearchThreshold = _useContext.popOverSearchThreshold;
-  var contentRef = React.useRef();
+  var contentRef = React.useRef(null);
+  var _useTranslations = useTranslations.useTranslations(['propertyText', 'clearSearchText']),
+    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 2),
+    propertyText = _useTranslations2[0],
+    clearSearchText = _useTranslations2[1];
   var allOptions = config.options;
   var _useState = React.useState(''),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     searchValue = _useState2[0],
     setSearchValue = _useState2[1];
   var selection = conditionState.value;
-  var filteredItems = allOptions === null || allOptions === void 0 ? void 0 : allOptions.filter(function (opt) {
-    return opt.label.toLowerCase().includes(searchValue.toLowerCase());
-  });
+  var filteredItems = searchValue ? allOptions === null || allOptions === void 0 ? void 0 : allOptions.filter(function (opt) {
+    var _opt$label;
+    return (_opt$label = opt.label) === null || _opt$label === void 0 ? void 0 : _opt$label.toLowerCase().includes(searchValue.toLowerCase());
+  }) : allOptions;
   React.useEffect(function () {
     //this will focus the first input field in the popover
 
     if (contentRef.current) {
-      var firstFocusableElement = contentRef.current.querySelector('input, button,li');
+      var _contentRef$current;
+      var firstFocusableElement = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.querySelector('input, button,li');
       if (firstFocusableElement) {
         firstFocusableElement.focus();
       }
@@ -57,45 +58,54 @@ var ItemOption = function ItemOption(_ref) {
     setSearchValue(value);
   };
   var getAriaLabel = function getAriaLabel() {
-    return conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : DataConfigs.translateWithId('property');
+    return conditionState.label ? conditionState.label : propertyText;
+  };
+  var getStatementContent = function getStatementContent(option) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(util.blockClass, "__statement_wrapper")
+    }, /*#__PURE__*/React.createElement("div", null, option.text1, " (", option.connector, ")"), /*#__PURE__*/React.createElement("div", null, option.text2));
+  };
+  var preventDefault = function preventDefault(evt) {
+    return evt.preventDefault();
   };
   if (!allOptions) {
     return;
   }
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__item-option"),
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(util.blockClass, "__item-option"),
     ref: contentRef
-  }, allOptions.length > popOverSearchThreshold && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__item-option__search")
-  }, /*#__PURE__*/React__default["default"].createElement(react.Search, {
+  }, popOverSearchThreshold && allOptions.length > popOverSearchThreshold && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(util.blockClass, "__item-option__search")
+  }, /*#__PURE__*/React.createElement(react.Search, {
     size: "sm",
-    labelText: DataConfigs.translateWithId('clear_search'),
-    closeButtonLabelText: DataConfigs.translateWithId('clear_search'),
-    onChange: onSearchChangeHandler
-  })), /*#__PURE__*/React__default["default"].createElement("ul", {
+    labelText: clearSearchText,
+    closeButtonLabelText: clearSearchText,
+    onChange: onSearchChangeHandler,
+    onKeyDown: preventDefault
+  })), /*#__PURE__*/React.createElement("ul", {
     "aria-label": getAriaLabel(),
     role: "listbox"
   }, filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map(function (option) {
     var isSelected = selection === option.id;
     var Icon = option.icon;
-    return /*#__PURE__*/React__default["default"].createElement("li", {
+    return /*#__PURE__*/React.createElement("li", {
       tabIndex: 0,
       key: option.id,
       role: "option",
       "aria-selected": isSelected,
-      className: "".concat(DataConfigs.blockClass, "__item-option__option"),
+      className: "".concat(util.blockClass, "__item-option__option"),
       onKeyUp: function onKeyUp() {
         return false;
       },
       onClick: function onClick(evt) {
         return onClickHandler(evt, option);
       }
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(DataConfigs.blockClass, "__item-option__option-content")
-    }, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(DataConfigs.blockClass, "__item-option__option-label")
-    }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, null), option.label), isSelected && /*#__PURE__*/React__default["default"].createElement(icons.Checkmark, {
-      className: "".concat(DataConfigs.blockClass, "__checkmark")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(util.blockClass, "__item-option__option-content")
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(util.blockClass, "__item-option__option-label")
+    }, Icon && /*#__PURE__*/React.createElement(Icon, null), config.isStatement ? getStatementContent(option) : option.label), isSelected && /*#__PURE__*/React.createElement(icons.Checkmark, {
+      className: "".concat(util.blockClass, "__checkmark")
     })));
   })));
 };
@@ -103,15 +113,15 @@ ItemOption.propTypes = {
   /**
    * current condition object
    */
-  conditionState: index["default"].object,
+  conditionState: index.default.object,
   /**
    * current config object that this property is part of
    */
-  config: index["default"].object,
+  config: index.default.object,
   /**
    * callback to update state oin date change
    */
-  onChange: index["default"].func
+  onChange: index.default.func
 };
 
 exports.ItemOption = ItemOption;

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

@@ -1,13 +1,34 @@
-export function ItemOptionForValueField({ conditionState, config, onChange, }: {
-    conditionState?: {} | undefined;
-    config?: {} | undefined;
-    onChange: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace ItemOptionForValueField {
-    namespace propTypes {
-        let conditionState: PropTypes.Requireable<object>;
-        let config: PropTypes.Requireable<object>;
-        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-}
+/**
+ * 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, PropertyConfigOption } from '../../ConditionBuilder.types';
+interface ItemOptionForValueFieldProps {
+    conditionState: Condition & {
+        label?: string;
+    };
+    config: PropertyConfigOption['config'];
+    onChange: (value: any, e?: Event) => void;
+}
+export declare const ItemOptionForValueField: {
+    ({ conditionState, config, onChange, }: ItemOptionForValueFieldProps): React.JSX.Element;
+    propTypes: {
+        /**
+         * current condition object
+         */
+        conditionState: PropTypes.Requireable<object>;
+        /**
+         * current config object that this property is part of
+         */
+        config: PropTypes.Requireable<object>;
+        /**
+         * callback to update state oin date change
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
+export {};