rsuite 6.0.0-canary-2025032014 → 6.0.0-canary-20250403

package/esm/internals/utils/react/index.d.ts

@@ -0,0 +1,7 @@
+export * from './getDOMNode';
+export * from './ReactChildren';
+export * from './deprecateComponent';
+export * from './createComponent';
+export * from './forwardRef';
+export * from './mergeRefs';
+export * from './ReactIs';

package/esm/internals/utils/react/index.js

@@ -0,0 +1,8 @@
+'use client';
+export * from "./getDOMNode.js";
+export * from "./ReactChildren.js";
+export * from "./deprecateComponent.js";
+export * from "./createComponent.js";
+export * from "./forwardRef.js";
+export * from "./mergeRefs.js";
+export * from "./ReactIs.js";

package/esm/internals/utils/{getStringLength.d.ts → string/getStringLength.d.ts}

@@ -1,2 +1 @@
 export declare function getStringLength(str: string): number;
-export default getStringLength;

package/esm/internals/utils/{getStringLength.js → string/getStringLength.js}

@@ -9,5 +9,4 @@ export function getStringLength(str) {
     }
   });
   return length;
-}
-export default getStringLength;
+}

package/esm/internals/utils/string/index.d.ts

@@ -0,0 +1,4 @@
+export * from './getSafeRegExpString';
+export * from './getStringLength';
+export * from './stringifyReactNode';
+export * from './tplTransform';

package/esm/internals/utils/string/index.js

@@ -0,0 +1,5 @@
+'use client';
+export * from "./getSafeRegExpString.js";
+export * from "./getStringLength.js";
+export * from "./stringifyReactNode.js";
+export * from "./tplTransform.js";

package/esm/locales/en_GB.js

@@ -85,7 +85,7 @@ export default {
     expandText: 'Show path'
   },
   Toggle: {
-    on: 'Open',
-    off: 'Close'
+    on: 'ON',
+    off: 'OFF'
   }
 };

package/esm/locales/en_US.js

@@ -81,7 +81,7 @@ export default {
     expandText: 'Show path'
   },
   Toggle: {
-    on: 'Open',
-    off: 'Close'
+    on: 'ON',
+    off: 'OFF'
   }
 };

package/esm/locales/pl_PL.js

@@ -1,5 +1,5 @@
 'use client';
