@yselimcan/ui 0.0.4 → 0.0.6

package/dist/index108.js

@@ -1,90 +1,299 @@
 "use client";
-import * as s from "react";
-import { useStableCallback as y } from "./index102.js";
-import { useScrollLock as I } from "./index157.js";
-import { useOpenInteractionType as A } from "./index144.js";
-import { createChangeEventDetails as M } from "./index113.js";
-import { useImplicitActiveTrigger as B, useOpenStateTransitions as F } from "./index126.js";
-import { useSyncedFloatingRootContext as U } from "./index189.js";
-import { useRole as w } from "./index190.js";
-import { useDismiss as H } from "./index146.js";
-import { useInteractions as K } from "./index128.js";
-import { imperativeAction as L } from "./index114.js";
-import { getTarget as V, contains as j } from "./index155.js";
-function ee(R) {
-  const {
-    store: e,
-    parentContext: o,
-    actionsRef: x
-  } = R, n = e.useState("open"), P = e.useState("disablePointerDismissal"), c = e.useState("modal"), l = e.useState("popupElement"), {
-    openMethod: k,
-    triggerProps: r,
-    reset: S
-  } = A(n);
-  B(e);
+import * as b from "react";
+import { tabbable as we, isTabbable as De, focusable as Ke } from "./index236.js";
+import { isHTMLElement as q, getNodeName as He, getWindow as _e, getComputedStyle as Ue } from "./index123.js";
+import { useMergedRefs as Re } from "./index117.js";
+import { useValueAsRef as H } from "./index132.js";
+import { useStableCallback as _ } from "./index124.js";
+import { useIsoLayoutEffect as U } from "./index126.js";
+import { visuallyHidden as We } from "./index129.js";
+import { useTimeout as ye } from "./index152.js";
+import { useAnimationFrame as $e } from "./index164.js";
+import { FocusGuard as Te } from "./index195.js";
+import { createChangeEventDetails as ze } from "./index100.js";
+import { createAttribute as Fe } from "./index237.js";
+import { enqueueFocus as te } from "./index238.js";
+import { markOthers as Je } from "./index239.js";
+import { usePortalContext as Qe } from "./index111.js";
+import { useFloatingTree as Xe } from "./index181.js";
+import { CLICK_TRIGGER_IDENTIFIER as Ye } from "./index113.js";
+import { resolveRef as D } from "./index240.js";
+import { jsxs as Ze, jsx as xe } from "react/jsx-runtime";
+import { isTypeableCombobox as he, getFloatingFocusElement as Ie, getDocument as I, activeElement as V, contains as m, getTarget as W } from "./index155.js";
+import { getTabbableOptions as re, isOutsideEvent as Le, getNextTabbable as et, getPreviousTabbable as tt } from "./index199.js";
+import { getNodeAncestors as ke, getNodeChildren as Ce } from "./index241.js";
+import { isVirtualClick as nt, isVirtualPointerEvent as rt, stopEvent as ot } from "./index225.js";
+import { triggerHover as st, outsidePress as ut, focusOut as it } from "./index101.js";
+function ct(n, p) {
+  const h = _e(n.target);
+  return n instanceof h.KeyboardEvent ? "keyboard" : n instanceof h.FocusEvent ? p || "keyboard" : "pointerType" in n ? n.pointerType || "keyboard" : "touches" in n ? "touch" : n instanceof h.MouseEvent ? p || (n.detail === 0 ? "keyboard" : "mouse") : "";
+}
+const Ae = 20;
+let L = [];
+function oe() {
+  L = L.filter((n) => n.isConnected);
+}
+function at(n) {
+  oe(), n && He(n) !== "body" && (L.push(n), L.length > Ae && (L = L.slice(-Ae)));
+}
+function ne() {
+  return oe(), L[L.length - 1];
+}
+function ft(n) {
+  if (!n)
+    return null;
+  const p = re();
+  return De(n, p) ? n : we(n, p)[0] || n;
+}
+function lt(n) {
+  return !n || !n.isConnected ? !1 : typeof n.checkVisibility == "function" ? n.checkVisibility() : Ue(n).display !== "none";
+}
+function Oe(n, p) {
+  if (!p.current.includes("floating") && !n.getAttribute("role")?.includes("dialog"))
+    return;
+  const h = re(), $ = Ke(n, h).filter((S) => {
+    const P = S.getAttribute("data-tabindex") || "";
+    return De(S, h) || S.hasAttribute("data-tabindex") && !P.startsWith("-");
+  }), N = n.getAttribute("tabindex");
+  p.current.includes("floating") || $.length === 0 ? N !== "0" && n.setAttribute("tabindex", "0") : (N !== "-1" || n.hasAttribute("data-tabindex") && n.getAttribute("data-tabindex") !== "-1") && (n.setAttribute("tabindex", "-1"), n.setAttribute("data-tabindex", "-1"));
+}
+function Mt(n) {
   const {
-    forceUnmount: m
-  } = F(n, e, () => {
-    S();
-  }), f = y((t) => {
-    const a = M(t);
-    return a.preventUnmountOnClose = () => {
-      e.set("preventUnmountingOnClose", !0);
-    }, a;
-  }), g = s.useCallback(() => {
-    e.setOpen(!1, f(L));
-  }, [e, f]);
-  s.useImperativeHandle(x, () => ({
-    unmount: m,
-    close: g
-  }), [m, g]);
-  const u = U({
-    popupStore: e,
-    onOpenChange: e.setOpen,
-    treatPopupAsFloatingElement: !0,
-    noEmit: !0
-  }), [i, d] = s.useState(0), C = i === 0, N = w(u), T = H(u, {
-    outsidePressEvent() {
-      return e.context.internalBackdropRef.current || e.context.backdropRef.current ? "intentional" : {
-        mouse: c === "trap-focus" ? "sloppy" : "intentional",
-        touch: "sloppy"
+    context: p,
+    children: h,
+    disabled: i = !1,
+    order: $ = ["content"],
+    initialFocus: N = !0,
+    returnFocus: S = !0,
+    restoreFocus: P = !1,
+    modal: E = !0,
+    closeOnFocusOut: M = !0,
+    openInteractionType: Ne = "",
+    getInsideElements: Se = () => [],
+    nextFocusableElement: z,
+    previousFocusableElement: J,
+    beforeContentFocusGuardRef: Pe,
+    externalTree: Me
+  } = n, F = "rootStore" in p ? p.rootStore : p, v = F.useState("open"), a = F.useState("domReferenceElement"), f = F.useState("floatingElement"), {
+    events: Q,
+    dataRef: k
+  } = F.context, O = _(() => k.current.floatingContext?.nodeId), se = _(Se), ue = N === !1, x = he(a) && ue, C = H($), ie = H(N), j = H(S), ce = H(Ne), R = Xe(Me), c = Qe(), Ge = b.useRef(null), qe = b.useRef(null), y = b.useRef(!1), B = b.useRef(!1), X = b.useRef(!1), ae = b.useRef(-1), fe = b.useRef(""), Y = b.useRef(""), le = ye(), de = ye(), be = $e(), Z = c != null, r = Ie(f), A = _((t = r) => t ? we(t, re()) : []), G = _((t) => {
+    const o = A(t);
+    return C.current.map(() => o).filter(Boolean).flat();
+  });
+  b.useEffect(() => {
+    if (i || !E)
+      return;
+    function t(l) {
+      l.key === "Tab" && m(r, V(I(r))) && A().length === 0 && !x && ot(l);
+    }
+    const o = I(r);
+    return o.addEventListener("keydown", t), () => {
+      o.removeEventListener("keydown", t);
+    };
+  }, [i, a, r, E, C, x, A, G]), b.useEffect(() => {
+    if (i || !f)
+      return;
+    function t(o) {
+      const l = W(o), d = A().indexOf(l);
+      d !== -1 && (ae.current = d);
+    }
+    return f.addEventListener("focusin", t), () => {
+      f.removeEventListener("focusin", t);
+    };
+  }, [i, f, A]), b.useEffect(() => {
+    if (i || !v)
+      return;
+    const t = I(r);
+    function o() {
+      X.current = !1;
+    }
+    function l(d) {
+      const e = W(d), s = m(f, e) || m(a, e) || m(c?.portalNode, e);
+      X.current = !s, Y.current = d.pointerType || "keyboard";
+    }
+    function u() {
+      Y.current = "keyboard";
+    }
+    return t.addEventListener("pointerdown", l, !0), t.addEventListener("pointerup", o, !0), t.addEventListener("pointercancel", o, !0), t.addEventListener("keydown", u, !0), () => {
+      t.removeEventListener("pointerdown", l, !0), t.removeEventListener("pointerup", o, !0), t.removeEventListener("pointercancel", o, !0), t.removeEventListener("keydown", u, !0);
+    };
+  }, [i, f, a, r, v, c]), b.useEffect(() => {
+    if (i || !M)
+      return;
+    function t() {
+      B.current = !0, de.start(0, () => {
+        B.current = !1;
+      });
+    }
+    function o(e) {
+      const s = e.relatedTarget, w = e.currentTarget, g = W(e);
+      queueMicrotask(() => {
+        const K = O(), ge = F.context.triggerElements, Be = !(m(a, s) || m(f, s) || m(s, f) || m(c?.portalNode, s) || s != null && ge.hasElement(s) || ge.hasMatchingElement((T) => m(T, s)) || s?.hasAttribute(Fe("focus-guard")) || R && (Ce(R.nodesRef.current, K).find((T) => m(T.context?.elements.floating, s) || m(T.context?.elements.domReference, s)) || ke(R.nodesRef.current, K).find((T) => [T.context?.elements.floating, Ie(T.context?.elements.floating)].includes(s) || T.context?.elements.domReference === s)));
+        if (w === a && r && Oe(r, C), P && w !== a && !lt(g) && V(I(r)) === I(r).body) {
+          if (q(r) && (r.focus(), P === "popup")) {
+            be.request(() => {
+              r.focus();
+            });
+            return;
+          }
+          const T = ae.current, ee = A(), ve = ee[T] || ee[ee.length - 1] || r;
+          q(ve) && ve.focus();
+        }
+        if (k.current.insideReactTree) {
+          k.current.insideReactTree = !1;
+          return;
+        }
+        (x || !E) && s && Be && !B.current && // Fix React 18 Strict Mode returnFocus due to double rendering.
+        // For an "untrapped" typeable combobox (input role=combobox with
+        // initialFocus=false), re-opening the popup and tabbing out should still close it even
+        // when the previously focused element (e.g. the next tabbable outside the popup) is
+        // focused again. Otherwise, the popup remains open on the second Tab sequence:
+        // click input -> Tab (closes) -> click input -> Tab.
+        // Allow closing when `isUntrappedTypeableCombobox` regardless of the previously focused element.
+        (x || s !== ne()) && (y.current = !0, F.setOpen(!1, ze(it, e)));
+      });
+    }
+    function l() {
+      X.current || (k.current.insideReactTree = !0, le.start(0, () => {
+        k.current.insideReactTree = !1;
+      }));
+    }
+    const u = q(a) ? a : null, d = [];
+    if (!(!f && !u))
+      return u && (u.addEventListener("focusout", o), u.addEventListener("pointerdown", t), d.push(() => {
+        u.removeEventListener("focusout", o), u.removeEventListener("pointerdown", t);
+      })), f && (f.addEventListener("focusout", o), c && (f.addEventListener("focusout", l, !0), d.push(() => {
+        f.removeEventListener("focusout", l, !0);
+      })), d.push(() => {
+        f.removeEventListener("focusout", o);
+      })), () => {
+        d.forEach((e) => {
+          e();
+        });
       };
-    },
-    outsidePress(t) {
-      if ("button" in t && t.button !== 0 || "touches" in t && t.touches.length !== 1)
-        return !1;
-      const a = V(t);
-      if (C && !P) {
-        const p = a;
-        return c && (e.context.internalBackdropRef.current || e.context.backdropRef.current) ? e.context.internalBackdropRef.current === p || e.context.backdropRef.current === p || j(p, l) && !p?.hasAttribute("data-base-ui-portal") : !0;
+  }, [i, a, f, r, E, R, c, F, M, P, A, x, O, C, k, le, de, be]);
+  const me = b.useRef(null), pe = b.useRef(null), Ve = Re(me, Pe, c?.beforeInsideRef), je = Re(pe, c?.afterInsideRef);
+  b.useEffect(() => {
+    if (i || !f || !v)
+      return;
+    const t = Array.from(c?.portalNode?.querySelectorAll(`[${Fe("portal")}]`) || []), l = (R ? ke(R.nodesRef.current, O()) : []).find((e) => he(e.context?.elements.domReference || null))?.context?.elements.domReference, u = [f, l, ...t, ...se(), Ge.current, qe.current, me.current, pe.current, c?.beforeOutsideRef.current, c?.afterOutsideRef.current, D(J), D(z), x ? a : null].filter((e) => e != null), d = Je(u, E || x);
+    return () => {
+      d();
+    };
+  }, [v, i, a, f, E, C, c, x, R, O, se, z, J]), U(() => {
+    if (!v || i || !q(r))
+      return;
+    const t = I(r), o = V(t);
+    queueMicrotask(() => {
+      const l = G(r), u = ie.current, d = typeof u == "function" ? u(ce.current || "") : u;
+      if (d === void 0 || d === !1)
+        return;
+      let e;
+      d === !0 || d === null ? e = l[0] || r : e = D(d), e = e || l[0] || r, !m(r, o) && te(e, {
+        preventScroll: e === r
+      });
+    });
+  }, [i, v, r, ue, G, ie, ce]), U(() => {
+    if (i || !r)
+      return;
+    const t = I(r), o = V(t);
+    at(o);
+    function l(e) {
+      if (e.open || (fe.current = ct(e.nativeEvent, Y.current)), e.reason === st && e.nativeEvent.type === "mouseleave" && (y.current = !0), e.reason === ut)
+        if (e.nested)
+          y.current = !1;
+        else if (nt(e.nativeEvent) || rt(e.nativeEvent))
+          y.current = !1;
+        else {
+          let s = !1;
+          document.createElement("div").focus({
+            get preventScroll() {
+              return s = !0, !1;
+            }
+          }), s ? y.current = !1 : y.current = !0;
+        }
+    }
+    Q.on("openchange", l);
+    const u = t.createElement("span");
+    u.setAttribute("tabindex", "-1"), u.setAttribute("aria-hidden", "true"), Object.assign(u.style, We), Z && a && a.insertAdjacentElement("afterend", u);
+    function d() {
+      const e = j.current;
+      let s = typeof e == "function" ? e(fe.current) : e;
+      if (s === void 0 || s === !1)
+        return null;
+      if (s === null && (s = !0), typeof s == "boolean") {
+        const g = a || ne();
+        return g && g.isConnected ? g : u;
       }
-      return !1;
-    },
-    escapeKey: C
-  });
-  I(n && c === !0, l);
-  const {
-    getReferenceProps: D,
-    getFloatingProps: O,
-    getTriggerProps: b
-  } = K([N, T]);
-  e.useContextCallback("onNestedDialogOpen", (t) => {
-    d(t + 1);
-  }), e.useContextCallback("onNestedDialogClose", () => {
-    d(0);
-  }), s.useEffect(() => (o?.onNestedDialogOpen && n && o.onNestedDialogOpen(i), o?.onNestedDialogClose && !n && o.onNestedDialogClose(), () => {
-    o?.onNestedDialogClose && n && o.onNestedDialogClose();
-  }), [n, o, i]);
-  const h = s.useMemo(() => D(r), [D, r]), v = s.useMemo(() => b(r), [b, r]), E = s.useMemo(() => O(), [O]);
-  e.useSyncedValues({
-    openMethod: k,
-    activeTriggerProps: h,
-    inactiveTriggerProps: v,
-    popupProps: E,
-    floatingRootContext: u,
-    nestedOpenDialogCount: i
+      const w = a || ne() || u;
+      return D(s) || w;
+    }
+    return () => {
+      Q.off("openchange", l);
+      const e = V(t), s = m(f, e) || R && Ce(R.nodesRef.current, O(), !1).some((g) => m(g.context?.elements.floating, e)), w = d();
+      queueMicrotask(() => {
+        const g = ft(w), K = typeof j.current != "boolean";
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        j.current && !y.current && q(g) && // If the focus moved somewhere else after mount, avoid returning focus
+        // since it likely entered a different element which should be
+        // respected: https://github.com/floating-ui/floating-ui/issues/2607
+        (!(!K && g !== e && e !== t.body) || s) && g.focus({
+          preventScroll: !0
+        }), u.remove();
+      });
+    };
+  }, [i, f, r, j, k, Q, R, Z, a, O]), b.useEffect(() => {
+    queueMicrotask(() => {
+      y.current = !1;
+    });
+  }, [i]), b.useEffect(() => {
+    if (i || !v)
+      return;
+    function t(l) {
+      W(l)?.closest(`[${Ye}]`) && (B.current = !0);
+    }
+    const o = I(r);
+    return o.addEventListener("pointerdown", t, !0), () => {
+      o.removeEventListener("pointerdown", t, !0);
+    };
+  }, [i, v, r]), U(() => {
+    if (!i && c)
+      return c.setFocusManagerState({
+        modal: E,
+        closeOnFocusOut: M,
+        open: v,
+        onOpenChange: F.setOpen,
+        domReference: a
+      }), () => {
+        c.setFocusManagerState(null);
+      };
+  }, [i, c, E, v, F, M, a]), U(() => {
+    if (!(i || !r))
+      return Oe(r, C), () => {
+        queueMicrotask(oe);
+      };
+  }, [i, r, C]);
+  const Ee = !i && (E ? !x : !0) && (Z || E);
+  return /* @__PURE__ */ Ze(b.Fragment, {
+    children: [Ee && /* @__PURE__ */ xe(Te, {
+      "data-type": "inside",
+      ref: Ve,
+      onFocus: (t) => {
+        if (E) {
+          const o = G();
+          te(o[o.length - 1]);
+        } else c?.portalNode && (y.current = !1, Le(t, c.portalNode) ? et(a)?.focus() : D(J ?? c.beforeOutsideRef)?.focus());
+      }
+    }), h, Ee && /* @__PURE__ */ xe(Te, {
+      "data-type": "inside",
+      ref: je,
+      onFocus: (t) => {
+        E ? te(G()[0]) : c?.portalNode && (M && (y.current = !0), Le(t, c.portalNode) ? tt(a)?.focus() : D(z ?? c.afterOutsideRef)?.focus());
+      }
+    })]
   });
 }
 export {
-  ee as useDialogRoot
+  Mt as FloatingFocusManager
 };

package/dist/index109.js

@@ -1,15 +1,7 @@
-"use client";
-import i from "./index94.js";
-import * as t from "react";
-const e = /* @__PURE__ */ t.createContext(void 0);
-process.env.NODE_ENV !== "production" && (e.displayName = "DialogRootContext");
-function s(n) {
-  const o = t.useContext(e);
-  if (n === !1 && o === void 0)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: DialogRootContext is missing. Dialog parts must be placed within <Dialog.Root>." : i(27));
-  return o;
+import { isReactVersionAtLeast as r } from "./index205.js";
+function n(e) {
+  return r(19) ? e : e ? "true" : void 0;
 }
 export {
-  e as DialogRootContext,
-  s as useDialogRootContext
+  n as inertValue
 };

package/dist/index110.js

@@ -1,65 +1,41 @@
 import * as i from "react";
-import { popupStoreSelectors as d, createInitialPopupStoreState as a } from "./index200.js";
-import { ReactStore as p } from "./index201.js";
-import { PopupTriggerMap as g } from "./index202.js";
-import { createSelector as n } from "./index203.js";
-const m = {
-  ...d,
-  modal: n((e) => e.modal),
-  nested: n((e) => e.nested),
-  nestedOpenDialogCount: n((e) => e.nestedOpenDialogCount),
-  disablePointerDismissal: n((e) => e.disablePointerDismissal),
-  openMethod: n((e) => e.openMethod),
-  descriptionElementId: n((e) => e.descriptionElementId),
-  titleElementId: n((e) => e.titleElementId),
-  viewportElement: n((e) => e.viewportElement),
-  role: n((e) => e.role)
-};
-class C extends p {
-  constructor(o) {
-    super(c(o), {
-      popupRef: /* @__PURE__ */ i.createRef(),
-      backdropRef: /* @__PURE__ */ i.createRef(),
-      internalBackdropRef: /* @__PURE__ */ i.createRef(),
-      triggerElements: new g(),
-      onOpenChange: void 0,
-      onOpenChangeComplete: void 0
-    }, m);
+import { jsx as a } from "react/jsx-runtime";
+const c = /* @__PURE__ */ i.forwardRef(function(r, n) {
+  const {
+    cutout: e,
+    ...p
+  } = r;
+  let o;
+  if (e) {
+    const t = e?.getBoundingClientRect();
+    o = `polygon(
+      0% 0%,
+      100% 0%,
+      100% 100%,
+      0% 100%,
+      0% 0%,
+      ${t.left}px ${t.top}px,
+      ${t.left}px ${t.bottom}px,
+      ${t.right}px ${t.bottom}px,
+      ${t.right}px ${t.top}px,
+      ${t.left}px ${t.top}px
+    )`;
   }
-  setOpen = (o, t) => {
-    if (t.preventUnmountOnClose = () => {
-      this.set("preventUnmountingOnClose", !0);
-    }, !o && t.trigger == null && this.state.activeTriggerId != null && (t.trigger = this.state.activeTriggerElement ?? void 0), this.context.onOpenChange?.(o, t), t.isCanceled)
-      return;
-    const s = {
-      open: o,
-      nativeEvent: t.event,
-      reason: t.reason,
-      nested: this.state.nested
-    };
-    this.state.floatingRootContext.context.events?.emit("openchange", s);
-    const r = {
-      open: o
-    }, l = t.trigger?.id ?? null;
-    (l || o) && (r.activeTriggerId = l, r.activeTriggerElement = t.trigger ?? null), this.update(r);
-  };
-}
-function c(e = {}) {
-  return {
-    ...a(),
-    modal: !0,
-    disablePointerDismissal: !1,
-    popupElement: null,
-    viewportElement: null,
-    descriptionElementId: void 0,
-    titleElementId: void 0,
-    openMethod: null,
-    nested: !1,
-    nestedOpenDialogCount: 0,
-    role: "dialog",
-    ...e
-  };
-}
+  return /* @__PURE__ */ a("div", {
+    ref: n,
+    role: "presentation",
+    "data-base-ui-inert": "",
+    ...p,
+    style: {
+      position: "fixed",
+      inset: 0,
+      userSelect: "none",
+      WebkitUserSelect: "none",
+      clipPath: o
+    }
+  });
+});
+process.env.NODE_ENV !== "production" && (c.displayName = "InternalBackdrop");
 export {
-  C as DialogStore
+  c as InternalBackdrop
 };