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

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

@@ -0,0 +1,121 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var settings = require('../../../settings.js');
+var translationObject = require('./translationObject.js');
+
+var statementConfig = [{
+  label: 'if',
+  id: 'if'
+}, {
+  label: 'excl.if',
+  id: 'excl.if'
+}];
+var connectorConfig = [{
+  label: 'and',
+  id: 'and'
+}, {
+  label: 'or',
+  id: 'or'
+}];
+//op types : option, text, number, date,
+var operatorConfig = [{
+  label: 'is',
+  id: 'is',
+  type: 'all'
+}, {
+  label: 'is greater than',
+  id: 'greater',
+  type: 'number'
+}, {
+  label: 'is greater than or equal to',
+  id: 'greater-equal',
+  type: 'number'
+}, {
+  label: 'is lower than',
+  id: 'lower',
+  type: 'number'
+}, {
+  label: 'is lower than or equal to',
+  id: 'lower-equal',
+  type: 'number'
+}, {
+  label: 'starts with',
+  id: 'starts-with',
+  type: 'text'
+}, {
+  label: 'ends with',
+  id: 'ends-with',
+  type: 'text'
+}, {
+  label: 'contains',
+  id: 'contains',
+  type: 'text'
+}, {
+  label: 'is one of',
+  id: 'one-of',
+  type: 'option'
+}, {
+  label: 'is before',
+  id: 'before',
+  type: 'date,time'
+}, {
+  label: 'is after',
+  id: 'after',
+  type: 'date,time'
+}, {
+  label: 'is between',
+  id: 'between',
+  type: 'date'
+}];
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(settings.pkg.prefix, "--condition-builder");
+var formatDate = function formatDate(date) {
+  var day = String(date.getDate()).padStart(2, '0');
+  var month = String(date.getMonth() + 1).padStart(2, '0');
+  var year = date.getFullYear();
+  return "".concat(day, "/").concat(month, "/").concat(year);
+};
+var translationsObjectCurrent = translationObject.translationsObject['en']; // TO DO: need to discuss if language is to be passed as prop
+var translateWithId = function translateWithId(key) {
+  var _translationsObjectCu;
+  return (_translationsObjectCu = translationsObjectCurrent[key]) !== null && _translationsObjectCu !== void 0 ? _translationsObjectCu : key;
+};
+var valueRenderers = {
+  text: function text(val) {
+    return val;
+  },
+  time: function time(val) {
+    return val;
+  },
+  number: function number(val, config) {
+    return config.unit && val ? "".concat(val, " ").concat(config.unit) : val;
+  },
+  option: function option(value) {
+    return Array.isArray(value) ? value.join(', ') : value;
+  },
+  date: function date(value) {
+    if (Array.isArray(value) && value.length > 1) {
+      var start = value !== null && value !== void 0 && value[0] ? formatDate(new Date(value[0])) : '';
+      var end = value !== null && value !== void 0 && value[1] ? formatDate(new Date(value[1])) : '';
+      return "".concat(start, " To ").concat(end);
+    } else {
+      return value && new Date(value) ? formatDate(new Date(value)) : value;
+    }
+  }
+};
+
+exports.blockClass = blockClass;
+exports.connectorConfig = connectorConfig;
+exports.operatorConfig = operatorConfig;
+exports.statementConfig = statementConfig;
+exports.translateWithId = translateWithId;
+exports.valueRenderers = valueRenderers;

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

@@ -0,0 +1,31 @@
+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;
+        condition: string;
+        property: string;
+        operator: string;
+        connector: string;
+        condition_row: string;
+        remove_condition: string;
+        add_condition_row: string;
+        start: string;
+        end: string;
+        clear_search: string;
+    };
+}

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

@@ -0,0 +1,44 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var translationsObject = {
+  en: {
+    if: 'if',
+    'excl-if': 'excl.if',
+    and: 'and',
+    or: 'or',
+    is: 'is',
+    greater: 'is greater than',
+    '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',
+    contains: 'contains',
+    'one-of': 'is one of',
+    before: 'is before',
+    after: 'is after',
+    between: 'is between',
+    'add-condition': 'Add Condition',
+    condition: 'Condition',
+    property: 'Property',
+    operator: 'Operator',
+    connector: 'Connector',
+    condition_row: 'Condition row',
+    remove_condition: 'Remove condition',
+    add_condition_row: 'Add condition row',
+    start: 'Start',
+    end: 'End',
+    clear_search: 'Clear search input'
+  }
+};
+
+exports.translationsObject = translationsObject;

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

