@uoguelph/react-components 1.10.0-rc.3 → 1.10.0-rc.5

package/dist/components/toaster/toaster-store.d.ts

@@ -0,0 +1,18 @@
+export type Toast = {
+    message: string;
+    type: 'error' | 'success' | 'info' | 'warning';
+    id: string;
+    timeout: number;
+};
+declare function removeToast(id: string): void;
+declare function addToast(message: Toast['message'], type?: Toast['type'], timeout?: Toast['timeout']): void;
+export declare function useToaster(): Toast[];
+export declare const toast: {
+    add: typeof addToast;
+    remove: typeof removeToast;
+    info: (message: Toast["message"], timeout?: Toast["timeout"]) => void;
+    success: (message: Toast["message"], timeout?: Toast["timeout"]) => void;
+    warning: (message: Toast["message"], timeout?: Toast["timeout"]) => void;
+    error: (message: Toast["message"], timeout?: Toast["timeout"]) => void;
+};
+export {};

package/dist/components/toaster/toaster.d.ts

@@ -1,19 +1,3 @@
-export type Toast = {
-    message: string;
-    type: 'error' | 'success' | 'info' | 'warning';
-    id: string;
-    timeout: number;
-};
-declare function removeToast(id: string): void;
-declare function addToast(message: Toast['message'], type?: Toast['type'], timeout?: Toast['timeout']): void;
-export declare function useToaster(): Toast[];
-export declare const toast: {
-    add: typeof addToast;
-    remove: typeof removeToast;
-    info: (message: Toast["message"], timeout?: Toast["timeout"]) => void;
-    success: (message: Toast["message"], timeout?: Toast["timeout"]) => void;
-    warning: (message: Toast["message"], timeout?: Toast["timeout"]) => void;
-    error: (message: Toast["message"], timeout?: Toast["timeout"]) => void;
-};
+import { toast } from './toaster-store';
 export declare function Toaster(): import("react/jsx-runtime").JSX.Element;
-export {};
+export { toast };

package/dist/toaster-store.d.ts

@@ -0,0 +1,2 @@
+export * from './components/toaster/toaster-store'
+export {}

package/dist/toaster-store.js

@@ -0,0 +1,47 @@
+import { n as f } from "./index.browser-E4KzWirf.js";
+import { useSyncExternalStore as d } from "react";
+let e = [];
+const r = /* @__PURE__ */ new Set();
+function c() {
+  r.forEach((n) => n());
+}
+function u(n) {
+  e = e.filter((o) => o.id !== n), c();
+}
+function t(n, o = "info", s = 3e3) {
+  const i = f();
+  e = [
+    ...e,
+    {
+      id: i,
+      message: n,
+      type: o,
+      timeout: s
+    }
+  ], c(), window.setTimeout(() => {
+    u(i);
+  }, s);
+}
+function m(n) {
+  return r.add(n), () => {
+    r.delete(n);
+  };
+}
+function a() {
+  return e;
+}
+function l() {
+  return d(m, a, a);
+}
+const p = {
+  add: t,
+  remove: u,
+  info: (n, o) => t(n, "info", o),
+  success: (n, o) => t(n, "success", o),
+  warning: (n, o) => t(n, "warning", o),
+  error: (n, o) => t(n, "error", o)
+};
+export {
+  p as toast,
+  l as useToaster
+};

package/dist/toaster.js

