react-resizable-panels 4.0.11 → 4.0.12

package/dist/react-resizable-panels.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as K } from "react/jsx-runtime";
-import { useId as Xe, useLayoutEffect as Ye, useEffect as Re, useRef as O, useCallback as Ee, createContext as qe, useImperativeHandle as Me, useState as k, useMemo as ke, useSyncExternalStore as Ze, useContext as Je } from "react";
+import { useId as Ve, useLayoutEffect as Ke, useEffect as Re, useRef as O, useCallback as Xe, createContext as Ye, useImperativeHandle as Ee, useState as k, useMemo as se, useSyncExternalStore as qe, useContext as Ze } from "react";
 function z(e, t = "Assertion error") {
   if (!e)
     throw Error(t);
@@ -11,20 +11,20 @@ function B({
   const { orientation: t, panels: n } = e;
   return n.reduce((o, r) => (o += t === "horizontal" ? r.element.offsetWidth : r.element.offsetHeight, o), 0);
 }
-function se(e, t) {
+function ae(e, t) {
   return t.sort(
-    e === "horizontal" ? Qe : et
+    e === "horizontal" ? Je : Qe
   );
 }
-function Qe(e, t) {
+function Je(e, t) {
   const n = e.element.offsetLeft - t.element.offsetLeft;
   return n !== 0 ? n : e.element.offsetWidth - t.element.offsetWidth;
 }
-function et(e, t) {
+function Qe(e, t) {
   const n = e.element.offsetTop - t.element.offsetTop;
   return n !== 0 ? n : e.element.offsetHeight - t.element.offsetHeight;
 }
-function Ie(e, t) {
+function Me(e, t) {
   return {
     x: e.x >= t.left && e.x <= t.right ? 0 : Math.min(
       Math.abs(e.x - t.left),
@@ -36,7 +36,7 @@ function Ie(e, t) {
     )
   };
 }
-function tt({
+function et({
   orientation: e,
   rects: t,
   targetRect: n
@@ -47,13 +47,13 @@ function tt({
   };
   let r, a = Number.MAX_VALUE;
   for (const l of t) {
-    const { x: i, y: s } = Ie(o, l), u = e === "horizontal" ? i : s;
+    const { x: i, y: s } = Me(o, l), u = e === "horizontal" ? i : s;
     u < a && (a = u, r = l);
   }
   return z(r, "No rect found"), r;
 }
-function Ge(e) {
-  const { element: t, orientation: n, panels: o, separators: r } = e, a = se(
+function ke(e) {
+  const { element: t, orientation: n, panels: o, separators: r } = e, a = ae(
     n,
     Array.from(t.children).filter((c) => c instanceof HTMLElement).map((c) => ({ element: c }))
   ).map(({ element: c }) => c), l = [];
@@ -83,7 +83,7 @@ function Ge(e) {
                 break;
               }
               case 1: {
-                const v = u[0], S = tt({
+                const v = u[0], S = et({
                   orientation: n,
                   rects: [m, p],
                   targetRect: v.element.getBoundingClientRect()
@@ -133,21 +133,21 @@ function Ge(e) {
       i = !0;
   return l;
 }
-function nt(e, t) {
+function tt(e, t) {
   const n = getComputedStyle(e), o = parseFloat(n.fontSize);
   return t * o;
 }
-function ot(e, t) {
+function nt(e, t) {
   const n = getComputedStyle(e.ownerDocument.body), o = parseFloat(n.fontSize);
   return t * o;
 }
-function it(e) {
+function ot(e) {
   return e / 100 * window.innerHeight;
 }
-function rt(e) {
+function it(e) {
   return e / 100 * window.innerWidth;
 }
-function st(e) {
+function rt(e) {
   switch (typeof e) {
     case "number":
       return [e, "px"];
@@ -163,7 +163,7 @@ function te({
   styleProp: n
 }) {
   let o;
-  const [r, a] = st(n);
+  const [r, a] = rt(n);
   switch (a) {
     case "%": {
       o = r / 100 * e;
@@ -174,19 +174,19 @@ function te({
       break;
     }
     case "rem": {
-      o = ot(t, r);
+      o = nt(t, r);
       break;
     }
     case "em": {
-      o = nt(t, r);
+      o = tt(t, r);
       break;
     }
     case "vh": {
-      o = it(r);
+      o = ot(r);
       break;
     }
     case "vw": {
-      o = rt(r);
+      o = it(r);
       break;
     }
   }
@@ -252,7 +252,7 @@ function ye(e) {
     };
   });
 }
-class at {
+class st {
   #e = {};
   addListener(t, n) {
     const o = this.#e[t];
@@ -301,7 +301,7 @@ let R = {
   },
   mountedGroups: /* @__PURE__ */ new Map()
 };
-const _ = new at();
+const _ = new st();
 function D() {
   return R;
 }
@@ -331,12 +331,12 @@ function E(e) {
     });
   }), _.emit("mountedGroupsChange", R.mountedGroups)), R;
 }
-const lt = (e) => e, ie = () => {
-}, De = 1, Oe = 2, Te = 4, _e = 8, ge = {
+const at = (e) => e, ie = () => {
+}, Ie = 1, Ge = 2, De = 4, Oe = 8, ge = {
   coarse: 10,
   precise: 5
 };
-function ut({
+function lt({
   cursorFlags: e,
   groups: t,
   state: n
@@ -363,7 +363,7 @@ function ut({
     return null;
   switch (n) {
     case "active": {
-      const a = (e & De) !== 0, l = (e & Oe) !== 0, i = (e & Te) !== 0, s = (e & _e) !== 0;
+      const a = (e & Ie) !== 0, l = (e & Ge) !== 0, i = (e & De) !== 0, s = (e & Oe) !== 0;
       if (e) {
         if (a)
           return i ? "se-resize" : s ? "ne-resize" : "e-resize";
@@ -386,7 +386,7 @@ function le() {
   switch (t.state) {
     case "active":
     case "hover": {
-      const n = ut({
+      const n = lt({
         cursorFlags: e,
         groups: t.hitRegions.map((r) => r.group),
         state: t.state
@@ -402,7 +402,7 @@ function le() {
     }
   }
 }
-function ct(e, t) {
+function ut(e, t) {
   if (e.length !== t.length)
     return !1;
   for (let n = 0; n < e.length; n++)
@@ -528,7 +528,7 @@ function Y({
       e < 0 ? d-- : d++;
     }
   }
-  if (ct(i, s))
+  if (ut(i, s))
     return r;
   {
     const f = e < 0 ? c : u, d = l[f];
@@ -575,7 +575,7 @@ function U(e, t) {
       return !1;
   return !0;
 }
-function Ae({
+function Te({
   event: e,
   hitRegions: t,
   initialLayoutMap: n,
@@ -607,11 +607,11 @@ function Ae({
         if (p !== 0 && !c)
           switch (h) {
             case "horizontal": {
-              a |= p < 0 ? De : Oe;
+              a |= p < 0 ? Ie : Ge;
               break;
             }
             case "vertical": {
-              a |= p < 0 ? Te : _e;
+              a |= p < 0 ? De : Oe;
               break;
             }
           }
@@ -642,7 +642,7 @@ function ve(e) {
   switch (t.state) {
     case "active":
       t.hitRegions.forEach((o) => {
-        e.currentTarget === o.group.element && Ae({
+        e.currentTarget === o.group.element && Te({
           event: e,
           hitRegions: t.hitRegions,
           initialLayoutMap: t.initialLayoutMap,
@@ -703,7 +703,7 @@ function A({
   const l = Object.keys(e);
   return o.reduce((i, s, u) => (i[l[u]] = s, i), {});
 }
-function Ne({
+function _e({
   groupId: e
 }) {
   const t = () => {
@@ -740,18 +740,18 @@ function Ne({
     }
   };
 }
-function $e(e) {
+function Ae(e) {
   const { mountedGroups: t } = D(), n = t.get(e);
   return z(n, `Mounted Group ${e.id} not found`), n;
 }
 function T(e, t) {
-  const n = oe(e), o = $e(n), r = n.separators.find(
+  const n = oe(e), o = Ae(n), r = n.separators.find(
     (h) => h.element === e
   );
   z(r, "Matching separator not found");
   const a = o.separatorToPanels.get(r);
   z(a, "Matching panels not found");
-  const l = a.map((h) => n.panels.indexOf(h)), s = Ne({ groupId: n.id }).getLayout(), u = Y({
+  const l = a.map((h) => n.panels.indexOf(h)), s = _e({ groupId: n.id }).getLayout(), u = Y({
     delta: t,
     initialLayout: s,
     panelConstraints: o.derivedPanelConstraints,
@@ -799,7 +799,7 @@ function Se(e) {
       }
       case "Enter": {
         e.preventDefault();
-        const o = oe(t), { derivedPanelConstraints: r, layout: a, separatorToPanels: l } = $e(o), i = o.separators.find(
+        const o = oe(t), { derivedPanelConstraints: r, layout: a, separatorToPanels: l } = Ae(o), i = o.separators.find(
           (h) => h.element === t
         );
         z(i, "Matching separator not found");
@@ -832,13 +832,13 @@ function Se(e) {
       }
     }
 }
-function ft(e, t, n) {
+function ct(e, t, n) {
   let o, r = {
     x: 1 / 0,
     y: 1 / 0
   };
   for (const a of t) {
-    const l = Ie(n, a.rect);
+    const l = Me(n, a.rect);
     switch (e) {
       case "horizontal": {
         l.x <= r.x && (o = a, r = l);
@@ -856,10 +856,10 @@ function ft(e, t, n) {
   } : void 0;
 }
 let ne;
-function dt() {
+function ft() {
   return ne === void 0 && (typeof matchMedia == "function" ? ne = !!matchMedia("(pointer:coarse)").matches : ne = !1), ne;
 }
-function pt(e, t) {
+function dt(e, t) {
   if (e === t) throw new Error("Cannot compare node with itself");
   const n = {
     a: we(e),
@@ -890,20 +890,20 @@ function pt(e, t) {
   }
   return Math.sign(r.a - r.b);
 }
-const ht = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
-function mt(e) {
-  const t = getComputedStyle(Fe(e) ?? e).display;
+const pt = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
+function ht(e) {
+  const t = getComputedStyle(Ne(e) ?? e).display;
   return t === "flex" || t === "inline-flex";
 }
-function yt(e) {
+function mt(e) {
   const t = getComputedStyle(e);
-  return !!(t.position === "fixed" || t.zIndex !== "auto" && (t.position !== "static" || mt(e)) || +t.opacity < 1 || "transform" in t && t.transform !== "none" || "webkitTransform" in t && t.webkitTransform !== "none" || "mixBlendMode" in t && t.mixBlendMode !== "normal" || "filter" in t && t.filter !== "none" || "webkitFilter" in t && t.webkitFilter !== "none" || "isolation" in t && t.isolation === "isolate" || ht.test(t.willChange) || t.webkitOverflowScrolling === "touch");
+  return !!(t.position === "fixed" || t.zIndex !== "auto" && (t.position !== "static" || ht(e)) || +t.opacity < 1 || "transform" in t && t.transform !== "none" || "webkitTransform" in t && t.webkitTransform !== "none" || "mixBlendMode" in t && t.mixBlendMode !== "normal" || "filter" in t && t.filter !== "none" || "webkitFilter" in t && t.webkitFilter !== "none" || "isolation" in t && t.isolation === "isolate" || pt.test(t.willChange) || t.webkitOverflowScrolling === "touch");
 }
 function xe(e) {
   let t = e.length;
   for (; t--; ) {
     const n = e[t];
-    if (z(n, "Missing node"), yt(n)) return n;
+    if (z(n, "Missing node"), mt(n)) return n;
   }
   return null;
 }
@@ -913,45 +913,45 @@ function ze(e) {
 function we(e) {
   const t = [];
   for (; e; )
-    t.push(e), e = Fe(e);
+    t.push(e), e = Ne(e);
   return t;
 }
-function Fe(e) {
+function Ne(e) {
   const { parentNode: t } = e;
   return t && t instanceof ShadowRoot ? t.host : t;
 }
-function gt(e, t) {
+function yt(e, t) {
   return e.x < t.x + t.width && e.x + e.width > t.x && e.y < t.y + t.height && e.y + e.height > t.y;
 }
-function vt({
+function gt({
   groupElement: e,
   hitRegion: t,
   pointerEventTarget: n
 }) {
   if (!(n instanceof HTMLElement) || n.contains(e) || e.contains(n))
     return !0;
-  if (pt(n, e) > 0) {
+  if (dt(n, e) > 0) {
     let o = n;
     for (; o; ) {
       if (o.contains(e))
         return !0;
-      if (gt(o.getBoundingClientRect(), t))
+      if (yt(o.getBoundingClientRect(), t))
         return !1;
       o = o.parentElement;
     }
   }
   return !0;
 }
-function He(e, t) {
+function $e(e, t) {
   const n = [];
   return t.forEach((o, r) => {
     if (r.disabled)
       return;
-    const a = dt() ? ge.coarse : ge.precise, l = Ge(r), i = ft(r.orientation, l, {
+    const a = ft() ? ge.coarse : ge.precise, l = ke(r), i = ct(r.orientation, l, {
       x: e.clientX,
       y: e.clientY
     });
-    i && i.distance.x <= a && i.distance.y <= a && vt({
+    i && i.distance.x <= a && i.distance.y <= a && gt({
       groupElement: r.element,
       hitRegion: i.hitRegion.rect,
       pointerEventTarget: e.target
@@ -961,7 +961,7 @@ function He(e, t) {
 function be(e) {
   if (e.defaultPrevented)
     return;
-  const { mountedGroups: t } = D(), n = He(e, t), o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Map();
+  const { mountedGroups: t } = D(), n = $e(e, t), o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Map();
   let i = !1;
   n.forEach((s) => {
     o.add(s.group), s.panels.forEach((c) => {
@@ -998,7 +998,7 @@ function Le(e) {
         );
         return;
       }
-      Ae({
+      Te({
         event: e,
         hitRegions: t.hitRegions,
         initialLayoutMap: t.initialLayoutMap,
@@ -1008,7 +1008,7 @@ function Le(e) {
       break;
     }
     default: {
-      const o = He(e, n);
+      const o = $e(e, n);
       o.length === 0 ? t.state !== "inactive" && E({
         interactionState: { state: "inactive" }
       }) : E({
@@ -1054,7 +1054,7 @@ function Ce(e) {
   }
   return o;
 }
-function St(e, t, n) {
+function vt(e, t, n) {
   const o = n[0];
   if (!o)
     return;
@@ -1072,7 +1072,7 @@ function St(e, t, n) {
     r.id
   );
 }
-function xt(e, t) {
+function St(e, t) {
   if (Object.keys(e).length !== Object.keys(t).length)
     return !1;
   for (const o in e)
@@ -1080,7 +1080,7 @@ function xt(e, t) {
       return !1;
   return !0;
 }
-function zt(e) {
+function xt(e) {
   let t = !0;
   const n = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), r = new ResizeObserver((p) => {
     for (const f of p) {
@@ -1096,7 +1096,7 @@ function zt(e) {
                 layout: b,
                 panelConstraints: g
               });
-              return !x.defaultLayoutDeferred && U(b, L) && xt(
+              return !x.defaultLayoutDeferred && U(b, L) && St(
                 x.derivedPanelConstraints,
                 g
               ) ? S : {
@@ -1112,7 +1112,7 @@ function zt(e) {
           });
         }
       } else
-        St(e, y, d);
+        vt(e, y, d);
     }
   });
   r.observe(e.element), e.panels.forEach((p) => {
@@ -1127,7 +1127,7 @@ function zt(e) {
   const u = e.inMemoryLayouts[i] ?? s ?? Ce(l), c = A({
     layout: u,
     panelConstraints: l
-  }), h = Ge(e), m = E((p) => {
+  }), h = ke(e), m = E((p) => {
     const f = /* @__PURE__ */ new Map();
     return h.forEach((d) => {
       d.separator && f.set(d.separator, d.panels);
@@ -1157,15 +1157,15 @@ function zt(e) {
   };
 }
 function ue(e) {
-  const t = Xe();
+  const t = Ve();
   return `${e ?? t}`;
 }
-const N = typeof window < "u" ? Ye : Re;
+const N = typeof window < "u" ? Ke : Re;
 function ce(e) {
   const t = O(e);
   return N(() => {
     t.current = e;
-  }, [e]), Ee((n) => t.current?.(n), [t]);
+  }, [e]), Xe((n) => t.current?.(n), [t]);
 }
 function fe(...e) {
   return ce((t) => {
@@ -1184,28 +1184,28 @@ function fe(...e) {
     });
   });
 }
-function wt(e) {
+function zt(e) {
   const t = O({ ...e });
   return N(() => {
     for (const n in e)
       t.current[n] = e[n];
   }, [e]), t.current;
 }
-const je = "--react-resizable-panels--panel--pointer-events";
-function We(e, t) {
+const Fe = "--react-resizable-panels--panel--pointer-events";
+function He(e, t) {
   const n = e.replace(/[^a-zA-Z0-9\-_]/g, ""), o = t.replace(/[^a-zA-Z0-9\-_]/g, "");
   return `--react-resizable-panels--${n}--${o}`;
 }
-const Be = qe(null);
-function bt(e, t) {
+const je = Ye(null);
+function wt(e, t) {
   const n = O({
     getLayout: () => ({}),
-    setLayout: lt
+    setLayout: at
   });
-  Me(t, () => n.current, []), N(() => {
+  Ee(t, () => n.current, []), N(() => {
     Object.assign(
       n.current,
-      Ne({ groupId: e })
+      _e({ groupId: e })
     );
   });
 }
@@ -1229,16 +1229,16 @@ function Gt({
     lastExpandedPanelSizes: {},
     layouts: {}
   }), J = fe(S, a);
-  bt(f, l);
-  const Q = ke(
+  wt(f, l);
+  const Q = se(
     () => ({
       id: f,
       orientation: u,
-      registerPanel: (w) => (L((M) => se(u, [...M, w])), () => {
+      registerPanel: (w) => (L((M) => ae(u, [...M, w])), () => {
         L((M) => M.filter((F) => F !== w));
       }),
       registerSeparator: (w) => (q(
-        (M) => se(u, [...M, w])
+        (M) => ae(u, [...M, w])
       ), () => {
         q(
           (M) => M.filter((F) => F !== w)
@@ -1246,7 +1246,7 @@ function Gt({
       })
     }),
     [f, u]
-  ), $ = wt({
+  ), $ = zt({
     defaultLayout: n,
     disableCursor: o
   }), V = O(null);
@@ -1266,12 +1266,12 @@ function Gt({
       separators: C
     };
     V.current = w;
-    const M = zt(w), he = D().mountedGroups.get(w);
+    const M = xt(w), he = D().mountedGroups.get(w);
     if (he) {
       const { defaultLayoutDeferred: H, derivedPanelConstraints: j, layout: ee } = he;
       !H && j.length > 0 && (g(ee), p?.(ee));
     }
-    const Ue = _.addListener(
+    const We = _.addListener(
       "interactionStateChange",
       (H) => {
         switch (H.state) {
@@ -1289,20 +1289,20 @@ function Gt({
           }
         }
       }
-    ), Ve = _.addListener(
+    ), Be = _.addListener(
       "mountedGroupsChange",
       (H) => {
         const j = H.get(w);
         if (j) {
-          const { defaultLayoutDeferred: ee, derivedPanelConstraints: Ke, layout: me } = j;
-          if (ee || Ke.length === 0)
+          const { defaultLayoutDeferred: ee, derivedPanelConstraints: Ue, layout: me } = j;
+          if (ee || Ue.length === 0)
             return;
           g(me), p?.(me);
         }
       }
     );
     return () => {
-      V.current = null, M(), Ue(), Ve();
+      V.current = null, M(), We(), Be();
     };
   }, [
     r,
@@ -1318,13 +1318,13 @@ function Gt({
     w && (w.defaultLayout = n, w.disableCursor = !!o);
   });
   const pe = {
-    [je]: d ? "none" : void 0
+    [Fe]: d ? "none" : void 0
   };
   for (const w in x) {
-    const M = We(f, w), F = x[w];
+    const M = He(f, w), F = x[w];
     pe[M] = F;
   }
-  return /* @__PURE__ */ K(Be.Provider, { value: Q, children: /* @__PURE__ */ K(
+  return /* @__PURE__ */ K(je.Provider, { value: Q, children: /* @__PURE__ */ K(
     "div",
     {
       ...h,
@@ -1345,43 +1345,42 @@ function Gt({
     }
   ) });
 }
-function ae(e) {
-  return `react-resizable-panels:${e}`;
+function bt(e, t = 10) {
+  let n = null;
+  return (o) => {
+    n !== null && clearTimeout(n), n = setTimeout(() => {
+      e(o);
+    }, t);
+  };
 }
-function Lt({
-  id: e,
-  layout: t,
-  storage: n
-}) {
-  try {
-    const o = ae(e);
-    n.setItem(o, JSON.stringify(t));
-  } catch (o) {
-    console.error(o);
-  }
+function Lt(e) {
+  return `react-resizable-panels:${e}`;
 }
 function Dt({
-  groupId: e,
-  storage: t
+  debounceSaveMs: e = 100,
+  groupId: t,
+  storage: n
 }) {
-  const n = Ze(
+  const o = Lt(t), r = qe(
     Pt,
-    () => t.getItem(ae(e)),
-    () => t.getItem(ae(e))
-  ), o = ke(
-    () => n ? JSON.parse(n) : void 0,
-    [n]
-  ), r = Ee(
-    (a) => Lt({
-      id: e,
-      layout: a,
-      storage: t
-    }),
-    [e, t]
-  );
+    () => n.getItem(o),
+    () => n.getItem(o)
+  ), a = se(
+    () => r ? JSON.parse(r) : void 0,
+    [r]
+  ), l = se(() => {
+    const i = (s) => {
+      try {
+        n.setItem(o, JSON.stringify(s));
+      } catch (u) {
+        console.error(u);
+      }
+    };
+    return e > 0 ? bt(i, e) : i;
+  }, [e, n, o]);
   return {
-    defaultLayout: o,
-    onLayoutChange: r
+    defaultLayout: a,
+    onLayoutChange: l
   };
 }
 function Pt() {
@@ -1395,7 +1394,7 @@ function Tt() {
   return O(null);
 }
 function de() {
-  const e = Je(Be);
+  const e = Ze(je);
   return z(
     e,
     "Group Context not found; did you render a Panel or Separator outside of a Group?"
@@ -1522,7 +1521,7 @@ function Rt(e, t) {
     isCollapsed: () => !1,
     resize: ie
   });
-  Me(t, () => o.current, []), N(() => {
+  Ee(t, () => o.current, []), N(() => {
     Object.assign(
       o.current,
       Ct({ groupId: n, panelId: e })
@@ -1575,7 +1574,7 @@ function _t({
     b,
     x
   ]), Rt(f, c);
-  const L = We(S, f);
+  const L = He(S, f);
   return /* @__PURE__ */ K(
     "div",
     {
@@ -1593,7 +1592,7 @@ function _t({
         overflow: "hidden",
         // Disable pointer events inside of a panel during resize
         // This avoid edge cases like nested iframes
-        pointerEvents: `var(${je})`
+        pointerEvents: `var(${Fe})`
       },
       children: /* @__PURE__ */ K(
         "div",