react-panel-layout 0.5.2 → 0.6.0

package/src/components/resizer/HorizontalDivider.tsx

@@ -0,0 +1,52 @@
+/**
+ * @file Horizontal divider component
+ */
+import * as React from "react";
+import { useResizeDrag } from "../../modules/resizer/useResizeDrag";
+import { HORIZONTAL_DIVIDER_WIDTH, COLOR_RESIZE_HANDLE_IDLE, COLOR_RESIZE_HANDLE_HOVER, COLOR_RESIZE_HANDLE_ACTIVE } from "../../constants/styles";
+
+export type HorizontalDividerProps = {
+  onResize: (deltaX: number) => void;
+  /** Custom component for the divider */
+  component?: React.ComponentType<React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }>;
+  /** Custom element for the divider */
+  element?: React.ReactElement;
+};
+
+const buildDividerStyle = (state: "idle" | "hover" | "drag"): React.CSSProperties => {
+  const backgroundColor = state === "drag" ? COLOR_RESIZE_HANDLE_ACTIVE : state === "hover" ? COLOR_RESIZE_HANDLE_HOVER : COLOR_RESIZE_HANDLE_IDLE;
+  return {
+    width: HORIZONTAL_DIVIDER_WIDTH,
+    cursor: "col-resize",
+    position: "relative",
+    userSelect: "none",
+    backgroundColor,
+  };
+};
+
+export const HorizontalDivider: React.FC<HorizontalDividerProps> = ({ onResize, component: Component, element }) => {
+  const { ref, isDragging, onPointerDown } = useResizeDrag<HTMLDivElement>({
+    axis: "x",
+    onResize: onResize,
+  });
+  const [hovered, setHovered] = React.useState(false);
+
+  const dividerProps = {
+    ref,
+    style: buildDividerStyle(isDragging ? "drag" : hovered ? "hover" : "idle"),
+    role: "separator" as const,
+    "aria-orientation": "vertical" as const,
+    "data-dragging": isDragging ? "true" : undefined,
+    onPointerDown,
+    onPointerEnter: () => setHovered(true),
+    onPointerLeave: () => setHovered(false),
+  };
+
+  if (element) {
+    return React.cloneElement(element, dividerProps);
+  }
+  if (Component) {
+    return <Component {...dividerProps} />;
+  }
+  return <div {...dividerProps} />;
+};

package/src/components/resizer/ResizeHandle.tsx

