react-resizable-panels 4.7.3 → 4.7.5

package/dist/react-resizable-panels.js

@@ -136,14 +136,14 @@ function L(e, t = "Assertion error") {
 }
 function Se(e, t) {
   return Array.from(t).sort(
-    e === "horizontal" ? bt : xt
+    e === "horizontal" ? xt : bt
   );
 }
-function bt(e, t) {
+function xt(e, t) {
   const n = e.element.offsetLeft - t.element.offsetLeft;
   return n !== 0 ? n : e.element.offsetWidth - t.element.offsetWidth;
 }
-function xt(e, t) {
+function bt(e, t) {
   const n = e.element.offsetTop - t.element.offsetTop;
   return n !== 0 ? n : e.element.offsetHeight - t.element.offsetHeight;
 }
@@ -185,19 +185,19 @@ function Pt() {
 function Ye(e) {
   const { element: t, orientation: n, panels: o, separators: i } = e, s = Se(
     n,
-    Array.from(t.children).filter(Xe).map((x) => ({ element: x }))
-  ).map(({ element: x }) => x), l = [];
+    Array.from(t.children).filter(Xe).map((b) => ({ element: b }))
+  ).map(({ element: b }) => b), l = [];
   let r = !1, a = !1, u = -1, c = -1, m = 0, d, v = [];
   {
-    let x = -1;
+    let b = -1;
     for (const f of s)
-      f.hasAttribute("data-panel") && (x++, f.ariaDisabled === null && (m++, u === -1 && (u = x), c = x));
+      f.hasAttribute("data-panel") && (b++, f.ariaDisabled === null && (m++, u === -1 && (u = b), c = b));
   }
   if (m > 1) {
-    let x = -1;
+    let b = -1;
     for (const f of s)
       if (f.hasAttribute("data-panel")) {
-        x++;
+        b++;
         const h = o.find(
           (g) => g.element === f
         );
@@ -226,14 +226,14 @@ function Ye(e) {
                   break;
                 }
                 case 1: {
-                  const P = v[0], R = wt({
+                  const P = v[0], M = wt({
                     orientation: n,
                     rects: [g, y],
                     targetRect: P.element.getBoundingClientRect()
                   });
                   z = [
                     P,
-                    R === g ? p : S
+                    M === g ? p : S
                   ];
                   break;
                 }
@@ -277,8 +277,8 @@ function Ye(e) {
                   p.height + C
                 );
               }
-              const R = x <= u || x > c;
-              !r && !R && l.push({
+              const M = b <= u || b > c;
+              !r && !M && l.push({
                 group: e,
                 groupSize: Q({ group: e }),
                 panels: [d, h],
@@ -505,11 +505,11 @@ function Ot(e, t) {
       return !1;
   return !0;
 }
-function I(e, t, n = 0) {
+function k(e, t, n = 0) {
   return Math.abs(D(e) - D(t)) <= n;
 }
 function G(e, t) {
-  return I(e, t) ? 0 : e > t ? 1 : -1;
+  return k(e, t) ? 0 : e > t ? 1 : -1;
 }
 function Y({
   overrideDisabledPanels: e,
@@ -542,7 +542,7 @@ function se({
   prevLayout: i,
   trigger: s
 }) {
-  if (I(e, 0))
+  if (k(e, 0))
     return t;
   const l = s === "imperative-api", r = Object.values(t), a = Object.values(i), u = [...r], [c, m] = o;
   L(c != null, "Invalid first pivot index"), L(m != null, "Invalid second pivot index");
@@ -565,7 +565,7 @@ function se({
           if (L(
             S != null,
             `Previous layout not found for panel index ${f}`
-          ), I(S, g)) {
+          ), k(S, g)) {
             const p = z - S;
             G(p, Math.abs(e)) > 0 && (e = e < 0 ? 0 - p : p);
           }
@@ -587,7 +587,7 @@ function se({
           if (L(
             S != null,
             `Previous layout not found for panel index ${f}`
-          ), I(S, z)) {
+          ), k(S, z)) {
             const p = S - g;
             G(p, Math.abs(e)) > 0 && (e = e < 0 ? 0 - p : p);
           }
@@ -604,11 +604,11 @@ function se({
       const g = r[f], { collapsible: y, collapsedSize: z, minSize: S } = h;
       if (y && G(g, S) < 0)
         if (e > 0) {
-          const p = S - z, P = p / 2, R = g + e;
-          G(R, S) < 0 && (e = G(e, P) <= 0 ? 0 : p);
+          const p = S - z, P = p / 2, M = g + e;
+          G(M, S) < 0 && (e = G(e, P) <= 0 ? 0 : p);
         } else {
-          const p = S - z, P = 100 - p / 2, R = g - e;
-          G(R, S) < 0 && (e = G(100 + e, P) > 0 ? 0 : -p);
+          const p = S - z, P = 100 - p / 2, M = g - e;
+          G(M, S) < 0 && (e = G(100 + e, P) > 0 ? 0 : -p);
         }
       break;
     }
@@ -648,7 +648,7 @@ function se({
         prevSize: y,
         size: z
       });
-      if (!I(y, S) && (d += y - S, u[h] = S, d.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
+      if (!k(y, S) && (d += y - S, u[h] = S, d.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
         numeric: !0
       }) >= 0))
         break;
@@ -669,7 +669,7 @@ function se({
       prevSize: h,
       size: g
     });
-    if (u[f] = y, !I(y, g)) {
+    if (u[f] = y, !k(y, g)) {
       let z = g - y, p = e < 0 ? m : c;
       for (; p >= 0 && p < n.length; ) {
         const P = u[p];
@@ -677,13 +677,13 @@ function se({
           P != null,
           `Previous layout not found for panel index ${p}`
         );
-        const R = P + z, C = Y({
+        const M = P + z, C = Y({
           overrideDisabledPanels: l,
           panelConstraints: n[p],
           prevSize: P,
-          size: R
+          size: M
         });
-        if (I(P, C) || (z -= C - P, u[p] = C), I(z, 0))
+        if (k(P, C) || (z -= C - P, u[p] = C), k(z, 0))
           break;
         e > 0 ? p-- : p++;
       }
@@ -693,10 +693,10 @@ function se({
     (f, h) => h + f,
     0
   );
-  if (!I(v, 100, 0.1))
+  if (!k(v, 100, 0.1))
     return i;
-  const x = Object.keys(i);
-  return u.reduce((f, h, g) => (f[x[g]] = h, f), {});
+  const b = Object.keys(i);
+  return u.reduce((f, h, g) => (f[b[g]] = h, f), {});
 }
 function j(e, t) {
   if (Object.keys(e).length !== Object.keys(t).length)
@@ -718,7 +718,7 @@ function B({
     throw Error(
       `Invalid ${t.length} panel layout: ${o.map((r) => `${r}%`).join(", ")}`
     );
-  if (!I(i, 100) && o.length > 0)
+  if (!k(i, 100) && o.length > 0)
     for (let r = 0; r < t.length; r++) {
       const a = o[r];
       L(a != null, `No layout data found for index ${r}`);
@@ -739,7 +739,7 @@ function B({
     });
     u != c && (s += u - c, o[r] = c);
   }
-  if (!I(s, 0))
+  if (!k(s, 0))
     for (let r = 0; r < t.length; r++) {
       const a = o[r];
       L(a != null, `No layout data found for index ${r}`);
@@ -749,7 +749,7 @@ function B({
         prevSize: a,
         size: u
       });
-      if (a !== c && (s -= c - a, o[r] = c, I(s, 0)))
+      if (a !== c && (s -= c - a, o[r] = c, k(s, 0)))
         break;
     }
   const l = Object.keys(e);
@@ -808,7 +808,7 @@ function et({
       group: m,
       groupSize: d,
       layout: v,
-      separatorToPanels: x
+      separatorToPanels: b
     } = n(), f = m.panels.findIndex((z) => z.id === t), h = f === m.panels.length - 1, g = se({
       delta: h ? a - r : r - a,
       initialLayout: v,
@@ -825,7 +825,7 @@ function et({
       derivedPanelConstraints: c,
       groupSize: d,
       layout: y,
-      separatorToPanels: x
+      separatorToPanels: b
     });
   };
   return {
@@ -849,7 +849,7 @@ function et({
     },
     isCollapsed: () => {
       const { collapsible: r, collapsedSize: a } = o(), u = s();
-      return r && I(a, u);
+      return r && k(a, u);
     },
     resize: (r) => {
       const { group: a } = n(), { element: u } = i(), c = Q({ group: a }), m = te({
@@ -1111,7 +1111,7 @@ function _t({
   }
 }
 const _e = /* @__PURE__ */ new WeakMap();
-function be(e) {
+function xe(e) {
   if (e.defaultView === null || e.defaultView === void 0)
     return;
   let { prevStyle: t, styleSheet: n } = _e.get(e) ?? {};
@@ -1151,7 +1151,7 @@ function st({
 }) {
   let r = 0;
   n.forEach((u) => {
-    const { group: c, groupSize: m } = u, { orientation: d, panels: v } = c, { disableCursor: x } = c.mutableState;
+    const { group: c, groupSize: m } = u, { orientation: d, panels: v } = c, { disableCursor: b } = c.mutableState;
     let f = 0;
     s ? d === "horizontal" ? f = (t.clientX - s.x) / m * 100 : f = (t.clientY - s.y) / m * 100 : d === "horizontal" ? f = t.clientX < 0 ? -100 : 100 : f = t.clientY < 0 ? -100 : 100;
     const h = o.get(c), g = i.get(c);
@@ -1165,7 +1165,7 @@ function st({
       separatorToPanels: P
     } = g;
     if (z && p && P) {
-      const R = se({
+      const M = se({
         delta: f,
         initialLayout: h,
         panelConstraints: z,
@@ -1173,8 +1173,8 @@ function st({
         prevLayout: p,
         trigger: "mouse-or-touch"
       });
-      if (j(R, p)) {
-        if (f !== 0 && !x)
+      if (j(M, p)) {
+        if (f !== 0 && !b)
           switch (d) {
             case "horizontal": {
               r |= f < 0 ? nt : ot;
@@ -1190,13 +1190,13 @@ function st({
           defaultLayoutDeferred: y,
           derivedPanelConstraints: z,
           groupSize: S,
-          layout: R,
+          layout: M,
           separatorToPanels: P
         });
     }
   });
   let a = 0;
-  t.movementX === 0 ? a |= l & Ge : a |= r & Ge, t.movementY === 0 ? a |= l & Ae : a |= r & Ae, At(a), be(e);
+  t.movementX === 0 ? a |= l & Ge : a |= r & Ge, t.movementY === 0 ? a |= l & Ae : a |= r & Ae, At(a), xe(e);
 }
 function Fe(e) {
   const t = U(), n = W();
@@ -1231,6 +1231,11 @@ function $e(e) {
         });
         return;
       }
+      for (const o of t.hitRegions)
+        if (o.separator) {
+          const { element: i } = o.separator;
+          i.hasPointerCapture?.(e.pointerId) || i.setPointerCapture?.(e.pointerId);
+        }
       st({
         document: e.currentTarget,
         event: e,
@@ -1251,7 +1256,7 @@ function $e(e) {
         cursorFlags: 0,
         hitRegions: o,
         state: "hover"
-      }), be(e.currentTarget);
+      }), xe(e.currentTarget);
       break;
     }
   }
@@ -1277,7 +1282,7 @@ function Ve(e) {
       Z({
         cursorFlags: 0,
         state: "inactive"
-      }), t.hitRegions.length > 0 && (be(e.currentTarget), t.hitRegions.forEach((n) => {
+      }), t.hitRegions.length > 0 && (xe(e.currentTarget), t.hitRegions.forEach((n) => {
         const o = $(n.group.id, !0);
         _(n.group, o);
       }), e.preventDefault());
@@ -1336,10 +1341,10 @@ function Ht({
     switch (m.panelConstraints.groupResizeBehavior) {
       case "preserve-pixel-size": {
         l = !0;
-        const v = d / 100 * n, x = D(
+        const v = d / 100 * n, b = D(
           v / t * 100
         );
-        r.set(m.id, x), i += x;
+        r.set(m.id, b), i += b;
         break;
       }
       case "preserve-relative-size":
@@ -1397,13 +1402,13 @@ function jt(e) {
           const S = $(e.id);
           if (!S)
             return;
-          const p = ge(e), P = S.defaultLayoutDeferred ? je(p) : S.layout, R = Ht({
+          const p = ge(e), P = S.defaultLayoutDeferred ? je(p) : S.layout, M = Ht({
             group: e,
             nextGroupSize: z,
             prevGroupSize: S.groupSize,
             prevLayout: P
           }), C = B({
-            layout: R,
+            layout: M,
             panelConstraints: p
           });
           if (!S.defaultLayoutDeferred && j(S.layout, C) && $t(
@@ -1475,7 +1480,7 @@ function Bt() {
   const [e, t] = re({}), n = ne(() => t({}), []);
   return [e, n];
 }
-function xe(e) {
+function be(e) {
   const t = pt();
   return `${e ?? t}`;
 }
@@ -1545,14 +1550,14 @@ function Ut({
   style: d,
   ...v
 }) {
-  const x = T({
+  const b = T({
     onLayoutChange: {},
     onLayoutChanged: {}
-  }), f = oe((b) => {
-    j(x.current.onLayoutChange, b) || (x.current.onLayoutChange = b, a?.(b));
-  }), h = oe((b) => {
-    j(x.current.onLayoutChanged, b) || (x.current.onLayoutChanged = b, u?.(b));
-  }), g = xe(r), y = T(null), [z, S] = Bt(), p = T({
+  }), f = oe((x) => {
+    j(b.current.onLayoutChange, x) || (b.current.onLayoutChange = x, a?.(x));
+  }), h = oe((x) => {
+    j(b.current.onLayoutChanged, x) || (b.current.onLayoutChanged = x, u?.(x));
+  }), g = be(r), y = T(null), [z, S] = Bt(), p = T({
     lastExpandedPanelSizes: {},
     layouts: {},
     panels: [],
@@ -1560,27 +1565,28 @@ function Ut({
     separators: []
   }), P = we(y, s);
   Wt(g, l);
-  const R = oe(
-    (b, w) => {
-      const E = W(), M = Me(b), k = $(b);
-      if (k) {
+  const M = oe(
+    (x, w) => {
+      const E = W(), R = Me(x), I = $(x);
+      if (I) {
         let O = !1;
         switch (E.state) {
           case "active": {
             O = E.hitRegions.some(
-              (H) => H.group === M
+              (H) => H.group === R
             );
             break;
           }
         }
         return {
-          flexGrow: k.layout[w] ?? 1,
+          flexGrow: I.layout[w] ?? 1,
           pointerEvents: O ? "none" : void 0
         };
       }
-      return {
-        flexGrow: n?.[w] ?? 1
-      };
+      if (n?.[w])
+        return {
+          flexGrow: n?.[w]
+        };
     }
   ), C = Pe({
     defaultLayout: n,
@@ -1590,54 +1596,54 @@ function Ut({
       get disableCursor() {
         return !!C.disableCursor;
       },
-      getPanelStyles: R,
+      getPanelStyles: M,
       id: g,
       orientation: c,
-      registerPanel: (b) => {
+      registerPanel: (x) => {
         const w = p.current;
         return w.panels = Se(c, [
           ...w.panels,
-          b
+          x
         ]), S(), () => {
           w.panels = w.panels.filter(
-            (E) => E !== b
+            (E) => E !== x
           ), S();
         };
       },
-      registerSeparator: (b) => {
+      registerSeparator: (x) => {
         const w = p.current;
         return w.separators = Se(c, [
           ...w.separators,
-          b
+          x
         ]), S(), () => {
           w.separators = w.separators.filter(
-            (E) => E !== b
+            (E) => E !== x
           ), S();
         };
       },
-      togglePanelDisabled: (b, w) => {
-        const M = p.current.panels.find(
-          (H) => H.id === b
+      togglePanelDisabled: (x, w) => {
+        const R = p.current.panels.find(
+          (H) => H.id === x
         );
-        M && (M.panelConstraints.disabled = w);
-        const k = Me(g), O = $(g);
-        k && O && _(k, {
+        R && (R.panelConstraints.disabled = w);
+        const I = Me(g), O = $(g);
+        I && O && _(I, {
           ...O,
-          derivedPanelConstraints: ge(k)
+          derivedPanelConstraints: ge(I)
         });
       },
-      toggleSeparatorDisabled: (b, w) => {
-        const M = p.current.separators.find(
-          (k) => k.id === b
+      toggleSeparatorDisabled: (x, w) => {
+        const R = p.current.separators.find(
+          (I) => I.id === x
         );
-        M && (M.disabled = w);
+        R && (R.disabled = w);
       }
     }),
-    [R, g, S, c, C]
+    [M, g, S, c, C]
   ), F = T(null);
   return K(() => {
-    const b = y.current;
-    if (b === null)
+    const x = y.current;
+    if (x === null)
       return;
     const w = p.current;
     let E;
@@ -1648,9 +1654,9 @@ function Ut({
         ae !== void 0 && (E[ee.id] = ae);
       }
     }
-    const M = {
+    const R = {
       disabled: !!i,
-      element: b,
+      element: x,
       id: g,
       mutableState: {
         defaultLayout: E,
@@ -1663,26 +1669,26 @@ function Ut({
       resizeTargetMinimumSize: w.resizeTargetMinimumSize,
       separators: w.separators
     };
-    F.current = M;
-    const k = jt(M), { defaultLayoutDeferred: O, derivedPanelConstraints: H, layout: Ce } = $(M.id, !0);
+    F.current = R;
+    const I = jt(R), { defaultLayoutDeferred: O, derivedPanelConstraints: H, layout: Ce } = $(R.id, !0);
     !O && H.length > 0 && (f(Ce), h(Ce));
     const lt = ye(g, (ee) => {
       const { defaultLayoutDeferred: ae, derivedPanelConstraints: Re, layout: le } = ee.next;
       if (ae || Re.length === 0)
         return;
-      const ut = M.panels.map(({ id: N }) => N).join(",");
-      M.mutableState.layouts[ut] = le, Re.forEach((N) => {
+      const ut = R.panels.map(({ id: N }) => N).join(",");
+      R.mutableState.layouts[ut] = le, Re.forEach((N) => {
         if (N.collapsible) {
           const { layout: pe } = ee.prev ?? {};
           if (pe) {
-            const ft = I(
+            const ft = k(
               N.collapsedSize,
               le[N.panelId]
-            ), dt = I(
+            ), dt = k(
               N.collapsedSize,
               pe[N.panelId]
             );
-            ft && !dt && (M.mutableState.expandedPanelSizes[N.panelId] = pe[N.panelId]);
+            ft && !dt && (R.mutableState.expandedPanelSizes[N.panelId] = pe[N.panelId]);
           }
         }
       });
@@ -1690,7 +1696,7 @@ function Ut({
       f(le), ct && h(le);
     });
     return () => {
-      F.current = null, k(), lt();
+      F.current = null, I(), lt();
     };
   }, [
     i,
@@ -1701,8 +1707,8 @@ function Ut({
     z,
     C
   ]), de(() => {
-    const b = F.current;
-    b && (b.mutableState.defaultLayout = n, b.mutableState.disableCursor = !!o);
+    const x = F.current;
+    x && (x.mutableState.defaultLayout = n, x.mutableState.disableCursor = !!o);
   }), /* @__PURE__ */ ie(at.Provider, { value: X, children: /* @__PURE__ */ ie(
     "div",
     {
@@ -1757,10 +1763,10 @@ function nn({
   const m = ne(
     (v) => {
       c();
-      let x;
-      i ? x = me(s, Object.keys(v)) : x = me(s, []);
+      let b;
+      i ? b = me(s, Object.keys(v)) : b = me(s, []);
       try {
-        n.setItem(x, JSON.stringify(v));
+        n.setItem(b, JSON.stringify(v));
       } catch (f) {
         console.error(f);
       }
@@ -1841,26 +1847,26 @@ function qt({
   onResize: m,
   panelRef: d,
   style: v,
-  ...x
+  ...b
 }) {
-  const f = !!a, h = xe(a), g = Pe({
+  const f = !!a, h = be(a), g = Pe({
     disabled: s
   }), y = T(null), z = we(y, l), {
     getPanelStyles: S,
     id: p,
     orientation: P,
-    registerPanel: R,
+    registerPanel: M,
     togglePanelDisabled: C
   } = Le(), X = m !== null, F = oe(
-    (w, E, M) => {
-      m?.(w, a, M);
+    (R, I, O) => {
+      m?.(R, a, O);
     }
   );
   K(() => {
-    const w = y.current;
-    if (w !== null) {
-      const E = {
-        element: w,
+    const R = y.current;
+    if (R !== null) {
+      const I = {
+        element: R,
         id: h,
         idIsStable: f,
         mutableValues: {
@@ -1878,7 +1884,7 @@ function qt({
           minSize: c
         }
       };
-      return R(E);
+      return M(I);
     }
   }, [
     r,
@@ -1891,22 +1897,29 @@ function qt({
     u,
     c,
     F,
-    R,
+    M,
     g
   ]), de(() => {
     C(h, !!s);
   }, [s, h, C]), Xt(h, d);
-  const b = Ke(
-    (w) => ye(p, w),
-    // useSyncExternalStore does not support a custom equality check
-    // stringify avoids re-rendering when the style value hasn't changed
-    () => JSON.stringify(S(p, h)),
-    () => JSON.stringify(S(p, h))
+  const x = () => {
+    const R = S(p, h);
+    if (R)
+      return JSON.stringify(R);
+  }, w = Ke(
+    (R) => ye(p, R),
+    x,
+    x
   );
-  return /* @__PURE__ */ ie(
+  let E;
+  return w ? E = JSON.parse(w) : i ? E = {
+    flexGrow: void 0,
+    flexShrink: void 0,
+    flexBasis: i
+  } : E = { flexGrow: 1 }, /* @__PURE__ */ ie(
     "div",
     {
-      ...x,
+      ...b,
       "aria-disabled": s || void 0,
       "data-panel": !0,
       "data-testid": h,
@@ -1918,7 +1931,7 @@ function qt({
         flexBasis: 0,
         flexShrink: 1,
         overflow: "visible",
-        ...JSON.parse(b)
+        ...E
       },
       children: /* @__PURE__ */ ie(
         "div",
@@ -2009,9 +2022,9 @@ function Zt({
   style: s,
   ...l
 }) {
-  const r = xe(i), a = Pe({
+  const r = be(i), a = Pe({
     disabled: n
-  }), [u, c] = re({}), [m, d] = re("inactive"), v = T(null), x = we(v, o), {
+  }), [u, c] = re({}), [m, d] = re("inactive"), v = T(null), b = we(v, o), {
     disableCursor: f,
     id: h,
     orientation: g,
@@ -2021,24 +2034,24 @@ function Zt({
   K(() => {
     const P = v.current;
     if (P !== null) {
-      const R = {
+      const M = {
         disabled: a.disabled,
         element: P,
         id: r
-      }, C = y(R), X = Gt(
-        (b) => {
+      }, C = y(M), X = Gt(
+        (x) => {
           d(
-            b.next.state !== "inactive" && b.next.hitRegions.some(
-              (w) => w.separator === R
-            ) ? b.next.state : "inactive"
+            x.next.state !== "inactive" && x.next.hitRegions.some(
+              (w) => w.separator === M
+            ) ? x.next.state : "inactive"
           );
         }
       ), F = ye(
         h,
-        (b) => {
-          const { derivedPanelConstraints: w, layout: E, separatorToPanels: M } = b.next, k = M.get(R);
-          if (k) {
-            const O = k[0], H = k.indexOf(O);
+        (x) => {
+          const { derivedPanelConstraints: w, layout: E, separatorToPanels: R } = x.next, I = R.get(M);
+          if (I) {
+            const O = I[0], H = I.indexOf(O);
             c(
               Jt({
                 layout: E,
@@ -2073,7 +2086,7 @@ function Zt({
       "data-separator": n ? "disabled" : m,
       "data-testid": r,
       id: r,
-      ref: x,
+      ref: b,
       role: "separator",
       style: {
         flexBasis: "auto",