rsuite 6.0.0-canary-2025031915 → 6.0.0-canary-20250320

package/cjs/FormHelpText/FormHelpText.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _HelpOutline = _interopRequireDefault(require("@rsuite/icons/HelpOutline"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _Whisper = _interopRequireDefault(require("../Whisper"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _FormGroup = require("../FormGroup");
@@ -25,7 +26,7 @@ const FormHelpText = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('FormHelpText', props);
   const {
-    as: Component = 'span',
+    as = 'span',
     classPrefix = 'form-help-text',
     className,
     tooltip,
@@ -47,7 +48,8 @@ const FormHelpText = (0, _utils.forwardRef)((props, ref) => {
       speaker: /*#__PURE__*/_react.default.createElement(_Tooltip.default, (0, _extends2.default)({
         id: id
       }, rest), children)
-    }, /*#__PURE__*/_react.default.createElement(Component, {
+    }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+      as: as,
       role: "img",
       "aria-label": "help",
       className: classes
@@ -55,7 +57,8 @@ const FormHelpText = (0, _utils.forwardRef)((props, ref) => {
       "aria-hidden": true
     })));
   }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     id: id
   }, rest, {
     ref: ref,

package/cjs/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/cjs/FormStack/FormStack.js

@@ -0,0 +1,50 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
+var _utils = require("../internals/utils");
+var _hooks = require("../internals/hooks");
+var _CustomProvider = require("../CustomProvider");
+/**
+ * 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 = (0, _utils.forwardRef)((props, ref) => {
+  const {
+    propsWithDefaults
+  } = (0, _CustomProvider.useCustom)('FormStack', props);
+  const {
+    as,
+    classPrefix = 'form-stack',
+    className,
+    children,
+    layout = 'vertical',
+    fluid,
+    spacing,
+    style,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    withPrefix,
+    merge,
+    cssVar
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix(layout, {
+    fluid
+  }));
+  const styles = (0, _utils.mergeStyles)(style, cssVar('spacing', spacing, _utils.getCssValue));
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
+    ref: ref,
+    style: styles,
+    className: classes
+  }, rest), children);
+});
+FormStack.displayName = 'FormStack';
+var _default = exports.default = FormStack;

package/cjs/FormStack/index.d.ts

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

package/cjs/FormStack/index.js

@@ -0,0 +1,11 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _FormStack = _interopRequireDefault(require("./FormStack"));
+exports.FormStack = _FormStack.default;
+// export types
+// export components
+var _default = exports.default = _FormStack.default;

package/cjs/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/cjs/index.js

@@ -212,6 +212,12 @@ Object.keys(_Form).forEach(function (key) {
   if (key in exports && exports[key] === _Form[key]) return;
   exports[key] = _Form[key];
 });
+var _FormStack = require("./FormStack");
+Object.keys(_FormStack).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FormStack[key]) return;
+  exports[key] = _FormStack[key];
+});
 var _FormGroup = require("./FormGroup");
 Object.keys(_FormGroup).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/rsuite-no-reset-rtl.css

@@ -3858,9 +3858,6 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
 .rs-content {
   flex: 1 1 auto;
 }
-.rs-form-plaintext .rs-form-control-label {
-  color: var(--rs-text-secondary);
-}
 .rs-picker-toolbar {
   padding: 10px;
   border-top: 1px solid var(--rs-divider-border);
@@ -4954,31 +4951,72 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
 .rs-footer {
   flex: 0 0 auto;
 }
-.rs-form {
-  --rs-form-direction: column;
-  --rs-form-spacing: calc(var(--rs-spacing) * 4);
-  --rs-form-group-spacing: var(--rs-spacing);
-  --rs-form-group-direction: column;
+.rs-form-stack {
+  --rs-form-stack-dir: column;
+  --rs-form-stack-spacing: calc(var(--rs-spacing) * 4);
   display: flex;
-  flex-direction: var(--rs-form-direction);
-  gap: var(--rs-form-spacing);
+  flex-direction: var(--rs-form-stack-dir);
+  gap: var(--rs-form-stack-spacing);
   align-items: flex-start;
 }
-.rs-form-inline {
-  --rs-form-direction: row;
+.rs-form-stack-inline {
+  --rs-form-stack-dir: row;
+}
+.rs-form-group {
+  position: relative;
+  display: flex;
+  flex-direction: var(--rs-form-group-direction);
+  gap: var(--rs-form-group-spacing);
+}
+.rs-form-group .rs-input {
+  display: inline-block;
+}
+.rs-form-group textarea.rs-input {
+  vertical-align: bottom;
+}
+.rs-form-stack-vertical .rs-form-group .rs-form-control-label {
+  display: block;
+}
+.rs-form-stack {
+  --rs-form-group-spacing: var(--rs-spacing);
+  --rs-form-group-direction: column;
+}
+.rs-form-stack-horizontal {
+  --rs-form-control-label-width: 170px;
+  --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
+  --rs-form-group-direction: row;
 }
-.rs-form-fluid .rs-form-control-wrapper {
+.rs-form-stack-horizontal .rs-form-group {
+  align-items: baseline;
+}
+.rs-form-stack-horizontal .rs-form-group .rs-form-control-label {
+  display: inline-block;
+  font-size: var(--rs-font-size-sm);
+  width: var(--rs-form-control-label-width);
+  text-align: end;
+}
+.rs-form-stack-horizontal .rs-form-group .rs-btn-toolbar {
+  padding-inline-start: calc(var(--rs-form-control-label-width) + var(--rs-form-group-spacing));
+}
+.rs-form-stack-inline {
+  --rs-form-group-direction: row;
+  --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
+}
+.rs-form-stack-inline .rs-form-group {
+  align-items: center;
+}
+.rs-form-stack-fluid .rs-form-group {
   width: 100%;
 }
-.rs-form-fluid .rs-form-control-wrapper > .rs-input-number,
-.rs-form-fluid .rs-form-control-wrapper > .rs-input {
+.rs-form-stack-fluid .rs-form-control-wrapper {
   width: 100%;
 }
-.rs-form-fluid.rs-form-vertical .rs-form-group .rs-input-group {
+.rs-form-stack-fluid .rs-form-control-wrapper > .rs-input-number,
+.rs-form-stack-fluid .rs-form-control-wrapper > .rs-input {
   width: 100%;
 }
-.rs-form-fluid.rs-form-vertical .rs-form-group .rs-form-control-wrapper {
-  max-width: 100%;
+.rs-form-stack-fluid.rs-form-stack-vertical .rs-form-group .rs-input-group {
+  width: 100%;
 }
 .rs-form-control-wrapper {
   position: relative;
@@ -4991,24 +5029,22 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   pointer-events: none;
   touch-action: none;
 }
-.rs-form-vertical .rs-form-group .rs-input-group {
+.rs-form-stack-vertical .rs-form-group .rs-input-group {
   width: 300px;
 }
-.rs-form-vertical .rs-form-group .rs-form-control-wrapper {
+.rs-form-stack-vertical .rs-form-group .rs-form-control-wrapper {
   display: inline-block;
-  max-width: -moz-max-content;
-  max-width: max-content;
 }
-.rs-form-horizontal .rs-form-group .rs-form-control-wrapper {
+.rs-form-stack-horizontal .rs-form-group .rs-form-control-wrapper {
   float: inline-start;
 }
-.rs-form-horizontal .rs-form-group .rs-form-control-wrapper + .rs-form-help-text {
+.rs-form-stack-horizontal .rs-form-group .rs-form-control-wrapper + .rs-form-help-text {
   clear: both;
 }
-.rs-form-inline .rs-form-group .rs-form-control-wrapper {
+.rs-form-stack-inline .rs-form-group .rs-form-control-wrapper {
   display: inline-block;
 }
-.rs-form-inline .rs-form-group .rs-sr-only + .rs-form-control-wrapper {
+.rs-form-stack-inline .rs-form-group .rs-sr-only + .rs-form-control-wrapper {
   margin-inline-start: 0;
 }
 .rs-input-group > .rs-form-control > .rs-input {
@@ -5016,45 +5052,8 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   border: none;
   outline: none;
 }
-.rs-form-group {
-  position: relative;
-  display: flex;
-  flex-direction: var(--rs-form-group-direction);
-  gap: var(--rs-form-group-spacing);
-}
-.rs-form-group .rs-input {
-  display: inline-block;
-}
-.rs-form-group textarea.rs-input {
-  vertical-align: bottom;
-}
-.rs-form-vertical .rs-form-group .rs-form-control-label {
-  display: block;
-}
-.rs-form-horizontal {
-  --rs-form-control-label-width: 170px;
-  --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
-  --rs-form-group-direction: row;
-}
-.rs-form-horizontal .rs-form-group {
-  align-items: baseline;
-}
-.rs-form-horizontal .rs-form-group .rs-form-control-label {
-  display: inline-block;
-  font-size: var(--rs-font-size-sm);
-  width: var(--rs-form-control-label-width);
-  text-align: end;
-}
-.rs-form-horizontal .rs-form-group .rs-btn-toolbar {
-  padding-inline-start: calc(var(--rs-form-control-label-width) + var(--rs-form-group-spacing));
-}
-.rs-form-inline {
-  --rs-form-spacing: calc(var(--rs-spacing) * 4);
-  --rs-form-group-direction: row;
-  --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
-}
-.rs-form-inline .rs-form-group {
-  align-items: center;
+[data-rs='form'][data-plaintext='true'] .rs-form-control-label {
+  color: var(--rs-text-secondary);
 }
 @keyframes errorMessageSlideUpIn {
   0% {
@@ -5239,6 +5238,18 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
 .rs-form-error-message-wrapper:where([data-placement='left-end'], [data-placement='right-end']) .rs-form-error-message-arrow::after {
   bottom: 4px;
 }
+.rs-form-help-text {
+  display: block;
+  color: var(--rs-text-secondary);
+  min-height: 20px;
+  line-height: 1.66666667;
+  font-size: var(--rs-font-size-xs);
+}
+.rs-form-help-text-tooltip {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--rs-font-size-md);
+}
 :root {
   --rs-grid-gutter: calc(var(--rs-spacing) * 3);
   --rs-row-gutter: calc(var(--rs-grid-gutter) / -2);
@@ -7818,18 +7829,6 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
 .rs-header {
   flex: 0 0 auto;
 }
-.rs-form-help-text {
-  display: block;
-  color: var(--rs-text-secondary);
-  min-height: 20px;
-  line-height: 1.66666667;
-  font-size: var(--rs-font-size-xs);
-}
-.rs-form-help-text-tooltip {
-  display: inline-flex;
-  align-items: center;
-  font-size: var(--rs-font-size-md);
-}
 .rs-btn-icon {
   padding: calc((var(--rs-btn-size) - var(--rs-btn-icon-size)) / 2);
   line-height: var(--rs-btn-icon-size);