Resizable

1'use client';
2
3import * as React from 'react';
4import { cn } from '../lib/cn';
5
6type ResizableDirection = 'horizontal' | 'vertical';
7
8interface PanelConstraints {
9  defaultSize?: number;
10  minSize: number;
11  maxSize: number;
12}
13
14interface ResizableContextValue {
15  direction: ResizableDirection;
16  sizes: number[];
17  constraints: PanelConstraints[];
18  panelIds: string[];
19  containerRef: React.RefObject<HTMLDivElement | null>;
20  resizeAt: (handleIndex: number, delta: number) => void;
21  resizeTo: (handleIndex: number, target: number) => void;
22  setDragging: (dragging: boolean) => void;
23}
24
25const ResizableContext = React.createContext<ResizableContextValue | null>(null);
26const PanelIndexContext = React.createContext<number>(-1);
27const HandleIndexContext = React.createContext<number>(-1);
28
29function useResizableContext(): ResizableContextValue {
30  const context = React.use(ResizableContext);
31  if (!context) throw new Error('Resizable parts must be used within Resizable');
32  return context;
33}
34
35function clamp(value: number, min: number, max: number): number {
36  return Math.min(Math.max(value, min), max);
37}
38
39function initialSizes(constraints: PanelConstraints[]): number[] {
40  const assigned = constraints.map((panel) => panel.defaultSize);
41  const used = assigned.reduce<number>((total, size) => total + (size ?? 0), 0);
42  const missing = assigned.filter((size) => size === undefined).length;
43  const remainder = Math.max(100 - used, 0);
44  const share = missing > 0 ? remainder / missing : 0;
45
46  const sizes = assigned.map((size, index) => {
47    const panel = constraints[index];
48    const proposed = size ?? share;
49    return panel ? clamp(proposed, panel.minSize, panel.maxSize) : proposed;
50  });
51
52  const total = sizes.reduce((sum, size) => sum + size, 0);
53  return total > 0 ? sizes.map((size) => (size / total) * 100) : sizes;
54}
55
56const ID_SEPARATOR = '\u001f';
57
58function parseConstraints(key: string): PanelConstraints[] {
59  if (!key) return [];
60  return key.split('|').map((entry) => {
61    const [defaultSize = '', minSize = '10', maxSize = '100'] = entry.split(':');
62    return {
63      defaultSize: defaultSize === '' ? undefined : Number(defaultSize),
64      minSize: Number(minSize),
65      maxSize: Number(maxSize),
66    };
67  });
68}
69
70interface ResizableProps extends React.HTMLAttributes<HTMLDivElement> {
71  direction?: ResizableDirection;
72  onLayout?: (sizes: number[]) => void;
73}
74
75interface ResizablePanelProps extends React.HTMLAttributes<HTMLDivElement> {
76  defaultSize?: number;
77  minSize?: number;
78  maxSize?: number;
79}
80
81const ResizableRoot = ({
82  direction = 'horizontal',
83  onLayout,
84  className,
85  children,
86  ref,
87  ...props
88}: ResizableProps & { ref?: React.Ref<HTMLDivElement> }) => {
89  const containerRef = React.useRef<HTMLDivElement>(null);
90  const [dragging, setDragging] = React.useState(false);
91  const baseId = React.useId();
92
93  const childArray = React.Children.toArray(children);
94  const isPanel = (child: React.ReactNode): child is React.ReactElement<ResizablePanelProps> =>
95    React.isValidElement(child) && child.type === ResizablePanel;
96  const panelPositions = childArray.flatMap((child, position) =>
97    isPanel(child) ? [position] : [],
98  );
99  const panels = childArray.filter(isPanel);
100  const items = childArray.map((child, position) => {
101    if (!React.isValidElement(child)) return child;
102
103    if (child.type === ResizablePanel) {
104      return (
105        <PanelIndexContext key={child.key} value={panelPositions.indexOf(position)}>
106          {child}
107        </PanelIndexContext>
108      );
109    }
110
111    if (child.type === ResizableHandle) {
112      const panelsBefore = panelPositions.filter((panel) => panel < position).length;
113      return (
114        <HandleIndexContext key={child.key} value={panelsBefore - 1}>
115          {child}
116        </HandleIndexContext>
117      );
118    }
119
120    return child;
121  });
122
123  const constraintsKey = panels
124    .map((panel) =>
125      [panel.props.defaultSize ?? '', panel.props.minSize ?? 10, panel.props.maxSize ?? 100].join(
126        ':',
127      ),
128    )
129    .join('|');
130  const panelIdsKey = panels
131    .map((panel, index) => panel.props.id ?? `${baseId}-panel-${index}`)
132    .join(ID_SEPARATOR);
133  const constraints = React.useMemo(() => parseConstraints(constraintsKey), [constraintsKey]);
134  const panelIds = React.useMemo(
135    () => (panelIdsKey ? panelIdsKey.split(ID_SEPARATOR) : []),
136    [panelIdsKey],
137  );
138
139  const fallbackSizes = React.useMemo(
140    () => initialSizes(parseConstraints(constraintsKey)),
141    [constraintsKey],
142  );
143  const [sizes, setSizes] = React.useState<number[]>(fallbackSizes);
144  const layout = sizes.length === fallbackSizes.length ? sizes : fallbackSizes;
145
146  const onLayoutRef = React.useRef(onLayout);
147  const constraintsRef = React.useRef(constraints);
148
149  React.useLayoutEffect(() => {
150    onLayoutRef.current = onLayout;
151    constraintsRef.current = constraints;
152  });
153
154  const resizeBy = React.useCallback(
155    (handleIndex: number, getDelta: (before: number) => number) => {
156      setSizes((previous) => {
157        const current =
158          previous.length === constraintsRef.current.length
159            ? previous
160            : initialSizes(constraintsRef.current);
161        const before = current[handleIndex];
162        const after = current[handleIndex + 1];
163        const beforeRule = constraintsRef.current[handleIndex];
164        const afterRule = constraintsRef.current[handleIndex + 1];
165        if (before === undefined || after === undefined || !beforeRule || !afterRule) {
166          return previous;
167        }
168
169        const maxGrow = Math.min(beforeRule.maxSize - before, after - afterRule.minSize);
170        const maxShrink = Math.min(before - beforeRule.minSize, afterRule.maxSize - after);
171        const applied = clamp(getDelta(before), -maxShrink, maxGrow);
172        if (applied === 0) return previous;
173
174        const next = [...current];
175        next[handleIndex] = before + applied;
176        next[handleIndex + 1] = after - applied;
177        return next;
178      });
179    },
180    [],
181  );
182
183  const resizeAt = React.useCallback(
184    (handleIndex: number, delta: number) => resizeBy(handleIndex, () => delta),
185    [resizeBy],
186  );
187
188  const resizeTo = React.useCallback(
189    (handleIndex: number, target: number) => resizeBy(handleIndex, (before) => target - before),
190    [resizeBy],
191  );
192
193  const initialSizesRef = React.useRef(sizes);
194  React.useEffect(() => {
195    if (sizes === initialSizesRef.current) return;
196    onLayoutRef.current?.(sizes);
197  }, [sizes]);
198
199  const context = React.useMemo(
200    () => ({
201      direction,
202      sizes: layout,
203      constraints,
204      panelIds,
205      containerRef,
206      resizeAt,
207      resizeTo,
208      setDragging,
209    }),
210    [direction, layout, constraints, panelIds, resizeAt, resizeTo],
211  );
212
213  return (
214    <ResizableContext value={context}>
215      <div
216        ref={(node) => {
217          containerRef.current = node;
218          if (typeof ref === 'function') ref(node);
219          else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
220        }}
221        data-slot="resizable"
222        data-direction={direction}
223        data-dragging={dragging ? '' : undefined}
224        className={cn(
225          'flex size-full data-[direction=vertical]:flex-col data-[dragging]:select-none',
226          className,
227        )}
228        {...props}
229      >
230        {items}
231      </div>
232    </ResizableContext>
233  );
234};
235ResizableRoot.displayName = 'Resizable';
236
237const ResizablePanel = ({
238  defaultSize: _defaultSize,
239  minSize: _minSize,
240  maxSize: _maxSize,
241  className,
242  style,
243  id,
244  ref,
245  ...props
246}: ResizablePanelProps & { ref?: React.Ref<HTMLDivElement> }) => {
247  const { sizes, direction, panelIds } = useResizableContext();
248  const index = React.use(PanelIndexContext);
249  const size = sizes[index] ?? 0;
250
251  return (
252    <div
253      ref={ref}
254      id={id ?? panelIds[index]}
255      data-slot="resizable-panel"
256      data-direction={direction}
257      style={{ flex: `${size} 1 0px`, ...style }}
258      className={cn('min-h-0 min-w-0 overflow-hidden', className)}
259      {...props}
260    />
261  );
262};
263ResizablePanel.displayName = 'ResizablePanel';
264
265interface ResizableHandleProps extends React.HTMLAttributes<HTMLDivElement> {
266  withHandle?: boolean;
267  disabled?: boolean;
268  step?: number;
269  label?: string;
270}
271
272const ResizableHandle = ({
273  withHandle = false,
274  disabled = false,
275  step = 2,
276  label = 'Resize panels',
277  className,
278  onPointerDown,
279  onPointerMove,
280  onPointerUp,
281  onKeyDown,
282  ref,
283  ...props
284}: ResizableHandleProps & { ref?: React.Ref<HTMLDivElement> }) => {
285  const { direction, sizes, constraints, panelIds, containerRef, resizeAt, resizeTo, setDragging } =
286    useResizableContext();
287  const index = React.use(HandleIndexContext);
288  const dragRef = React.useRef<{
289    start: number;
290    before: number;
291    total: number;
292    pointer: number;
293  } | null>(null);
294  const frameRef = React.useRef(0);
295  const [active, setActive] = React.useState(false);
296  const isHorizontal = direction === 'horizontal';
297
298  const before = sizes[index] ?? 0;
299  const rule = constraints[index];
300
301  const containerSize = () => {
302    const container = containerRef.current;
303    if (!container) return 0;
304    return isHorizontal ? container.clientWidth : container.clientHeight;
305  };
306
307  React.useEffect(
308    () => () => {
309      if (frameRef.current) cancelAnimationFrame(frameRef.current);
310    },
311    [],
312  );
313
314  const applyDrag = () => {
315    frameRef.current = 0;
316    const drag = dragRef.current;
317    if (!drag || drag.total === 0) return;
318    const deltaPercent = ((drag.pointer - drag.start) / drag.total) * 100;
319    resizeTo(index, drag.before + deltaPercent);
320  };
321
322  const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
323    onPointerDown?.(event);
324    if (disabled || event.defaultPrevented || event.button !== 0) return;
325    event.preventDefault();
326    event.currentTarget.setPointerCapture(event.pointerId);
327    const start = isHorizontal ? event.clientX : event.clientY;
328    dragRef.current = { start, before, total: containerSize(), pointer: start };
329    setDragging(true);
330    setActive(true);
331  };
332
333  const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
334    onPointerMove?.(event);
335    const drag = dragRef.current;
336    if (!drag) return;
337    drag.pointer = isHorizontal ? event.clientX : event.clientY;
338    if (!frameRef.current) frameRef.current = requestAnimationFrame(applyDrag);
339  };
340
341  const handlePointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
342    onPointerUp?.(event);
343    if (!dragRef.current) return;
344    if (frameRef.current) {
345      cancelAnimationFrame(frameRef.current);
346      applyDrag();
347    }
348    dragRef.current = null;
349    setDragging(false);
350    setActive(false);
351    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
352      event.currentTarget.releasePointerCapture(event.pointerId);
353    }
354  };
355
356  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
357    onKeyDown?.(event);
358    if (disabled || event.defaultPrevented) return;
359    const grow = isHorizontal ? 'ArrowRight' : 'ArrowDown';
360    const shrink = isHorizontal ? 'ArrowLeft' : 'ArrowUp';
361    const amount = event.shiftKey ? step * 5 : step;
362
363    if (event.key === grow) {
364      event.preventDefault();
365      resizeAt(index, amount);
366    } else if (event.key === shrink) {
367      event.preventDefault();
368      resizeAt(index, -amount);
369    } else if (event.key === 'Home') {
370      event.preventDefault();
371      resizeAt(index, -100);
372    } else if (event.key === 'End') {
373      event.preventDefault();
374      resizeAt(index, 100);
375    }
376  };
377
378  return (
379    <div
380      ref={ref}
381      role="separator"
382      tabIndex={disabled ? -1 : 0}
383      aria-label={label}
384      aria-controls={panelIds[index]}
385      aria-orientation={isHorizontal ? 'vertical' : 'horizontal'}
386      aria-valuenow={Math.round(before)}
387      aria-valuemin={rule ? Math.round(rule.minSize) : 0}
388      aria-valuemax={rule ? Math.round(rule.maxSize) : 100}
389      aria-disabled={disabled || undefined}
390      data-slot="resizable-handle"
391      data-direction={direction}
392      data-disabled={disabled ? '' : undefined}
393      data-active={active ? '' : undefined}
394      onPointerDown={handlePointerDown}
395      onPointerMove={handlePointerMove}
396      onPointerUp={handlePointerUp}
397      onPointerCancel={handlePointerUp}
398      onKeyDown={handleKeyDown}
399      className={cn(
400        'group/handle bg-border focus-visible:ring-ring ring-offset-background relative flex shrink-0 touch-none items-center justify-center outline-none focus-visible:ring-2 focus-visible:ring-offset-1 data-[disabled]:pointer-events-none',
401        isHorizontal
402          ? 'w-px cursor-col-resize after:absolute after:inset-y-0 after:left-1/2 after:w-2 after:-translate-x-1/2 pointer-coarse:after:w-6'
403          : 'h-px w-full cursor-row-resize after:absolute after:inset-x-0 after:top-1/2 after:h-2 after:-translate-y-1/2 pointer-coarse:after:h-6',
404        className,
405      )}
406      {...props}
407    >
408      {withHandle && (
409        <span
410          aria-hidden="true"
411          className={cn(
412            'bg-border-interactive/70 group-hover/handle:bg-foreground/85 group-data-[active]/handle:bg-foreground/85 group-focus-visible/handle:bg-ring z-10 shrink-0 rounded-full transition-[width,height,background-color] duration-200 motion-reduce:transition-none',
413            isHorizontal
414              ? 'h-7 w-[3px] group-hover/handle:h-11 group-data-[active]/handle:h-11'
415              : 'h-[3px] w-7 group-hover/handle:w-11 group-data-[active]/handle:w-11',
416          )}
417        />
418      )}
419    </div>
420  );
421};
422ResizableHandle.displayName = 'ResizableHandle';
423
424const Resizable = Object.assign(ResizableRoot, {
425  Panel: ResizablePanel,
426  Handle: ResizableHandle,
427});
428
429export { Resizable, useResizableContext };
430export type { ResizableProps, ResizablePanelProps, ResizableHandleProps, ResizableDirection };