-import pl from 'date-fns/locale/pl';
+import { pl } from 'date-fns/locale/pl';
 const DateTimeFormats = {
   sunday: 'Ndz',
   monday: 'Pon',

package/esm/useBreakpointValue/useBreakpointValue.d.ts

@@ -3,7 +3,11 @@ interface UseBreakpointValueOptions<T = any> {
     /**
      * The default value to return if no screen size matches.
      */
-    defaultValue: T;
+    defaultValue?: T;
+    /**
+     * Whether to enable the media query, defaults to true
+     */
+    enabled?: boolean;
 }
 /**
  * A React Hook that returns different values based on different screen sizes in responsive design.

package/esm/useBreakpointValue/useBreakpointValue.js

@@ -15,12 +15,17 @@ import useMediaQuery from "../useMediaQuery/index.js";
  */
 export function useBreakpointValue(breakpoints, options) {
   const {
-    defaultValue
+    defaultValue,
+    enabled = true
   } = options || {};
   const keys = Object.keys(breakpoints);
   const values = Object.values(breakpoints);
-  const matches = useMediaQuery(keys);
-  const index = matches.indexOf(true);
+  const matches = useMediaQuery(keys, enabled);
+
+  // Use lastIndexOf instead of indexOf to return the value of the last matching breakpoint
+  // Due to how media queries work, multiple breakpoints may match simultaneously on larger screens
+  // Using lastIndexOf ensures we return the value for the largest matching breakpoint
+  const index = matches.lastIndexOf(true);
   return index !== -1 ? values[index] : defaultValue;
 }
 export default useBreakpointValue;

package/esm/useMediaQuery/breakpoints.d.ts

@@ -0,0 +1,24 @@
+import type { BreakpointMap, BreakpointSystem } from './types';
+/**
+ * Create breakpoint system
+ *
+ * This function takes a breakpoint map and returns an enhanced breakpoint system
+ * that provides various media queries for responsive design.
+ *
+ * @example
+ * ```ts
+ * const breakpoints = createBreakpoints({
+ *   xs: '0px',
+ *   sm: '576px',
+ *   md: '768px',
+ *   lg: '992px',
+ *   xl: '1200px'
+ * });
+ *
+ * // Using breakpoints
+ * breakpoints.up('md'); // '(min-width: 768px)'
+ * breakpoints.down('lg'); // '(max-width: 991.99px)'
+ * breakpoints.between('sm', 'lg'); // '(min-width: 576px) and (max-width: 991.99px)'
+ * ```
+ */
+export declare function createBreakpoints(breakpoints: BreakpointMap): BreakpointSystem;

package/esm/useMediaQuery/breakpoints.js

@@ -0,0 +1,244 @@
+'use client';
+/**
+ * Capitalize the first letter of a string
+ */
+const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);
+
+/**
+ * Adjust max-width value to avoid breakpoint overlapping
+ */
+function adjustMaxWidth(value) {
+  // Extract numeric part and unit
+  const match = value.match(/^([\d.]+)(\w+)$/);
+  if (!match) return value;
+  const [, numStr, unit] = match;
+  const num = parseFloat(numStr);
+
+  // If value is 0, don't adjust
+  if (num === 0) return value;
+
+  // Subtract a small value to avoid overlap
+  const adjustedNum = num - 0.01;
+  return `${adjustedNum}${unit}`;
+}
+
+/**
+ * Create media query string
+ */
+function createMediaQuery(options) {
+  const {
+    min,
+    max
+  } = options;
+  if (!min && !max) return '';
+  const conditions = [];
+  if (min) conditions.push(`(min-width: ${min})`);
+  if (max) conditions.push(`(max-width: ${max})`);
+  return conditions.join(' and ');
+}
+
+/**
+ * Create traditional media query map compatible with previous versions
+ */
+function createLegacyMediaQueryMap(breakpoints) {
+  const entries = Object.entries(breakpoints);
+  const result = {};
+
+  // Special case for xs
+  const xsValue = breakpoints.xs;
+  if (xsValue) {
+    // For xs, use max-width of the next breakpoint minus 0.01
+    const nextBreakpoint = entries.find(_ref => {
+      let [key] = _ref;
+      return key === 'sm';
+    });
+    if (nextBreakpoint) {
+      result.xs = `(max-width: ${adjustMaxWidth(nextBreakpoint[1])})`;
+    } else {
+      result.xs = `(min-width: ${xsValue})`;
+    }
+  }
+
+  // For all other breakpoints, use min-width
+  entries.forEach(_ref2 => {
+    let [key, value] = _ref2;
+    if (key !== 'xs') {
+      result[key] = `(min-width: ${value})`;
+    }
+  });
+  return result;
+}
+
+/**
+ * Create breakpoint system
+ *
+ * This function takes a breakpoint map and returns an enhanced breakpoint system
+ * that provides various media queries for responsive design.
+ *
+ * @example
+ * ```ts
+ * const breakpoints = createBreakpoints({
+ *   xs: '0px',
+ *   sm: '576px',
+ *   md: '768px',
+ *   lg: '992px',
+ *   xl: '1200px'
+ * });
+ *
+ * // Using breakpoints
+ * breakpoints.up('md'); // '(min-width: 768px)'
+ * breakpoints.down('lg'); // '(max-width: 991.99px)'
+ * breakpoints.between('sm', 'lg'); // '(min-width: 576px) and (max-width: 991.99px)'
+ * ```
+ */
+export function createBreakpoints(breakpoints) {
+  // Sort breakpoints by value
+  const sortedEntries = Object.entries(breakpoints).sort((a, b) => {
+    const valueA = parseInt(a[1].replace(/[^\d]/g, ''), 10);
+    const valueB = parseInt(b[1].replace(/[^\d]/g, ''), 10);
+    return valueA - valueB;
+  });
+
+  // Create breakpoint entries with min and max values
+  const breakpointEntries = sortedEntries.map((_ref3, index) => {
+    let [name, value] = _ref3;
+    let max = null;
+
+    // If not the last breakpoint, use the next breakpoint's value minus 0.01 as the current max
+    if (index < sortedEntries.length - 1) {
+      max = adjustMaxWidth(sortedEntries[index + 1][1]);
+    }
+    return [name, {
+      name,
+      min: value,
+      max
+    }];
+  });
+  const entries = Object.fromEntries(breakpointEntries);
+
+  // Get breakpoint entry by name
+  function getEntry(name) {
+    return entries[name];
+  }
+
+  // Generate all possible breakpoint conditions
+  function generateConditions() {
+    const conditions = {};
+    const breakpointNames = Object.keys(entries);
+
+    // Create basic conditions for each breakpoint
+    breakpointNames.forEach(name => {
+      const entry = getEntry(name);
+
+      // Up condition (min-width)
+      conditions[name] = createMediaQuery({
+        min: entry.min === null ? undefined : entry.min
+      });
+
+      // Down condition (max-width)
+      conditions[`${name}Down`] = createMediaQuery({
+        max: entry.min !== null ? entry.min === '0px' ? entry.min : adjustMaxWidth(entry.min) : undefined
+      });
+
+      // Only condition (min-width and max-width)
+      conditions[`${name}Only`] = createMediaQuery({
+        min: entry.min === null ? undefined : entry.min,
+        max: entry.max === null ? undefined : entry.max
+      });
+    });
+
+    // Create range conditions
+    for (let i = 0; i < breakpointNames.length; i++) {
+      for (let j = i + 1; j < breakpointNames.length; j++) {
+        const minName = breakpointNames[i];
+        const maxName = breakpointNames[j];
+        const minEntry = getEntry(minName);
+        const maxEntry = getEntry(maxName);
+        conditions[`${minName}To${capitalize(maxName)}`] = createMediaQuery({
+          min: minEntry.min === null ? undefined : minEntry.min,
+          max: maxEntry.min !== null ? maxEntry.min === '0px' ? maxEntry.min : adjustMaxWidth(maxEntry.min) : undefined
+        });
+      }
+    }
+    return conditions;
+  }
+  const conditions = generateConditions();
+
+  // Create legacy media query map for backward compatibility
+  const legacyMap = createLegacyMediaQueryMap(breakpoints);
+
+  // Get condition by key
+  function getCondition(key) {
+    return conditions[key] || '';
+  }
+
+  // Get all breakpoint keys
+  function keys() {
+    return ['base', ...Object.keys(entries)];
+  }
+
+  // Create up media query (min-width)
+  function up(name) {
+    const entry = getEntry(name);
+    return createMediaQuery({
+      min: entry.min === null ? undefined : entry.min
+    });
+  }
+
+  // Create down media query (max-width)
+  function down(name) {
+    const entry = getEntry(name);
+    return createMediaQuery({
+      max: entry.min !== null ? entry.min === '0px' ? entry.min : adjustMaxWidth(entry.min) : undefined
+    });
+  }
+
+  // Create only media query (min-width and max-width)
+  function only(name) {
+    const entry = getEntry(name);
+    return createMediaQuery({
+      min: entry.min === null ? undefined : entry.min,
+      max: entry.max === null ? undefined : entry.max
+    });
+  }
+
+  // Create between media query
+  function between(minName, maxName) {
+    const minEntry = getEntry(minName);
+    const maxEntry = getEntry(maxName);
+    return createMediaQuery({
+      min: minEntry.min === null ? undefined : minEntry.min,
+      max: maxEntry.min !== null ? maxEntry.min === '0px' ? maxEntry.min : adjustMaxWidth(maxEntry.min) : undefined
+    });
+  }
+
+  // Create a combined media query map that merges legacy map with enhanced conditions
+  function createMediaQueryMap() {
+    // Start with legacy map for backward compatibility
+    const mediaQueryMap = {
+      ...legacyMap
+    };
+
+    // Add enhanced conditions, excluding any keys that would override legacy map
+    const breakpointKeys = Object.keys(legacyMap);
+    Object.entries(conditions).forEach(_ref4 => {
+      let [key, value] = _ref4;
+      if (!breakpointKeys.includes(key)) {
+        mediaQueryMap[key] = value;
+      }
+    });
+    return mediaQueryMap;
+  }
+  return {
+    values: Object.values(entries),
+    only,
+    keys,
+    conditions,
+    getCondition,
+    up,
+    down,
+    between,
+    legacyMap,
+    createMediaQueryMap
+  };
+}