@@ -0,0 +1,118 @@
+/**
+ * @file Resize handle component
+ */
+import * as React from "react";
+import { useResizeDrag } from "../../modules/resizer/useResizeDrag";
+import {
+  RESIZE_HANDLE_THICKNESS,
+  RESIZE_HANDLE_Z_INDEX,
+  COLOR_RESIZE_HANDLE_IDLE,
+  COLOR_RESIZE_HANDLE_ACTIVE,
+  COLOR_RESIZE_HANDLE_HOVER,
+} from "../../constants/styles";
+import { useElementComponentWrapper } from "../../hooks/useElementComponentWrapper";
+
+type ResizeHandleDirection = "horizontal" | "vertical";
+
+export type ResizeHandleProps = {
+  /** Direction of resize */
+  direction: ResizeHandleDirection;
+  /** Callback when resize occurs */
+  onResize?: (delta: number) => void;
+  /** Custom component for the handle */
+  component?: React.ComponentType<React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }>;
+  /** Custom element for the handle */
+  element?: React.ReactElement<React.HTMLAttributes<HTMLDivElement>>;
+  /** Optional children rendered inside the handle */
+  children?: React.ReactNode;
+};
+
+const baseResizeHandleStyle: React.CSSProperties = {
+  position: "absolute",
+  zIndex: RESIZE_HANDLE_Z_INDEX,
+};
+
+const sizeStylesByDirection: Record<ResizeHandleDirection, React.CSSProperties> = {
+  vertical: {
+    width: RESIZE_HANDLE_THICKNESS,
+    height: "100%",
+    top: 0,
+    cursor: "col-resize",
+  },
+  horizontal: {
+    width: "100%",
+    height: RESIZE_HANDLE_THICKNESS,
+    left: 0,
+    cursor: "row-resize",
+  },
+};
+
+type ResizeHandleVisualState = "idle" | "hovered" | "dragging";
+
+const backgroundByVisualState: Record<ResizeHandleVisualState, string> = {
+  idle: COLOR_RESIZE_HANDLE_IDLE,
+  hovered: COLOR_RESIZE_HANDLE_HOVER,
+  dragging: COLOR_RESIZE_HANDLE_ACTIVE,
+};
+
+/**
+ * ResizeHandle - Draggable handle for resizing grid areas
+ */
+export const ResizeHandle: React.FC<ResizeHandleProps> = ({
+  direction,
+  onResize,
+  component: Component,
+  element,
+  children,
+}) => {
+  const axis = direction === "vertical" ? "x" : "y";
+  const { ref, isDragging, onPointerDown } = useResizeDrag<HTMLDivElement>({ axis, onResize });
+  const [isHovered, setIsHovered] = React.useState(false);
+  const handlePointerEnter = React.useCallback(() => {
+    setIsHovered(true);
+  }, []);
+  const handlePointerLeave = React.useCallback(() => {
+    setIsHovered(false);
+  }, []);
+
+  const Wrapper = useElementComponentWrapper({
+    element,
+    component: Component,
+  });
+  const visualState: ResizeHandleVisualState = React.useMemo(() => {
+    if (isDragging) {
+      return "dragging";
+    }
+    if (isHovered) {
+      return "hovered";
+    }
+    return "idle";
+  }, [isDragging, isHovered]);
+
+  const style = React.useMemo(() => {
+    return {
+      ...baseResizeHandleStyle,
+      ...sizeStylesByDirection[direction],
+      backgroundColor: backgroundByVisualState[visualState],
+      touchAction: "none",
+    };
+  }, [direction, visualState]);
+
+  return (
+    <Wrapper
+      ref={ref}
+      style={style}
+      role="separator"
+      aria-orientation={direction}
+      aria-hidden={undefined}
+      data-resize-handle="true"
+      data-direction={direction}
+      data-is-dragging={isDragging ? "true" : undefined}
+      onPointerDown={onPointerDown}
+      onPointerEnter={handlePointerEnter}
+      onPointerLeave={handlePointerLeave}
+    >
+      {children}
+    </Wrapper>
+  );
+};

package/src/components/tabs/TabBar.tsx

