react-resizable-panels 4.0.12 → 4.0.13

package/dist/react-resizable-panels.d.ts

@@ -323,21 +323,28 @@ export declare type SeparatorProps = HTMLAttributes<HTMLDivElement> & {
 
 export declare type SizeUnit = "px" | "%" | "em" | "rem" | "vh" | "vw";
 
-export declare function useDefaultLayout({ debounceSaveMs, groupId, storage }: {
+export declare function useDefaultLayout({ debounceSaveMs, storage, ...rest }: {
     /**
      * Debounce save operation by the specified number of milliseconds; defaults to 100ms
      */
     debounceSaveMs?: number;
+    /**
+     * Storage implementation; supports localStorage, sessionStorage, and custom implementations
+     * Refer to documentation site for example integrations.
+     */
+    storage: LayoutStorage;
+} & ({
     /**
      * Group id; must be unique in order for layouts to be saved separately.
+     * @deprecated Use the {@link id} param instead
      */
     groupId: string;
+} | {
     /**
-     * Storage implementation; supports localStorage, sessionStorage, and custom implementations
-     * Refer to documentation site for example integrations.
+     * Unique layout identifier.
      */
-    storage: LayoutStorage;
-}): {
+    id: string;
+})): {
     defaultLayout: Layout | undefined;
     onLayoutChange: (layout: Layout) => void | undefined;
 };

package/dist/react-resizable-panels.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as K } from "react/jsx-runtime";
-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";
+import { useId as Ve, useLayoutEffect as Ke, useEffect as Re, useRef as O, useCallback as Xe, createContext as Ye, useImperativeHandle as Ee, useState as I, useMemo as se, useSyncExternalStore as qe, useContext as Ze } from "react";
 function z(e, t = "Assertion error") {
   if (!e)
     throw Error(t);
@@ -52,7 +52,7 @@ function et({
   }
   return z(r, "No rect found"), r;
 }
-function ke(e) {
+function Ie(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 }))
@@ -73,12 +73,12 @@ function ke(e) {
               m.bottom,
               m.width,
               0
-            ), y = n === "horizontal" ? new DOMRect(p.left, p.top, 0, p.height) : new DOMRect(p.left, p.top, p.width, 0);
+            ), g = n === "horizontal" ? new DOMRect(p.left, p.top, 0, p.height) : new DOMRect(p.left, p.top, p.width, 0);
             switch (u.length) {
               case 0: {
                 f = [
                   d,
-                  y
+                  g
                 ];
                 break;
               }
@@ -90,7 +90,7 @@ function ke(e) {
                 });
                 f = [
                   v,
-                  S === m ? y : d
+                  S === m ? g : d
                 ];
                 break;
               }
@@ -192,10 +192,10 @@ function te({
   }
   return o;
 }
-function I(e) {
+function k(e) {
   return parseFloat(e.toFixed(3));
 }
-function ye(e) {
+function ge(e) {
   const { panels: t } = e, n = B({ group: e });
   return n === 0 ? t.map((o) => ({
     collapsedSize: 0,
@@ -213,7 +213,7 @@ function ye(e) {
         panelElement: r,
         styleProp: a.collapsedSize
       });
-      l = I(c / n * 100);
+      l = k(c / n * 100);
     }
     let i;
     if (a.defaultSize) {
@@ -222,7 +222,7 @@ function ye(e) {
         panelElement: r,
         styleProp: a.defaultSize
       });
-      i = I(c / n * 100);
+      i = k(c / n * 100);
     }
     let s = 0;
     if (a.minSize) {
@@ -231,7 +231,7 @@ function ye(e) {
         panelElement: r,
         styleProp: a.minSize
       });
-      s = I(c / n * 100);
+      s = k(c / n * 100);
     }
     let u = 100;
     if (a.maxSize) {
@@ -240,7 +240,7 @@ function ye(e) {
         panelElement: r,
         styleProp: a.maxSize
       });
-      u = I(c / n * 100);
+      u = k(c / n * 100);
     }
     return {
       collapsedSize: l,
@@ -292,7 +292,7 @@ class st {
   }
 }
 function P(e, t, n = 0) {
-  return Math.abs(I(e) - I(t)) <= n;
+  return Math.abs(k(e) - k(t)) <= n;
 }
 let R = {
   cursorFlags: 0,
@@ -332,7 +332,7 @@ function E(e) {
   }), _.emit("mountedGroupsChange", R.mountedGroups)), R;
 }
 const at = (e) => e, ie = () => {
-}, Ie = 1, Ge = 2, De = 4, Oe = 8, ge = {
+}, ke = 1, Ge = 2, De = 4, Oe = 8, ye = {
   coarse: 10,
   precise: 5
 };
