rsuite 6.0.0-canary-20250424 → 6.0.0-canary-20250620

package/esm/toaster/toaster.js

@@ -23,10 +23,7 @@ function getContainer(containerId, placement) {
   return containers.get(`${containerId}_${placement}`);
 }
 const toaster = message => toaster.push(message);
-toaster.push = function (message, options) {
-  if (options === void 0) {
-    options = {};
-  }
+toaster.push = (message, options = {}) => {
   const {
     placement = 'topCenter',
     container = defaultToasterContainer,

package/esm/useDialog/Dialog.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ModalProps } from '../Modal';
+export interface DialogProps extends ModalProps {
+    type: 'alert' | 'confirm' | 'prompt';
+    title?: React.ReactNode;
+    content?: React.ReactNode;
+    okText?: string;
+    cancelText?: string;
+    severity?: 'info' | 'success' | 'warning' | 'error';
+    defaultValue?: string;
+    validate?: (value: string) => [isValid: boolean, errorMessage?: string];
+    onClose?: (result?: any) => void;
+}
+declare const Dialog: import("../internals/types").InternalRefForwardingComponent<React.ElementType<any, keyof React.JSX.IntrinsicElements>, DialogProps, never> & Record<string, never>;
+export default Dialog;

package/esm/useDialog/Dialog.js

@@ -0,0 +1,103 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useCallback, useRef, useEffect, useState } from 'react';
+import Modal from "../Modal/index.js";
+import Button from "../Button/index.js";
+import Input from "../Input/index.js";
+import Text from "../Text/index.js";
+import { forwardRef } from "../internals/utils/index.js";
+import { VStack } from "../Stack/index.js";
+import { useCustom } from "../internals/hooks/index.js";
+const severityMap = {
+  info: 'blue',
+  success: 'green',
+  warning: 'orange',
+  error: 'red'
+};
+const Dialog = forwardRef((props, ref) => {
+  const {
+    getLocale,
+    propsWithDefaults
+  } = useCustom('Dialog', props);
+  const locale = getLocale('Dialog');
+  const {
+    type,
+    title = type === 'alert' ? locale.alert : locale.confirm,
+    content,
+    okText = locale.ok,
+    cancelText = locale.cancel,
+    severity,
+    defaultValue = '',
+    validate,
+    onClose,
+    ...rest
+  } = propsWithDefaults;
+  const [isOpen, setIsOpen] = useState(true);
+  const [validationError, setValidationError] = useState();
+  const inputRef = useRef(null);
+  const inputValue = useRef(defaultValue);
+  const showCancelButton = type === 'confirm' || type === 'prompt';
+  useEffect(() => {
+    if (type === 'prompt' && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [type]);
+  const handleClose = useCallback(result => {
+    setIsOpen(false);
+    setTimeout(() => {
+      onClose === null || onClose === void 0 || onClose(result);
+    }, 300);
+  }, [onClose]);
+  const handleConfirm = useCallback(() => {
+    if (type === 'prompt') {
+      const value = inputValue.current;
+      if (validate) {
+        const [isValid, errorMessage] = validate(value);
+        if (!isValid) {
+          setValidationError(errorMessage || 'Invalid input');
+          return;
+        }
+      }
+      handleClose(value);
+    } else {
+      handleClose(true);
+    }
+  }, [type, inputValue, validate, handleClose]);
+  const handleInputKeyDown = useCallback(event => {
+    if (event.key === 'Enter') {
+      handleConfirm();
+    }
+  }, [handleConfirm]);
+  return /*#__PURE__*/React.createElement(Modal, _extends({
+    ref: ref,
+    open: isOpen,
+    size: "xs",
+    centered: true,
+    backdrop: "static"
+  }, rest), /*#__PURE__*/React.createElement(Modal.Header, {
+    closeButton: false
+  }, /*#__PURE__*/React.createElement(Modal.Title, null, title)), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(VStack, null, type === 'prompt' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "rs-prompt-input"
+  }, content), /*#__PURE__*/React.createElement(Input, {
+    w: "100%",
+    required: true,
+    ref: inputRef,
+    id: "rs-prompt-input",
+    defaultValue: defaultValue,
+    onChange: value => {
+      inputValue.current = value;
+      if (validationError) setValidationError(undefined);
+    },
+    onKeyDown: handleInputKeyDown
+  }), validationError && /*#__PURE__*/React.createElement(Text, {
+    color: "red"
+  }, validationError)) : content)), /*#__PURE__*/React.createElement(Modal.Footer, null, showCancelButton && /*#__PURE__*/React.createElement(Button, {
+    onClick: handleClose,
+    appearance: "subtle"
+  }, cancelText), /*#__PURE__*/React.createElement(Button, {
+    appearance: "primary",
+    onClick: handleConfirm,
+    color: severity ? severityMap[severity] : undefined
+  }, okText)));
+});
+export default Dialog;

