@hiogawa/tiny-toast - npm Package Compare versions

Comparing version 0.0.1-pre.2 to 0.0.1-pre.3

./dist/index.js

@@ -8,2 +8,3 @@ // src/core.ts
   items = [];
+  paused = false;
   create(data) {
@@ -35,2 +36,6 @@ this.items = [...this.items];
   }
+  pause(paused) {
+    this.paused = paused;
+    this.notify();
+  }
   //
@@ -40,2 +45,3 @@ // api for React.useSyncExternalStore
   listeners = /* @__PURE__ */ new Set();
+  snapshot = {};
   subscribe = (listener) => {
@@ -47,4 +53,5 @@ this.listeners.add(listener);
   };
-  getSnapshot = () => this.items;
+  getSnapshot = () => this.snapshot;
   notify() {
+    this.snapshot = {};
     this.listeners.forEach((f) => f());
@@ -51,0 +58,0 @@ }

dist/index.d.ts

@@ -12,2 +12,3 @@ type ToastItem<T> = {
     items: ToastItem<T>[];
+    paused: boolean;
     create(data: T): void;
@@ -17,5 +18,7 @@ update(id: string, newItem: Partial<ToastItem<T>>): void;
     remove(id: string): void;
+    pause(paused: boolean): void;
     private listeners;
+    private snapshot;
     subscribe: (listener: () => void) => () => void;
-    getSnapshot: () => ToastItem<T>[];
+    getSnapshot: () => {};
     notify(): void;
@@ -22,0 +25,0 @@ }

dist/index.js

@@ -8,2 +8,3 @@ // src/core.ts
   items = [];
+  paused = false;
   create(data) {
@@ -35,2 +36,6 @@ this.items = [...this.items];
   }
+  pause(paused) {
+    this.paused = paused;
+    this.notify();
+  }
   //
@@ -40,2 +45,3 @@ // api for React.useSyncExternalStore
   listeners = /* @__PURE__ */ new Set();
+  snapshot = {};
   subscribe = (listener) => {
@@ -47,4 +53,5 @@ this.listeners.add(listener);
   };
-  getSnapshot = () => this.items;
+  getSnapshot = () => this.snapshot;
   notify() {
+    this.snapshot = {};
     this.listeners.forEach((f) => f());
@@ -51,0 +58,0 @@ }

dist/react.js

@@ -8,2 +8,3 @@ // src/core.ts
   items = [];
+  paused = false;
   create(data) {
@@ -35,2 +36,6 @@ this.items = [...this.items];
   }
+  pause(paused) {
+    this.paused = paused;
+    this.notify();
+  }
   //
@@ -40,2 +45,3 @@ // api for React.useSyncExternalStore
   listeners = /* @__PURE__ */ new Set();
+  snapshot = {};
   subscribe = (listener) => {
@@ -47,4 +53,5 @@ this.listeners.add(listener);
   };
-  getSnapshot = () => this.items;
+  getSnapshot = () => this.snapshot;
   notify() {
+    this.snapshot = {};
     this.listeners.forEach((f) => f());
@@ -340,19 +347,2 @@ }
 // ../../node_modules/.pnpm/@hiogawa+utils@1.6.1-pre.7/node_modules/@hiogawa/utils/dist/index.js
