rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-20250315

package/esm/internals/Picker/hooks/usePickerRef.d.ts

@@ -1,16 +1,16 @@
 /// <reference types="react" />
-import type { OverlayTriggerHandle } from '../PickerToggleTrigger';
+import type { OverlayTriggerHandle } from '../../Overlay';
 import type { ListHandle } from '../../Windowing';
 /**
  * A hook of the exposed method of Picker
  */
 declare function usePickerRef(ref: any): {
-    trigger: import("react").RefObject<OverlayTriggerHandle>;
-    root: import("react").MutableRefObject<any>;
-    overlay: import("react").RefObject<HTMLElement>;
-    target: import("react").RefObject<HTMLElement>;
-    list: import("react").RefObject<ListHandle>;
-    searchInput: import("react").RefObject<HTMLInputElement>;
-    treeView: import("react").RefObject<HTMLDivElement>;
+    trigger: import("react").RefObject<OverlayTriggerHandle | null>;
+    root: import("react").RefObject<any>;
+    overlay: import("react").RefObject<HTMLElement | null>;
+    target: import("react").RefObject<HTMLElement | null>;
+    list: import("react").RefObject<ListHandle | null>;
+    searchInput: import("react").RefObject<HTMLInputElement | null>;
+    treeView: import("react").RefObject<HTMLDivElement | null>;
 };
 export default usePickerRef;

package/esm/internals/Picker/index.d.ts

@@ -11,6 +11,6 @@ export { default as SelectedElement } from './SelectedElement';
 export { pickTriggerPropKeys, omitTriggerPropKeys } from './PickerToggleTrigger';
 export * from './hooks';
 export * from './utils';
-export type { OverlayTriggerHandle, PositionChildProps } from './PickerToggleTrigger';
+export type { OverlayTriggerHandle, PositionChildProps } from '../Overlay/types';
 export type { PickerToggleProps } from './PickerToggle';
 export type { PickerHandle } from './types';