package/esm/useDialog/DialogContainer.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface DialogContainerProps {
+    children?: React.ReactNode;
+}
+export interface DialogContainerInstance {
+    renderDialog: (dialog: React.ReactElement) => string | number;
+    removeDialog: (key: string | number) => void;
+    clearDialogs: () => void;
+}
+declare const DialogContainer: React.ForwardRefExoticComponent<DialogContainerProps & React.RefAttributes<DialogContainerInstance>>;
+export default DialogContainer;

package/esm/useDialog/DialogContainer.js

@@ -0,0 +1,52 @@
+'use client';
+import React, { useRef, useImperativeHandle, forwardRef, useState, useEffect } from 'react';
+import { guid } from "../internals/utils/index.js";
+const DialogContainer = /*#__PURE__*/forwardRef((_, ref) => {
+  const [dialogs, setDialogs] = useState([]);
+  const [isMounted, setIsMounted] = useState(false);
+  const dialogsRef = useRef([]);
+
+  // Only render on the client side to avoid hydration issues
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  useImperativeHandle(ref, () => ({
+    renderDialog: dialog => {
+      // Always generate a unique key using guid
+      const dialogKey = guid();
+      const nextDialogs = [...dialogsRef.current, {
+        key: dialogKey,
+        dialog
+      }];
+      dialogsRef.current = nextDialogs;
+      setDialogs(nextDialogs);
+      return dialogKey;
+    },
+    removeDialog: key => {
+      // Find if the dialog exists
+      const dialogExists = dialogsRef.current.some(item => item.key === key);
+      if (dialogExists) {
+        // Filter out the dialog with the matching key
+        const nextDialogs = dialogsRef.current.filter(item => item.key !== key);
+
+        // Update both the ref and state
+        dialogsRef.current = nextDialogs;
+        setDialogs(nextDialogs);
+      }
+    },
+    clearDialogs: () => {
+      dialogsRef.current = [];
+      setDialogs([]);
+    }
+  }));
+
+  // Only render Portal on the client side to avoid hydration issues
+  if (!isMounted) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, dialogs.map(item => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: item.key
+  }, item.dialog)));
+});
+DialogContainer.displayName = 'DialogContainer';
+export default DialogContainer;

package/esm/useDialog/index.d.ts

@@ -0,0 +1,3 @@
+import useDialog from './useDialog';
+export default useDialog;
+export * from './useDialog';

package/esm/useDialog/index.js

@@ -0,0 +1,4 @@
+'use client';
+import useDialog from "./useDialog.js";
+export default useDialog;
+export * from "./useDialog.js";

package/esm/useDialog/types.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+export interface AlertOptions {
+    /** Title of the dialog */
+    title?: ReactNode;
+    /** Text for OK button */
+    okText?: string;
+    /** Callback when dialog is closed */
+    onClose?: () => void;
+}
+export interface ConfirmOptions extends AlertOptions {
+    /** Severity of the dialog */
+    severity?: 'info' | 'success' | 'warning' | 'error';
+    /** Text for Cancel button */
+    cancelText?: string;
+}
+export interface PromptOptions extends AlertOptions {
+    /** Default value for the input */
+    defaultValue?: string;
+    /** Text for Cancel button */
+    cancelText?: string;
+    /** Validate function for prompt input */
+    validate?: (value: string) => [isValid: boolean, errorMessage?: string];
+}
+export interface OpenOptions<T = any> {
+    /** Callback when dialog is closed */
+    onClose?: (result?: T) => void;
+}
+export interface DialogInstance<T = any> {
+    key: number;
+    component: ReactNode;
+    resolve: (value: T | PromiseLike<T>) => void;
+    reject: (reason?: any) => void;
+}

package/esm/useDialog/types.js

@@ -0,0 +1,2 @@
+'use client';
+export {};

package/esm/useDialog/useDialog.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { AlertOptions, ConfirmOptions, OpenOptions, PromptOptions } from './types';
+/**
+ * A hook that provides methods to show dialogs.
+ * @see https://rsuitejs.com/components/use-dialog
+ */
+export declare function useDialog(): {
+    alert: (message: React.ReactNode, options?: AlertOptions) => Promise<any>;
+    confirm: (message: React.ReactNode, options?: ConfirmOptions) => Promise<any>;
+    prompt: (message: React.ReactNode, options?: PromptOptions) => Promise<any>;
+    open: <P extends object>(as: React.ComponentType<P & {
+        onClose: (result?: any) => void;
+    }>, payload?: P | undefined, options?: OpenOptions) => Promise<any>;
+};
+export default useDialog;

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/{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,130 @@
+'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((value, 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/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;
       }