rsuite 6.0.0-canary-20250507 → 6.0.0-canary-2025062016

package/esm/useDialog/useDialog.js

@@ -0,0 +1,120 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useCallback, useRef, useContext, useEffect } from 'react';
+import canUseDOM from 'dom-lib/canUseDOM';
+import Dialog from "./Dialog.js";
+import { CustomContext } from "../internals/Provider/CustomContext.js";
+
+/**
+ * Options for creating a dialog
+ */
+
+const useDialogContainer = () => {
+  const context = useContext(CustomContext);
+  const dialogContainerRef = useRef(null);
+  useEffect(() => {
+    if (canUseDOM && !(context !== null && context !== void 0 && context.dialogContainer)) {
+      console.warn('Warning: useDialog is being used outside of a CustomProvider. ' + 'Please wrap your application with <CustomProvider> to ensure proper functionality.');
+    }
+  }, [context]);
+  useEffect(() => {
+    var _context$dialogContai;
+    if (canUseDOM && context !== null && context !== void 0 && (_context$dialogContai = context.dialogContainer) !== null && _context$dialogContai !== void 0 && _context$dialogContai.current) {
+      dialogContainerRef.current = context.dialogContainer.current;
+    }
+  }, [context]);
+  return dialogContainerRef;
+};
+
+/**
+ * A hook that provides methods to show dialogs.
+ * @see https://rsuitejs.com/components/use-dialog
+ */
+export function useDialog() {
+  const dialogContainerRef = useDialogContainer();
+  const createDialog = useCallback((content, options) => {
+    const {
+      type,
+      title,
+      okText,
+      cancelText,
+      severity,
+      defaultValue,
+      validate
+    } = options;
+    let isDialogClosed = false;
+    let dialogKey = null;
+    return new Promise(resolve => {
+      const handleClose = result => {
+        if (isDialogClosed) {
+          return;
+        }
+        isDialogClosed = true;
+        if (canUseDOM && dialogContainerRef.current && dialogKey !== null) {
+          dialogContainerRef.current.removeDialog(dialogKey);
+        }
+        resolve(result);
+      };
+      let dialogComponent;
+      if (type === 'custom' && options.as) {
+        const {
+          as: Component,
+          props
+        } = options;
+        dialogComponent = /*#__PURE__*/React.createElement(Component, _extends({
+          onClose: handleClose
+        }, props));
+      } else {
+        dialogComponent = /*#__PURE__*/React.createElement(Dialog, {
+          type: type,
+          title: title,
+          content: content,
+          okText: okText,
+          cancelText: cancelText,
+          onClose: handleClose,
+          defaultValue: defaultValue || '',
+          severity: severity,
+          validate: validate
+        });
+      }
+      if (canUseDOM && dialogContainerRef.current) {
+        dialogKey = dialogContainerRef.current.renderDialog(dialogComponent);
+      }
+    });
+  }, []);
+  const alert = useCallback((message, options) => {
+    return createDialog(message, {
+      ...options,
+      type: 'alert'
+    });
+  }, [createDialog]);
+  const confirm = useCallback((message, options) => {
+    return createDialog(message, {
+      ...options,
+      type: 'confirm'
+    });
+  }, [createDialog]);
+  const prompt = useCallback((message, options = {}) => {
+    return createDialog(message, {
+      ...options,
+      type: 'prompt'
+    });
+  }, [createDialog]);
+  const open = useCallback((as, payload, options) => {
+    return createDialog(null, {
+      ...options,
+      as,
+      type: 'custom',
+      props: {
+        payload
+      }
+    });
+  }, [createDialog]);
+  return {
+    alert,
+    confirm,
+    prompt,
+    open
+  };
+}
+export default useDialog;

package/esm/useFormControl/useFormControl.js

