react-resizable-panels 0.0.63 → 1.0.0-rc.2

package/src/PanelGroupContext.ts

@@ -1,5 +1,4 @@
 import { PanelData } from "./Panel";
-import { MixedSizes } from "./types";
 import { CSSProperties, createContext } from "./vendor/react";
 
 export type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent;
@@ -17,14 +16,14 @@ export const PanelGroupContext = createContext<{
   direction: "horizontal" | "vertical";
   dragState: DragState | null;
   expandPanel: (panelData: PanelData) => void;
-  getPanelSize: (panelData: PanelData) => MixedSizes;
+  getPanelSize: (panelData: PanelData) => number;
   getPanelStyle: (panelData: PanelData) => CSSProperties;
   groupId: string;
   isPanelCollapsed: (panelData: PanelData) => boolean;
   isPanelExpanded: (panelData: PanelData) => boolean;
   registerPanel: (panelData: PanelData) => void;
   registerResizeHandle: (dragHandleId: string) => ResizeHandler;
-  resizePanel: (panelData: PanelData, mixedSizes: Partial<MixedSizes>) => void;
+  resizePanel: (panelData: PanelData, size: number) => void;
   startDragging: (dragHandleId: string, event: ResizeEvent) => void;
   stopDragging: () => void;
   unregisterPanel: (panelData: PanelData) => void;

package/src/PanelResizeHandle.test.tsx

@@ -0,0 +1,68 @@
+import { Root, createRoot } from "react-dom/client";
+import { act } from "react-dom/test-utils";
+import { Panel, PanelGroup, PanelResizeHandle } from ".";
+import { assert } from "./utils/assert";
+import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
+
+describe("PanelResizeHandle", () => {
+  let expectedWarnings: string[] = [];
+  let root: Root;
+
+  beforeEach(() => {
+    // @ts-expect-error
+    global.IS_REACT_ACT_ENVIRONMENT = true;
+
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+
+    expectedWarnings = [];
+    root = createRoot(container);
+
+    jest.spyOn(console, "warn").mockImplementation((actualMessage: string) => {
+      const match = expectedWarnings.findIndex((expectedMessage) => {
+        return actualMessage.includes(expectedMessage);
+      });
+
+      if (match >= 0) {
+        expectedWarnings.splice(match, 1);
+        return;
+      }
+
+      throw Error(`Unexpected warning: ${actualMessage}`);
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.resetModules();
+
+    act(() => {
+      root.unmount();
+    });
+
+    expect(expectedWarnings).toHaveLength(0);
+  });
+
+  it("should support ...rest attributes", () => {
+    act(() => {
+      root.render(
+        <PanelGroup direction="horizontal">
+          <Panel />
+          <PanelResizeHandle
+            data-test-name="foo"
+            id="handle"
+            tabIndex={123}
+            title="bar"
+          />
+          <Panel />
+        </PanelGroup>
+      );
+    });
+
+    const element = getResizeHandleElement("handle");
+    assert(element);
+    expect(element.tabIndex).toBe(123);
+    expect(element.getAttribute("data-test-name")).toBe("foo");
+    expect(element.title).toBe("bar");
+  });
+});

package/src/PanelResizeHandle.ts

@@ -3,8 +3,9 @@ import {
   createElement,
   CSSProperties,
   ElementType,
+  HTMLAttributes,
+  PropsWithChildren,
   MouseEvent as ReactMouseEvent,
-  ReactNode,
   TouchEvent,
   useCallback,
   useContext,
@@ -19,31 +20,32 @@ import {
   ResizeEvent,
   ResizeHandler,
 } from "./PanelGroupContext";
+import { assert } from "./utils/assert";
 import { getCursorStyle } from "./utils/cursor";
-import { DataAttributes } from "./types";
 
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
 
-export type PanelResizeHandleProps = {
-  children?: ReactNode;
-  className?: string;
-  dataAttributes?: DataAttributes;
-  disabled?: boolean;
-  id?: string | null;
-  onDragging?: PanelResizeHandleOnDragging;
-  style?: CSSProperties;
-  tagName?: ElementType;
-};
+export type PanelResizeHandleProps = Omit<HTMLAttributes<ElementType>, "id"> &
+  PropsWithChildren<{
+    className?: string;
+    disabled?: boolean;
+    id?: string | null;
+    onDragging?: PanelResizeHandleOnDragging;
+    style?: CSSProperties;
+    tabIndex?: number;
+    tagName?: ElementType;
+  }>;
 
 export function PanelResizeHandle({
   children = null,
   className: classNameFromProps = "",
-  dataAttributes,
   disabled = false,
-  id: idFromProps = null,
+  id: idFromProps,
   onDragging,
   style: styleFromProps = {},
+  tabIndex = 0,
   tagName: Type = "div",
+  ...rest
 }: PanelResizeHandleProps) {
   const divElementRef = useRef<HTMLDivElement>(null);
 
@@ -83,8 +85,9 @@ export function PanelResizeHandle({
   const stopDraggingAndBlur = useCallback(() => {
     // Clicking on the drag handle shouldn't leave it focused;
     // That would cause the PanelGroup to think it was still active.
-    const div = divElementRef.current!;
-    div.blur();
+    const divElement = divElementRef.current;
+    assert(divElement);
+    divElement.blur();
 
     stopDragging();
 
@@ -116,7 +119,9 @@ export function PanelResizeHandle({
       resizeHandler(event);
     };
 
-    const divElement = divElementRef.current!;
+    const divElement = divElementRef.current;
+    assert(divElement);
+
     const targetDocument = divElement.ownerDocument;
 
     targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
@@ -152,6 +157,8 @@ export function PanelResizeHandle({
   };
 
   return createElement(Type, {
+    ...rest,
+
     children,
     className: classNameFromProps,
     onBlur: () => setIsFocused(false),
@@ -159,7 +166,9 @@ export function PanelResizeHandle({
     onMouseDown: (event: ReactMouseEvent) => {
       startDragging(resizeHandleId, event.nativeEvent);
 
-      const { onDragging } = callbacksRef.current!;
+      const callbacks = callbacksRef.current;
+      assert(callbacks);
+      const { onDragging } = callbacks;
       if (onDragging) {
         onDragging(true);
       }
@@ -170,7 +179,9 @@ export function PanelResizeHandle({
     onTouchStart: (event: TouchEvent) => {
       startDragging(resizeHandleId, event.nativeEvent);
 
-      const { onDragging } = callbacksRef.current!;
+      const callbacks = callbacksRef.current;
+      assert(callbacks);
+      const { onDragging } = callbacks;
       if (onDragging) {
         onDragging(true);
       }
@@ -181,9 +192,7 @@ export function PanelResizeHandle({
       ...style,
       ...styleFromProps,
     },
-    tabIndex: 0,
-
-    ...dataAttributes,
+    tabIndex,
 
     // CSS selectors
     "data-panel-group-direction": direction,

package/src/hooks/useWindowSplitterBehavior.ts

@@ -46,7 +46,8 @@ export function useWindowSplitterResizeHandlerBehavior({
         case "F6": {
           event.preventDefault();
 
-          const groupId = handleElement.getAttribute("data-panel-group-id")!;
+          const groupId = handleElement.getAttribute("data-panel-group-id");
+          assert(groupId);
 
           const handles = getResizeHandleElementsForGroup(groupId);
           const index = getResizeHandleElementIndex(groupId, handleId);

package/src/hooks/useWindowSplitterPanelGroupBehavior.ts

@@ -5,12 +5,9 @@ import { adjustLayoutByDelta } from "../utils/adjustLayoutByDelta";
 import { assert } from "../utils/assert";
 import { calculateAriaValues } from "../utils/calculateAriaValues";
 import { determinePivotIndices } from "../utils/determinePivotIndices";
-import { calculateAvailablePanelSizeInPixels } from "../utils/dom/calculateAvailablePanelSizeInPixels";
-import { getAvailableGroupSizePixels } from "../utils/dom/getAvailableGroupSizePixels";
 import { getPanelGroupElement } from "../utils/dom/getPanelGroupElement";
 import { getResizeHandleElementsForGroup } from "../utils/dom/getResizeHandleElementsForGroup";
 import { getResizeHandlePanelIds } from "../utils/dom/getResizeHandlePanelIds";
-import { getPercentageSizeFromMixedSizes } from "../utils/getPercentageSizeFromMixedSizes";
 import { fuzzyNumbersEqual } from "../utils/numbers/fuzzyNumbersEqual";
 import { RefObject, useEffect, useRef } from "../vendor/react";
 import useIsomorphicLayoutEffect from "./useIsomorphicEffect";
@@ -43,12 +40,10 @@ export function useWindowSplitterPanelGroupBehavior({
   });
 
   useIsomorphicLayoutEffect(() => {
-    const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
     const resizeHandleElements = getResizeHandleElementsForGroup(groupId);
 
     for (let index = 0; index < panelDataArray.length - 1; index++) {
       const { valueMax, valueMin, valueNow } = calculateAriaValues({
-        groupSizePixels,
         layout,
         panelsArray: panelDataArray,
         pivotIndices: [index, index + 1],
@@ -68,10 +63,10 @@ export function useWindowSplitterPanelGroupBehavior({
           }
         }
       } else {
-        resizeHandleElement.setAttribute(
-          "aria-controls",
-          panelDataArray[index].id
-        );
+        const panelData = panelDataArray[index];
+        assert(panelData);
+
+        resizeHandleElement.setAttribute("aria-controls", panelData.id);
         resizeHandleElement.setAttribute(
           "aria-valuemax",
           "" + Math.round(valueMax)
@@ -82,7 +77,7 @@ export function useWindowSplitterPanelGroupBehavior({
         );
         resizeHandleElement.setAttribute(
           "aria-valuenow",
-          "" + Math.round(valueNow)
+          valueNow != null ? "" + Math.round(valueNow) : ""
         );
       }
     }
@@ -98,14 +93,20 @@ export function useWindowSplitterPanelGroupBehavior({
   }, [groupId, layout, panelDataArray]);
 
   useEffect(() => {
-    const { panelDataArray } = eagerValuesRef.current!;
+    const eagerValues = eagerValuesRef.current;
+    assert(eagerValues);
+
+    const { panelDataArray } = eagerValues;
 
     const groupElement = getPanelGroupElement(groupId);
     assert(groupElement != null, `No group found for id "${groupId}"`);
 
     const handles = getResizeHandleElementsForGroup(groupId);
+    assert(handles);
+
     const cleanupFunctions = handles.map((handle) => {
-      const handleId = handle.getAttribute("data-panel-resize-handle-id")!;
+      const handleId = handle.getAttribute("data-panel-resize-handle-id");
+      assert(handleId);
 
       const [idBefore, idAfter] = getResizeHandlePanelIds(
         groupId,
@@ -130,33 +131,21 @@ export function useWindowSplitterPanelGroupBehavior({
             );
             if (index >= 0) {
               const panelData = panelDataArray[index];
+              assert(panelData);
+
               const size = layout[index];
-              if (size != null && panelData.constraints.collapsible) {
-                const groupSizePixels = getAvailableGroupSizePixels(groupId);
-
-                const collapsedSize =
-                  getPercentageSizeFromMixedSizes(
-                    {
-                      sizePercentage:
-                        panelData.constraints.collapsedSizePercentage,
-                      sizePixels: panelData.constraints.collapsedSizePixels,
-                    },
-                    groupSizePixels
-                  ) ?? 0;
-                const minSize =
-                  getPercentageSizeFromMixedSizes(
-                    {
-                      sizePercentage: panelData.constraints.minSizePercentage,
-                      sizePixels: panelData.constraints.minSizePixels,
-                    },
-                    groupSizePixels
-                  ) ?? 0;
 
+              const {
+                collapsedSize = 0,
+                collapsible,
+                minSize = 0,
+              } = panelData.constraints;
+
+              if (size != null && collapsible) {
                 const nextLayout = adjustLayoutByDelta({
                   delta: fuzzyNumbersEqual(size, collapsedSize)
                     ? minSize - collapsedSize
                     : collapsedSize - size,
-                  groupSizePixels,
                   layout,
                   panelConstraints: panelDataArray.map(
                     (panelData) => panelData.constraints

package/src/index.ts

@@ -1,8 +1,7 @@
 import { Panel } from "./Panel";
 import { PanelGroup } from "./PanelGroup";
 import { PanelResizeHandle } from "./PanelResizeHandle";
-
-import type { MixedSizes } from "./types";
+import { assert } from "./utils/assert";
 
 import type {
   ImperativePanelHandle,
@@ -26,7 +25,6 @@ export {
   // TypeScript types
   ImperativePanelGroupHandle,
   ImperativePanelHandle,
-  MixedSizes,
   PanelGroupOnLayout,
   PanelGroupProps,
   PanelGroupStorage,
@@ -37,6 +35,9 @@ export {
   PanelResizeHandleOnDragging,
   PanelResizeHandleProps,
 
+  // Utiltiy methods
+  assert,
+
   // React components
   Panel,
   PanelGroup,

package/src/types.ts

@@ -1,13 +1,4 @@
 export type Direction = "horizontal" | "vertical";
 
-export type MixedSizes = {
-  sizePercentage: number;
-  sizePixels: number;
-};
-
 export type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent;
 export type ResizeHandler = (event: ResizeEvent) => void;
-
-export type DataAttributes = {
-  [attribute: string]: string | number | boolean | undefined;
-};