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

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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "6.0.0-canary-2025032014",
+  "version": "6.0.0-canary-20250403",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -37,7 +37,7 @@
     "react-use-set": "^1.0.0",
     "react-window": "^1.8.11",
     "rsuite-table": "^5.19.1",
-    "schema-typed": "^2.3.0"
+    "schema-typed": "^2.4.1"
   },
   "peerDependencies": {
     "react": ">=18",

package/styles/color-modes/dark.less

@@ -298,7 +298,7 @@
   --rs-rate-symbol-checked: var(--rs-yellow-500);
 
   // Toggle
-  --rs-toggle-bg: var(--rs-gray-400);
+  --rs-toggle-bg: var(--rs-gray-500);
   --rs-toggle-thumb: #fff;
   --rs-toggle-hover-bg: var(--rs-gray-300);
   --rs-toggle-disabled-bg: var(--rs-gray-600);

package/styles/color-modes/light.less

@@ -311,7 +311,7 @@
   --rs-rate-symbol-checked: var(--rs-blue-500);
 
   // Toggle
-  --rs-toggle-bg: var(--rs-gray-400);
+  --rs-toggle-bg: var(--rs-gray-500);
   --rs-toggle-thumb: #fff;
   --rs-toggle-loader-ring: rgb(from var(--rs-gray-50) r g b / 30%);
   --rs-toggle-loader-rotor: var(--rs-gray-0);

package/styles/index.less

@@ -47,6 +47,7 @@
 @import '../InputPicker/styles/index';
 @import '../InlineEdit/styles/index';
 @import '../Kbd/styles/index';
+@import '../Link/styles/index';
 @import '../List/styles/index';
 @import '../Loader/styles/index';
 @import '../Menu/styles/index';

package/styles/root.less

@@ -5,6 +5,8 @@
   --rs-font-family-monospace: @font-family-monospace;
 
   // Font size
+  --rs-font-size-4xs: 0.375rem; // 6px
+  --rs-font-size-3xs: 0.5rem;   // 8px
   --rs-font-size-2xs: 0.625rem; // 10px
   --rs-font-size-xs: 0.75rem;   // 12px
   --rs-font-size-sm: 0.875rem;  // 14px

package/styles/variables.less

@@ -278,21 +278,6 @@
 @toggle-active-scale: 1.2;
 @toggle-transition: 0.15s ease-out;
 
-@toggle-md-height: 24px;
-@toggle-md-handle-gap: 3px;
-@toggle-md-min-width: 44px;
-@toggle-md-handle-diameter: (@toggle-md-height - @toggle-md-handle-gap*2);
-@toggle-md-inner-margin: @padding-y;
-
-@toggle-sm-height: 14px;
-@toggle-sm-min-width: 26px;
-@toggle-sm-handle-gap: 2px;
-@toggle-sm-inner-margin: 6px;
-
-@toggle-lg-height: 30px;
-@toggle-lg-min-width: 55px;
-@toggle-lg-handle-gap: 4px;
-@toggle-lg-inner-margin: @padding-x-sm;
 
 // Navs
 
@@ -584,15 +569,6 @@
 @cascader-search-panel-max-height: 300px;
 @cascader-row-content-padding-horizontal: @picker-item-content-padding-horizontal;
 
-// Slider
-
-@slider-bar-side-length: 6px;
-@slider-handle-diameter: 12px;
-@slider-handle-border-width: 2px;
-@slider-calibration-diameter: 8px;
-@slider-calibration-border-width: 2px;
-@slider-mark-margin-top: 9px;
-@slider-handle-transition: 0.15s ease-in-out;
 
 // Breadcrumbs
 

package/SafeAnchor/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "rsuite/SafeAnchor",
-  "private": true,
-  "main": "../cjs/SafeAnchor/index.js",
-  "module": "../esm/SafeAnchor/index.js",
-  "types": "../esm/SafeAnchor/index.d.ts"
-}

package/cjs/Form/hooks/useFormClassNames.d.ts

@@ -1,5 +0,0 @@
-import type { FormProps } from '../Form';
-/**
- * Take <Form> props and return className for <Form> styles
- */
-export default function useFormClassNames({ classPrefix, className, fluid, layout, readOnly, plaintext, disabled }: Pick<FormProps, 'classPrefix' | 'className' | 'fluid' | 'layout' | 'readOnly' | 'plaintext' | 'disabled'>): string;

package/cjs/Form/hooks/useFormClassNames.js

@@ -1,29 +0,0 @@
-'use client';
-"use strict";
-
-exports.__esModule = true;
-exports.default = useFormClassNames;
-var _hooks = require("../../internals/hooks");
-/**
- * Take <Form> props and return className for <Form> styles
- */
-function useFormClassNames(_ref) {
-  let {
-    classPrefix = 'form',
-    className,
-    fluid,
-    layout = 'vertical',
-    readOnly,
-    plaintext,
-    disabled
-  } = _ref;
-  const {
-    withPrefix,
-    merge
-  } = (0, _hooks.useStyles)(classPrefix);
-  return merge(className, withPrefix(layout, fluid && layout === 'vertical' ? 'fluid' : 'fixed-width', {
-    readonly: readOnly,
-    disabled,
-    plaintext
-  }));
-}

