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

package/esm/locales/tr_TR.js

@@ -83,5 +83,11 @@ export default {
   Toggle: {
     on: 'Açık',
     off: 'Kapalı'
+  },
+  Dialog: {
+    alert: 'Uyarı',
+    confirm: 'Onayla',
+    ok: 'Tamam',
+    cancel: 'İptal'
   }
 };

package/esm/locales/uk_UA.d.ts

@@ -0,0 +1,157 @@
+declare const _default: {
+    code: string;
+    common: {
+        loading: string;
+        emptyMessage: string;
+        remove: string;
+        clear: string;
+    };
+    Plaintext: {
+        unfilled: string;
+        notSelected: string;
+        notUploaded: string;
+    };
+    Pagination: {
+        more: string;
+        prev: string;
+        next: string;
+        first: string;
+        last: string;
+        limit: string;
+        total: string;
+        skip: string;
+    };
+    DateTimeFormats: {
+        sunday: string;
+        monday: string;
+        tuesday: string;
+        wednesday: string;
+        thursday: string;
+        friday: string;
+        saturday: string;
+        ok: string;
+        today: string;
+        yesterday: string;
+        now: string;
+        hours: string;
+        minutes: string;
+        seconds: string;
+        formattedMonthPattern: string;
+        formattedDayPattern: string;
+        shortDateFormat: string;
+        shortTimeFormat: string;
+        dateLocale: any;
+    };
+    Calendar: {
+        sunday: string;
+        monday: string;
+        tuesday: string;
+        wednesday: string;
+        thursday: string;
+        friday: string;
+        saturday: string;
+        ok: string;
+        today: string;
+        yesterday: string;
+        now: string;
+        hours: string;
+        minutes: string;
+        seconds: string;
+        formattedMonthPattern: string;
+        formattedDayPattern: string;
+        shortDateFormat: string;
+        shortTimeFormat: string;
+        dateLocale: any;
+    };
+    DatePicker: {
+        sunday: string;
+        monday: string;
+        tuesday: string;
+        wednesday: string;
+        thursday: string;
+        friday: string;
+        saturday: string;
+        ok: string;
+        today: string;
+        yesterday: string;
+        now: string;
+        hours: string;
+        minutes: string;
+        seconds: string;
+        formattedMonthPattern: string;
+        formattedDayPattern: string;
+        shortDateFormat: string;
+        shortTimeFormat: string;
+        dateLocale: any;
+    };
+    DateRangePicker: {
+        last7Days: string;
+        sunday: string;
+        monday: string;
+        tuesday: string;
+        wednesday: string;
+        thursday: string;
+        friday: string;
+        saturday: string;
+        ok: string;
+        today: string;
+        yesterday: string;
+        now: string;
+        hours: string;
+        minutes: string;
+        seconds: string;
+        formattedMonthPattern: string;
+        formattedDayPattern: string;
+        shortDateFormat: string;
+        shortTimeFormat: string;
+        dateLocale: any;
+    };
+    Combobox: {
+        noResultsText: string;
+        placeholder: string;
+        searchPlaceholder: string;
+        checkAll: string;
+    };
+    InputPicker: {
+        newItem: string;
+        createOption: string;
+        noResultsText: string;
+        placeholder: string;
+        searchPlaceholder: string;
+        checkAll: string;
+    };
+    TagPicker: {
+        newItem: string;
+        createOption: string;
+        noResultsText: string;
+        placeholder: string;
+        searchPlaceholder: string;
+        checkAll: string;
+    };
+    Uploader: {
+        inited: string;
+        progress: string;
+        error: string;
+        complete: string;
+        emptyFile: string;
+        upload: string;
+        removeFile: string;
+    };
+    CloseButton: {
+        closeLabel: string;
+    };
+    Breadcrumb: {
+        expandText: string;
+    };
+    Toggle: {
+        on: string;
+        off: string;
+    };
+    Dialog: {
+        alert: string;
+        confirm: string;
+        ok: string;
+        cancel: string;
+    };
+};
+export default _default;

package/esm/locales/uk_UA.js

