rsuite 6.0.0-canary-20250103 → 6.0.0-canary-2025011413

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

@@ -1,13 +1,13 @@
 import React from 'react';
-import { WithAsProps, RsRefForwardingComponent } from '../types';
+import type { WithAsProps } from '../types';
 export type ComponentProps = WithAsProps & React.HTMLAttributes<HTMLDivElement>;
-interface Props<TElement extends React.ElementType> extends React.HTMLAttributes<HTMLDivElement> {
+interface Props<T extends React.ElementType> extends React.HTMLAttributes<HTMLDivElement> {
     name: string;
-    componentAs?: TElement;
+    componentAs?: T;
     componentClassPrefix?: string;
 }
 /**
  * Create a component with `classPrefix` and `as` attributes.
  */
-export declare function createComponent<TElement extends React.ElementType = 'div'>({ name, componentAs, componentClassPrefix, ...defaultProps }: Props<TElement>): RsRefForwardingComponent<TElement, ComponentProps, false>;
+export declare function createComponent<T extends React.ElementType = 'div', P = ComponentProps>({ name, componentAs, componentClassPrefix, ...defaultProps }: Props<T> & Partial<P>): import("../types").InternalRefForwardingComponent<T, Partial<P>, never> & Record<string, never>;
 export default createComponent;

package/cjs/internals/utils/createComponent.js

@@ -9,6 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var _hooks = require("../hooks");
+var _ = require("./");
 var _CustomProvider = require("../../CustomProvider");
 /**
  * Create a component with `classPrefix` and `as` attributes.
@@ -20,7 +21,7 @@ function createComponent(_ref) {
     componentClassPrefix,
     ...defaultProps
   } = _ref;
-  const Component = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const Component = (0, _.forwardRef)((props, ref) => {
     const {
       propsWithDefaults
     } = (0, _CustomProvider.useCustom)(name, props);

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

@@ -0,0 +1,10 @@
+import { ElementType, PropsWithoutRef, ForwardRefRenderFunction } from 'react';
+import type { InternalRefForwardingComponent } from '../types';
+/**
+ * A utility function to wrap components with `React.forwardRef`.
+ * It extends the type signature for better integration with custom components.
+ *
+ * @param component - The component to wrap, with `props` and `ref` types explicitly defined.
+ * @returns A forward-ref component with extended type inference.
+ */
+export declare function forwardRef<T extends ElementType, P = any, Subcomponents extends Record<string, React.ElementType | any> = Record<string, never>, OmitKeys extends keyof any = never>(component: ForwardRefRenderFunction<any, PropsWithoutRef<P>>, subcomponents?: Subcomponents): InternalRefForwardingComponent<T, P, OmitKeys> & Subcomponents;

package/cjs/internals/utils/forwardRef.js

@@ -0,0 +1,22 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.forwardRef = forwardRef;
+var _react = require("react");
+/**
+ * A utility function to wrap components with `React.forwardRef`.
+ * It extends the type signature for better integration with custom components.
+ *
+ * @param component - The component to wrap, with `props` and `ref` types explicitly defined.
+ * @returns A forward-ref component with extended type inference.
+ */
+function forwardRef(component, subcomponents) {
+  const forwardedComponent = /*#__PURE__*/(0, _react.forwardRef)(component);
+
+  // Attach subcomponents if provided
+  if (subcomponents) {
+    Object.assign(forwardedComponent, subcomponents);
+  }
+  return forwardedComponent;
+}

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

@@ -2,6 +2,7 @@ export * from './BrowserDetection';
 export * from './htmlPropsUtils';
 export * from './css';
 export * from './colours';
+export type { ComponentProps } from './createComponent';
 export { stringifyReactNode, reactToString } from './stringifyReactNode';
 export { getSafeRegExpString } from './getSafeRegExpString';
 export { getDOMNode } from './getDOMNode';
@@ -21,7 +22,7 @@ export { getDataGroupBy } from './getDataGroupBy';
 export { deprecateComponent } from './deprecateComponent';
 export { warnOnce } from './warnOnce';
 export { createComponent } from './createComponent';
-export type { ComponentProps } from './createComponent';
 export { attachParent } from './attachParent';
 export { isFocusEntering, isFocusLeaving } from './events';
 export { isFocusableElement } from './dom';
+export { forwardRef } from './forwardRef';

package/cjs/internals/utils/index.js

@@ -29,9 +29,10 @@ var _exportNames = {
   attachParent: true,
   isFocusEntering: true,
   isFocusLeaving: true,
-  isFocusableElement: true
+  isFocusableElement: true,
+  forwardRef: true
 };
-exports.warnOnce = exports.tplTransform = exports.stringifyReactNode = exports.shallowEqualArray = exports.shallowEqual = exports.safeSetSelection = exports.reactToString = exports.prefix = exports.placementPolyfill = exports.mergeRefs = exports.isOneOf = exports.isFocusableElement = exports.isFocusLeaving = exports.isFocusEntering = exports.guid = exports.getStringLength = exports.getSafeRegExpString = exports.getDataGroupBy = exports.getDOMNode = exports.getClassNamePrefix = exports.deprecateComponent = exports.defaultClassPrefix = exports.createComponent = exports.createChainedFunction = exports.composeFunctions = exports.attachParent = exports.ReactChildren = void 0;
+exports.warnOnce = exports.tplTransform = exports.stringifyReactNode = exports.shallowEqualArray = exports.shallowEqual = exports.safeSetSelection = exports.reactToString = exports.prefix = exports.placementPolyfill = exports.mergeRefs = exports.isOneOf = exports.isFocusableElement = exports.isFocusLeaving = exports.isFocusEntering = exports.guid = exports.getStringLength = exports.getSafeRegExpString = exports.getDataGroupBy = exports.getDOMNode = exports.getClassNamePrefix = exports.forwardRef = exports.deprecateComponent = exports.defaultClassPrefix = exports.createComponent = exports.createChainedFunction = exports.composeFunctions = exports.attachParent = exports.ReactChildren = void 0;
 var _BrowserDetection = require("./BrowserDetection");
 Object.keys(_BrowserDetection).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -108,4 +109,6 @@ var _events = require("./events");
 exports.isFocusEntering = _events.isFocusEntering;
 exports.isFocusLeaving = _events.isFocusLeaving;
 var _dom = require("./dom");
-exports.isFocusableElement = _dom.isFocusableElement;
+exports.isFocusableElement = _dom.isFocusableElement;
+var _forwardRef = require("./forwardRef");
+exports.forwardRef = _forwardRef.forwardRef;

package/cjs/toaster/ToastContainer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WithAsProps, RsRefForwardingComponent } from '../internals/types';
+import type { WithAsProps, InternalRefForwardingComponent } from '../internals/types';
 export declare const defaultToasterContainer: () => HTMLElement | null;
 export type PlacementType = 'topCenter' | 'bottomCenter' | 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd';
 export declare const toastPlacements: PlacementType[];
