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

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;

package/internals/Picker/styles/index.less

@@ -25,19 +25,16 @@
   --rs-picker-toggle-border-width: 1px;
   --rs-picker-toggle-bg: var(--rs-input-bg);
 
-  &-toggle-wrapper {
-    display: inline-block;
-    // Clear whitespace.
-    vertical-align: middle;
-    max-width: 100%;
-  }
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 100%;
 
-  &-block {
+  &[data-block='true'] {
     display: block;
     width: 100%;
   }
 
-  &-disabled {
+  &[data-disabled='true'] {
     cursor: not-allowed;
 
     .rs-picker-toggle-value,
@@ -60,11 +57,6 @@
     color: var(--rs-picker-value);
   }
 
-  &-countable &-toggle-value {
-    display: flex;
-    align-items: center;
-  }
-
   &-value-list {
     flex: 0 1 auto;
     .ellipsis-basic();
@@ -74,13 +66,14 @@
     margin-inline: var(--rs-picker-value-count-margin);
     background-color: var(--rs-picker-count-bg);
     color: var(--rs-picker-count-text);
+    flex-shrink: 0;
   }
 
   &-value-separator {
     margin: 0 var(--rs-spacing) 0 0;
   }
 
-  &:not(.rs-picker-disabled):hover,
+  &:not([data-disabled='true']):hover,
   &.rs-picker-focused {
     border-color: var(--rs-input-focus-border);
   }
@@ -127,6 +120,7 @@
   --rs-picker-popup-shadow: var(--rs-shadow-md);
   --rs-picker-popup-position-x: var(--rs-position-x);
   --rs-picker-popup-position-y: var(--rs-position-y);
+  --rs-picker-min-width: 0;
 
   position: absolute;
   top: var(--rs-picker-popup-position-y);
@@ -141,6 +135,7 @@
   background-color: var(--rs-bg-overlay);
   box-shadow: var(--rs-picker-popup-shadow);
   padding-block: var(--rs-picker-popup-border-radius);
+  min-width: var(--rs-picker-min-width);
 
   .high-contrast-mode({
     border: 1px solid var(--rs-border-primary);
@@ -175,14 +170,62 @@
     color: var(--rs-text-secondary);
     cursor: default;
   }
+
+  .rs-picker-listbox {
+    max-height: var(--rs-picker-listbox-max-height);
+  }
+
+  // Responsive popup
+  &[data-breakpoint='xs'] {
+    min-width: unset;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+
+    .rs-picker-listbox {
+      height: unset;
+      max-height: unset;
+    }
+
+    .rs-tree,
+    .rs-check-tree {
+      display: flex;
+      flex-direction: column;
+      &-view {
+        max-height: unset;
+        flex: 1 1 auto;
+      }
+    }
+
+    .rs-calendar-table {
+      width: 100%;
+    }
+
+    .rs-picker-box {
+      width: 100%;
+      height: 100%;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    &.rs-picker-popup-date,
+    .rs-picker-daterange-panel-only-time {
+      .rs-calendar {
+        height: 348px;
+      }
+    }
+  }
 }
 
 .rs-picker-toggle {
+  --rs-badge-one-char-size: 18px;
+
   .picker-default-toggle();
   .picker-subtle-toggle();
 
   &-label {
-    color: var(--rs-text-primary);
+    color: var(--rs-text-secondary);
   }
 
   .rs-picker-toggle-stack {
@@ -226,7 +269,8 @@
     opacity: 0;
   }
 
-  .rs-picker-default & {
+  .rs-picker[data-variant='default'],
+  & {
     transition: @picker-transition;
 
     .high-contrast-mode({
@@ -234,7 +278,8 @@
     });
   }
 
-  .rs-picker-default:not(.rs-picker-disabled) & {
+  .rs-picker[data-variant='default'],
+  :not([data-disabled='true']) & {
     &:hover,
     &:focus,
     &-active {
@@ -242,7 +287,7 @@
     }
   }
 
-  .rs-picker-subtle & {
+  .rs-picker[data-variant='subtle'] & {
     .rs-btn-subtle();
 
     transition: none;
@@ -252,6 +297,43 @@
       color: var(--rs-btn-subtle-hover-text);
     }
   }
+
+  &[data-size='lg'] {
+    --rs-badge-one-char-size: 20px;
+    .rs-picker-clean {
+      .rs-icon {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
+  &[data-size='md'] {
+    --rs-badge-one-char-size: 18px;
+  }
+
+  &[data-size='sm'] {
+    --rs-badge-one-char-size: 16px;
+    .rs-picker-clean {
+      height: 18px;
+    }
+  }
+
+  &[data-size='xs'] {
+    --rs-badge-one-char-size: 14px;
+    .rs-picker-clean {
+      height: 18px;
+      .rs-icon {
+        width: 12px;
+        height: 12px;
+      }
+    }
+  }
+
+  &[data-countable='true'] &-value {
+    display: flex;
+    align-items: center;
+  }
 }
 
 .rs-picker-toggle.rs-btn {
@@ -292,19 +374,19 @@
 }
 
 // Make sure styles the same with <Input>
-.rs-picker-default,
+.rs-picker[data-variant='default'],
 .rs-picker-input {
   .rs-btn,
   .rs-picker-toggle {
     background-color: var(--rs-picker-toggle-bg);
   }
 
-  &.rs-picker-disabled {
+  &[data-disabled='true'] {
     --rs-picker-toggle-bg: var(--rs-input-disabled-bg);
-  }
 
-  &.rs-picker-disabled .rs-input-group {
-    pointer-events: none;
+    .rs-input-group {
+      pointer-events: none;
+    }
   }
 }
 

package/internals/Picker/styles/mixin.less

@@ -3,7 +3,7 @@
 @import '../../../Dropdown/styles/mixin.less';
 
 // Picker Menu items common styles
-.picker-menu-items-reset() {
+.picker-listbox-reset() {
   overflow-y: auto;
 
   ul {
@@ -91,16 +91,16 @@
 
 // Default picker toggle
 .picker-default-toggle() {
-  .rs-picker-default & {
+  [data-variant='default'] & {
     color: var(--rs-text-primary);
     border: var(--rs-picker-toggle-border-width) solid var(--rs-border-primary);
   }
 
-  .rs-picker-disabled & {
+  [data-disabled='true'] & {
     cursor: @cursor-disabled;
   }
 
-  .rs-picker-default:not(.rs-picker-disabled) {
+  [data-variant='default']:not([data-disabled='true']) {
     &:hover,
     &:focus {
       border-color: var(--rs-input-focus-border);
@@ -110,12 +110,12 @@
 
 // Subtle picker toggle
 .picker-subtle-toggle {
-  .rs-picker-subtle & {
+  .rs-picker[data-variant='subtle'] & {
     --rs-picker-toggle-border-width: 0px;
     .dropdown-toggle();
   }
 
-  .rs-picker-subtle.rs-picker-disabled & {
+  .rs-picker[data-variant='subtle'][data-disabled='true'] & {
     cursor: @cursor-disabled;
 
     &:hover,