rsuite 5.73.0 → 5.74.0-beta.0

package/esm/Dropdown/Dropdown.js

@@ -1,10 +1,9 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["activeKey", "onSelect"],
-  _excluded2 = ["as", "title", "onClose", "onOpen", "onToggle", "trigger", "placement", "toggleAs", "toggleClassName", "open", "defaultOpen", "classPrefix", "className", "disabled", "children", "menuStyle", "style"],
-  _excluded3 = ["open"],
-  _excluded4 = ["open"];
+var _excluded = ["as", "activeKey", "title", "trigger", "placement", "toggleAs", "toggleClassName", "open", "defaultOpen", "classPrefix", "className", "disabled", "children", "menuStyle", "style", "onClose", "onOpen", "onToggle", "onSelect"],
+  _excluded2 = ["open"],
+  _excluded3 = ["open"];
 import React, { useContext, useMemo, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
@@ -14,13 +13,14 @@ import { PLACEMENT_8 } from "../internals/constants/index.js";
 import { useClassNames } from "../internals/hooks/index.js";
 import { mergeRefs, placementPolyfill, warnOnce } from "../internals/utils/index.js";
 import { deprecatePropType, oneOf } from "../internals/propTypes/index.js";
+import { initialState, reducer } from "./DropdownState.js";
+import { useCustom } from "../CustomProvider/index.js";
 import DropdownItem from "./DropdownItem.js";
 import DropdownContext from "./DropdownContext.js";
 import Menu from "../internals/Menu/Menu.js";
 import DropdownToggle from "./DropdownToggle.js";
 import kebabCase from 'lodash/kebabCase';
 import NavContext from "../Nav/NavContext.js";
-import { initialState, reducer } from "./DropdownState.js";
 import Nav from "../Nav/index.js";
 import DropdownSeparator from "./DropdownSeparator.js";
 /**
@@ -32,31 +32,32 @@ import DropdownSeparator from "./DropdownSeparator.js";
  * - Otherwise renders a `<MenuRoot>`
  */
 var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var activeKey = props.activeKey,
-    onSelect = props.onSelect,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
-  var _rest$as = rest.as,
-    Component = _rest$as === void 0 ? 'div' : _rest$as,
-    title = rest.title,
-    onClose = rest.onClose,
-    onOpen = rest.onOpen,
-    onToggle = rest.onToggle,
-    _rest$trigger = rest.trigger,
-    trigger = _rest$trigger === void 0 ? 'click' : _rest$trigger,
-    _rest$placement = rest.placement,
-    placement = _rest$placement === void 0 ? 'bottomStart' : _rest$placement,
-    toggleAs = rest.toggleAs,
-    toggleClassName = rest.toggleClassName,
-    open = rest.open,
-    defaultOpen = rest.defaultOpen,
-    _rest$classPrefix = rest.classPrefix,
-    classPrefix = _rest$classPrefix === void 0 ? 'dropdown' : _rest$classPrefix,
-    className = rest.className,
-    disabled = rest.disabled,
-    children = rest.children,
-    menuStyle = rest.menuStyle,
-    style = rest.style,
-    toggleProps = _objectWithoutPropertiesLoose(rest, _excluded2);
+  var _useCustom = useCustom('Dropdown', props),
+    propsWithDefaults = _useCustom.propsWithDefaults;
+  var _propsWithDefaults$as = propsWithDefaults.as,
+    Component = _propsWithDefaults$as === void 0 ? 'div' : _propsWithDefaults$as,
+    activeKey = propsWithDefaults.activeKey,
+    title = propsWithDefaults.title,
+    _propsWithDefaults$tr = propsWithDefaults.trigger,
+    trigger = _propsWithDefaults$tr === void 0 ? 'click' : _propsWithDefaults$tr,
+    _propsWithDefaults$pl = propsWithDefaults.placement,
+    placement = _propsWithDefaults$pl === void 0 ? 'bottomStart' : _propsWithDefaults$pl,
+    toggleAs = propsWithDefaults.toggleAs,
+    toggleClassName = propsWithDefaults.toggleClassName,
+    open = propsWithDefaults.open,
+    defaultOpen = propsWithDefaults.defaultOpen,
+    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
+    classPrefix = _propsWithDefaults$cl === void 0 ? 'dropdown' : _propsWithDefaults$cl,
+    className = propsWithDefaults.className,
+    disabled = propsWithDefaults.disabled,
+    children = propsWithDefaults.children,
+    menuStyle = propsWithDefaults.menuStyle,
+    style = propsWithDefaults.style,
+    onClose = propsWithDefaults.onClose,
+    onOpen = propsWithDefaults.onOpen,
+    onToggle = propsWithDefaults.onToggle,
+    onSelect = propsWithDefaults.onSelect,
+    toggleProps = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
   var nav = useContext(NavContext);
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
@@ -125,7 +126,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     openMenuOn: menuButtonTriggers,
     renderMenuPopup: function renderMenuPopup(_ref, popupRef) {
       var open = _ref.open,
-        popupProps = _objectWithoutPropertiesLoose(_ref, _excluded3);
+        popupProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
       var menuClassName = mergeMenuClassName(className, withMenuClassPrefix({}));
       return /*#__PURE__*/React.createElement("ul", _extends({
         ref: popupRef,
@@ -145,7 +146,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, function (_ref2, menuContainerRef) {
     var _withClassPrefix;
     var open = _ref2.open,
-      menuContainer = _objectWithoutPropertiesLoose(_ref2, _excluded4);
+      menuContainer = _objectWithoutPropertiesLoose(_ref2, _excluded3);
     var classes = merge(className, withClassPrefix((_withClassPrefix = {}, _withClassPrefix["placement-" + kebabCase(placementPolyfill(placement))] = !!placement, _withClassPrefix.disabled = disabled, _withClassPrefix.open = open, _withClassPrefix['selected-within'] = hasSelectedItem, _withClassPrefix)));
     return /*#__PURE__*/React.createElement(Component, _extends({
       ref: mergeRefs(ref, menuContainerRef),

package/esm/Dropdown/DropdownMenu.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { StandardProps } from '../internals/types';
-import { IconProps } from '@rsuite/icons/Icon';
+import type { StandardProps } from '../internals/types';
+import type { IconProps } from '@rsuite/icons/Icon';
 export interface DropdownMenuProps<T = string> extends StandardProps {
     /** Define the title as a submenu */
     title?: React.ReactNode;

package/esm/Dropdown/DropdownMenu.js

@@ -10,19 +10,20 @@ var _excluded = ["onToggle", "eventKey", "title", "activeKey", "onSelect", "clas
   _excluded5 = ["open"],
   _excluded6 = ["open"];
 import React, { useCallback, useContext, useMemo } from 'react';
+import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
 import Menu from "../internals/Menu/Menu.js";
 import MenuItem from "../internals/Menu/MenuItem.js";
 import Menubar from "../internals/Menu/Menubar.js";
-import { oneOf } from "../internals/propTypes/index.js";
-import { useClassNames, useCustom } from "../internals/hooks/index.js";
-import { mergeRefs, warnOnce } from "../internals/utils/index.js";
-import PropTypes from 'prop-types';
 import PagePreviousIcon from '@rsuite/icons/PagePrevious';
 import PageNextIcon from '@rsuite/icons/PageNext';
 import DropdownContext from "./DropdownContext.js";
 import Nav from "../Nav/index.js";
 import NavContext from "../Nav/NavContext.js";
+import { oneOf } from "../internals/propTypes/index.js";
+import { useClassNames } from "../internals/hooks/index.js";
+import { useCustom } from "../CustomProvider/index.js";
+import { mergeRefs, warnOnce } from "../internals/utils/index.js";
 /**
  * The `<Dropdown.Menu>` API
  *
@@ -54,7 +55,7 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
     rest = _objectWithoutPropertiesLoose(props, _excluded);
   var nav = useContext(NavContext);
   var dropdown = useContext(DropdownContext);
-  var _useCustom = useCustom('DropdownMenu'),
+  var _useCustom = useCustom(),
     rtl = _useCustom.rtl;
   var handleToggleSubmenu = useCallback(function (_, event) {
     onToggle === null || onToggle === void 0 ? void 0 : onToggle(eventKey, event);

package/esm/FlexboxGrid/FlexboxGrid.js

@@ -4,24 +4,27 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _excluded = ["as", "className", "classPrefix", "align", "justify"];
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useClassNames } from "../internals/hooks/index.js";
 import FlexboxGridItem from "./FlexboxGridItem.js";
+import { useClassNames } from "../internals/hooks/index.js";
 import { oneOf } from "../internals/propTypes/index.js";
+import { useCustom } from "../CustomProvider/index.js";
 /**
  * The FlexboxGrid component is a box that can be used to layout other components.
  * @see https://rsuitejs.com/components/flexbox-grid
  */
 var FlexboxGrid = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$as = props.as,
-    Component = _props$as === void 0 ? 'div' : _props$as,
-    className = props.className,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'flex-box-grid' : _props$classPrefix,
-    _props$align = props.align,
-    align = _props$align === void 0 ? 'top' : _props$align,
-    _props$justify = props.justify,
-    justify = _props$justify === void 0 ? 'start' : _props$justify,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  var _useCustom = useCustom('FlexboxGrid', props),
+    propsWithDefaults = _useCustom.propsWithDefaults;
+  var _propsWithDefaults$as = propsWithDefaults.as,
+    Component = _propsWithDefaults$as === void 0 ? 'div' : _propsWithDefaults$as,
+    className = propsWithDefaults.className,
+    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
+    classPrefix = _propsWithDefaults$cl === void 0 ? 'flex-box-grid' : _propsWithDefaults$cl,
+    _propsWithDefaults$al = propsWithDefaults.align,
+    align = _propsWithDefaults$al === void 0 ? 'top' : _propsWithDefaults$al,
+    _propsWithDefaults$ju = propsWithDefaults.justify,
+    justify = _propsWithDefaults$ju === void 0 ? 'start' : _propsWithDefaults$ju,
+    rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     withClassPrefix = _useClassNames.withClassPrefix;

package/esm/Form/Form.js

@@ -5,7 +5,6 @@ var _excluded = ["checkTrigger", "classPrefix", "errorFromContext", "formDefault
 import React from 'react';
 import PropTypes from 'prop-types';
 import { SchemaModel } from 'schema-typed';
-import { FormValueProvider, FormProvider } from "./FormContext.js";
 import FormControl from "../FormControl/index.js";
 import FormControlLabel from "../FormControlLabel/index.js";
 import FormErrorMessage from "../FormErrorMessage/index.js";
@@ -13,6 +12,8 @@ import FormGroup from "../FormGroup/index.js";
 import FormHelpText from "../FormHelpText/index.js";
 import { useEventCallback } from "../internals/hooks/index.js";
 import { oneOf } from "../internals/propTypes/index.js";
+import { FormValueProvider, FormProvider } from "./FormContext.js";
+import { useCustom } from "../CustomProvider/index.js";
 import useSchemaModel from "./hooks/useSchemaModel.js";
 import useFormValidate from "./hooks/useFormValidate.js";
 import useFormValue from "./hooks/useFormValue.js";
@@ -25,34 +26,36 @@ var defaultSchema = SchemaModel({});
  * @see https://rsuitejs.com/components/form
  */
 var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$checkTrigger = props.checkTrigger,
-    checkTrigger = _props$checkTrigger === void 0 ? 'change' : _props$checkTrigger,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'form' : _props$classPrefix,
-    _props$errorFromConte = props.errorFromContext,
-    errorFromContext = _props$errorFromConte === void 0 ? true : _props$errorFromConte,
-    _props$formDefaultVal = props.formDefaultValue,
-    formDefaultValue = _props$formDefaultVal === void 0 ? {} : _props$formDefaultVal,
-    controlledFormValue = props.formValue,
-    controlledFormError = props.formError,
-    fluid = props.fluid,
-    _props$nestedField = props.nestedField,
-    nestedField = _props$nestedField === void 0 ? false : _props$nestedField,
-    _props$layout = props.layout,
-    layout = _props$layout === void 0 ? 'vertical' : _props$layout,
-    _props$model = props.model,
-    formModel = _props$model === void 0 ? defaultSchema : _props$model,
-    readOnly = props.readOnly,
-    plaintext = props.plaintext,
-    className = props.className,
-    children = props.children,
-    disabled = props.disabled,
-    onSubmit = props.onSubmit,
-    onReset = props.onReset,
-    onCheck = props.onCheck,
-    onError = props.onError,
-    onChange = props.onChange,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  var _useCustom = useCustom('Form', props),
+    propsWithDefaults = _useCustom.propsWithDefaults;
+  var _propsWithDefaults$ch = propsWithDefaults.checkTrigger,
+    checkTrigger = _propsWithDefaults$ch === void 0 ? 'change' : _propsWithDefaults$ch,
+    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
+    classPrefix = _propsWithDefaults$cl === void 0 ? 'form' : _propsWithDefaults$cl,
+    _propsWithDefaults$er = propsWithDefaults.errorFromContext,
+    errorFromContext = _propsWithDefaults$er === void 0 ? true : _propsWithDefaults$er,
+    _propsWithDefaults$fo = propsWithDefaults.formDefaultValue,
+    formDefaultValue = _propsWithDefaults$fo === void 0 ? {} : _propsWithDefaults$fo,
+    controlledFormValue = propsWithDefaults.formValue,
+    controlledFormError = propsWithDefaults.formError,
+    fluid = propsWithDefaults.fluid,
+    _propsWithDefaults$ne = propsWithDefaults.nestedField,
+    nestedField = _propsWithDefaults$ne === void 0 ? false : _propsWithDefaults$ne,
+    _propsWithDefaults$la = propsWithDefaults.layout,
+    layout = _propsWithDefaults$la === void 0 ? 'vertical' : _propsWithDefaults$la,
+    _propsWithDefaults$mo = propsWithDefaults.model,
+    formModel = _propsWithDefaults$mo === void 0 ? defaultSchema : _propsWithDefaults$mo,
+    readOnly = propsWithDefaults.readOnly,
+    plaintext = propsWithDefaults.plaintext,
+    className = propsWithDefaults.className,
+    children = propsWithDefaults.children,
+    disabled = propsWithDefaults.disabled,
+    onSubmit = propsWithDefaults.onSubmit,
+    onReset = propsWithDefaults.onReset,
+    onCheck = propsWithDefaults.onCheck,
+    onError = propsWithDefaults.onError,
+    onChange = propsWithDefaults.onChange,
+    rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
   var _useSchemaModel = useSchemaModel(formModel, nestedField),
     getCombinedModel = _useSchemaModel.getCombinedModel,
     pushFieldRule = _useSchemaModel.pushFieldRule,

package/esm/FormControl/FormControl.js

@@ -8,14 +8,15 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import Input from "../Input/index.js";
 import FormErrorMessage from "../FormErrorMessage/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
 import FormContext, { FormValueContext } from "../Form/FormContext.js";
-import { useFormGroup } from "../FormGroup/index.js";
-import { useWillUnmount, useEventCallback } from "../internals/hooks/index.js";
-import { oneOf } from "../internals/propTypes/index.js";
 import useRegisterModel from "./hooks/useRegisterModel.js";
 import useField from "./hooks/useField.js";
 import Toggle from "../Toggle/index.js";
+import { useClassNames } from "../internals/hooks/index.js";
+import { useFormGroup } from "../FormGroup/index.js";
+import { useWillUnmount, useEventCallback } from "../internals/hooks/index.js";
+import { oneOf } from "../internals/propTypes/index.js";
+import { useCustom } from "../CustomProvider/index.js";
 
 /**
  * Props that FormControl passes to its accepter
@@ -27,6 +28,8 @@ import Toggle from "../Toggle/index.js";
  */
 var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _accepterProps;
+  var _useCustom = useCustom('FormControl', props),
+    propsWithDefaults = _useCustom.propsWithDefaults;
   var _useContext = useContext(FormContext),
     readOnlyContext = _useContext.readOnly,
     plaintextContext = _useContext.plaintext,
@@ -40,33 +43,33 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
     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,
-    AccepterComponent = _props$accepter === void 0 ? Input : _props$accepter,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'form-control' : _props$classPrefix,
-    checkAsync = props.checkAsync,
-    checkTrigger = props.checkTrigger,
-    _props$errorPlacement = props.errorPlacement,
-    errorPlacement = _props$errorPlacement === void 0 ? 'bottomStart' : _props$errorPlacement,
-    errorMessage = props.errorMessage,
-    name = props.name,
-    value = props.value,
-    _props$readOnly = props.readOnly,
-    readOnly = _props$readOnly === void 0 ? readOnlyContext : _props$readOnly,
-    _props$plaintext = props.plaintext,
-    plaintext = _props$plaintext === void 0 ? plaintextContext : _props$plaintext,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? disabledContext : _props$disabled,
-    onChange = props.onChange,
-    onBlur = props.onBlur,
-    defaultValue = props.defaultValue,
-    _props$shouldResetWit = props.shouldResetWithUnmount,
-    shouldResetWithUnmount = _props$shouldResetWit === void 0 ? false : _props$shouldResetWit,
-    rule = props.rule,
-    id = props.id,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  var _propsWithDefaults$as = propsWithDefaults.as,
+    Component = _propsWithDefaults$as === void 0 ? 'div' : _propsWithDefaults$as,
+    _propsWithDefaults$ac = propsWithDefaults.accepter,
+    AccepterComponent = _propsWithDefaults$ac === void 0 ? Input : _propsWithDefaults$ac,
+    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
+    classPrefix = _propsWithDefaults$cl === void 0 ? 'form-control' : _propsWithDefaults$cl,
+    checkAsync = propsWithDefaults.checkAsync,
+    checkTrigger = propsWithDefaults.checkTrigger,
+    _propsWithDefaults$er = propsWithDefaults.errorPlacement,
+    errorPlacement = _propsWithDefaults$er === void 0 ? 'bottomStart' : _propsWithDefaults$er,
+    errorMessage = propsWithDefaults.errorMessage,
+    name = propsWithDefaults.name,
+    value = propsWithDefaults.value,
+    _propsWithDefaults$re = propsWithDefaults.readOnly,
+    readOnly = _propsWithDefaults$re === void 0 ? readOnlyContext : _propsWithDefaults$re,
+    _propsWithDefaults$pl = propsWithDefaults.plaintext,
+    plaintext = _propsWithDefaults$pl === void 0 ? plaintextContext : _propsWithDefaults$pl,
+    _propsWithDefaults$di = propsWithDefaults.disabled,
+    disabled = _propsWithDefaults$di === void 0 ? disabledContext : _propsWithDefaults$di,
+    onChange = propsWithDefaults.onChange,
+    onBlur = propsWithDefaults.onBlur,
+    defaultValue = propsWithDefaults.defaultValue,
+    _propsWithDefaults$sh = propsWithDefaults.shouldResetWithUnmount,
+    shouldResetWithUnmount = _propsWithDefaults$sh === void 0 ? false : _propsWithDefaults$sh,
+    rule = propsWithDefaults.rule,
+    id = propsWithDefaults.id,
+    rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
   var _useFormGroup = useFormGroup(id),
     controlId = _useFormGroup.controlId,
     helpTextId = _useFormGroup.helpTextId,

package/esm/FormControl/hooks/useField.js

@@ -1,6 +1,6 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { useCallback, useMemo } from 'react';
+import { isValidElement, useCallback, useMemo } from 'react';
 import get from 'lodash/get';
 import set from 'lodash/set';
 import { nameToPath } from "../utils.js";
@@ -17,6 +17,9 @@ function getErrorMessage(error) {
   if (error !== null && error !== void 0 && error.array && ((_error$array = error.array) === null || _error$array === void 0 ? void 0 : _error$array.length) > 0) {
     return error.array[0].errorMessage;
   }
+  if ( /*#__PURE__*/isValidElement(error)) {
+    return error;
+  }
   return error === null || error === void 0 ? void 0 : error.errorMessage;
 }
 function useField(props) {

package/esm/FormControlLabel/FormControlLabel.js

@@ -6,24 +6,27 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames } from "../internals/hooks/index.js";
 import { useFormGroup } from "../FormGroup/index.js";
+import { useCustom } from "../CustomProvider/index.js";
 /**
  * The `<Form.ControlLabel>` component renders a label with required indicator, for form controls.
  * @see https://rsuitejs.com/components/form/
  */
 var FormControlLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useCustom = useCustom('FormControlLabel', props),
+    propsWithDefaults = _useCustom.propsWithDefaults;
   var _useFormGroup = useFormGroup(),
     labelId = _useFormGroup.labelId,
     controlId = _useFormGroup.controlId;
-  var _props$as = props.as,
-    Component = _props$as === void 0 ? 'label' : _props$as,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'form-control-label' : _props$classPrefix,
-    _props$htmlFor = props.htmlFor,
-    htmlFor = _props$htmlFor === void 0 ? controlId : _props$htmlFor,
-    className = props.className,
-    _props$id = props.id,
-    id = _props$id === void 0 ? labelId : _props$id,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  var _propsWithDefaults$as = propsWithDefaults.as,
+    Component = _propsWithDefaults$as === void 0 ? 'label' : _propsWithDefaults$as,
+    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
+    classPrefix = _propsWithDefaults$cl === void 0 ? 'form-control-label' : _propsWithDefaults$cl,
+    _propsWithDefaults$ht = propsWithDefaults.htmlFor,
+    htmlFor = _propsWithDefaults$ht === void 0 ? controlId : _propsWithDefaults$ht,
+    className = propsWithDefaults.className,
+    _propsWithDefaults$id = propsWithDefaults.id,
+    id = _propsWithDefaults$id === void 0 ? labelId : _propsWithDefaults$id,
+    rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;

package/esm/FormErrorMessage/FormErrorMessage.js

@@ -10,21 +10,24 @@ import kebabCase from 'lodash/kebabCase';
 import { useClassNames } from "../internals/hooks/index.js";
 import { placementPolyfill } from "../internals/utils/index.js";
 import { oneOf } from "../internals/propTypes/index.js";
+import { useCustom } from "../CustomProvider/index.js";
 /**
  * The `<Form.ErrorMessage>` component is used to display error messages in the form.
  * @see https://rsuitejs.com/components/form/
  */
 var FormErrorMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _prefix;
-  var _props$as = props.as,
-    Component = _props$as === void 0 ? 'div' : _props$as,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'form-error-message' : _props$classPrefix,
-    className = props.className,
-    show = props.show,
-    children = props.children,
-    placement = props.placement,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  var _useCustom = useCustom('FormErrorMessage', props),
+    propsWithDefaults = _useCustom.propsWithDefaults;
+  var _propsWithDefaults$as = propsWithDefaults.as,
+    Component = _propsWithDefaults$as === void 0 ? 'div' : _propsWithDefaults$as,
+    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
+    classPrefix = _propsWithDefaults$cl === void 0 ? 'form-error-message' : _propsWithDefaults$cl,
+    className = propsWithDefaults.className,
+    show = propsWithDefaults.show,
+    children = propsWithDefaults.children,
+    placement = propsWithDefaults.placement,
+    rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix,

package/esm/FormGroup/FormGroup.js

@@ -5,6 +5,7 @@ var _excluded = ["as", "classPrefix", "controlId", "className"];
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames, useUniqueId } from "../internals/hooks/index.js";
+import { useCustom } from "../CustomProvider/index.js";
 var FormGroupContext = /*#__PURE__*/React.createContext({});
 export var useFormGroup = function useFormGroup(controlId) {
   var context = React.useContext(FormGroupContext);
@@ -38,13 +39,15 @@ export var useFormGroup = function useFormGroup(controlId) {
  * @see https://rsuitejs.com/components/form/
  */
 var FormGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$as = props.as,
-    Component = _props$as === void 0 ? 'div' : _props$as,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'form-group' : _props$classPrefix,
-    controlIdProp = props.controlId,
-    className = props.className,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  var _useCustom = useCustom('FormGroup', props),
+    propsWithDefaults = _useCustom.propsWithDefaults;
+  var _propsWithDefaults$as = propsWithDefaults.as,
+    Component = _propsWithDefaults$as === void 0 ? 'div' : _propsWithDefaults$as,
+    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
+    classPrefix = _propsWithDefaults$cl === void 0 ? 'form-group' : _propsWithDefaults$cl,
+    controlIdProp = propsWithDefaults.controlId,
+    className = propsWithDefaults.className,
+    rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;

package/esm/FormHelpText/FormHelpText.js

@@ -4,11 +4,12 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _excluded = ["as", "classPrefix", "className", "tooltip", "children", "id"];
 import React from 'react';
 import PropTypes from 'prop-types';
+import HelpOutlineIcon from '@rsuite/icons/HelpOutline';
 import Tooltip from "../Tooltip/index.js";
 import Whisper from "../Whisper/index.js";
 import { useClassNames } from "../internals/hooks/index.js";
 import { useFormGroup } from "../FormGroup/index.js";
-import HelpOutlineIcon from '@rsuite/icons/HelpOutline';
+import { useCustom } from "../CustomProvider/index.js";
 /**
  * The `<Form.HelpText>` component is used to display help information in the form.
  * @see https://rsuitejs.com/components/form/
@@ -16,16 +17,18 @@ import HelpOutlineIcon from '@rsuite/icons/HelpOutline';
 var FormHelpText = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useFormGroup = useFormGroup(),
     helpTextId = _useFormGroup.helpTextId;
-  var _props$as = props.as,
-    Component = _props$as === void 0 ? 'span' : _props$as,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'form-help-text' : _props$classPrefix,
-    className = props.className,
-    tooltip = props.tooltip,
-    children = props.children,
-    _props$id = props.id,
-    id = _props$id === void 0 ? helpTextId : _props$id,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  var _useCustom = useCustom('FormHelpText', props),
+    propsWithDefaults = _useCustom.propsWithDefaults;
+  var _propsWithDefaults$as = propsWithDefaults.as,
+    Component = _propsWithDefaults$as === void 0 ? 'span' : _propsWithDefaults$as,
+    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
+    classPrefix = _propsWithDefaults$cl === void 0 ? 'form-help-text' : _propsWithDefaults$cl,
+    className = propsWithDefaults.className,
+    tooltip = propsWithDefaults.tooltip,
+    children = propsWithDefaults.children,
+    _propsWithDefaults$id = propsWithDefaults.id,
+    id = _propsWithDefaults$id === void 0 ? helpTextId : _propsWithDefaults$id,
+    rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;

package/esm/Grid/Grid.js

@@ -5,18 +5,21 @@ var _excluded = ["as", "classPrefix", "className", "fluid"];
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames } from "../internals/hooks/index.js";
+import { useCustom } from "../CustomProvider/index.js";
 /**
  * The Grid component is used to specify the layout of child elements in rows and columns.
  * @see https://rsuitejs.com/components/grid
  */
 var Grid = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$as = props.as,
-    Component = _props$as === void 0 ? 'div' : _props$as,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'grid-container' : _props$classPrefix,
-    className = props.className,
-    fluid = props.fluid,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  var _useCustom = useCustom('Grid', props),
+    propsWithDefaults = _useCustom.propsWithDefaults;
+  var _propsWithDefaults$as = propsWithDefaults.as,
+    Component = _propsWithDefaults$as === void 0 ? 'div' : _propsWithDefaults$as,
+    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
+    classPrefix = _propsWithDefaults$cl === void 0 ? 'grid-container' : _propsWithDefaults$cl,
+    className = propsWithDefaults.className,
+    fluid = propsWithDefaults.fluid,
+    rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix,