react-resizable-panels 2.1.6 → 2.1.8

package/src/Panel.ts

@@ -1,259 +0,0 @@
-import { isBrowser } from "#is-browser";
-import { isDevelopment } from "#is-development";
-import { PanelGroupContext } from "./PanelGroupContext";
-import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
-import useUniqueId from "./hooks/useUniqueId";
-import {
-  ForwardedRef,
-  HTMLAttributes,
-  PropsWithChildren,
-  ReactElement,
-  createElement,
-  forwardRef,
-  useContext,
-  useImperativeHandle,
-  useRef,
-} from "./vendor/react";
-
-export type PanelOnCollapse = () => void;
-export type PanelOnExpand = () => void;
-export type PanelOnResize = (
-  size: number,
-  prevSize: number | undefined
-) => void;
-
-export type PanelCallbacks = {
-  onCollapse?: PanelOnCollapse;
-  onExpand?: PanelOnExpand;
-  onResize?: PanelOnResize;
-};
-
-export type PanelConstraints = {
-  collapsedSize?: number | undefined;
-  collapsible?: boolean | undefined;
-  defaultSize?: number | undefined;
-  maxSize?: number | undefined;
-  minSize?: number | undefined;
-};
-
-export type PanelData = {
-  callbacks: PanelCallbacks;
-  constraints: PanelConstraints;
-  id: string;
-  idIsFromProps: boolean;
-  order: number | undefined;
-};
-
-export type ImperativePanelHandle = {
-  collapse: () => void;
-  expand: (minSize?: number) => void;
-  getId(): string;
-  getSize(): number;
-  isCollapsed: () => boolean;
-  isExpanded: () => boolean;
-  resize: (size: number) => void;
-};
-
-export type PanelProps<
-  T extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap,
-> = Omit<HTMLAttributes<HTMLElementTagNameMap[T]>, "id" | "onResize"> &
-  PropsWithChildren<{
-    className?: string;
-    collapsedSize?: number | undefined;
-    collapsible?: boolean | undefined;
-    defaultSize?: number | undefined;
-    id?: string;
-    maxSize?: number | undefined;
-    minSize?: number | undefined;
-    onCollapse?: PanelOnCollapse;
-    onExpand?: PanelOnExpand;
-    onResize?: PanelOnResize;
-    order?: number;
-    style?: object;
-    tagName?: T;
-  }>;
-
-export function PanelWithForwardedRef({
-  children,
-  className: classNameFromProps = "",
-  collapsedSize,
-  collapsible,
-  defaultSize,
-  forwardedRef,
-  id: idFromProps,
-  maxSize,
-  minSize,
-  onCollapse,
-  onExpand,
-  onResize,
-  order,
-  style: styleFromProps,
-  tagName: Type = "div",
-  ...rest
-}: PanelProps & {
-  forwardedRef: ForwardedRef<ImperativePanelHandle>;
-}): ReactElement {
-  const context = useContext(PanelGroupContext);
-  if (context === null) {
-    throw Error(
-      `Panel components must be rendered within a PanelGroup container`
-    );
-  }
-
-  const {
-    collapsePanel,
-    expandPanel,
-    getPanelSize,
-    getPanelStyle,
-    groupId,
-    isPanelCollapsed,
-    reevaluatePanelConstraints,
-    registerPanel,
-    resizePanel,
-    unregisterPanel,
-  } = context;
-
-  const panelId = useUniqueId(idFromProps);
-
-  const panelDataRef = useRef<PanelData>({
-    callbacks: {
-      onCollapse,
-      onExpand,
-      onResize,
-    },
-    constraints: {
-      collapsedSize,
-      collapsible,
-      defaultSize,
-      maxSize,
-      minSize,
-    },
-    id: panelId,
-    idIsFromProps: idFromProps !== undefined,
-    order,
-  });
-
-  const devWarningsRef = useRef<{
-    didLogMissingDefaultSizeWarning: boolean;
-  }>({
-    didLogMissingDefaultSizeWarning: false,
-  });
-
-  // Normally we wouldn't log a warning during render,
-  // but effects don't run on the server, so we can't do it there
-  if (isDevelopment) {
-    if (!devWarningsRef.current.didLogMissingDefaultSizeWarning) {
-      if (!isBrowser && defaultSize == null) {
-        devWarningsRef.current.didLogMissingDefaultSizeWarning = true;
-        console.warn(
-          `WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`
-        );
-      }
-    }
-  }
-
-  useIsomorphicLayoutEffect(() => {
-    const { callbacks, constraints } = panelDataRef.current;
-
-    const prevConstraints = { ...constraints };
-
-    panelDataRef.current.id = panelId;
-    panelDataRef.current.idIsFromProps = idFromProps !== undefined;
-    panelDataRef.current.order = order;
-
-    callbacks.onCollapse = onCollapse;
-    callbacks.onExpand = onExpand;
-    callbacks.onResize = onResize;
-
-    constraints.collapsedSize = collapsedSize;
-    constraints.collapsible = collapsible;
-    constraints.defaultSize = defaultSize;
-    constraints.maxSize = maxSize;
-    constraints.minSize = minSize;
-
-    // If constraints have changed, we should revisit panel sizes.
-    // This is uncommon but may happen if people are trying to implement pixel based constraints.
-    if (
-      prevConstraints.collapsedSize !== constraints.collapsedSize ||
-      prevConstraints.collapsible !== constraints.collapsible ||
-      prevConstraints.maxSize !== constraints.maxSize ||
-      prevConstraints.minSize !== constraints.minSize
-    ) {
-      reevaluatePanelConstraints(panelDataRef.current, prevConstraints);
-    }
-  });
-
-  useIsomorphicLayoutEffect(() => {
-    const panelData = panelDataRef.current;
-
-    registerPanel(panelData);
-
-    return () => {
-      unregisterPanel(panelData);
-    };
-  }, [order, panelId, registerPanel, unregisterPanel]);
-
-  useImperativeHandle(
-    forwardedRef,
-    () => ({
-      collapse: () => {
-        collapsePanel(panelDataRef.current);
-      },
-      expand: (minSize?: number) => {
-        expandPanel(panelDataRef.current, minSize);
-      },
-      getId() {
-        return panelId;
-      },
-      getSize() {
-        return getPanelSize(panelDataRef.current);
-      },
-      isCollapsed() {
-        return isPanelCollapsed(panelDataRef.current);
-      },
-      isExpanded() {
-        return !isPanelCollapsed(panelDataRef.current);
-      },
-      resize: (size: number) => {
-        resizePanel(panelDataRef.current, size);
-      },
-    }),
-    [
-      collapsePanel,
-      expandPanel,
-      getPanelSize,
-      isPanelCollapsed,
-      panelId,
-      resizePanel,
-    ]
-  );
-
-  const style = getPanelStyle(panelDataRef.current, defaultSize);
-
-  return createElement(Type, {
-    ...rest,
-
-    children,
-    className: classNameFromProps,
-    id: idFromProps,
-    style: {
-      ...style,
-      ...styleFromProps,
-    },
-
-    // CSS selectors
-    "data-panel": "",
-    "data-panel-collapsible": collapsible || undefined,
-    "data-panel-group-id": groupId,
-    "data-panel-id": panelId,
-    "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1),
-  });
-}
-
-export const Panel = forwardRef<ImperativePanelHandle, PanelProps>(
-  (props: PanelProps, ref: ForwardedRef<ImperativePanelHandle>) =>
-    createElement(PanelWithForwardedRef, { ...props, forwardedRef: ref })
-);
-
-PanelWithForwardedRef.displayName = "Panel";
-Panel.displayName = "forwardRef(Panel)";