@@ -41,7 +41,7 @@ export type GetInstancePropsType = Omit<ToastContainerProps, 'container' | 'plac
     container: HTMLElement | null;
     placement: PlacementType;
 };
-interface ToastContainerComponent extends RsRefForwardingComponent<'div', ToastContainerProps> {
+interface ToastContainerComponent extends InternalRefForwardingComponent<'div', ToastContainerProps> {
     getInstance: (props: GetInstancePropsType) => Promise<[React.RefObject<ToastContainerInstance>, string]>;
 }
 declare const ToastContainer: ToastContainerComponent;

package/cjs/toaster/ToastContainer.js

@@ -79,7 +79,7 @@ const useMessages = () => {
     remove
   };
 };
-const ToastContainer = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const ToastContainer = /*#__PURE__*/(0, _react.forwardRef)(function ToastContainer(props, ref) {
   const {
     as: Component = 'div',
     className,

package/cjs/toaster/index.d.ts

@@ -1,3 +1,4 @@
 import toaster from './toaster';
 export type { Toaster } from './toaster';
+export { toaster };
 export default toaster;

package/cjs/toaster/index.js

@@ -5,4 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _toaster = _interopRequireDefault(require("./toaster"));
+exports.toaster = _toaster.default;
+// export types
+// export components
 var _default = exports.default = _toaster.default;

package/cjs/useBreakpointValue/index.d.ts

@@ -1,2 +1,3 @@
 import useBreakpointValue from './useBreakpointValue';
+export { useBreakpointValue };
 export default useBreakpointValue;

package/cjs/useBreakpointValue/index.js

@@ -5,4 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _useBreakpointValue = _interopRequireDefault(require("./useBreakpointValue"));
+exports.useBreakpointValue = _useBreakpointValue.default;
+// export hooks
 var _default = exports.default = _useBreakpointValue.default;

package/cjs/useMediaQuery/index.d.ts

@@ -1,3 +1,4 @@
 import useMediaQuery from './useMediaQuery';
 export type { Query } from './useMediaQuery';
+export { useMediaQuery };
 export default useMediaQuery;

package/cjs/useMediaQuery/index.js

@@ -5,4 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _useMediaQuery = _interopRequireDefault(require("./useMediaQuery"));
+exports.useMediaQuery = _useMediaQuery.default;
+// export types
+// export hooks
 var _default = exports.default = _useMediaQuery.default;

package/cjs/useToaster/index.d.ts

@@ -1,2 +1,3 @@
 import useToaster from './useToaster';
+export { useToaster };
 export default useToaster;

package/cjs/useToaster/index.js

@@ -5,4 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _useToaster = _interopRequireDefault(require("./useToaster"));
+exports.useToaster = _useToaster.default;
+// export hooks
 var _default = exports.default = _useToaster.default;

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

@@ -9284,32 +9284,35 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   width: 100%;
   text-align: right;
 }
-.rs-navbar::before,
-.rs-navbar::after {
-  content: ' ';
-  display: table;
-}
-.rs-navbar::after {
-  clear: both;
+.rs-navbar {
+  --rs-navbar-padding-y: 10px;
+  --rs-navbar-padding-x: 16px;
+  --rs-navbar-gap: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--rs-navbar-padding-y) var(--rs-navbar-padding-x);
+  gap: var(--rs-navbar-gap);
 }
-.rs-navbar-header,
-.rs-navbar-brand {
-  float: right;
-  display: inline-block;
-  height: 56px;
-  color: inherit;
+.rs-navbar .rs-input,
+.rs-navbar .rs-input-group {
+  width: auto;
 }
-.rs-navbar-header a {
-  color: inherit;
+.rs-navbar-content {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-navbar-gap);
 }
 .rs-navbar-brand {
-  padding: 18px 20px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 .rs-navbar-nav {
-  float: right;
+  display: flex;
 }
-.rs-navbar-nav.rs-navbar-right {
-  float: left;
+.rs-navbar-nav.rs-nav-vertical {
+  flex-direction: column;
 }
 .rs-navbar-nav:focus .rs-navbar-item:focus-visible,
 .rs-navbar-nav:focus .rs-navbar-item.rs-navbar-item-focus,
@@ -9340,11 +9343,9 @@ textarea.rs-inline-edit-sm .rs-plaintext {
 }
 .rs-navbar-item,
 .rs-navbar-nav > .rs-dropdown .rs-dropdown-toggle {
-  padding: 18px 16px;
-  height: 56px;
-  border-radius: 0;
+  padding: 8px 12px;
+  border-radius: 6px;
   color: inherit;
-  float: right;
   background-color: transparent;
   position: relative;
   overflow: hidden;
@@ -9409,7 +9410,7 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   text-decoration: underline;
 }
 .rs-navbar-nav > .rs-dropdown .rs-dropdown-toggle {
-  padding-left: 36px;
+  padding-left: 32px;
 }
 .rs-theme-high-contrast .rs-navbar-nav > .rs-dropdown .rs-dropdown-toggle {
   border: none;
@@ -9423,8 +9424,8 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   outline-offset: 2px;
 }
 .rs-navbar-nav > .rs-dropdown .rs-dropdown-toggle .rs-dropdown-toggle-caret {
-  top: 18px;
-  left: 16px;
+  top: 8px;
+  left: 12px;
 }
 .rs-navbar .rs-dropdown-item:hover {
   background-color: var(--rs-menuitem-active-bg);
@@ -9467,6 +9468,10 @@ textarea.rs-inline-edit-sm .rs-plaintext {
 .rs-theme-high-contrast .rs-navbar-inverse .rs-dropdown .rs-dropdown-menu-active ~ .rs-dropdown-toggle {
   color: var(--rs-navbar-inverse-selected-text);
 }
+.rs-navbar-inverse .rs-navbar-brand,
+.rs-navbar-inverse .rs-text {
+  color: var(--rs-navbar-inverse-text);
+}
 .rs-navbar-subtle {
   background-color: transparent;
   color: var(--rs-navbar-subtle-text);
@@ -9482,6 +9487,12 @@ textarea.rs-inline-edit-sm .rs-plaintext {
 .rs-navbar-subtle .rs-dropdown .rs-dropdown-menu-active ~ .rs-dropdown-toggle {
   color: var(--rs-navbar-subtle-selected-text);
 }
+.rs-navbar-drawer {
+  --rs-drawer-body-padding: 16px;
+}
+.rs-navbar-drawer .rs-drawer-body {
+  padding: var(--rs-drawer-body-padding);
+}
 .rs-notification {
   pointer-events: auto;
   position: relative;
@@ -14404,9 +14415,10 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   white-space: nowrap;
 }
 .rs-text {
-  font-family: Apple-System, Arial, Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', STXihei, sans-serif;
+  --rs-text-color: var(--rs-text-primary);
+  font-family: -apple-system, BlinkMacSystemFont, Arial, Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', STXihei, sans-serif;
   line-height: 1.42857143;
-  color: var(--rs-text-primary);
+  color: var(--rs-text-color);
   margin: 0;
 }
 blockquote.rs-text {
@@ -14487,25 +14499,32 @@ kbd.rs-text {
   }
 }
 .rs-text-red {
-  color: var(--rs-red-500);
+  --rs-text-color: var(--rs-red-500);
+  color: var(--rs-text-color);
 }
 .rs-text-orange {
-  color: var(--rs-orange-500);
+  --rs-text-color: var(--rs-orange-500);
+  color: var(--rs-text-color);
 }
 .rs-text-yellow {
-  color: var(--rs-yellow-500);
+  --rs-text-color: var(--rs-yellow-500);
+  color: var(--rs-text-color);
 }
 .rs-text-green {
-  color: var(--rs-green-500);
+  --rs-text-color: var(--rs-green-500);
+  color: var(--rs-text-color);
 }
 .rs-text-cyan {
-  color: var(--rs-cyan-500);
+  --rs-text-color: var(--rs-cyan-500);
+  color: var(--rs-text-color);
 }
 .rs-text-blue {
-  color: var(--rs-blue-500);
+  --rs-text-color: var(--rs-blue-500);
+  color: var(--rs-text-color);
 }
 .rs-text-violet {
-  color: var(--rs-violet-500);
+  --rs-text-color: var(--rs-violet-500);
+  color: var(--rs-text-color);
 }
 .rs-heading {
   font-family: inherit;
@@ -14849,6 +14868,10 @@ kbd.rs-text {
 .rs-picker-default .rs-picker-toggle.rs-btn .rs-picker-toggle-indicator .rs-picker-clean {
   top: 7px;
 }
+.rs-picker-toggle.rs-btn .rs-picker-toggle-indicator .rs-picker-loader {
+  top: 8px;
+  left: 12px;
+}
 .rs-picker-default .rs-picker-toggle.rs-btn {
   padding-top: 7px;
   padding-bottom: 7px;
@@ -14922,6 +14945,10 @@ kbd.rs-text {
 .rs-picker-default .rs-picker-toggle.rs-btn-lg .rs-picker-toggle-indicator .rs-picker-clean {
   top: 9px;
 }
+.rs-picker-toggle.rs-btn-lg .rs-picker-toggle-indicator .rs-picker-loader {
+  top: 10px;
+  left: 16px;
+}
 .rs-picker-default .rs-picker-toggle.rs-btn-lg {
   padding-top: 9px;
   padding-bottom: 9px;
@@ -14964,6 +14991,10 @@ kbd.rs-text {
 .rs-picker-default .rs-picker-toggle.rs-btn-md .rs-picker-toggle-indicator .rs-picker-clean {
   top: 7px;
 }
+.rs-picker-toggle.rs-btn-md .rs-picker-toggle-indicator .rs-picker-loader {
+  top: 8px;
+  left: 12px;
+}
 .rs-picker-default .rs-picker-toggle.rs-btn-md {
   padding-top: 7px;
   padding-bottom: 7px;
@@ -15040,6 +15071,10 @@ kbd.rs-text {
 .rs-picker-default .rs-picker-toggle.rs-btn-sm .rs-picker-toggle-indicator .rs-picker-clean {
   top: 4px;
 }
+.rs-picker-toggle.rs-btn-sm .rs-picker-toggle-indicator .rs-picker-loader {
+  top: 5px;
+  left: 10px;
+}
 .rs-picker-default .rs-picker-toggle.rs-btn-sm {
   padding-top: 4px;
   padding-bottom: 4px;
@@ -15116,6 +15151,10 @@ kbd.rs-text {
 .rs-picker-default .rs-picker-toggle.rs-btn-xs .rs-picker-toggle-indicator .rs-picker-clean {
   top: 1px;
 }
+.rs-picker-toggle.rs-btn-xs .rs-picker-toggle-indicator .rs-picker-loader {
+  top: 2px;
+  left: 8px;
+}
 .rs-picker-default .rs-picker-toggle.rs-btn-xs {
   padding-top: 1px;
   padding-bottom: 1px;