@carbon/ibm-products 2.59.0 → 2.60.0-rc.0

package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -56,21 +56,21 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
   var className = _ref.className,
     children = _ref.children,
     _ref$isVisible = _ref.isVisible,
-    isVisible = _ref$isVisible === void 0 ? defaults.isVisible : _ref$isVisible,
+    isVisible = _ref$isVisible === undefined ? defaults.isVisible : _ref$isVisible,
     media = _ref.media,
     renderMedia = _ref.renderMedia,
     _ref$currentStep = _ref.currentStep,
-    currentStep = _ref$currentStep === void 0 ? defaults.currentStep : _ref$currentStep,
+    currentStep = _ref$currentStep === undefined ? defaults.currentStep : _ref$currentStep,
     _ref$nextButtonText = _ref.nextButtonText,
-    nextButtonText = _ref$nextButtonText === void 0 ? defaults.nextButtonText : _ref$nextButtonText,
+    nextButtonText = _ref$nextButtonText === undefined ? defaults.nextButtonText : _ref$nextButtonText,
     _ref$previousButtonLa = _ref.previousButtonLabel,
-    previousButtonLabel = _ref$previousButtonLa === void 0 ? defaults.previousButtonLabel : _ref$previousButtonLa,
+    previousButtonLabel = _ref$previousButtonLa === undefined ? defaults.previousButtonLabel : _ref$previousButtonLa,
     _ref$closeButtonLabel = _ref.closeButtonLabel,
-    closeButtonLabel = _ref$closeButtonLabel === void 0 ? defaults.closeButtonLabel : _ref$closeButtonLabel,
+    closeButtonLabel = _ref$closeButtonLabel === undefined ? defaults.closeButtonLabel : _ref$closeButtonLabel,
     _ref$onNext = _ref.onNext,
-    onNext = _ref$onNext === void 0 ? defaults.onNext : _ref$onNext,
+    onNext = _ref$onNext === undefined ? defaults.onNext : _ref$onNext,
     _ref$onBack = _ref.onBack,
-    onBack = _ref$onBack === void 0 ? defaults.onBack : _ref$onBack,
+    onBack = _ref$onBack === undefined ? defaults.onBack : _ref$onBack,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var buttonFocusRef = React.useRef(undefined);
   var scrollRef = React.useRef(undefined);
@@ -88,7 +88,7 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     if (currentProgStep > 0 && value === 0 && buttonFocusRef.current) {
       setTimeout(function () {
         var _buttonFocusRef$curre;
-        (_buttonFocusRef$curre = buttonFocusRef.current) === null || _buttonFocusRef$curre === void 0 || _buttonFocusRef$curre.focus();
+        (_buttonFocusRef$curre = buttonFocusRef.current) === null || _buttonFocusRef$curre === undefined || _buttonFocusRef$curre.focus();
       }, 1000);
     }
     _setCurrentProgStep(value);
@@ -97,7 +97,7 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
   var progStepFloor = 0;
   var progStepCeil = numProgSteps - 1;
   var renderMediaContent = React.useMemo(function () {
-    return renderMedia === null || renderMedia === void 0 ? void 0 : renderMedia({
+    return renderMedia === null || renderMedia === undefined ? undefined : renderMedia({
       playStep: currentProgStep
     });
   }, [currentProgStep, renderMedia]);
@@ -106,7 +106,7 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     // When current step is set by props
     // scroll to the appropriate view on the carrousel
     var targetStep = lodash.clamp(currentStep, progStepFloor, progStepCeil);
-    scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || (_scrollRef$current$sc = _scrollRef$current.scrollToView) === null || _scrollRef$current$sc === void 0 || _scrollRef$current$sc.call(_scrollRef$current, targetStep);
+    scrollRef === null || scrollRef === undefined || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === undefined || (_scrollRef$current$sc = _scrollRef$current.scrollToView) === null || _scrollRef$current$sc === undefined || _scrollRef$current$sc.call(_scrollRef$current, targetStep);
     // Avoid circular call to this hook
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentStep]);
@@ -138,7 +138,7 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
       // example: [`${blockClass}__here-if-small`]: size === 'sm',
     }),
     ref: ref
