@carbon/ibm-products 2.43.2-canary.30 → 2.43.2-canary.300

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.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 _SelectSkeleton, _CheckboxCheckedFille, _Checkbox;
 var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
@@ -28,12 +23,16 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
     _ref$config = _ref.config,
     config = _ref$config === void 0 ? {} : _ref$config,
     onChange = _ref.onChange;
-  var multiSelectable = conditionState.operator === 'one_of';
+  var multiSelectable = conditionState.operator === 'oneOf';
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     popOverSearchThreshold = _useContext.popOverSearchThreshold,
     getOptions = _useContext.getOptions,
     rootState = _useContext.rootState;
-  var contentRef = React.useRef();
+  var _useTranslations = useTranslations.useTranslations(['propertyText', 'clearSearchText']),
+    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 2),
+    propertyText = _useTranslations2[0],
+    clearSearchText = _useTranslations2[1];
+  var contentRef = React.useRef(null);
   var _useState = React.useState(config.options),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     allOptions = _useState2[0],
@@ -47,6 +46,7 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
   });
   var selection = Array.isArray(conditionState.value) ? conditionState.value : conditionState.value !== undefined ? [conditionState.value] : [];
   React.useEffect(function () {
+    //this commented code is kept as intentional. Alternate approach to pass async options instead of getOptions callback.
     // if(rest['data-name'] == 'valueField'){
     //   const fetchData = async () => {
     //     const response = await config.options(conditionState);
@@ -100,7 +100,7 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
     if (contentRef.current) {
       var firstFocusableElement = contentRef.current.querySelector('input, button,li');
       if (firstFocusableElement) {
-        firstFocusableElement.focus();
+        firstFocusableElement === null || firstFocusableElement === void 0 || firstFocusableElement.focus();
       }
     }
   }, [allOptions]);
@@ -116,44 +116,51 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
     setSearchValue(value);
   };
   var onClickHandler = function onClickHandler(evt, option, isSelected) {
+    var updatedSelections = selection.filter(function (item) {
+      return item !== 'INVALID';
+    });
     if (multiSelectable) {
       if (isSelected) {
-        var items = selection.filter(function (v) {
+        var items = updatedSelections.filter(function (v) {
           return v.id !== option.id;
         });
-        onChange(items.length > 0 ? items : undefined, evt);
+        onChange(items.length > 0 ? items : undefined);
       } else {
-        onChange([].concat(_rollupPluginBabelHelpers.toConsumableArray(selection), [option]), evt);
+        onChange([].concat(_rollupPluginBabelHelpers.toConsumableArray(updatedSelections), [option]));
       }
     } else {
       onChange(option, evt);
     }
   };
   var getAriaLabel = function getAriaLabel() {
-    return conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : DataConfigs.translateWithId('property');
+    return conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : propertyText;
+  };
+  var preventDefault = function preventDefault(evt) {
+    return evt.preventDefault();
   };
   if (!allOptions) {
-    return _SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React__default["default"].createElement(react.SelectSkeleton, null));
+    return _SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React.createElement(react.SelectSkeleton, null));
   }
-  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
-  })), multiSelectable && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__multiselectSelectionStatusContainer")
-  }, /*#__PURE__*/React__default["default"].createElement("h4", null, /*#__PURE__*/React__default["default"].createElement("label", null, selection.length, "/", allOptions.length, " Selected")), /*#__PURE__*/React__default["default"].createElement(react.Button, {
+    labelText: clearSearchText,
+    closeButtonLabelText: clearSearchText,
+    onChange: onSearchChangeHandler,
+    onKeyDown: preventDefault
+  })), multiSelectable && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(util.blockClass, "__multiselectSelectionStatusContainer")
+  }, /*#__PURE__*/React.createElement("h4", null, /*#__PURE__*/React.createElement("label", null, selection.length, "/", allOptions.length, " Selected")), /*#__PURE__*/React.createElement(react.Button, {
     kind: 'ghost',
     size: 'sm',
     "data-selected-all": "".concat(selection.length == 0 ? true : false),
     onClick: handleSelectAll,
-    className: "".concat(DataConfigs.blockClass, "__selectAll-button")
-  }, selection.length == 0 ? 'Select all' : 'Deselect all')), /*#__PURE__*/React__default["default"].createElement("ul", {
+    className: "".concat(util.blockClass, "__selectAll-button")
+  }, selection.length == 0 ? 'Select all' : 'Deselect all')), /*#__PURE__*/React.createElement("ul", {
     "aria-label": getAriaLabel(),
     role: "listbox",
     "data-multi-select": multiSelectable
@@ -162,30 +169,30 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
       return option.id;
     }).includes(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, isSelected);
       }
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(DataConfigs.blockClass, "__item-option__option-content")
-    }, multiSelectable ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(DataConfigs.blockClass, "__option-check-box")
-    }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default["default"].createElement(icons.CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default["default"].createElement(icons.Checkbox, null))), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(DataConfigs.blockClass, "__item-option__option-label")
-    }, option.label), Icon && /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(DataConfigs.blockClass, "__option-icon")
-    }, /*#__PURE__*/React__default["default"].createElement(Icon, null))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__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")
+    }, multiSelectable ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(util.blockClass, "__option-check-box")
+    }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React.createElement(icons.CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React.createElement(icons.Checkbox, null))), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(util.blockClass, "__item-option__option-label")
+    }, option.label), Icon && /*#__PURE__*/React.createElement("span", {
+      className: "".concat(util.blockClass, "__option-icon")
+    }, /*#__PURE__*/React.createElement(Icon, null))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(util.blockClass, "__item-option__option-label")
+    }, Icon && /*#__PURE__*/React.createElement(Icon, null), option.label), isSelected && /*#__PURE__*/React.createElement(icons.Checkmark, {
+      className: "".concat(util.blockClass, "__checkmark")
     }))));
   })));
 };
