react-resizable-panels 2.1.3 → 2.1.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 2.1.5
+
+- Add react v19 to peer deps
+
+## 2.1.4
+
+- Improve TypeScript HTML tag type generics (#407)
+- Edge case check to make sure resize handle hasn't been unmounted while dragging (#410)
+
 ## 2.1.3
 
 - Edge case bug fix for a resize handle unmounting while being dragged (#402)

package/dist/declarations/src/Panel.d.ts

@@ -30,7 +30,7 @@ export type ImperativePanelHandle = {
     isExpanded: () => boolean;
     resize: (size: number) => void;
 };
-export type PanelProps = Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id" | "onResize"> & PropsWithChildren<{
+export type PanelProps<T extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap> = Omit<HTMLAttributes<HTMLElementTagNameMap[T]>, "id" | "onResize"> & PropsWithChildren<{
     className?: string;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -43,7 +43,7 @@ export type PanelProps = Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id"
     onResize?: PanelOnResize;
     order?: number;
     style?: object;
-    tagName?: keyof HTMLElementTagNameMap;
+    tagName?: T;
 }>;
 export declare function PanelWithForwardedRef({ children, className: classNameFromProps, collapsedSize, collapsible, defaultSize, forwardedRef, id: idFromProps, maxSize, minSize, onCollapse, onExpand, onResize, order, style: styleFromProps, tagName: Type, ...rest }: PanelProps & {
     forwardedRef: ForwardedRef<ImperativePanelHandle>;
@@ -51,7 +51,7 @@ export declare function PanelWithForwardedRef({ children, className: classNameFr
 export declare namespace PanelWithForwardedRef {
     var displayName: string;
 }
-export declare const Panel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id" | "onResize"> & {
+export declare const Panel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLObjectElement | HTMLElement | HTMLSlotElement | HTMLStyleElement | HTMLTitleElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
     className?: string | undefined;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;

package/dist/react-resizable-panels.browser.cjs.js

@@ -600,7 +600,7 @@ function recalculateIntersectingHandles({
       // Clicking on an element "above" a handle (e.g. a modal) should prevent a hit though
       // so at this point we need to compare stacking order of a potentially intersecting drag handle,
       // and the element that was actually clicked/touched
-      if (targetElement !== null && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
+      if (targetElement !== null && document.contains(targetElement) && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
       // Calculating stacking order has a cost, so we should avoid it if possible
       // That is why we only check potentially intersecting handles,
       // and why we skip if the event target is within the handle's DOM

package/dist/react-resizable-panels.browser.development.cjs.js

@@ -606,7 +606,7 @@ function recalculateIntersectingHandles({
       // Clicking on an element "above" a handle (e.g. a modal) should prevent a hit though
       // so at this point we need to compare stacking order of a potentially intersecting drag handle,
       // and the element that was actually clicked/touched
-      if (targetElement !== null && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
+      if (targetElement !== null && document.contains(targetElement) && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
       // Calculating stacking order has a cost, so we should avoid it if possible
       // That is why we only check potentially intersecting handles,
       // and why we skip if the event target is within the handle's DOM

package/dist/react-resizable-panels.browser.development.esm.js

@@ -582,7 +582,7 @@ function recalculateIntersectingHandles({
       // Clicking on an element "above" a handle (e.g. a modal) should prevent a hit though
       // so at this point we need to compare stacking order of a potentially intersecting drag handle,
       // and the element that was actually clicked/touched
-      if (targetElement !== null && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
+      if (targetElement !== null && document.contains(targetElement) && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
       // Calculating stacking order has a cost, so we should avoid it if possible
       // That is why we only check potentially intersecting handles,
       // and why we skip if the event target is within the handle's DOM

package/dist/react-resizable-panels.browser.esm.js

@@ -576,7 +576,7 @@ function recalculateIntersectingHandles({
       // Clicking on an element "above" a handle (e.g. a modal) should prevent a hit though
       // so at this point we need to compare stacking order of a potentially intersecting drag handle,
       // and the element that was actually clicked/touched
-      if (targetElement !== null && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
+      if (targetElement !== null && document.contains(targetElement) && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
       // Calculating stacking order has a cost, so we should avoid it if possible
       // That is why we only check potentially intersecting handles,
       // and why we skip if the event target is within the handle's DOM

package/dist/react-resizable-panels.cjs.js

@@ -602,7 +602,7 @@ function recalculateIntersectingHandles({
       // Clicking on an element "above" a handle (e.g. a modal) should prevent a hit though
       // so at this point we need to compare stacking order of a potentially intersecting drag handle,
       // and the element that was actually clicked/touched
-      if (targetElement !== null && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
+      if (targetElement !== null && document.contains(targetElement) && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
       // Calculating stacking order has a cost, so we should avoid it if possible
       // That is why we only check potentially intersecting handles,
       // and why we skip if the event target is within the handle's DOM

package/dist/react-resizable-panels.development.cjs.js

@@ -613,7 +613,7 @@ function recalculateIntersectingHandles({
       // Clicking on an element "above" a handle (e.g. a modal) should prevent a hit though
       // so at this point we need to compare stacking order of a potentially intersecting drag handle,
       // and the element that was actually clicked/touched
-      if (targetElement !== null && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
+      if (targetElement !== null && document.contains(targetElement) && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
       // Calculating stacking order has a cost, so we should avoid it if possible
       // That is why we only check potentially intersecting handles,
       // and why we skip if the event target is within the handle's DOM

package/dist/react-resizable-panels.development.esm.js

@@ -589,7 +589,7 @@ function recalculateIntersectingHandles({
       // Clicking on an element "above" a handle (e.g. a modal) should prevent a hit though
       // so at this point we need to compare stacking order of a potentially intersecting drag handle,
       // and the element that was actually clicked/touched
-      if (targetElement !== null && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
+      if (targetElement !== null && document.contains(targetElement) && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
       // Calculating stacking order has a cost, so we should avoid it if possible
       // That is why we only check potentially intersecting handles,
       // and why we skip if the event target is within the handle's DOM

package/dist/react-resizable-panels.development.node.cjs.js

@@ -575,7 +575,7 @@ function recalculateIntersectingHandles({
       // Clicking on an element "above" a handle (e.g. a modal) should prevent a hit though
       // so at this point we need to compare stacking order of a potentially intersecting drag handle,
       // and the element that was actually clicked/touched
-      if (targetElement !== null && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
+      if (targetElement !== null && document.contains(targetElement) && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
       // Calculating stacking order has a cost, so we should avoid it if possible
       // That is why we only check potentially intersecting handles,
       // and why we skip if the event target is within the handle's DOM

package/dist/react-resizable-panels.development.node.esm.js

@@ -551,7 +551,7 @@ function recalculateIntersectingHandles({
       // Clicking on an element "above" a handle (e.g. a modal) should prevent a hit though
       // so at this point we need to compare stacking order of a potentially intersecting drag handle,
       // and the element that was actually clicked/touched
-      if (targetElement !== null && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
+      if (targetElement !== null && document.contains(targetElement) && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
       // Calculating stacking order has a cost, so we should avoid it if possible
       // That is why we only check potentially intersecting handles,
       // and why we skip if the event target is within the handle's DOM

package/dist/react-resizable-panels.esm.js

@@ -578,7 +578,7 @@ function recalculateIntersectingHandles({
       // Clicking on an element "above" a handle (e.g. a modal) should prevent a hit though
       // so at this point we need to compare stacking order of a potentially intersecting drag handle,
       // and the element that was actually clicked/touched
-      if (targetElement !== null && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
+      if (targetElement !== null && document.contains(targetElement) && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
       // Calculating stacking order has a cost, so we should avoid it if possible
       // That is why we only check potentially intersecting handles,
       // and why we skip if the event target is within the handle's DOM

package/dist/react-resizable-panels.node.cjs.js

@@ -564,7 +564,7 @@ function recalculateIntersectingHandles({
       // Clicking on an element "above" a handle (e.g. a modal) should prevent a hit though
       // so at this point we need to compare stacking order of a potentially intersecting drag handle,
       // and the element that was actually clicked/touched
-      if (targetElement !== null && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
+      if (targetElement !== null && document.contains(targetElement) && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
       // Calculating stacking order has a cost, so we should avoid it if possible
       // That is why we only check potentially intersecting handles,
       // and why we skip if the event target is within the handle's DOM

package/dist/react-resizable-panels.node.esm.js

@@ -540,7 +540,7 @@ function recalculateIntersectingHandles({
       // Clicking on an element "above" a handle (e.g. a modal) should prevent a hit though
       // so at this point we need to compare stacking order of a potentially intersecting drag handle,
       // and the element that was actually clicked/touched
-      if (targetElement !== null && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
+      if (targetElement !== null && document.contains(targetElement) && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
       // Calculating stacking order has a cost, so we should avoid it if possible
       // That is why we only check potentially intersecting handles,
       // and why we skip if the event target is within the handle's DOM

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",
@@ -81,8 +81,8 @@
     "react-dom": "experimental"
   },
   "peerDependencies": {
-    "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
   },
   "browserslist": [
     "Chrome 79"

package/src/Panel.ts

@@ -54,10 +54,9 @@ export type ImperativePanelHandle = {
   resize: (size: number) => void;
 };
 
-export type PanelProps = Omit<
-  HTMLAttributes<keyof HTMLElementTagNameMap>,
-  "id" | "onResize"
-> &
+export type PanelProps<
+  T extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap,
+> = Omit<HTMLAttributes<HTMLElementTagNameMap[T]>, "id" | "onResize"> &
   PropsWithChildren<{
     className?: string;
     collapsedSize?: number | undefined;
@@ -71,7 +70,7 @@ export type PanelProps = Omit<
     onResize?: PanelOnResize;
     order?: number;
     style?: object;
-    tagName?: keyof HTMLElementTagNameMap;
+    tagName?: T;
   }>;
 
 export function PanelWithForwardedRef({

package/src/PanelResizeHandleRegistry.ts

@@ -197,6 +197,7 @@ function recalculateIntersectingHandles({
       // and the element that was actually clicked/touched
       if (
         targetElement !== null &&
+        document.contains(targetElement) &&
         dragHandleElement !== targetElement &&
         !dragHandleElement.contains(targetElement) &&
         !targetElement.contains(dragHandleElement) &&