-  }, devtools.getDevtoolsProps(componentName)), hasMedia && (media === null || media === void 0 ? void 0 : media.render) && media.render(), hasMedia && (media === null || media === void 0 ? void 0 : media.filePaths) && /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
+  }, devtools.getDevtoolsProps(componentName)), hasMedia && (media === null || media === undefined ? undefined : media.render) && media.render(), hasMedia && (media === null || media === undefined ? undefined : media.filePaths) && /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
     className: "".concat(blockClass, "__element-stepped-media"),
     filePaths: media.filePaths,
     playStep: currentProgStep
@@ -167,9 +167,9 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     onClick: function onClick() {
       var _scrollRef$current2, _scrollRef$current2$s;
       var targetStep = lodash.clamp(currentProgStep - 1, progStepFloor, progStepCeil);
-      scrollRef === null || scrollRef === void 0 || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 || (_scrollRef$current2$s = _scrollRef$current2.scrollToView) === null || _scrollRef$current2$s === void 0 || _scrollRef$current2$s.call(_scrollRef$current2, targetStep);
+      scrollRef === null || scrollRef === undefined || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === undefined || (_scrollRef$current2$s = _scrollRef$current2.scrollToView) === null || _scrollRef$current2$s === undefined || _scrollRef$current2$s.call(_scrollRef$current2, targetStep);
       setCurrentProgStep(targetStep);
-      onBack === null || onBack === void 0 || onBack();
+      onBack === null || onBack === undefined || onBack();
     }
   }, previousButtonLabel), currentProgStep < progStepCeil ? /*#__PURE__*/React.createElement(react.Button, {
     size: "sm",
@@ -179,9 +179,9 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     onClick: function onClick() {
       var _scrollRef$current3, _scrollRef$current3$s;
       var targetStep = lodash.clamp(currentProgStep + 1, progStepFloor, progStepCeil);
-      scrollRef === null || scrollRef === void 0 || (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 || (_scrollRef$current3$s = _scrollRef$current3.scrollToView) === null || _scrollRef$current3$s === void 0 || _scrollRef$current3$s.call(_scrollRef$current3, targetStep);
+      scrollRef === null || scrollRef === undefined || (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === undefined || (_scrollRef$current3$s = _scrollRef$current3.scrollToView) === null || _scrollRef$current3$s === undefined || _scrollRef$current3$s.call(_scrollRef$current3, targetStep);
       setCurrentProgStep(targetStep);
-      onNext === null || onNext === void 0 || onNext();
+      onNext === null || onNext === undefined || onNext();
     }
   }, nextButtonText) : closeButtonLabel && /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({
     size: "sm",

package/lib/components/CoachmarkStack/CoachmarkStack.js

@@ -54,22 +54,22 @@ exports.CoachmarkStack = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? defaults.onClose : _ref$onClose,
+    onClose = _ref$onClose === undefined ? defaults.onClose : _ref$onClose,
     description = _ref.description,
     media = _ref.media,
     navLinkLabels = _ref.navLinkLabels,
     _ref$portalTarget = _ref.portalTarget,
-    portalTarget = _ref$portalTarget === void 0 ? defaults.portalTarget : _ref$portalTarget,
+    portalTarget = _ref$portalTarget === undefined ? defaults.portalTarget : _ref$portalTarget,
     closeButtonLabel = _ref.closeButtonLabel,
     tagline = _ref.tagline,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
+    theme = _ref$theme === undefined ? defaults.theme : _ref$theme,
     title = _ref.title,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var portalNode = React.useRef(null);
   useIsomorphicEffect.useIsomorphicEffect(function () {
     var _document$querySelect, _document, _document2, _document3;
-    portalNode.current = portalTarget ? (_document$querySelect = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.querySelector('body') : (_document3 = document) === null || _document3 === void 0 ? void 0 : _document3.querySelector('body');
+    portalNode.current = portalTarget ? (_document$querySelect = (_document = document) === null || _document === undefined ? undefined : _document.querySelector(portalTarget)) !== null && _document$querySelect !== undefined ? _document$querySelect : (_document2 = document) === null || _document2 === undefined ? undefined : _document2.querySelector('body') : (_document3 = document) === null || _document3 === undefined ? undefined : _document3.querySelector('body');
   }, [portalTarget]);
   var stackHomeRef = React.useRef(null);
   var stackedCoachmarkRefs = React.useRef([]);
@@ -119,7 +119,11 @@ exports.CoachmarkStack = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [onClose]);
   var escFunction = React.useCallback(function (event) {
     if (event.key === 'Escape') {
-      selectedItemNumber === 0 ? handleClose(true) : handleClose(false);
+      if (selectedItemNumber === 0) {
+        handleClose(true);
+      } else {
+        handleClose(false);
+      }
     }
   }, [handleClose, selectedItemNumber]);
   React.useEffect(function () {
@@ -186,7 +190,7 @@ exports.CoachmarkStack = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return /*#__PURE__*/React.createElement(CoachmarkOverlay.CoachmarkOverlay, {
       key: idx,
       ref: function ref(_ref2) {
-        return stackedCoachmarkRefs.current[idx] = _ref2;
+        stackedCoachmarkRefs.current[idx] = _ref2;
       },
       kind: enums.COACHMARK_OVERLAY_KIND.STACKED,
       onClose: function onClose() {
@@ -219,7 +223,7 @@ exports.CoachmarkStack = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     portalTarget: portalTarget,
     closeButtonLabel: closeButtonLabel,
     title: title
-  }), portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/reactDom.createPortal(wrappedChildren, portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) : null));
+  }), portalNode !== null && portalNode !== undefined && portalNode.current ? /*#__PURE__*/reactDom.createPortal(wrappedChildren, portalNode === null || portalNode === undefined ? undefined : portalNode.current) : null));
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/CoachmarkStack/CoachmarkStackHome.js

@@ -64,7 +64,7 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   var portalNode = React.useRef(null);
   useIsomorphicEffect.useIsomorphicEffect(function () {
     var _document$querySelect, _document, _document2, _document3;
-    portalNode.current = portalTarget ? (_document$querySelect = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.querySelector('body') : (_document3 = document) === null || _document3 === void 0 ? void 0 : _document3.querySelector('body');
+    portalNode.current = portalTarget ? (_document$querySelect = (_document = document) === null || _document === undefined ? undefined : _document.querySelector(portalTarget)) !== null && _document$querySelect !== undefined ? _document$querySelect : (_document2 = document) === null || _document2 === undefined ? undefined : _document2.querySelector('body') : (_document3 = document) === null || _document3 === undefined ? undefined : _document3.querySelector('body');
   }, [portalTarget]);
   if (!navLinkLabels) {
     return pconsole.default.warn("".concat(componentName, " is an Onboarding internal component and is not intended for general use."));
@@ -83,7 +83,7 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       ref: ref
     }, label));
   }
