@carbon/ibm-products 2.52.0-rc.0 → 2.53.0-rc.0

package/lib/components/Coachmark/Coachmark.js

@@ -41,7 +41,6 @@ var defaults = {
  */
 
 exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _positionTune$y, _positionTune$x;
   var _ref$align = _ref.align,
     align = _ref$align === void 0 ? defaults.align : _ref$align,
     autoAlign = _ref.autoAlign,
@@ -80,11 +79,12 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
     targetOffset = _useState8[0],
     setTargetOffset = _useState8[1];
-  var overlayBackupRef = React.useRef();
-  var backupRef = React.useRef();
+  var overlayBackupRef = React.useRef(undefined);
+  var backupRef = React.useRef(undefined);
   var _coachmarkRef = ref || backupRef;
   var _overlayRef = overlayRef || overlayBackupRef;
   var portalNode = React.useRef(null);
+  var popoverRef = 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');
@@ -130,10 +130,6 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setShouldResetPosition(true);
     }
   };
-  var overlayPositionStyle = {
-    top: ((_positionTune$y = positionTune === null || positionTune === void 0 ? void 0 : positionTune.y) !== null && _positionTune$y !== void 0 ? _positionTune$y : 0) - 16,
-    left: ((_positionTune$x = positionTune === null || positionTune === void 0 ? void 0 : positionTune.x) !== null && _positionTune$x !== void 0 ? _positionTune$x : 0) - 16
-  };
   var contextValue = {
     buttonProps: {
       'aria-expanded': isOpen,
@@ -164,6 +160,19 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setIsOpen(true);
     }
   }, [shouldResetPosition]);
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    var _positionTune$y, _positionTune$x;
+    var overlayPositionStyle = {
+      top: "".concat(((_positionTune$y = positionTune === null || positionTune === void 0 ? void 0 : positionTune.y) !== null && _positionTune$y !== void 0 ? _positionTune$y : 0) - 16, "px"),
+      left: "".concat(((_positionTune$x = positionTune === null || positionTune === void 0 ? void 0 : positionTune.x) !== null && _positionTune$x !== void 0 ? _positionTune$x : 0) - 16, "px")
+    };
+    if (popoverRef.current && popoverRef.current.style && overlayPositionStyle) {
+      var combinedStyle = _rollupPluginBabelHelpers.objectSpread2({
+        position: 'absolute'
+      }, overlayPositionStyle);
+      Object.assign(popoverRef.current.style, combinedStyle);
+    }
+  }, [popoverRef, positionTune]);
 
   // On unmount:
   // - DO NOT "Close()" the coachmark.
@@ -195,9 +204,7 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   portalNode === null || portalNode === void 0 ? void 0 : portalNode.current)) : /*#__PURE__*/React.createElement(react.Popover, {
     highContrast: true,
     caret: true,
-    style: _rollupPluginBabelHelpers.objectSpread2({
-      position: 'absolute'
-    }, overlayPositionStyle),
+    ref: popoverRef,
     align: align,
     autoAlign: autoAlign,
     open: isOpen

package/lib/components/Coachmark/CoachmarkOverlay.js

@@ -19,6 +19,7 @@ var CoachmarkHeader = require('./CoachmarkHeader.js');
 var constants = require('./utils/constants.js');
 var context = require('./utils/context.js');
 var enums = require('./utils/enums.js');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 var _excluded = ["children", "onClose", "fixedIsVisible", "className", "kind", "theme"];
 
@@ -83,26 +84,27 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     }
   };
