react-resizable-panels 4.12.1 → 4.12.2

package/README.md

@@ -240,6 +240,12 @@ Falls back to <code>useId</code> when not provided.</p>
     <tr>
       <td>defaultSize</td>
       <td><p>Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels.</p>
+<p>ℹ️ Interpretation rules:</p>
+<ul>
+<li>Numbers are interpreted as pixels (e.g. <code>defaultSize={200}</code> is 200 pixels)</li>
+<li>Strings without explicit units are interpreted as percentage (e.g. <code>defaultSize=&quot;50&quot;</code> is 50 percent)</li>
+<li>Use explicit units (e.g. &quot;px&quot;, &quot;%&quot;, &quot;em&quot;, &quot;rem&quot;, &quot;vh&quot;, or &quot;vw&quot;) to change interpretation</li>
+</ul>
 <p>⚠️ Percentage based sizes may cause slight layout shift when server-rendering.
 For more information see the documentation.</p>
 </td>
@@ -268,12 +274,24 @@ Defaults to <code>preserve-relative-size</code>.</p>
     </tr>
     <tr>
       <td>maxSize</td>
-      <td><p>Maximum size of Panel within its parent group; defaults to 100%.</p>
+      <td><p>Maximum size of Panel within its parent group; defaults to <code>&quot;100%&quot;</code>.</p>
+<p>ℹ️ Interpretation rules:</p>
+<ul>
+<li>Numbers are interpreted as pixels (e.g. <code>maxSize={200}</code> is 200 pixels)</li>
+<li>Strings without explicit units are interpreted as percentage (e.g. <code>maxSize=&quot;50&quot;</code> is 50 percent)</li>
+<li>Use explicit units (e.g. &quot;px&quot;, &quot;%&quot;, &quot;em&quot;, &quot;rem&quot;, &quot;vh&quot;, or &quot;vw&quot;) to change interpretation</li>
+</ul>
 </td>
     </tr>
     <tr>
       <td>minSize</td>
       <td><p>Minimum size of Panel within its parent group; defaults to 0%.</p>
+<p>ℹ️ Interpretation rules:</p>
+<ul>
+<li>Numbers are interpreted as pixels (e.g. <code>minSize={200}</code> is 200 pixels)</li>
+<li>Strings without explicit units are interpreted as percentage (e.g. <code>minSize=&quot;50&quot;</code> is 50 percent)</li>
+<li>Use explicit units (e.g. &quot;px&quot;, &quot;%&quot;, &quot;em&quot;, &quot;rem&quot;, &quot;vh&quot;, or &quot;vw&quot;) to change interpretation</li>
+</ul>
 </td>
     </tr>
     <tr>

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