@@ -0,0 +1,223 @@
+/**
+ * @file Tab bar with drag handles (generic, not panel-specific).
+ */
+import * as React from "react";
+import type { TabBarRenderProps } from "../../modules/panels/state/types";
+import { usePanelInteractions } from "../../modules/panels/interactions/InteractionsContext";
+import { useElementComponentWrapper } from "../../hooks/useElementComponentWrapper";
+import { TabBarTab } from "./TabBarTab";
+
+export type TabBarProps = TabBarRenderProps & {
+  /** Custom component for the tabbar container */
+  component?: React.ComponentType<React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }>;
+  /** Custom element for the tabbar container */
+  element?: React.ReactElement<React.HTMLAttributes<HTMLDivElement>>;
+  /** Custom component for individual tabs */
+  tabComponent?: React.ComponentType<React.ButtonHTMLAttributes<HTMLButtonElement>>;
+  /** Custom element factory for individual tabs */
+  tabElement?: (props: React.ButtonHTMLAttributes<HTMLButtonElement>) => React.ReactElement;
+  /** Request to add a new tab to this group */
+  onAddTab?: (groupId: string) => void;
+  /** Request to close/remove a tab */
+  onCloseTab?: (groupId: string, tabId: string) => void;
+};
+
+const tabbarStyle: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+};
+
+const spacerStyle: React.CSSProperties = {
+  flex: "1 1 auto",
+  alignSelf: "stretch",
+};
+
+export const TabBar: React.FC<TabBarProps> = ({
+  group,
+  onClickTab,
+  onStartDrag,
+  rootRef,
+  component: ContainerComponent,
+  element,
+  tabComponent: TabComponent,
+  tabElement,
+  onAddTab,
+  onCloseTab,
+  doubleClickToAdd,
+}) => {
+  const { isTabDragging, draggingTabId } = usePanelInteractions();
+  const localRef = React.useRef<HTMLDivElement | null>(null);
+
+  const setRefs = React.useCallback(
+    (el: HTMLDivElement | null) => {
+      localRef.current = el;
+      if (!rootRef) {
+        return;
+      }
+      if (typeof rootRef === "function") {
+        rootRef(el);
+        return;
+      }
+      try {
+        // RefObject-like
+        (rootRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
+      } catch {
+        // ignore
+      }
+    },
+    [rootRef],
+  );
+
+  const handleKeyDown = React.useEffectEvent((e: React.KeyboardEvent<HTMLDivElement>) => {
+    const root = localRef.current ?? (e.currentTarget as HTMLDivElement | null);
+    if (!root) {
+      return;
+    }
+    const tabs = Array.from(root.querySelectorAll('[role="tab"]')) as HTMLElement[];
+    if (tabs.length === 0) {
+      return;
+    }
+
+    const focusTabAt = (index: number) => {
+      const clamped = Math.max(0, Math.min(index, tabs.length - 1));
+      const el = tabs[clamped];
+      if (!el) {
+        return;
+      }
+      el.focus();
+    };
+
+    const activeEl = document.activeElement as HTMLElement | null;
+    const currentIndex = activeEl ? tabs.indexOf(activeEl) : tabs.findIndex((el) => el.getAttribute("data-tab-id") === group.activeTabId);
+
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      const next = currentIndex >= 0 ? currentIndex + 1 : 0;
+      focusTabAt(next >= tabs.length ? 0 : next);
+      return;
+    }
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      const prev = currentIndex >= 0 ? currentIndex - 1 : tabs.length - 1;
+      focusTabAt(prev < 0 ? tabs.length - 1 : prev);
+      return;
+    }
+    if (e.key === "Home") {
+      e.preventDefault();
+      focusTabAt(0);
+      return;
+    }
+    if (e.key === "End") {
+      e.preventDefault();
+      focusTabAt(tabs.length - 1);
+      return;
+    }
+
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      const el = currentIndex >= 0 ? tabs[currentIndex] : null;
+      const id = el?.getAttribute("data-tab-id") ?? null;
+      if (id) {
+        onClickTab(id);
+      }
+      return;
+    }
+
+    if (e.key === "Delete" || e.key === "Backspace") {
+      if (onCloseTab) {
+        e.preventDefault();
+        const el = currentIndex >= 0 ? tabs[currentIndex] : null;
+        const id = el?.getAttribute("data-tab-id") ?? null;
+        if (id) {
+          onCloseTab(group.id, id);
+        }
+      }
+      return;
+    }
+
+    const hasModifier = (e.ctrlKey ? 1 : 0) + (e.metaKey ? 1 : 0) > 0;
+    const keyLower = typeof e.key === "string" ? e.key.toLowerCase() : "";
+    if (hasModifier && keyLower === "t") {
+      if (onAddTab) {
+        e.preventDefault();
+        onAddTab(group.id);
+      }
+      return;
+    }
+  });
+
+  React.useEffect(() => {
+    const root = localRef.current;
+    if (!root) {
+      return;
+    }
+    const active = root.querySelector(`[role="tab"][data-tab-id="${group.activeTabId}"]`) as HTMLElement | null;
+    if (active === (document.activeElement as HTMLElement | null)) {
+      return;
+    }
+    // Maintain roving focus: ensure active tab is in the natural focus if none inside has focus
+    const containsFocus = root.contains(document.activeElement);
+    if (!containsFocus && active) {
+      active.focus();
+    }
+  }, [group.activeTabId]);
+
+  const containerProps = {
+    style: tabbarStyle,
+    role: "tablist" as const,
+    "data-tabbar": "true",
+    "data-group-id": group.id,
+    "data-dragging": isTabDragging ? "true" : "false",
+    onKeyDown: handleKeyDown,
+  };
+
+  const Wrapper = useElementComponentWrapper({
+    element,
+    component: ContainerComponent,
+  });
+
+  const renderAddButton = (): React.ReactNode => {
+    if (!onAddTab) {
+      return null;
+    }
+    return (
+      <button
+        type="button"
+        aria-label="Add tab"
+        onClick={() => {
+          onAddTab(group.id);
+        }}
+      >
+        +
+      </button>
+    );
+  };
+
+  const handleTabbarDoubleClick = React.useCallback((): void => {
+    if (doubleClickToAdd && onAddTab) {
+      onAddTab(group.id);
+    }
+  }, [doubleClickToAdd, onAddTab, group.id]);
+
+  return (
+    <Wrapper {...containerProps} ref={setRefs} onDoubleClick={handleTabbarDoubleClick}>
+      {group.tabs.map((tab, index) => (
+        <TabBarTab
+          key={`${group.id}:${tab.id}:${index}`}
+          groupId={group.id}
+          tab={tab}
+          active={group.activeTabId === tab.id}
+          dragging={draggingTabId === tab.id}
+          onClickTab={onClickTab}
+          onStartDrag={onStartDrag}
+          onCloseTab={onCloseTab}
+          tabComponent={TabComponent}
+          tabElement={tabElement}
+          onDoubleClick={(e) => e.stopPropagation()}
+        />
+      ))}
+      <span style={spacerStyle} />
+      {renderAddButton()}
+    </Wrapper>
+  );
+};