package/esm/internals/Plaintext/Plaintext.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import { forwardRef } from "../utils/index.js";
-import { useClassNames } from "../hooks/index.js";
+import { useStyles } from "../hooks/index.js";
 import { useCustom } from "../../CustomProvider/index.js";
 /**
  * Make the component display in plain text, and display default characters when there is no children.
@@ -22,10 +22,10 @@ const Plaintext = forwardRef((props, ref) => {
     ...rest
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix({
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix({
     empty: !children
   }));
   return /*#__PURE__*/React.createElement(Component, _extends({

package/esm/internals/Ripple/Ripple.js

@@ -4,7 +4,7 @@ import React, { useRef, useState, useEffect, useCallback } from 'react';
 import getOffset from 'dom-lib/getOffset';
 import on from 'dom-lib/on';
 import Transition from "../../Animation/Transition.js";
-import { useClassNames } from "../hooks/index.js";
+import { useStyles } from "../hooks/index.js";
 import { mergeRefs, forwardRef } from "../utils/index.js";
 import { useCustom } from "../../CustomProvider/index.js";
 const getPosition = (target, event) => {
@@ -40,8 +40,8 @@ const Ripple = forwardRef((props, ref) => {
   const {
     merge,
     prefix,
-    withClassPrefix
-  } = useClassNames(classPrefix);
+    withPrefix
+  } = useStyles(classPrefix);
   const classes = merge(className, prefix('pond'));
   const triggerRef = useRef(null);
   const [rippling, setRippling] = useState(false);
@@ -84,7 +84,7 @@ const Ripple = forwardRef((props, ref) => {
     } = props;
     return /*#__PURE__*/React.createElement("span", _extends({}, transitionRest, {
       ref: ref,
-      className: merge(withClassPrefix(), className),
+      className: merge(withPrefix(), className),
       style: position
     }));
   }));

package/esm/internals/ScrollView/ScrollView.js

@@ -1,7 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
-import { useClassNames } from "../hooks/index.js";
+import { useStyles } from "../hooks/index.js";
 import { forwardRef, createChainedFunction, mergeRefs } from "../utils/index.js";
 import { useScrollState } from "./hooks/useScrollState.js";
 const ScrollView = forwardRef((props, ref) => {
@@ -21,8 +21,8 @@ const ScrollView = forwardRef((props, ref) => {
   } = props;
   const {
     merge,
-    withClassPrefix
-  } = useClassNames(classPrefix);
+    withPrefix
+  } = useStyles(classPrefix);
   const {
     scrollState,
     handleScroll,
@@ -33,7 +33,7 @@ const ScrollView = forwardRef((props, ref) => {
     width,
     ...style
   };
-  const bodyClasses = merge(className, withClassPrefix({
+  const bodyClasses = merge(className, withPrefix({
     shadow: scrollShadow,
     'thumb-top': scrollState === 'top',
     'thumb-middle': scrollState === 'middle',

package/esm/internals/ScrollView/hooks/useScrollState.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare function useScrollState(scrollShadow?: boolean): {
-    scrollState: "bottom" | "top" | "middle" | null;
+    scrollState: "top" | "bottom" | "middle" | null;
     handleScroll: ((...args: any[]) => any) | undefined;
-    bodyRef: import("react").RefObject<HTMLDivElement>;
+    bodyRef: import("react").RefObject<HTMLDivElement | null>;
 };

package/esm/internals/SearchBox/SearchBox.js

@@ -4,7 +4,7 @@ import React from 'react';
 import SearchIcon from '@rsuite/icons/Search';
 import Input from "../../Input/index.js";
 import InputGroup from "../../InputGroup/index.js";
-import { useClassNames } from "../hooks/index.js";
+import { useStyles } from "../hooks/index.js";
 import { forwardRef } from "../utils/index.js";
 const SearchBox = forwardRef((props, ref) => {
   const {
@@ -18,11 +18,11 @@ const SearchBox = forwardRef((props, ref) => {
     ...rest
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     prefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix());
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes

package/esm/internals/StyledBox/StyledBox.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { BoxProps } from '../Box';
+import type { Size, Color } from '../types';
+export interface StyledBoxProps extends BoxProps {
+    /** Name of the Box */
+    name: string;
+    /** Size of the Box */
+    size?: Size | number | string;
+    /** Color of the Box */
+    color?: Color | React.CSSProperties['color'];
+}
+declare const StyledBox: import("../types").InternalRefForwardingComponent<"div", StyledBoxProps, never> & Record<string, never>;
+export default StyledBox;

package/esm/internals/StyledBox/StyledBox.js

@@ -0,0 +1,23 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import Box from "../Box/index.js";
+import { forwardRef, mergeStyles, getSizeStyle, getColorStyle } from "../utils/index.js";
+const StyledBox = forwardRef((props, ref) => {
+  const {
+    as,
+    color,
+    name,
+    style,
+    size,
+    ...rest
+  } = props;
+  const boxStyle = mergeStyles(style, getSizeStyle(size, name), getColorStyle(color, name));
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
+    ref: ref,
+    style: boxStyle
+  }, rest));
+});
+StyledBox.displayName = 'StyledBox';
+export default StyledBox;

package/esm/internals/StyledBox/index.d.ts

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

package/esm/internals/StyledBox/index.js

@@ -0,0 +1,4 @@
+'use client';
+import StyledBox from "./StyledBox.js";
+export { StyledBox };
+export default StyledBox;

package/esm/internals/Windowing/AutoSizer.js

@@ -1,10 +1,10 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useState, useRef } from 'react';
-import { useCallback } from 'react';
 import getStyle from 'dom-lib/getStyle';
+import { useCallback } from 'react';
 import { useElementResize, useMount } from "../hooks/index.js";
-import { mergeRefs } from "../utils/index.js";
+import { mergeRefs, mergeStyles } from "../utils/index.js";
 /**
  * High-order component that automatically adjusts the width and height of a single child.
  *
@@ -74,10 +74,7 @@ const AutoSizer = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement("div", _extends({
     className: className,
     ref: mergeRefs(rootRef, ref),
-    style: {
-      ...outerStyle,
-      ...style
-    }
+    style: mergeStyles(outerStyle, style)
   }, rest), children(childParams));
 });
 AutoSizer.displayName = 'AutoSizer';

package/esm/internals/constants/index.d.ts

@@ -1,5 +1,5 @@
 export declare const SIZE: string[];
-export declare const COLUMN_SIZE: string[];
+export declare const BREAKPOINTS: string[];
 export declare const STATUS: string[];
 export declare const COLOR: string[];
 export declare const PLACEMENT_4: readonly ["top", "bottom", "right", "left"];

package/esm/internals/constants/index.js

@@ -1,6 +1,6 @@
 'use client';
 export const SIZE = ['lg', 'md', 'sm', 'xs'];
-export const COLUMN_SIZE = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+export const BREAKPOINTS = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
 export const STATUS = ['success', 'warning', 'error', 'info'];
 export const COLOR = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'];
 export const PLACEMENT_4 = ['top', 'bottom', 'right', 'left'];

package/esm/internals/hooks/index.d.ts

@@ -1,4 +1,4 @@
-export { useClassNames } from './useClassNames';
+export { useStyles } from './useStyles';
 export { useClickOutside } from './useClickOutside';
 export { useControlled } from './useControlled';
 export { useElementResize } from './useElementResize';

package/esm/internals/hooks/index.js

@@ -1,5 +1,5 @@
 'use client';
-export { useClassNames } from "./useClassNames.js";
+export { useStyles } from "./useStyles.js";
 export { useClickOutside } from "./useClickOutside.js";
 export { useControlled } from "./useControlled.js";
 export { useElementResize } from "./useElementResize.js";

package/esm/internals/hooks/useElementResize.js

@@ -10,7 +10,7 @@ import { ResizeObserver } from '@juggle/resize-observer';
  * @param listener An event handler
  */
 export function useElementResize(eventTarget, listener) {
-  const resizeObserver = useRef();
+  const resizeObserver = useRef(null);
   useEffect(() => {
     if (!resizeObserver.current) {
       const target = typeof eventTarget === 'function' ? eventTarget() : eventTarget;

package/esm/internals/hooks/useEnsuredRef.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 /**
  * Used in forwardRef components to ensure ref exists
  * so that calling ref.current shall not throw error
@@ -20,5 +19,5 @@ import React from 'react';
  * });
  *
  */
-export declare function useEnsuredRef<T = undefined>(ref: any): React.MutableRefObject<T | undefined>;
+export declare function useEnsuredRef<T = undefined>(ref: any): any;
 export default useEnsuredRef;

package/esm/internals/hooks/useEnsuredRef.js

@@ -23,7 +23,7 @@ import { useRef } from 'react';
  *
  */
 export function useEnsuredRef(ref) {
-  const dumpRef = useRef();
+  const dumpRef = useRef(null);
   if (ref) {
     return ref;
   }

package/esm/internals/hooks/useFocus.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare function useFocus<E extends HTMLElement>(elementRef: React.RefObject<E>): {
+export declare function useFocus<E extends HTMLElement>(elementRef: React.RefObject<E | null>): {
     grab: () => void;
     release: (options?: FocusOptions) => void;
 };

package/esm/internals/hooks/useFocusVirtualListItem.d.ts

@@ -6,5 +6,5 @@
  * @param focused - Boolean indicating if the item should be focused.
  * @returns A ref to be attached to the list item element.
  */
-export declare function useFocusVirtualListItem<T extends HTMLElement>(focused?: boolean): import("react").RefObject<T>;
+export declare function useFocusVirtualListItem<T extends HTMLElement>(focused?: boolean): import("react").RefObject<T | null>;
 export default useFocusVirtualListItem;

package/esm/internals/hooks/useInternalId.js

@@ -6,7 +6,7 @@ import uniqueId from 'lodash/uniqueId';
  * Used for generating unique ID for DOM elements
  */
 export function useInternalId(namespace) {
-  const idRef = useRef();
+  const idRef = useRef(null);
   if (!idRef.current) {
     idRef.current = uniqueId(`internal://${namespace}`);
   }

package/esm/internals/hooks/useRootClose.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-type TargetType = React.RefObject<Element> | Element | null | undefined;
+type TargetType = React.RefObject<Element | null> | Element | null | undefined;
 interface Options {
     disabled: boolean;
     triggerTarget: TargetType;

package/{cjs/internals/hooks/useClassNames.d.ts → esm/internals/hooks/useStyles.d.ts}

@@ -1,24 +1,29 @@
+import type { ResponsiveValue } from '../types';
 export type ClassValue = string | number | ClassDictionary | ClassArray | undefined | null | boolean;
 export type ClassArray = Array<ClassValue>;
 export interface ClassDictionary {
     [id: string]: any;
 }
 interface ClassNameUtils {
-    withClassPrefix: (...classes: ClassValue[]) => string;
+    withPrefix: (...classes: ClassValue[]) => string;
     merge: (...classes: ClassValue[]) => string;
     prefix: (...classes: ClassValue[]) => string;
+    responsive: <T = string>(value?: T | ResponsiveValue<T>) => string[];
     rootPrefix: (...classes: ClassValue[]) => string;
+    cssVar: (prop: string, value?: string | number | (string | number)[], valueTransformer?: (value: any) => any) => {
+        [x: string]: string | number | undefined;
+    } | undefined;
 }
 /**
  * Add a prefix to all classNames.
  *
  * @param str prefix of className
- * @returns { withClassPrefix, merge, prefix }
- *  - withClassPrefix: A function of combining className and adding a prefix to each className.
+ * @returns { withPrefix, merge, prefix }
+ *  - withPrefix: A function of combining className and adding a prefix to each className.
  *    At the same time, the default `classPrefix` is the first className.
  *  - merge: A merge className function.
  *  - prefix: Add a prefix to className
  *  - rootPrefix
  */
-export declare function useClassNames(str: string): ClassNameUtils;
-export default useClassNames;
+export declare function useStyles(str: string): ClassNameUtils;
+export default useStyles;

package/esm/internals/hooks/{useClassNames.js → useStyles.js}

@@ -1,7 +1,7 @@
 'use client';
-import { useCallback, useContext } from 'react';
 import classNames from 'classnames';
-import { prefix as addPrefix } from "../utils/prefix.js";
+import { useCallback, useContext } from 'react';
+import { createStyleGetter, prefix as addPrefix, getResponsiveClasses } from "../utils/index.js";
 import { CustomContext } from "../../CustomProvider/CustomProvider.js";
 
 // This is the only way I found to break circular references between ClassArray and ClassValue
@@ -11,18 +11,18 @@ import { CustomContext } from "../../CustomProvider/CustomProvider.js";
  * Add a prefix to all classNames.
  *
  * @param str prefix of className
- * @returns { withClassPrefix, merge, prefix }
- *  - withClassPrefix: A function of combining className and adding a prefix to each className.
+ * @returns { withPrefix, merge, prefix }
+ *  - withPrefix: A function of combining className and adding a prefix to each className.
  *    At the same time, the default `classPrefix` is the first className.
  *  - merge: A merge className function.
  *  - prefix: Add a prefix to className
  *  - rootPrefix
  */
-export function useClassNames(str) {
+export function useStyles(str) {
   const {
     classPrefix = 'rs'
   } = useContext(CustomContext) || {};
-  const componentName = addPrefix(classPrefix, str);
+  const baseClass = addPrefix(classPrefix, str);
 
   /**
    * @example
@@ -31,23 +31,23 @@ export function useClassNames(str) {
    * prefix('red', { active: true }) => 'rs-button-red rs-button-active'
    */
   const prefix = useCallback(function () {
-    const mergeClasses = arguments.length ? classNames(...arguments).split(' ').map(item => addPrefix(componentName, item)) : [];
+    const mergeClasses = arguments.length ? classNames(...arguments).split(' ').map(item => addPrefix(baseClass, item)) : [];
     return mergeClasses.filter(cls => cls).join(' ');
-  }, [componentName]);
+  }, [baseClass]);
 
   /**
    * @example
    *
    * if str = 'button':
-   * withClassPrefix('red', { active: true }) => 'rs-button rs-button-red rs-button-active'
+   * withPrefix('red', { active: true }) => 'rs-button rs-button-red rs-button-active'
    */
-  const withClassPrefix = useCallback(function () {
+  const withPrefix = useCallback(function () {
     for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
       classes[_key] = arguments[_key];
     }
     const mergeClasses = prefix(classes);
-    return mergeClasses ? `${componentName} ${mergeClasses}` : componentName;
-  }, [componentName, prefix]);
+    return mergeClasses ? `${baseClass} ${mergeClasses}` : baseClass;
+  }, [baseClass, prefix]);
 
   /**
    * @example
@@ -58,11 +58,26 @@ export function useClassNames(str) {
     const mergeClasses = arguments.length ? classNames(...arguments).split(' ').map(item => addPrefix(classPrefix, item)) : [];
     return mergeClasses.filter(cls => cls).join(' ');
   };
+  const cssVar = useCallback((prop, value, valueTransformer) => {
+    if (typeof value === 'undefined') {
+      return;
+    }
+    return createStyleGetter({
+      prop,
+      valueTransformer
+    })(value, str, prop);
+  }, [str]);
+  const responsive = useCallback(value => {
+    if (!value) return [];
+    return getResponsiveClasses(prefix, value);
+  }, [prefix]);
   return {
-    withClassPrefix,
-    merge: classNames,
+    cssVar,
+    withPrefix,
     prefix,
-    rootPrefix
+    responsive,
+    rootPrefix,
+    merge: classNames
   };
 }
-export default useClassNames;
+export default useStyles;

package/esm/internals/hooks/useTimeout.js

@@ -13,7 +13,7 @@ export function useTimeout(fn, ms, enabled) {
   if (enabled === void 0) {
     enabled = true;
   }
-  const timeout = useRef();
+  const timeout = useRef(null);
   const callback = useRef(fn);
   const clear = useCallback(() => {
     timeout.current && clearTimeout(timeout.current);

package/esm/internals/hooks/useUpdatedRef.d.ts

@@ -5,5 +5,5 @@
  * @param value The Ref value
  * @category refs
  */
-export declare function useUpdatedRef<T>(value: T): import("react").MutableRefObject<T>;
+export declare function useUpdatedRef<T>(value: T): import("react").RefObject<T>;
 export default useUpdatedRef;

package/esm/internals/types/colours.d.ts

@@ -7,4 +7,8 @@ export declare enum Colours {
     Blue = "blue",
     Violet = "violet"
 }
+export type ShadeValue = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 export type Color = `${Colours}`;
+export type ColorGray = 'gray';
+export type ColorShade = `${Colours}.${ShadeValue}` | `${ColorGray}.${ShadeValue}`;
+export type ColorScheme = Color | ColorShade;

package/esm/internals/types/colours.js

@@ -8,4 +8,12 @@ export let Colours = /*#__PURE__*/function (Colours) {
   Colours["Blue"] = "blue";
   Colours["Violet"] = "violet";
   return Colours;
-}({});
+}({});
+
+// Define available shade values
+
+// Basic color type without shades
+
+// Color with shade type (e.g., red.50, blue.500)
+
+// Combined type that allows both basic colors and colors with shades

package/esm/internals/types/form.d.ts

@@ -1,21 +1,21 @@
 import { InputHTMLAttributes, SyntheticEvent } from 'react';
-export interface FormControlBaseProps<ValueType = InputHTMLAttributes<HTMLInputElement>['value']> {
+export interface FormControlBaseProps<T = InputHTMLAttributes<HTMLInputElement>['value']> {
     /** Name of the form field */
     name?: string;
     /** Initial value */
-    defaultValue?: ValueType;
+    defaultValue?: T;
     /** Current value of the component. Creates a controlled component */
-    value?: ValueType;
-    /**
-     * Called after the value has been changed
-     * todo Override event as ChangeEvent in components where onChange is delegated
-     *      to an underlying <input> element
-     */
-    onChange?: (value: ValueType, event: SyntheticEvent) => void;
+    value?: T;
     /** Set the component to be disabled and cannot be entered */
     disabled?: boolean;
     /** Render the control as plain text */
     plaintext?: boolean;
     /** Make the control readonly */
     readOnly?: boolean;
+    /**
+     * Called after the value has been changed
+     * todo Override event as ChangeEvent in components where onChange is delegated
+     *      to an underlying <input> element
+     */
+    onChange?: (value: T, event: SyntheticEvent) => void;
 }

package/esm/internals/types/html.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+/** React element with optional props and HTML attributes. */
+export type ReactElement<P = any> = React.ReactElement<P & React.HTMLAttributes<any>>;
+/** Removes 'onSelect' property from the given type. */
+export type PropsWithoutSelect<T> = Omit<T, 'onSelect'>;
+/** Removes 'onChange' property from the given type. */
+export type PropsWithoutChange<T> = Omit<T, 'onChange'>;
+export type PropsWithout<T, K extends keyof T> = Omit<T, K>;
+/** HTML props excluding 'onSelect' attribute. */
+export type HTMLPropsWithoutSelect<T extends HTMLElement = HTMLElement, P extends Record<string, any> = React.HTMLAttributes<T>> = PropsWithoutSelect<P>;
+/** HTML props excluding 'onChange' attribute. */
+export type HTMLPropsWithoutChange<T extends HTMLElement = HTMLElement, P extends Record<string, any> = React.HTMLAttributes<T>> = PropsWithoutChange<P>;
+/** Input props with 'onChange' and 'size' attributes removed. */
+export type SanitizedInputProps = PropsWithout<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>;
+/** HTML props excluding 'title', 'onToggle', and 'onSelect' attributes. */
+export type SanitizedHTMListProps<T extends HTMLElement = HTMLElement, P extends Record<string, any> = React.HTMLAttributes<T>> = PropsWithout<P, 'title' | 'onToggle' | 'onSelect'>;
+export type WithoutChildren<T> = Omit<T, 'children'>;
+export type CSSVariables = Partial<Record<`--${string}`, string | number | undefined>>;
+export type StyleProperties = React.CSSProperties | CSSVariables;

package/esm/internals/types/html.js

@@ -0,0 +1,2 @@
+'use client';
+export {};

package/esm/internals/types/index.d.ts

@@ -7,3 +7,5 @@ export * from './date';
 export * from './form';
 export * from './picker';
 export * from './utils';
+export * from './html';
+export * from './sizes';

package/esm/internals/types/index.js

@@ -7,4 +7,6 @@ export * from "./colours.js";
 export * from "./date.js";
 export * from "./form.js";
 export * from "./picker.js";
-export * from "./utils.js";
+export * from "./utils.js";
+export * from "./html.js";
+export * from "./sizes.js";