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

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

@@ -1,26 +1,172 @@
-const o = "_viewport_x4zrf_2", t = "_root_x4zrf_16", r = "_content_x4zrf_120", _ = "_title_x4zrf_133", c = "_description_x4zrf_158", n = "_action_x4zrf_166", e = "_close_x4zrf_194", s = "_closeIcon_x4zrf_225", i = {
-  viewport: o,
-  root: t,
-  "root--success": "_root--success_x4zrf_99",
-  "root--error": "_root--error_x4zrf_103",
-  "root--warning": "_root--warning_x4zrf_107",
-  "root--info": "_root--info_x4zrf_111",
-  "root--default": "_root--default_x4zrf_115",
-  content: r,
-  title: _,
-  description: c,
-  action: n,
-  close: e,
-  closeIcon: s
-};
+import * as t from "react";
+import { ownerDocument as v } from "./als-react-ts-ui352.js";
+import { visuallyHidden as A } from "./als-react-ts-ui359.js";
+import { FocusGuard as F } from "./als-react-ts-ui360.js";
+import { ToastViewportContext as J } from "./als-react-ts-ui428.js";
+import { useToastContext as Q } from "./als-react-ts-ui426.js";
+import { useRenderElement as U } from "./als-react-ts-ui226.js";
+import { ToastViewportCssVars as X } from "./als-react-ts-ui429.js";
+import { jsxs as y, jsx as d } from "react/jsx-runtime";
+import { getWindow as P } from "./als-react-ts-ui320.js";
+import { activeElement as S, getTarget as C, contains as L, matchesFocusVisible as G } from "./als-react-ts-ui312.js";
+const Y = /* @__PURE__ */ t.forwardRef(function(M, H) {
+  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)
+      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);
+    };
+  }, [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))
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (Y.displayName = "ToastViewport");
 export {
-  n as action,
-  e as close,
-  s as closeIcon,
-  r as content,
-  i as default,
-  c as description,
-  t as root,
-  _ as title,
-  o as viewport
+  Y as ToastViewport
 };

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

@@ -1,25 +1,305 @@
-import i from "./als-react-ts-ui197.js";
-import * as n from "react";
-import { ToastContext as m } from "./als-react-ts-ui322.js";
-function p() {
-  const o = n.useContext(m);
-  if (!o)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: useToastManager must be used within <Toast.Provider>." : i(73));
-  const {
-    toasts: t,
-    add: e,
-    close: r,
-    update: s,
-    promise: a
-  } = o;
-  return n.useMemo(() => ({
-    toasts: t,
-    add: e,
-    close: r,
-    update: s,
-    promise: a
-  }), [t, e, r, s, a]);
+import * as r from "react";
+import { ownerDocument as Ce } from "./als-react-ts-ui352.js";
+import { inertValue as Oe } from "./als-react-ts-ui239.js";
+import { useIsoLayoutEffect as He } from "./als-react-ts-ui267.js";
+import { useStableCallback as ke } from "./als-react-ts-ui266.js";
+import { ToastRootContext as Ye } from "./als-react-ts-ui430.js";
+import { transitionStatusMapping as _e } from "./als-react-ts-ui228.js";
+import { useToastContext as Ae } from "./als-react-ts-ui426.js";
+import { useRenderElement as Le } from "./als-react-ts-ui226.js";
+import { useOpenChangeComplete as Ne } from "./als-react-ts-ui236.js";
+import { ToastRootCssVars as S } from "./als-react-ts-ui431.js";
+import { jsx as Xe } from "react/jsx-runtime";
+import { contains as te, activeElement as $e, getTarget as Ve } from "./als-react-ts-ui312.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 {
-  p as useToastManager
+  Ke as ToastRoot
 };