@carbon/ibm-products 2.65.0 → 2.66.0

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

@@ -33,141 +33,135 @@ var useDataConfigs = require('../utils/useDataConfigs.js');
  * This component build each block of condition consisting of property, operator value and close button.
  */
 
-var ConditionBlock = function ConditionBlock(props) {
-  var onRemove = props.onRemove,
-    onChange = props.onChange,
-    _props$condition = props.condition,
-    condition = _props$condition === void 0 ? {} : _props$condition,
-    conjunction = props.conjunction,
-    onConnectorOperatorChange = props.onConnectorOperatorChange,
-    isStatement = props.isStatement,
-    group = props.group,
-    onStatementChange = props.onStatementChange,
-    conditionIndex = props.conditionIndex,
-    addConditionHandler = props.addConditionHandler,
-    _addConditionSubGroupHandler = props.addConditionSubGroupHandler,
-    aria = props.aria,
-    hideConditionSubGroupPreviewHandler = props.hideConditionSubGroupPreviewHandler,
-    showConditionSubGroupPreviewHandler = props.showConditionSubGroupPreviewHandler,
-    hideConditionPreviewHandler = props.hideConditionPreviewHandler,
-    showConditionPreviewHandler = props.showConditionPreviewHandler,
-    isLastCondition = props.isLastCondition;
-  var property = condition.property,
-    value = condition.value,
-    operator = condition.operator;
-  var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
-    inputConfig = _useContext.inputConfig,
-    variant = _useContext.variant,
-    conditionBuilderRef = _useContext.conditionBuilderRef;
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    showDeletionPreview = _useState2[0],
-    setShowDeletionPreview = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    showAllActions = _useState4[0],
-    setShowAllActions = _useState4[1];
-  var _useTranslations = useTranslations.useTranslations(['conditionRowText', 'conditionText', 'propertyText', 'operatorText', 'removeConditionText']),
-    _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 5),
-    conditionRowText = _useTranslations2[0],
-    conditionText = _useTranslations2[1],
-    propertyText = _useTranslations2[2],
-    operatorText = _useTranslations2[3],
-    removeConditionText = _useTranslations2[4];
-  var _useDataConfigs = useDataConfigs.useDataConfigs(),
-    statementConfig = _useDataConfigs.statementConfig,
-    operatorConfig = _useDataConfigs.operatorConfig;
+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
+  } = 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
-  var getCurrentConfig = function getCurrentConfig(property) {
-    var _inputConfig$properti, _inputConfig$properti2;
-    return (_inputConfig$properti = inputConfig === null || inputConfig === void 0 || (_inputConfig$properti2 = inputConfig.properties) === null || _inputConfig$properti2 === void 0 ? void 0 : _inputConfig$properti2.find(function (eachProperty) {
-      return eachProperty.id == property;
-    })) !== null && _inputConfig$properti !== void 0 ? _inputConfig$properti : {};
+  const getCurrentConfig = property => {
+    return inputConfig?.properties?.find(eachProperty => eachProperty.id == property) ?? {};
   };
-  var _ref = getCurrentConfig(property),
-    icon = _ref.icon,
-    type = _ref.type,
-    config = _ref.config,
-    label = _ref.label,
-    description = _ref.description;
+  const {
+    icon,
+    type,
+    config,
+    label,
+    description
+  } = getCurrentConfig(property);
 
   //Below possible input types expected for value field.
-  var itemComponents = {
+  const itemComponents = {
     text: ConditionBuilderItemText.ConditionBuilderItemText,
     number: ConditionBuilderItemNumber.ConditionBuilderItemNumber,
     date: ConditionBuilderItemDate.ConditionBuilderItemDate,
     time: ConditionBuilderItemTime.ConditionBuilderItemTime,
     option: ItemOptionForValueField.ItemOptionForValueField,
-    custom: config === null || config === void 0 ? void 0 : config.component,
+    custom: config?.component,
     textarea: ConditionBuilderItemText.ConditionBuilderItemText
   };
-  var ItemComponent = itemComponents[type];
-  var showAllActionsHandler = function showAllActionsHandler() {
+  const ItemComponent = itemComponents[type];
+  const showAllActionsHandler = () => {
     setShowAllActions(true);
   };
-  var hideAllActionsHandler = function hideAllActionsHandler() {
+  const hideAllActionsHandler = () => {
     setShowAllActions(false);
   };
-  var onStatementChangeHandler = function onStatementChangeHandler(v, evt) {
+  const onStatementChangeHandler = (v, evt) => {
     util.focusThisField(evt, conditionBuilderRef);
-    onStatementChange === null || onStatementChange === void 0 || onStatementChange(v);
+    onStatementChange?.(v);
   };
-  var onPropertyChangeHandler = function onPropertyChangeHandler(newProperty) {
-    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, condition), {}, {
+  const onPropertyChangeHandler = newProperty => {
+    onChange({
+      ...condition,
       property: newProperty,
       operator: undefined,
       value: '',
       popoverToOpen: util.checkIsValid(newProperty) ? 'operatorField' : ''
-    }));
+    });
   };
-  var onOperatorChangeHandler = function onOperatorChangeHandler(newOperator) {
-    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, condition), {}, {
+  const onOperatorChangeHandler = newOperator => {
+    onChange({
+      ...condition,
       operator: newOperator,
       value: undefined,
       popoverToOpen: util.checkIsValid(newOperator) ? 'valueField' : ''
-    }));
+    });
   };
-  var onValueChangeHandler = function onValueChangeHandler(newValue) {
-    var currentCondition = _rollupPluginBabelHelpers.objectSpread2({}, condition);
+  const onValueChangeHandler = newValue => {
+    const currentCondition = {
+      ...condition
+    };
     delete currentCondition.popoverToOpen;
-    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, currentCondition), {}, {
+    onChange({
+      ...currentCondition,
       value: newValue
-    }));
+    });
   };
