kitzo 2.0.28 → 2.0.30

package/README.md

@@ -25,7 +25,7 @@ npm i kitzo
 or
 
 ```javascript
-<script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.28/dist/kitzo.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.30/dist/kitzo.umd.min.js"></script>
 ```
 
 > Attach this script tag in the html head tag and you are good to go.

package/dist/react.esm.js

@@ -1,7 +1,5 @@
 import React, { useRef, useLayoutEffect, useState, useEffect } from 'react';
 
-const listeners = new Set();
-let isStyleAdded = false;
 function toastStyles() {
   return `.toast-content,
 .toast-content-bottom {
@@ -10,6 +8,9 @@ function toastStyles() {
 .toast-content,
 .toast-content-bottom {
   pointer-events: all;
+}
+  
+.pre-styled {
   padding-inline: 0.825rem;
   padding-block: 0.625rem;
   display: flex;
@@ -183,6 +184,8 @@ function toastStyles() {
 }
 `;
 }
+const listeners = new Set();
+let isStyleAdded = false;
 function addToast(toast) {
   listeners.forEach(callback => {
     callback(toast);
@@ -267,6 +270,27 @@ function promise(callback, msgs = {}, options = {}) {
     return Promise.reject(normalizedError);
   });
 }
+function custom(render, options = {}) {
+  const id = Date.now();
+  options = Object.assign({
+    duration: 3000,
+    id,
+    exitDelay: 50
+  }, options);
+  addToast({
+    type: 'custom',
+    render,
+    options
+  });
+  return id;
+}
+function dismiss(id, exitDelay) {
+  addToast({
+    type: 'dismiss',
+    id,
+    exitDelay
+  });
+}
 
 function SuccessSvg() {
   return /*#__PURE__*/React.createElement("div", {
@@ -349,6 +373,16 @@ function Toast({
     } : t));
   }, []);
   const transformY = position.includes('bottom') ? `translateY(-${offset || 0}px)` : `translateY(${offset || 0}px)`;
+  function renderCustomContent() {
+    const render = toast.render;
+    if (typeof render === 'function') {
+      return render(() => dismiss(toast.id, toast.options.exitDelay));
+    }
+    if (typeof render === 'string') {
+      return /*#__PURE__*/React.createElement("span", null, render);
+    }
+    return render;
+  }
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     style: {
@@ -357,11 +391,13 @@ function Toast({
       ...getToastPosition(position)
     }
   }, /*#__PURE__*/React.createElement("div", {
+    className: `toast-content${position.includes('bottom') ? '-bottom' : ''} ${leaving ? 'exit' : ''}`
+  }, type === 'custom' ? renderCustomContent() : /*#__PURE__*/React.createElement("div", {
     style: {
       ...style
     },
-    className: `toast-content${position.includes('bottom') ? '-bottom' : ''} ${leaving ? 'exit' : ''}`
-  }, showIcon && /*#__PURE__*/React.createElement(React.Fragment, null, type === 'loading' && /*#__PURE__*/React.createElement(LoadingSvg, null), type === 'success' && /*#__PURE__*/React.createElement(SuccessSvg, null), type === 'error' && /*#__PURE__*/React.createElement(ErrorSvg, null)), /*#__PURE__*/React.createElement("span", null, text)));
+    className: "pre-styled"
+  }, showIcon && /*#__PURE__*/React.createElement(React.Fragment, null, type === 'loading' && /*#__PURE__*/React.createElement(LoadingSvg, null), type === 'success' && /*#__PURE__*/React.createElement(SuccessSvg, null), type === 'error' && /*#__PURE__*/React.createElement(ErrorSvg, null)), /*#__PURE__*/React.createElement("span", null, text))));
 }
 function getToastPosition(position) {
   const isLeft = position.includes('left');
@@ -396,6 +432,18 @@ function ToastContainer(props) {
   const [toasts, setToasts] = useState([]);
   useEffect(() => {
     const unsub = subscribe(toast => {
+      if (toast.type === 'dismiss') {
+        setTimeout(() => {
+          setToasts(prev => prev.map(t => t.options.id === toast.id ? {
+            ...t,
+            leaving: true
+          } : t));
+        }, Math.max(0, Number(toast.exitDelay)));
+        setTimeout(() => {
+          setToasts(prev => prev.filter(t => t.options.id !== toast.id));
+        }, Math.max(0, Number(toast.exitDelay) + 300));
+        return;
+      }
       const duration = toast.options.duration;
       const id = toast.options.id;
       setToasts(prev => {
@@ -414,7 +462,7 @@ function ToastContainer(props) {
           leaving: false
         }, ...prev];
       });
-      if (toast.type !== 'loading') {
+      if (toast.type !== 'loading' && isFinite(duration)) {
         setTimeout(() => {
           setToasts(prev => prev.map(t => t.options.id === id ? {
             ...t,
@@ -468,7 +516,8 @@ function ToastContainer(props) {
 const toast = {
   success,
   error,
-  promise
+  promise,
+  custom
 };
 
 export { ToastContainer, toast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitzo",
-  "version": "2.0.28",
+  "version": "2.0.30",
   "description": "A lightweight JavaScript UI micro-library.",
   "type": "module",
   "main": "./dist/kitzo.umd.js",