rsuite 5.67.0 → 5.68.0

package/cjs/Form/hooks/useFormValidate.js

@@ -4,12 +4,15 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = useFormValidate;
-var _extends5 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("react");
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _set = _interopRequireDefault(require("lodash/set"));
 var _hooks = require("../../internals/hooks");
 var _utils = require("../../FormControl/utils");
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function useFormValidate(formError, props) {
   var formValue = props.formValue,
     getCombinedModel = props.getCombinedModel,
@@ -19,6 +22,9 @@ function useFormValidate(formError, props) {
   var _useControlled = (0, _hooks.useControlled)(formError, {}),
     realFormError = _useControlled[0],
     setFormError = _useControlled[1];
+  var checkOptions = {
+    nestedObject: nestedField
+  };
   var realFormErrorRef = (0, _react.useRef)(realFormError);
   realFormErrorRef.current = realFormError;
 
@@ -32,7 +38,7 @@ function useFormValidate(formError, props) {
     var errorCount = 0;
     var model = getCombinedModel();
     Object.keys(model.getSchemaSpec()).forEach(function (key) {
-      var checkResult = model.checkForField(key, formValue || {});
+      var checkResult = model.checkForField(key, formValue || {}, checkOptions);
       if (checkResult.hasError === true) {
         errorCount += 1;
         formError[key] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult;
@@ -47,24 +53,56 @@ function useFormValidate(formError, props) {
     }
     return true;
   });
-
+  var checkFieldForNextValue = (0, _hooks.useEventCallback)(function (fieldName, nextValue, callback) {
+    var model = getCombinedModel();
+    var resultOfCurrentField = model.checkForField(fieldName, nextValue, checkOptions);
+    var nextFormError = (0, _extends2.default)({}, formError);
+    /**
+     * when using proxy of schema-typed, we need to use getCheckResult to get all errors,
+     * but if nestedField is used, it is impossible to distinguish whether the nested object has an error here,
+     * so nestedField does not support proxy here
+     */
+    if (nestedField) {
+      nextFormError = (0, _set.default)(nextFormError, (0, _utils.nameToPath)(fieldName), resultOfCurrentField);
+      setFormError(nextFormError);
+      onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
+      callback === null || callback === void 0 ? void 0 : callback(resultOfCurrentField);
+      if (resultOfCurrentField.hasError) {
+        onError === null || onError === void 0 ? void 0 : onError(nextFormError);
+      }
+      return !resultOfCurrentField.hasError;
+    } else {
+      var allResults = model.getCheckResult();
+      var hasError = false;
+      Object.keys(allResults).forEach(function (key) {
+        var currentResult = allResults[key];
+        if (currentResult.hasError) {
+          nextFormError[key] = currentResult.errorMessage || currentResult;
+          hasError = true;
+        } else {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          var _nextFormError = nextFormError,
+            _ = _nextFormError[key],
+            rest = (0, _objectWithoutPropertiesLoose2.default)(_nextFormError, [key].map(_toPropertyKey));
+          nextFormError = rest;
+        }
+      });
+      setFormError(nextFormError);
+      onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
+      callback === null || callback === void 0 ? void 0 : callback(resultOfCurrentField);
+      if (hasError) {
+        onError === null || onError === void 0 ? void 0 : onError(nextFormError);
+      }
+      return !hasError;
+    }
+  });
   /**
    * Check the data field
    * @param fieldName
    * @param callback
    */
   var checkForField = (0, _hooks.useEventCallback)(function (fieldName, callback) {
-    var _extends2;
-    var model = getCombinedModel();
-    var checkResult = model.checkForField(fieldName, formValue || {});
-    var nextFormError = (0, _extends5.default)({}, formError, (_extends2 = {}, _extends2[fieldName] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult, _extends2));
-    setFormError(nextFormError);
-    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
-    callback === null || callback === void 0 ? void 0 : callback(checkResult);
-    if (checkResult.hasError) {
-      onError === null || onError === void 0 ? void 0 : onError(nextFormError);
-    }
-    return !checkResult.hasError;
+    return checkFieldForNextValue(fieldName, formValue || {}, callback);
   });
 
   /**
@@ -76,7 +114,7 @@ function useFormValidate(formError, props) {
     var model = getCombinedModel();
     Object.keys(model.getSchemaSpec()).forEach(function (key) {
       keys.push(key);
-      promises.push(model.checkForFieldAsync(key, formValue || {}));
+      promises.push(model.checkForFieldAsync(key, formValue || {}, checkOptions));
     });
     return Promise.all(promises).then(function (values) {
       var formError = {};
@@ -98,23 +136,56 @@ function useFormValidate(formError, props) {
       };
     });
   });
+  var checkFieldAsyncForNextValue = (0, _hooks.useEventCallback)(function (fieldName, nextValue) {
+    var model = getCombinedModel();
+    return model.checkForFieldAsync(fieldName, nextValue, checkOptions).then(function (resultOfCurrentField) {
+      var nextFormError = (0, _extends2.default)({}, formError);
+      /**
+       * when using proxy of schema-typed, we need to use getCheckResult to get all errors,
+       * but if nestedField is used, it is impossible to distinguish whether the nested object has an error here,
+       * so nestedField does not support proxy here
+       */
+
+      if (nestedField) {
+        nextFormError = (0, _set.default)(nextFormError, (0, _utils.nameToPath)(fieldName), resultOfCurrentField);
+        onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
+        setFormError(nextFormError);
+        if (resultOfCurrentField.hasError) {
+          onError === null || onError === void 0 ? void 0 : onError(nextFormError);
+        }
+        return resultOfCurrentField;
+      } else {
+        var allResults = model.getCheckResult();
+        var hasError = false;
+        Object.keys(allResults).forEach(function (key) {
+          var currentResult = allResults[key];
+          if (currentResult.hasError) {
+            nextFormError[key] = currentResult.errorMessage || currentResult;
+            hasError = true;
+          } else {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            var _nextFormError2 = nextFormError,
+              _ = _nextFormError2[key],
+              rest = (0, _objectWithoutPropertiesLoose2.default)(_nextFormError2, [key].map(_toPropertyKey));
+            nextFormError = rest;
+          }
+        });
+        setFormError(nextFormError);
+        onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
+        if (hasError) {
+          onError === null || onError === void 0 ? void 0 : onError(nextFormError);
+        }
+        return resultOfCurrentField;
+      }
+    });
+  });
 
   /**
    * Asynchronously check form fields and return Promise
    * @param fieldName
    */
   var checkForFieldAsync = (0, _hooks.useEventCallback)(function (fieldName) {
-    var model = getCombinedModel();
-    return model.checkForFieldAsync(fieldName, formValue || {}).then(function (checkResult) {
-      var _extends3;
-      var nextFormError = (0, _extends5.default)({}, formError, (_extends3 = {}, _extends3[fieldName] = checkResult.errorMessage, _extends3));
-      onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
-      setFormError(nextFormError);
-      if (checkResult.hasError) {
-        onError === null || onError === void 0 ? void 0 : onError(nextFormError);
-      }
-      return checkResult;
-    });
+    return checkFieldAsyncForNextValue(fieldName, formValue || {});
   });
   var onRemoveError = (0, _react.useCallback)(function (name) {
     /**
@@ -127,14 +198,6 @@ function useFormValidate(formError, props) {
     onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
     return formError;
   }, [nestedField, onCheck, setFormError]);
-  var setFieldError = (0, _react.useCallback)(function (fieldName, checkResult) {
-    var _extends4;
-    var nextFormError = nestedField ? (0, _set.default)((0, _extends5.default)({}, formError), (0, _utils.nameToPath)(fieldName), checkResult) : (0, _extends5.default)({}, formError, (_extends4 = {}, _extends4[fieldName] = checkResult, _extends4));
-    setFormError(nextFormError);
-    onError === null || onError === void 0 ? void 0 : onError(nextFormError);
-    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
-    return nextFormError;
-  }, [formError, nestedField, onCheck, onError, setFormError]);
   var cleanErrors = (0, _hooks.useEventCallback)(function () {
     setFormError({});
   });
@@ -151,12 +214,13 @@ function useFormValidate(formError, props) {
     formError: realFormError,
     check: check,
     checkForField: checkForField,
+    checkFieldForNextValue: checkFieldForNextValue,
     checkAsync: checkAsync,
     checkForFieldAsync: checkForFieldAsync,
+    checkFieldAsyncForNextValue: checkFieldAsyncForNextValue,
     cleanErrors: cleanErrors,
     resetErrors: resetErrors,
     cleanErrorForField: cleanErrorForField,
-    setFieldError: setFieldError,
     onRemoveError: onRemoveError
   };
 }

package/cjs/FormControl/FormControl.js

@@ -42,10 +42,9 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     removeFieldValue = _useContext.removeFieldValue,
     removeFieldError = _useContext.removeFieldError,
     onFieldChange = _useContext.onFieldChange,
-    onFieldError = _useContext.onFieldError,
-    onFieldSuccess = _useContext.onFieldSuccess,
-    getCombinedModel = _useContext.getCombinedModel,
-    contextCheckTrigger = _useContext.checkTrigger;
+    contextCheckTrigger = _useContext.checkTrigger,
+    checkFieldForNextValue = _useContext.checkFieldForNextValue,
+    checkFieldAsyncForNextValue = _useContext.checkFieldAsyncForNextValue;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     _props$accepter = props.accepter,
@@ -120,27 +119,12 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   });
   var handleFieldCheck = (0, _hooks.useEventCallback)(function (value) {
-    var callbackEvents = function callbackEvents(checkResult) {
-      if (checkResult.hasError) {
-        var _errorMessage = checkResult.errorMessage;
-        var _fieldError = nestedField ? checkResult : _errorMessage || checkResult;
-        onFieldError === null || onFieldError === void 0 ? void 0 : onFieldError(name, _fieldError);
-      } else {
-        onFieldSuccess === null || onFieldSuccess === void 0 ? void 0 : onFieldSuccess(name);
-      }
-      return checkResult;
-    };
     var nextFormValue = setFieldValue(name, value);
-    var model = getCombinedModel();
-    var checkOptions = {
-      nestedObject: nestedField
-    };
     if (checkAsync) {
-      return model === null || model === void 0 ? void 0 : model.checkForFieldAsync(name, nextFormValue, checkOptions).then(function (checkResult) {
-        return callbackEvents(checkResult);
-      });
+      checkFieldAsyncForNextValue(name, nextFormValue);
+    } else {
+      checkFieldForNextValue(name, nextFormValue);
     }
-    return Promise.resolve(callbackEvents(model === null || model === void 0 ? void 0 : model.checkForField(name, nextFormValue, checkOptions)));
   });
   var fieldHasError = Boolean(fieldError);
 

package/cjs/Nav/AdaptiveNavItem.d.ts

@@ -5,5 +5,5 @@ import { NavItemProps } from './NavItem';
  * When used as direct child of <Nav>, render the NavItem
  * When used within a <Nav.Menu>, render the NavDropdownItem
  */
-declare const AdaptiveNavItem: React.ForwardRefExoticComponent<NavItemProps<string> & React.RefAttributes<any>>;
+declare const AdaptiveNavItem: React.ForwardRefExoticComponent<NavItemProps<string | number> & React.RefAttributes<any>>;
 export default AdaptiveNavItem;

package/cjs/Nav/Nav.d.ts

@@ -4,21 +4,40 @@ import { WithAsProps, RsRefForwardingComponent } from '../internals/types';
 import NavDropdown from './NavDropdown';
 import NavMenu from './NavMenu';
 export interface NavProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
-    /** sets appearance */
-    appearance?: 'default' | 'subtle' | 'tabs';
-    /** Reverse Direction of tabs/subtle */
+    /**
+     * The appearance style of the Nav component.
+     *
+     * @default 'default'
+     * @version 'pills' is supported in version 5.68.0
+     */
+    appearance?: 'default' | 'subtle' | 'tabs' | 'pills';
+    /**
+     * Whether the Nav component is reversed.
+     */
     reversed?: boolean;
-    /** Justified navigation */
+    /**
+     * Whether the Nav component is justified.
+     */
     justified?: boolean;
-    /** Vertical navigation */
+    /**
+     * Whether the Nav component is vertical.
+     */
     vertical?: boolean;
-    /** appears on the right. */
+    /**
+     * Whether the Nav component is pulled to the right.
+     */
     pullRight?: boolean;
-    /** Active key, corresponding to eventkey in <Nav.item>. */
+    /**
+     * The active key of the Nav component.
+     */
     activeKey?: T;
-    /** Default active key, corresponding to eventkey in <Nav.item>. */
+    /**
+     * The default active key of the Nav component.
+     */
     defaultActiveKey?: T;
-    /** Callback function triggered after selection */
+    /**
+     * Event handler for selecting a Nav item.
+     */
     onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
 }
 interface NavComponent extends RsRefForwardingComponent<'div', NavProps> {

package/cjs/Nav/Nav.js

@@ -124,7 +124,7 @@ Nav.propTypes = {
   classPrefix: _propTypes.default.string,
   className: _propTypes.default.string,
   children: _propTypes.default.node,
-  appearance: (0, _propTypes2.oneOf)(['default', 'subtle', 'tabs']),
+  appearance: (0, _propTypes2.oneOf)(['default', 'subtle', 'tabs', 'pills']),
   // Reverse Direction of tabs/subtle
   reversed: _propTypes.default.bool,
   justified: _propTypes.default.bool,

package/cjs/Nav/NavContext.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export interface NavContextProps {
-    activeKey: string | undefined;
-    onSelect?: (eventKey: string | undefined, event: React.SyntheticEvent) => void;
+    activeKey: string | number | undefined;
+    onSelect?: (eventKey: string | number | undefined, event: React.SyntheticEvent) => void;
 }
 declare const NavContext: React.Context<NavContextProps | null>;
 export default NavContext;

package/cjs/Nav/NavItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { RsRefForwardingComponent, WithAsProps } from '../internals/types';
 import { IconProps } from '@rsuite/icons/lib/Icon';
-export interface NavItemProps<T = string> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+export interface NavItemProps<T = string | number> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
     /** Activation status */
     active?: boolean;
     /** Disabled status */

package/cjs/Navbar/NavbarItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconProps } from '@rsuite/icons/lib/Icon';
 import { RsRefForwardingComponent, WithAsProps } from '../internals/types';
-export interface NavbarItemProps<T = string> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+export interface NavbarItemProps<T = string | number> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
     /** Activation status */
     active?: boolean;
     /** Disabled status */

package/cjs/Sidenav/Sidenav.d.ts

@@ -3,7 +3,7 @@ import SidenavBody from './SidenavBody';
 import SidenavHeader from './SidenavHeader';
 import SidenavToggle from './SidenavToggle';
 import { WithAsProps, RsRefForwardingComponent } from '../internals/types';
-export interface SidenavProps<T = string> extends WithAsProps {
+export interface SidenavProps<T = string | number> extends WithAsProps {
     /** Whether to expand the Sidenav */
     expanded?: boolean;
     /** Menu style */
@@ -25,8 +25,8 @@ export interface SidenavProps<T = string> extends WithAsProps {
      */
     onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
 }
-export declare const SidenavContext: React.Context<SidenavContextType<string> | null>;
-export interface SidenavContextType<T = string> {
+export declare const SidenavContext: React.Context<SidenavContextType<string | number> | null>;
+export interface SidenavContextType<T = string | number> {
     openKeys: T[];
     /**
      * @deprecated Use activeKey from NavContext instead

package/cjs/Tabs/Tabs.d.ts

@@ -1,41 +1,44 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../internals/types';
 import Tab from './Tab';
+/**
+ * Props for the Tabs component.
+ */
 export interface TabsProps extends WithAsProps {
     /**
-     * The tabs appearance style.
+     * The appearance of the tabs.
+     * @default 'tabs'
+     * @version 'pills' is supported in version 5.68.0
      */
-    appearance?: 'tabs' | 'subtle';
+    appearance?: 'tabs' | 'subtle' | 'pills';
     /**
-     * Mark the Tab with a matching `eventKey` as active.
+     * The key of the active tab.
      */
-    activeKey?: string;
+    activeKey?: string | number;
     /**
-     * The default active tabKey.
+     * The default key of the active tab.
      */
-    defaultActiveKey?: string;
+    defaultActiveKey?: string | number;
     /**
-     * Reversed display.
-     * @default false
+     * Whether to reverse the order of the tabs.
      */
     reversed?: boolean;
     /**
-     * Vertical display.
-     * @default false
+     * Whether to display the tabs vertically.
      */
     vertical?: boolean;
     /**
-     * The HTML id attribute, which should be unique.
-     * @default use generated id
+     * The ID of the tabs.
+     * @default A unique ID is automatically generated.
      */
     id?: string;
     /**
-     * Callback fired when a Tab is selected.
-     * @param eventKey
-     * @param event
-     * @returns
+     * Callback function that is called when a tab is selected.
+     *
+     * @param eventKey - The key of the selected tab.
+     * @param event - The event object.
      */
-    onSelect?: (eventKey: string | undefined, event: React.SyntheticEvent) => void;
+    onSelect?: (eventKey: string | number | undefined, event: React.SyntheticEvent) => void;
 }
 interface TabsComponent extends RsRefForwardingComponent<'div', TabsProps> {
     Tab: typeof Tab;

package/cjs/Tabs/Tabs.js

@@ -16,6 +16,10 @@ var _Tab = _interopRequireDefault(require("./Tab"));
 var _TabPanel = _interopRequireDefault(require("./TabPanel"));
 var _templateObject;
 var _excluded = ["as", "classPrefix", "appearance", "className", "children", "activeKey", "defaultActiveKey", "id", "reversed", "vertical", "onSelect"];
+/**
+ * Props for the Tabs component.
+ */
+
 function getFocusableTabs(tablist) {
   var tabs = tablist === null || tablist === void 0 ? void 0 : tablist.querySelectorAll('[role=tab]');
   return Array.from(tabs).filter(function (tab) {
@@ -208,7 +212,7 @@ var Tabs = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 Tabs.Tab = _Tab.default;
 Tabs.displayName = 'Tabs';
 Tabs.propTypes = {
-  appearance: _propTypes.default.oneOf(['tabs', 'subtle']),
+  appearance: _propTypes.default.oneOf(['tabs', 'subtle', 'pills']),
   activeKey: _propTypes.default.any,
   defaultActiveKey: _propTypes.default.any,
   reversed: _propTypes.default.bool,

package/cjs/internals/Overlay/OverlayTrigger.d.ts

@@ -31,7 +31,7 @@ export interface OverlayTriggerProps extends Omit<StandardProps, 'children'>, An
     /** Whether mouse is allowed to enter the floating layer of popover, whose default value is false. */
     enterable?: boolean;
     /** For the monitored component, the event will be bound to this component. */
-    children: React.ReactElement | ((props: any, ref: any) => React.ReactElement);
+    children: React.ReactNode | ((props: any, ref: any) => React.ReactElement);
     /** Whether to allow clicking document to close the overlay */
     rootClose?: boolean;
     /** Once disabled, the event cannot be triggered. */
@@ -73,7 +73,7 @@ export declare enum OverlayCloseCause {
     ImperativeHandle = 1
 }
 export interface OverlayTriggerHandle {
-    root: HTMLElement | undefined;
+    root?: HTMLElement | null;
     updatePosition: () => void;
     open: (delay?: number) => void;
     close: (delay?: number) => void;

package/cjs/internals/Overlay/OverlayTrigger.js

@@ -14,6 +14,7 @@ var _contains = _interopRequireDefault(require("dom-lib/contains"));
 var _Overlay = _interopRequireDefault(require("./Overlay"));
 var _hooks = require("../hooks");
 var _utils = require("../utils");
+var _ReactChildren = require("../utils/ReactChildren");
 var _OverlayContext = _interopRequireDefault(require("./OverlayContext"));
 var _excluded = ["children", "container", "controlId", "defaultOpen", "trigger", "disabled", "followCursor", "readOnly", "plaintext", "open", "delay", "delayOpen", "delayClose", "enterable", "placement", "speaker", "rootClose", "onClick", "onMouseOver", "onMouseMove", "onMouseOut", "onContextMenu", "onFocus", "onBlur", "onOpen", "onClose", "onExited"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -104,7 +105,7 @@ var OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     }),
     Portal = _usePortal.Portal,
     containerElement = _usePortal.target;
-  var triggerRef = (0, _react.useRef)();
+  var triggerRef = (0, _react.useRef)(null);
   var overlayRef = (0, _react.useRef)();
   var _useControlled = (0, _hooks.useControlled)(openProp, defaultOpen),
     open = _useControlled[0],
@@ -367,13 +368,21 @@ var OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       }), ref);
     } : speaker);
   };
-  if (typeof children === 'object' && children.type === _react.default.Fragment || typeof children === 'string') {
-    console.error('[rsuite] The OverlayTrigger component does not accept strings or Fragments as child.');
-  }
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof children === 'function' ? children(triggerEvents, triggerRef) : /*#__PURE__*/_react.default.cloneElement(children, (0, _extends2.default)({
-    ref: triggerRef,
-    'aria-describedby': controlId
-  }, mergeEvents(triggerEvents, children.props))), /*#__PURE__*/_react.default.createElement(Portal, null, renderOverlay()));
+  var triggerElement = (0, _react.useMemo)(function () {
+    if (typeof children === 'function') {
+      return children(triggerEvents, triggerRef);
+    } else if ((0, _ReactChildren.isFragment)(children) || ! /*#__PURE__*/(0, _react.isValidElement)(children)) {
+      return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+        ref: triggerRef,
+        "aria-describedby": controlId
+      }, triggerEvents), children);
+    }
+    return /*#__PURE__*/(0, _react.cloneElement)(children, (0, _extends2.default)({
+      ref: triggerRef,
+      'aria-describedby': controlId
+    }, mergeEvents(triggerEvents, children.props)));
+  }, [children, controlId, triggerEvents]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, triggerElement, /*#__PURE__*/_react.default.createElement(Portal, null, renderOverlay()));
 });
 OverlayTrigger.displayName = 'OverlayTrigger';
 var _default = exports.default = OverlayTrigger;