@@ -193,15 +200,15 @@ ItemOptionForValueField.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.ItemOptionForValueField = ItemOptionForValueField;

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

@@ -1,11 +1,36 @@
-export function ConditionBuilderItemText({ conditionState, onChange }: {
-    conditionState: any;
-    onChange: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace ConditionBuilderItemText {
-    namespace propTypes {
-        let conditionState: 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 PropTypes from 'prop-types';
+import { Condition, PropertyConfigText, PropertyConfigTextArea } from '../../ConditionBuilder.types';
+interface ConditionBuilderItemTextProps {
+    conditionState: Condition;
+    config: PropertyConfigText | PropertyConfigTextArea;
+    onChange: (value: string) => void;
+    type: 'textarea' | 'text';
+}
+export declare const ConditionBuilderItemText: {
+    ({ conditionState, onChange, config, type, }: ConditionBuilderItemTextProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * current condition object
+         */
+        conditionState: PropTypes.Requireable<object>;
+        /**
+         * config of the current property
+         */
+        config: PropTypes.Requireable<object>;
+        /**
+         * callback to update state oin date change
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * current input type
+         */
+        type: PropTypes.Requireable<string>;
+    };
+};
+export {};

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

@@ -7,42 +7,48 @@
 
 '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 util = require('../../utils/util.js');
 
 var ConditionBuilderItemText = function ConditionBuilderItemText(_ref) {
-  var _conditionState$value, _conditionState$prope;
+  var _conditionState$prope;
   var conditionState = _ref.conditionState,
-    _onChange = _ref.onChange;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__item-text")
-  }, /*#__PURE__*/React__default["default"].createElement(react.TextInput, {
-    labelText: conditionState.property,
+    _onChange = _ref.onChange,
+    config = _ref.config,
+    type = _ref.type;
+  var inputProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), {}, {
     hideLabel: true,
-    value: (_conditionState$value = conditionState.value) !== null && _conditionState$value !== void 0 ? _conditionState$value : '',
+    value: util.checkIsValid(conditionState.value) ? conditionState.value : '',
     id: (_conditionState$prope = conditionState.property) === null || _conditionState$prope === void 0 ? void 0 : _conditionState$prope.replace(/\s/g, ''),
     onChange: function onChange(evt) {
       _onChange(evt.target.value);
-    }
-  }));
+    },
+    labelText: conditionState.property
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(util.blockClass, "__item-text")
+  }, type == 'textarea' ? /*#__PURE__*/React.createElement(react.TextArea, inputProps) : /*#__PURE__*/React.createElement(react.TextInput, inputProps));
 };
 ConditionBuilderItemText.propTypes = {
   /**
    * current condition object
    */
-  conditionState: index["default"].object,
+  conditionState: index.default.object,
+  /**
+   * config of the current property
+   */
+  config: index.default.object,
   /**
    * callback to update state oin date change
    */
-  onChange: index["default"].func
+  onChange: index.default.func,
+  /**
+   * current input type
+   */
+  type: index.default.string
 };
 
 exports.ConditionBuilderItemText = ConditionBuilderItemText;

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