@@ -0,0 +1,93 @@
+'use client';
+import { uk } from 'date-fns/locale/uk';
+const DateTimeFormats = {
+  sunday: 'Нд',
+  monday: 'Пн',
+  tuesday: 'Вт',
+  wednesday: 'Ср',
+  thursday: 'Чт',
+  friday: 'Пт',
+  saturday: 'Сб',
+  ok: 'ОК',
+  today: 'Сьогодні',
+  yesterday: 'Вчора',
+  now: 'Зараз',
+  hours: 'Години',
+  minutes: 'Хвилини',
+  seconds: 'Секунди',
+  formattedMonthPattern: 'MMM yyyy',
+  formattedDayPattern: 'dd MMM yyyy',
+  shortDateFormat: 'dd.MM.yyyy',
+  shortTimeFormat: 'HH:mm',
+  dateLocale: uk
+};
+const Combobox = {
+  noResultsText: 'Результати не знайдено',
+  placeholder: 'Вибрати',
+  searchPlaceholder: 'Пошук',
+  checkAll: 'Усі'
+};
+const CreatableComboBox = {
+  ...Combobox,
+  newItem: 'Новий',
+  createOption: 'Створити опцію "{0}"'
+};
+export default {
+  code: 'uk-UA',
+  common: {
+    loading: 'Завантаження...',
+    emptyMessage: 'Дані не знайдено',
+    remove: 'Видалити',
+    clear: 'Очистити'
+  },
+  Plaintext: {
+    unfilled: 'Незаповнено',
+    notSelected: 'Не вибрано',
+    notUploaded: 'Не завантажено'
+  },
+  Pagination: {
+    more: 'Більше',
+    prev: 'Попередня',
+    next: 'Наступна',
+    first: 'Перша',
+    last: 'Остання',
+    limit: '{0} / сторінка',
+    total: 'Всього: {0}',
+    skip: 'Перейти до {0}'
+  },
+  DateTimeFormats,
+  Calendar: DateTimeFormats,
+  DatePicker: DateTimeFormats,
+  DateRangePicker: {
+    ...DateTimeFormats,
+    last7Days: 'Останні 7 днів'
+  },
+  Combobox,
+  InputPicker: CreatableComboBox,
+  TagPicker: CreatableComboBox,
+  Uploader: {
+    inited: 'Ініційовано',
+    progress: 'Завантаження',
+    error: 'Помилка',
+    complete: 'Завершено',
+    emptyFile: 'Порожній',
+    upload: 'Завантажити',
+    removeFile: 'Видалити файл'
+  },
+  CloseButton: {
+    closeLabel: 'Закрити'
+  },
+  Breadcrumb: {
+    expandText: 'Показати шлях'
+  },
+  Toggle: {
+    on: 'Увімкнено',
+    off: 'Вимкнено'
+  },
+  Dialog: {
+    alert: 'Попередження',
+    confirm: 'Підтвердити',
+    ok: 'Добре',
+    cancel: 'Скасувати'
+  }
+};

package/esm/locales/zh_CN.d.ts

@@ -147,5 +147,11 @@ declare const _default: {
         on: string;
         off: string;
     };
+    Dialog: {
+        alert: string;
+        confirm: string;
+        ok: string;
+        cancel: string;
+    };
 };
 export default _default;

package/esm/locales/zh_CN.js

@@ -83,5 +83,11 @@ export default {
   Toggle: {
     on: '开启',
     off: '关闭'
+  },
+  Dialog: {
+    alert: '提醒',
+    confirm: '确认',
+    ok: '确定',
+    cancel: '取消'
   }
 };

package/esm/locales/zh_TW.d.ts

@@ -147,5 +147,11 @@ declare const _default: {
         on: string;
         off: string;
     };
+    Dialog: {
+        alert: string;
+        confirm: string;
+        ok: string;
+        cancel: string;
+    };
 };
 export default _default;

package/esm/locales/zh_TW.js

@@ -83,5 +83,11 @@ export default {
   Toggle: {
     on: '開啟',
     off: '關閉'
+  },
+  Dialog: {
+    alert: '提醒',
+    confirm: '確認',
+    ok: '確定',
+    cancel: '取消'
   }
 };

package/esm/toaster/ToastContainer.js

@@ -47,7 +47,7 @@ const useMessages = () => {
     // Remove all invisible messages after 400ms.
     // The delay removal here is to preserve the animation.
     setTimeout(() => {
-      setMessages([]);
+      setMessages(() => []);
     }, 400);
   }, [messages]);
   const remove = useCallback(key => {
@@ -61,7 +61,7 @@ const useMessages = () => {
 
     // Remove invisible messages after 400ms.
     setTimeout(() => {
-      setMessages(messages.filter(msg => msg.visible));
+      setMessages(prevMessages => prevMessages.filter(msg => msg.visible));
     }, 400);
   }, [messages, getKey]);
   return {

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;