package/cjs/internals/utils/BrowserDetection.js

@@ -45,6 +45,12 @@ var getSafariVersion = exports.getSafariVersion = function getSafariVersion() {
  * @see https://caniuse.com/flexbox-gap
  */
 var isSupportFlexGap = exports.isSupportFlexGap = function isSupportFlexGap() {
+  // Check if the browser supports the `gap` property
+  if (typeof CSS !== 'undefined' && typeof CSS.supports !== 'undefined') {
+    return CSS.supports('(gap: 1px)');
+  }
+
+  // IE does not support flex-gap
   if (isIE()) {
     return false;
   }

package/cjs/internals/utils/ReactChildren.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
+/**
+ * Checks if the given children is a React fragment.
+ * @param children - The children to check.
+ * @returns True if the children is a React fragment, false otherwise.
+ */
+export declare function isFragment(children: React.ReactNode): boolean;
 /**
  * Finds the first child that satisfies the given condition.
  * @param children - The children to search.

package/cjs/internals/utils/ReactChildren.js

@@ -7,6 +7,7 @@ exports.ReactChildren = void 0;
 exports.count = count;
 exports.default = void 0;
 exports.find = find;
+exports.isFragment = isFragment;
 exports.map = map;
 exports.mapCloneElement = mapCloneElement;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));