@@ -104,10 +104,7 @@ export function useFormControl(props) {
    * @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 setValue = useCallback((value, shouldValidate = false) => {
     const nextFormValue = setFieldValue(name, value);
     onFieldChange === null || onFieldChange === void 0 || onFieldChange(name, value);
     if (shouldValidate && trigger !== null) {

package/esm/useMediaQuery/breakpoints.js

@@ -48,10 +48,7 @@ function createLegacyMediaQueryMap(breakpoints) {
   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';
-    });
+    const nextBreakpoint = entries.find(([key]) => key === 'sm');
     if (nextBreakpoint) {
       result.xs = `(max-width: ${adjustMaxWidth(nextBreakpoint[1])})`;
     } else {
@@ -60,8 +57,7 @@ function createLegacyMediaQueryMap(breakpoints) {
   }
 
   // For all other breakpoints, use min-width
-  entries.forEach(_ref2 => {
-    let [key, value] = _ref2;
+  entries.forEach(([key, value]) => {
     if (key !== 'xs') {
       result[key] = `(min-width: ${value})`;
     }
@@ -100,8 +96,7 @@ export function createBreakpoints(breakpoints) {
   });
 
   // Create breakpoint entries with min and max values
-  const breakpointEntries = sortedEntries.map((_ref3, index) => {
-    let [name, value] = _ref3;
+  const breakpointEntries = sortedEntries.map(([name, value], index) => {
     let max = null;
 
     // If not the last breakpoint, use the next breakpoint's value minus 0.01 as the current max
@@ -221,8 +216,7 @@ export function createBreakpoints(breakpoints) {
 
     // 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;
+    Object.entries(conditions).forEach(([key, value]) => {
       if (!breakpointKeys.includes(key)) {
         mediaQueryMap[key] = value;
       }

package/esm/useMediaQuery/useMediaQuery.js

@@ -40,10 +40,7 @@ const matchMedia = 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, enabled) {
-  if (enabled === void 0) {
-    enabled = true;
-  }
+export function useMediaQuery(query, enabled = true) {
   const queries = Array.isArray(query) ? query : [query];
   const mediaQueries = useMemo(() => queries.map(query => mediaQuerySizeMap[query] || query), [...queries]);
 

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/toaster/
+ * @see https://rsuitejs.com/components/use-toaster/
  */
 declare const useToaster: () => {
     /**

package/esm/useToaster/useToaster.js

@@ -1,19 +1,26 @@
 'use client';
-import { useMemo, useContext } from 'react';
+import { useMemo, useContext, useEffect } from 'react';
 import toaster from "../toaster/index.js";
 import { CustomContext } from "../internals/Provider/CustomContext.js";
+import { canUseDOM } from "../DOMHelper/index.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.
  * @returns toaster { push, remove, clear }
  *
- * @see https://rsuitejs.com/components/toaster/
+ * @see https://rsuitejs.com/components/use-toaster/
  */
 const useToaster = () => {
   const {
     toasters,
     toastContainer
   } = useContext(CustomContext);
+  useEffect(() => {
+    if (canUseDOM && !toasters) {
+      console.warn('Warning: useToaster is being used outside of a CustomProvider. ' + 'Please wrap your application with <CustomProvider> to ensure proper functionality.');
+    }
+  }, [toasters]);
   return useMemo(() => ({
     /**
      * Push a toast message.
@@ -37,19 +44,13 @@ const useToaster = () => {
      * @param key  The key of the toast message.
      */
     remove: key => {
-      toasters ? Array.from(toasters.current).forEach(_ref => {
-        let [, c] = _ref;
-        return c === null || c === void 0 ? void 0 : c.remove(key);
-      }) : toaster.remove(key);
+      toasters ? Array.from(toasters.current).forEach(([, c]) => c === null || c === void 0 ? void 0 : c.remove(key)) : toaster.remove(key);
     },
     /**
      * Clear all toast messages.
      */
     clear: () => {
-      toasters ? Array.from(toasters.current).forEach(_ref2 => {
-        let [, c] = _ref2;
-        return c === null || c === void 0 ? void 0 : c.clear();
-      }) : toaster.clear();
+      toasters ? Array.from(toasters.current).forEach(([, c]) => c === null || c === void 0 ? void 0 : c.clear()) : toaster.clear();
     }
   }), [toastContainer, toasters]);
 };

package/locales/gu_IN/package.json

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

package/locales/th_TH/package.json

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

package/locales/uk_UA/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "6.0.0-canary-20250507",
+  "version": "6.0.0-canary-2025062016",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -9,9 +9,6 @@
   "directories": {
     "lib": "cjs/"
   },
-  "scripts": {
-    "prepublishOnly": "../node_modules/mocha/bin/_mocha ../test/validateBuilds.js"
-  },
   "keywords": [
     "react",
     "rsuite",
@@ -27,7 +24,7 @@
   "dependencies": {
     "@babel/runtime": "^7.26.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@rsuite/icons": "^1.3.0",
+    "@rsuite/icons": "^1.3.2",
     "@types/lodash": "^4.17.15",
     "@types/react-window": "^1.8.8",
     "classnames": "^2.3.1",
@@ -44,6 +41,8 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
+  "sass": "src/styles/index.scss",
+  "style": "lib/styles/index.css",
   "overrides": {
     "aria-query@>5.1.3": "5.1.3"
   },
@@ -54,7 +53,7 @@
     "cjs/**/styles/*",
     "esm/**/styles/*",
     "dist/*",
-    "*.less",
+    "*.scss",
     "*.css"
   ],
   "size-limit": [

package/toaster/styles/index.css

@@ -1,139 +1,125 @@
-/**
-  * Map mixin
-  * @param {string} @size-name - The size name
-  * @param {string} @suffix - The suffix
-  */
-/* stylelint-disable */
-*[class*='rs-'] {
-  box-sizing: border-box;
-}
-*[class*='rs-']::before,
-*[class*='rs-']::after {
-  box-sizing: border-box;
-}
-:root {
-  --rs-shadow-color: rgba(0, 0, 0, 0.1);
-  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
-}
-@keyframes notificationMoveIn {
-  0% {
-    opacity: 0;
-    transform-origin: 0% 0%;
-    transform: scaleY(0.8);
+@keyframes notificationMoveIn{
+  0%{
+    opacity:0;
+    transform-origin:0% 0%;
+    transform:scaleY(0.8);
   }
-  100% {
-    opacity: 1;
-    transform-origin: 0% 0%;
-    transform: scaleY(1);
+  100%{
+    opacity:1;
+    transform-origin:0% 0%;
+    transform:scaleY(1);
   }
 }
-@keyframes notificationMoveInLeft {
-  from {
-    opacity: 0;
-    transform: translate3d(-100%, 0, 0);
+@keyframes notificationMoveInLeft{
+  from{
+    opacity:0;
+    transform:translate3d(-100%, 0, 0);
   }
-  to {
-    opacity: 1;
-    transform: none;
+  to{
+    opacity:1;
+    transform:none;
   }
 }
-@keyframes notificationMoveInRight {
-  from {
-    opacity: 0;
-    transform: translate3d(100%, 0, 0);
+@keyframes notificationMoveInRight{
+  from{
+    opacity:0;
+    transform:translate3d(100%, 0, 0);
   }
-  to {
-    opacity: 1;
-    transform: none;
+  to{
+    opacity:1;
+    transform:none;
   }
 }
-@keyframes notificationMoveOut {
-  0% {
-    opacity: 1;
-    transform-origin: 0% 0%;
-    transform: scaleY(1);
-    max-height: 100px;
+@keyframes notificationMoveOut{
+  0%{
+    opacity:1;
+    transform-origin:0% 0%;
+    transform:scaleY(1);
+    max-height:100px;
   }
-  100% {
-    opacity: 0;
-    transform-origin: 0% 0%;
-    transform: scaleY(0.8);
-    max-height: 0;
-    overflow: hidden;
+  100%{
+    opacity:0;
+    transform-origin:0% 0%;
+    transform:scaleY(0.8);
+    max-height:0;
+    overflow:hidden;
   }
 }
-.rs-toast {
-  --rs-toast-shadow: var(--rs-shadow-md);
-  pointer-events: auto;
-}
-.rs-toast-container {
-  position: fixed;
-  z-index: 1080;
-  pointer-events: none;
-  display: flex;
-  flex-direction: column;
-}
-.rs-toast-container .rs-toast:not(.rs-notification) {
-  box-shadow: var(--rs-toast-shadow);
-}
-.rs-toast-container-top-center,
-.rs-toast-container-bottom-center {
-  align-items: center;
-  width: 100%;
-}
-.rs-toast-container-top-center .rs-toast-fade-entered,
-.rs-toast-container-bottom-center .rs-toast-fade-entered {
-  animation-name: notificationMoveIn;
-}
-.rs-toast-container-bottom-start,
-.rs-toast-container-top-start {
-  align-items: flex-start;
-  inset-inline-start: 24px;
-}
-.rs-toast-container-bottom-start .rs-toast-fade-entered,
-.rs-toast-container-top-start .rs-toast-fade-entered {
-  animation-name: notificationMoveInLeft;
-}
-.rs-toast-container-bottom-end,
-.rs-toast-container-top-end {
-  align-items: flex-end;
-  inset-inline-end: 24px;
-}
-.rs-toast-container-bottom-end .rs-toast-fade-entered,
-.rs-toast-container-top-end .rs-toast-fade-entered {
-  margin-inline-start: auto;
-  animation-name: notificationMoveInRight;
-}
-.rs-toast-container-top-center,
-.rs-toast-container-top-start,
-.rs-toast-container-top-end {
-  top: 24px;
-}
-.rs-toast-container-bottom-center,
-.rs-toast-container-bottom-start,
-.rs-toast-container-bottom-end {
-  bottom: 24px;
+.rs-toast{
+  --rs-toast-shadow:var(--rs-shadow-md);
+  pointer-events:auto;
 }
-.rs-toast-fade-entered,
-.rs-toast-fade-exiting {
-  animation-fill-mode: forwards;
+
+.rs-toast-container{
+  --rs-toast-spacing:1.5rem;
+  position:fixed;
+  z-index:var(--rs-zindex-notification);
+  pointer-events:none;
+  display:flex;
+  flex-direction:column;
 }
-.rs-toast-fade-entered {
-  animation-duration: 0.4s;
-  animation-timing-function: cubic-bezier(0.99, 0.44, 0.44, 1.35);
+.rs-toast-container .rs-toast:not(.rs-notification){
+  box-shadow:var(--rs-toast-shadow);
 }
-.rs-toast-fade-exited,
-.rs-toast-fade-entering {
-  opacity: 0;
+.rs-toast-container-top-center, .rs-toast-container-bottom-center{
+  align-items:center;
+  width:100%;
+}
+.rs-toast-container-top-center .rs-toast-fade-entered, .rs-toast-container-bottom-center .rs-toast-fade-entered{
+  animation-name:notificationMoveIn;
+}
+.rs-toast-container-bottom-start, .rs-toast-container-top-start{
+  align-items:flex-start;
+  inset-inline-start:var(--rs-toast-spacing);
+}
+.rs-toast-container-bottom-start .rs-toast-fade-entered, .rs-toast-container-top-start .rs-toast-fade-entered{
+  animation-name:notificationMoveInLeft;
+}
+[dir=rtl] .rs-toast-container-bottom-start .rs-toast-fade-entered, [dir=rtl] .rs-toast-container-top-start .rs-toast-fade-entered{
+  animation-name:notificationMoveInRight;
+}
+.rs-toast-container-bottom-end, .rs-toast-container-top-end{
+  align-items:flex-end;
+  inset-inline-end:var(--rs-toast-spacing);
 }
-.rs-toast-fade-exited {
-  transform-origin: 0 0;
-  transform: scaleY(0.8);
-  max-height: 0;
-  overflow: hidden;
+.rs-toast-container-bottom-end .rs-toast-fade-entered, .rs-toast-container-top-end .rs-toast-fade-entered{
+  margin-inline-start:auto;
+  animation-name:notificationMoveInRight;
 }
-.rs-toast-fade-exiting {
-  animation-duration: 0.3s;
-  animation-timing-function: cubic-bezier(0.64, 0.65, 0.57, 1.13);
-  animation-name: notificationMoveOut;
+[dir=rtl] .rs-toast-container-bottom-end .rs-toast-fade-entered, [dir=rtl] .rs-toast-container-top-end .rs-toast-fade-entered{
+  animation-name:notificationMoveInLeft;
 }
+.rs-toast-container-top-center, .rs-toast-container-top-start, .rs-toast-container-top-end{
+  top:var(--rs-toast-spacing);
+}
+.rs-toast-container-bottom-center, .rs-toast-container-bottom-start, .rs-toast-container-bottom-end{
+  bottom:var(--rs-toast-spacing);
+}
+
+.rs-toast-fade-entered,
+.rs-toast-fade-exiting{
+  animation-fill-mode:forwards;
+}
+
+.rs-toast-fade-entered{
+  animation-duration:0.4s;
+  animation-timing-function:cubic-bezier(0.99, 0.44, 0.44, 1.35);
+}
+
+.rs-toast-fade-exited,
+.rs-toast-fade-entering{
+  opacity:0;
+}
+
+.rs-toast-fade-exited{
+  transform-origin:0 0;
+  transform:scaleY(0.8);
+  max-height:0;
+  overflow:hidden;
+}
+
+.rs-toast-fade-exiting{
+  animation-duration:0.3s;
+  animation-timing-function:cubic-bezier(0.64, 0.65, 0.57, 1.13);
+  animation-name:notificationMoveOut;
+}

package/useDialog/package.json

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