-  return portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+  return portalNode !== null && portalNode !== undefined && portalNode.current ? /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(CoachmarkHeader.CoachmarkHeader, {
@@ -98,7 +98,7 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   }, !hasMedia && /*#__PURE__*/React.createElement(icons.Idea, {
     size: 20,
     className: "".concat(blockClass, "__icon-idea")
-  }), hasMedia && (media === null || media === void 0 ? void 0 : media.render) && media.render(), hasMedia && (media === null || media === void 0 ? void 0 : media.filePaths) && /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
+  }), hasMedia && (media === null || media === undefined ? undefined : media.render) && media.render(), hasMedia && (media === null || media === undefined ? undefined : media.filePaths) && /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
     className: "".concat(blockClass, "__element-stepped-media"),
     filePaths: media.filePaths,
     playStep: 0
@@ -127,7 +127,7 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       setLinkFocusIndex(0);
       _onClose();
     }
-  }, closeButtonLabel))))), portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) : null;
+  }, closeButtonLabel))))), portalNode === null || portalNode === undefined ? undefined : portalNode.current) : null;
 });
 
 // Return a placeholder if not released and not enabled by feature flag

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

@@ -37,5 +37,5 @@ export interface ComboButtonProps extends ComponentProps<'div'> {
 /**
  * The combo button consolidates similar actions, while exposing the most commonly used one.
  */
-declare const ComboButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<ComboButtonProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ComboButton: React.ForwardRefExoticComponent<Omit<ComboButtonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { ComboButton };

package/lib/components/ComboButton/ComboButton.js

@@ -23,36 +23,35 @@ var componentName = 'ComboButton';
 /**
  * The combo button consolidates similar actions, while exposing the most commonly used one.
  */
-var ComboButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    overflowMenu = _ref.overflowMenu,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+var ComboButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+    className = props.className,
+    overflowMenu = props.overflowMenu,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
   var _useRef = React.useRef(uuidv4.default()),
     instanceId = _useRef.current;
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
-  var _Children$toArray$fil = React.Children.toArray(children).filter(Boolean).map(function (child) {
-      if ( /*#__PURE__*/React.isValidElement(child)) {
-        var props = child.props;
-        return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
-          children: /*#__PURE__*/React.createElement("span", {
-            className: "".concat(blockClass, "__action")
-          }, child)
-        });
-      }
-      return null;
-    }),
-    _Children$toArray$fil2 = _rollupPluginBabelHelpers.toArray(_Children$toArray$fil),
-    primaryAction = _Children$toArray$fil2[0],
-    restActions = _Children$toArray$fil2.slice(1);
+  var actions = React.Children.toArray(children).filter(Boolean).map(function (child) {
+    if (/*#__PURE__*/React.isValidElement(child)) {
+      var _props = child.props;
+      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, _props), {}, {
+        children: /*#__PURE__*/React.createElement("span", {
+          className: "".concat(blockClass, "__action")
+        }, child)
+      });
+    }
+    return null;
+  });
+  var primaryAction = actions.slice(0, 1);
+  var 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), restActions.length > 0 && /*#__PURE__*/React.createElement(react.OverflowMenu, _rollupPluginBabelHelpers.extends({}, overflowMenu, {
+  }), /*#__PURE__*/React.createElement(react.Button, primaryAction), secondaryActions.length > 0 && /*#__PURE__*/React.createElement(react.OverflowMenu, _rollupPluginBabelHelpers.extends({}, overflowMenu, {
     className: "".concat(blockClass, "__overflow-menu"),
     menuOptionsClass: "".concat(blockClass, "__overflow-menu__list"),
     onClick: function onClick() {
@@ -75,10 +74,10 @@ var ComboButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       });
     },
     flipped: true
-  }), restActions.map(function (_ref2, index) {
-    var children = _ref2.children,
-      Icon = _ref2.renderIcon,
-      action = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
+  }), secondaryActions.map(function (_ref, index) {
+    var children = _ref.children,
+      Icon = _ref.renderIcon,
+      action = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded2);
     return /*#__PURE__*/React.createElement(react.OverflowMenuItem, _rollupPluginBabelHelpers.extends({}, action, {
       key: "".concat(blockClass, "--").concat(instanceId, "__overflow-menu__item__").concat(index),
       className: "".concat(blockClass, "__overflow-menu__item"),

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

@@ -14,13 +14,13 @@ declare const ComboButtonItem: {
     }): React.JSX.Element;
     propTypes: {
         /** Provide the contents of the `ComboButtonItem` */
-        children: import("prop-types").Validator<NonNullable<import("prop-types").ReactNodeLike>>;
+        children: any;
         /** Specify whether the `ComboButton` should be disabled, or not */
-        disabled: import("prop-types").Requireable<boolean>;
+        disabled: any;
         /** Provide an optional `href` for the `ComboButtonItem` to become an `a` element */
-        href: import("prop-types").Requireable<string>;
+        href: any;
         /** Provide an optional icon to render */
-        renderIcon: import("prop-types").Requireable<object>;
+        renderIcon: any;
     };
 };
 export { ComboButtonItem };

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

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Condition, ConditionGroup, LogicalOperator } from '../ConditionBuilder.types';
 /**
  * This component build each block of condition consisting of property, operator value and close button.
@@ -39,66 +38,66 @@ declare const ConditionBlock: {
         /**
          * callback to add a new condition
          */
-        addConditionHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        addConditionHandler: any;
         /**
          * callback to add a new condition subgroup
          */
-        addConditionSubGroupHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        addConditionSubGroupHandler: any;
         /**
          * object hold aria attributes
          */
-        aria: PropTypes.Requireable<object>;
-        condition: PropTypes.Requireable<object>;
-        conditionIndex: PropTypes.Requireable<number>;
+        aria: any;
+        condition: any;
+        conditionIndex: any;
         /**
          * string that decides to show the condition connector
          */
-        conjunction: PropTypes.Requireable<string>;
+        conjunction: any;
         /**
          * object that hold the current group object where is condition is part of
          */
-        group: PropTypes.Requireable<object>;
+        group: any;
         /**
          * handler for hiding sub group preview
          */
-        hideConditionPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        hideConditionPreviewHandler: any;
         /**
          * handler for hiding sub group preview
          */
-        hideConditionSubGroupPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
-        isLastCondition: PropTypes.Requireable<(...args: any[]) => any>;
+        hideConditionSubGroupPreviewHandler: any;
+        isLastCondition: any;
         /**
          *  boolean that decides to show the statement(if/ excl.if)
          */
-        isStatement: PropTypes.Requireable<boolean>;
+        isStatement: any;
         /**
          * callback to update the current condition of the state tree
          */
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: any;
         /**
          * callback to handle the connector(and/or) change
          */
-        onConnectorOperatorChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onConnectorOperatorChange: any;
         /**
          * callback for Remove a condition
          */
-        onRemove: PropTypes.Requireable<(...args: any[]) => any>;
+        onRemove: any;
         /**
          * callback to handle the statement(if/ excl.if) change
          */
-        onStatementChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onStatementChange: any;
         /**
          * handler for showing add condition preview
          */
-        showConditionPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        showConditionPreviewHandler: any;
         /**
          * handler for showing sub group preview
          */
-        showConditionSubGroupPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        showConditionSubGroupPreviewHandler: any;
         /**
          * object that hold the current condition
          */
-        state: PropTypes.Requireable<object>;
+        state: any;
     };
 };
 export default ConditionBlock;

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

