rsuite 6.0.0-canary-2025031915 → 6.0.0-canary-2025032014

package/esm/CustomProvider/types.d.ts

@@ -42,6 +42,7 @@ import type { FormControlLabelProps } from '../FormControlLabel';
 import type { FormErrorMessageProps } from '../FormErrorMessage';
 import type { FormGroupProps } from '../FormGroup';
 import type { FormHelpTextProps } from '../FormHelpText';
+import type { FormStackProps } from '../FormStack';
 import type { GridProps } from '../Grid';
 import type { HeaderProps } from '../Header';
 import type { HeadingProps } from '../Heading';
@@ -155,6 +156,7 @@ export interface ReactSuiteComponents {
     FormErrorMessage: ComponentProps<FormErrorMessageProps>;
     FormGroup: ComponentProps<FormGroupProps>;
     FormHelpText: ComponentProps<FormHelpTextProps>;
+    FormStack: ComponentProps<FormStackProps>;
     Grid: ComponentProps<GridProps>;
     Header: ComponentProps<HeaderProps>;
     Heading: ComponentProps<HeadingProps>;

package/esm/Form/Form.d.ts

@@ -102,10 +102,19 @@ declare const Form: import("../internals/types").InternalRefForwardingComponent<
         [x: string]: string | undefined;
     }>> | undefined;
 }, never> & {
+    Stack: import("../internals/types").InternalRefForwardingComponent<"span", import("../FormStack").FormStackProps, never> & Record<string, never>;
     Control: FormControlComponent;
-    ControlLabel: import("../internals/types").InternalRefForwardingComponent<"label", import("../FormControlLabel").FormControlLabelProps, never> & Record<string, never>;
+    Label: import("../internals/types").InternalRefForwardingComponent<"label", import("../FormControlLabel").FormControlLabelProps, never> & Record<string, never>;
     ErrorMessage: import("../internals/types").InternalRefForwardingComponent<"div", import("../FormErrorMessage").FormErrorMessageProps, never> & Record<string, never>;
     Group: import("../internals/types").InternalRefForwardingComponent<"div", import("../FormGroup").FormGroupProps, never> & Record<string, never>;
+    Text: import("../internals/types").InternalRefForwardingComponent<"span", import("../FormHelpText").FormHelpTextProps, never> & Record<string, never>;
+    /**
+     * @deprecated Use `Form.Label` instead
+     */
+    ControlLabel: import("../internals/types").InternalRefForwardingComponent<"label", import("../FormControlLabel").FormControlLabelProps, never> & Record<string, never>;
+    /**
+     * @deprecated Use `Form.Text` instead
+     */
     HelpText: import("../internals/types").InternalRefForwardingComponent<"span", import("../FormHelpText").FormHelpTextProps, never> & Record<string, never>;
 };
 export default Form;

package/esm/Form/Form.js

@@ -1,15 +1,16 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
+import React, { useMemo } from 'react';
 import FormControl from "../FormControl/index.js";
 import FormControlLabel from "../FormControlLabel/index.js";
 import FormErrorMessage from "../FormErrorMessage/index.js";
 import FormGroup from "../FormGroup/index.js";
 import FormHelpText from "../FormHelpText/index.js";
+import FormStack from "../FormStack/index.js";
+import Box from "../internals/Box/index.js";
 import useSchemaModel from "./hooks/useSchemaModel.js";
 import useFormValidate from "./hooks/useFormValidate.js";
 import useFormValue from "./hooks/useFormValue.js";
-import useFormClassNames from "./hooks/useFormClassNames.js";
 import useFormRef from "./hooks/useFormRef.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { SchemaModel } from 'schema-typed';
@@ -18,10 +19,19 @@ import { FormValueProvider, FormProvider } from "./FormContext.js";
 import { useCustom } from "../CustomProvider/index.js";
 const defaultSchema = SchemaModel({});
 const Subcomponents = {
+  Stack: FormStack,
   Control: FormControl,
-  ControlLabel: FormControlLabel,
+  Label: FormControlLabel,
   ErrorMessage: FormErrorMessage,
   Group: FormGroup,
+  Text: FormHelpText,
+  /**
+   * @deprecated Use `Form.Label` instead
+   */
+  ControlLabel: FormControlLabel,
+  /**
+   * @deprecated Use `Form.Text` instead
+   */
   HelpText: FormHelpText
 };
 
