kitzo 2.0.1 → 2.0.2

package/dist/react.esm.js

@@ -187,7 +187,7 @@ function toastStyles() {
 `;
 }
 function addToast(toast) {
-  listeners.forEach((callback) => {
+  listeners.forEach(callback => {
     callback(toast);
   });
 }
@@ -203,222 +203,158 @@ function subscribe(callback) {
 }
 function success(text = 'Toast success', options = {}) {
   const id = Date.now();
-  options = Object.assign(
-    {
-      duration: 2000,
-      id,
-    },
-    options
-  );
+  options = Object.assign({
+    duration: 2000,
+    id
+  }, options);
   addToast({
     type: 'success',
     text,
-    options,
+    options
   });
 }
 function error(text = 'Toast denied', options = {}) {
   const id = Date.now();
-  options = Object.assign(
-    {
-      duration: 2000,
-      id,
-    },
-    options
-  );
+  options = Object.assign({
+    duration: 2000,
+    id
+  }, options);
   addToast({
     type: 'error',
     text,
-    options,
+    options
   });
 }
 function promise(callback, msgs = {}, options = {}) {
   const id = Date.now();
-  options = Object.assign(
-    {
-      duration: 2000,
-      id,
-    },
-    options
-  );
-  msgs = Object.assign(
-    {
-      loading: 'Saving...',
-      success: 'Success',
-      error: 'Something went wrong',
-    },
-    msgs
-  );
+  options = Object.assign({
+    duration: 2000,
+    id
+  }, options);
+  msgs = Object.assign({
+    loading: 'Saving...',
+    success: 'Success',
+    error: 'Something went wrong'
+  }, msgs);
   addToast({
     type: 'loading',
     text: msgs.loading,
     options: {
       ...options,
       duration: Infinity,
-      id,
-    },
+      id
+    }
   });
-  callback
-    .then((res) => {
-      const successMsg = typeof msgs.success === 'function' ? msgs.success(res) : msgs.success;
-      addToast({
-        type: 'success',
-        text: successMsg,
-        options,
-      });
-      return res;
-    })
-    .catch((err) => {
-      const normalizedError = err instanceof Error ? err : new Error(String(err));
-      const errorMsg = typeof msgs.error === 'function' ? msgs.error(normalizedError) : msgs.error;
-      addToast({
-        type: 'error',
-        text: errorMsg,
-        options,
-      });
-      return Promise.reject(normalizedError);
+  callback.then(res => {
+    const successMsg = typeof msgs.success === 'function' ? msgs.success(res) : msgs.success;
+    addToast({
+      type: 'success',
+      text: successMsg,
+      options
     });
+    return res;
+  }).catch(err => {
+    const normalizedError = err instanceof Error ? err : new Error(String(err));
+    const errorMsg = typeof msgs.error === 'function' ? msgs.error(normalizedError) : msgs.error;
+    addToast({
+      type: 'error',
+      text: errorMsg,
+      options
+    });
+    return Promise.reject(normalizedError);
+  });
 }
 
 function SuccessSvg() {
-  return /*#__PURE__*/ React.createElement(
-    'div',
-    {
-      className: 'svg-container success',
-    },
-    /*#__PURE__*/ React.createElement(
-      'svg',
-      {
-        xmlns: 'http://www.w3.org/2000/svg',
-        width: '24',
-        height: '24',
-        viewBox: '0 0 24 24',
-        fill: 'none',
-        stroke: 'currentColor',
-        strokeWidth: '2',
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-      },
-      /*#__PURE__*/ React.createElement('path', {
-        d: 'M20 6 9 17l-5-5',
-      })
-    )
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: "svg-container success"
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M20 6 9 17l-5-5"
+  })));
 }
 function ErrorSvg() {
-  return /*#__PURE__*/ React.createElement(
-    'div',
-    {
-      className: 'svg-container error',
-    },
-    /*#__PURE__*/ React.createElement(
-      'svg',
-      {
-        xmlns: 'http://www.w3.org/2000/svg',
-        width: '24',
-        height: '24',
-        viewBox: '0 0 24 24',
-        fill: 'none',
-        stroke: 'currentColor',
-        strokeWidth: '2',
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-      },
-      /*#__PURE__*/ React.createElement('path', {
-        d: 'M18 6 6 18',
-      }),
-      /*#__PURE__*/ React.createElement('path', {
-        d: 'm6 6 12 12',
-      })
-    )
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: "svg-container error"
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M18 6 6 18"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m6 6 12 12"
+  })));
 }
 function LoadingSvg() {
-  return /*#__PURE__*/ React.createElement(
-    'div',
-    {
-      className: 'promise-svg-container',
-    },
-    /*#__PURE__*/ React.createElement(
-      'svg',
-      {
-        xmlns: 'http://www.w3.org/2000/svg',
-        width: '24',
-        height: '24',
-        viewBox: '0 0 24 24',
-        fill: 'none',
-        stroke: 'currentColor',
-        strokeWidth: '2',
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-      },
-      /*#__PURE__*/ React.createElement('path', {
-        d: 'M21 12a9 9 0 1 1-6.219-8.56',
-      })
-    )
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: "promise-svg-container"
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M21 12a9 9 0 1 1-6.219-8.56"
+  })));
 }
 
-const GAP = 10;
-function Toast({ toast, setToasts, position }) {
+function Toast({
+  toast,
+  setToasts,
+  position
+}) {
   const ref = useRef(null);
   useLayoutEffect(() => {
     if (!ref.current) return;
     const h = ref.current.getBoundingClientRect().height;
-    setToasts((prev) =>
-      prev.map((t) =>
-        t.options.id === toast.id
-          ? t
-          : {
-              ...t,
-              offset: t.offset + h + GAP,
-            }
-      )
-    );
+    setToasts(prev => prev.map(t => t.options.id === toast.id ? t : {
+      ...t,
+      offset: t.offset + h + 10
+    }));
   }, [setToasts, toast.id]);
   if (position.includes('bottom')) {
-    return /*#__PURE__*/ React.createElement(
-      'div',
-      {
-        ref: ref,
-        className: 'toast',
-        style: {
-          transform: `translateY(-${toast.offset}px)`,
-          ...getToastPosition(position),
-        },
-      },
-      /*#__PURE__*/ React.createElement(
-        'div',
-        {
-          className: `toast-content-bottom ${toast.leaving ? 'exit' : ''}`,
-        },
-        toast.type === 'loading' && /*#__PURE__*/ React.createElement(LoadingSvg, null),
-        toast.type === 'success' && /*#__PURE__*/ React.createElement(SuccessSvg, null),
-        toast.type === 'error' && /*#__PURE__*/ React.createElement(ErrorSvg, null),
-        /*#__PURE__*/ React.createElement('span', null, toast.text)
-      )
-    );
-  }
-  return /*#__PURE__*/ React.createElement(
-    'div',
-    {
+    return /*#__PURE__*/React.createElement("div", {
       ref: ref,
-      className: 'toast',
+      className: "toast",
       style: {
-        transform: `translateY(${toast.offset}px)`,
-        ...getToastPosition(position),
-      },
-    },
-    /*#__PURE__*/ React.createElement(
-      'div',
-      {
-        className: `toast-content ${toast.leaving ? 'exit' : ''}`,
-      },
-      toast.type === 'loading' && /*#__PURE__*/ React.createElement(LoadingSvg, null),
-      toast.type === 'success' && /*#__PURE__*/ React.createElement(SuccessSvg, null),
-      toast.type === 'error' && /*#__PURE__*/ React.createElement(ErrorSvg, null),
-      /*#__PURE__*/ React.createElement('span', null, toast.text)
-    )
-  );
+        transform: `translateY(-${toast.offset}px)`,
+        ...getToastPosition(position)
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `toast-content-bottom ${toast.leaving ? 'exit' : ''}`
+    }, toast.type === 'loading' && /*#__PURE__*/React.createElement(LoadingSvg, null), toast.type === 'success' && /*#__PURE__*/React.createElement(SuccessSvg, null), toast.type === 'error' && /*#__PURE__*/React.createElement(ErrorSvg, null), /*#__PURE__*/React.createElement("span", null, toast.text)));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "toast",
+    style: {
+      transform: `translateY(${toast.offset}px)`,
+      ...getToastPosition(position)
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `toast-content ${toast.leaving ? 'exit' : ''}`
+  }, toast.type === 'loading' && /*#__PURE__*/React.createElement(LoadingSvg, null), toast.type === 'success' && /*#__PURE__*/React.createElement(SuccessSvg, null), toast.type === 'error' && /*#__PURE__*/React.createElement(ErrorSvg, null), /*#__PURE__*/React.createElement("span", null, toast.text)));
 }
 function getToastPosition(position) {
   const isLeft = position.includes('left');
@@ -428,7 +364,7 @@ function getToastPosition(position) {
     width: 'calc(100% - 2rem)',
     pointerEvents: 'none',
     transition: 'transform 230ms',
-    display: 'flex',
+    display: 'flex'
   };
   if (position.includes('top')) {
     styles.top = '1rem';
@@ -441,89 +377,68 @@ function getToastPosition(position) {
   return styles;
 }
 
-const EXIT_ANIM_MS = 300;
 function ToastContainer(props) {
-  props = Object.assign(
-    {
-      position: 'top-center',
-    },
-    props
-  );
-  const { position } = props;
+  props = Object.assign({
+    position: 'top-center'
+  }, props);
+  const {
+    position
+  } = props;
   const [toasts, setToasts] = useState([]);
   useEffect(() => {
-    const unsub = subscribe((toast) => {
+    const unsub = subscribe(toast => {
       const duration = toast.options.duration;
       const id = toast.options.id;
-      setToasts((prev) => {
-        const exists = prev.some((t) => t.options.id === id);
+      setToasts(prev => {
+        const exists = prev.some(t => t.options.id === id);
         if (exists) {
-          return prev.map((t) =>
-            t.options.id === id
-              ? {
-                  ...t,
-                  ...toast,
-                }
-              : t
-          );
+          return prev.map(t => t.options.id === id ? {
+            ...t,
+            ...toast
+          } : t);
         }
-        return [
-          {
-            id,
-            ...toast,
-            offset: 0,
-            leaving: false,
-          },
-          ...prev,
-        ];
+        return [{
+          id,
+          ...toast,
+          offset: 0,
+          leaving: false
+        }, ...prev];
       });
       if (toast.type !== 'loading') {
         setTimeout(() => {
-          setToasts((prev) =>
-            prev.map((t) =>
-              t.options.id === id
-                ? {
-                    ...t,
-                    leaving: true,
-                  }
-                : t
-            )
-          );
-        }, Math.max(0, duration - EXIT_ANIM_MS));
+          setToasts(prev => prev.map(t => t.options.id === id ? {
+            ...t,
+            leaving: true
+          } : t));
+        }, Math.max(0, duration - 300));
         setTimeout(() => {
-          setToasts((prev) => prev.filter((t) => t.options.id !== id));
+          setToasts(prev => prev.filter(t => t.options.id !== id));
         }, duration);
       }
     });
     return () => unsub();
   }, []);
-  return /*#__PURE__*/ React.createElement(
-    'div',
-    {
-      style: {
-        position: 'fixed',
-        inset: 0,
-        zIndex: 100000000,
-        pointerEvents: 'none',
-        fontFamily: 'inherit',
-        padding: '1rem',
-      },
-    },
-    toasts.map((t) =>
-      /*#__PURE__*/ React.createElement(Toast, {
-        key: t.options.id,
-        toast: t,
-        setToasts: setToasts,
-        position: position,
-      })
-    )
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'fixed',
+      inset: 0,
+      zIndex: 100000000,
+      pointerEvents: 'none',
+      fontFamily: 'inherit',
+      padding: '1rem'
+    }
+  }, toasts.map(t => /*#__PURE__*/React.createElement(Toast, {
+    key: t.options.id,
+    toast: t,
+    setToasts: setToasts,
+    position: position
+  })));
 }
 
 const toast = {
   success,
   error,
-  promise,
+  promise
 };
 
 export { ToastContainer, toast };

package/package.json

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