@als-tp/als-react-ts-ui 0.4.0 → 0.5.0

package/dist/als-react-ts-ui115.js

@@ -1,172 +1,37 @@
 import * as t from "react";
-import { ownerDocument as v } from "./als-react-ts-ui268.js";
-import { visuallyHidden as A } from "./als-react-ts-ui251.js";
-import { FocusGuard as F } from "./als-react-ts-ui288.js";
-import { ToastViewportContext as J } from "./als-react-ts-ui324.js";
-import { useToastContext as Q } from "./als-react-ts-ui322.js";
-import { useRenderElement as U } from "./als-react-ts-ui166.js";
-import { ToastViewportCssVars as X } from "./als-react-ts-ui325.js";
-import { jsxs as y, jsx as d } from "react/jsx-runtime";
-import { getWindow as P } from "./als-react-ts-ui221.js";
-import { activeElement as S, getTarget as C, contains as L, matchesFocusVisible as G } from "./als-react-ts-ui241.js";
-const Y = /* @__PURE__ */ t.forwardRef(function(M, H) {
+import { useIsoLayoutEffect as m } from "./als-react-ts-ui193.js";
+import { useToastRootContext as l } from "./als-react-ts-ui433.js";
+import { useRenderElement as p } from "./als-react-ts-ui189.js";
+const R = /* @__PURE__ */ t.forwardRef(function(n, f) {
   const {
-    render: ee,
-    className: re,
-    children: K,
-    ...B
-  } = M, {
-    toasts: s,
-    pauseTimers: f,
-    resumeTimers: n,
-    setHovering: l,
-    setFocused: a,
-    viewportRef: r,
-    windowFocusedRef: m,
-    prevFocusElement: p,
-    setPrevFocusElement: x,
-    expanded: R,
-    focused: g
-  } = Q(), w = t.useRef(!1), h = t.useRef(!1), o = s.length, V = s[0]?.height ?? 0, D = t.useMemo(() => s.some((e) => e.transitionStatus === "ending"), [s]);
-  t.useEffect(() => {
-    if (!r.current)
+    render: b,
+    className: x,
+    ...u
+  } = n, {
+    visibleIndex: a,
+    expanded: o,
+    recalculateHeight: e
+  } = l(), r = t.useRef(null);
+  m(() => {
+    const i = r.current;
+    if (!i || (e(), typeof ResizeObserver != "function"))
       return;
-    function e(i) {
-      o !== 0 && i.key === "F6" && i.target !== r.current && (i.preventDefault(), x(S(v(r.current))), r.current?.focus({
-        preventScroll: !0
-      }), f(), a(!0));
-    }
-    const u = P(r.current);
-    return u.addEventListener("keydown", e), () => {
-      u.removeEventListener("keydown", e);
+    const c = new ResizeObserver(e);
+    return c.observe(i), () => {
+      c.disconnect();
     };
-  }, [f, a, x, o, r]), t.useEffect(() => {
-    if (!r.current || !o)
-      return;
-    const e = P(r.current);
-    function u(c) {
-      c.target === e && (m.current = !1, f());
-    }
-    function i(c) {
-      if (c.relatedTarget || c.target === e)
-        return;
-      const T = C(c), z = S(v(r.current));
-      (!L(r.current, T) || !G(z)) && n(), setTimeout(() => {
-        m.current = !0;
-      });
-    }
-    return e.addEventListener("blur", u, !0), e.addEventListener("focus", i, !0), () => {
-      e.removeEventListener("blur", u, !0), e.removeEventListener("focus", i, !0);
-    };
-  }, [
-    f,
-    n,
-    r,
-    m,
-    a,
-    // `viewportRef.current` isn't available on the first render,
-    // since the portal node hasn't yet been created.
-    // By adding this dependency, we ensure the window listeners
-    // are added when toasts have been created, once the ref is available.
-    o
-  ]), t.useEffect(() => {
-    const e = r.current;
-    if (!e || o === 0)
-      return;
-    const u = v(e);
-    function i(c) {
-      if (c.pointerType !== "touch")
-        return;
-      const T = C(c);
-      L(e, T) || (n(), l(!1), a(!1));
-    }
-    return u.addEventListener("pointerdown", i, !0), () => {
-      u.removeEventListener("pointerdown", i, !0);
-    };
-  }, [o, n, a, l, r]);
-  function E(e) {
-    r.current && (w.current = !0, e.relatedTarget === r.current ? s[0]?.ref?.current?.focus() : p?.focus({
-      preventScroll: !0
-    }));
-  }
-  function W(e) {
-    e.key === "Tab" && e.shiftKey && e.target === r.current && (e.preventDefault(), p?.focus({
-      preventScroll: !0
-    }), n());
-  }
-  t.useEffect(() => {
-    !m.current || D || !h.current || (n(), l(!1), h.current = !1);
-  }, [D, n, l, m]);
-  function b() {
-    f(), l(!0), h.current = !1;
-  }
-  function j() {
-    s.some((e) => e.transitionStatus === "ending") ? h.current = !0 : (n(), l(!1));
-  }
-  function k() {
-    if (w.current) {
-      w.current = !1;
-      return;
-    }
-    g || G(v(r.current).activeElement) && (a(!0), f());
-  }
-  function I(e) {
-    !g || L(r.current, e.relatedTarget) || (a(!1), n());
-  }
-  const O = {
-    tabIndex: -1,
-    role: "region",
-    "aria-live": "polite",
-    "aria-atomic": !1,
-    "aria-relevant": "additions text",
-    "aria-label": "Notifications",
-    onMouseEnter: b,
-    onMouseMove: b,
-    onMouseLeave: j,
-    onFocus: k,
-    onBlur: I,
-    onKeyDown: W,
-    onClick: k
-  }, _ = t.useMemo(() => ({
-    expanded: R
-  }), [R]), $ = U("div", M, {
-    ref: [H, r],
-    state: _,
-    props: [O, {
-      style: {
-        [X.frontmostHeight]: V ? `${V}px` : void 0
-      }
-    }, B, {
-      children: /* @__PURE__ */ y(t.Fragment, {
-        children: [o > 0 && p && /* @__PURE__ */ d(F, {
-          onFocus: E
-        }), K, o > 0 && p && /* @__PURE__ */ d(F, {
-          onFocus: E
-        })]
-      })
-    }]
-  }), q = t.useMemo(() => ({
-    viewportRef: r
-  }), [r]), N = t.useMemo(() => s.filter((e) => e.priority === "high"), [s]);
-  return /* @__PURE__ */ y(J.Provider, {
-    value: q,
-    children: [o > 0 && p && /* @__PURE__ */ d(F, {
-      onFocus: E
-    }), $, !g && N.length > 0 && /* @__PURE__ */ d("div", {
-      style: A,
-      children: N.map((e) => /* @__PURE__ */ y("div", {
-        role: "alert",
-        "aria-atomic": !0,
-        children: [/* @__PURE__ */ d("div", {
-          children: e.title
-        }), /* @__PURE__ */ d("div", {
-          children: e.description
-        })]
-      }, e.id))
-    })]
+  }, [e]);
+  const s = a > 0, d = t.useMemo(() => ({
+    expanded: o,
+    behind: s
+  }), [o, s]);
+  return p("div", n, {
+    ref: [f, r],
+    state: d,
+    props: u
   });
 });
-process.env.NODE_ENV !== "production" && (Y.displayName = "ToastViewport");
+process.env.NODE_ENV !== "production" && (R.displayName = "ToastContent");
 export {
-  Y as ToastViewport
+  R as ToastContent
 };

package/dist/als-react-ts-ui116.js

@@ -1,305 +1,40 @@
-import * as r from "react";
-import { ownerDocument as Ce } from "./als-react-ts-ui268.js";
-import { inertValue as Oe } from "./als-react-ts-ui194.js";
-import { useIsoLayoutEffect as He } from "./als-react-ts-ui161.js";
-import { useStableCallback as ke } from "./als-react-ts-ui160.js";
-import { ToastRootContext as Ye } from "./als-react-ts-ui326.js";
-import { transitionStatusMapping as _e } from "./als-react-ts-ui189.js";
-import { useToastContext as Ae } from "./als-react-ts-ui322.js";
-import { useRenderElement as Le } from "./als-react-ts-ui166.js";
-import { useOpenChangeComplete as Ne } from "./als-react-ts-ui183.js";
-import { ToastRootCssVars as S } from "./als-react-ts-ui327.js";
-import { jsx as Xe } from "react/jsx-runtime";
-import { contains as te, activeElement as $e, getTarget as Ve } from "./als-react-ts-ui241.js";
-const ze = {
-  ..._e,
-  swipeDirection(y) {
-    return y ? {
-      "data-swipe-direction": y
-    } : null;
-  }
-}, P = 40, Fe = 10, x = 0.5, qe = 1;
-function ne(y, R, h) {
-  switch (y) {
-    case "up":
-      return -h;
-    case "down":
-      return h;
-    case "left":
-      return -R;
-    case "right":
-      return R;
-    default:
-      return 0;
-  }
-}
-function Ge(y) {
-  const h = window.getComputedStyle(y).transform;
-  let n = 0, C = 0, O = 1;
-  if (h && h !== "none") {
-    const b = h.match(/matrix(?:3d)?\(([^)]+)\)/);
-    if (b) {
-      const c = b[1].split(", ").map(parseFloat);
-      c.length === 6 ? (n = c[4], C = c[5], O = Math.sqrt(c[0] * c[0] + c[1] * c[1])) : c.length === 16 && (n = c[12], C = c[13], O = c[0]);
-    }
-  }
-  return {
-    x: n,
-    y: C,
-    scale: O
-  };
-}
-const Ke = /* @__PURE__ */ r.forwardRef(function(R, h) {
+import * as i from "react";
+import { useIsoLayoutEffect as p } from "./als-react-ts-ui193.js";
+import { useId as T } from "./als-react-ts-ui325.js";
+import { useToastRootContext as d } from "./als-react-ts-ui433.js";
+import { useRenderElement as h } from "./als-react-ts-ui189.js";
+const y = /* @__PURE__ */ i.forwardRef(function(n, c) {
   const {
-    toast: n,
-    render: C,
-    className: O,
-    swipeDirection: b = ["down", "right"],
-    ...c
-  } = R, ie = n.positionerProps?.anchor !== void 0;
-  let i = [];
-  ie || (i = Array.isArray(b) ? b : [b]);
-  const M = i.length > 0, {
-    toasts: w,
-    focused: re,
-    close: J,
-    remove: se,
-    setToasts: oe,
-    pauseTimers: ce,
-    expanded: H,
-    setHovering: ae
-  } = Ae(), [Q, E] = r.useState(void 0), [D, Z] = r.useState(!1), [ue, X] = r.useState(!1), [le, fe] = r.useState(!1), [g, k] = r.useState({
-    x: 0,
-    y: 0
-  }), [l, de] = r.useState({
-    x: 0,
-    y: 0,
-    scale: 1
-  }), [$, pe] = r.useState(), [V, me] = r.useState(), [T, z] = r.useState(null), a = r.useRef(null), I = r.useRef({
-    x: 0,
-    y: 0
-  }), F = r.useRef({
-    x: 0,
-    y: 0,
-    scale: 1
-  }), Y = r.useRef(void 0), q = r.useRef(0), _ = r.useRef(!1), f = r.useRef({
-    x: 0,
-    y: 0
-  }), G = r.useRef(!1), K = r.useMemo(() => w.indexOf(n), [n, w]), U = r.useMemo(() => w.filter((e) => e.transitionStatus !== "ending").indexOf(n), [n, w]), he = r.useMemo(() => w.slice(0, w.indexOf(n)).reduce((e, t) => e + (t.height || 0), 0), [w, n]);
-  Ne({
-    open: n.transitionStatus !== "ending",
-    ref: a,
-    onComplete() {
-      n.transitionStatus === "ending" && se(n.id);
-    }
-  });
-  const A = ke(() => {
-    const e = a.current;
-    if (!e)
-      return;
-    const t = e.style.height;
-    e.style.height = "auto";
-    const s = e.offsetHeight;
-    e.style.height = t, oe((o) => o.map((u) => u.id === n.id ? {
-      ...u,
-      ref: a,
-      height: s,
-      transitionStatus: void 0
-    } : u));
-  });
-  He(A, [A]);
-  function ge(e, t) {
-    let s = e, o = t;
-    return !i.includes("left") && !i.includes("right") ? s = e > 0 ? e ** x : -(Math.abs(e) ** x) : (!i.includes("right") && e > 0 && (s = e ** x), !i.includes("left") && e < 0 && (s = -(Math.abs(e) ** x))), !i.includes("up") && !i.includes("down") ? o = t > 0 ? t ** x : -(Math.abs(t) ** x) : (!i.includes("down") && t > 0 && (o = t ** x), !i.includes("up") && t < 0 && (o = -(Math.abs(t) ** x))), {
-      x: s,
-      y: o
-    };
-  }
-  function xe(e) {
-    if (e.button !== 0)
-      return;
-    e.pointerType === "touch" && ce();
-    const t = Ve(e.nativeEvent);
-    if (!(t && t.closest('button,a,input,textarea,[role="button"],[data-swipe-ignore]'))) {
-      if (_.current = !1, Y.current = void 0, q.current = 0, I.current = {
-        x: e.clientX,
-        y: e.clientY
-      }, f.current = I.current, a.current) {
-        const o = Ge(a.current);
-        F.current = o, de(o), k({
-          x: o.x,
-          y: o.y
-        });
-      }
-      ae(!0), Z(!0), X(!1), z(null), G.current = !0, a.current?.setPointerCapture(e.pointerId);
-    }
-  }
-  function ye(e) {
-    if (!D)
-      return;
-    e.preventDefault(), G.current && (I.current = {
-      x: e.clientX,
-      y: e.clientY
-    }, G.current = !1);
-    const {
-      clientY: t,
-      clientX: s,
-      movementX: o,
-      movementY: u
-    } = e;
-    (u < 0 && t > f.current.y || u > 0 && t < f.current.y) && (f.current = {
-      x: f.current.x,
-      y: t
-    }), (o < 0 && s > f.current.x || o > 0 && s < f.current.x) && (f.current = {
-      x: s,
-      y: f.current.y
-    });
-    const d = s - I.current.x, m = t - I.current.y, Me = t - f.current.y, Ee = s - f.current.x;
-    if (!ue && Math.sqrt(d * d + m * m) >= qe && (X(!0), T === null)) {
-      const N = i.includes("left") || i.includes("right"), Te = i.includes("up") || i.includes("down");
-      if (N && Te) {
-        const Ie = Math.abs(d), Pe = Math.abs(m);
-        z(Ie > Pe ? "horizontal" : "vertical");
-      }
-    }
-    let p;
-    if (!Y.current)
-      T === "vertical" ? m > 0 ? p = "down" : m < 0 && (p = "up") : T === "horizontal" ? d > 0 ? p = "right" : d < 0 && (p = "left") : Math.abs(d) >= Math.abs(m) ? p = d > 0 ? "right" : "left" : p = m > 0 ? "down" : "up", p && i.includes(p) && (Y.current = p, q.current = ne(p, d, m), E(p));
-    else {
-      const W = Y.current, N = ne(W, Ee, Me);
-      N > P ? (_.current = !1, E(W)) : q.current - N >= Fe && (_.current = !0);
-    }
-    const L = ge(d, m);
-    let j = F.current.x, B = F.current.y;
-    T === "horizontal" ? (i.includes("left") || i.includes("right")) && (j += L.x) : (T === "vertical" || (i.includes("left") || i.includes("right")) && (j += L.x), (i.includes("up") || i.includes("down")) && (B += L.y)), k({
-      x: j,
-      y: B
-    });
-  }
-  function we(e) {
-    if (!D)
-      return;
-    if (Z(!1), X(!1), z(null), a.current?.releasePointerCapture(e.pointerId), _.current) {
-      k({
-        x: l.x,
-        y: l.y
-      }), E(void 0);
-      return;
-    }
-    let t = !1;
-    const s = g.x - l.x, o = g.y - l.y;
-    let u;
-    for (const d of i) {
-      switch (d) {
-        case "right":
-          s > P && (t = !0, u = "right");
-          break;
-        case "left":
-          s < -P && (t = !0, u = "left");
-          break;
-        case "down":
-          o > P && (t = !0, u = "down");
-          break;
-        case "up":
-          o < -P && (t = !0, u = "up");
-          break;
-      }
-      if (t)
-        break;
-    }
-    t ? (E(u), fe(!0), J(n.id)) : (k({
-      x: l.x,
-      y: l.y
-    }), E(void 0));
-  }
-  function De(e) {
-    if (e.key === "Escape") {
-      if (!a.current || !te(a.current, $e(Ce(a.current))))
-        return;
-      J(n.id);
-    }
-  }
-  r.useEffect(() => {
-    if (!M)
-      return;
-    const e = a.current;
-    if (!e)
-      return;
-    function t(s) {
-      te(e, s.target) && s.preventDefault();
-    }
-    return e.addEventListener("touchmove", t, {
-      passive: !1
-    }), () => {
-      e.removeEventListener("touchmove", t);
-    };
-  }, [M]);
-  function Se() {
-    if (!D && g.x === l.x && g.y === l.y && !le)
-      return {
-        [S.swipeMovementX]: "0px",
-        [S.swipeMovementY]: "0px"
+    render: E,
+    className: N,
+    id: l,
+    children: f,
+    ...u
+  } = n, {
+    toast: e
+  } = d(), s = f ?? e.title, t = !!s, o = T(l), {
+    setTitleId: r
+  } = d();
+  p(() => {
+    if (t)
+      return r(o), () => {
+        r(void 0);
       };
-    const e = g.x - l.x, t = g.y - l.y;
-    return {
-      transition: D ? "none" : void 0,
-      // While swiping, freeze the element at its current visual transform so it doesn't snap to the
-      // end position.
-      transform: D ? `translateX(${g.x}px) translateY(${g.y}px) scale(${l.scale})` : void 0,
-      [S.swipeMovementX]: `${e}px`,
-      [S.swipeMovementY]: `${t}px`
-    };
-  }
-  const ee = n.priority === "high", Re = {
-    role: ee ? "alertdialog" : "dialog",
-    tabIndex: 0,
-    "aria-modal": !1,
-    "aria-labelledby": $,
-    "aria-describedby": V,
-    "aria-hidden": ee && !re ? !0 : void 0,
-    onPointerDown: M ? xe : void 0,
-    onPointerMove: M ? ye : void 0,
-    onPointerUp: M ? we : void 0,
-    onKeyDown: De,
-    inert: Oe(n.limited),
-    style: {
-      ...Se(),
-      [S.index]: n.transitionStatus === "ending" ? K : U,
-      [S.offsetY]: `${he}px`,
-      [S.height]: n.height ? `${n.height}px` : void 0
+  }, [t, o, r]);
+  const a = i.useMemo(() => ({
+    type: e.type
+  }), [e.type]), m = h("h2", n, {
+    ref: c,
+    state: a,
+    props: {
+      ...u,
+      id: o,
+      children: s
     }
-  }, v = r.useMemo(() => ({
-    rootRef: a,
-    toast: n,
-    titleId: $,
-    setTitleId: pe,
-    descriptionId: V,
-    setDescriptionId: me,
-    swiping: D,
-    swipeDirection: Q,
-    recalculateHeight: A,
-    index: K,
-    visibleIndex: U,
-    expanded: H
-  }), [n, $, V, D, Q, A, K, U, H]), be = r.useMemo(() => ({
-    transitionStatus: n.transitionStatus,
-    expanded: H,
-    limited: n.limited || !1,
-    type: n.type,
-    swiping: v.swiping,
-    swipeDirection: v.swipeDirection
-  }), [H, n.transitionStatus, n.limited, n.type, v.swiping, v.swipeDirection]), ve = Le("div", R, {
-    ref: [h, v.rootRef],
-    state: be,
-    stateAttributesMapping: ze,
-    props: [Re, c]
-  });
-  return /* @__PURE__ */ Xe(Ye.Provider, {
-    value: v,
-    children: ve
   });
+  return t ? m : null;
 });
-process.env.NODE_ENV !== "production" && (Ke.displayName = "ToastRoot");
+process.env.NODE_ENV !== "production" && (y.displayName = "ToastTitle");
 export {
-  Ke as ToastRoot
+  y as ToastTitle
 };

package/dist/als-react-ts-ui117.js

@@ -1,37 +1,40 @@
-import * as t from "react";
-import { useIsoLayoutEffect as m } from "./als-react-ts-ui161.js";
-import { useToastRootContext as l } from "./als-react-ts-ui326.js";
-import { useRenderElement as p } from "./als-react-ts-ui166.js";
-const R = /* @__PURE__ */ t.forwardRef(function(n, f) {
+import * as i from "react";
+import { useId as l } from "./als-react-ts-ui325.js";
+import { useIsoLayoutEffect as y } from "./als-react-ts-ui193.js";
+import { useToastRootContext as c } from "./als-react-ts-ui433.js";
+import { useRenderElement as D } from "./als-react-ts-ui189.js";
+const R = /* @__PURE__ */ i.forwardRef(function(n, p) {
   const {
-    render: b,
-    className: x,
+    render: E,
+    className: N,
+    id: d,
+    children: f,
     ...u
   } = n, {
-    visibleIndex: a,
-    expanded: o,
-    recalculateHeight: e
-  } = l(), r = t.useRef(null);
-  m(() => {
-    const i = r.current;
-    if (!i || (e(), typeof ResizeObserver != "function"))
-      return;
-    const c = new ResizeObserver(e);
-    return c.observe(i), () => {
-      c.disconnect();
-    };
-  }, [e]);
-  const s = a > 0, d = t.useMemo(() => ({
-    expanded: o,
-    behind: s
-  }), [o, s]);
-  return p("div", n, {
-    ref: [f, r],
-    state: d,
-    props: u
+    toast: e
+  } = c(), s = f ?? e.description, t = !!s, o = l(d), {
+    setDescriptionId: r
+  } = c();
+  y(() => {
+    if (t)
+      return r(o), () => {
+        r(void 0);
+      };
+  }, [t, o, r]);
+  const a = i.useMemo(() => ({
+    type: e.type
+  }), [e.type]), m = D("p", n, {
+    ref: p,
+    state: a,
+    props: {
+      ...u,
+      id: o,
+      children: s
+    }
   });
+  return t ? m : null;
 });
-process.env.NODE_ENV !== "production" && (R.displayName = "ToastContent");
+process.env.NODE_ENV !== "production" && (R.displayName = "ToastDescription");
 export {
-  R as ToastContent
+  R as ToastDescription
 };

package/dist/als-react-ts-ui118.js

@@ -1,40 +1,34 @@
-import * as i from "react";
-import { useIsoLayoutEffect as p } from "./als-react-ts-ui161.js";
-import { useId as T } from "./als-react-ts-ui216.js";
-import { useToastRootContext as d } from "./als-react-ts-ui326.js";
-import { useRenderElement as h } from "./als-react-ts-ui166.js";
-const y = /* @__PURE__ */ i.forwardRef(function(n, c) {
+import * as r from "react";
+import { useToastRootContext as m } from "./als-react-ts-ui433.js";
+import { useButton as f } from "./als-react-ts-ui247.js";
+import { useRenderElement as R } from "./als-react-ts-ui189.js";
+const h = /* @__PURE__ */ r.forwardRef(function(o, s) {
   const {
-    render: E,
+    render: B,
     className: N,
-    id: l,
-    children: f,
-    ...u
-  } = n, {
-    toast: e
-  } = d(), s = f ?? e.title, t = !!s, o = T(l), {
-    setTitleId: r
-  } = d();
-  p(() => {
-    if (t)
-      return r(o), () => {
-        r(void 0);
-      };
-  }, [t, o, r]);
-  const a = i.useMemo(() => ({
-    type: e.type
-  }), [e.type]), m = h("h2", n, {
-    ref: c,
-    state: a,
-    props: {
-      ...u,
-      id: o,
-      children: s
-    }
+    disabled: c,
+    nativeButton: i = !0,
+    ...e
+  } = o, {
+    toast: t
+  } = m(), n = t.actionProps?.children ?? e.children, a = !!n, {
+    getButtonProps: u,
+    buttonRef: p
+  } = f({
+    disabled: c,
+    native: i
+  }), d = r.useMemo(() => ({
+    type: t.type
+  }), [t.type]), l = R("button", o, {
+    ref: [s, p],
+    state: d,
+    props: [e, t.actionProps, u, {
+      children: n
+    }]
   });
-  return t ? m : null;
+  return a ? l : null;
 });
-process.env.NODE_ENV !== "production" && (y.displayName = "ToastTitle");
+process.env.NODE_ENV !== "production" && (h.displayName = "ToastAction");
 export {
-  y as ToastTitle
+  h as ToastAction
 };