Resizable Panels

1"use client";
2 
3import {
4  Children,
5  createContext,
6  isValidElement,
7  useCallback,
8  useContext,
9  useEffect,
10  useLayoutEffect,
11  useRef,
12  useState,
13} from "react";
14import { mergeProps } from "@base-ui/react/merge-props";
15import { useRender } from "@base-ui/react/use-render";
16import type * as React from "react";
17import { cn } from "@/lib/utils";
18 
19type PanelSide = "left" | "right";
20 
21interface PanelLayout {
22  width: number;
23  min: number;
24  max: number;
25  open: boolean;
26  onResize: (width: number) => void;
27}
28 
29interface ResizablePanelsContextValue {
30  left?: PanelLayout;
31  right?: PanelLayout;
32}
33 
34const ResizablePanelsContext =
35  createContext<ResizablePanelsContextValue | null>(null);
36 
37function clamp(value: number, min: number, max: number): number {
38  return Math.min(Math.max(value, min), max);
39}
40 
41export function usePanelWidth(
42  key: string,
43  defaultWidth: number,
44  min: number,
45  max: number,
46): readonly [number, (width: number) => void] {
47  const [width, setWidth] = useState(() => clamp(defaultWidth, min, max));
48  useEffect(() => {
49    const stored = Number.parseFloat(window.localStorage.getItem(key) ?? "");
50    const initialWidth = Number.isFinite(stored)
51      ? clamp(stored, min, max)
52      : clamp(defaultWidth, min, max);
53    setWidth(initialWidth);
54    window.localStorage.setItem(key, String(initialWidth));
55  }, [defaultWidth, key, max, min]);
56  const updateWidth = useCallback(
57    (nextWidth: number) => {
58      const clampedWidth = clamp(nextWidth, min, max);
59      setWidth(clampedWidth);
60      window.localStorage.setItem(key, String(clampedWidth));
61    },
62    [key, max, min],
63  );
64 
65  return [width, updateWidth] as const;
66}
67 
68export interface SidePanelProps extends useRender.ComponentProps<"div"> {
69  side: PanelSide;
70  open: boolean;
71  width: number;
72  min: number;
73  max: number;
74  onResize: (width: number) => void;
75}
76 
77export function SidePanel({
78  side,
79  open: _open,
80  width: _width,
81  min: _min,
82  max: _max,
83  onResize: _onResize,
84  children,
85  className,
86  style,
87  render,
88  ...props
89}: SidePanelProps): React.ReactElement {
90  const layout = useContext(ResizablePanelsContext)?.[side];
91  const width = layout?.width ?? 0;
92  const defaultProps = {
93    "data-slot": "resizable-side-panel-content",
94    "aria-hidden": !layout?.open || undefined,
95    inert: !layout?.open,
96    className: cn(
97      "absolute inset-y-0",
98      side === "left" ? "left-0" : "right-0",
99      className,
100    ),
101    style: { ...style, width },
102    children,
103  };
104// … truncated