@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/dist/TextArea/TextArea.js

@@ -62,11 +62,13 @@ module.exports = __toCommonJS(TextArea_exports);
 var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
+var import_locales = require("../locales");
 var import_index = require("./index.css");
 const prefixCls = "bui-textarea";
 const DEFAULT_ROWS = 2;
 const TextArea = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {
+    const textareaText = (0, import_locales.useLocaleText)("textarea");
     const _a = props, {
       className,
       value,
@@ -77,10 +79,19 @@ const TextArea = /* @__PURE__ */ import_react.default.forwardRef(
       placeholder,
       disabled,
       rows = DEFAULT_ROWS,
-      maxLength,
+      maxLength: maxLength,
       autoSize = false,
-      autoFocus = false,
-      showCount = false,
+      autoFocus: autoFocus = false,
+      showCount: showCount = false,
+      // 是否展示字数统计
+      // 无障碍属性
+      "aria-label": ariaLabel = textareaText.labelName,
+      "aria-hidden": ariaHidden,
+      "aria-details": ariaDetails,
+      "aria-required": ariaRequired,
+      "aria-readonly": ariaReadonly,
+      "aria-rowindex": ariaRowindex,
+      "aria-colcount": ariaColcount,
       onChange
     } = _a, others = __objRest(_a, [
       "className",
@@ -92,10 +103,20 @@ const TextArea = /* @__PURE__ */ import_react.default.forwardRef(
       "placeholder",
       "disabled",
       "rows",
+      // 默认行数
       "maxLength",
       "autoSize",
+      // 是否自适应高度
       "autoFocus",
+      // 是否自动聚焦
       "showCount",
+      "aria-label",
+      "aria-hidden",
+      "aria-details",
+      "aria-required",
+      "aria-readonly",
+      "aria-rowindex",
+      "aria-colcount",
       "onChange"
     ]);
     const [textAreaValue, triggerChange] = (0, import_utils.useValue)({
@@ -110,7 +131,7 @@ const TextArea = /* @__PURE__ */ import_react.default.forwardRef(
       if (autoFocus && internalRef.current) {
         internalRef.current.focus();
       }
-    }, [internalRef]);
+    }, [autoFocus]);
     const handleAutoHeight = (height) => {
       if (typeof autoSize === "object") {
         const { maxHeight, minHeight } = autoSize;
@@ -140,8 +161,7 @@ const TextArea = /* @__PURE__ */ import_react.default.forwardRef(
       const textArea = internalRef.current;
       const { height, lineCount } = (e == null ? void 0 : e.detail) || {};
       const line = lineCount <= 1 ? rows : lineCount;
-      let textAreaHeight = line * (height / lineCount + 4);
-      textAreaHeight = handleAutoHeight(textAreaHeight);
+      const textAreaHeight = handleAutoHeight(line * (height / lineCount));
       if (!initLock.current && !autoSize && rows === DEFAULT_ROWS) {
         textArea.style.height = `${textAreaHeight}px`;
         initLock.current = true;
@@ -151,12 +171,29 @@ const TextArea = /* @__PURE__ */ import_react.default.forwardRef(
         textArea.style.height = `${textAreaHeight}px`;
       }
     };
+    const [ariaDescription, setAriaDescription] = (0, import_react.useState)("");
     let nativeProps = {
-      [import_utils.isMini ? "maxlength" : "maxLength"]: maxLength != null ? maxLength : -1
+      [import_utils.isMini ? "maxlength" : "maxLength"]: maxLength != null ? maxLength : -1,
+      "aria-description": ariaDescription
     };
+    const accessibilityProps = {
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaHidden,
+      "aria-details": ariaDetails,
+      "aria-required": ariaRequired,
+      "aria-readonly": ariaReadonly,
+      "aria-rowindex": ariaRowindex,
+      "aria-colcount": ariaColcount
+    };
+    Object.keys(accessibilityProps).forEach((key) => {
+      if (accessibilityProps[key] !== void 0) {
+        nativeProps[key] = accessibilityProps[key];
+      }
+    });
     if (import_utils.isMini) {
       nativeProps = __spreadProps(__spreadValues({}, nativeProps), {
         onLineChange: handleLineChange,
+        // 小程序行高变化事件
         placeholderClass: "bui-mini-placeholder",
         autoFocus,
         focus: autoFocus
@@ -192,6 +229,12 @@ const TextArea = /* @__PURE__ */ import_react.default.forwardRef(
           },
           onInput: (e) => {
             var _a2;
+            if (showCount) {
+              const remaining = maxLength - e.target.value.length;
+              setAriaDescription(
+                `${textareaText.remaining} ${remaining} ${textareaText.characters}`
+              );
+            }
             if (import_utils.isMini) {
               triggerChange(e, e.target.value);
             }

package/dist/TextArea/TextArea.types.d.ts

@@ -64,6 +64,34 @@ export type TextAreaProps<D extends React.ElementType = 'div', P = {}> = Overrid
         onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>, data: {
             value: string;
         }) => void;
+        /**
+         * 无障碍功能：ARIA标签
+         */
+        'aria-label'?: string;
+        /**
+         * 无障碍功能：是否隐藏元素
+         */
+        'aria-hidden'?: boolean;
+        /**
+         * 无障碍功能：元素在无障碍树中的细节程度
+         */
+        'aria-details'?: string;
+        /**
+         * 无障碍功能：当前元素是否为必填
+         */
+        'aria-required'?: boolean;
+        /**
+         * 无障碍功能：当前元素是否为只读
+         */
+        'aria-readonly'?: boolean;
+        /**
+         * 无障碍功能：多行文本框的第一行索引
+         */
+        'aria-rowindex'?: number;
+        /**
+         * 无障碍功能：多行文本框的列数
+         */
+        'aria-colcount'?: number;
     };
     defaultComponent: D;
 }, D>;

package/dist/TextArea/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+/**
+ * 自定义 TextArea 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 customDemoComponent.tsx（固定约定）
+ */
+export declare const basicTextAreaDemo: () => React.JSX.Element;
+export declare const ariaLabelTextAreaDemo: () => React.JSX.Element;
+export declare const requiredAndReadonlyTextAreaDemo: () => React.JSX.Element;
+export declare const showCountTextAreaDemo: () => React.JSX.Element;
+export declare const autoFocusTextAreaDemo: () => React.JSX.Element;
+declare const _default: {
+    basicTextAreaDemo: () => React.JSX.Element;
+    ariaLabelTextAreaDemo: () => React.JSX.Element;
+    requiredAndReadonlyTextAreaDemo: () => React.JSX.Element;
+    showCountTextAreaDemo: () => React.JSX.Element;
+    autoFocusTextAreaDemo: () => React.JSX.Element;
+};
+export default _default;

package/dist/TextArea/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,91 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var A11yDemos_exports = {};
+__export(A11yDemos_exports, {
+  ariaLabelTextAreaDemo: () => ariaLabelTextAreaDemo,
+  autoFocusTextAreaDemo: () => autoFocusTextAreaDemo,
+  basicTextAreaDemo: () => basicTextAreaDemo,
+  default: () => A11yDemos_default,
+  requiredAndReadonlyTextAreaDemo: () => requiredAndReadonlyTextAreaDemo,
+  showCountTextAreaDemo: () => showCountTextAreaDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_TextArea = __toESM(require("../../TextArea"));
+const basicTextAreaDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_TextArea.default, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9" }));
+};
+const ariaLabelTextAreaDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_TextArea.default, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9", "aria-label": "\u7528\u6237\u8BC4\u8BBA\u8F93\u5165\u6846" }));
+};
+const requiredAndReadonlyTextAreaDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_TextArea.default, { placeholder: "\u5FC5\u586B\u9879", "aria-required": true }), /* @__PURE__ */ import_react.default.createElement(
+    import_TextArea.default,
+    {
+      placeholder: "\u53EA\u8BFB\u9879",
+      "aria-readonly": true,
+      defaultValue: "\u8FD9\u662F\u53EA\u8BFB\u5185\u5BB9"
+    }
+  ));
+};
+const showCountTextAreaDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_TextArea.default,
+    {
+      placeholder: "\u6700\u591A\u8F93\u516550\u4E2A\u5B57",
+      maxLength: 50,
+      showCount: true,
+      "aria-label": "\u5E26\u5B57\u6570\u7EDF\u8BA1\u7684\u8F93\u5165\u6846"
+    }
+  ));
+};
+const autoFocusTextAreaDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_TextArea.default,
+    {
+      placeholder: "\u81EA\u52A8\u805A\u7126",
+      autoFocus: true,
+      "aria-label": "\u81EA\u52A8\u805A\u7126\u7684\u8F93\u5165\u6846"
+    }
+  ));
+};
+var A11yDemos_default = {
+  basicTextAreaDemo,
+  ariaLabelTextAreaDemo,
+  requiredAndReadonlyTextAreaDemo,
+  showCountTextAreaDemo,
+  autoFocusTextAreaDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ariaLabelTextAreaDemo,
+  autoFocusTextAreaDemo,
+  basicTextAreaDemo,
+  requiredAndReadonlyTextAreaDemo,
+  showCountTextAreaDemo
+});