@@ -35,18 +45,16 @@ const Form = forwardRef((props, ref) => {
   } = useCustom('Form', props);
   const {
     checkTrigger = 'change',
-    classPrefix = 'form',
     errorFromContext = true,
     formDefaultValue = {},
     formValue: controlledFormValue,
     formError: controlledFormError,
-    fluid,
     nestedField = false,
-    layout = 'vertical',
+    fluid,
+    layout,
     model: formModel = defaultSchema,
     readOnly,
     plaintext,
-    className,
     children,
     disabled,
     onSubmit,
@@ -90,15 +98,6 @@ const Form = forwardRef((props, ref) => {
     resetErrors,
     cleanErrorForField
   } = useFormValidate(controlledFormError, formValidateProps);
-  const classes = useFormClassNames({
-    classPrefix,
-    className,
-    fluid,
-    layout,
-    readOnly,
-    plaintext,
-    disabled
-  });
   const submit = useEventCallback(event => {
     // Check the form before submitting
     if (check()) {
@@ -172,16 +171,26 @@ const Form = forwardRef((props, ref) => {
     checkFieldForNextValue,
     checkFieldAsyncForNextValue
   };
-  return /*#__PURE__*/React.createElement("form", _extends({}, rest, {
+  const formChild = useMemo(() => {
+    return fluid || layout ? /*#__PURE__*/React.createElement(FormStack, {
+      fluid: fluid,
+      layout: layout
+    }, children) : children;
+  }, [fluid, children, layout]);
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "form",
+    "data-rs": "form",
+    "data-disabled": disabled,
+    "data-readonly": readOnly,
+    "data-plaintext": plaintext,
     ref: formRef,
     onSubmit: handleSubmit,
-    onReset: handleReset,
-    className: classes
-  }), /*#__PURE__*/React.createElement(FormProvider, {
+    onReset: handleReset
+  }, rest), /*#__PURE__*/React.createElement(FormProvider, {
     value: formContextValue
   }, /*#__PURE__*/React.createElement(FormValueProvider, {
     value: formValue
-  }, children)));
+  }, formChild)));
 }, Subcomponents);
 Form.displayName = 'Form';
 export default Form;

package/esm/FormControl/FormControl.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import Input from '../Input';
+import { BoxProps } from '../internals/Box';
 import type { CheckType } from 'schema-typed';
-import type { PlacementCorners, FormControlBaseProps, WithAsProps, CheckTriggerType } from '../internals/types';
+import type { PlacementCorners, FormControlBaseProps, CheckTriggerType } from '../internals/types';
 /**
  * Props that FormControl passes to its accepter
  */
 export type FormControlAccepterProps<ValueType = any> = FormControlBaseProps<ValueType>;
-export interface FormControlProps<ValueType = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLFormElement>, 'value' | 'onChange'> {
+export interface FormControlProps<ValueType = any> extends BoxProps, Omit<React.HTMLAttributes<HTMLFormElement>, 'value' | 'onChange'> {
     /** Proxied components */
     accepter?: React.ElementType;
     /**

package/esm/FormControl/FormControl.js

@@ -7,6 +7,7 @@ import FormContext, { FormValueContext } from "../Form/FormContext.js";
 import useRegisterModel from "./hooks/useRegisterModel.js";
 import useField from "./hooks/useField.js";
 import Toggle from "../Toggle/index.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useFormGroup } from "../FormGroup/index.js";
@@ -40,7 +41,7 @@ const FormControl = forwardRef((props, ref) => {
     checkFieldAsyncForNextValue
   } = useContext(FormContext);
   const {
-    as: Component = 'div',
+    as,
     accepter: AccepterComponent = Input,
     classPrefix = 'form-control',
     checkAsync,
@@ -128,7 +129,8 @@ const FormControl = forwardRef((props, ref) => {
     // need to distinguish between undefined and null
     [valueKey]: fieldValue === undefined ? defaultValue : fieldValue
   };
-  return /*#__PURE__*/React.createElement(Component, {
+  return /*#__PURE__*/React.createElement(Box, {
+    as: as,
     className: classes,
     ref: ref,
     "data-testid": "form-control-wrapper"

package/esm/FormControlLabel/FormControlLabel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface FormControlLabelProps extends WithAsProps, React.LabelHTMLAttributes<HTMLLabelElement> {
+import { BoxProps } from '../internals/Box';
+export interface FormControlLabelProps extends BoxProps, React.LabelHTMLAttributes<HTMLLabelElement> {
     /** Attribute of the html label tag, defaults to the controlId of the FormGroup */
     htmlFor?: string;
 }

package/esm/FormControlLabel/FormControlLabel.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -18,7 +19,7 @@ const FormControlLabel = forwardRef((props, ref) => {
     controlId
   } = useFormGroup();
   const {
-    as: Component = 'label',
+    as = 'label',
     classPrefix = 'form-control-label',
     htmlFor = controlId,
     className,
@@ -30,7 +31,8 @@ const FormControlLabel = forwardRef((props, ref) => {
     merge
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix());
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     id: id,
     htmlFor: htmlFor
   }, rest, {

package/esm/FormErrorMessage/FormErrorMessage.d.ts

@@ -1,5 +1,6 @@
-import type { PlacementCorners, WithAsProps } from '../internals/types';
-export interface FormErrorMessageProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { PlacementCorners } from '../internals/types';
+export interface FormErrorMessageProps extends BoxProps {
     /** Show error messages */
     show?: boolean;
     /** The placement of error messages */

package/esm/FormErrorMessage/FormErrorMessage.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef, kebabPlace } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -13,7 +14,7 @@ const FormErrorMessage = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('FormErrorMessage', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'form-error-message',
     className,
     show,
@@ -28,7 +29,8 @@ const FormErrorMessage = forwardRef((props, ref) => {
   } = useStyles(classPrefix);
   const classes = withPrefix('show');
   const wrapperClasses = merge(className, prefix('wrapper'));
-  return show ? /*#__PURE__*/React.createElement(Component, _extends({
+  return show ? /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     "data-placement": kebabPlace(placement),
     className: wrapperClasses

package/esm/FormGroup/FormGroup.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface FormGroupProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface FormGroupProps extends BoxProps {
     /**
      * Sets id on `<Form.Control>` and `htmlFor` on `<Form.ControlLabel>`.
      * And generate ʻaria-labelledby` and ʻaria-describedby` for `<Form.Control>`.

package/esm/FormGroup/FormGroup.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles, useUniqueId } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -41,7 +42,7 @@ const FormGroup = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('FormGroup', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'form-group',
     controlId: controlIdProp,
     className,
@@ -58,7 +59,9 @@ const FormGroup = forwardRef((props, ref) => {
   }), [controlId]);
   return /*#__PURE__*/React.createElement(FormGroupContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes,
     role: "group"

package/esm/FormHelpText/FormHelpText.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface FormHelpTextProps extends WithAsProps, React.HTMLAttributes<HTMLSpanElement> {
+import { BoxProps } from '../internals/Box';
+export interface FormHelpTextProps extends BoxProps, React.HTMLAttributes<HTMLSpanElement> {
     /** Whether to show through the Tooltip component */
     tooltip?: boolean;
 }

package/esm/FormHelpText/FormHelpText.js

@@ -4,6 +4,7 @@ import React from 'react';
 import HelpOutlineIcon from '@rsuite/icons/HelpOutline';
 import Tooltip from "../Tooltip/index.js";
 import Whisper from "../Whisper/index.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useFormGroup } from "../FormGroup/index.js";
@@ -20,7 +21,7 @@ const FormHelpText = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('FormHelpText', props);
   const {
-    as: Component = 'span',
+    as = 'span',
     classPrefix = 'form-help-text',
     className,
     tooltip,
@@ -42,7 +43,8 @@ const FormHelpText = forwardRef((props, ref) => {
       speaker: /*#__PURE__*/React.createElement(Tooltip, _extends({
         id: id
       }, rest), children)
-    }, /*#__PURE__*/React.createElement(Component, {
+    }, /*#__PURE__*/React.createElement(Box, {
+      as: as,
       role: "img",
       "aria-label": "help",
       className: classes
@@ -50,7 +52,8 @@ const FormHelpText = forwardRef((props, ref) => {
       "aria-hidden": true
     })));
   }
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     id: id
   }, rest, {
     ref: ref,

package/esm/FormStack/FormStack.d.ts

@@ -0,0 +1,27 @@
+import { BoxProps } from '../internals/Box';
+export interface FormStackProps extends BoxProps {
+    /**
+     * Set the layout of the elements within the form.
+     * 'horizontal': Left and right columns layout.
+     * 'vertical': Top and bottom layout.
+     * 'inline': Elements are placed inline.
+     */
+    layout?: 'horizontal' | 'vertical' | 'inline';
+    /**
+     * The fluid property allows the form elements to fill 100% of the container width.
+     * Only valid in vertical layouts.
+     */
+    fluid?: boolean;
+    /**
+     * Define the spacing between immediate children.
+     * Can be a number, string, or an array of numbers/strings for responsive spacing.
+     */
+    spacing?: number | string | (number | string)[];
+}
+/**
+ * The `<Form.Stack>` component is a quick layout component through Flexbox,
+ * supporting vertical and horizontal stacking, custom spacing and line wrapping.
+ * @see https://rsuitejs.com/components/form/
+ */
+declare const FormStack: import("../internals/types").InternalRefForwardingComponent<"span", FormStackProps, never> & Record<string, never>;
+export default FormStack;

package/esm/FormStack/FormStack.js

@@ -0,0 +1,45 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import Box from "../internals/Box/index.js";
+import { forwardRef, mergeStyles, getCssValue } from "../internals/utils/index.js";
+import { useStyles } from "../internals/hooks/index.js";
+import { useCustom } from "../CustomProvider/index.js";
+/**
+ * The `<Form.Stack>` component is a quick layout component through Flexbox,
+ * supporting vertical and horizontal stacking, custom spacing and line wrapping.
+ * @see https://rsuitejs.com/components/form/
+ */
+const FormStack = forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('FormStack', props);
+  const {
+    as,
+    classPrefix = 'form-stack',
+    className,
+    children,
+    layout = 'vertical',
+    fluid,
+    spacing,
+    style,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    withPrefix,
+    merge,
+    cssVar
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix(layout, {
+    fluid
+  }));
+  const styles = mergeStyles(style, cssVar('spacing', spacing, getCssValue));
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
+    ref: ref,
+    style: styles,
+    className: classes
+  }, rest), children);
+});
+FormStack.displayName = 'FormStack';
+export default FormStack;

package/esm/FormStack/index.d.ts

@@ -0,0 +1,4 @@
+import FormStack from './FormStack';
+export type { FormStackProps } from './FormStack';
+export { FormStack };
+export default FormStack;

package/esm/FormStack/index.js

@@ -0,0 +1,8 @@
+'use client';
+import FormStack from "./FormStack.js";
+
+// export types
+
+// export components
+export { FormStack };
+export default FormStack;

package/esm/index.d.ts

@@ -33,6 +33,7 @@ export * from './Breadcrumb';
 export * from './Pagination';
 export * from './Steps';
 export * from './Form';
+export * from './FormStack';
 export * from './FormGroup';
 export * from './FormErrorMessage';
 export * from './FormControlLabel';

package/esm/index.js

@@ -54,6 +54,7 @@ export * from "./Steps/index.js";
 // Form
 // --------------------------------------------------------
 export * from "./Form/index.js";
+export * from "./FormStack/index.js";
 export * from "./FormGroup/index.js";
 export * from "./FormErrorMessage/index.js";
 export * from "./FormControlLabel/index.js";

package/internals/Picker/styles/index.less

@@ -92,7 +92,9 @@
 
   &-label.rs-input-group-addon {
     color: var(--rs-text-primary);
-    padding-inline-end: 4px !important;
+    padding-inline: calc(
+      var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width)
+    );
   }
 
   &-loader {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "6.0.0-canary-2025031915",
+  "version": "6.0.0-canary-2025032014",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/styles/index.less

@@ -23,7 +23,6 @@
 @import '../CheckTreePicker/styles/index';
 @import '../Container/styles/index';
 @import '../Content/styles/index';
-@import '../FormControlLabel/styles/index';
 @import '../DatePicker/styles/index';
 @import '../DateRangePicker/styles/index';
 @import '../Divider/styles/index';
@@ -32,12 +31,14 @@
 @import '../FlexboxGrid/styles/index';
 @import '../Footer/styles/index';
 @import '../Form/styles/index';
-@import '../FormControl/styles/index';
+@import '../FormStack/styles/index';
 @import '../FormGroup/styles/index';
+@import '../FormControl/styles/index';
+@import '../FormControlLabel/styles/index';
 @import '../FormErrorMessage/styles/index';
+@import '../FormHelpText/styles/index';
 @import '../Grid/styles/index';
 @import '../Header/styles/index';
-@import '../FormHelpText/styles/index';
 @import '../IconButton/styles/index';
 @import '../Image/styles/index';
 @import '../Input/styles/index';