rsuite 6.0.0-canary-20250416 → 6.0.0-canary-20250507

package/esm/internals/utils/date/getWeekStartDates.js

@@ -10,13 +10,11 @@ import { startOfWeek } from 'date-fns/startOfWeek';
  */
 export function getWeekStartDates(firstDayOfMonth, options) {
   const {
-    weekStart = 0,
-    isoWeek,
+    weekStart,
     locale
   } = options;
-  const weekStartsOn = isoWeek ? 1 : weekStart;
   const firstDay = startOfWeek(firstDayOfMonth, {
-    weekStartsOn,
+    weekStartsOn: weekStart,
     locale
   });
   const days = [firstDay];

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

@@ -3,9 +3,19 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import kebabCase from 'lodash/kebabCase';
 import Box from "../../Box/Box.js";
-import { useStyles } from "../../hooks/index.js";
 import { forwardRef } from "./forwardRef.js";
-import { useCustom } from "../../../CustomProvider/index.js";
+/**
+ * Why not import like this:
+ * ```
+ * import { useStyles, useCustom } from '../../hooks/index.js';
+ * ```
+ *
+ * We import useStyles and useCustom separately to prevent Vite from displaying Rollup warnings
+ * during the build process. This approach avoids circular dependency issues that could affect
+ * chunk division and optimizes the build output.
+ */
+import { useStyles } from "../../hooks/useStyles.js";
+import { useCustom } from "../../hooks/useCustom.js";
 /**
  * Create a component with `classPrefix` and `as` attributes.
  * By default, the component is based on Box component and inherits all Box props.

package/esm/{FormControl → useFormControl}/hooks/useField.d.ts

@@ -4,15 +4,15 @@ interface FieldProps {
     formValue?: Record<string, any>;
     formError?: Record<string, any>;
     value: any;
-    nestedField: boolean;
+    nestedField?: boolean;
     errorMessage: React.ReactNode;
     errorFromContext?: boolean;
 }
-declare function useField(props: FieldProps): {
+export declare function useField(props: FieldProps): {
     fieldValue: any;
     fieldError: import("react").ReactNode;
     setFieldValue: (fieldName: string, fieldValue: any) => {
         [x: string]: any;
     };
 };
-export default useField;
+export {};

package/esm/{FormControl → useFormControl}/hooks/useField.js

@@ -1,8 +1,8 @@
 'use client';
-import { isValidElement, useCallback, useMemo } from 'react';
 import get from 'lodash/get';
 import set from 'lodash/set';
-import { nameToPath } from "../utils.js";
+import { isValidElement, useCallback, useMemo } from 'react';
+import { nameToPath } from "../utils/nameToPath.js";
 function getErrorMessage(error) {
   var _error$array;
   if (typeof error === 'string') {
@@ -22,7 +22,7 @@ function getErrorMessage(error) {
   }
   return error === null || error === void 0 ? void 0 : error.errorMessage;
 }
-function useField(props) {
+export function useField(props) {
   const {
     name,
     formValue,
@@ -67,5 +67,4 @@ function useField(props) {
     fieldError,
     setFieldValue
   };
-}
-export default useField;
+}

package/esm/useFormControl/hooks/useRegisterModel.d.ts

@@ -0,0 +1,2 @@
+import type { CheckType } from 'schema-typed';
+export declare function useRegisterModel(name: string, rule?: CheckType<unknown, any>): void;

package/esm/{FormControl → useFormControl}/hooks/useRegisterModel.js

@@ -1,7 +1,7 @@
 'use client';
 import { useRef, useEffect } from 'react';
 import { useFormContext } from "../../Form/FormContext.js";
-function useRegisterModel(name, rule) {
+export function useRegisterModel(name, rule) {
   const {
     pushFieldRule,
     removeFieldRule
@@ -14,5 +14,4 @@ function useRegisterModel(name, rule) {
       removeFieldRule === null || removeFieldRule === void 0 || removeFieldRule(name);
     };
   }, [name, pushFieldRule, removeFieldRule]);
-}
-export default useRegisterModel;
+}

package/esm/useFormControl/index.d.ts

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

package/esm/useFormControl/index.js

@@ -0,0 +1,8 @@
+'use client';
+import useFormControl from "./useFormControl.js";
+
+// export types
+
+// export hooks
+export { useFormControl };
+export default useFormControl;

package/esm/useFormControl/useFormControl.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { CheckType } from 'schema-typed';
+import type { CheckTriggerType } from '../internals/types';
+export interface UseFormControlProps {
+    /** The name of form field */
+    name: string;
+    /** The current value (controlled) */
+    value?: any;
+    /** The data validation trigger type */
+    checkTrigger?: CheckTriggerType;
+    /** Show error messages */
+    errorMessage?: React.ReactNode;
+    /** Asynchronous check value */
+    checkAsync?: boolean;
+    /** Remove field value and error message when component is unmounted */
+    shouldResetWithUnmount?: boolean;
+    /** Validation rule */
+    rule?: CheckType<unknown, any>;
+}
+/**
+ * Hook for accessing form control functionality.
+ * Must be used within a Form component.
+ *
+ * @param props The form control properties
+ * @returns Form control functionality for the specified field
+ */
+export declare function useFormControl(props: UseFormControlProps): {
+    value: any;
+    error: React.ReactNode;
+    plaintext: boolean | undefined;
+    readOnly: boolean | undefined;
+    disabled: boolean | undefined;
+    onChange: (...args: any[]) => any;
+    onCheck: (...args: any[]) => any;
+    onBlur: (...args: any[]) => any;
+    setValue: (value: any, shouldValidate?: boolean) => void;
+};
+export default useFormControl;

