@carbon/ibm-products 2.81.0-rc.0 → 2.82.0-rc.0

package/lib/components/ComboButton/ComboButton.js

@@ -0,0 +1,100 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * 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';
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var react = require('@carbon/react');
+var icons = require('@carbon/react/icons');
+var React = require('react');
+var index = require('../../_virtual/index.js');
+var cx = require('classnames');
+var settings = require('../../settings.js');
+var uuidv4 = require('../../global/js/utils/uuidv4.js');
+
+const blockClass = `${settings.pkg.prefix}--combo-button`;
+const componentName = 'ComboButton';
+/**
+ * The combo button consolidates similar actions, while exposing the most commonly used one.
+ */
+const ComboButton = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    overflowMenu,
+    ...rest
+  } = props;
+  const {
+    current: instanceId
+  } = React.useRef(uuidv4.default());
+  const [isOpen, setIsOpen] = React.useState(false);
+  const actions = React.Children.toArray(children).filter(Boolean).map(child => {
+    if (/*#__PURE__*/React.isValidElement(child)) {
+      const {
+        props
+      } = child;
+      return {
+        ...props,
+        children: /*#__PURE__*/React.createElement("span", {
+          className: `${blockClass}__action`
+        }, child)
+      };
+    }
+    return null;
+  });
+  const primaryAction = actions.slice(0, 1);
+  const secondaryActions = actions.slice(1);
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+    ref: ref,
+    className: cx(blockClass, className),
+    "data-floating-menu-container": true
+  }), /*#__PURE__*/React.createElement(react.Button, primaryAction), secondaryActions.length > 0 && /*#__PURE__*/React.createElement(react.OverflowMenu, _rollupPluginBabelHelpers.extends({}, overflowMenu, {
+    className: `${blockClass}__overflow-menu`,
+    menuOptionsClass: `${blockClass}__overflow-menu__list`,
+    onClick: () => !isOpen && setIsOpen(true),
+    onClose: () => setIsOpen(false),
+    renderIcon: () => /*#__PURE__*/React.createElement(isOpen ? props => /*#__PURE__*/React.createElement(icons.ChevronUp, _rollupPluginBabelHelpers.extends({
+      size: 16
+    }, props)) : props => /*#__PURE__*/React.createElement(icons.ChevronDown, _rollupPluginBabelHelpers.extends({
+      size: 16
+    }, props)), {
+      className: `${blockClass}__overflow-menu__icon`
+    }),
+    flipped: true
+  }), secondaryActions.map((_ref, index) => {
+    let {
+      children,
+      renderIcon: Icon,
+      ...action
+    } = _ref;
+    return /*#__PURE__*/React.createElement(react.OverflowMenuItem, _rollupPluginBabelHelpers.extends({}, action, {
+      key: `${blockClass}--${instanceId}__overflow-menu__item__${index}`,
+      className: `${blockClass}__overflow-menu__item`,
+      itemText: /*#__PURE__*/React.createElement(React.Fragment, null, children, Icon && /*#__PURE__*/React.createElement("span", {
+        className: `${blockClass}__overflow-menu__item__icon`
+      }, /*#__PURE__*/React.createElement(Icon, null)))
+    }));
+  })));
+});
+
+/**@ts-ignore*/
+ComboButton.deprecated = {
+  level: 'warn',
+  details: `Please replace ${componentName} with Carbon's ComboButton`
+};
+ComboButton.displayName = componentName;
+ComboButton.propTypes = {
+  /** Provide the contents of the `ComboButton` */
+  children: index.propTypesExports.node.isRequired,
+  /** Provide an optional class to be applied to the containing node */
+  className: index.propTypesExports.string,
+  /** Provide the [props of the `OverflowMenu`](https://react.carbondesignsystem.com/?path=/docs/overflowmenu) */
+  /**@ts-ignore*/
+  overflowMenu: index.propTypesExports.shape(react.OverflowMenu.propTypes)
+};
+
+exports.ComboButton = ComboButton;

package/lib/components/ComboButton/ComboButtonItem/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+import React from 'react';
+/**
+ * The combo button item provides additional actions a user can take.
+ */
+declare const ComboButtonItem: {
+    ({ ...rest }: {
+        [x: string]: any;
+    }): React.JSX.Element;
+    propTypes: {
+        /** Provide the contents of the `ComboButtonItem` */
+        children: any;
+        /** Specify whether the `ComboButton` should be disabled, or not */
+        disabled: any;
+        /** Provide an optional `href` for the `ComboButtonItem` to become an `a` element */
+        href: any;
+        /** Provide an optional icon to render */
+        renderIcon: any;
+    };
+};
+export { ComboButtonItem };