package/esm/useMediaQuery/index.d.ts

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

package/esm/useMediaQuery/types.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Breakpoint map with breakpoint names as keys and size values as values
+ */
+export interface BreakpointMap {
+    [key: string]: string;
+}
+/**
+ * Media query map with breakpoint names as keys and media query strings as values
+ */
+export interface MediaQueryMap {
+    [key: string]: string;
+}
+/**
+ * The type of the query parameter.
+ */
+export type Query = string;
+/**
+ * Breakpoint entry with name, min and max values
+ */
+export interface BreakpointEntry {
+    name: string;
+    min: string | null;
+    max: string | null;
+}
+/**
+ * Map of breakpoint condition names to media query strings
+ */
+export interface BreakpointConditions {
+    [key: string]: string;
+}
+/**
+ * Result of createBreakpoints function
+ */
+export interface BreakpointSystem {
+    values: BreakpointEntry[];
+    only: (name: string) => string;
+    keys: () => string[];
+    conditions: BreakpointConditions;
+    getCondition: (key: string) => string;
+    up: (name: string) => string;
+    down: (name: string) => string;
+    between: (minName: string, maxName: string) => string;
+    legacyMap: MediaQueryMap;
+    createMediaQueryMap: () => MediaQueryMap;
+}

package/esm/useMediaQuery/types.js

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