package/cjs/internals/Picker/hooks/usePickerClassName.d.ts

@@ -1,19 +0,0 @@
-export interface PickerClassNameProps {
-    name?: string;
-    classPrefix: string;
-    className?: string;
-    appearance?: 'default' | 'subtle';
-    cleanable?: boolean;
-    block?: boolean;
-    disabled?: boolean;
-    countable?: boolean;
-    readOnly?: boolean;
-    plaintext?: boolean;
-    hasValue?: boolean;
-    classes?: any;
-}
-/**
- * The className of the assembled Toggle is on the Picker.
- */
-declare function usePickerClassName(props: PickerClassNameProps): [string, string[]];
-export default usePickerClassName;

package/cjs/internals/Picker/hooks/usePickerClassName.js

@@ -1,45 +0,0 @@
-'use client';
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-exports.__esModule = true;
-exports.default = void 0;
-var _omit = _interopRequireDefault(require("lodash/omit"));
-var _hooks = require("../../hooks");
-/**
- * The className of the assembled Toggle is on the Picker.
- */
-function usePickerClassName(props) {
-  const {
-    name,
-    classPrefix,
-    className,
-    appearance,
-    cleanable,
-    block,
-    disabled,
-    countable,
-    readOnly,
-    plaintext,
-    hasValue,
-    ...rest
-  } = props;
-  const {
-    withPrefix,
-    merge
-  } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix(name, appearance, 'toggle-wrapper', {
-    'read-only': readOnly,
-    'has-value': hasValue,
-    cleanable,
-    block,
-    disabled,
-    countable,
-    plaintext
-  }));
-
-  // Those props that're used for composing the className
-  const usedClassNamePropKeys = Object.keys((0, _omit.default)(props, [...Object.keys(rest || {}), 'disabled', 'readOnly', 'plaintext', 'name']));
-  return [classes, usedClassNamePropKeys];
-}
-var _default = exports.default = usePickerClassName;

package/esm/Form/hooks/useFormClassNames.d.ts

@@ -1,5 +0,0 @@
-import type { FormProps } from '../Form';
-/**
- * Take <Form> props and return className for <Form> styles
- */
-export default function useFormClassNames({ classPrefix, className, fluid, layout, readOnly, plaintext, disabled }: Pick<FormProps, 'classPrefix' | 'className' | 'fluid' | 'layout' | 'readOnly' | 'plaintext' | 'disabled'>): string;

package/esm/Form/hooks/useFormClassNames.js

@@ -1,25 +0,0 @@
-'use client';
-import { useStyles } from "../../internals/hooks/index.js";
-/**
- * Take <Form> props and return className for <Form> styles
- */
-export default function useFormClassNames(_ref) {
-  let {
-    classPrefix = 'form',
-    className,
-    fluid,
-    layout = 'vertical',
-    readOnly,
-    plaintext,
-    disabled
-  } = _ref;
-  const {
-    withPrefix,
-    merge
-  } = useStyles(classPrefix);
-  return merge(className, withPrefix(layout, fluid && layout === 'vertical' ? 'fluid' : 'fixed-width', {
-    readonly: readOnly,
-    disabled,
-    plaintext
-  }));
-}

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

@@ -1,19 +0,0 @@
-export interface PickerClassNameProps {
-    name?: string;
-    classPrefix: string;
-    className?: string;
-    appearance?: 'default' | 'subtle';
-    cleanable?: boolean;
-    block?: boolean;
-    disabled?: boolean;
-    countable?: boolean;
-    readOnly?: boolean;
-    plaintext?: boolean;
-    hasValue?: boolean;
-    classes?: any;
-}
-/**
- * The className of the assembled Toggle is on the Picker.
- */
-declare function usePickerClassName(props: PickerClassNameProps): [string, string[]];
-export default usePickerClassName;

package/esm/internals/Picker/hooks/usePickerClassName.js

@@ -1,40 +0,0 @@
-'use client';
-import omit from 'lodash/omit';
-import { useStyles } from "../../hooks/index.js";
-/**
- * The className of the assembled Toggle is on the Picker.
- */
-function usePickerClassName(props) {
-  const {
-    name,
-    classPrefix,
-    className,
-    appearance,
-    cleanable,
-    block,
-    disabled,
-    countable,
-    readOnly,
-    plaintext,
-    hasValue,
-    ...rest
-  } = props;
-  const {
-    withPrefix,
-    merge
-  } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix(name, appearance, 'toggle-wrapper', {
-    'read-only': readOnly,
-    'has-value': hasValue,
-    cleanable,
-    block,
-    disabled,
-    countable,
-    plaintext
-  }));
-
-  // Those props that're used for composing the className
-  const usedClassNamePropKeys = Object.keys(omit(props, [...Object.keys(rest || {}), 'disabled', 'readOnly', 'plaintext', 'name']));
-  return [classes, usedClassNamePropKeys];
-}
-export default usePickerClassName;