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

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

@@ -0,0 +1,305 @@
+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) {
+  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"
+      };
+    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
+    }
+  }, 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
+  });
+});
+process.env.NODE_ENV !== "production" && (Ke.displayName = "ToastRoot");
+export {
+  Ke as ToastRoot
+};

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

@@ -0,0 +1,37 @@
+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) {
+  const {
+    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;
+    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
+  });
+});
+process.env.NODE_ENV !== "production" && (R.displayName = "ToastContent");
+export {
+  R as ToastContent
+};

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

@@ -0,0 +1,40 @@
+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) {
+  const {
+    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);
+      };
+  }, [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
+    }
+  });
+  return t ? m : null;
+});
+process.env.NODE_ENV !== "production" && (y.displayName = "ToastTitle");
+export {
+  y as ToastTitle
+};

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

@@ -0,0 +1,40 @@
+import * as i from "react";
+import { useId as l } from "./als-react-ts-ui216.js";
+import { useIsoLayoutEffect as y } from "./als-react-ts-ui161.js";
+import { useToastRootContext as c } from "./als-react-ts-ui326.js";
+import { useRenderElement as D } from "./als-react-ts-ui166.js";
+const R = /* @__PURE__ */ i.forwardRef(function(n, p) {
+  const {
+    render: E,
+    className: N,
+    id: d,
+    children: f,
+    ...u
+  } = n, {
+    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 = "ToastDescription");
+export {
+  R as ToastDescription
+};

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

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import t from "./als-react-ts-ui66.js";
+function m(r) {
+  return /* @__PURE__ */ o("div", { className: t.root });
+}
+export {
+  m as ALSContextMenu,
+  m as default
+};

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

@@ -0,0 +1,34 @@
+import * as r from "react";
+import { useToastRootContext as m } from "./als-react-ts-ui326.js";
+import { useButton as f } from "./als-react-ts-ui179.js";
+import { useRenderElement as R } from "./als-react-ts-ui166.js";
+const h = /* @__PURE__ */ r.forwardRef(function(o, s) {
+  const {
+    render: B,
+    className: N,
+    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 a ? l : null;
+});
+process.env.NODE_ENV !== "production" && (h.displayName = "ToastAction");
+export {
+  h as ToastAction
+};

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

@@ -0,0 +1,41 @@
+import * as o from "react";
+import { useToastRootContext as d } from "./als-react-ts-ui326.js";
+import { useToastContext as l } from "./als-react-ts-ui322.js";
+import { useButton as f } from "./als-react-ts-ui179.js";
+import { useRenderElement as C } from "./als-react-ts-ui166.js";
+const R = /* @__PURE__ */ o.forwardRef(function(e, s) {
+  const {
+    render: x,
+    className: y,
+    disabled: n,
+    nativeButton: r = !0,
+    ...a
+  } = e, {
+    close: i,
+    expanded: m
+  } = l(), {
+    toast: t
+  } = d(), {
+    getButtonProps: p,
+    buttonRef: u
+  } = f({
+    disabled: n,
+    native: r
+  }), c = o.useMemo(() => ({
+    type: t.type
+  }), [t.type]);
+  return C("button", e, {
+    ref: [s, u],
+    state: c,
+    props: [{
+      "aria-hidden": !m,
+      onClick() {
+        i(t.id);
+      }
+    }, a, p]
+  });
+});
+process.env.NODE_ENV !== "production" && (R.displayName = "ToastClose");
+export {
+  R as ToastClose
+};

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

@@ -0,0 +1,61 @@
+import { generateId as r } from "./als-react-ts-ui321.js";
+function c() {
+  const e = [];
+  function i(t) {
+    e.forEach((o) => o(t));
+  }
+  return {
+    // This should be private aside from ToastProvider needing to access it.
+    // https://x.com/drosenwasser/status/1816947740032872664
+    " subscribe": function(o) {
+      return e.push(o), () => {
+        const n = e.indexOf(o);
+        n !== -1 && e.splice(n, 1);
+      };
+    },
+    add(t) {
+      const o = t.id || r("toast"), n = {
+        ...t,
+        id: o,
+        transitionStatus: "starting"
+      };
+      return i({
+        action: "add",
+        options: n
+      }), o;
+    },
+    close(t) {
+      i({
+        action: "close",
+        options: {
+          id: t
+        }
+      });
+    },
+    update(t, o) {
+      i({
+        action: "update",
+        options: {
+          ...o,
+          id: t
+        }
+      });
+    },
+    promise(t, o) {
+      let n = t;
+      return i({
+        action: "promise",
+        options: {
+          ...o,
+          promise: t,
+          setPromise(s) {
+            n = s;
+          }
+        }
+      }), n;
+    }
+  };
+}
+export {
+  c as createToastManager
+};

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

@@ -0,0 +1,5 @@
+import { FloatingPortalLite as o } from "./als-react-ts-ui328.js";
+const r = o;
+export {
+  r as ToastPortal
+};