@@ -289,6 +289,11 @@ export declare type PanelProps = BasePanelAttributes & {
     /**
      * Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels.
      *
+     * ℹ️ Interpretation rules:
+     * - Numbers are interpreted as pixels (e.g. `defaultSize={200}` is 200 pixels)
+     * - Strings without explicit units are interpreted as percentage (e.g. `defaultSize="50"` is 50 percent)
+     * - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation
+     *
      * ⚠️ Percentage based sizes may cause slight layout shift when server-rendering.
      * For more information see the documentation.
      */
@@ -323,11 +328,21 @@ export declare type PanelProps = BasePanelAttributes & {
      */
     id?: string | number | undefined;
     /**
-     * Maximum size of Panel within its parent group; defaults to 100%.
+     * Maximum size of Panel within its parent group; defaults to `"100%"`.
+     *
+     * ℹ️ Interpretation rules:
+     * - Numbers are interpreted as pixels (e.g. `maxSize={200}` is 200 pixels)
+     * - Strings without explicit units are interpreted as percentage (e.g. `maxSize="50"` is 50 percent)
+     * - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation
      */
     maxSize?: number | string | undefined;
     /**
      * Minimum size of Panel within its parent group; defaults to 0%.
+     *
+     * ℹ️ Interpretation rules:
+     * - Numbers are interpreted as pixels (e.g. `minSize={200}` is 200 pixels)
+     * - Strings without explicit units are interpreted as percentage (e.g. `minSize="50"` is 50 percent)
+     * - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation
      */
     minSize?: number | string | undefined;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "4.12.1",
+  "version": "4.12.2",
   "type": "module",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
   "contributors": [
@@ -18,34 +18,6 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "dev": "vite",
-    "dev:integrations": "pnpm run /^dev:integrations:.*/",
-    "dev:integrations:next": "pnpm -C integrations/next/ run dev",
-    "dev:integrations:vike": "pnpm -C integrations/vike/ run dev",
-    "dev:integrations:vite": "pnpm -C integrations/vite/ run dev",
-    "build": "pnpm run /^build:.*/",
-    "build:docs": "cross-env TARGET=docs vite build",
-    "build:lib": "cross-env TARGET=lib vite build",
-    "compile": "pnpm run --sequential /^compile:.*/",
-    "compile:docs": "tsx ./scripts/compile-docs",
-    "compile:examples": "tsx ./scripts/compile-examples",
-    "compile:search-index": "tsx ./scripts/compile-search-index",
-    "compress:og-image": "tsx ./scripts/compress-og-image",
-    "e2e:install": "pnpm -C integrations/tests exec playwright install --with-deps",
-    "e2e:test": "pnpm -C integrations/tests run test",
-    "e2e:test:main": "pnpm -C integrations/tests run test --project=chromium",
-    "e2e:test:popup": "pnpm -C integrations/tests run test --project=chromium:popup",
-    "lint": "eslint .",
-    "prerelease": "rimraf dist && pnpm run build:lib",
-    "prettier": "prettier --write \"**/*.{css,html,js,json,jsx,ts,tsx}\"",
-    "prettier:ci": "prettier --check \"**/*.{css,html,js,json,jsx,ts,tsx}\"",
-    "preview": "vite preview",
-    "test": "vitest",
-    "test:ci": "vitest run",
-    "test:debug": "vitest --inspect-brk=127.0.0.1:3000 --no-file-parallelism",
-    "tsc": "tsc -b"
-  },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"
   },
@@ -120,5 +92,33 @@
     "vitest": "^3.2.4",
     "vitest-fail-on-console": "^0.10.1",
     "zustand": "^5.0.7"
+  },
+  "scripts": {
+    "dev": "vite",
+    "dev:integrations": "pnpm run /^dev:integrations:.*/",
+    "dev:integrations:next": "pnpm -C integrations/next/ run dev",
+    "dev:integrations:vike": "pnpm -C integrations/vike/ run dev",
+    "dev:integrations:vite": "pnpm -C integrations/vite/ run dev",
+    "build": "pnpm run /^build:.*/",
+    "build:docs": "cross-env TARGET=docs vite build",
+    "build:lib": "cross-env TARGET=lib vite build",
+    "compile": "pnpm run --sequential /^compile:.*/",
+    "compile:docs": "tsx ./scripts/compile-docs",
+    "compile:examples": "tsx ./scripts/compile-examples",
+    "compile:search-index": "tsx ./scripts/compile-search-index",
+    "compress:og-image": "tsx ./scripts/compress-og-image",
+    "e2e:install": "pnpm -C integrations/tests exec playwright install --with-deps",
+    "e2e:test": "pnpm -C integrations/tests run test",
+    "e2e:test:main": "pnpm -C integrations/tests run test --project=chromium",
+    "e2e:test:popup": "pnpm -C integrations/tests run test --project=chromium:popup",
+    "lint": "eslint .",
+    "prerelease": "rimraf dist && pnpm run build:lib",
+    "prettier": "prettier --write \"**/*.{css,html,js,json,jsx,ts,tsx}\"",
+    "prettier:ci": "prettier --check \"**/*.{css,html,js,json,jsx,ts,tsx}\"",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ci": "vitest run",
+    "test:debug": "vitest --inspect-brk=127.0.0.1:3000 --no-file-parallelism",
+    "tsc": "tsc -b"
   }
-}
+}