package/src/components/tabs/TabBarTab.tsx

@@ -0,0 +1,133 @@
+/**
+ * @file Tab button renderer for TabBar.
+ */
+import * as React from "react";
+import type { TabBarProps } from "./TabBar";
+
+type TabItem = TabBarProps["group"]["tabs"][number];
+
+type TabButtonProps = React.HTMLAttributes<HTMLDivElement> & {
+  "data-tab-id": string;
+  "data-active": "true" | "false";
+  "data-dragging": "true" | "false";
+};
+
+export type TabBarTabProps = {
+  groupId: string;
+  tab: TabItem;
+  active: boolean;
+  dragging: boolean;
+  tabComponent?: TabBarProps["tabComponent"];
+  tabElement?: TabBarProps["tabElement"];
+  onClickTab: TabBarProps["onClickTab"];
+  onStartDrag: TabBarProps["onStartDrag"];
+  onCloseTab?: (groupId: string, tabId: string) => void;
+  onDoubleClick?: (e: React.MouseEvent) => void;
+};
+
+const tabStyle: React.CSSProperties = {
+  display: "inline-flex",
+  alignItems: "center",
+  userSelect: "none",
+};
+
+export const TabBarTab: React.FC<TabBarTabProps> = ({
+  groupId,
+  tab,
+  active,
+  dragging,
+  onClickTab,
+  onStartDrag,
+  onCloseTab,
+  tabComponent: TabComponent,
+  tabElement,
+  onDoubleClick,
+}) => {
+  const handleClick = React.useEffectEvent(() => {
+    onClickTab(tab.id);
+  });
+
+  const handlePointerDown = React.useEffectEvent((e: React.PointerEvent<HTMLDivElement>) => {
+    if (!onStartDrag) {
+      return;
+    }
+    if (e.button !== 0) {
+      return;
+    }
+    onStartDrag(tab.id, groupId, e);
+  });
+
+  const renderCloseButton = (): React.ReactNode => {
+    const hasClose = Boolean(onCloseTab);
+    return (
+      <React.Activity mode={hasClose ? "visible" : "hidden"}>
+        <button
+          type="button"
+          aria-label={`Close tab ${tab.title}`}
+          onClick={(e) => {
+            if (!onCloseTab) {
+              return;
+            }
+            e.stopPropagation();
+            onCloseTab(groupId, tab.id);
+          }}
+          style={{ marginLeft: 6 }}
+          tabIndex={hasClose ? undefined : -1}
+          disabled={!hasClose}
+          aria-hidden={hasClose ? undefined : true}
+        >
+          ×
+        </button>
+      </React.Activity>
+    );
+  };
+
+  const divProps: TabButtonProps = {
+    role: "tab",
+    "aria-selected": active,
+    tabIndex: active ? 0 : -1,
+    style: tabStyle,
+    onClick: handleClick,
+    onPointerDown: handlePointerDown,
+    onDoubleClick,
+    "data-tab-id": tab.id,
+    "data-active": active ? "true" : "false",
+    "data-dragging": dragging ? "true" : "false",
+    children: (
+      <>
+        <span>{tab.title}</span>
+        {renderCloseButton()}
+      </>
+    ),
+  };
+
+  const buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement> = {
+    type: "button",
+    role: "tab",
+    "aria-selected": active,
+    tabIndex: active ? 0 : -1,
+    style: tabStyle,
+    onClick: () => {
+      onClickTab(tab.id);
+    },
+    onPointerDown: (e: React.PointerEvent<HTMLButtonElement>) => {
+      if (!onStartDrag) {
+        return;
+      }
+      if (e.button !== 0) {
+        return;
+      }
+      onStartDrag(tab.id, groupId, e);
+    },
+    onDoubleClick,
+    children: <span>{tab.title}</span>,
+  };
+
+  if (tabElement) {
+    return tabElement(buttonProps);
+  }
+  if (TabComponent) {
+    return <TabComponent {...buttonProps} />;
+  }
+  return <div {...divProps} />;
+};