@@ -363,7 +363,7 @@ function lt({
     return null;
   switch (n) {
     case "active": {
-      const a = (e & Ie) !== 0, l = (e & Ge) !== 0, i = (e & De) !== 0, s = (e & Oe) !== 0;
+      const a = (e & ke) !== 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";
@@ -429,7 +429,7 @@ function W({
       X(t, l) < 0 ? t = n : t = a;
     } else
       t = a;
-  return t = Math.min(r, t), t = I(t), t;
+  return t = Math.min(r, t), t = k(t), t;
 }
 function Y({
   delta: e,
@@ -452,7 +452,7 @@ function Y({
         `Panel constraints not found for index ${f}`
       );
       const {
-        collapsedSize: y = 0,
+        collapsedSize: g = 0,
         collapsible: v,
         minSize: S = 0
       } = d;
@@ -461,9 +461,9 @@ function Y({
         if (z(
           x != null,
           `Previous layout not found for panel index ${f}`
-        ), P(x, y)) {
-          const g = S - x;
-          X(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
+        ), P(x, g)) {
+          const y = S - x;
+          X(y, Math.abs(e)) > 0 && (e = e < 0 ? 0 - y : y);
         }
       }
     }
@@ -474,7 +474,7 @@ function Y({
         `No panel constraints found for index ${f}`
       );
       const {
-        collapsedSize: y = 0,
+        collapsedSize: g = 0,
         collapsible: v,
         minSize: S = 0
       } = d;
@@ -484,40 +484,40 @@ function Y({
           x != null,
           `Previous layout not found for panel index ${f}`
         ), P(x, S)) {
-          const g = x - y;
-          X(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
+          const y = x - g;
+          X(y, Math.abs(e)) > 0 && (e = e < 0 ? 0 - y : y);
         }
       }
     }
   }
   {
     const f = e < 0 ? 1 : -1;
-    let d = e < 0 ? c : u, y = 0;
+    let d = e < 0 ? c : u, g = 0;
     for (; ; ) {
       const S = l[d];
       z(
         S != null,
         `Previous layout not found for panel index ${d}`
       );
-      const g = W({
+      const y = W({
         panelConstraints: n[d],
         size: 100
       }) - S;
-      if (y += g, d += f, d < 0 || d >= n.length)
+      if (g += y, d += f, d < 0 || d >= n.length)
         break;
     }
-    const v = Math.min(Math.abs(e), Math.abs(y));
+    const v = Math.min(Math.abs(e), Math.abs(g));
     e = e < 0 ? 0 - v : v;
   }
   {
     let d = e < 0 ? u : c;
     for (; d >= 0 && d < n.length; ) {
-      const y = Math.abs(e) - Math.abs(h), v = l[d];
+      const g = Math.abs(e) - Math.abs(h), v = l[d];
       z(
         v != null,
         `Previous layout not found for panel index ${d}`
       );
-      const S = v - y, x = W({
+      const S = v - g, x = W({
         panelConstraints: n[d],
         size: S
       });
@@ -536,25 +536,25 @@ function Y({
       d != null,
       `Previous layout not found for panel index ${f}`
     );
-    const y = d + h, v = W({
+    const g = d + h, v = W({
       panelConstraints: n[f],
-      size: y
+      size: g
     });
-    if (s[f] = v, !P(v, y)) {
-      let S = y - v, g = e < 0 ? c : u;
-      for (; g >= 0 && g < n.length; ) {
-        const b = s[g];
+    if (s[f] = v, !P(v, g)) {
+      let S = g - v, y = e < 0 ? c : u;
+      for (; y >= 0 && y < n.length; ) {
+        const b = s[y];
         z(
           b != null,
-          `Previous layout not found for panel index ${g}`
+          `Previous layout not found for panel index ${y}`
         );
         const L = b + S, C = W({
-          panelConstraints: n[g],
+          panelConstraints: n[y],
           size: L
         });
-        if (P(b, C) || (S -= C - b, s[g] = C), P(S, 0))
+        if (P(b, C) || (S -= C - b, s[y] = C), P(S, 0))
           break;
-        e > 0 ? g-- : g++;
+        e > 0 ? y-- : y++;
       }
     }
   }
@@ -565,7 +565,7 @@ function Y({
   if (!P(m, 100, 0.1))
     return r;
   const p = Object.keys(r);
-  return s.reduce((f, d, y) => (f[p[y]] = d, f), {});
+  return s.reduce((f, d, g) => (f[p[g]] = d, f), {});
 }
 function U(e, t) {
   if (Object.keys(e).length !== Object.keys(t).length)
@@ -590,16 +590,16 @@ function Te({
     r ? h === "horizontal" ? p = (e.clientX - r.x) / u * 100 : p = (e.clientY - r.y) / u * 100 : h === "horizontal" ? p = e.clientX < 0 ? -100 : 100 : p = e.clientY < 0 ? -100 : 100;
     const f = n.get(s), {
       defaultLayoutDeferred: d,
-      derivedPanelConstraints: y,
+      derivedPanelConstraints: g,
       layout: v,
       separatorToPanels: S
     } = o.get(s) ?? { defaultLayoutDeferred: !1 };
-    if (y && f && v && S) {
+    if (g && f && v && S) {
       const x = Y({
         delta: p,
         initialLayout: f,
-        panelConstraints: y,
-        pivotIndices: i.panels.map((g) => m.indexOf(g)),
+        panelConstraints: g,
+        pivotIndices: i.panels.map((y) => m.indexOf(y)),
         prevLayout: v,
         trigger: "mouse-or-touch"
       });
@@ -607,7 +607,7 @@ function Te({
         if (p !== 0 && !c)
           switch (h) {
             case "horizontal": {
-              a |= p < 0 ? Ie : Ge;
+              a |= p < 0 ? ke : Ge;
               break;
             }
             case "vertical": {
@@ -618,12 +618,12 @@ function Te({
       } else {
         l.set(i.group, {
           defaultLayoutDeferred: d,
-          derivedPanelConstraints: y,
+          derivedPanelConstraints: g,
           layout: x,
           separatorToPanels: S
         });
-        const g = i.group.panels.map(({ id: b }) => b).join(",");
-        i.group.inMemoryLayouts[g] = x;
+        const y = i.group.panels.map(({ id: b }) => b).join(",");
+        i.group.inMemoryLayouts[y] = x;
       }
     }
   }), E({
@@ -920,10 +920,10 @@ function Ne(e) {
   const { parentNode: t } = e;
   return t && t instanceof ShadowRoot ? t.host : t;
 }
-function yt(e, t) {
+function gt(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 gt({
+function yt({
   groupElement: e,
   hitRegion: t,
   pointerEventTarget: n
@@ -935,7 +935,7 @@ function gt({
     for (; o; ) {
       if (o.contains(e))
         return !0;
-      if (yt(o.getBoundingClientRect(), t))
+      if (gt(o.getBoundingClientRect(), t))
         return !1;
       o = o.parentElement;
     }
@@ -947,11 +947,11 @@ function $e(e, t) {
   return t.forEach((o, r) => {
     if (r.disabled)
       return;
-    const a = ft() ? ge.coarse : ge.precise, l = ke(r), i = ct(r.orientation, l, {
+    const a = ft() ? ye.coarse : ye.precise, l = Ie(r), i = ct(r.orientation, l, {
       x: e.clientX,
       y: e.clientY
     });
-    i && i.distance.x <= a && i.distance.y <= a && gt({
+    i && i.distance.x <= a && i.distance.y <= a && yt({
       groupElement: r.element,
       hitRegion: i.hitRegion.rect,
       pointerEventTarget: e.target
@@ -1042,13 +1042,13 @@ function Ce(e) {
   for (const a of e)
     if (a.defaultSize !== void 0) {
       t++;
-      const l = I(a.defaultSize);
+      const l = k(a.defaultSize);
       n += l, o[a.panelId] = l;
     } else
       o[a.panelId] = void 0;
   const r = e.length - t;
   if (r !== 0) {
-    const a = I((100 - n) / r);
+    const a = k((100 - n) / r);
     for (const l of e)
       l.defaultSize === void 0 && (o[l.panelId] = a);
   }
@@ -1064,7 +1064,7 @@ function vt(e, t, n) {
   const a = B({ group: e });
   r.onResize(
     {
-      asPercentage: I(
+      asPercentage: k(
         o.inlineSize / a * 100
       ),
       inPixels: o.inlineSize
@@ -1084,25 +1084,25 @@ function xt(e) {
   let t = !0;
   const n = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), r = new ResizeObserver((p) => {
     for (const f of p) {
-      const { borderBoxSize: d, target: y } = f;
-      if (y === e.element) {
+      const { borderBoxSize: d, target: g } = f;
+      if (g === e.element) {
         if (t) {
           if (B({ group: e }) === 0)
             return;
           E((S) => {
             const x = S.mountedGroups.get(e);
             if (x) {
-              const g = ye(e), b = x.defaultLayoutDeferred ? Ce(g) : x.layout, L = A({
+              const y = ge(e), b = x.defaultLayoutDeferred ? Ce(y) : x.layout, L = A({
                 layout: b,
-                panelConstraints: g
+                panelConstraints: y
               });
               return !x.defaultLayoutDeferred && U(b, L) && St(
                 x.derivedPanelConstraints,
-                g
+                y
               ) ? S : {
                 mountedGroups: new Map(S.mountedGroups).set(e, {
                   defaultLayoutDeferred: !1,
-                  derivedPanelConstraints: g,
+                  derivedPanelConstraints: y,
                   layout: L,
                   separatorToPanels: x.separatorToPanels
                 })
@@ -1112,7 +1112,7 @@ function xt(e) {
           });
         }
       } else
-        vt(e, y, d);
+        vt(e, g, d);
     }
   });
   r.observe(e.element), e.panels.forEach((p) => {
@@ -1121,13 +1121,13 @@ function xt(e) {
       `Panel ids must be unique; id "${p.id}" was used more than once`
     ), n.add(p.id), p.onResize && r.observe(p.element);
   });
-  const a = B({ group: e }), l = ye(e), i = e.panels.map(({ id: p }) => p).join(",");
+  const a = B({ group: e }), l = ge(e), i = e.panels.map(({ id: p }) => p).join(",");
   let s = e.defaultLayout;
   s && e.panels.length !== Object.keys(s).length && (s = void 0);
   const u = e.inMemoryLayouts[i] ?? s ?? Ce(l), c = A({
     layout: u,
     panelConstraints: l
-  }), h = ke(e), m = E((p) => {
+  }), h = Ie(e), m = E((p) => {
     const f = /* @__PURE__ */ new Map();
     return h.forEach((d) => {
       d.separator && f.set(d.separator, d.panels);
@@ -1148,8 +1148,8 @@ function xt(e) {
   }), m.mountedGroups.size === 1 && (window.addEventListener("pointerdown", be), window.addEventListener("pointermove", Le), window.addEventListener("pointerup", Pe)), function() {
     t = !1;
     const f = E((d) => {
-      const y = new Map(d.mountedGroups);
-      return y.delete(e), { mountedGroups: y };
+      const g = new Map(d.mountedGroups);
+      return g.delete(e), { mountedGroups: g };
     });
     e.element.removeEventListener("pointerleave", ve), e.separators.forEach((d) => {
       d.element.removeEventListener("keydown", Se);
@@ -1225,7 +1225,7 @@ function Gt({
 }) {
   const m = O({}), p = ce((w) => {
     U(m.current, w) || (m.current = w, s?.(w));
-  }), f = ue(i), [d, y] = k(!1), [v, S] = k(null), [x, g] = k(n ?? {}), [b, L] = k([]), [C, q] = k([]), Z = O({
+  }), f = ue(i), [d, g] = I(!1), [v, S] = I(null), [x, y] = I(n ?? {}), [b, L] = I([]), [C, q] = I([]), Z = O({
     lastExpandedPanelSizes: {},
     layouts: {}
   }), J = fe(S, a);
@@ -1269,14 +1269,14 @@ function Gt({
     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));
+      !H && j.length > 0 && (y(ee), p?.(ee));
     }
     const We = _.addListener(
       "interactionStateChange",
       (H) => {
         switch (H.state) {
           case "active": {
-            y(
+            g(
               H.hitRegions.some(
                 (j) => j.group === w
               )
@@ -1284,7 +1284,7 @@ function Gt({
             break;
           }
           default: {
-            y(!1);
+            g(!1);
             break;
           }
         }
@@ -1297,7 +1297,7 @@ function Gt({
           const { defaultLayoutDeferred: ee, derivedPanelConstraints: Ue, layout: me } = j;
           if (ee || Ue.length === 0)
             return;
-          g(me), p?.(me);
+          y(me), p?.(me);
         }
       }
     );
@@ -1358,29 +1358,29 @@ function Lt(e) {
 }
 function Dt({
   debounceSaveMs: e = 100,
-  groupId: t,
-  storage: n
+  storage: t,
+  ...n
 }) {
-  const o = Lt(t), r = qe(
+  const o = "id" in n ? n.id : n.groupId, r = Lt(o), a = qe(
     Pt,
-    () => n.getItem(o),
-    () => n.getItem(o)
-  ), a = se(
-    () => r ? JSON.parse(r) : void 0,
-    [r]
-  ), l = se(() => {
-    const i = (s) => {
+    () => t.getItem(r),
+    () => t.getItem(r)
+  ), l = se(
+    () => a ? JSON.parse(a) : void 0,
+    [a]
+  ), i = se(() => {
+    const s = (u) => {
       try {
-        n.setItem(o, JSON.stringify(s));
-      } catch (u) {
-        console.error(u);
+        t.setItem(r, JSON.stringify(u));
+      } catch (c) {
+        console.error(c);
       }
     };
-    return e > 0 ? bt(i, e) : i;
-  }, [e, n, o]);
+    return e > 0 ? bt(s, e) : s;
+  }, [e, t, r]);
   return {
-    defaultLayout: a,
-    onLayoutChange: l
+    defaultLayout: l,
+    onLayoutChange: i
   };
 }
 function Pt() {
@@ -1388,7 +1388,7 @@ function Pt() {
   };
 }
 function Ot() {
-  return k(null);
+  return I(null);
 }
 function Tt() {
   return O(null);
@@ -1451,7 +1451,7 @@ function Ct({
       group: h,
       layout: m,
       separatorToPanels: p
-    } = n(), f = h.panels.findIndex((S) => S.id === t), d = f === h.panels.length - 1, y = Y({
+    } = n(), f = h.panels.findIndex((S) => S.id === t), d = f === h.panels.length - 1, g = Y({
       delta: d ? s - i : i - s,
       initialLayout: m,
       panelConstraints: c,
@@ -1459,7 +1459,7 @@ function Ct({
       prevLayout: m,
       trigger: "imperative-api"
     }), v = A({
-      layout: y,
+      layout: g,
       panelConstraints: c
     });
     U(m, v) || E((S) => ({
@@ -1497,7 +1497,7 @@ function Ct({
         switch (typeof i) {
           case "number": {
             const { group: c } = n(), h = B({ group: c });
-            u = I(i / h * 100);
+            u = k(i / h * 100);
             break;
           }
           case "string": {
@@ -1543,7 +1543,7 @@ function _t({
   style: h,
   ...m
 }) {
-  const p = !!l, f = ue(l), [d, y] = k(null), v = fe(y, a), { id: S, registerPanel: x } = de(), g = u !== null, b = ce((C) => {
+  const p = !!l, f = ue(l), [d, g] = I(null), v = fe(g, a), { id: S, registerPanel: x } = de(), y = u !== null, b = ce((C) => {
     u?.(C, l);
   });
   N(() => {
@@ -1552,7 +1552,7 @@ function _t({
         element: d,
         id: f,
         idIsStable: p,
-        onResize: g ? b : void 0,
+        onResize: y ? b : void 0,
         panelConstraints: {
           collapsedSize: n,
           collapsible: o,
@@ -1566,7 +1566,7 @@ function _t({
     o,
     r,
     d,
-    g,
+    y,
     f,
     p,
     i,
@@ -1626,7 +1626,7 @@ const Et = {
   margin: "unset"
 };
 function At() {
-  return k(null);
+  return I(null);
 }
 function Nt() {
   return O(null);
@@ -1680,17 +1680,17 @@ function $t({
   style: r,
   ...a
 }) {
-  const l = ue(o), [i, s] = k({}), [u, c] = k("inactive"), [h, m] = k(null), p = fe(m, n), {
+  const l = ue(o), [i, s] = I({}), [u, c] = I("inactive"), [h, m] = I(null), p = fe(m, n), {
     id: f,
     orientation: d,
-    registerSeparator: y
+    registerSeparator: g
   } = de(), v = d === "horizontal" ? "vertical" : "horizontal";
   return N(() => {
     if (h !== null) {
       const S = {
         element: h,
         id: l
-      }, x = y(S), g = _.addListener(
+      }, x = g(S), y = _.addListener(
         "interactionStateChange",
         (L) => {
           c(
@@ -1723,10 +1723,10 @@ function $t({
         }
       );
       return () => {
-        g(), b(), x();
+        y(), b(), x();
       };
     }
-  }, [h, f, l, y]), /* @__PURE__ */ K(
+  }, [h, f, l, g]), /* @__PURE__ */ K(
     "div",
     {
       ...a,