-  var styledTune = {};
-  if (isBeacon || isDraggable) {
-    if (coachmark.targetRect) {
-      styledTune.left = coachmark.targetRect.x + window.scrollX;
-      styledTune.top = coachmark.targetRect.y + window.scrollY;
-    }
-    if (styledTune.left && styledTune.top) {
-      if (isBeacon) {
-        // Compensate for radius of beacon
-        styledTune.left += 16;
-        styledTune.top += 16;
+  var styledTune = React.useMemo(function () {
+    var style = {};
+    if (isBeacon || isDraggable) {
+      if (coachmark.targetRect) {
+        style.left = coachmark.targetRect.x + window.scrollX;
+        style.top = coachmark.targetRect.y + window.scrollY;
       }
-      if (isDraggable) {
-        // Compensate for width and height of target element
-        var offsetTune = constants.getOffsetTune(coachmark, kind);
-        styledTune.left += offsetTune.left;
-        styledTune.top += offsetTune.top;
+      if (style.left && style.top) {
+        if (isBeacon) {
+          style.left = style.left + 16;
+          style.top = style.top + 16;
+        }
+        if (isDraggable) {
+          var offsetTune = constants.getOffsetTune(coachmark, kind);
+          style.left = style.left + offsetTune.left;
+          style.top = style.top + offsetTune.top;
+        }
       }
     }
-  }
+    return style;
+  }, [isBeacon, isDraggable, coachmark, kind]);
   function handleDragBounds(x, y) {
     var xRes = x;
     var yRes = y;
@@ -141,10 +143,19 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     overlay.style.bottom = 'auto';
   }
   var contentId = uuidv4.default();
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    if (overlayRef.current) {
+      var _overlayRef$current;
+      var currentStyle = (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.style;
+      Object.keys(styledTune).forEach(function (key) {
+        var value = styledTune[key];
+        currentStyle.setProperty(key, "".concat(value, "px"));
+      });
+    }
+  }, [styledTune, overlayRef]);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, "".concat(blockClass, "--").concat(kind), "".concat(blockClass, "__").concat(theme), (isBeacon || isDraggable) && "".concat(blockClass, "--").concat(coachmark.align), fixedIsVisible && "".concat(blockClass, "--is-visible"), a11yDragMode && "".concat(blockClass, "--is-dragmode"), className),
     ref: overlayRef,
-    style: styledTune,
     "aria-labelledby": contentId,
     tabIndex: -1
   }, devtools.getDevtoolsProps(componentName)), isDraggable ? /*#__PURE__*/React.createElement(CoachmarkDragbar.CoachmarkDragbar, {

package/lib/components/Coachmark/utils/hooks.js

@@ -19,7 +19,7 @@ var enums = require('./enums.js');
  */
 
 function useClickOutsideElement(coachmarkRef, overlayRef, overlayKind, callback) {
-  var cb = React.useRef();
+  var cb = React.useRef(undefined);
   var isTooltip = overlayKind === enums.COACHMARK_OVERLAY_KIND.TOOLTIP;
   React.useLayoutEffect(function () {
     cb.current = callback;

package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -62,8 +62,8 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     _ref$closeButtonLabel = _ref.closeButtonLabel,
     closeButtonLabel = _ref$closeButtonLabel === void 0 ? defaults.closeButtonLabel : _ref$closeButtonLabel,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var buttonFocusRef = React.useRef();
-  var scrollRef = React.useRef();
+  var buttonFocusRef = React.useRef(undefined);
+  var scrollRef = React.useRef(undefined);
   var _useState = React.useState(0),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     scrollPosition = _useState2[0],

package/lib/components/CoachmarkStack/CoachmarkStack.js

@@ -91,7 +91,7 @@ exports.CoachmarkStack = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setParentHeight = _useState6[1];
   // parent height = child height when stacked behind a child that is shorter
   var childArray = React.Children.toArray(children);
-  var mountedRef = React.useRef();
+  var mountedRef = React.useRef(undefined);
   // same value as CSS animation speed
   var delayMs = 240;
 

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

@@ -4,13 +4,14 @@
  * 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;
-    }): import("react/jsx-runtime").JSX.Element;
+    }): React.JSX.Element;
     propTypes: {
         /** Provide the contents of the `ComboButtonItem` */
         children: import("prop-types").Validator<NonNullable<import("prop-types").ReactNodeLike>>;

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

@@ -34,7 +34,7 @@ interface ConditionBlockProps {
     isLastCondition: (index: number, conditions: (ConditionGroup | Condition)[]) => void;
 }
 declare const ConditionBlock: {
-    (props: ConditionBlockProps): import("react/jsx-runtime").JSX.Element;
+    (props: ConditionBlockProps): React.JSX.Element;
     propTypes: {
         /**
          * callback to add a new condition

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

@@ -29,8 +29,6 @@ var ItemOptionForValueField = require('../ConditionBuilderItem/ConditionBuilderI
 var useTranslations = require('../utils/useTranslations.js');
 var useDataConfigs = require('../utils/useDataConfigs.js');
 
-var _div;
-
 /**
  * This component build each block of condition consisting of property, operator value and close button.
  */
@@ -192,9 +190,7 @@ var ConditionBlock = function ConditionBlock(props) {
     onChange: function onChange(op) {
       return onConnectorOperatorChange === null || onConnectorOperatorChange === void 0 ? void 0 : onConnectorOperatorChange(op);
     }
-  }) : _div || (_div = /*#__PURE__*/React.createElement("div", {
-    role: "gridcell"
-  })), isStatement && /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
+  }) : '', isStatement && /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
     label: group.statement,
     title: conditionText,
     "data-name": "connectorField",
@@ -268,7 +264,8 @@ var ConditionBlock = function ConditionBlock(props) {
     onBlur: handleHideDeletionPreview,
     renderIcon: icons.Close,
     className: "".concat(util.blockClass, "__close-condition"),
-    "data-name": "closeCondition"
+    "data-name": "closeCondition",
+    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);

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

@@ -4,6 +4,7 @@
  * 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 PropTypes from 'prop-types';
 import { Action, Option } from '../ConditionBuilder.types';
 interface ConditionBuilderActionsProps {
@@ -11,7 +12,7 @@ interface ConditionBuilderActionsProps {
     className?: string;
 }
 declare const ConditionBuilderActions: {
-    ({ actions, className, }: ConditionBuilderActionsProps): import("react/jsx-runtime").JSX.Element;
+    ({ actions, className, }: ConditionBuilderActionsProps): React.JSX.Element;
     propTypes: {
         /**
          * optional array of object that give the list of actions.

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

@@ -4,6 +4,7 @@
  * 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 PropTypes from 'prop-types';
 interface ConditionBuilderAddProps {
     className?: string;
@@ -18,7 +19,7 @@ interface ConditionBuilderAddProps {
     tabIndex?: number;
 }
 declare const ConditionBuilderAdd: {
-    ({ className, onClick, addConditionSubGroupHandler, showConditionSubGroupPreviewHandler, hideConditionSubGroupPreviewHandler, showConditionPreviewHandler, hideConditionPreviewHandler, enableSubGroup, buttonLabel, tabIndex, }: ConditionBuilderAddProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, onClick, addConditionSubGroupHandler, showConditionSubGroupPreviewHandler, hideConditionSubGroupPreviewHandler, showConditionPreviewHandler, hideConditionPreviewHandler, enableSubGroup, buttonLabel, tabIndex, }: ConditionBuilderAddProps): React.JSX.Element;
     propTypes: {
         /**
          * handler for hiding sub group preview

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

@@ -27,7 +27,7 @@ interface ConditionBuilderButtonProps {
     tabIndex?: number;
 }
 export declare const ConditionBuilderButton: {
-    ({ className, label, hideLabel, tooltipAlign, renderIcon: Icon, onClick, showToolTip, wrapperProps, onBlur, onFocus, onMouseEnter, onMouseLeave, isInvalid, wrapperClassName, tabIndex, ...rest }: ConditionBuilderButtonProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, label, hideLabel, tooltipAlign, renderIcon: Icon, onClick, showToolTip, wrapperProps, onBlur, onFocus, onMouseEnter, onMouseLeave, isInvalid, wrapperClassName, tabIndex, ...rest }: ConditionBuilderButtonProps): React.JSX.Element;
     propTypes: {
         /**
          * Provide an optional class to be applied to the containing node.

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

@@ -4,6 +4,7 @@
  * 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 PropTypes from 'prop-types';
 interface ConditionConnectorProps {
     operator: string;
@@ -11,7 +12,7 @@ interface ConditionConnectorProps {
     onChange?: (op: string) => void;
 }
 declare const ConditionConnector: {
-    ({ operator, className, onChange, ...rest }: ConditionConnectorProps): import("react/jsx-runtime").JSX.Element;
+    ({ operator, className, onChange, ...rest }: ConditionConnectorProps): React.JSX.Element;
     propTypes: {
         /**
          * Provide an optional class to be applied to the containing node.

package/lib/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.js

@@ -57,10 +57,7 @@ var ConditionConnector = function ConditionConnector(_ref) {
     className: "".concat(className, " ").concat(util.blockClass, "__connector--disabled")
   }, /*#__PURE__*/React.createElement(ConditionBuilderButton.ConditionBuilderButton, {
     label: operator
-  })) :
-  /*#__PURE__*/
-  // <div className={className} {...rest}>
-  React.createElement(ConditionBuilderItem.ConditionBuilderItem, _rollupPluginBabelHelpers.extends({
+  })) : /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, _rollupPluginBabelHelpers.extends({
     label: operator,
     title: connectorText,
     "data-name": "connectorField",
@@ -80,10 +77,7 @@ var ConditionConnector = function ConditionConnector(_ref) {
       label: connectorText
     },
     onChange: onChangeHandler
-  }))
-
-  // </div>
-  ;
+  }));
 };
 ConditionConnector.propTypes = {
   /**

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

@@ -1,2 +1,3 @@
 export default GroupConnector;
-declare function GroupConnector(): import("react/jsx-runtime").JSX.Element;
+declare function GroupConnector(): React.JSX.Element;
+import React from 'react';

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

@@ -4,6 +4,7 @@
  * 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 PropTypes from 'prop-types';
 import { Action, ConditionBuilderState, InitialState } from '../ConditionBuilder.types';
 interface ConditionBuilderContentProps {
@@ -14,7 +15,7 @@ interface ConditionBuilderContentProps {
     actions?: Action[];
 }
 declare const ConditionBuilderContent: {
-    ({ startConditionLabel, getConditionState, getActionsState, initialState, actions, }: ConditionBuilderContentProps): import("react/jsx-runtime").JSX.Element;
+    ({ startConditionLabel, getConditionState, getActionsState, initialState, actions, }: ConditionBuilderContentProps): React.JSX.Element;
     propTypes: {
         /**
          * optional array of object that give the list of actions.

package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js

@@ -117,7 +117,6 @@ var ConditionBuilderContent = function ConditionBuilderContent(_ref) {
   var addConditionGroupHandler = function addConditionGroupHandler() {
     var newGroup = {
       statement: 'ifAll',
-      // 'if|exclude if',
       groupOperator: 'and',
       id: uuidv4.default(),
       conditions: [{

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

@@ -27,7 +27,7 @@ interface ConditionBuilderItemProps extends PropsWithChildren {
     onBlur?: React.FocusEventHandler<HTMLButtonElement>;
 }
 export declare const ConditionBuilderItem: {
-    ({ children, className, label, renderIcon, title, type, showToolTip, condition, popOverClassName, config, renderChildren, onChange, ...rest }: ConditionBuilderItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, className, label, renderIcon, title, type, showToolTip, condition, popOverClassName, config, renderChildren, onChange, ...rest }: ConditionBuilderItemProps): React.JSX.Element;
     propTypes: {
         /**
          * provide the contents of the popover

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

@@ -4,13 +4,14 @@
  * 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 PropTypes from 'prop-types';
 export declare const ConditionBuilderItemDate: {
     ({ conditionState, onChange, parentRef, }: {
         conditionState: any;
         onChange: any;
         parentRef: any;
-    }): import("react/jsx-runtime").JSX.Element;
+    }): React.JSX.Element;
     propTypes: {
         /**
          * current condition object

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

@@ -4,6 +4,7 @@
  * 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 PropTypes from 'prop-types';
 import { Condition, PropertyConfigNumber } from '../../ConditionBuilder.types';
 interface ConditionBuilderItemNumberProps {
@@ -12,7 +13,7 @@ interface ConditionBuilderItemNumberProps {
     onChange: (value: string) => void;
 }
 export declare const ConditionBuilderItemNumber: {
-    ({ conditionState, config, onChange, }: ConditionBuilderItemNumberProps): import("react/jsx-runtime").JSX.Element;
+    ({ conditionState, config, onChange, }: ConditionBuilderItemNumberProps): React.JSX.Element;
     propTypes: {
         /**
          * current condition object

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

@@ -4,6 +4,7 @@
  * 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 PropTypes from 'prop-types';
 import { PropertyConfigOption } from '../../ConditionBuilder.types';
 interface ItemOptionProps {
@@ -17,7 +18,7 @@ interface ItemOptionProps {
     onChange: (value: string, e: Event) => void;
 }
 export declare const ItemOption: {
-    ({ conditionState, config, onChange, }: ItemOptionProps): import("react/jsx-runtime").JSX.Element | undefined;
+    ({ conditionState, config, onChange, }: ItemOptionProps): React.JSX.Element | undefined;
     propTypes: {
         /**
          * current condition object

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

@@ -65,6 +65,9 @@ var ItemOption = function ItemOption(_ref) {
       className: "".concat(util.blockClass, "__statement_wrapper")
     }, /*#__PURE__*/React.createElement("div", null, option.text1, " (", option.connector, ")"), /*#__PURE__*/React.createElement("div", null, option.text2));
   };