-  var handleShowDeletionPreview = function handleShowDeletionPreview() {
+  const handleShowDeletionPreview = () => {
     setShowDeletionPreview(true);
   };
-  var handleHideDeletionPreview = function handleHideDeletionPreview() {
+  const handleHideDeletionPreview = () => {
     setShowDeletionPreview(false);
   };
-  var manageActionButtons = function manageActionButtons(conditionIndex, conditions) {
+  const manageActionButtons = (conditionIndex, conditions) => {
     if (variant === util.HIERARCHICAL_VARIANT) {
       return true;
     }
     return isLastCondition(conditionIndex, conditions);
   };
-  var getOperators = function getOperators() {
-    if (config !== null && config !== void 0 && config.operators) {
-      return config === null || config === void 0 ? void 0 : config.operators;
+  const getOperators = () => {
+    if (config?.operators) {
+      return config?.operators;
     }
-    return operatorConfig.filter(function (operator) {
-      return operator.type.indexOf(type) != -1 || operator.type == 'all';
-    });
+    return operatorConfig.filter(operator => operator.type.indexOf(type) != -1 || operator.type == 'all');
   };
-  var getAriaAttributes = function getAriaAttributes() {
+  const getAriaAttributes = () => {
     return variant == util.HIERARCHICAL_VARIANT ? {
       'aria-level': aria.level,
       'aria-posinset': aria.posinset,
       'aria-setsize': aria.setsize
     } : {};
   };
-  var renderChildren = function renderChildren(popoverRef) {
+  const renderChildren = popoverRef => {
     return /*#__PURE__*/React.createElement(ItemComponent, {
       conditionState: {
-        property: property,
-        operator: operator,
-        value: value
+        property,
+        operator,
+        value
       },
       onChange: onValueChangeHandler,
       config: config,
@@ -177,7 +171,15 @@ var ConditionBlock = function ConditionBlock(props) {
     });
   };
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
-    className: cx("".concat(util.blockClass, "__condition-block"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(util.blockClass, "__condition__deletion-preview"), showDeletionPreview), _rollupPluginBabelHelpers.defineProperty({}, "".concat(util.blockClass, "__gap-bottom"), variant == util.HIERARCHICAL_VARIANT), _rollupPluginBabelHelpers.defineProperty({}, "".concat(util.blockClass, "__gap ").concat(util.blockClass, "__gap-bottom"), variant == util.NON_HIERARCHICAL_VARIANT), _rollupPluginBabelHelpers.defineProperty({}, "".concat(util.blockClass, "__condition--interacting"), showAllActions)),
+    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(), {
@@ -186,17 +188,15 @@ var ConditionBlock = function ConditionBlock(props) {
     onMouseLeave: hideAllActionsHandler,
     onBlur: hideAllActionsHandler
   }), conjunction ? /*#__PURE__*/React.createElement(ConditionConnector.default, {
-    className: "".concat(util.blockClass, "__gap"),
+    className: `${util.blockClass}__gap`,
     operator: conjunction,
-    onChange: function onChange(op) {
-      return onConnectorOperatorChange === null || onConnectorOperatorChange === void 0 ? void 0 : onConnectorOperatorChange(op);
-    }
+    onChange: op => onConnectorOperatorChange?.(op)
   }) : '', isStatement && /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
     label: group.statement,
     title: conditionText,
     "data-name": "connectorField",
-    popOverClassName: "".concat(util.blockClass, "__gap"),
-    className: "".concat(util.blockClass, "__statement-button"),
+    popOverClassName: `${util.blockClass}__gap`,
+    className: `${util.blockClass}__statement-button`,
     tabIndex: 0
   }, /*#__PURE__*/React.createElement(ItemOption.ItemOption, {
     conditionState: {
@@ -209,10 +209,10 @@ var ConditionBlock = function ConditionBlock(props) {
       isStatement: true
     }
   })), /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
-    label: label !== null && label !== void 0 ? label : condition === null || condition === void 0 ? void 0 : condition.property,
+    label: label ?? condition?.property,
     title: propertyText,
-    renderIcon: icon !== null && icon !== void 0 ? icon : undefined,
-    className: "".concat(util.blockClass, "__property-field"),
+    renderIcon: icon ?? undefined,
+    className: `${util.blockClass}__property-field`,
     "data-name": "propertyField",
     condition: condition,
     type: type,
@@ -225,7 +225,7 @@ var ConditionBlock = function ConditionBlock(props) {
     },
     onChange: onPropertyChangeHandler,
     config: {
-      options: inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.properties
+      options: inputConfig?.properties
     }
   })), util.checkIsValid(property) && /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
     label: operator,
@@ -266,22 +266,23 @@ var ConditionBlock = function ConditionBlock(props) {
     onFocus: handleShowDeletionPreview,
     onBlur: handleHideDeletionPreview,
     renderIcon: icons.Close,
-    className: "".concat(util.blockClass, "__close-condition"),
+    className: `${util.blockClass}__close-condition`,
     "data-name": "closeCondition",
-    wrapperClassName: "".concat(util.blockClass, "__close-condition-wrapper")
+    wrapperClassName: `${util.blockClass}__close-condition-wrapper`
   })), manageActionButtons(conditionIndex, group.conditions) && /*#__PURE__*/React.createElement(ConditionBuilderAdd.default, {
-    onClick: function onClick() {
-      addConditionHandler === null || addConditionHandler === void 0 || addConditionHandler(conditionIndex);
+    onClick: () => {
+      addConditionHandler?.(conditionIndex);
     },
-    addConditionSubGroupHandler: function addConditionSubGroupHandler() {
-      _addConditionSubGroupHandler === null || _addConditionSubGroupHandler === void 0 || _addConditionSubGroupHandler(conditionIndex);
+    addConditionSubGroupHandler: () => {
+      addConditionSubGroupHandler?.(conditionIndex);
     },
     showConditionSubGroupPreviewHandler: showConditionSubGroupPreviewHandler,
     hideConditionSubGroupPreviewHandler: hideConditionSubGroupPreviewHandler,
     enableSubGroup: variant == util.HIERARCHICAL_VARIANT,
     showConditionPreviewHandler: showConditionPreviewHandler,
     hideConditionPreviewHandler: hideConditionPreviewHandler,
-    className: "".concat(util.blockClass, "__gap ").concat(util.blockClass, "__gap-left")
+    className: `${util.blockClass}__gap ${util.blockClass}__gap-left`,
+    group: group
   }));
 };
 ConditionBlock.propTypes = {

package/lib/components/ConditionBuilder/ConditionBuilder.js

@@ -19,12 +19,10 @@ var settings = require('../../settings.js');
 var handleKeyboardEvents = require('./utils/handleKeyboardEvents.js');
 var util = require('./utils/util.js');
 
-var _excluded = ["className", "inputConfig", "startConditionLabel", "popOverSearchThreshold", "getOptions", "initialState", "getConditionState", "getActionsState", "variant", "actions", "translateWithId", "statementConfigCustom"];
-
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
-var componentName = 'ConditionBuilder';
+const componentName = 'ConditionBuilder';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -46,25 +44,26 @@ var componentName = 'ConditionBuilder';
  * TODO: A description of the component.
  */
 
-exports.ConditionBuilder = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    inputConfig = _ref.inputConfig,
-    _ref$startConditionLa = _ref.startConditionLabel,
-    startConditionLabel = _ref$startConditionLa === void 0 ? 'Add Condition' : _ref$startConditionLa,
-    popOverSearchThreshold = _ref.popOverSearchThreshold,
-    getOptions = _ref.getOptions,
-    initialState = _ref.initialState,
-    getConditionState = _ref.getConditionState,
-    getActionsState = _ref.getActionsState,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? util.NON_HIERARCHICAL_VARIANT : _ref$variant,
-    actions = _ref.actions,
-    translateWithId = _ref.translateWithId,
-    statementConfigCustom = _ref.statementConfigCustom,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var localRef = React.useRef(null);
-  var conditionBuilderRef = ref || localRef;
-  var handleKeyDownHandler = function handleKeyDownHandler(evt) {
+exports.ConditionBuilder = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    className,
+    inputConfig,
+    startConditionLabel = 'Add Condition',
+    popOverSearchThreshold,
+    getOptions,
+    initialState,
+    getConditionState,
+    getActionsState,
+    variant = util.NON_HIERARCHICAL_VARIANT,
+    actions,
+    translateWithId,
+    statementConfigCustom,
+    onAddItem,
+    ...rest
+  } = _ref;
+  const localRef = React.useRef(null);
+  const conditionBuilderRef = ref || localRef;
+  const handleKeyDownHandler = evt => {
     handleKeyboardEvents.handleKeyDown(evt, conditionBuilderRef, variant);
   };
   return /*#__PURE__*/React.createElement(ConditionBuilderProvider.ConditionBuilderProvider, {
@@ -74,7 +73,8 @@ exports.ConditionBuilder = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     variant: variant,
     translateWithId: translateWithId,
     conditionBuilderRef: conditionBuilderRef,
-    statementConfigCustom: statementConfigCustom
+    statementConfigCustom: statementConfigCustom,
+    onAddItem: onAddItem
   }, /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(util.blockClass,
     // Apply the block class to the main HTML element
@@ -87,7 +87,7 @@ exports.ConditionBuilder = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }),
     ref: conditionBuilderRef
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(react.VStack, {
-    className: "".concat(util.blockClass, "__").concat(variant),
+    className: `${util.blockClass}__${variant}`,
     onKeyDown: handleKeyDownHandler
   }, /*#__PURE__*/React.createElement(ConditionBuilderContent.default, {
     startConditionLabel: startConditionLabel,
@@ -130,24 +130,9 @@ exports.ConditionBuilder.propTypes = {
    */
   getConditionState: index.default.func.isRequired,
   /**
-   * This is a callback that get triggered when  you want to dynamically fetch options.
-   *  Component call this when the option array is not passed against a property with type as option in the input config.
-   * This is an asynchronous callback that can return a promise , and you need to resolve the promise with options array in the valid format.
-   * You will receive the root condition state and current condition as the 2 arguments.
-   * eg: const getOptions = async (conditionState,condition) => {
-  switch (condition.property) {
-    case 'continent':
-      return new Promise((resolve) => {
-        const continents=[{
-      label: 'Africa',
-      id: 'Africa',
-    },...]
-          resolve(continents);
-      });
-      default:
-      return [];
-  }
-  };
+  * Callback triggered to dynamically fetch options for a property of type 'option'.
+  * This is invoked when no static options array is provided in the input config.
+  * The function should return a Promise that resolves with an array of options in the required format.
    */
   getOptions: index.default.func,
   /**
@@ -205,6 +190,11 @@ exports.ConditionBuilder.propTypes = {
       })
     }))
   }).isRequired,
+  /**
+   * this is an optional callback triggered before adding any condition , subgroup or group.
+   * User can optionally perform any validation and can stop add action if they return back {preventAdd:true}
+   */
+  onAddItem: index.default.func,
   /**
    * Provide an mandatory numeric value that will be used to enable search option in the popovers with list.
    */
@@ -226,8 +216,7 @@ exports.ConditionBuilder.propTypes = {
   /**
    * Optional prop, if you need to pass translations to the texts on the component instead of the defined defaults.
    * This callback function will receive the message id and you need to return the corresponding text for that id.
-   * The message id will be one of [   "ifText","addConditionText",   "addConditionGroupText",   "addSubgroupText",   "conditionText",   "propertyText",   "operatorText",   "valueText",   "connectorText",   "conditionRowText","conditionRowGroupText","conditionBuilderText","actionSectionText",   "removeConditionText",   "addConditionRowText",   "startText",   "endText",   "clearSearchText",   "actionsText",   "then",   "removeActionText",   "addActionText",   "invalidText",  "invalidNumberWarnText"]
-  ]
+   
    */
   /**@ts-ignore */
   translateWithId: index.default.func,

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

@@ -126,6 +126,13 @@ export type statementConfig = Item & {
     connector: 'and' | 'or';
     secondaryLabel?: string;
 };
+type AddItemType = 'condition' | 'subgroup' | 'group';
+type AddItemConfig = {
+    type: AddItemType;
+    state: ConditionBuilderState;
+    group?: ConditionGroup;
+};
+type ConditionBuilderTextKeys = 'ifText' | 'unlessText' | 'excl_if' | 'and' | 'or' | 'is' | 'ifAll' | 'ifAny' | 'unlessAll' | 'unlessAny' | 'greater' | 'greaterEqual' | 'lower' | 'lowerEqual' | 'startsWith' | 'endsWith' | 'contains' | 'oneOf' | 'before' | 'after' | 'between' | 'addConditionText' | 'addConditionGroupText' | 'addSubgroupText' | 'conditionText' | 'propertyText' | 'operatorText' | 'valueText' | 'connectorText' | 'conditionRowText' | 'conditionRowGroupText' | 'removeConditionText' | 'addConditionRowText' | 'startText' | 'endText' | 'clearSearchText' | 'actionsText' | 'then' | 'removeActionText' | 'addActionText' | 'invalidText' | 'invalidNumberWarnText' | 'conditionBuilderText' | 'actionSectionText' | 'conditionHeadingText' | 'addPropertyText' | 'addOperatorText' | 'addValueText' | 'conditionBuilderHierarchicalText';
 export type ConditionBuilderProps = {
     inputConfig: inputConfig;
     initialState?: InitialState;
@@ -137,8 +144,11 @@ export type ConditionBuilderProps = {
     popOverSearchThreshold: number;
     startConditionLabel?: string;
     variant?: 'Non-Hierarchical' | 'Hierarchical';
-    translateWithId: (id: string) => string;
+    translateWithId?: (id: ConditionBuilderTextKeys) => string;
     statementConfigCustom: statementConfig[];
+    onAddItem?: (config: AddItemConfig) => {
+        preventAdd: boolean;
+    };
 };
 export type InitialState = {
     state: ConditionBuilderState;
@@ -150,7 +160,7 @@ export interface ConditionBuilderContextInputProps extends PropsWithChildren {
     popOverSearchThreshold?: number;
     getOptions?: (state: ConditionBuilderState, condition: Condition) => Promise<Option[]>;
     variant?: string;
-    translateWithId?: (id: string) => string;
+    translateWithId?: (id: ConditionBuilderTextKeys) => string;
     statementConfigCustom?: statementConfig[];
     conditionBuilderRef?: ForwardedRef<HTMLDivElement>;
 }
@@ -159,5 +169,8 @@ export type ConditionBuilderContextProps = {
     setRootState?: Dispatch<SetStateAction<ConditionBuilderState>>;
     actionState?: Action[];
     setActionState?: Dispatch<SetStateAction<Action[]>>;
+    onAddItem?: (config: AddItemConfig) => {
+        preventAdd: boolean;
+    };
 } & ConditionBuilderContextInputProps;
 export {};