-function tinyassert(value, message) {
-  if (value) {
-    return;
-  }
-  if (message instanceof Error) {
-    throw message;
-  }
-  throw new TinyAssertionError(message, tinyassert);
-}
-var TinyAssertionError = class _TinyAssertionError extends Error {
-  constructor(message, stackStartFunction) {
-    super(message);
-    if ("captureStackTrace" in Error) {
-      Error.captureStackTrace(this, stackStartFunction ?? _TinyAssertionError);
-    }
-  }
-};
 function groupBy(ls, f) {
@@ -407,5 +397,11 @@ const result = /* @__PURE__ */ new Map();
   const renderItem = options?.renderItem ?? ((props) => /* @__PURE__ */ React9.createElement(ItemComponent, { ...props }));
+  const render = (item) => /* @__PURE__ */ React9.createElement(React9.Fragment, { key: item.id }, renderAnimation({
+    toast,
+    item,
+    children: renderItem({ toast, item })
+  }));
   return /* @__PURE__ */ React9.createElement(
     "div",
     {
+      style: options?.style,
       className: cls(
@@ -415,3 +411,4 @@ options?.className,
       ),
-      style: options?.style
+      onMouseEnter: () => toast.pause(true),
+      onMouseLeave: () => toast.pause(false)
     },
@@ -424,9 +421,10 @@ /* @__PURE__ */ React9.createElement(
 /* layer: shortcuts */
-.uno-tiny-toast-0zuqkl{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10zm-.997-6l7.07-7.071l-1.414-1.414l-5.656 5.657l-2.829-2.829l-1.414 1.414L11.003 16z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;width:1em;height:1em;font-size:1.5rem;line-height:2rem;--un-text-opacity:1;color:rgba(97,211,69,var(--un-text-opacity));}
+.uno-tiny-toast-9j9ihy{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10zm-.997-6l7.07-7.071l-1.414-1.414l-5.656 5.657l-2.829-2.829l-1.414 1.414L11.003 16z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;width:1em;height:1em;font-size:1.5rem;line-height:2rem;--un-text-opacity:1;color:rgba(74,222,128,var(--un-text-opacity));}
 .uno-tiny-toast-g9849q{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10zm0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;width:1em;height:1em;font-size:1.5rem;line-height:2rem;}
-.uno-tiny-toast-vjz1vy{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0zM11 16v2h2v-2h-2zm0-7v5h2V9h-2z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;width:1em;height:1em;font-size:1.5rem;line-height:2rem;--un-text-opacity:1;color:rgba(255,75,75,var(--un-text-opacity));}
-.uno-tiny-toast-hf0hq9{pointer-events:auto;z-index:9999;border-radius:0.25rem;--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity));--un-text-opacity:1;color:rgba(54,54,54,var(--un-text-opacity));--un-shadow:0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.uno-tiny-toast-r1pevc{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0zM11 16v2h2v-2h-2zm0-7v5h2V9h-2z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;width:1em;height:1em;font-size:1.5rem;line-height:2rem;--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
+.uno-tiny-toast-9zph0s *,
+.uno-tiny-toast-rjduac *{pointer-events:auto;}
 .uno-tiny-toast-mwbu9w{pointer-events:none;position:fixed;inset:0;z-index:9999;}
-.uno-tiny-toast-abs5ee{position:absolute;top:0.25rem;width:100%;display:flex;flex-direction:column-reverse;align-items:center;}
-.uno-tiny-toast-b95z9a{position:absolute;bottom:0.25rem;left:0.5rem;display:flex;flex-direction:column;}
+.uno-tiny-toast-9zph0s{position:absolute;bottom:0.25rem;left:0.5rem;display:flex;flex-direction:column;}
+.uno-tiny-toast-rjduac{position:absolute;top:0.25rem;width:100%;display:flex;flex-direction:column-reverse;align-items:center;}
 .uno-tiny-toast-7log6r{display:inline-block;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));padding-top:0.25rem;padding-bottom:0.25rem;transition-duration:300ms;}
@@ -439,2 +437,3 @@ .uno-tiny-toast-utfm2g{display:flex;align-items:center;gap:0.75rem;padding:0.75rem;}
 .uno-tiny-toast-ebcx1j{--un-scale-x:0;--un-scale-y:0;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));opacity:0.1;}