package/esm/useMediaQuery/useMediaQuery.d.ts

@@ -1,20 +1,11 @@
-export declare const mediaQuerySizeMap: {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    xxl: string;
-};
-/**
- * The type of the query parameter.
- */
-export type Query = string | keyof typeof mediaQuerySizeMap;
+import type { Query } from './types';
 /**
  * React hook that tracks state of a CSS media query
  * @version 5.48.0
  * @unstable Please note that this API is not stable and may change in the future.
  * @see https://rsuitejs.com/components/use-media-query
+ * @param query - The media query string or array of query strings
+ * @param enabled - Whether to enable the media query, defaults to true
  */
-export declare function useMediaQuery(query: Query | Query[]): boolean[];
+export declare function useMediaQuery(query: Query | Query[], enabled?: boolean): boolean[];
 export default useMediaQuery;

package/esm/useMediaQuery/useMediaQuery.js

@@ -1,19 +1,27 @@
 'use client';
-import { useSyncExternalStore, useCallback, useRef, useMemo } from 'react';
 import canUseDOM from 'dom-lib/canUseDOM';
-export const mediaQuerySizeMap = {
-  xs: '(max-width: 575px)',
-  sm: '(min-width: 576px)',
-  md: '(min-width: 768px)',
-  lg: '(min-width: 992px)',
-  xl: '(min-width: 1200px)',
-  xxl: '(min-width: 1400px)'
+import { useSyncExternalStore, useCallback, useRef, useMemo } from 'react';
+import { createBreakpoints } from "./breakpoints.js";
+// Basic breakpoint values definition
+const breakpointValues = {
+  xs: '0px',
+  sm: '576px',
+  md: '768px',
+  lg: '992px',
+  xl: '1200px',
+  xxl: '1400px',
+  '2xl': '1400px'
 };
 
+// Create enhanced breakpoint system
+const breakpointSystem = createBreakpoints(breakpointValues);
+
+// Create media query map that combines legacy breakpoints with enhanced conditions
+const mediaQuerySizeMap = breakpointSystem.createMediaQueryMap();
+
 /**
- * The type of the query parameter.
+ * Create a MediaQueryList object or a mock for server-side rendering
  */
-
 const matchMedia = query => {
   if (canUseDOM) {
     return window.matchMedia(query);
@@ -29,10 +37,20 @@ const matchMedia = query => {
  * @version 5.48.0
  * @unstable Please note that this API is not stable and may change in the future.
  * @see https://rsuitejs.com/components/use-media-query
+ * @param query - The media query string or array of query strings
+ * @param enabled - Whether to enable the media query, defaults to true
  */
-export function useMediaQuery(query) {
+export function useMediaQuery(query, enabled) {
+  if (enabled === void 0) {
+    enabled = true;
+  }
   const queries = Array.isArray(query) ? query : [query];
   const mediaQueries = useMemo(() => queries.map(query => mediaQuerySizeMap[query] || query), [...queries]);
+
+  // If not enabled, we don't need to set up any media queries
+  if (!enabled) {
+    return queries.map(() => false);
+  }
   const mediaQueryArray = useRef(mediaQueries.map(query => matchMedia(query).matches));
   const subscribe = useCallback(callback => {
     const list = mediaQueries.map(query => matchMedia(query));

package/esm/useToaster/useToaster.d.ts

@@ -5,7 +5,7 @@ import { ToastContainerProps } from '../toaster/ToastContainer';
  * It is often used with the Message and Notification components.
  * @returns toaster { push, remove, clear }
  *
- * @see https://rsuitejs.com/components/use-toaster/
+ * @see https://rsuitejs.com/components/toaster/
  */
 declare const useToaster: () => {
     /**

package/esm/useToaster/useToaster.js

@@ -9,7 +9,7 @@ import { CustomContext } from "../CustomProvider/CustomProvider.js";
  * It is often used with the Message and Notification components.
  * @returns toaster { push, remove, clear }
  *
- * @see https://rsuitejs.com/components/use-toaster/
+ * @see https://rsuitejs.com/components/toaster/
  */
 const useToaster = () => {
   const {

package/internals/Box/styles/index.less

@@ -27,6 +27,10 @@
   my: margin-block;
   w: width;
   h: height;
+  maxw: max-width;
+  maxh: max-height;
+  minw: min-width;
+  minh: min-height;
   c: color;
   bd: border;
   rounded: border-radius;