@@ -37,7 +37,7 @@ var ConditionBlock = function ConditionBlock(props) {
   var onRemove = props.onRemove,
     onChange = props.onChange,
     _props$condition = props.condition,
-    condition = _props$condition === void 0 ? {} : _props$condition,
+    condition = _props$condition === undefined ? {} : _props$condition,
     conjunction = props.conjunction,
     onConnectorOperatorChange = props.onConnectorOperatorChange,
     isStatement = props.isStatement,
@@ -81,15 +81,16 @@ var ConditionBlock = function ConditionBlock(props) {
   //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 (_inputConfig$properti = inputConfig === null || inputConfig === undefined || (_inputConfig$properti2 = inputConfig.properties) === null || _inputConfig$properti2 === undefined ? undefined : _inputConfig$properti2.find(function (eachProperty) {
       return eachProperty.id == property;
-    })) !== null && _inputConfig$properti !== void 0 ? _inputConfig$properti : {};
+    })) !== null && _inputConfig$properti !== undefined ? _inputConfig$properti : {};
   };
   var _ref = getCurrentConfig(property),
     icon = _ref.icon,
     type = _ref.type,
     config = _ref.config,
-    label = _ref.label;
+    label = _ref.label,
+    description = _ref.description;
 
   //Below possible input types expected for value field.
   var itemComponents = {
@@ -98,7 +99,7 @@ var ConditionBlock = function ConditionBlock(props) {
     date: ConditionBuilderItemDate.ConditionBuilderItemDate,
     time: ConditionBuilderItemTime.ConditionBuilderItemTime,
     option: ItemOptionForValueField.ItemOptionForValueField,
-    custom: config === null || config === void 0 ? void 0 : config.component,
+    custom: config === null || config === undefined ? undefined : config.component,
     textarea: ConditionBuilderItemText.ConditionBuilderItemText
   };
   var ItemComponent = itemComponents[type];
@@ -110,7 +111,7 @@ var ConditionBlock = function ConditionBlock(props) {
   };
   var onStatementChangeHandler = function onStatementChangeHandler(v, evt) {
     util.focusThisField(evt, conditionBuilderRef);
-    onStatementChange === null || onStatementChange === void 0 || onStatementChange(v);
+    onStatementChange === null || onStatementChange === undefined || onStatementChange(v);
   };
   var onPropertyChangeHandler = function onPropertyChangeHandler(newProperty) {
     onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, condition), {}, {
@@ -147,7 +148,9 @@ var ConditionBlock = function ConditionBlock(props) {
     return isLastCondition(conditionIndex, conditions);
   };
   var getOperators = function getOperators() {
-    if (config !== null && config !== void 0 && config.operators) {
+    // @ts-ignore
+    if (config !== null && config !== undefined && config.operators) {
+      // @ts-ignore
       return config.operators;
     }
     return operatorConfig.filter(function (operator) {
@@ -188,7 +191,7 @@ var ConditionBlock = function ConditionBlock(props) {
     className: "".concat(util.blockClass, "__gap"),
     operator: conjunction,
     onChange: function onChange(op) {
-      return onConnectorOperatorChange === null || onConnectorOperatorChange === void 0 ? void 0 : onConnectorOperatorChange(op);
+      return onConnectorOperatorChange === null || onConnectorOperatorChange === undefined ? undefined : onConnectorOperatorChange(op);
     }
   }) : '', isStatement && /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
     label: group.statement,
@@ -208,13 +211,14 @@ 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 !== null && label !== undefined ? label : condition === null || condition === undefined ? undefined : condition.property,
     title: propertyText,
-    renderIcon: icon !== null && icon !== void 0 ? icon : undefined,
+    renderIcon: icon !== null && icon !== undefined ? icon : undefined,
     className: "".concat(util.blockClass, "__property-field"),
     "data-name": "propertyField",
     condition: condition,
     type: type,
+    description: description,
     onChange: onPropertyChangeHandler
   }, /*#__PURE__*/React.createElement(ItemOption.ItemOption, {
     conditionState: {
@@ -223,7 +227,7 @@ var ConditionBlock = function ConditionBlock(props) {
     },
     onChange: onPropertyChangeHandler,
     config: {
-      options: inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.properties
+      options: inputConfig === null || inputConfig === undefined ? undefined : inputConfig.properties
     }
   })), util.checkIsValid(property) && /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
     label: operator,
@@ -231,6 +235,7 @@ var ConditionBlock = function ConditionBlock(props) {
     "data-name": "operatorField",
     condition: condition,
     type: type,
+    config: config,
     onChange: onOperatorChangeHandler
   }, /*#__PURE__*/React.createElement(ItemOption.ItemOption, {
     config: {
@@ -268,10 +273,10 @@ var ConditionBlock = function ConditionBlock(props) {
     wrapperClassName: "".concat(util.blockClass, "__close-condition-wrapper")
   })), manageActionButtons(conditionIndex, group.conditions) && /*#__PURE__*/React.createElement(ConditionBuilderAdd.default, {
     onClick: function onClick() {
-      addConditionHandler === null || addConditionHandler === void 0 || addConditionHandler(conditionIndex);
+      addConditionHandler === null || addConditionHandler === undefined || addConditionHandler(conditionIndex);
     },
     addConditionSubGroupHandler: function addConditionSubGroupHandler() {
-      _addConditionSubGroupHandler === null || _addConditionSubGroupHandler === void 0 || _addConditionSubGroupHandler(conditionIndex);
+      _addConditionSubGroupHandler === null || _addConditionSubGroupHandler === undefined || _addConditionSubGroupHandler(conditionIndex);
     },
     showConditionSubGroupPreviewHandler: showConditionSubGroupPreviewHandler,
     hideConditionSubGroupPreviewHandler: hideConditionSubGroupPreviewHandler,

package/lib/components/ConditionBuilder/ConditionBuilder.js

@@ -50,14 +50,14 @@ 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,
+    startConditionLabel = _ref$startConditionLa === undefined ? '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,
+    variant = _ref$variant === undefined ? util.NON_HIERARCHICAL_VARIANT : _ref$variant,
     actions = _ref.actions,
     translateWithId = _ref.translateWithId,
     statementConfigCustom = _ref.statementConfigCustom,
@@ -188,6 +188,8 @@ exports.ConditionBuilder.propTypes = {
       label: index.default.string.isRequired,
       icon: index.default.oneOfType([index.default.func, index.default.object]),
       type: index.default.oneOf(['text', 'textarea', 'number', 'date', 'option', 'time', 'custom']).isRequired,
+      description: index.default.string,
+      //will be displayed on hover of property field
       config: index.default.shape({
         options: index.default.arrayOf(index.default.shape({
           id: index.default.string.isRequired,
@@ -198,7 +200,8 @@ exports.ConditionBuilder.propTypes = {
         operators: index.default.arrayOf(index.default.shape({
           id: index.default.string.isRequired,
           label: index.default.string.isRequired
-        }))
+        })),
+        valueFormatter: index.default.func
       })
     }))
   }).isRequired,

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

@@ -1,4 +1,3 @@
-/// <reference path="../../../src/custom-typings/index.d.ts" />
 /**
  * Copyright IBM Corp. 2024
  *
@@ -29,28 +28,36 @@ export type Operators = {
     option: OptionOperator;
     date: DateOperator;
 };
-export type option = {
+type Item = {
     id: string;
     label: string;
+};
+export type option = Item & {
     icon?: CarbonIconType;
 };
 export type PropertyConfigOption = {
     type: 'option';
     config?: {
         options?: option[];
+        operators?: (Item & {
+            isMultiSelect?: boolean;
+        })[];
     };
 };
 export interface PropertyConfigText {
     type: 'text';
     config: TextInputProps;
+    operators?: Item[];
 }
 export interface PropertyConfigTextArea {
     type: 'textarea';
     config: TextAreaProps;
+    operators?: Item[];
 }
 export interface PropertyConfigNumber {
     type: 'number';
     config: {
+        operators?: Item[];
         min?: number;
         max?: number;
         step?: number;
@@ -59,11 +66,15 @@ export interface PropertyConfigNumber {
 }
 export type PropertyConfigDate = {
     type: 'date';
-    config: object;
+    config: {
+        valueFormatter?: (value: string) => string;
+        operators?: Item[];
+    };
 };
 export type PropertyConfigTime = {
     type: 'time';
     config: {
+        operators?: Item[];
         timeZones: string[];
     };
 };
@@ -71,32 +82,21 @@ export type PropertyConfigCustom = {
     type: 'custom';
     config: {
         component: React.ComponentType<any>;
-        operators: {
-            label: string;
-            id: string;
-        }[];
+        operators?: Item[];
+        valueFormatter?: (value: string) => string;
     };
 };
-export type PropertyConfig = {
-    option: PropertyConfigOption;
-    text: PropertyConfigText;
-    textarea: PropertyConfigTextArea;
-    number: PropertyConfigNumber;
-    date: PropertyConfigDate;
-    time: PropertyConfigTime;
-    custom: PropertyConfigCustom;
-};
-export type Property = {
-    id: string;
-    label: string;
+export type ConfigType = PropertyConfigOption['config'] | PropertyConfigTextArea['config'] | PropertyConfigText['config'] | PropertyConfigNumber['config'] | PropertyConfigDate['config'] | PropertyConfigTime['config'] | PropertyConfigCustom['config'];
+export type Property = Item & {
     icon?: CarbonIconType;
-} & (PropertyConfig['option'] | PropertyConfig['text'] | PropertyConfig['number'] | PropertyConfig['date'] | PropertyConfig['textarea'] | PropertyConfig['time'] | PropertyConfig['custom']);
+    description?: string;
+    type?: any;
+    config?: any;
+} & ConfigType;
 export type inputConfig = {
     properties: Property[];
 };
-export type Option = {
-    id: string;
-    label: string;
+export type Option = Item & {
     icon?: CarbonIconType;
 };
 export type Condition = {
@@ -121,10 +121,8 @@ export type Action = {
     label?: string;
 };
 export type variantsType = 'Non-Hierarchical' | 'Hierarchical';
-export type statementConfig = {
-    id: string;
+export type statementConfig = Item & {
     connector: 'and' | 'or';
-    label: string;
     secondaryLabel?: string;
 };
 export type ConditionBuilderProps = {