package/lib/components/ComboButton/ComboButtonItem/index.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * 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';
+
+var index = require('../../../_virtual/index.js');
+var React = require('react');
+
+/**
+ * The combo button item provides additional actions a user can take.
+ */
+const ComboButtonItem = _ref => {
+  let {
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("span", rest);
+};
+ComboButtonItem.propTypes = {
+  /** Provide the contents of the `ComboButtonItem` */
+  children: index.propTypesExports.node.isRequired,
+  /** Specify whether the `ComboButton` should be disabled, or not */
+  disabled: index.propTypesExports.bool,
+  /** Provide an optional `href` for the `ComboButtonItem` to become an `a` element */
+  href: index.propTypesExports.string,
+  /** Provide an optional icon to render */
+  renderIcon: index.propTypesExports.oneOfType([index.propTypesExports.func, index.propTypesExports.object])
+};
+
+exports.ComboButtonItem = ComboButtonItem;

package/lib/components/ComboButton/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { ComboButton } from './ComboButton';
+export { ComboButtonItem } from './ComboButtonItem';
+export type { ComboButtonProps } from './ComboButton';

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

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

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

@@ -0,0 +1,367 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * 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 icons = require('@carbon/react/icons');
+var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
+var index = require('../../../_virtual/index.js');
+var cx = require('classnames');
+var ConditionConnector = require('../ConditionBuilderConnector/ConditionConnector.js');
+var ConditionBuilderItemNumber = require('../ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js');
+var ConditionBuilderItemText = require('../ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js');
+var ConditionBuilderItemDate = require('../ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js');
+var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
+var ConditionBuilderButton = require('../ConditionBuilderButton/ConditionBuilderButton.js');
+var util = require('../utils/util.js');
+var ConditionBuilderItemTime = require('../ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js');
+var ConditionBuilderAdd = require('../ConditionBuilderAdd/ConditionBuilderAdd.js');
+var ItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js');
+var ItemOptionForValueField = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js');
+var useTranslations = require('../utils/useTranslations.js');
+var useDataConfigs = require('../utils/useDataConfigs.js');
+
+/**
+ * This component build each block of condition consisting of property, operator value and close button.
+ */
+
+const ConditionBlock = props => {
+  const {
+    onRemove,
+    onChange,
+    condition = {},
+    conjunction,
+    onConnectorOperatorChange,
+    isStatement,
+    group,
+    onStatementChange,
+    conditionIndex,
+    addConditionHandler,
+    addConditionSubGroupHandler,
+    aria,
+    hideConditionSubGroupPreviewHandler,
+    showConditionSubGroupPreviewHandler,
+    hideConditionPreviewHandler,
+    showConditionPreviewHandler,
+    isLastCondition
+  } = props;
+  const {
+    property,
+    value,
+    operator
+  } = condition;
+  const {
+    inputConfig,
+    variant,
+    conditionBuilderRef,
+    readOnly
+  } = React.useContext(ConditionBuilderProvider.ConditionBuilderContext);
+  const [showDeletionPreview, setShowDeletionPreview] = React.useState(false);
+  const [showAllActions, setShowAllActions] = React.useState(false);
+  const [conditionRowText, conditionText, propertyText, operatorText, removeConditionText] = useTranslations.useTranslations(['conditionRowText', 'conditionText', 'propertyText', 'operatorText', 'removeConditionText']);
+  const {
+    statementConfig,
+    operatorConfig
+  } = useDataConfigs.useDataConfigs();
+
+  //filtering the current property to access its properties and config options
+  const getCurrentConfig = property => {
+    return inputConfig?.properties?.find(eachProperty => eachProperty.id == property) ?? {};
+  };
+  const {
+    icon,
+    type,
+    config,
+    label,
+    description
+  } = getCurrentConfig(property);
+
+  //Below possible input types expected for value field.
+  const itemComponents = {
+    text: ConditionBuilderItemText.ConditionBuilderItemText,
+    number: ConditionBuilderItemNumber.ConditionBuilderItemNumber,
+    date: ConditionBuilderItemDate.ConditionBuilderItemDate,
+    time: ConditionBuilderItemTime.ConditionBuilderItemTime,
+    option: ItemOptionForValueField.ItemOptionForValueField,
+    custom: config?.component,
+    textarea: ConditionBuilderItemText.ConditionBuilderItemText
+  };
+  const ItemComponent = itemComponents[type];
+  const showAllActionsHandler = () => {
+    setShowAllActions(true);
+  };
+  const hideAllActionsHandler = () => {
+    setShowAllActions(false);
+  };
+  const onStatementChangeHandler = (v, evt) => {
+    util.focusThisField(evt, conditionBuilderRef);
+    onStatementChange?.(v);
+  };
+  const onPropertyChangeHandler = newProperty => {
+    onChange({
+      ...condition,
+      property: newProperty,
+      operator: undefined,
+      value: '',
+      popoverToOpen: util.checkIsValid(newProperty) ? 'operatorField' : ''
+    });
+  };
+  const onOperatorChangeHandler = newOperator => {
+    onChange({
+      ...condition,
+      operator: newOperator,
+      value: undefined,
+      popoverToOpen: util.checkIsValid(newOperator) ? 'valueField' : ''
+    });
+  };
+  const onValueChangeHandler = newValue => {
+    const currentCondition = {
+      ...condition
+    };
+    delete currentCondition.popoverToOpen;
+    onChange({
+      ...currentCondition,
+      value: newValue
+    });
+  };
+  const handleShowDeletionPreview = () => {
+    setShowDeletionPreview(true);
+  };
+  const handleHideDeletionPreview = () => {
+    setShowDeletionPreview(false);
+  };
+  const manageActionButtons = (conditionIndex, conditions) => {
+    if (variant === util.HIERARCHICAL_VARIANT) {
+      return true;
+    }
+    return isLastCondition(conditionIndex, conditions);
+  };
+  const getOperators = () => {
+    if (config?.operators) {
+      return config?.operators;
+    }
+    return operatorConfig.filter(operator => operator.type.indexOf(type) != -1 || operator.type == 'all');
+  };
+  const getAriaAttributes = () => {
+    return variant == util.HIERARCHICAL_VARIANT ? {
+      'aria-level': aria.level,
+      'aria-posinset': aria.posinset,
+      'aria-setsize': aria.setsize
+    } : {};
+  };
+  const renderChildren = (popoverRef, closePopover) => {
+    return /*#__PURE__*/React.createElement(ItemComponent, {
+      conditionState: {
+        property,
+        operator,
+        value
+      },
+      onChange: onValueChangeHandler,
+      config: config,
+      "data-name": "valueField",
+      parentRef: popoverRef,
+      type: type,
+      closePopover: closePopover
+    });
+  };
+  const renderItemOption = (popoverRef, closePopover) => {
+    return /*#__PURE__*/React.createElement(ItemOption.ItemOption, {
+      conditionState: {
+        value: property,
+        label: propertyText
+      },
+      onChange: onPropertyChangeHandler,
+      config: {
+        options: inputConfig?.properties
+      },
+      closePopover: closePopover,
+      group: group
+    });
+  };
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    React.createElement("div", _rollupPluginBabelHelpers.extends({
+      className: cx(`${util.blockClass}__condition-block`, {
+        [`${util.blockClass}__condition__deletion-preview`]: showDeletionPreview
+      }, {
+        [`${util.blockClass}__gap-bottom`]: variant == util.HIERARCHICAL_VARIANT
+      }, {
+        [`${util.blockClass}__gap ${util.blockClass}__gap-bottom`]: variant == util.NON_HIERARCHICAL_VARIANT
+      }, {
+        [`${util.blockClass}__condition--interacting`]: showAllActions
+      }),
+      role: "row",
+      "aria-label": conditionRowText
+    }, getAriaAttributes(), {
+      onMouseEnter: showAllActionsHandler,
+      onMouseLeave: hideAllActionsHandler,
+      onBlur: hideAllActionsHandler
+    }), conjunction ? /*#__PURE__*/React.createElement(ConditionConnector.default, {
+      className: `${util.blockClass}__gap`,
+      operator: conjunction,
+      onChange: op => onConnectorOperatorChange?.(op)
+    }) : '', isStatement && /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
+      label: group.statement,
+      title: conditionText,
+      "data-name": "connectorField",
+      popOverClassName: `${util.blockClass}__gap ${util.blockClass}__connector`,
+      className: `${util.blockClass}__statement-button`,
+      tabIndex: 0
+    }, /*#__PURE__*/React.createElement(ItemOption.ItemOption, {
+      conditionState: {
+        value: group.statement,
+        label: conditionText
+      },
+      onChange: onStatementChangeHandler,
+      config: {
+        options: statementConfig,
+        isStatement: true
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      className: `${util.blockClass}__condition-inner-block`
+    }, /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
+      label: label ?? condition?.property,
+      title: propertyText,
+      renderIcon: icon ?? undefined,
+      className: `${util.blockClass}__property-field`,
+      "data-name": "propertyField",
+      condition: condition,
+      type: type,
+      description: description,
+      onChange: onPropertyChangeHandler,
+      renderChildren: renderItemOption
+    }), util.checkIsValid(property) && /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
+      label: operator,
+      title: operatorText,
+      "data-name": "operatorField",
+      condition: condition,
+      type: type,
+      config: config,
+      onChange: onOperatorChangeHandler
+    }, /*#__PURE__*/React.createElement(ItemOption.ItemOption, {
+      config: {
+        options: getOperators()
+      },
+      conditionState: {
+        value: operator,
+        label: operatorText
+      },
+      onChange: onOperatorChangeHandler
+    })), util.checkIsValid(property) && util.checkIsValid(operator) && /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
+      label: value,
+      type: type,
+      title: label,
+      showToolTip: true,
+      "data-name": "valueField",
+      condition: condition,
+      config: config,
+      onChange: onValueChangeHandler,
+      renderChildren: renderChildren
+    })), !readOnly && /*#__PURE__*/React.createElement("span", {
+      role: "gridcell",
+      "aria-label": removeConditionText
+    }, /*#__PURE__*/React.createElement(ConditionBuilderButton.ConditionBuilderButton, {
+      hideLabel: true,
+      label: removeConditionText,
+      onClick: onRemove,
+      onMouseEnter: handleShowDeletionPreview,
+      onMouseLeave: handleHideDeletionPreview,
+      onFocus: handleShowDeletionPreview,
+      onBlur: handleHideDeletionPreview,
+      renderIcon: icons.Close,
+      className: `${util.blockClass}__close-condition`,
+      "data-name": "closeCondition",
+      wrapperClassName: `${util.blockClass}__close-condition-wrapper`
+    })), !readOnly && manageActionButtons(conditionIndex, group.conditions) ? /*#__PURE__*/React.createElement(ConditionBuilderAdd.default, {
+      onClick: () => {
+        addConditionHandler?.(conditionIndex);
+      },
+      addConditionSubGroupHandler: () => {
+        addConditionSubGroupHandler?.(conditionIndex);
+      },
+      showConditionSubGroupPreviewHandler: showConditionSubGroupPreviewHandler,
+      hideConditionSubGroupPreviewHandler: hideConditionSubGroupPreviewHandler,
+      enableSubGroup: variant == util.HIERARCHICAL_VARIANT,
+      showConditionPreviewHandler: showConditionPreviewHandler,
+      hideConditionPreviewHandler: hideConditionPreviewHandler,
+      className: `${util.blockClass}__gap ${util.blockClass}__gap-left`,
+      group: group
+    }) : null)
+  );
+};
+ConditionBlock.propTypes = {
+  /**
+   * callback to add a new condition
+   */
+  addConditionHandler: index.default.func,
+  /**
+   * callback to add a new condition subgroup
+   */
+  addConditionSubGroupHandler: index.default.func,
+  /**
+   * object hold aria attributes
+   */
+  aria: index.default.object,
+  condition: index.default.object,
+  conditionIndex: index.default.number,
+  /**
+   * string that decides to show the condition connector
+   */
+  conjunction: index.default.string,
+  /**
+   * object that hold the current group object where is condition is part of
+   */
+  group: index.default.object,
+  /**
+   * handler for hiding sub group preview
+   */
+  hideConditionPreviewHandler: index.default.func,
+  /**
+   * handler for hiding sub group preview
+   */
+  hideConditionSubGroupPreviewHandler: index.default.func,
+  isLastCondition: index.default.func,
+  /**
+   *  boolean that decides to show the statement(if/ excl.if)
+   */
+  isStatement: index.default.bool,
+  /**
+   * callback to update the current condition of the state tree
+   */
+  onChange: index.default.func,
+  /**
+   * callback to handle the connector(and/or) change
+   */
+  onConnectorOperatorChange: index.default.func,
+  /**
+   * callback for Remove a condition
+   */
+  onRemove: index.default.func,
+  /**
+   * callback to handle the statement(if/ excl.if) change
+   */
+  onStatementChange: index.default.func,
+  /**
+   * handler for showing add condition preview
+   */
+  showConditionPreviewHandler: index.default.func,
+  /**
+   * handler for showing sub group preview
+   */
+  showConditionSubGroupPreviewHandler: index.default.func,
+  /**
+   * object that hold the current condition
+   */
+  state: index.default.object
+};
+
+exports.default = ConditionBlock;

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

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import { ConditionBuilderProps } from './ConditionBuilder.types';
+/**
+ * TODO: A description of the component.
+ */
+export declare const ConditionBuilder: React.ForwardRefExoticComponent<ConditionBuilderProps & React.RefAttributes<HTMLDivElement>>;