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

package/es/components/Coachmark/Coachmark.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
 import { useClickOutsideElement, useWindowEvent } from './utils/hooks.js';
 import { COACHMARK_OVERLAY_KIND } from './utils/enums.js';
@@ -39,7 +39,6 @@ var defaults = {
  */
 
 var Coachmark = /*#__PURE__*/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,
@@ -78,11 +77,12 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     targetOffset = _useState8[0],
     setTargetOffset = _useState8[1];
-  var overlayBackupRef = useRef();
-  var backupRef = useRef();
+  var overlayBackupRef = useRef(undefined);
+  var backupRef = useRef(undefined);
   var _coachmarkRef = ref || backupRef;
   var _overlayRef = overlayRef || overlayBackupRef;
   var portalNode = useRef(null);
+  var popoverRef = useRef(null);
   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');
@@ -128,10 +128,6 @@ var Coachmark = /*#__PURE__*/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,
@@ -162,6 +158,19 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
       setIsOpen(true);
     }
   }, [shouldResetPosition]);
+  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 = _objectSpread2({
+        position: 'absolute'
+      }, overlayPositionStyle);
+      Object.assign(popoverRef.current.style, combinedStyle);
+    }
+  }, [popoverRef, positionTune]);
 
   // On unmount:
   // - DO NOT "Close()" the coachmark.
@@ -193,9 +202,7 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
   portalNode === null || portalNode === void 0 ? void 0 : portalNode.current)) : /*#__PURE__*/React__default.createElement(Popover, {
     highContrast: true,
     caret: true,
-    style: _objectSpread2({
-      position: 'absolute'
-    }, overlayPositionStyle),
+    ref: popoverRef,
     align: align,
     autoAlign: autoAlign,
     open: isOpen

package/es/components/Coachmark/CoachmarkOverlay.js

@@ -6,7 +6,7 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef, useState, useRef, useEffect } from 'react';
+import React__default, { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -17,6 +17,7 @@ import { CoachmarkHeader } from './CoachmarkHeader.js';
 import { getOffsetTune } from './utils/constants.js';
 import { useCoachmark } from './utils/context.js';
 import { COACHMARK_OVERLAY_KIND } from './utils/enums.js';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 var _excluded = ["children", "onClose", "fixedIsVisible", "className", "kind", "theme"];
 
@@ -81,26 +82,27 @@ var CoachmarkOverlay = /*#__PURE__*/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 = 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 = 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 = 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;
@@ -139,10 +141,19 @@ var CoachmarkOverlay = /*#__PURE__*/forwardRef(function (_ref, ref) {
     overlay.style.bottom = 'auto';
   }
   var contentId = uuidv4();
+  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__default.createElement("div", _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
   }, getDevtoolsProps(componentName)), isDraggable ? /*#__PURE__*/React__default.createElement(CoachmarkDragbar, {

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

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

package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -60,8 +60,8 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
     _ref$closeButtonLabel = _ref.closeButtonLabel,
     closeButtonLabel = _ref$closeButtonLabel === void 0 ? defaults.closeButtonLabel : _ref$closeButtonLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var buttonFocusRef = useRef();
-  var scrollRef = useRef();
+  var buttonFocusRef = useRef(undefined);
+  var scrollRef = useRef(undefined);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     scrollPosition = _useState2[0],

package/es/components/CoachmarkStack/CoachmarkStack.js

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

package/es/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/es/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/es/components/ConditionBuilder/ConditionBlock/ConditionBlock.js

@@ -25,8 +25,6 @@ import { ItemOptionForValueField } from '../ConditionBuilderItem/ConditionBuilde
 import { useTranslations } from '../utils/useTranslations.js';
 import { useDataConfigs } from '../utils/useDataConfigs.js';
 
-var _div;
-
 /**
  * This component build each block of condition consisting of property, operator value and close button.
  */
@@ -188,9 +186,7 @@ var ConditionBlock = function ConditionBlock(props) {
     onChange: function onChange(op) {
       return onConnectorOperatorChange === null || onConnectorOperatorChange === void 0 ? void 0 : onConnectorOperatorChange(op);
     }
-  }) : _div || (_div = /*#__PURE__*/React__default.createElement("div", {
-    role: "gridcell"
-  })), isStatement && /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+  }) : '', isStatement && /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
     label: group.statement,
     title: conditionText,
     "data-name": "connectorField",
@@ -264,7 +260,8 @@ var ConditionBlock = function ConditionBlock(props) {
     onBlur: handleHideDeletionPreview,
     renderIcon: Close,
     className: "".concat(blockClass, "__close-condition"),
-    "data-name": "closeCondition"
+    "data-name": "closeCondition",
+    wrapperClassName: "".concat(blockClass, "__close-condition-wrapper")
   })), manageActionButtons(conditionIndex, group.conditions) && /*#__PURE__*/React__default.createElement(ConditionBuilderAdd, {
     onClick: function onClick() {
       addConditionHandler === null || addConditionHandler === void 0 || addConditionHandler(conditionIndex);

package/es/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/es/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/es/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/es/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/es/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.js

@@ -53,10 +53,7 @@ var ConditionConnector = function ConditionConnector(_ref) {
     className: "".concat(className, " ").concat(blockClass, "__connector--disabled")
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, {
     label: operator
-  })) :
-  /*#__PURE__*/
-  // <div className={className} {...rest}>
-  React__default.createElement(ConditionBuilderItem, _extends({
+  })) : /*#__PURE__*/React__default.createElement(ConditionBuilderItem, _extends({
     label: operator,
     title: connectorText,
     "data-name": "connectorField",
@@ -76,10 +73,7 @@ var ConditionConnector = function ConditionConnector(_ref) {
       label: connectorText
     },
     onChange: onChangeHandler
-  }))
-
-  // </div>
-  ;
+  }));
 };
 ConditionConnector.propTypes = {
   /**

package/es/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/es/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/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js

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

package/es/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/es/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/es/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/es/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/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js

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

package/es/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/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js

@@ -44,6 +44,7 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
   });
   var selection = Array.isArray(conditionState.value) ? conditionState.value : conditionState.value !== undefined ? [conditionState.value] : [];
   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);
@@ -132,6 +133,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__default.createElement(SelectSkeleton, null));
   }
@@ -144,7 +148,8 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
     size: "sm",
     labelText: clearSearchText,
     closeButtonLabelText: clearSearchText,
-    onChange: onSearchChangeHandler
+    onChange: onSearchChangeHandler,
+    onKeyDown: preventDefault
   })), multiSelectable && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__multiselectSelectionStatusContainer")
   }, /*#__PURE__*/React__default.createElement("h4", null, /*#__PURE__*/React__default.createElement("label", null, selection.length, "/", allOptions.length, " Selected")), /*#__PURE__*/React__default.createElement(Button, {

package/es/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/es/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/es/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/es/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