rsuite 6.0.0-canary-2025032014 → 6.0.0-canary-20250416

package/cjs/useMediaQuery/breakpoints.js

@@ -0,0 +1,248 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.createBreakpoints = createBreakpoints;
+/**
+ * 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)'
+ * ```
+ */
+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/cjs/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/cjs/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/cjs/useMediaQuery/types.js

@@ -0,0 +1,4 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;

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

@@ -3,23 +3,31 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.mediaQuerySizeMap = exports.default = void 0;
+exports.default = void 0;
 exports.useMediaQuery = useMediaQuery;
-var _react = require("react");
 var _canUseDOM = _interopRequireDefault(require("dom-lib/canUseDOM"));
-const mediaQuerySizeMap = exports.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)'
+var _react = require("react");
+var _breakpoints = require("./breakpoints");
+// 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 = (0, _breakpoints.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.default) {
     return window.matchMedia(query);
@@ -35,10 +43,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
  */
-function useMediaQuery(query) {
+function useMediaQuery(query, enabled) {
+  if (enabled === void 0) {
+    enabled = true;
+  }
   const queries = Array.isArray(query) ? query : [query];
   const mediaQueries = (0, _react.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 = (0, _react.useRef)(mediaQueries.map(query => matchMedia(query).matches));
   const subscribe = (0, _react.useCallback)(callback => {
     const list = mediaQueries.map(query => matchMedia(query));

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

@@ -15,7 +15,7 @@ var _CustomProvider = require("../CustomProvider/CustomProvider");
  * 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 {