package/dist/TextArea/index.css

@@ -3,9 +3,9 @@ page,
 xhs-page {
   --bui-textarea-border-radius: var(--bui-shape-radius-label);
   --bui-textarea-width: 100%;
-  --bui-textarea-background-color: var(--bui-color-bg-default);
+  --bui-textarea-bg-color: var(--bui-color-bg-default);
   --bui-textarea-text-color: var(--bui-color-fg-subtle);
-  --bui-textarea-count-background-color: var(--bui-textarea-background-color, var(--bui-color-bg-default));
+  --bui-textarea-count-bg-color: var(--bui-textarea-bg-color, var(--bui-color-bg-default));
   --bui-textarea-count-color: var(--bui-color-fg-subtle);
   --bui-textarea-text-font-size: var(--bui-text-size-2);
   --bui-textarea-count-font-size: var(--bui-title-size-3);
@@ -37,7 +37,7 @@ xhs-page {
 .bui-textarea-content {
   width: var(--bui-textarea-width);
   resize: none;
-  background-color: var(--bui-textarea-background-color);
+  background-color: var(--bui-textarea-bg-color);
   padding: var(--bui-textarea-padding);
   border: none;
   outline: none;
@@ -49,7 +49,7 @@ xhs-page {
   line-height: var(--bui-textarea-placeholder-line-height);
 }
 .bui-textarea-count {
-  background-color: var(--bui-textarea-count-background-color);
+  background-color: var(--bui-textarea-count-bg-color);
   color: var(--bui-textarea-count-color);
   text-align: right;
   padding: var(--bui-textarea-count-padding);

package/dist/ThemeProvider/ThemeProvider.types.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { OverrideProps } from '@bifrostui/types';
-import { BaseLang } from '../locales/base';
+import type { BaseLang } from '../locales/base';
 export interface Breakpoints {
     /**
      * 超小屏幕 (小于 576px，实际为了处理临界值，断点值为 575.98px)

package/dist/ThemeProvider/ThemeProvider.types.js

@@ -2,10 +2,6 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -16,12 +12,4 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var ThemeProvider_types_exports = {};
-__export(ThemeProvider_types_exports, {
-  BaseLang: () => import_base.BaseLang
-});
 module.exports = __toCommonJS(ThemeProvider_types_exports);
-var import_base = require("../locales/base");
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  BaseLang
-});

package/dist/Toast/FunctionalToast.d.ts

@@ -1,3 +1,3 @@
 import { ToastInstance } from './Toast.types';
-declare const Toast: ToastInstance;
-export default Toast;
+declare const _default: ToastInstance;
+export default _default;

package/dist/Toast/FunctionalToast.js

@@ -59,127 +59,222 @@ __export(FunctionalToast_exports, {
   default: () => FunctionalToast_default
 });
 module.exports = __toCommonJS(FunctionalToast_exports);
-var import_utils = require("@bifrostui/utils");
 var import_react = __toESM(require("react"));
+var import_utils = require("@bifrostui/utils");
+var import_Portal = __toESM(require("../Portal"));
 var import_Toast = __toESM(require("./Toast"));
-let toastCloses = [];
+const defaultProps = {
+  duration: 2e3,
+  position: "center",
+  multiple: false,
+  disableClick: false
+};
+const toastCloses = [];
 const formatProps = (props) => {
-  if (typeof props === "string") {
-    return { message: props };
-  }
-  return props;
+  return typeof props === "string" ? { message: props } : props;
 };
-const destroyAll = () => {
-  let closeToast = toastCloses.pop();
-  while (closeToast) {
-    closeToast();
-    closeToast = toastCloses.pop();
-  }
+const destroyAll = (closes) => {
+  do {
+    const closeToast = closes.pop();
+    closeToast == null ? void 0 : closeToast();
+  } while (closes.length > 0);
 };
-const functionalToast = (props) => {
-  const options = __spreadValues({
-    duration: 2e3,
-    position: "center",
-    allowMultiple: false,
-    disableClick: false
-  }, formatProps(props));
+const Toast = (props) => {
+  const options = __spreadValues(__spreadValues({}, defaultProps), formatProps(props));
   const instance = {
     close: () => null
   };
+  const _a = options, { container } = _a, restOptions = __objRest(_a, ["container"]);
   const rootWrapper = document.createElement("div");
-  if (options.disableClick) {
-    const styles = {
-      position: "fixed",
-      top: "0",
-      bottom: "0",
-      left: "0",
-      right: "0",
-      zIndex: "var(--bui-z-index-toast)"
-    };
-    Object.keys(styles).forEach((property) => {
-      rootWrapper.style[property] = styles[property];
-    });
-  }
-  const rootElement = (0, import_utils.getRootElement)();
+  const rootElement = (0, import_utils.getRootContainer)(container);
   rootElement.appendChild(rootWrapper);
   const ToastComponent = () => {
-    const _a = options, { duration, allowMultiple, onClose } = _a, others = __objRest(_a, ["duration", "allowMultiple", "onClose"]);
-    const [open, setOpen] = (0, import_react.useState)(false);
-    let timer;
-    const fadeTimeout = {
-      enter: 350,
-      exit: 150
-    };
+    const _a2 = restOptions, { duration, multiple, onClose, onExited } = _a2, others = __objRest(_a2, ["duration", "multiple", "onClose", "onExited"]);
+    const [open, setOpen] = (0, import_react.useState)(true);
+    const timerRef = (0, import_react.useRef)(null);
     const close = (0, import_react.useCallback)(() => {
       setOpen(false);
-      setTimeout(() => {
-        const unmountRes = (0, import_utils.unmount)(rootWrapper);
-        if (unmountRes && rootWrapper.parentNode) {
-          rootWrapper.parentNode.removeChild(rootWrapper);
-        }
-      }, fadeTimeout.exit);
       onClose == null ? void 0 : onClose();
-    }, [rootWrapper]);
+    }, [rootWrapper, onClose]);
     (0, import_react.useEffect)(() => {
-      setOpen(true);
-      if (!allowMultiple)
-        destroyAll();
+      if (!multiple)
+        destroyAll(toastCloses);
       toastCloses.push(close);
       if (duration !== 0 && typeof duration === "number") {
-        timer = setTimeout(() => {
+        timerRef.current = window.setTimeout(() => {
           close();
-          if (!allowMultiple) {
-            toastCloses = [];
+          if (!multiple) {
+            const index = toastCloses.indexOf(close);
+            if (index > -1) {
+              toastCloses.splice(index, 1);
+            }
           }
         }, duration);
       }
       return () => {
-        clearTimeout(timer);
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+        }
       };
     }, []);
+    const onProxyExited = () => {
+      onExited == null ? void 0 : onExited();
+      const unmountRes = (0, import_utils.unmount)(rootWrapper);
+      if (unmountRes && rootWrapper.parentNode) {
+        rootWrapper.parentNode.removeChild(rootWrapper);
+      }
+    };
     instance.close = close;
-    return /* @__PURE__ */ import_react.default.createElement(
-      import_Toast.default,
-      __spreadProps(__spreadValues({}, others), {
-        open,
-        timeout: fadeTimeout,
-        onClose: close
-      })
-    );
+    return /* @__PURE__ */ import_react.default.createElement(import_Toast.default, __spreadProps(__spreadValues({}, others), { open, onExited: onProxyExited }));
   };
   (0, import_utils.render)(/* @__PURE__ */ import_react.default.createElement(ToastComponent, null), rootWrapper);
   return instance;
 };
-["warning", "loading", "success", "fail"].forEach((methodName) => {
-  functionalToast[methodName] = (options) => functionalToast(__spreadValues({
-    type: methodName
-  }, formatProps(options)));
-});
-functionalToast.clear = () => {
+["warning", "loading", "success", "fail"].forEach(
+  (methodName) => {
+    Toast[methodName] = (options) => Toast(__spreadValues({
+      type: methodName
+    }, formatProps(options)));
+  }
+);
+Toast.clear = () => {
   setTimeout(() => {
-    destroyAll();
+    destroyAll(toastCloses);
   });
 };
+const UseToastComponent = (props) => {
+  const _a = props, {
+    domRef,
+    onExited,
+    onSetOpenFalse,
+    onEnd,
+    destroyAllCloses,
+    addClose,
+    removeClose,
+    open
+  } = _a, restProps = __objRest(_a, [
+    "domRef",
+    "onExited",
+    "onSetOpenFalse",
+    "onEnd",
+    "destroyAllCloses",
+    "addClose",
+    "removeClose",
+    "open"
+  ]);
+  const options = __spreadValues(__spreadValues({}, defaultProps), formatProps(restProps));
+  const _b = options, { duration, multiple, onClose, container } = _b, others = __objRest(_b, ["duration", "multiple", "onClose", "container"]);
+  const rootElement = (0, import_utils.getRootContainer)(container);
+  const timerRef = (0, import_react.useRef)(null);
+  const close = () => {
+    onSetOpenFalse == null ? void 0 : onSetOpenFalse();
+    onClose == null ? void 0 : onClose();
+  };
+  (0, import_react.useEffect)(() => {
+    if (!multiple)
+      destroyAllCloses();
+    addClose(close);
+    if (duration !== 0 && typeof duration === "number") {
+      timerRef.current = window.setTimeout(() => {
+        close();
+        if (!multiple) {
+          removeClose(close);
+        }
+      }, duration);
+    }
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+  const onProxyExited = () => {
+    onEnd == null ? void 0 : onEnd();
+    onExited == null ? void 0 : onExited();
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { container: rootElement }, /* @__PURE__ */ import_react.default.createElement(
+    import_Toast.default,
+    __spreadProps(__spreadValues({}, others), {
+      open,
+      onExited: onProxyExited,
+      ref: domRef
+    })
+  ));
+};
+UseToastComponent.displayName = "UseToastComponent";
 const useToast = () => {
-  const holderRef = import_react.default.useRef(null);
-  ["warning", "loading", "success", "fail"].forEach((methodName) => {
-    functionalToast[methodName] = (options) => {
-      var _a;
-      return functionalToast(__spreadProps(__spreadValues({
-        type: methodName
-      }, formatProps(options)), {
-        theme: (_a = holderRef.current) == null ? void 0 : _a.theme
-      }));
+  const [elements, setElements] = (0, import_react.useState)([]);
+  const hookToastClosesRef = (0, import_react.useRef)([]);
+  const createToast = (options) => {
+    const key = `toast-${Date.now()}-${Math.random()}`;
+    const _a = options, { ref } = _a, restOptions = __objRest(_a, ["ref"]);
+    const instance = {
+      close: () => {
+        setElements(
+          (prev) => prev.map(
+            (element) => element.key === key ? __spreadProps(__spreadValues({}, element), { open: false }) : element
+          )
+        );
+      }
     };
-  });
-  functionalToast.clear = () => {
+    const handleAnimationEnd = () => {
+      setElements((prev) => prev.filter((element) => element.key !== key));
+    };
+    const toastElement = {
+      key,
+      open: true,
+      props: __spreadProps(__spreadValues({}, restOptions), {
+        onEnd: handleAnimationEnd
+      }),
+      ref
+    };
+    setElements((prev) => [...prev, toastElement]);
+    return instance;
+  };
+  const hookToast = (options) => createToast(__spreadValues({}, formatProps(options)));
+  ["warning", "loading", "success", "fail"].forEach(
+    (methodName) => {
+      hookToast[methodName] = (options) => createToast(__spreadValues({
+        type: methodName
+      }, formatProps(options)));
+    }
+  );
+  hookToast.clear = () => {
     setTimeout(() => {
-      destroyAll();
+      destroyAll(hookToastClosesRef.current);
     });
   };
-  const wrapAPI = functionalToast;
-  return [wrapAPI, /* @__PURE__ */ import_react.default.createElement(import_Toast.default, { key: "toast-holder", ref: holderRef })];
+  const destroyAllCloses = () => {
+    destroyAll(hookToastClosesRef.current);
+  };
+  const renderedElements = elements.map((element) => {
+    const onSetOpenFalse = () => {
+      setElements(
+        (prev) => prev.map(
+          (el) => el.key === element.key ? __spreadProps(__spreadValues({}, el), { open: false }) : el
+        )
+      );
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
+      UseToastComponent,
+      __spreadProps(__spreadValues({
+        key: element.key
+      }, element.props), {
+        open: element.open,
+        onSetOpenFalse,
+        domRef: element.ref,
+        destroyAllCloses,
+        addClose: (close) => hookToastClosesRef.current.push(close),
+        removeClose: (close) => {
+          const index = hookToastClosesRef.current.indexOf(close);
+          if (index > -1) {
+            hookToastClosesRef.current.splice(index, 1);
+          }
+        }
+      })
+    );
+  });
+  return [hookToast, /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, renderedElements)];
 };
-functionalToast.useToast = useToast;
-const Toast = functionalToast;
+Toast.useToast = useToast;
 var FunctionalToast_default = Toast;

package/dist/Toast/Toast.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ToastProps, ToastRef } from './Toast.types';
+import { ToastProps } from './Toast.types';
 import './index.less';
-declare const ToastComponent: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<ToastRef>>;
+declare const ToastComponent: React.ForwardRefExoticComponent<Omit<Omit<Omit<ToastProps, "onClose">, "container">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default ToastComponent;