@@ -1,74 +1,34 @@
-import { jsx as o, jsxs as y } from "react/jsx-runtime";
-import { e as T, d as v, o as N, g as C } from "./solid-CpJcQLq3.js";
-import { FontAwesomeIcon as c } from "@fortawesome/react-fontawesome";
-import { n as S } from "./index.browser-E4KzWirf.js";
-import { useSyncExternalStore as A, useRef as F, useState as E, useEffect as k } from "react";
-import { TransitionGroup as P, CSSTransition as R } from "react-transition-group";
-import { twJoin as j } from "tailwind-merge";
-import { tv as q } from "tailwind-variants";
-let i = [];
-const f = /* @__PURE__ */ new Set();
-function d() {
-  f.forEach((t) => t());
+"use client";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { e as y, d as h, o as x, g as w } from "./solid-CpJcQLq3.js";
+import { FontAwesomeIcon as r } from "@fortawesome/react-fontawesome";
+import { useEffect as l, useRef as S, useState as b } from "react";
+import { TransitionGroup as C, CSSTransition as v } from "react-transition-group";
+import { twJoin as N } from "tailwind-merge";
+import { tv as T } from "tailwind-variants";
+import { useToaster as A, toast as F } from "./toaster-store.js";
+function X({ toast: t, onRemove: a, ...o }) {
+  const n = S(null);
+  return /* @__PURE__ */ e(v, { ...o, nodeRef: n, timeout: 300, classNames: "uofg-toast-transition", children: /* @__PURE__ */ e(k, { toast: t, onRemove: a, nodeRef: n }) });
 }
-function p(t) {
-  i = i.filter((e) => e.id !== t), d();
-}
-function a(t, e = "info", s = 3e3) {
-  const n = S();
-  i = [
-    ...i,
-    {
-      id: n,
-      message: t,
-      type: e,
-      timeout: s
-    }
-  ], d(), window.setTimeout(() => {
-    p(n);
-  }, s);
-}
-function I(t) {
-  return f.add(t), () => {
-    f.delete(t);
-  };
-}
-function g() {
-  return i;
-}
-function z() {
-  return A(I, g, g);
-}
-const G = {
-  add: a,
-  remove: p,
-  info: (t, e) => a(t, "info", e),
-  success: (t, e) => a(t, "success", e),
-  warning: (t, e) => a(t, "warning", e),
-  error: (t, e) => a(t, "error", e)
-};
-function J({ toast: t, onRemove: e, ...s }) {
-  const n = F(null);
-  return /* @__PURE__ */ o(R, { ...s, nodeRef: n, timeout: 300, classNames: "uofg-toast-transition", children: /* @__PURE__ */ o(M, { toast: t, onRemove: e, nodeRef: n }) });
-}
-function M({
+function k({
   toast: t,
-  onRemove: e,
-  nodeRef: s
+  onRemove: a,
+  nodeRef: o
 }) {
-  const [n, x] = E(100);
-  k(() => {
-    const h = performance.now();
-    let m;
-    const l = (w) => {
-      const b = w - h, u = Math.max(0, 100 - b / t.timeout * 100);
-      x(u), u > 0 && (m = requestAnimationFrame(l));
+  const [n, f] = b(100);
+  l(() => {
+    const p = performance.now();
+    let i;
+    const c = (u) => {
+      const g = u - p, m = Math.max(0, 100 - g / t.timeout * 100);
+      f(m), m > 0 && (i = requestAnimationFrame(c));
     };
-    return m = requestAnimationFrame(l), () => {
-      cancelAnimationFrame(m);
+    return i = requestAnimationFrame(c), () => {
+      cancelAnimationFrame(i);
     };
   }, [t.timeout]);
-  const r = q({
+  const s = T({
     slots: {
       toast: "uofg-toast relative flex max-w-[50ch] gap-2 overflow-hidden p-6 text-left text-lg",
       progress: "uofg-toast-progress absolute right-0 bottom-0 left-0 h-1 origin-left bg-current opacity-70",
@@ -92,17 +52,50 @@ function M({
       }
     }
   })({ type: t.type });
-  return /* @__PURE__ */ y("button", { onClick: () => e(t.id), ref: s, className: r.toast(), children: [
-    t.type === "info" && /* @__PURE__ */ o(c, { className: r.icon(), icon: T }),
-    t.type === "success" && /* @__PURE__ */ o(c, { className: r.icon(), icon: v }),
-    t.type === "warning" && /* @__PURE__ */ o(c, { className: r.icon(), icon: N }),
-    t.type === "error" && /* @__PURE__ */ o(c, { className: r.icon(), icon: C }),
-    /* @__PURE__ */ o("span", { className: r.message(), children: t.message }),
-    /* @__PURE__ */ o("span", { className: r.progress(), style: { width: `${n}%` }, "aria-hidden": "true" })
+  return /* @__PURE__ */ d("button", { onClick: () => a(t.id), ref: o, className: s.toast(), children: [
+    t.type === "info" && /* @__PURE__ */ e(r, { className: s.icon(), icon: y }),
+    t.type === "success" && /* @__PURE__ */ e(r, { className: s.icon(), icon: h }),
+    t.type === "warning" && /* @__PURE__ */ e(r, { className: s.icon(), icon: x }),
+    t.type === "error" && /* @__PURE__ */ e(r, { className: s.icon(), icon: w }),
+    /* @__PURE__ */ e("span", { className: s.message(), children: t.message }),
+    /* @__PURE__ */ e("span", { className: s.progress(), style: { width: `${n}%` }, "aria-hidden": "true" })
   ] });
 }
-function Q() {
-  const t = z(), e = j(
+const P = `
+  .uofg-toast-transition-enter {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  .uofg-toast-transition-enter-active {
+    opacity: 1;
+    transform: translateX(0);
+    transition: opacity 300ms ease,
+    transform 300ms ease;
+  }
+
+  .uofg-toast-transition-exit {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  .uofg-toast-transition-exit-active {
+    opacity: 0;
+    transform: translateX(100%);
+    transition: opacity 300ms ease,
+    transform 300ms ease;
+  }
+ `;
+function M() {
+  const t = A();
+  l(() => {
+    "CSSStyleSheet" in window || console.error(
+      "@uoguelph/react-components: Toaster animations will not work because Constructable Stylesheets is not supported in this browser"
+    );
+    const o = new CSSStyleSheet();
+    o.replaceSync(P), document.adoptedStyleSheets.push(o);
+  }, []);
+  const a = N(
     "uofg-toaster",
     "fixed",
     "right-4",
@@ -114,10 +107,9 @@ function Q() {
     "items-end",
     "gap-3"
   );
-  return /* @__PURE__ */ o(P, { component: "div", className: e, children: t.map((s) => /* @__PURE__ */ o(J, { toast: s, onRemove: G.remove }, s.id)) });
+  return /* @__PURE__ */ e(C, { component: "div", className: a, children: t.map((o) => /* @__PURE__ */ e(X, { toast: o, onRemove: F.remove }, o.id)) });
 }
 export {
-  Q as Toaster,
-  G as toast,
-  z as useToaster
+  M as Toaster,
+  F as toast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uoguelph/react-components",
-  "version": "1.10.0-rc.3",
+  "version": "1.10.0-rc.5",
   "description": "University of Guelph React Components Library",
   "type": "module",
   "scripts": {

package/dist/components/toaster/toaster-context.d.ts

@@ -1,10 +0,0 @@
-export type Toast = {
-    message: string;
-    type: 'error' | 'success' | 'info' | 'warning';
-    id: string;
-    timeout: number;
-};
-export type ToastContextValue = {
-    addToast: (message: Toast['message'], type?: Toast['type'], timeout?: number) => void;
-};
-export declare const ToastContext: import('react').Context<ToastContextValue | null>;

package/dist/toaster-context.d.ts

@@ -1,2 +0,0 @@
-export * from './components/toaster/toaster-context'
-export {}

package/dist/toaster-context.js

@@ -1,5 +0,0 @@
-import { createContext as t } from "react";
-const e = t(null);
-export {
-  e as ToastContext
-};