@@ -1,11 +1,26 @@
-export function ConditionBuilderItemTime({ onChange, config }: {
-    onChange: any;
-    config: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace ConditionBuilderItemTime {
-    namespace propTypes {
-        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 PropTypes from 'prop-types';
+import { PropertyConfigTime } from '../../ConditionBuilder.types';
+interface ConditionBuilderItemTime {
+    onChange: (value: string | undefined) => void;
+    config: PropertyConfigTime['config'];
+}
+export declare const ConditionBuilderItemTime: {
+    ({ onChange, config, }: ConditionBuilderItemTime): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * 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/ConditionBuilderItemTime/ConditionBuilderItemTime.js

@@ -7,17 +7,11 @@
 
 '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 util = require('../../utils/util.js');
 
 var _SelectItem, _SelectItem2;
 var ConditionBuilderItemTime = function ConditionBuilderItemTime(_ref) {
@@ -50,26 +44,26 @@ var ConditionBuilderItemTime = function ConditionBuilderItemTime(_ref) {
   var setTime = function setTime(evt) {
     setTimeValue(evt.target.value);
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__item-time")
-  }, /*#__PURE__*/React__default["default"].createElement(react.TimePicker, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(util.blockClass, "__item-time")
+  }, /*#__PURE__*/React.createElement(react.TimePicker, {
     id: "time-picker",
     labelText: "Select a time",
     onChange: setTime
-  }, /*#__PURE__*/React__default["default"].createElement(react.TimePickerSelect, {
+  }, /*#__PURE__*/React.createElement(react.TimePickerSelect, {
     id: "time-picker-day-zone",
     onChange: setDayZone
-  }, _SelectItem || (_SelectItem = /*#__PURE__*/React__default["default"].createElement(react.SelectItem, {
+  }, _SelectItem || (_SelectItem = /*#__PURE__*/React.createElement(react.SelectItem, {
     value: "AM",
     text: "AM"
-  })), _SelectItem2 || (_SelectItem2 = /*#__PURE__*/React__default["default"].createElement(react.SelectItem, {
+  })), _SelectItem2 || (_SelectItem2 = /*#__PURE__*/React.createElement(react.SelectItem, {
     value: "PM",
     text: "PM"
-  }))), /*#__PURE__*/React__default["default"].createElement(react.TimePickerSelect, {
-    id: "time-picker-select-2",
+  }))), /*#__PURE__*/React.createElement(react.TimePickerSelect, {
+    id: "time-picker-time-zone",
     onChange: setTimeZone
   }, config === null || config === void 0 || (_config$timeZones2 = config.timeZones) === null || _config$timeZones2 === void 0 ? void 0 : _config$timeZones2.map(function (timeZone, index) {
-    return /*#__PURE__*/React__default["default"].createElement(react.SelectItem, {
+    return /*#__PURE__*/React.createElement(react.SelectItem, {
       key: index,
       value: timeZone,
       text: timeZone
@@ -80,11 +74,11 @@ ConditionBuilderItemTime.propTypes = {
   /**
    * 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.ConditionBuilderItemTime = ConditionBuilderItemTime;

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

@@ -1,26 +1,51 @@
-export default ConditionGroupBuilder;
+/**
+ * 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';
 /**
  *
  *  state - this is the current group that is being rendered . This can be a inner group or outer group
  * All the inner components of group are called from here.
  * @returns
  */
-declare function ConditionGroupBuilder({ group, aria, onRemove, onChange, conditionBuilderRef, className, }: {
-    group: any;
-    aria: any;
-    onRemove: any;
-    onChange: any;
-    conditionBuilderRef: any;
-    className: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace ConditionGroupBuilder {
-    namespace propTypes {
-        let aria: PropTypes.Requireable<object>;
-        let className: PropTypes.Requireable<string>;
-        let conditionBuilderRef: PropTypes.Requireable<object>;
-        let group: PropTypes.Requireable<object>;
-        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        let onRemove: PropTypes.Requireable<(...args: any[]) => any>;
-    }
+interface ConditionGroupBuilderProps {
+    group: ConditionGroup;
+    onRemove: (e: Event) => void;
+    onChange: (group: ConditionGroup) => void;
+    className?: string;
+    aria: {
+        level: number;
+        posinset: number;
+        setsize: number;
+    };
 }
-import PropTypes from 'prop-types';
+declare const ConditionGroupBuilder: {
+    ({ group, aria, onRemove, onChange, className, }: ConditionGroupBuilderProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * object contains the aria attributes
+         */
+        aria: PropTypes.Requireable<object>;
+        /**
+         * state defines the current group
+         */
+        /**
+         * Provide an optional class to be applied to the containing node.
+         */
+        className: PropTypes.Requireable<string>;
+        group: PropTypes.Requireable<object>;
+        /**
+         * callback to update the current condition of the state tree
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * call back to remove the particular group from the state tree
+         */
+        onRemove: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
+export default ConditionGroupBuilder;