package/src/PanelGroup.test.tsx

@@ -1,443 +0,0 @@
-// @ts-expect-error This is an experimental API
-// eslint-disable-next-line no-restricted-imports
-import { unstable_Activity as Activity, Fragment } from "react";
-import { Root, createRoot } from "react-dom/client";
-import { act } from "react-dom/test-utils";
-import {
-  ImperativePanelGroupHandle,
-  ImperativePanelHandle,
-  Panel,
-  PanelGroup,
-  PanelResizeHandle,
-  getPanelElement,
-} from ".";
-import { assert } from "./utils/assert";
-import { getPanelGroupElement } from "./utils/dom/getPanelGroupElement";
-import {
-  mockPanelGroupOffsetWidthAndHeight,
-  verifyAttribute,
-} from "./utils/test-utils";
-import { createRef } from "./vendor/react";
-
-describe("PanelGroup", () => {
-  let expectedWarnings: string[] = [];
-  let root: Root;
-  let container: HTMLElement;
-  let uninstallMockOffsetWidthAndHeight: () => void;
-
-  function expectWarning(expectedMessage: string) {
-    expectedWarnings.push(expectedMessage);
-  }
-
-  beforeEach(() => {
-    // @ts-expect-error
-    global.IS_REACT_ACT_ENVIRONMENT = true;
-
-    // JSDom doesn't support element sizes
-    uninstallMockOffsetWidthAndHeight = mockPanelGroupOffsetWidthAndHeight();
-
-    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(() => {
-    uninstallMockOffsetWidthAndHeight();
-
-    jest.clearAllMocks();
-    jest.resetModules();
-
-    act(() => {
-      root.unmount();
-    });
-
-    expect(expectedWarnings).toHaveLength(0);
-  });
-
-  it("should recalculate layout after being hidden by Activity", () => {
-    const panelRef = createRef<ImperativePanelHandle>();
-
-    let mostRecentLayout: number[] | null = null;
-
-    const onLayout = (layout: number[]) => {
-      mostRecentLayout = layout;
-    };
-
-    act(() => {
-      root.render(
-        <Activity mode="visible">
-          <PanelGroup direction="horizontal" onLayout={onLayout}>
-            <Panel id="left" ref={panelRef} />
-            <PanelResizeHandle />
-            <Panel defaultSize={40} id="right" />
-          </PanelGroup>
-        </Activity>
-      );
-    });
-
-    expect(mostRecentLayout).toEqual([60, 40]);
-    expect(panelRef.current?.getSize()).toEqual(60);
-
-    const leftPanelElement = getPanelElement("left");
-    const rightPanelElement = getPanelElement("right");
-    expect(leftPanelElement?.getAttribute("data-panel-size")).toBe("60.0");
-    expect(rightPanelElement?.getAttribute("data-panel-size")).toBe("40.0");
-
-    act(() => {
-      root.render(
-        <Activity mode="hidden">
-          <PanelGroup direction="horizontal" onLayout={onLayout}>
-            <Panel id="left" ref={panelRef} />
-            <PanelResizeHandle />
-            <Panel defaultSize={40} id="right" />
-          </PanelGroup>
-        </Activity>
-      );
-    });
-
-    act(() => {
-      root.render(
-        <Activity mode="visible">
-          <PanelGroup direction="horizontal" onLayout={onLayout}>
-            <Panel id="left" ref={panelRef} />
-            <PanelResizeHandle />
-            <Panel defaultSize={40} id="right" />
-          </PanelGroup>
-        </Activity>
-      );
-    });
-
-    expect(mostRecentLayout).toEqual([60, 40]);
-    expect(panelRef.current?.getSize()).toEqual(60);
-
-    // This bug is only observable in the DOM; callbacks will not re-fire
-    expect(leftPanelElement?.getAttribute("data-panel-size")).toBe("60.0");
-    expect(rightPanelElement?.getAttribute("data-panel-size")).toBe("40.0");
-  });
-
-  // github.com/bvaughn/react-resizable-panels/issues/303
-  it("should recalculate layout after panels are changed", () => {
-    let mostRecentLayout: number[] | null = null;
-
-    const onLayout = (layout: number[]) => {
-      mostRecentLayout = layout;
-    };
-
-    act(() => {
-      root.render(
-        <PanelGroup direction="vertical" onLayout={onLayout}>
-          <Panel id="foo" minSize={30} order={0} />
-          <PanelResizeHandle />
-          <Panel id="bar" minSize={70} order={1} />
-        </PanelGroup>
-      );
-    });
-    expect(mostRecentLayout).toEqual([30, 70]);
-
-    act(() => {
-      root.render(
-        <PanelGroup direction="vertical" onLayout={onLayout}>
-          <Panel id="bar" minSize={70} order={0} />
-        </PanelGroup>
-      );
-    });
-    expect(mostRecentLayout).toEqual([100]);
-  });
-
-  describe("imperative handle API", () => {
-    it("should report the most recently rendered group id", () => {
-      const ref = createRef<ImperativePanelGroupHandle>();
-
-      act(() => {
-        root.render(<PanelGroup direction="horizontal" id="one" ref={ref} />);
-      });
-
-      expect(ref.current?.getId()).toBe("one");
-
-      act(() => {
-        root.render(<PanelGroup direction="horizontal" id="two" ref={ref} />);
-      });
-
-      expect(ref.current?.getId()).toBe("two");
-    });
-
-    it("should get and set layouts", () => {
-      const ref = createRef<ImperativePanelGroupHandle>();
-
-      let mostRecentLayout: number[] | null = null;
-
-      const onLayout = (layout: number[]) => {
-        mostRecentLayout = layout;
-      };
-
-      act(() => {
-        root.render(
-          <PanelGroup direction="horizontal" onLayout={onLayout} ref={ref}>
-            <Panel defaultSize={50} id="a" />
-            <PanelResizeHandle />
-            <Panel defaultSize={50} id="b" />
-          </PanelGroup>
-        );
-      });
-
-      expect(mostRecentLayout).toEqual([50, 50]);
-
-      act(() => {
-        ref.current?.setLayout([25, 75]);
-      });
-
-      expect(mostRecentLayout).toEqual([25, 75]);
-    });
-  });
-
-  it("should support ...rest attributes", () => {
-    act(() => {
-      root.render(
-        <PanelGroup
-          data-test-name="foo"
-          direction="horizontal"
-          id="group"
-          tabIndex={123}
-          title="bar"
-        >
-          <Panel />
-          <PanelResizeHandle />
-          <Panel />
-        </PanelGroup>
-      );
-    });
-
-    const element = getPanelGroupElement("group", container);
-    assert(element, "");
-    expect(element.tabIndex).toBe(123);
-    expect(element.getAttribute("data-test-name")).toBe("foo");
-    expect(element.title).toBe("bar");
-  });
-
-  describe("callbacks", () => {
-    describe("onLayout", () => {
-      it("should be called with the initial group layout on mount", () => {
-        let onLayout = jest.fn();
-
-        act(() => {
-          root.render(
-            <PanelGroup direction="horizontal" onLayout={onLayout}>
-              <Panel defaultSize={35} />
-              <PanelResizeHandle />
-              <Panel defaultSize={65} />
-            </PanelGroup>
-          );
-        });
-
-        expect(onLayout).toHaveBeenCalledTimes(1);
-        expect(onLayout).toHaveBeenCalledWith([35, 65]);
-      });
-
-      it("should be called any time the group layout changes", () => {
-        let onLayout = jest.fn();
-        let panelGroupRef = createRef<ImperativePanelGroupHandle>();
-        let panelRef = createRef<ImperativePanelHandle>();
-
-        act(() => {
-          root.render(
-            <PanelGroup
-              direction="horizontal"
-              onLayout={onLayout}
-              ref={panelGroupRef}
-            >
-              <Panel defaultSize={35} ref={panelRef} />
-              <PanelResizeHandle />
-              <Panel defaultSize={65} />
-            </PanelGroup>
-          );
-        });
-
-        onLayout.mockReset();
-
-        act(() => {
-          panelGroupRef.current?.setLayout([25, 75]);
-        });
-
-        expect(onLayout).toHaveBeenCalledTimes(1);
-        expect(onLayout).toHaveBeenCalledWith([25, 75]);
-
-        onLayout.mockReset();
-
-        act(() => {
-          panelRef.current?.resize(50);
-        });
-
-        expect(onLayout).toHaveBeenCalledTimes(1);
-        expect(onLayout).toHaveBeenCalledWith([50, 50]);
-      });
-    });
-  });
-
-  describe("data attributes", () => {
-    it("should initialize with the correct props based attributes", () => {
-      act(() => {
-        root.render(
-          <PanelGroup direction="horizontal" id="test-group"></PanelGroup>
-        );
-      });
-
-      const element = getPanelGroupElement("test-group", container);
-      assert(element, "");
-
-      verifyAttribute(element, "data-panel-group", "");
-      verifyAttribute(element, "data-panel-group-direction", "horizontal");
-      verifyAttribute(element, "data-panel-group-id", "test-group");
-    });
-  });
-
-  describe("a11y", () => {
-    it("should pass explicit id prop to DOM", () => {
-      act(() => {
-        root.render(
-          <PanelGroup direction="horizontal" id="explicit-id">
-            <Panel />
-            <PanelResizeHandle />
-            <Panel />
-          </PanelGroup>
-        );
-      });
-
-      const element = container.querySelector("[data-panel-group]");
-
-      expect(element).not.toBeNull();
-      expect(element?.getAttribute("id")).toBe("explicit-id");
-    });
-
-    it("should not pass auto-generated id prop to DOM", () => {
-      act(() => {
-        root.render(
-          <PanelGroup direction="horizontal">
-            <Panel />
-            <PanelResizeHandle />
-            <Panel />
-          </PanelGroup>
-        );
-      });
-
-      const element = container.querySelector("[data-panel-group]");
-
-      expect(element).not.toBeNull();
-      expect(element?.getAttribute("id")).toBeNull();
-    });
-  });
-
-  describe("DEV warnings", () => {
-    it("should warn about unstable layouts without id and order props", () => {
-      act(() => {
-        root.render(
-          <PanelGroup direction="horizontal">
-            <Panel defaultSize={100} id="a" />
-          </PanelGroup>
-        );
-      });
-
-      expectWarning(
-        "Panel id and order props recommended when panels are dynamically rendered"
-      );
-
-      act(() => {
-        root.render(
-          <PanelGroup direction="horizontal">
-            <Panel defaultSize={50} id="a" />
-            <PanelResizeHandle />
-            <Panel defaultSize={50} id="b" />
-          </PanelGroup>
-        );
-      });
-    });
-
-    it("should warn about missing resize handles", () => {
-      expectWarning(
-        'Missing resize handle for PanelGroup "group-without-handle"'
-      );
-
-      act(() => {
-        root.render(
-          <PanelGroup direction="horizontal" id="group-without-handle">
-            <Panel />
-            <Panel />
-          </PanelGroup>
-        );
-      });
-    });
-
-    it("should warn about an invalid declarative layout", () => {
-      expectWarning("Invalid layout total size: 60%, 80%");
-
-      act(() => {
-        root.render(
-          <PanelGroup direction="horizontal" id="group-without-handle">
-            <Panel defaultSize={60} />
-            <PanelResizeHandle />
-            <Panel defaultSize={80} />
-          </PanelGroup>
-        );
-      });
-    });
-
-    it("should warn about an invalid layout set via the imperative api", () => {
-      const ref = createRef<ImperativePanelGroupHandle>();
-
-      act(() => {
-        root.render(
-          <PanelGroup
-            direction="horizontal"
-            id="group-without-handle"
-            ref={ref}
-          >
-            <Panel defaultSize={30} />
-            <PanelResizeHandle />
-            <Panel defaultSize={70} />
-          </PanelGroup>
-        );
-      });
-
-      expectWarning("Invalid layout total size: 60%, 80%");
-
-      act(() => {
-        ref.current?.setLayout([60, 80]);
-      });
-    });
-
-    it("should warn about an empty layout", () => {
-      act(() => {
-        root.render(
-          <PanelGroup direction="horizontal" id="group-without-handle">
-            <Panel />
-          </PanelGroup>
-        );
-      });
-
-      // Since the layout is empty, no warning is expected (even though the sizes won't total 100%)
-
-      act(() => {
-        root.render(
-          <PanelGroup
-            direction="horizontal"
-            id="group-without-handle"
-          ></PanelGroup>
-        );
-      });
-    });
-  });
-});