Support overflowing content like drop-shadows (#678)

Changing the default
[overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow)
styles set by this library as shown below is enough to allow e.g.
drop-shadows and other overflowing styles.


<table><thead><tr><th>Before</th><th>After</th></tr></thead><tbody><tr><td>

```html
<!-- ⚛️ Group -->
<div data-group>
 
  <!-- ⚛️ Panel -->
  <div
    data-panel
    style="overflow: hidden"
  >
    <div>
 
      <!-- The stuff you render -->
    </div>
  </div>
</div>
```

</td><td>

```html
<!-- ⚛️ Group -->
<div data-group>
 
  <!-- ⚛️ Panel -->
  <div
    data-panel
    style="overflow: visible"
  >
    <div style="overflow: auto">
 
      <!-- The stuff you render -->
    </div>
  </div>
</div>
```

</td></tr></tbody></table>

Is this a change that users of this library would like? Will it somehow
break or affect existing panel styles in an unexpected way?

Try this out for yourself:
```sh
npm install react-resizable-panels@alpha
```

I'd welcome feedback on the API and the documentation
([here](https://react-resizable-panels-git-discus-84d2c9-brian-vaughns-projects.vercel.app/examples/overflow)).

In support of discussion #674 and issues #628 and #532

Author: bvaughn

.prettierignore

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

CHANGELOG.md

@@ -1,8 +1,12 @@
 # Changelog
 
+## 4.7.1 (Unreleased)
+
+- [678](https://github.com/bvaughn/react-resizable-panels/pull/678): Change default overflow styles to support shadows
+
 ## 4.7.0
 
-= [677](https://github.com/bvaughn/react-resizable-panels/pull/677): Add `groupResizeBehavior` prop to `Panel`, enabling panels to retain their current size (pixels) size when the parent `Group` is resized.
+- [677](https://github.com/bvaughn/react-resizable-panels/pull/677): Add `groupResizeBehavior` prop to `Panel`, enabling panels to retain their current size (pixels) size when the parent `Group` is resized.
 
 ## 4.6.5
 

integrations/tests/src/components/PanelText.tsx

@@ -2,7 +2,7 @@ import type { PropsWithChildren } from "react";
 
 export function PanelText({ children }: PropsWithChildren) {
   return (
-    <div className="w-full h-full flex flex-col items-center justify-center p-1">
+    <div className="w-full min-h-full flex flex-col items-center justify-center p-1">
       {children}
     </div>
   );

integrations/tests/tests/cursor.spec.tsx

@@ -91,7 +91,7 @@ test.describe("cursor", () => {
         <Panel id="top" minSize="25%" />
         <Separator id="vertical-separator" />
         <Panel id="bottom" minSize="25%">
-          <Group orientation="horizontal">
+          <Group className="relative top-[-5rem]" orientation="horizontal">
             <Panel id="left" minSize="25%" />
             <Separator />
             <Panel id="right" minSize="25%" />
@@ -178,7 +178,7 @@ test.describe("cursor", () => {
         <Panel id="top" minSize="25%" />
         <Separator id="vertical-separator" />
         <Panel id="bottom" minSize="25%">
-          <Group orientation="horizontal">
+          <Group className="relative top-[-5rem]" orientation="horizontal">
             <Panel id="left" minSize="25%" />
             <Separator />
             <Panel id="right" minSize="25%" />

lib/components/panel/Panel.tsx

@@ -160,9 +160,7 @@ export function Panel({
         display: "flex",
         flexBasis: 0,
         flexShrink: 1,
-
-        // Prevent Panel content from interfering with panel size
-        overflow: "hidden",
+        overflow: "visible",
 
         ...JSON.parse(panelStylesString)
       }}
@@ -173,6 +171,7 @@ export function Panel({
           maxHeight: "100%",
           maxWidth: "100%",
           flexGrow: 1,
+          overflow: "auto",
 
           ...style,
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "4.7.0",
+  "version": "4.7.1-alpha.1",
   "type": "module",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
   "contributors": [
@@ -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

@@ -0,0 +1,3 @@
+{
+  "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\">hidden</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-comment\">// Option 1: Override with className (must be !important)</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Group</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"overflow-visible!\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span></div>"
+}

public/generated/examples/GroupOverflowClassName.json

@@ -0,0 +1,3 @@
+{
+  "html": "<div><span class=\"tok-comment\">// Option 2: Override with style</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Group</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-string\">\"visible\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span></div>"
+}