[pull] main from bvaughn:main

public/generated/examples/ConditionallyRenderPanel.json

@@ -0,0 +1,3 @@
+{
+  "html": "<div><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">ref</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">width</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-number\">0</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">useResizeObserver</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">ref</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">ref</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Group</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Panel</span><span class=\"\"> </span><span class=\"tok-propertyName\">minSize</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"25%\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">...</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">width</span><span class=\"\"> </span><span class=\"tok-operator\">&#62;=</span><span class=\"\"> </span><span class=\"tok-number\">500</span><span class=\"\"> </span><span class=\"tok-operator\">&#38;&#38;</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div><span class=\"\">      </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">        </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Separator</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">        </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Panel</span><span class=\"\"> </span><span class=\"tok-propertyName\">defaultSize</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"35%\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">...</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">      </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Group</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span></div>"
+}

src/App.tsx

@@ -9,6 +9,7 @@ import {
 } from "react-lib-tools";
 import { repository } from "../package.json";
 import { html as GroupExplicitHeightHTML } from "../public/generated/examples/GroupExplicitHeight.json";
+import { html as ConditionallyRenderPanel } from "../public/generated/examples/ConditionallyRenderPanel.json";
 import { Link } from "./components/Link";
 import { NavLink } from "./components/NavLink";
 import { Group } from "./components/styled-panels/Group";
@@ -201,6 +202,34 @@ const commonQuestions: CommonQuestion[] = [
         </p>
       </>
     )
+  },
+  {
+    id: "conditionally-render-panel",
+    question: "How can I conditionally render a Panel based on screen size?",
+    answer: (
+      <>
+        <p>
+          The recommended way is to use the{" "}
+          <ExternalLink href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver">
+            ResizeObserver
+          </ExternalLink>{" "}
+          API, either through a hook like{" "}
+          <ExternalLink href="http://npmjs.com/package/use-resize-observer">
+            useResizeObserver
+          </ExternalLink>{" "}
+          or a component like{" "}
+          <ExternalLink href="https://react-virtualized-auto-sizer.vercel.app/">
+            react-virtualized-auto-sizer
+          </ExternalLink>
+          .
+        </p>
+        <Code html={ConditionallyRenderPanel} />
+        <Callout>
+          Putting the <code>defaultSize</code> on the conditional{" "}
+          <code>Panel</code> is an easy way to avoid invalid layout constraints.
+        </Callout>
+      </>
+    )
   }
 ];
 

src/routes/examples/ConditionallyRenderPanel.tsx

@@ -0,0 +1,25 @@
+import type { Ref } from "react";
+import { Group, Panel, Separator } from "react-resizable-panels";
+
+declare function useResizeObserver(): {
+  ref: Ref<HTMLDivElement>;
+  width: number | undefined;
+};
+
+// <begin>
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+const { ref, width = 0 } = useResizeObserver();
+
+/* prettier-ignore */
+<div ref={ref}>
+  <Group>
+    <Panel minSize="25%">...</Panel>
+    {width >= 500 && (
+      <>
+        <Separator />
+        <Panel defaultSize="35%">...</Panel>
+      </>
+    )}
+  </Group>
+</div>

vitest.config.ts

@@ -5,14 +5,6 @@ export default mergeConfig(
   viteConfig,
   defineConfig({
     test: {
-      // onConsoleLog(log, type) {
-      //   console.log("[config] onConsoleLog:", type, log);
-      //   switch (type) {
-      //     case "stderr": {
-      //       throw Error("Unexpected console error: " + log);
-      //     }
-      //   }
-      // },
       environment: "jsdom",
       setupFiles: "./vitest.setup.js",
       exclude: ["node_modules", "integrations"]