kitzo 2.0.32 → 2.0.34

package/README.md

@@ -25,7 +25,7 @@ npm i kitzo
 or
 
 ```javascript
-<script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.32/dist/kitzo.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.34/dist/kitzo.umd.min.js"></script>
 ```
 
 > Attach this script tag in the html head tag and you are good to go.
@@ -157,8 +157,8 @@ import { ToastContainer, toast, ... } from 'kitzo/react';
 ```jsx
 import { toast } from 'kitzo/react';
 
-toast.success('toast message', { duration: 2000, style: {}, showIcon: true });
-toast.error('toast message', { duration: 2000, style: {}, showIcon: true });
+toast.success('toast message', { duration: 2000, style: {}, showIcon: true, position: 'top-center' });
+toast.error('toast message', { duration: 2000, style: {}, showIcon: true, position: 'top-center' });
 
 toast.promise(
   promise(), // call a function that returns promise
@@ -167,11 +167,11 @@ toast.promise(
     success: 'Saved' | (response) => 'Saved',
     error: 'Error occured' | (error) => 'Error occured',
   },
-  { duration: 2000, style: {}, showIcon: true },
+  { duration: 2000, style: {}, showIcon: true, position: 'top-center' },
 );
 
 // JSX element
-toast.custom(<MyCustomComponent />, { duration: 2000 });
+toast.custom(<MyCustomComponent />, { duration: 2000, position: 'top-center' });
 
 // Function that receives a dismiss handler
 toast.custom((dismiss) => (
@@ -207,7 +207,7 @@ function App() {
         success: 'Data saved',
         error: 'Failed saving data',
       },
-      { duration: 2500 },
+      { duration: 2500, position: 'top-center' },
     );
   }
 
@@ -221,6 +221,7 @@ function App() {
       ),
       {
         duration: 2000,
+        position: 'top-center',
       },
     );
   }
@@ -233,8 +234,10 @@ function App() {
       <button onClick={customToast}>Custom Toast</button>
 
       {/* Toast container must needed */}
-      <ToastContainer position="top-center" />
+      <ToastContainer />
     </div>
   );
 }
 ```
+
+> Each toast can have its own position. default position is `top-center`.

package/dist/react.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 
 export interface ToastOptions {
+  position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
   duration?: number;
   style?: React.CSSProperties;
   showIcon?: boolean;
@@ -20,9 +21,9 @@ export interface ToastAPI {
     },
     options?: ToastOptions,
   ): Promise<T>;
-  custom(content: CustomContent, options?: { duration?: number | Infinity; exitDelay?: number }): void;
+  custom(content: CustomContent, options?: { duration?: number; exitDelay?: number; position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' }): 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 }): void;

package/dist/react.esm.js

@@ -366,10 +366,12 @@ function Toast({
   } = options;
   const ref = useRef(null);
   useLayoutEffect(() => {
-    const height = ref.current.getBoundingClientRect().height + gap;
-    setToasts(prev => prev.map(t => t.id == id ? {
+    if (!ref.current) return;
+    const height = ref.current.getBoundingClientRect().height;
+    const totalHeight = height + gap;
+    setToasts(prev => prev.map(t => t.id === id ? {
       ...t,
-      height
+      height: totalHeight
     } : t));
   }, []);
   const transformY = position.includes('bottom') ? `translateY(-${offset || 0}px)` : `translateY(${offset || 0}px)`;
@@ -426,10 +428,12 @@ function ToastContainer(props) {
     gap: 8
   }, props);
   const {
-    position,
     gap
   } = props;
+  const position = props.position;
   const [toasts, setToasts] = useState([]);
+
+  // event listener
   useEffect(() => {
     const unsub = subscribe(toast => {
       if (toast.type === 'dismiss') {
@@ -476,19 +480,33 @@ function ToastContainer(props) {
     });
     return () => unsub();
   }, []);
-  useEffect(() => {
-    let offset = 0;
+
+  // measue height and offset for each toast
+  useLayoutEffect(() => {
+    const grouped = toasts.reduce((acc, t) => {
+      const pos = t.options.position || position || 'top-center';
+      (acc[pos] ||= []).push(t);
+      return acc;
+    }, {});
+    let hasChanged = false;
     const updated = toasts.map(toast => {
-      const top = offset;
-      offset += toast.height;
+      const pos = toast.options.position || position || 'top-center';
+      const group = grouped[pos];
+      const index = group.findIndex(t => t.id === toast.id);
+      const offset = group.slice(0, index).reduce((acc, t) => acc + (t.height || 0), 0);
+      if (offset !== toast.offset) {
+        hasChanged = true;
+      }
       return {
         ...toast,
-        offset: top
+        offset
       };
     });
-    const changed = updated.some((u, i) => u.offset != toasts[i].offset);
-    if (changed) setToasts(updated);
+    if (hasChanged) {
+      setToasts(updated);
+    }
   }, [toasts]);
+  const positions = ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'];
   return /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'fixed',
@@ -496,21 +514,31 @@ function ToastContainer(props) {
       zIndex: 100000000,
       pointerEvents: 'none',
       fontFamily: 'inherit',
-      display: 'grid',
-      padding: '1rem',
       boxSizing: 'border-box'
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: 'relative'
-    }
-  }, toasts.map(toast => /*#__PURE__*/React.createElement(Toast, {
-    key: toast.options.id,
-    toast: toast,
-    setToasts: setToasts,
-    position: position,
-    gap: typeof gap === 'string' ? isNaN(+gap) ? 8 : +gap : gap
-  }))));
+  }, positions.map(pos => {
+    const group = toasts.filter(t => (t.options.position || position || 'top-center') === pos);
+    if (!group.length) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      key: pos,
+      style: {
+        position: 'absolute',
+        inset: 0,
+        display: 'grid',
+        padding: '1rem'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'relative'
+      }
+    }, group.map(toast => /*#__PURE__*/React.createElement(Toast, {
+      key: toast.options.id,
+      toast: toast,
+      setToasts: setToasts,
+      position: pos,
+      gap: typeof gap === 'string' ? isNaN(+gap) ? 8 : +gap : gap
+    }))));
+  }));
 }
 
 const toast = {

package/package.json

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