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

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

@@ -1,14 +1,14 @@
-import t from "./als-react-ts-ui197.js";
-import * as e from "react";
-const r = /* @__PURE__ */ e.createContext(void 0);
-process.env.NODE_ENV !== "production" && (r.displayName = "PopoverPortalContext");
-function s() {
-  const o = e.useContext(r);
-  if (o === void 0)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: <Popover.Portal> is missing." : t(45));
-  return o;
-}
+import { collapsibleOpenStateMapping as i } from "./als-react-ts-ui294.js";
+import { transitionStatusMapping as r } from "./als-react-ts-ui245.js";
+import { AccordionItemDataAttributes as n } from "./als-react-ts-ui343.js";
+const a = {
+  ...i,
+  index: (t) => Number.isInteger(t) ? {
+    [n.index]: String(t)
+  } : null,
+  ...r,
+  value: () => null
+};
 export {
-  r as PopoverPortalContext,
-  s as usePopoverPortalContext
+  a as accordionStateAttributesMapping
 };

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

@@ -1,14 +1,6 @@
-import r from "./als-react-ts-ui197.js";
-import * as e from "react";
-const t = /* @__PURE__ */ e.createContext(void 0);
-process.env.NODE_ENV !== "production" && (t.displayName = "PopoverPositionerContext");
-function i() {
-  const o = e.useContext(t);
-  if (!o)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: PopoverPositionerContext is missing. PopoverPositioner parts must be placed within <Popover.Positioner>." : r(46));
-  return o;
+function i(t) {
+  return t == null || t.hasAttribute("disabled") || t.getAttribute("aria-disabled") === "true";
 }
 export {
-  t as PopoverPositionerContext,
-  i as usePopoverPositionerContext
+  i as isElementDisabled
 };

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

@@ -1,63 +1,21 @@
-import { ownerDocument as D } from "./als-react-ts-ui268.js";
-import { getSide as v } from "./als-react-ts-ui317.js";
-import { getWindow as x } from "./als-react-ts-ui221.js";
-const d = {
-  sideX: "left",
-  sideY: "top"
-}, O = {
-  name: "adaptiveOrigin",
-  async fn(g) {
-    const {
-      x: o,
-      y: s,
-      rects: {
-        floating: f
-      },
-      elements: {
-        floating: i
-      },
-      platform: a,
-      strategy: w,
-      placement: p
-    } = g, t = x(i), l = t.getComputedStyle(i);
-    if (!(l.transitionDuration !== "0s" && l.transitionDuration !== ""))
-      return {
-        x: o,
-        y: s,
-        data: d
-      };
-    const r = await a.getOffsetParent?.(i);
-    let e = {
-      width: 0,
-      height: 0
-    };
-    if (w === "fixed" && t?.visualViewport)
-      e = {
-        width: t.visualViewport.width,
-        height: t.visualViewport.height
-      };
-    else if (r === t) {
-      const m = D(i);
-      e = {
-        width: m.documentElement.clientWidth,
-        height: m.documentElement.clientHeight
-      };
-    } else await a.isElement?.(r) && (e = await a.getDimensions(r));
-    const n = v(p);
-    let h = o, c = s;
-    n === "left" && (h = e.width - (o + f.width)), n === "top" && (c = e.height - (s + f.height));
-    const u = n === "left" ? "right" : d.sideX, y = n === "top" ? "bottom" : d.sideY;
-    return {
-      x: h,
-      y: c,
-      data: {
-        sideX: u,
-        sideY: y
-      }
-    };
+import { CollapsiblePanelDataAttributes as e } from "./als-react-ts-ui347.js";
+import { CollapsibleTriggerDataAttributes as n } from "./als-react-ts-ui349.js";
+const r = {
+  [e.open]: ""
+}, p = {
+  [e.closed]: ""
+}, a = {
+  open(t) {
+    return t ? {
+      [n.panelOpen]: ""
+    } : null;
+  }
+}, i = {
+  open(t) {
+    return t ? r : p;
   }
 };
 export {
-  d as DEFAULT_SIDES,
-  O as adaptiveOrigin
+  i as collapsibleOpenStateMapping,
+  a as triggerOpenStateMapping
 };

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

@@ -1,62 +1,25 @@
-import * as z from "react";
-import { useAnimationFrame as R } from "./als-react-ts-ui223.js";
-import { useIsoLayoutEffect as $ } from "./als-react-ts-ui161.js";
-import { useStableCallback as v } from "./als-react-ts-ui160.js";
-import { useAnimationsFinished as C } from "./als-react-ts-ui217.js";
-import { getCssDimensions as S } from "./als-react-ts-ui320.js";
-const E = typeof ResizeObserver < "u", B = () => !0;
-function T(r) {
-  const {
-    popupElement: e,
-    positionerElement: t,
-    content: u,
-    mounted: y,
-    enabled: m = B,
-    onMeasureLayout: M,
-    onMeasureLayoutComplete: A
-  } = r, a = z.useRef(!0), d = C(e, !0, !1), l = R(), o = z.useRef(null), P = v(M), c = v(A);
-  $(() => {
-    if (!y || !m() || !E) {
-      a.current = !0, o.current = null;
-      return;
-    }
-    if (!e || !t)
-      return;
-    const h = new ResizeObserver((n) => {
-      const i = n[0];
-      i && (o.current === null ? o.current = {
-        width: Math.ceil(i.borderBoxSize[0].inlineSize),
-        height: Math.ceil(i.borderBoxSize[0].blockSize)
-      } : (o.current.width = Math.ceil(i.borderBoxSize[0].inlineSize), o.current.height = Math.ceil(i.borderBoxSize[0].blockSize)));
-    });
-    h.observe(e), e.style.setProperty("--popup-width", "auto"), e.style.setProperty("--popup-height", "auto");
-    const f = p(e, "position", "static"), b = p(e, "transform", "none"), L = p(e, "scale", "1"), g = p(t, "--available-width", "max-content"), w = p(t, "--available-height", "max-content");
-    if (P?.(), a.current || o.current === null) {
-      t.style.setProperty("--positioner-width", "max-content"), t.style.setProperty("--positioner-height", "max-content");
-      const n = S(e);
-      return t.style.setProperty("--positioner-width", `${n.width}px`), t.style.setProperty("--positioner-height", `${n.height}px`), f(), b(), L(), g(), w(), c?.(null, n), a.current = !1, () => {
-        h.disconnect();
-      };
-    }
-    e.style.setProperty("--popup-width", "auto"), e.style.setProperty("--popup-height", "auto"), t.style.setProperty("--positioner-width", "max-content"), t.style.setProperty("--positioner-height", "max-content");
-    const s = S(e);
-    e.style.setProperty("--popup-width", `${o.current.width}px`), e.style.setProperty("--popup-height", `${o.current.height}px`), f(), b(), g(), w(), c?.(o.current, s), t.style.setProperty("--positioner-width", `${s.width}px`), t.style.setProperty("--positioner-height", `${s.height}px`);
-    const x = new AbortController();
-    return l.request(() => {
-      e.style.setProperty("--popup-width", `${s.width}px`), e.style.setProperty("--popup-height", `${s.height}px`), d(() => {
-        e.style.setProperty("--popup-width", "auto"), e.style.setProperty("--popup-height", "auto");
-      }, x.signal);
-    }), () => {
-      h.disconnect(), x.abort(), l.cancel();
-    };
-  }, [u, e, t, d, l, m, y, P, c]);
+import { isAndroid as r, isJSDOM as o } from "./als-react-ts-ui371.js";
+function n(i) {
+  i.preventDefault(), i.stopPropagation();
 }
-function p(r, e, t) {
-  const u = r.style.getPropertyValue(e);
-  return r.style.setProperty(e, t), () => {
-    r.style.setProperty(e, u);
-  };
+function p(i) {
+  return "nativeEvent" in i;
+}
+function e(i) {
+  return i.mozInputSource === 0 && i.isTrusted ? !0 : r && i.pointerType ? i.type === "click" && i.buttons === 1 : i.detail === 0 && !i.pointerType;
+}
+function c(i) {
+  return o ? !1 : !r && i.width === 0 && i.height === 0 || r && i.width === 1 && i.height === 1 && i.pressure === 0 && i.detail === 0 && i.pointerType === "mouse" || // iOS VoiceOver returns 0.333• for width/height.
+  i.width < 1 && i.height < 1 && i.pressure === 0 && i.detail === 0 && i.pointerType === "touch";
+}
+function f(i, u) {
+  const t = ["mouse", "pen"];
+  return u || t.push("", void 0), t.includes(i);
 }
 export {
-  T as usePopupAutoResize
+  f as isMouseLikePointerType,
+  p as isReactEvent,
+  e as isVirtualClick,
+  c as isVirtualPointerEvent,
+  n as stopEvent
 };

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

@@ -1,90 +1,167 @@
-import * as L from "react";
-import { isElement as j } from "./als-react-ts-ui221.js";
-import { useStableCallback as l } from "./als-react-ts-ui160.js";
-import { useIsoLayoutEffect as F } from "./als-react-ts-ui161.js";
-import { createChangeEventDetails as w } from "./als-react-ts-ui167.js";
-import { useFloatingTree as q, useFloatingParentNodeId as z } from "./als-react-ts-ui286.js";
-import { useHoverInteractionSharedState as B, safePolygonIdentifier as H, isInteractiveElement as G } from "./als-react-ts-ui308.js";
-import { triggerHover as O } from "./als-react-ts-ui168.js";
-import { getDocument as x, getTarget as J } from "./als-react-ts-ui241.js";
-import { isMouseLikePointerType as K } from "./als-react-ts-ui180.js";
-const Q = /* @__PURE__ */ new Set(["click", "mousedown"]);
-function re(i, d = {}) {
-  const n = "rootStore" in i ? i.rootStore : i, m = n.useState("open"), u = n.useState("floatingElement"), b = n.useState("domReferenceElement"), {
-    dataRef: p
-  } = n.context, {
-    enabled: R = !0,
-    closeDelay: I = 0,
-    externalTree: A
-  } = d, {
-    pointerTypeRef: E,
-    interactedInsideRef: f,
-    handlerRef: v,
-    performedPointerEventsMutationRef: g,
-    unbindMouseMoveRef: N,
-    restTimeoutPendingRef: S,
-    openChangeTimeout: y,
-    handleCloseOptionsRef: k
-  } = B(n), M = q(A), T = z(), h = l(() => f.current ? !0 : p.current.openEvent ? Q.has(p.current.openEvent.type) : !1), C = l(() => {
-    const e = p.current.openEvent?.type;
-    return e?.includes("mouse") && e !== "mousedown";
-  }), P = L.useCallback((e, r = !0) => {
-    const s = U(I, E.current);
-    s && !v.current ? y.start(s, () => n.setOpen(!1, w(O, e))) : r && (y.clear(), n.setOpen(!1, w(O, e)));
-  }, [I, v, n, E, y]), c = l(() => {
-    N.current(), v.current = void 0;
-  }), a = l(() => {
-    if (g.current) {
-      const e = x(u).body;
-      e.style.pointerEvents = "", e.removeAttribute(H), g.current = !1;
-    }
-  }), D = l((e) => {
-    const r = J(e);
-    if (!G(r)) {
-      f.current = !1;
+import * as f from "react";
+import { useIsoLayoutEffect as g } from "./als-react-ts-ui193.js";
+import { useStableCallback as B } from "./als-react-ts-ui192.js";
+import { useMergedRefs as k } from "./als-react-ts-ui287.js";
+import { useOnMount as z } from "./als-react-ts-ui305.js";
+import { useAnimationFrame as V, AnimationFrame as s } from "./als-react-ts-ui346.js";
+import { warn as U } from "./als-react-ts-ui283.js";
+import { createChangeEventDetails as _ } from "./als-react-ts-ui246.js";
+import { CollapsiblePanelDataAttributes as v } from "./als-react-ts-ui347.js";
+import { AccordionRootDataAttributes as G } from "./als-react-ts-ui348.js";
+import { none as J } from "./als-react-ts-ui248.js";
+function oe(H) {
+  const {
+    abortControllerRef: r,
+    animationTypeRef: i,
+    externalRef: W,
+    height: x,
+    hiddenUntilFound: d,
+    keepMounted: w,
+    id: O,
+    mounted: R,
+    onOpenChange: D,
+    open: l,
+    panelRef: a,
+    runOnceAnimationsFinish: h,
+    setDimensions: c,
+    setMounted: m,
+    setOpen: E,
+    setVisible: A,
+    transitionDimensionRef: C,
+    visible: P,
+    width: I
+  } = H, p = f.useRef(!1), M = f.useRef(null), F = f.useRef(l), S = f.useRef(l), N = V(), y = f.useMemo(() => i.current === "css-animation" ? !P : !l && !R, [l, R, P, i]), L = B((e) => {
+    if (!e)
       return;
+    if (i.current == null || C.current == null) {
+      const t = getComputedStyle(e), u = t.animationName !== "none" && t.animationName !== "", b = t.transitionDuration !== "0s" && t.transitionDuration !== "";
+      u && b ? process.env.NODE_ENV !== "production" && U("CSS transitions and CSS animations both detected on Collapsible or Accordion panel.", "Only one of either animation type should be used.") : t.animationName === "none" && t.transitionDuration !== "0s" ? i.current = "css-transition" : t.animationName !== "none" && t.transitionDuration === "0s" ? i.current = "css-animation" : i.current = "none", e.getAttribute(G.orientation) === "horizontal" || t.transitionProperty.indexOf("width") > -1 ? C.current = "width" : C.current = "height";
     }
-    f.current = !0;
-  });
-  F(() => {
-    m || (E.current = void 0, S.current = !1, f.current = !1, c(), a());
-  }, [m, E, S, f, c, a]), L.useEffect(() => () => {
-    c();
-  }, [c]), L.useEffect(() => a, [a]), F(() => {
-    if (R && m && k.current?.blockPointerEvents && C() && j(b) && u) {
-      g.current = !0;
-      const e = x(u).body;
-      e.setAttribute(H, "");
-      const r = b, s = u, t = M?.nodesRef.current.find((o) => o.id === T)?.context?.elements.floating;
-      return t && (t.style.pointerEvents = ""), e.style.pointerEvents = "none", r.style.pointerEvents = "auto", s.style.pointerEvents = "auto", () => {
-        e.style.pointerEvents = "", r.style.pointerEvents = "", s.style.pointerEvents = "";
-      };
-    }
-  }, [R, m, b, u, k, C, M, T, g]), L.useEffect(() => {
-    if (!R)
+    if (i.current !== "css-transition")
+      return;
+    (x === void 0 || I === void 0) && (c({
+      height: e.scrollHeight,
+      width: e.scrollWidth
+    }), S.current && e.style.setProperty("transition-duration", "0s"));
+    let o = -1, n = -1;
+    return o = s.request(() => {
+      S.current = !1, n = s.request(() => {
+        setTimeout(() => {
+          e.style.removeProperty("transition-duration");
+        });
+      });
+    }), () => {
+      s.cancel(o), s.cancel(n);
+    };
+  }), j = k(W, a, L);
+  return g(() => {
+    if (i.current !== "css-transition")
       return;
-    function e(o) {
-      if (h() || !p.current.floatingContext)
+    const e = a.current;
+    if (!e)
+      return;
+    let o = -1;
+    if (r.current != null && (r.current.abort(), r.current = null), l) {
+      const n = {
+        "justify-content": e.style.justifyContent,
+        "align-items": e.style.alignItems,
+        "align-content": e.style.alignContent,
+        "justify-items": e.style.justifyItems
+      };
+      Object.keys(n).forEach((t) => {
+        e.style.setProperty(t, "initial", "important");
+      }), !S.current && !w && e.setAttribute(v.startingStyle, ""), c({
+        height: e.scrollHeight,
+        width: e.scrollWidth
+      }), o = s.request(() => {
+        Object.entries(n).forEach(([t, u]) => {
+          u === "" ? e.style.removeProperty(t) : e.style.setProperty(t, u);
+        });
+      });
+    } else {
+      if (e.scrollHeight === 0 && e.scrollWidth === 0)
         return;
-      const W = n.context.triggerElements;
-      o.relatedTarget && W.hasElement(o.relatedTarget) || (a(), c(), h() || P(o));
-    }
-    function r(o) {
-      y.clear(), a(), v.current?.(o), c();
+      c({
+        height: e.scrollHeight,
+        width: e.scrollWidth
+      });
+      const n = new AbortController();
+      r.current = n;
+      const t = n.signal;
+      let u = null;
+      const b = v.endingStyle;
+      return u = new MutationObserver((T) => {
+        T.some((q) => q.type === "attributes" && q.attributeName === b) && (u?.disconnect(), u = null, h(() => {
+          c({
+            height: 0,
+            width: 0
+          }), e.style.removeProperty("content-visibility"), m(!1), r.current === n && (r.current = null);
+        }, t));
+      }), u.observe(e, {
+        attributes: !0,
+        attributeFilter: [b]
+      }), () => {
+        u?.disconnect(), N.cancel(), r.current === n && (n.abort(), r.current = null);
+      };
     }
-    function s(o) {
-      h() || P(o, !1);
+    return () => {
+      s.cancel(o);
+    };
+  }, [r, i, N, d, w, R, l, a, h, c, m]), g(() => {
+    if (i.current !== "css-animation")
+      return;
+    const e = a.current;
+    e && (M.current = e.style.animationName || M.current, e.style.setProperty("animation-name", "none"), c({
+      height: e.scrollHeight,
+      width: e.scrollWidth
+    }), !F.current && !p.current && e.style.removeProperty("animation-name"), l ? (r.current != null && (r.current.abort(), r.current = null), m(!0), A(!0)) : (r.current = new AbortController(), h(() => {
+      m(!1), A(!1), r.current = null;
+    }, r.current.signal)));
+  }, [r, i, l, a, h, c, m, A, P]), z(() => {
+    const e = s.request(() => {
+      F.current = !1;
+    });
+    return () => s.cancel(e);
+  }), g(() => {
+    if (!d)
+      return;
+    const e = a.current;
+    if (!e)
+      return;
+    let o = -1, n = -1;
+    return l && p.current && (e.style.transitionDuration = "0s", c({
+      height: e.scrollHeight,
+      width: e.scrollWidth
+    }), o = s.request(() => {
+      p.current = !1, n = s.request(() => {
+        setTimeout(() => {
+          e.style.removeProperty("transition-duration");
+        });
+      });
+    })), () => {
+      s.cancel(o), s.cancel(n);
+    };
+  }, [d, l, a, c]), g(() => {
+    const e = a.current;
+    e && d && y && (e.setAttribute("hidden", "until-found"), i.current === "css-transition" && e.setAttribute(v.startingStyle, ""));
+  }, [d, y, i, a]), f.useEffect(function() {
+    const o = a.current;
+    if (!o)
+      return;
+    function n(t) {
+      p.current = !0, E(!0), D(!0, _(J, t));
     }
-    const t = u;
-    return t && (t.addEventListener("mouseleave", e), t.addEventListener("mouseenter", r), t.addEventListener("mouseleave", s), t.addEventListener("pointerdown", D, !0)), () => {
-      t && (t.removeEventListener("mouseleave", e), t.removeEventListener("mouseenter", r), t.removeEventListener("mouseleave", s), t.removeEventListener("pointerdown", D, !0));
+    return o.addEventListener("beforematch", n), () => {
+      o.removeEventListener("beforematch", n);
     };
-  });
-}
-function U(i, d) {
-  return d && !K(d) ? 0 : typeof i == "function" ? i() : i;
+  }, [D, a, E]), f.useMemo(() => ({
+    props: {
+      hidden: y,
+      id: O,
+      ref: j
+    }
+  }), [y, O, j]);
 }
 export {
-  U as getDelay,
-  re as useHoverFloatingInteraction
+  oe as useCollapsiblePanel
 };

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

@@ -1,19 +1,6 @@
-import * as n from "react";
-function e(i) {
-  const o = n.useRef(""), c = n.useCallback((r) => {
-    r.defaultPrevented || (o.current = r.pointerType, i(r, r.pointerType));
-  }, [i]);
-  return {
-    onClick: n.useCallback((r) => {
-      if (r.detail === 0) {
-        i(r, "keyboard");
-        return;
-      }
-      "pointerType" in r && i(r, r.pointerType), i(r, o.current), o.current = "";
-    }, [i]),
-    onPointerDown: c
-  };
-}
+let e = /* @__PURE__ */ (function(n) {
+  return n.accordionPanelHeight = "--accordion-panel-height", n.accordionPanelWidth = "--accordion-panel-width", n;
+})({});
 export {
-  e as useEnhancedClickHandler
+  e as AccordionPanelCssVars
 };