+  var preventDefault = function preventDefault(evt) {
+    return evt.preventDefault();
+  };
   if (!allOptions) {
     return;
   }
@@ -77,7 +80,8 @@ var ItemOption = function ItemOption(_ref) {
     size: "sm",
     labelText: clearSearchText,
     closeButtonLabelText: clearSearchText,
-    onChange: onSearchChangeHandler
+    onChange: onSearchChangeHandler,
+    onKeyDown: preventDefault
   })), /*#__PURE__*/React.createElement("ul", {
     "aria-label": getAriaLabel(),
     role: "listbox"

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

@@ -4,6 +4,7 @@
  * 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 PropTypes from 'prop-types';
 import { Condition, PropertyConfigOption } from '../../ConditionBuilder.types';
 interface ItemOptionForValueFieldProps {
@@ -14,7 +15,7 @@ interface ItemOptionForValueFieldProps {
     onChange: (value: any, e?: Event) => void;
 }
 export declare const ItemOptionForValueField: {
-    ({ conditionState, config, onChange, }: ItemOptionForValueFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ conditionState, config, onChange, }: ItemOptionForValueFieldProps): React.JSX.Element;
     propTypes: {
         /**
          * current condition object

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

@@ -46,6 +46,7 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
   });
   var selection = Array.isArray(conditionState.value) ? conditionState.value : conditionState.value !== undefined ? [conditionState.value] : [];
   React.useEffect(function () {
+    //this commented code is kept as intentional. Alternate approach to pass async options instead of getOptions callback.
     // if(rest['data-name'] == 'valueField'){
     //   const fetchData = async () => {
     //     const response = await config.options(conditionState);
@@ -134,6 +135,9 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
   var getAriaLabel = function getAriaLabel() {
     return conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : propertyText;
   };
+  var preventDefault = function preventDefault(evt) {
+    return evt.preventDefault();
+  };
   if (!allOptions) {
     return _SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React.createElement(react.SelectSkeleton, null));
   }
@@ -146,7 +150,8 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
     size: "sm",
     labelText: clearSearchText,
     closeButtonLabelText: clearSearchText,
-    onChange: onSearchChangeHandler
+    onChange: onSearchChangeHandler,
+    onKeyDown: preventDefault
   })), multiSelectable && /*#__PURE__*/React.createElement("div", {
     className: "".concat(util.blockClass, "__multiselectSelectionStatusContainer")
   }, /*#__PURE__*/React.createElement("h4", null, /*#__PURE__*/React.createElement("label", null, selection.length, "/", allOptions.length, " Selected")), /*#__PURE__*/React.createElement(react.Button, {

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

@@ -4,6 +4,7 @@
  * 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 PropTypes from 'prop-types';
 import { Condition, PropertyConfigText, PropertyConfigTextArea } from '../../ConditionBuilder.types';
 interface ConditionBuilderItemTextProps {
@@ -13,7 +14,7 @@ interface ConditionBuilderItemTextProps {
     type: 'textarea' | 'text';
 }
 export declare const ConditionBuilderItemText: {
-    ({ conditionState, onChange, config, type, }: ConditionBuilderItemTextProps): import("react/jsx-runtime").JSX.Element;
+    ({ conditionState, onChange, config, type, }: ConditionBuilderItemTextProps): React.JSX.Element;
     propTypes: {
         /**
          * current condition object

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

@@ -4,6 +4,7 @@
  * 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 PropTypes from 'prop-types';
 import { PropertyConfigTime } from '../../ConditionBuilder.types';
 interface ConditionBuilderItemTime {
@@ -11,7 +12,7 @@ interface ConditionBuilderItemTime {
     config: PropertyConfigTime['config'];
 }
 export declare const ConditionBuilderItemTime: {
-    ({ onChange, config, }: ConditionBuilderItemTime): import("react/jsx-runtime").JSX.Element;
+    ({ onChange, config, }: ConditionBuilderItemTime): React.JSX.Element;
     propTypes: {
         /**
          * current config object that this property is part of

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

@@ -4,6 +4,7 @@
  * 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 PropTypes from 'prop-types';
 import { ConditionGroup } from '../ConditionBuilder.types';
 /**
@@ -24,7 +25,7 @@ interface ConditionGroupBuilderProps {
     };
 }
 declare const ConditionGroupBuilder: {
-    ({ group, aria, onRemove, onChange, className, }: ConditionGroupBuilderProps): import("react/jsx-runtime").JSX.Element;
+    ({ group, aria, onRemove, onChange, className, }: ConditionGroupBuilderProps): React.JSX.Element;
     propTypes: {
         /**
          * object contains the aria attributes

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

@@ -4,6 +4,7 @@
  * 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 PropTypes from 'prop-types';
 import { ConditionGroup } from '../ConditionBuilder.types';
 interface ConditionPreviewProps {
@@ -12,7 +13,7 @@ interface ConditionPreviewProps {
     colorIndex?: number;
 }
 declare const ConditionPreview: {
-    ({ previewType, group, colorIndex, }: ConditionPreviewProps): import("react/jsx-runtime").JSX.Element;
+    ({ previewType, group, colorIndex, }: ConditionPreviewProps): React.JSX.Element;
     propTypes: {
         /**
          * index of the color for next group