package/esm/useFormControl/useFormControl.js

@@ -0,0 +1,133 @@
+'use client';
+import { useCallback, useContext } from 'react';
+import { FormValueContext, useFormContext } from "../Form/FormContext.js";
+import { useWillUnmount, useEventCallback } from "../internals/hooks/index.js";
+import { useRegisterModel } from "./hooks/useRegisterModel.js";
+import { useField } from "./hooks/useField.js";
+/**
+ * Hook for accessing form control functionality.
+ * Must be used within a Form component.
+ *
+ * @param props The form control properties
+ * @returns Form control functionality for the specified field
+ */
+export function useFormControl(props) {
+  const {
+    name,
+    value: controlledValue,
+    checkTrigger,
+    errorMessage,
+    checkAsync = false,
+    shouldResetWithUnmount = false,
+    rule
+  } = props;
+  const {
+    readOnly,
+    plaintext,
+    disabled,
+    errorFromContext,
+    formError,
+    nestedField,
+    onFieldChange,
+    removeFieldValue,
+    removeFieldError,
+    checkTrigger: contextCheckTrigger,
+    checkFieldForNextValue,
+    checkFieldAsyncForNextValue
+  } = useFormContext();
+
+  // Throw an error if not used within a Form component
+  if (!onFieldChange) {
+    console.error(`<useFormControl> must be used inside a component decorated with <Form>. And need to update React to 16.6.0 +.`);
+  }
+  const formValue = useContext(FormValueContext);
+
+  // Register form field model
+  useRegisterModel(name, rule);
+
+  // Cleanup on unmount if shouldResetWithUnmount is true
+  useWillUnmount(() => {
+    if (shouldResetWithUnmount) {
+      removeFieldValue === null || removeFieldValue === void 0 || removeFieldValue(name);
+      removeFieldError === null || removeFieldError === void 0 || removeFieldError(name);
+    }
+  });
+
+  // Use the useField hook to handle field value and error
+  const {
+    fieldValue: value,
+    fieldError: error,
+    setFieldValue
+  } = useField({
+    name,
+    errorMessage,
+    formValue,
+    formError,
+    value: controlledValue,
+    nestedField,
+    errorFromContext
+  });
+  const trigger = checkTrigger || contextCheckTrigger;
+
+  // Handler for field check (validation)
+  const onCheck = useEventCallback(value => {
+    // Don't perform validation when checkTrigger is null
+    if (trigger === null) {
+      return;
+    }
+    const nextFormValue = setFieldValue(name, value);
+    if (checkAsync) {
+      checkFieldAsyncForNextValue === null || checkFieldAsyncForNextValue === void 0 || checkFieldAsyncForNextValue(name, nextFormValue);
+    } else {
+      checkFieldForNextValue === null || checkFieldForNextValue === void 0 || checkFieldForNextValue(name, nextFormValue);
+    }
+  });
+
+  // Handler for field change
+  const onChange = useEventCallback((value, event) => {
+    if (trigger === 'change') {
+      onCheck(value);
+    }
+    onFieldChange === null || onFieldChange === void 0 || onFieldChange(name, value, event);
+  });
+
+  // Handler for field blur
+  const onBlur = useEventCallback(() => {
+    if (trigger === 'blur') {
+      onCheck(value);
+    }
+  });
+
+  /**
+   * Directly sets the field value without triggering validation or onChange events.
+   * Useful for programmatically updating field values.
+   * @param value The new value to set
+   * @param shouldValidate Whether to trigger validation (defaults to false)
+   */
+  const setValue = useCallback(function (value, shouldValidate) {
+    if (shouldValidate === void 0) {
+      shouldValidate = false;
+    }
+    const nextFormValue = setFieldValue(name, value);
+    onFieldChange === null || onFieldChange === void 0 || onFieldChange(name, value);
+    if (shouldValidate && trigger !== null) {
+      if (checkAsync) {
+        checkFieldAsyncForNextValue === null || checkFieldAsyncForNextValue === void 0 || checkFieldAsyncForNextValue(name, nextFormValue);
+      } else {
+        checkFieldForNextValue === null || checkFieldForNextValue === void 0 || checkFieldForNextValue(name, nextFormValue);
+      }
+    }
+  }, [name, setFieldValue, trigger, checkAsync, checkFieldAsyncForNextValue, checkFieldForNextValue]);
+  return {
+    value,
+    error,
+    plaintext,
+    readOnly,
+    disabled,
+    onChange,
+    onCheck,
+    onBlur,
+    setValue
+  };
+}
+export default useFormControl;