+.uno-tiny-toast-q7b5pp{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgba(0,0,0,0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgba(0,0,0,0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
 .uno-tiny-toast-jdvrox{transition-duration:300ms;}
@@ -447,12 +446,4 @@ /* layer: default */
     ),
-    /* @__PURE__ */ React9.createElement("div", { className: "uno-tiny-toast-b95z9a" }, itemsByPosition.get("bottom-left")?.reverse().map((item) => /* @__PURE__ */ React9.createElement(React9.Fragment, { key: item.id }, renderAnimation({
-      toast,
-      item,
-      children: renderItem({ toast, item })
-    })))),
-    /* @__PURE__ */ React9.createElement("div", { className: "uno-tiny-toast-abs5ee" }, itemsByPosition.get("top-center")?.reverse().map((item) => /* @__PURE__ */ React9.createElement(React9.Fragment, { key: item.id }, renderAnimation({
-      toast,
-      item,
-      children: renderItem({ toast, item })
-    }))))
+    /* @__PURE__ */ React9.createElement("div", { className: "uno-tiny-toast-9zph0s" }, itemsByPosition.get("bottom-left")?.map((item) => render(item))),
+    /* @__PURE__ */ React9.createElement("div", { className: "uno-tiny-toast-rjduac" }, itemsByPosition.get("top-center")?.map((item) => render(item)))
   );
@@ -468,12 +459,7 @@ }
     {
+      appear: true,
       show: item.step < TOAST_STEP.DISMISS,
       className: "uno-tiny-toast-jdvrox",
-      onLeaveFrom: (el) => {
-        tinyassert(el.firstElementChild);
-        el.style.height = el.firstElementChild.clientHeight + "px";
-      },
-      onLeaveTo: (el) => {
-        el.style.height = "0px";
-      },
-      onLeft: () => toast.remove(item.id)
+      onLeft: () => toast.remove(item.id),
+      ...getCollapseProps()
     },
@@ -503,2 +489,22 @@ /* @__PURE__ */ React9.createElement(
 }
+function getCollapseProps() {
+  function uncollapse(el) {
+    if (el.firstElementChild) {
+      el.style.height = el.firstElementChild.clientHeight + "px";
+    }
+  }
+  function collapse(el) {
+    el.style.height = "0px";
+  }
+  function reset(el) {
+    el.style.height = "";
+  }
+  return {
+    onEnterFrom: collapse,
+    onEnterTo: uncollapse,
+    onEntered: reset,
+    onLeaveFrom: uncollapse,
+    onLeaveTo: collapse
+  };
+}
 function ItemComponent({
@@ -508,6 +514,5 @@ item,
 }) {
-  const [pause, setPause] = React9.useState(false);
   useTimeout(
     () => toast.dismiss(item.id),
-    pause ? Infinity : item.data.duration
+    toast.paused ? Infinity : item.data.duration
   );
@@ -517,9 +522,4 @@ return /* @__PURE__ */ React9.createElement(
     {
-      className: cls(
-        item.data.className,
-        "uno-tiny-toast-hf0hq9"
-      ),
       style: item.data.style,
-      onMouseEnter: () => setPause(true),
-      onMouseLeave: () => setPause(false)
+      className: cls(item.data.className, "uno-tiny-toast-q7b5pp")
     },
@@ -530,4 +530,4 @@ /* @__PURE__ */ React9.createElement("div", { className: "uno-tiny-toast-utfm2g" }, item.data.type && /* @__PURE__ */ React9.createElement(
         className: cls(
-          item.data.type === "success" && "uno-tiny-toast-0zuqkl",
-          item.data.type === "error" && "uno-tiny-toast-vjz1vy",
+          item.data.type === "success" && "uno-tiny-toast-9j9ihy",
+          item.data.type === "error" && "uno-tiny-toast-r1pevc",
           item.data.type === "info" && "uno-tiny-toast-g9849q"
@@ -534,0 +534,0 @@ )

package.json

 {
   "name": "@hiogawa/tiny-toast",
-  "version": "0.0.1-pre.2",
+  "version": "0.0.1-pre.3",
   "type": "module",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

 # tiny-toast
 
-Simple toast UI
+Somewhat framework-agnostic simple toast UI system
 
@@ -5,0 +5,0 @@ ## example

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

1468

increased by1.66%

Worsened metrics

Total package byte prevSize

62908

decreased by-0.13%

No dependency changes