@@ -0,0 +1,28 @@
+export function ConditionBuilderItem({ children, className, label, renderIcon, title, type, showToolTip, state, popOverClassName, config, ...rest }: {
+    [x: string]: any;
+    children: any;
+    className: any;
+    label: any;
+    renderIcon: any;
+    title: any;
+    type: any;
+    showToolTip: any;
+    state: any;
+    popOverClassName: any;
+    config: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace ConditionBuilderItem {
+    namespace propTypes {
+        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let className: PropTypes.Requireable<string>;
+        let config: PropTypes.Requireable<object>;
+        let label: PropTypes.Requireable<NonNullable<string | any[] | null | undefined>>;
+        let popOverClassName: PropTypes.Requireable<string>;
+        let renderIcon: PropTypes.Requireable<object>;
+        let showToolTip: PropTypes.Requireable<boolean>;
+        let state: PropTypes.Requireable<object>;
+        let title: PropTypes.Requireable<string>;
+        let type: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,159 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'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 icons = require('@carbon/react/icons');
+var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
+var ConditionBuilderButton = require('../ConditionBuilderButton/ConditionBuilderButton.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["children", "className", "label", "renderIcon", "title", "type", "showToolTip", "state", "popOverClassName", "config"];
+var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    label = _ref.label,
+    renderIcon = _ref.renderIcon,
+    title = _ref.title,
+    type = _ref.type,
+    showToolTip = _ref.showToolTip,
+    state = _ref.state,
+    popOverClassName = _ref.popOverClassName,
+    config = _ref.config,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var contentRef = React.useRef(null);
+  var _useState = React.useState(label),
+    _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 () {
+    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]);
+  React.useEffect(function () {
+    /**
+     * rest['data-name'] holds the current field name
+     * popoverToOpen hold the next popover to be opened if required
+     */
+    if (state) {
+      var currentField = rest['data-name'];
+      //if any condition is changed, state prop is triggered
+      if (state.popoverToOpen && currentField !== state.popoverToOpen) {
+        // close the previous popover
+        setOpen(false);
+      } else if (currentField == 'valueField' && type == 'option' && state.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);
+      }
+      if (state.popoverToOpen == currentField) {
+        //current popover need to be opened
+        setOpen(true);
+      }
+    } else {
+      // when we change any statement(if/ excl.if) which is not part of condition state, label change is triggered.
+      //close popOver when statement is changed.
+      setOpen(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state, label]);
+  React.useEffect(function () {
+    //this will focus the first input field in the popover
+    if (open && contentRef.current) {
+      var firstFocusableElement = contentRef.current.querySelector('input, button,li');
+      if (firstFocusableElement) {
+        firstFocusableElement.focus();
+      }
+    }
+  }, [contentRef, open]);
+  return /*#__PURE__*/React__default["default"].createElement(react.Popover, {
+    open: open,
+    isTabTip: true,
+    role: "gridcell",
+    className: popOverClassName,
+    onRequestClose: function onRequestClose() {
+      setOpen(false);
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderButton.ConditionBuilderButton, _rollupPluginBabelHelpers["extends"]({
+    label: propertyLabel !== null && propertyLabel !== void 0 ? propertyLabel : DataConfigs.translateWithId('add-condition'),
+    hideLabel: !label ? true : false,
+    onClick: function onClick() {
+      setOpen(!open);
+    },
+    className: className,
+    "aria-haspopup": true,
+    "aria-expanded": open,
+    renderIcon: renderIcon ? renderIcon : label == undefined ? icons.Add : null,
+    showToolTip: showToolTip
+  }, rest)), /*#__PURE__*/React__default["default"].createElement(react.PopoverContent, {
+    className: "".concat(DataConfigs.blockClass, "__condition-builder-item__content"),
+    role: "dialog",
+    "aria-label": "".concat(title)
+  }, /*#__PURE__*/React__default["default"].createElement(react.Layer, null, /*#__PURE__*/React__default["default"].createElement("h1", {
+    className: "".concat(DataConfigs.blockClass, "__condition-builder-item__title")
+  }, title), /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: contentRef
+  }, open && children))));
+};
+ConditionBuilderItem.propTypes = {
+  /**
+   * provide the contents of the popover
+   */
+  children: index["default"].node,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index["default"].string,
+  /**
+   * this is the config object again the current property from inputConfig
+   */
+
+  config: index["default"].object,
+  /**
+   * text to be displayed in the field
+   */
+  label: index["default"].oneOfType([index["default"].string, index["default"].array]),
+  /**
+   * class name for popover
+   */
+  popOverClassName: index["default"].string,
+  /**
+   * Optional prop to allow overriding the icon rendering.
+   */
+  renderIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  /**
+   * show tool tip
+   */
+  showToolTip: index["default"].bool,
+  /**
+   * current condition state object
+   */
+  state: index["default"].object,
+  /**
+   * title of the popover
+   */
+  title: index["default"].string,
+  /**
+   * input type
+   */
+  type: index["default"].string
+};
+
+exports.ConditionBuilderItem = ConditionBuilderItem;

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

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

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

@@ -0,0 +1,67 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+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 ConditionBuilderItemDate = function ConditionBuilderItemDate(_ref) {
+  var conditionState = _ref.conditionState,
+    onChange = _ref.onChange;
+  var DatePickerInputRef = React.useRef();
+  var datePickerType = conditionState.operator == 'between' ? 'range' : 'single';
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__condition-builder-item-date ")
+  }, datePickerType == 'single' && /*#__PURE__*/React__default["default"].createElement(react.DatePicker, {
+    ref: DatePickerInputRef,
+    dateFormat: "d/m/Y",
+    datePickerType: "single",
+    onClose: onChange,
+    value: conditionState.value
+  }, /*#__PURE__*/React__default["default"].createElement(react.DatePickerInput, {
+    id: "datePicker",
+    placeholder: "dd/mm/yyyy",
+    labelText: conditionState.property
+  })), datePickerType == 'range' && /*#__PURE__*/React__default["default"].createElement(react.DatePicker, {
+    ref: DatePickerInputRef,
+    dateFormat: "d/m/Y",
+    datePickerType: datePickerType,
+    onClose: onChange,
+    value: conditionState.value
+  }, /*#__PURE__*/React__default["default"].createElement(react.DatePickerInput, {
+    id: "datePickerStart",
+    placeholder: "dd/mm/yyyy",
+    labelText: DataConfigs.translateWithId('start')
+  }), /*#__PURE__*/React__default["default"].createElement(react.DatePickerInput, {
+    id: "datePickerEnd",
+    placeholder: "dd/mm/yyyy",
+    labelText: DataConfigs.translateWithId('end')
+  })));
+};
+ConditionBuilderItemDate.propTypes = {
+  /**
+   * current condition object
+   */
+  conditionState: index["default"].object,
+  /**
+   * callback to update state oin date change
+   */
+  onChange: index["default"].func
+};
+
+exports.ConditionBuilderItemDate = ConditionBuilderItemDate;

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

@@ -0,0 +1,13 @@
+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>;
+    }
+}
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,60 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+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');
+
+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,
+    config = _ref.config,
+    onChange = _ref.onChange;
+  var onChangeHandler = function onChangeHandler(e, _ref2) {
+    var value = _ref2.value;
+    onChange(value + '');
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__condition-builder-item-number")
+  }, /*#__PURE__*/React__default["default"].createElement(react.NumberInput, {
+    label: conditionState.property,
+    hideLabel: true,
+    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,
+    allowEmpty: true,
+    onChange: onChangeHandler
+  }));
+};
+ConditionBuilderItemNumber.propTypes = {
+  /**
+   * current condition object
+   */
+  conditionState: index["default"].object,
+  /**
+   * current config object that this property is part of
+   */
+  config: index["default"].object,
+  /**
+   * callback to update state oin date change
+   */
+  onChange: index["default"].func
+};
+
+exports.ConditionBuilderItemNumber = ConditionBuilderItemNumber;

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

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