package/esm/useToaster/useToaster.js

@@ -1,9 +1,7 @@
 'use client';
 import { useMemo, useContext } from 'react';
 import toaster from "../toaster/index.js";
-// From CustomProvider/CustomProvider.tsx import CustomContext instead of directly from 'CustomProvider/index.ts'
-// because babel compiles commonjs, which causes CustomContext to be undefined
-import { CustomContext } from "../CustomProvider/CustomProvider.js";
+import { CustomContext } from "../internals/Provider/CustomContext.js";
 /**
  * Toaster display brief, temporary notifications of actions, errors, or other events in an application.
  * It is often used with the Message and Notification components.

package/internals/Burger/styles/index.less

@@ -0,0 +1,67 @@
+.rs-burger {
+  --rs-burger-size: 36px;
+  --rs-burger-thickness: 2px;
+  --rs-burger-color: currentColor;
+  --rs-burger-spacing: calc(var(--rs-spacing) * 1.5);
+  --rs-burger-line-size: calc(var(--rs-burger-size) - var(--rs-burger-spacing) * 2);
+
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  outline: none;
+  transition: background 0.2s;
+  box-sizing: border-box;
+  width: var(--rs-burger-size);
+  height: var(--rs-burger-size);
+  padding: var(--rs-burger-spacing);
+
+  // The burger line (middle)
+  &-line {
+    position: relative;
+    display: block;
+    width: var(--rs-burger-line-size);
+    height: var(--rs-burger-thickness);
+    background: var(--rs-burger-color);
+    border-radius: var(--rs-burger-thickness);
+    transition-property: background, transform;
+    transition-duration: 0.2s, 0.3s;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    pointer-events: none;
+
+    // Top and bottom lines
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      inset-inline-start: 0;
+      width: 100%;
+      height: var(--rs-burger-thickness);
+      background: var(--rs-burger-color);
+      border-radius: var(--rs-burger-thickness);
+      transition-property: transform;
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    &::before {
+      top: calc(var(--rs-burger-line-size) / -3);
+    }
+    &::after {
+      top: calc(var(--rs-burger-line-size) / 3);
+    }
+  }
+
+  // Opened state animation
+  &:where([data-opened='true']) {
+    .rs-burger-line {
+      background: transparent;
+      &::before {
+        transform: translateY(calc(var(--rs-burger-line-size) / 3)) rotate(45deg);
+      }
+      &::after {
+        transform: translateY(calc(var(--rs-burger-line-size) / -3)) rotate(-45deg);
+      }
+    }
+  }
+}

package/internals/CloseButton/styles/index.less

@@ -12,14 +12,4 @@
   .rs-icon {
     vertical-align: bottom;
   }
-
-  &:hover,
-  &:focus {
-    color: var(--rs-close-button-hover-color);
-
-    svg path {
-      stroke: var(--rs-close-button-hover-color);
-      stroke-width: 1;
-    }
-  }
 }

package/internals/Picker/styles/index.less

@@ -24,6 +24,7 @@
   --rs-picker-loader-size: 20px;
   --rs-picker-toggle-border-width: 1px;
   --rs-picker-toggle-bg: var(--rs-input-bg);
+  --rs-picker-toggle-border-color: var(--rs-border-primary);
 
   display: inline-block;
   vertical-align: middle;
@@ -46,6 +47,10 @@
     .rs-picker-value-count {
       opacity: 0.5;
     }
+
+    .rs-picker-toggle {
+      pointer-events: none;
+    }
   }
 
   &-toggle &-toggle-placeholder {
@@ -73,14 +78,14 @@
     margin: 0 var(--rs-spacing) 0 0;
   }
 
-  &:not([data-disabled='true']):hover,
   &.rs-picker-focused {
     border-color: var(--rs-input-focus-border);
   }
 
   &-toggle-active,
   &.rs-picker-focused {
-    box-shadow: var(--rs-state-focus-shadow);
+    --rs-picker-toggle-border-color: var(--rs-input-focus-border);
+    .focus-ring();
   }
 
   &-label.rs-input-group-addon {
@@ -278,11 +283,8 @@
     });
   }
 
-  .rs-picker[data-variant='default'],
-  :not([data-disabled='true']) & {
-    &:hover,
-    &:focus,
-    &-active {
+  .rs-picker[data-variant='default'] {
+    &:focus {
       border-color: var(--rs-input-focus-border);
     }
   }
@@ -351,13 +353,14 @@
 
   // Picker clear button
   .rs-picker-clean {
-    .combobox-indicator-icon();
-
-    background: inherit;
     color: var(--rs-text-secondary);
     transition: 0.2s color linear;
     cursor: pointer;
 
+    &:hover {
+      color: var(--rs-text-primary);
+    }
+
     &.rs-btn-close {
       padding: 0;
     }

package/internals/Picker/styles/mixin.less

@@ -93,7 +93,9 @@
 .picker-default-toggle() {
   [data-variant='default'] & {
     color: var(--rs-text-primary);
-    border: var(--rs-picker-toggle-border-width) solid var(--rs-border-primary);
+    border-width: var(--rs-picker-toggle-border-width);
+    border-color: var(--rs-picker-toggle-border-color);
+    border-style: solid;
   }
 
   [data-disabled='true'] & {
@@ -101,7 +103,6 @@
   }
 
   [data-variant='default']:not([data-disabled='true']) {
-    &:hover,
     &:focus {
       border-color: var(--rs-input-focus-border);
     }
@@ -118,7 +119,6 @@
   .rs-picker[data-variant='subtle'][data-disabled='true'] & {
     cursor: @cursor-disabled;
 
-    &:hover,
     &:focus,
     &:active {
       background: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "6.0.0-canary-20250416",
+  "version": "6.0.0-canary-20250507",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -38,7 +38,7 @@
     "react-use-set": "^1.0.0",
     "react-window": "^1.8.11",
     "rsuite-table": "^5.19.1",
-    "schema-typed": "^2.4.1"
+    "schema-typed": "^2.4.2"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -60,7 +60,7 @@
   "size-limit": [
     {
       "path": "lib/dist/rsuite.min.js",
-      "limit": "280 kB",
+      "limit": "300 kB",
       "gzip": true
     }
   ]

package/styles/color-modes/dark.less

@@ -76,10 +76,10 @@
   --rs-bg-active: var(--rs-primary-700);
   --rs-bg-backdrop: rgb(from var(--rs-gray-900) r g b / 80%);
   --rs-state-hover-bg: var(--rs-gray-600);
-  --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
-  --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
-  --rs-state-focus-outline: 3px solid rgb(from var(--rs-gray-500) r g b / 25%);
-  --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
+  --rs-color-focus-ring: 0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
+  --rs-state-focus-shadow: 0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
+  --rs-state-focus-outline: 2px solid rgb(from var(--rs-gray-500) r g b / 25%);
+  --rs-state-error-outline: 2px solid rgb(from var(--rs-color-red) r g b / 25%);
 
   // Kbd
   --rs-kbd-bg: var(--rs-gray-600);
@@ -336,9 +336,6 @@
   --rs-badge-text: var(--rs-gray-0);
   --rs-badge-border: var(--rs-gray-900);
 
-  // Close Button
-  --rs-close-button-hover-color: var(--rs-color-red);
-
   // Tag
   --rs-tag-bg: var(--rs-gray-600);
 
@@ -407,9 +404,9 @@
   @supports not (color: rgb(from white r g b)) {
     // Misc
     --rs-bg-backdrop: fade(@B900-dark, 80%);
-    --rs-color-focus-ring: 0 0 0 3px fade(@H500-dark, 25%);
-    --rs-state-focus-shadow: 0 0 0 3px fade(@H500-dark, 25%);
-    --rs-state-focus-outline: 3px solid fade(@H500-dark, 25%);
+    --rs-color-focus-ring: 0 0 0 2px fade(@H500-dark, 25%);
+    --rs-state-focus-shadow: 0 0 0 2px fade(@H500-dark, 25%);
+    --rs-state-focus-outline: 2px solid fade(@H500-dark, 25%);
 
     // Loader
     --rs-loader-ring: fade(@B050-dark, 30);

package/styles/color-modes/high-contrast.less

@@ -78,10 +78,10 @@
   --rs-bg-backdrop: rgb(from var(--rs-gray-900) r g b / 80%);
   --rs-state-hover-bg: var(--rs-gray-600);
   --rs-color-focus-ring: var(--rs-gray-0);
-  --rs-state-focus-shadow: 0 0 0 3px var(--rs-gray-900), 0 0 0 5px var(--rs-gray-0);
+  --rs-state-focus-shadow: 0 0 0 2px var(--rs-gray-900), 0 0 0 5px var(--rs-gray-0);
   --rs-state-focus-shadow-slim: 0 0 0 2px var(--rs-gray-0);
-  --rs-state-focus-outline: 3px solid rgb(from var(--rs-primary-500) r g b / 25%);
-  --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
+  --rs-state-focus-outline: 2px solid rgb(from var(--rs-primary-500) r g b / 25%);
+  --rs-state-error-outline: 2px solid rgb(from var(--rs-color-red) r g b / 25%);
 
   // Kbd
   --rs-kbd-bg: var(--rs-gray-600);
@@ -342,9 +342,6 @@
   --rs-badge-text: var(--rs-gray-0);
   --rs-badge-border: var(--rs-gray-900);
 
-  // Close Button
-  --rs-close-button-hover-color: var(--rs-color-red);
-
   // Tag
   --rs-tag-bg: var(--rs-gray-600);
 

package/styles/color-modes/light.less

@@ -85,9 +85,9 @@
   --rs-bg-backdrop: rgb(from var(--rs-gray-900) r g b / 30%);
   --rs-state-hover-bg: var(--rs-primary-50);
   --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
-  --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-primary-500) r g b / 25%);
-  --rs-state-focus-outline: 3px solid rgb(from var(--rs-primary-500) r g b / 25%);
-  --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
+  --rs-state-focus-shadow: 0 0 0 2px rgb(from var(--rs-primary-500) r g b / 25%);
+  --rs-state-focus-outline: 2px solid rgb(from var(--rs-primary-500) r g b / 25%);
+  --rs-state-error-outline: 2px solid rgb(from var(--rs-color-red) r g b / 25%);
 
   // Kbd
   --rs-kbd-bg: var(--rs-gray-50);
@@ -351,9 +351,6 @@
   --rs-badge-text: var(--rs-gray-0);
   --rs-badge-border: var(--rs-gray-0);
 
-  // Close Button
-  --rs-close-button-hover-color: var(--rs-color-red);
-
   // Tag
   --rs-tag-bg: var(--rs-gray-50);
 
@@ -425,8 +422,8 @@
     // Misc
     --rs-bg-backdrop: fade(@B900, 30%);
     --rs-color-focus-ring: fade(@H500, 25%);
-    --rs-state-focus-shadow: 0 0 0 3px fade(@H500, 25%);
-    --rs-state-focus-outline: 3px solid fade(@H500, 25%);
+    --rs-state-focus-shadow: 0 0 0 2px fade(@H500, 25%);
+    --rs-state-focus-outline: 2px solid fade(@H500, 25%);
 
     // Loader
     --rs-loader-ring: fade(@B050, 80);

package/styles/index.less

@@ -43,7 +43,7 @@
 @import '../Image/styles/index';
 @import '../Input/styles/index';
 @import '../InputGroup/styles/index';
-@import '../InputNumber/styles/index';
+@import '../NumberInput/styles/index';
 @import '../InputPicker/styles/index';
 @import '../Textarea/styles/index';
 @import '../InlineEdit/styles/index';
@@ -66,6 +66,7 @@
 @import '../Placeholder/styles/index';
 @import '../Popover/styles/index';
 @import '../Progress/styles/index';
+@import '../PinInput/styles/index';
 @import '../Radio/styles/index';
 @import '../RadioGroup/styles/index';
 @import '../RadioTile/styles/index';
@@ -102,3 +103,4 @@
 @import '../internals/Picker/styles/index';
 @import '../internals/SearchBox/styles/index';
 @import '../internals/Box/styles/index';
+@import '../internals/Burger/styles/index';

package/styles/mixins/utilities.less

@@ -124,11 +124,8 @@
 
 // Useful when appending the ring into an existing :focus rule
 .focus-ring() {
-  outline: 3px solid var(--rs-color-focus-ring);
-
-  .high-contrast-mode({
-    outline-offset: 2px;
-  });
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 
 .focus-ring(slim) {

package/useFormControl/package.json

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