Update docs/examples

Author: bvaughn

.prettierignore

@@ -3,4 +3,6 @@
 /generated
 /public
 
+src/routes/examples/*.html
+
 integrations/next/.next

package.json

@@ -95,7 +95,7 @@
     "react-docgen-typescript": "^2.4.0",
     "react-dom": "^19.2.3",
     "react-error-boundary": "^6.0.0",
-    "react-lib-tools": "^0.0.34",
+    "react-lib-tools": "0.0.35",
     "react-router-dom": "^7.6.3",
     "rimraf": "^6.1.2",
     "rollup-plugin-terser": "^7.0.2",

pnpm-lock.yaml

@@ -1,3 +1,3 @@
 {
-  "html": "<div><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">data-group</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">visible</span><span class=\"tok-string\">\"</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=\"\"> </span><span class=\"tok-propertyName\">data-panel</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">visible</span><span class=\"tok-string\">\"</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=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">auto</span><span class=\"tok-string\">\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">      </span><span class=\"tok-comment\">&#60;!-- Panel content --&#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><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><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>"
+  "html": "<div><span class=\"tok-comment\">&#60;!-- &#9883;️ Group --&#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=\"\"> </span><span class=\"tok-propertyName\">data-group</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">visible</span><span class=\"tok-string\">\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\">  </span><span class=\"tok-comment\">&#60;!-- &#9883;️ Panel --&#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=\"\"> </span><span class=\"tok-propertyName\">data-panel</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">visible</span><span class=\"tok-string\">\"</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=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">auto</span><span class=\"tok-string\">\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\">      </span><span class=\"tok-comment\">&#60;!-- The stuff you render goes here --&#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><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><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>"
 }

public/generated/examples/GroupAndPanelElements.json

@@ -0,0 +1,3 @@
+{
+  "html": "<div><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Panel</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"overflow-visible!\"</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\">Tooltip</span><span class=\"\"> </span><span class=\"tok-propertyName\">content</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"This is the left panel\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">    left</span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Tooltip</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=\"tok-punctuation\">&#62;</span></div>"
+}

public/generated/examples/Tooltip.json

@@ -4,11 +4,13 @@ import {
   Code,
   ExternalLink,
   Header,
-  Input
+  Input,
+  Tooltip
 } from "react-lib-tools";
 import { html as DropShadowHTML } from "../../public/generated/examples/DropShadow.json";
 import { html as FocusOutlineHTML } from "../../public/generated/examples/FocusOutline.json";
 import { html as GroupAndPanelElementsHTML } from "../../public/generated/examples/GroupAndPanelElements.json";
+import { html as TooltipHTML } from "../../public/generated/examples/Tooltip.json";
 import { Group } from "../components/styled-panels/Group";
 import { Panel } from "../components/styled-panels/Panel";
 
@@ -19,16 +21,17 @@ export default function OverflowRoute() {
     <Box direction="column" gap={4}>
       <Header section="Examples" title="Overflow" />
       <div>
-        Groups and panels use the{" "}
+        Groups and Panels set the{" "}
         <ExternalLink href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow">
           overflow
         </ExternalLink>{" "}
-        styles shown below.
+        styles shown below:
       </div>
       <Code html={GroupAndPanelElementsHTML} />
       <div>
-        This combination of styles allows overflow content to be scrolled while
-        also supporting visual styles like shadows.
+        This combination of styles allows overflow content to be scrollable
+        while also allowing Panels to have visual styles like shadows or
+        outlines.
       </div>
       <div>
         For example, this group of panels demonstrate drop-shadow style.
@@ -80,6 +83,30 @@ export default function OverflowRoute() {
         The panel sets a higher z-index on <code>focus-within</code> to avoid
         clipping issues.
       </Callout>
+      <div>
+        Styles that affect the outer panel element (e.g. shadows, outlines) work
+        without any customizations. Things like tooltips or popovers that are
+        rendered <em>inside</em> of the panel will be clipped by the{" "}
+        <code>overflow:auto</code> style. Because of this it's recommended to
+        use{" "}
+        <ExternalLink href="https://react.dev/reference/react-dom/createPortal">
+          portals
+        </ExternalLink>{" "}
+        for these. However you can override the default style as shown below.
+      </div>
+      <Code html={TooltipHTML} />
+      <Group>
+        <Panel className="overflow-visible!" minSize={100}>
+          <Tooltip content="This is the left panel" positions={["top"]}>
+            left
+          </Tooltip>
+        </Panel>
+        <Panel className="overflow-visible!" minSize={100}>
+          <Tooltip content="This is the right panel" positions={["top"]}>
+            right
+          </Tooltip>
+        </Panel>
+      </Group>
     </Box>
   );
 }

src/routes/OverflowRoute.tsx

@@ -1,7 +1,11 @@
+<!-- ⚛️ Group -->
 <div data-group style="overflow: visible">
+
+  <!-- ⚛️ Panel -->
   <div data-panel style="overflow: visible">
     <div style="overflow: auto">
-      <!-- Panel content -->
+
+      <!-- The stuff you render goes here -->
     </div>
   </div>
 </div>

src/routes/examples/GroupAndPanelElements.html

@@ -0,0 +1,11 @@
+import { Tooltip } from "react-lib-tools";
+import { Panel } from "react-resizable-panels";
+
+// <begin>
+
+/* prettier-ignore */
+<Panel className="overflow-visible!">
+  <Tooltip content="This is the left panel">
+    left
+  </Tooltip>
+</Panel>