kitzo 2.0.27 → 2.0.29

package/README.md

@@ -25,7 +25,7 @@ npm i kitzo
 or
 
 ```javascript
-<script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.27/dist/kitzo.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.29/dist/kitzo.umd.min.js"></script>
 ```
 
 > Attach this script tag in the html head tag and you are good to go.
@@ -126,13 +126,14 @@ kitzo.clippath(selectors | element | NodeList, {
   style: object,
 });
 ```
+
 ##### TypeCheck API:
 
 ```javascript
 kitzo.getType(type);
 
 const data = [];
-console.log(kitzo.getType(data)) // 'array'
+console.log(kitzo.getType(data)); // 'array'
 ```
 
 ---
@@ -156,17 +157,32 @@ import { ToastContainer, toast, ... } from 'kitzo/react';
 ```jsx
 import { toast } from 'kitzo/react';
 
-toast.success('toast message', {});
-toast.error('toast message', {});
+toast.success('toast message', { duration: 2000, style: {}, showIcon: true });
+toast.error('toast message', { duration: 2000, style: {}, showIcon: true });
+
 toast.promise(
-  promise(),
+  promise(), // call a function that returns promise
   {
     loading: 'Saving...',
-    success: 'Saved',
-    error: 'Error occured',
+    success: 'Saved' | (response) => 'Saved',
+    error: 'Error occured' | (error) => 'Error occured',
   },
-  { duration: 2000 }
+  { duration: 2000, style: {}, showIcon: true },
 );
+
+// JSX element
+toast.custom(<MyCustomComponent />, { duration: 2000 });
+
+// Function that receives a dismiss handler
+toast.custom((dismiss) => (
+  <div>
+    <span>Custom toast message</span>
+    <button onClick={dismiss}>Close</button>
+  </div>
+), { duration: 3000 | Infinity });
+
+// (and optionally)
+toast.custom("string");
 ```
 
 ##### Toast API Usage
@@ -179,29 +195,42 @@ function App() {
     return new Promise((resolved, rejected) => {
       setTimeout(() => {
         Math.random() > 0.5 ? resolved('resolved') : rejected('rejected');
-      }, 2000)
-    })
+      }, 2000);
+    });
+  }
+
+  function promiseToast() {
+    toast.promise(
+      fakePromise(),
+      {
+        loading: 'Saving data...',
+        success: 'Data saved',
+        error: 'Failed saving data',
+      },
+      { duration: 2500 },
+    );
+  }
+
+  function customToast() {
+    toast.custom(
+      (dismiss) => (
+        <div>
+          <span>Funtion that return jsx</span>
+          <button onClick={dismiss}>Close</button>
+        </div>
+      ),
+      {
+        duration: 2000,
+      },
+    );
   }
 
   return (
     <div>
       <button onClick={() => toast.success('✅ Success toast message')}>Succes</button>
       <button onClick={() => toast.error('❌ Error toast message')}>Error</button>
-      <button
-        onClick={() => {
-          toast.promise(
-            fakePromise(),
-            {
-              loading: 'Saving data...',
-              success: 'Data saved',
-              error: 'Failed saving data',
-            },
-            { duration: 2500 }
-          );
-        }}
-      >
-        Promise
-      </button>
+      <button onClick={promiseToast}>Promise</button>
+      <button onClick={customToast}>Custom Toast</button>
 
       {/* Toast container must needed */}
       <ToastContainer position="top-center" />

package/dist/react.d.ts

@@ -1,9 +1,13 @@
+import React from 'react';
+
 export interface ToastOptions {
   duration?: number;
   style?: React.CSSProperties;
   showIcon?: boolean;
 }
 
+export type CustomContent = string | React.ReactNode | ((dismiss: () => void) => React.ReactNode);
+
 export interface ToastAPI {
   success(text?: string, options?: ToastOptions): void;
   error(text?: string, options?: ToastOptions): void;
@@ -14,12 +18,11 @@ export interface ToastAPI {
       success?: string | ((res: T) => string);
       error?: string | ((err: Error) => string);
     },
-    options?: ToastOptions
+    options?: ToastOptions,
   ): Promise<T>;
+  custom(content: CustomContent, options?: { duration?: number | Infinity; }): void;
 }
 
 export declare const toast: ToastAPI;
-export declare function ToastContainer(props: {
-  position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-  gap?: number;
-}): JSX.Element;
+
+export declare function ToastContainer(props: { position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'; gap?: number }): JSX.Element;

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 {
@@ -183,6 +181,8 @@ function toastStyles() {
 }
 `;
 }
+const listeners = new Set();
+let isStyleAdded = false;
 function addToast(toast) {
   listeners.forEach(callback => {
     callback(toast);
@@ -267,6 +267,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", {
@@ -361,7 +382,7 @@ function Toast({
       ...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)));
+  }, type === 'custom' ? typeof toast.render === 'function' ? toast.render(() => dismiss(toast.id, toast.options.exitDelay)) : typeof toast.render === 'string' ? /*#__PURE__*/React.createElement("span", null, toast.render) : toast.render : /*#__PURE__*/React.createElement(React.Fragment, null, 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 +417,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 +447,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 +501,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.27",
+  "version": "2.0.29",
   "description": "A lightweight JavaScript UI micro-library.",
   "type": "module",
   "main": "./dist/kitzo.umd.js",