package/src/components/tabs/TabDragOverlay.tsx

@@ -0,0 +1,92 @@
+/**
+ * @file Floating drag preview and insertion guide for tab dragging.
+ */
+import * as React from "react";
+import { usePanelInteractions } from "../../modules/panels/interactions/InteractionsContext";
+import {
+  TAB_DRAG_OVERLAY_Z_INDEX,
+  TAB_DRAG_PREVIEW_OFFSET_X,
+  TAB_DRAG_PREVIEW_OFFSET_Y,
+  TAB_DRAG_INSERT_GUIDE_WIDTH,
+  TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS,
+  TAB_DRAG_INSERT_GUIDE_COLOR,
+  TAB_DRAG_INSERT_GUIDE_SHADOW,
+} from "../../constants/styles";
+import { useClonedElementPreview } from "../../hooks/useClonedElementPreview";
+
+const overlayStyle: React.CSSProperties = {
+  position: "fixed",
+  inset: 0,
+  pointerEvents: "none",
+  zIndex: TAB_DRAG_OVERLAY_Z_INDEX,
+};
+
+const insertGuideBaseStyle: React.CSSProperties = {
+  position: "absolute",
+  width: TAB_DRAG_INSERT_GUIDE_WIDTH,
+  borderRadius: TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS,
+  background: TAB_DRAG_INSERT_GUIDE_COLOR,
+  boxShadow: TAB_DRAG_INSERT_GUIDE_SHADOW,
+};
+
+export const TabDragOverlay: React.FC = () => {
+  const { isTabDragging, draggingTabId, dragPointer, tabbarHover, draggingTabElement } = usePanelInteractions();
+  const { html: previewHtml, size: previewSize } = useClonedElementPreview(draggingTabElement);
+
+  const hasPreview = dragPointer !== null && draggingTabId !== null;
+
+  const previewBaseStyle = React.useMemo<React.CSSProperties | undefined>(() => {
+    if (!hasPreview || !dragPointer) {
+      return undefined;
+    }
+    return {
+      position: "absolute",
+      left: dragPointer.x,
+      top: dragPointer.y,
+      transform: `translate(${TAB_DRAG_PREVIEW_OFFSET_X}, ${TAB_DRAG_PREVIEW_OFFSET_Y})`,
+      pointerEvents: "none",
+    };
+  }, [hasPreview, dragPointer]);
+
+  const previewStyle = React.useMemo<React.CSSProperties | undefined>(() => {
+    if (!previewBaseStyle || !draggingTabElement) {
+      return undefined;
+    }
+    if (previewSize) {
+      return { ...previewBaseStyle, width: previewSize.width, height: previewSize.height };
+    }
+    return previewBaseStyle;
+  }, [previewBaseStyle, draggingTabElement, previewSize]);
+
+  const guideStyle = React.useMemo<React.CSSProperties | undefined>(() => {
+    if (!tabbarHover) {
+      return undefined;
+    }
+    return {
+      ...insertGuideBaseStyle,
+      left: tabbarHover.insertX,
+      top: tabbarHover.rect.top + 4,
+      height: Math.max(0, tabbarHover.rect.height - 8),
+    };
+  }, [tabbarHover]);
+
+  if (!isTabDragging) {
+    return null;
+  }
+
+  return (
+    <div style={overlayStyle}>
+      <React.Activity mode={previewStyle ? "visible" : "hidden"}>
+        <div style={previewStyle}>
+          <div
+            style={{ width: "100%", height: "100%", pointerEvents: "none" }}
+            dangerouslySetInnerHTML={{ __html: previewHtml ?? "" }}
+          />
+        </div>
+      </React.Activity>
+      <React.Activity mode={guideStyle ? "visible" : "hidden"}>
+        <div style={guideStyle} />
+      </React.Activity>
+    </div>
+  );
+};