@langchain/macaw-components 1.0.0-beta.0

package/dist/components/SplitViewPane/SplitViewPane.js

@@ -0,0 +1,314 @@
+import { cn } from "../../utils/cn.js";
+import zIndices from "../../utils/zIndices.js";
+import { useZIndex } from "../../utils/useZIndex.js";
+import { ZIndexProvider } from "../../utils/ZIndexContext.js";
+import UnsavedChangesDialog from "../UnsavedChangesDialog.js";
+import { createPortalSlot } from "../PortalSlot.js";
+import { registerOpenPane } from "./openPaneRegistry.js";
+import { HeaderTitleActionSlot, SplitViewPaneHeader } from "./SplitViewPaneHeader.js";
+import { Fragment, createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useHotkeys } from "react-hotkeys-hook";
+import { Transition, TransitionChild } from "@headlessui/react";
+import * as Portal from "@radix-ui/react-portal";
+//#region packages/components/src/components/SplitViewPane/SplitViewPane.tsx
+var PaneDepth = createContext(0);
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+var MINIMUM_LEFT_MARGIN_PX = 100;
+var MINIMUM_PANE_WIDTH_PX = 500;
+var KEYBOARD_RESIZE_STEP_PX = 10;
+var MAX_INITIAL_PANE_WIDTH_PX = 1280;
+var INITIAL_PANE_WIDTH_RATIO = 2 / 3;
+var RESIZE_HANDLE_OUTSET_PX = 8;
+var RESIZE_HANDLE_WIDTH_PX = 20;
+var PANE_TRANSITION_CLASSES = {
+	enter: "duration-normal motion-reduce:duration-0",
+	enterFrom: "opacity-0",
+	enterTo: "animate-slide-left opacity-100 motion-reduce:animate-none",
+	leave: "duration-normal motion-reduce:duration-0",
+	leaveFrom: "opacity-100",
+	leaveTo: "animate-slide-right opacity-0 motion-reduce:animate-none"
+};
+var getClientWidth = () => {
+	if (typeof document === "undefined" || typeof window === "undefined") return 0;
+	return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+};
+function getAvailableWidth(element) {
+	if (typeof document === "undefined") return 0;
+	const style = getComputedStyle(element ?? document.documentElement);
+	const reservedRight = Number.parseFloat(element ? style.right : style.getPropertyValue("--polly-chat-width"));
+	return Math.max(0, getClientWidth() - (reservedRight || 0));
+}
+function clampLeft(value, width, minPaneWidthPx = MINIMUM_PANE_WIDTH_PX) {
+	const maximumLeft = Math.max(0, width - minPaneWidthPx);
+	return Math.min(maximumLeft, Math.max(MINIMUM_LEFT_MARGIN_PX, value));
+}
+function defaultLeft(props, width) {
+	if (props.sidePaneId != null && typeof window !== "undefined") {
+		const value = window.localStorage.getItem(`SidePanelGroup:sizes:${props.sidePaneId}`);
+		const pastRatio = Number.parseFloat(value ?? "");
+		if (!Number.isNaN(pastRatio)) return clampLeft(width - (width * pastRatio - props.offsetPx), width, props.minWidthPx);
+	}
+	return clampLeft(width - (Math.min(props.defaultWidthPx ?? MAX_INITIAL_PANE_WIDTH_PX, width * INITIAL_PANE_WIDTH_RATIO) - props.offsetPx), width, props.minWidthPx);
+}
+function useShowChildren({ open, children }) {
+	const [showChildren, setShowChildren] = useState(children);
+	useIsomorphicLayoutEffect(() => {
+		if (open) setShowChildren(children);
+	}, [open, children]);
+	return showChildren;
+}
+function useResize(props) {
+	const target = useRef(null);
+	const container = useRef(null);
+	const [element, setElement] = useState(null);
+	const containerRef = useCallback((node) => {
+		container.current = node;
+		setElement(node);
+	}, []);
+	const resizing = useRef(false);
+	const initialProps = useRef(props);
+	const [width, setWidth] = useState(0);
+	const [left, setLeft] = useState(MINIMUM_LEFT_MARGIN_PX);
+	useIsomorphicLayoutEffect(() => {
+		const width = getAvailableWidth();
+		setWidth(width);
+		setLeft(defaultLeft(initialProps.current, width));
+	}, []);
+	useEffect(() => {
+		if (props.overrideWidthPx) {
+			const desiredWidth = props.overrideWidthPx - props.offsetPx;
+			setLeft(clampLeft(width - desiredWidth, width, props.minWidthPx));
+		}
+	}, [
+		props.overrideWidthPx,
+		props.offsetPx,
+		props.minWidthPx,
+		width
+	]);
+	const onMouseDown = useCallback((e) => {
+		e.preventDefault();
+		resizing.current = true;
+		if (target.current) target.current.dataset.resizeHandleActive = "true";
+	}, []);
+	const onMouseUp = useCallback(() => {
+		if (resizing.current) {
+			resizing.current = false;
+			if (target.current) delete target.current.dataset.resizeHandleActive;
+		}
+	}, []);
+	const doResizeBounded = useCallback((desiredX) => {
+		if (container.current) {
+			const width = getAvailableWidth(container.current);
+			const bounded = clampLeft(desiredX, width, props.minWidthPx);
+			if (props.sidePaneId != null && width > 0) {
+				const ratio = (width - bounded) / width;
+				window.localStorage.setItem(`SidePanelGroup:sizes:${props.sidePaneId}`, ratio.toString());
+			}
+			container.current.style.left = `${bounded}px`;
+			if (target.current) {
+				target.current.style.left = `${bounded - RESIZE_HANDLE_OUTSET_PX}px`;
+				target.current.setAttribute("aria-valuenow", bounded.toString());
+			}
+			setLeft(bounded);
+		}
+	}, [props.sidePaneId, props.minWidthPx]);
+	const onMouseMove = useCallback((e) => {
+		if (resizing.current && container.current) {
+			e.preventDefault();
+			doResizeBounded(e.clientX);
+		}
+	}, [doResizeBounded]);
+	const onResize = useCallback(() => {
+		setWidth(getAvailableWidth(container.current));
+		if (container.current) doResizeBounded(Number.parseFloat(container.current.style.left));
+	}, [doResizeBounded]);
+	const onKeyDown = (e) => {
+		const desiredLeft = e.key === "ArrowLeft" ? left - KEYBOARD_RESIZE_STEP_PX : e.key === "ArrowRight" ? left + KEYBOARD_RESIZE_STEP_PX : e.key === "Home" ? 0 : e.key === "End" ? width : void 0;
+		if (desiredLeft === void 0) return;
+		e.preventDefault();
+		doResizeBounded(desiredLeft);
+	};
+	useIsomorphicLayoutEffect(() => {
+		if (!element) return;
+		onResize();
+		const observer = new ResizeObserver(onResize);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [element, onResize]);
+	useEffect(() => {
+		window.addEventListener("resize", onResize);
+		document.addEventListener("mouseup", onMouseUp);
+		document.addEventListener("mousemove", onMouseMove);
+		return () => {
+			window.removeEventListener("resize", onResize);
+			document.removeEventListener("mouseup", onMouseUp);
+			document.removeEventListener("mousemove", onMouseMove);
+		};
+	}, [
+		onMouseMove,
+		onMouseUp,
+		onResize
+	]);
+	useEffect(() => {
+		if (props.open && left !== clampLeft(left, width, props.minWidthPx)) setLeft(defaultLeft(props, width));
+	}, [
+		props,
+		left,
+		width
+	]);
+	return {
+		left,
+		width,
+		onMouseDown,
+		onKeyDown,
+		target,
+		container,
+		containerRef
+	};
+}
+var CustomHeaderSlot = createPortalSlot();
+function SplitViewPane({ open, onClose, onExpand, onNext, onPrevious, children, title, className, sidePaneId, hideArrows, customHeader, useCustomHeaderSlot, defaultWidthPx, overrideWidthPx, minWidthPx, requireConfirmationOnClose = false, dismissOnOutsideClick = false, scrollContainer = "outer", headerClassName }) {
+	const depth = useContext(PaneDepth);
+	const showChildren = useShowChildren({
+		children,
+		open
+	});
+	const { left, width, onMouseDown, onKeyDown, target, container, containerRef } = useResize({
+		offsetPx: depth * 4.5 * 16,
+		sidePaneId,
+		defaultWidthPx,
+		overrideWidthPx,
+		minWidthPx,
+		open
+	});
+	const onCloseRef = useRef(onClose);
+	onCloseRef.current = onClose;
+	const [showConfirmModal, setShowConfirmModal] = useState(false);
+	const paneZIndex = useZIndex(zIndices.pane);
+	const paneId = useId();
+	const titleId = title && !customHeader && !useCustomHeaderSlot ? `${paneId}-title` : void 0;
+	const maximumLeft = Math.max(0, width - (minWidthPx ?? MINIMUM_PANE_WIDTH_PX));
+	const minimumLeft = Math.min(MINIMUM_LEFT_MARGIN_PX, maximumLeft);
+	const handleCloseClick = useCallback((e) => {
+		if (requireConfirmationOnClose) {
+			e?.preventDefault();
+			e?.stopPropagation();
+			setShowConfirmModal(true);
+		} else onCloseRef.current?.();
+	}, [requireConfirmationOnClose]);
+	const handleCloseClickRef = useRef(handleCloseClick);
+	handleCloseClickRef.current = handleCloseClick;
+	useEffect(() => {
+		if (!open) return;
+		return registerOpenPane(paneId, paneZIndex, container, (event) => handleCloseClickRef.current(event), dismissOnOutsideClick ? (event) => handleCloseClickRef.current(event) : void 0);
+	}, [
+		container,
+		dismissOnOutsideClick,
+		open,
+		paneId,
+		paneZIndex
+	]);
+	const nextRef = useRef(onNext);
+	nextRef.current = onNext;
+	const prevRef = useRef(onPrevious);
+	prevRef.current = onPrevious;
+	useHotkeys("j", () => {
+		nextRef.current?.();
+	}, { enabled: open && onNext != null });
+	useHotkeys("k", () => {
+		prevRef.current?.();
+	}, { enabled: open && onPrevious != null });
+	const renderHeader = () => {
+		if (customHeader) return customHeader;
+		if (useCustomHeaderSlot) return /* @__PURE__ */ jsx(CustomHeaderSlot.Slot, {});
+		return /* @__PURE__ */ jsx(SplitViewPaneHeader, {
+			title,
+			open,
+			onClose: handleCloseClick,
+			onExpand,
+			onNext,
+			onPrevious,
+			hideArrows,
+			headerClassName,
+			titleId
+		});
+	};
+	return /* @__PURE__ */ jsx(CustomHeaderSlot.Context, { children: /* @__PURE__ */ jsxs(HeaderTitleActionSlot.Context, { children: [/* @__PURE__ */ jsx(Portal.Root, { children: /* @__PURE__ */ jsx(Transition, {
+		show: open,
+		as: Fragment,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			style: { zIndex: paneZIndex },
+			children: [/* @__PURE__ */ jsx(TransitionChild, {
+				as: Fragment,
+				...PANE_TRANSITION_CLASSES,
+				children: /* @__PURE__ */ jsx("div", {
+					ref: containerRef,
+					style: {
+						left,
+						right: `var(--polly-chat-width, 0px)`
+					},
+					className: cn("fixed inset-0 shadow-lg", !open && "pointer-events-none", scrollContainer === "outer" ? "overflow-y-auto overscroll-y-none" : "overflow-hidden"),
+					"data-testid": "split-view-pane",
+					role: titleId ? "region" : void 0,
+					"aria-labelledby": titleId,
+					children: /* @__PURE__ */ jsx("div", {
+						className: cn("relative flex flex-col items-stretch bg-elevated", scrollContainer === "outer" ? "min-h-full" : "h-full"),
+						children: /* @__PURE__ */ jsxs(ZIndexProvider, {
+							value: paneZIndex,
+							children: [renderHeader(), /* @__PURE__ */ jsx(PaneDepth.Provider, {
+								value: depth + 1,
+								children: /* @__PURE__ */ jsx("div", {
+									className: cn("flex flex-1 flex-col", scrollContainer === "inner" && "min-h-0 overflow-y-auto overscroll-y-none", className),
+									children: showChildren
+								})
+							})]
+						})
+					})
+				})
+			}), /* @__PURE__ */ jsx(TransitionChild, {
+				as: Fragment,
+				...PANE_TRANSITION_CLASSES,
+				children: /* @__PURE__ */ jsx("div", {
+					ref: target,
+					role: "separator",
+					"aria-label": "Resize pane",
+					"aria-orientation": "vertical",
+					"aria-valuemin": minimumLeft,
+					"aria-valuemax": maximumLeft,
+					"aria-valuenow": left,
+					tabIndex: 0,
+					"data-split-view-pane-resize-handle": true,
+					"data-testid": "split-view-pane-resize-handle",
+					className: cn("group fixed inset-y-0 cursor-col-resize focus-visible:outline-none", !open && "pointer-events-none"),
+					style: {
+						left: left - RESIZE_HANDLE_OUTSET_PX,
+						width: RESIZE_HANDLE_WIDTH_PX,
+						zIndex: zIndices.resizeHandle
+					},
+					onMouseDown,
+					onKeyDown,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "absolute inset-y-0 w-0 border-l border-subtle transition-all duration-normal group-hover:border-l-2 group-focus-visible:border-l-2 group-focus-visible:border-l-brand group-data-[resize-handle-active]:border-l-brand motion-reduce:transition-none",
+						style: { left: RESIZE_HANDLE_OUTSET_PX }
+					})
+				})
+			})]
+		})
+	}) }), /* @__PURE__ */ jsx(UnsavedChangesDialog, {
+		isOpen: showConfirmModal,
+		onClose: () => setShowConfirmModal(false),
+		onDiscard: () => {
+			setShowConfirmModal(false);
+			onCloseRef.current?.();
+		},
+		title: "Unsaved Changes",
+		description: "You may have unsaved changes. Are you sure you want to exit?",
+		discardCopy: "Exit"
+	})] }) });
+}
+//#endregion
+export { CustomHeaderSlot, HeaderTitleActionSlot, SplitViewPane };
+
+//# sourceMappingURL=SplitViewPane.js.map

package/dist/components/SplitViewPane/SplitViewPane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitViewPane.js","names":[],"sources":["../../../src/components/SplitViewPane/SplitViewPane.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n  Fragment,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useHotkeys } from 'react-hotkeys-hook';\n\nimport { Transition, TransitionChild } from '@headlessui/react';\nimport * as Portal from '@radix-ui/react-portal';\n\nimport { cn } from '../../utils/cn';\nimport { useZIndex } from '../../utils/useZIndex';\nimport { ZIndexProvider } from '../../utils/ZIndexContext';\nimport zIndices from '../../utils/zIndices';\nimport { createPortalSlot } from '../PortalSlot';\nimport UnsavedChangesDialog from '../UnsavedChangesDialog';\nimport { registerOpenPane } from './openPaneRegistry';\nimport {\n  HeaderTitleActionSlot,\n  SplitViewPaneHeader,\n} from './SplitViewPaneHeader';\n\nexport { HeaderTitleActionSlot } from './SplitViewPaneHeader';\n\nconst PaneDepth = createContext<number>(0);\n\nconst useIsomorphicLayoutEffect =\n  typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\nconst MINIMUM_LEFT_MARGIN_PX = 100;\nconst MINIMUM_PANE_WIDTH_PX = 500;\nconst KEYBOARD_RESIZE_STEP_PX = 10;\n\nconst MAX_INITIAL_PANE_WIDTH_PX = 1280;\nconst INITIAL_PANE_WIDTH_RATIO = 2 / 3;\n\nconst RESIZE_HANDLE_OUTSET_PX = 8;\nconst RESIZE_HANDLE_WIDTH_PX = 20;\n\nconst PANE_TRANSITION_CLASSES = {\n  enter: 'duration-normal motion-reduce:duration-0',\n  enterFrom: 'opacity-0',\n  enterTo: 'animate-slide-left opacity-100 motion-reduce:animate-none',\n  leave: 'duration-normal motion-reduce:duration-0',\n  leaveFrom: 'opacity-100',\n  leaveTo: 'animate-slide-right opacity-0 motion-reduce:animate-none',\n};\nconst getClientWidth = () => {\n  if (typeof document === 'undefined' || typeof window === 'undefined') {\n    return 0;\n  }\n\n  return Math.max(\n    document.documentElement.clientWidth || 0,\n    window.innerWidth || 0\n  );\n};\n\nfunction getAvailableWidth(element?: HTMLDivElement | null) {\n  if (typeof document === 'undefined') return 0;\n  const style = getComputedStyle(element ?? document.documentElement);\n  const reservedRight = Number.parseFloat(\n    element ? style.right : style.getPropertyValue('--polly-chat-width')\n  );\n  return Math.max(0, getClientWidth() - (reservedRight || 0));\n}\n\nfunction clampLeft(\n  value: number,\n  width: number,\n  minPaneWidthPx: number = MINIMUM_PANE_WIDTH_PX\n) {\n  const maximumLeft = Math.max(0, width - minPaneWidthPx);\n  return Math.min(maximumLeft, Math.max(MINIMUM_LEFT_MARGIN_PX, value));\n}\n\nfunction defaultLeft(\n  props: {\n    offsetPx: number;\n    sidePaneId?: string;\n    defaultWidthPx?: number;\n    minWidthPx?: number;\n  },\n  width: number\n) {\n  if (props.sidePaneId != null && typeof window !== 'undefined') {\n    const value = window.localStorage.getItem(\n      `SidePanelGroup:sizes:${props.sidePaneId}`\n    );\n    const pastRatio = Number.parseFloat(value ?? '');\n\n    if (!Number.isNaN(pastRatio)) {\n      const desiredWidth = width * pastRatio - props.offsetPx;\n      return clampLeft(width - desiredWidth, width, props.minWidthPx);\n    }\n  }\n\n  const desiredWidth =\n    Math.min(\n      props.defaultWidthPx ?? MAX_INITIAL_PANE_WIDTH_PX,\n      width * INITIAL_PANE_WIDTH_RATIO\n    ) - props.offsetPx;\n\n  return clampLeft(width - desiredWidth, width, props.minWidthPx);\n}\n\nfunction useShowChildren({\n  open,\n  children,\n}: {\n  open: boolean;\n  children: ReactNode;\n}) {\n  const [showChildren, setShowChildren] = useState<ReactNode>(children);\n  useIsomorphicLayoutEffect(() => {\n    if (open) setShowChildren(children);\n  }, [open, children]);\n  return showChildren;\n}\n\nfunction useResize(props: {\n  offsetPx: number;\n  sidePaneId?: string;\n  defaultWidthPx?: number;\n  overrideWidthPx?: number;\n  minWidthPx?: number;\n  open: boolean;\n}) {\n  const target = useRef<HTMLDivElement>(null);\n  const container = useRef<HTMLDivElement>(null);\n  const [element, setElement] = useState<HTMLDivElement | null>(null);\n  const containerRef = useCallback((node: HTMLDivElement | null) => {\n    container.current = node;\n    setElement(node);\n  }, []);\n\n  const resizing = useRef(false);\n  const initialProps = useRef(props);\n  const [width, setWidth] = useState(0);\n  const [left, setLeft] = useState(MINIMUM_LEFT_MARGIN_PX);\n\n  useIsomorphicLayoutEffect(() => {\n    const width = getAvailableWidth();\n    setWidth(width);\n    setLeft(defaultLeft(initialProps.current, width));\n  }, []);\n\n  useEffect(() => {\n    if (props.overrideWidthPx) {\n      const desiredWidth = props.overrideWidthPx - props.offsetPx;\n\n      setLeft(clampLeft(width - desiredWidth, width, props.minWidthPx));\n    }\n  }, [props.overrideWidthPx, props.offsetPx, props.minWidthPx, width]);\n\n  const onMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    resizing.current = true;\n    if (target.current) {\n      target.current.dataset.resizeHandleActive = 'true';\n    }\n  }, []);\n\n  const onMouseUp = useCallback(() => {\n    if (resizing.current) {\n      resizing.current = false;\n      if (target.current) {\n        delete target.current.dataset.resizeHandleActive;\n      }\n    }\n  }, []);\n\n  const doResizeBounded = useCallback(\n    (desiredX: number) => {\n      if (container.current) {\n        const width = getAvailableWidth(container.current);\n        const bounded = clampLeft(desiredX, width, props.minWidthPx);\n\n        if (props.sidePaneId != null && width > 0) {\n          const ratio = (width - bounded) / width;\n          window.localStorage.setItem(\n            `SidePanelGroup:sizes:${props.sidePaneId}`,\n            ratio.toString()\n          );\n        }\n\n        container.current.style.left = `${bounded}px`;\n        if (target.current) {\n          target.current.style.left = `${bounded - RESIZE_HANDLE_OUTSET_PX}px`;\n          target.current.setAttribute('aria-valuenow', bounded.toString());\n        }\n        setLeft(bounded);\n      }\n    },\n    [props.sidePaneId, props.minWidthPx]\n  );\n\n  const onMouseMove = useCallback(\n    (e: MouseEvent) => {\n      if (resizing.current && container.current) {\n        e.preventDefault();\n        doResizeBounded(e.clientX);\n      }\n    },\n    [doResizeBounded]\n  );\n\n  const onResize = useCallback(() => {\n    setWidth(getAvailableWidth(container.current));\n    if (container.current) {\n      // Inline position excludes the slide transition's visual transform.\n      doResizeBounded(Number.parseFloat(container.current.style.left));\n    }\n  }, [doResizeBounded]);\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    const desiredLeft =\n      e.key === 'ArrowLeft'\n        ? left - KEYBOARD_RESIZE_STEP_PX\n        : e.key === 'ArrowRight'\n          ? left + KEYBOARD_RESIZE_STEP_PX\n          : e.key === 'Home'\n            ? 0\n            : e.key === 'End'\n              ? width\n              : undefined;\n    if (desiredLeft === undefined) return;\n\n    e.preventDefault();\n    doResizeBounded(desiredLeft);\n  };\n\n  useIsomorphicLayoutEffect(() => {\n    if (!element) return;\n    onResize();\n    const observer = new ResizeObserver(onResize);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [element, onResize]);\n\n  useEffect(() => {\n    window.addEventListener('resize', onResize);\n    document.addEventListener('mouseup', onMouseUp);\n    document.addEventListener('mousemove', onMouseMove);\n    return () => {\n      window.removeEventListener('resize', onResize);\n      document.removeEventListener('mouseup', onMouseUp);\n      document.removeEventListener('mousemove', onMouseMove);\n    };\n  }, [onMouseMove, onMouseUp, onResize]);\n\n  useEffect(() => {\n    // A closed pane has no element to resize, so restore valid bounds on reopen.\n    if (props.open && left !== clampLeft(left, width, props.minWidthPx)) {\n      setLeft(defaultLeft(props, width));\n    }\n  }, [props, left, width]);\n\n  return {\n    left,\n    width,\n    onMouseDown,\n    onKeyDown,\n    target,\n    container,\n    containerRef,\n  };\n}\n\nexport const CustomHeaderSlot = createPortalSlot();\n\nexport type SplitViewPaneProps = {\n  open: boolean;\n  children: ReactNode;\n  className?: string;\n  sidePaneId?: string;\n  hideArrows?: boolean;\n  customHeader?: ReactNode;\n  defaultWidthPx?: number;\n  overrideWidthPx?: number;\n  minWidthPx?: number;\n  useCustomHeaderSlot?: boolean;\n  requireConfirmationOnClose?: boolean;\n  dismissOnOutsideClick?: boolean;\n  scrollContainer?: 'outer' | 'inner';\n  headerClassName?: string;\n} & (\n  | {\n      title?: undefined;\n      onClose?: undefined;\n      onExpand?: undefined;\n      onNext?: undefined;\n      onPrevious?: undefined;\n    }\n  | {\n      title?: ReactNode;\n      onClose: () => void;\n      onExpand?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n      onNext?: () => void;\n      onPrevious?: () => void;\n    }\n);\n\nexport function SplitViewPane({\n  open,\n  onClose,\n  onExpand,\n  onNext,\n  onPrevious,\n  children,\n  title,\n  className,\n  sidePaneId,\n  hideArrows,\n  customHeader,\n  useCustomHeaderSlot,\n  defaultWidthPx,\n  overrideWidthPx,\n  minWidthPx,\n  requireConfirmationOnClose = false,\n  dismissOnOutsideClick = false,\n  scrollContainer = 'outer',\n  headerClassName,\n}: SplitViewPaneProps) {\n  const depth = useContext(PaneDepth);\n  const showChildren = useShowChildren({ children, open });\n  const {\n    left,\n    width,\n    onMouseDown,\n    onKeyDown,\n    target,\n    container,\n    containerRef,\n  } = useResize({\n    offsetPx: depth * 4.5 * 16,\n    sidePaneId,\n    defaultWidthPx,\n    overrideWidthPx,\n    minWidthPx,\n    open,\n  });\n  const onCloseRef = useRef(onClose);\n  onCloseRef.current = onClose;\n  const [showConfirmModal, setShowConfirmModal] = useState(false);\n  const paneZIndex = useZIndex(zIndices.pane);\n  const paneId = useId();\n  const titleId =\n    title && !customHeader && !useCustomHeaderSlot\n      ? `${paneId}-title`\n      : undefined;\n  const maximumLeft = Math.max(\n    0,\n    width - (minWidthPx ?? MINIMUM_PANE_WIDTH_PX)\n  );\n  const minimumLeft = Math.min(MINIMUM_LEFT_MARGIN_PX, maximumLeft);\n\n  const handleCloseClick = useCallback(\n    (e?: Event) => {\n      if (requireConfirmationOnClose) {\n        e?.preventDefault();\n        e?.stopPropagation();\n        setShowConfirmModal(true);\n      } else {\n        onCloseRef.current?.();\n      }\n    },\n    [requireConfirmationOnClose]\n  );\n\n  const handleCloseClickRef = useRef(handleCloseClick);\n  handleCloseClickRef.current = handleCloseClick;\n\n  useEffect(() => {\n    if (!open) return;\n    return registerOpenPane(\n      paneId,\n      paneZIndex,\n      container,\n      (event) => handleCloseClickRef.current(event),\n      dismissOnOutsideClick\n        ? (event) => handleCloseClickRef.current(event)\n        : undefined\n    );\n  }, [container, dismissOnOutsideClick, open, paneId, paneZIndex]);\n\n  const nextRef = useRef(onNext);\n  nextRef.current = onNext;\n\n  const prevRef = useRef(onPrevious);\n  prevRef.current = onPrevious;\n\n  useHotkeys(\n    'j',\n    () => {\n      nextRef.current?.();\n    },\n    { enabled: open && onNext != null }\n  );\n\n  useHotkeys(\n    'k',\n    () => {\n      prevRef.current?.();\n    },\n    { enabled: open && onPrevious != null }\n  );\n\n  const renderHeader = () => {\n    if (customHeader) {\n      return customHeader;\n    }\n    if (useCustomHeaderSlot) {\n      return <CustomHeaderSlot.Slot />;\n    }\n\n    return (\n      <SplitViewPaneHeader\n        title={title}\n        open={open}\n        onClose={handleCloseClick}\n        onExpand={onExpand}\n        onNext={onNext}\n        onPrevious={onPrevious}\n        hideArrows={hideArrows}\n        headerClassName={headerClassName}\n        titleId={titleId}\n      />\n    );\n  };\n\n  return (\n    <CustomHeaderSlot.Context>\n      <HeaderTitleActionSlot.Context>\n        <Portal.Root>\n          <Transition show={open} as={Fragment}>\n            <div className=\"relative\" style={{ zIndex: paneZIndex }}>\n              <TransitionChild as={Fragment} {...PANE_TRANSITION_CLASSES}>\n                <div\n                  ref={containerRef}\n                  style={{ left, right: `var(--polly-chat-width, 0px)` }}\n                  className={cn(\n                    'fixed inset-0 shadow-lg',\n                    !open && 'pointer-events-none',\n                    scrollContainer === 'outer'\n                      ? 'overflow-y-auto overscroll-y-none'\n                      : 'overflow-hidden'\n                  )}\n                  data-testid=\"split-view-pane\"\n                  role={titleId ? 'region' : undefined}\n                  aria-labelledby={titleId}\n                >\n                  <div\n                    className={cn(\n                      'relative flex flex-col items-stretch bg-elevated',\n                      scrollContainer === 'outer' ? 'min-h-full' : 'h-full'\n                    )}\n                  >\n                    <ZIndexProvider value={paneZIndex}>\n                      {renderHeader()}\n                      <PaneDepth.Provider value={depth + 1}>\n                        <div\n                          className={cn(\n                            'flex flex-1 flex-col',\n                            scrollContainer === 'inner' &&\n                              'min-h-0 overflow-y-auto overscroll-y-none',\n                            className\n                          )}\n                        >\n                          {showChildren}\n                        </div>\n                      </PaneDepth.Provider>\n                    </ZIndexProvider>\n                  </div>\n                </div>\n              </TransitionChild>\n              <TransitionChild as={Fragment} {...PANE_TRANSITION_CLASSES}>\n                <div\n                  ref={target}\n                  role=\"separator\"\n                  aria-label=\"Resize pane\"\n                  aria-orientation=\"vertical\"\n                  aria-valuemin={minimumLeft}\n                  aria-valuemax={maximumLeft}\n                  aria-valuenow={left}\n                  tabIndex={0}\n                  data-split-view-pane-resize-handle\n                  data-testid=\"split-view-pane-resize-handle\"\n                  className={cn(\n                    'group fixed inset-y-0 cursor-col-resize focus-visible:outline-none',\n                    !open && 'pointer-events-none'\n                  )}\n                  style={{\n                    left: left - RESIZE_HANDLE_OUTSET_PX,\n                    width: RESIZE_HANDLE_WIDTH_PX,\n                    zIndex: zIndices.resizeHandle,\n                  }}\n                  onMouseDown={onMouseDown}\n                  onKeyDown={onKeyDown}\n                >\n                  <div\n                    className=\"absolute inset-y-0 w-0 border-l border-subtle transition-all duration-normal group-hover:border-l-2 group-focus-visible:border-l-2 group-focus-visible:border-l-brand group-data-[resize-handle-active]:border-l-brand motion-reduce:transition-none\"\n                    style={{ left: RESIZE_HANDLE_OUTSET_PX }}\n                  />\n                </div>\n              </TransitionChild>\n            </div>\n          </Transition>\n        </Portal.Root>\n        <UnsavedChangesDialog\n          isOpen={showConfirmModal}\n          onClose={() => setShowConfirmModal(false)}\n          onDiscard={() => {\n            setShowConfirmModal(false);\n            onCloseRef.current?.();\n          }}\n          title=\"Unsaved Changes\"\n          description=\"You may have unsaved changes. Are you sure you want to exit?\"\n          discardCopy=\"Exit\"\n        />\n      </HeaderTitleActionSlot.Context>\n    </CustomHeaderSlot.Context>\n  );\n}\n"],"mappings":"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"}

package/dist/components/SplitViewPane/SplitViewPaneHeader.d.ts

@@ -0,0 +1,22 @@
+import type { MouseEvent, ReactNode } from 'react';
+export declare const HeaderTitleActionSlot: {
+    Fill: (props: {
+        children?: ReactNode;
+    }) => import("react").ReactPortal | null;
+    Slot: (props: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+    Context: (props: {
+        children?: ReactNode;
+    }) => import("react").JSX.Element;
+    useCanFillSlot: () => boolean;
+};
+export declare function SplitViewPaneHeader({ title, onClose, onExpand, onNext, onPrevious, hideArrows, headerClassName, titleId, open, }: {
+    title: ReactNode;
+    onClose?: () => void;
+    onExpand?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onNext?: () => void;
+    onPrevious?: () => void;
+    hideArrows?: boolean;
+    headerClassName?: string;
+    titleId?: string;
+    open?: boolean;
+}): import("react").JSX.Element;

package/dist/components/SplitViewPane/SplitViewPaneHeader.js

@@ -0,0 +1,105 @@
+import { cn } from "../../utils/cn.js";
+import zIndices from "../../utils/zIndices.js";
+import { Text } from "../Text/Text.js";
+import { CaretDoubleRightIcon, CaretDownIcon, CaretUpIcon } from "../../icons/PaddedPhosphorIcons.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { Kbd } from "../Kbd/Kbd.js";
+import { createPortalSlot } from "../PortalSlot.js";
+import { useLayoutEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CornersOutIcon } from "@phosphor-icons/react/dist/ssr/CornersOut";
+//#region packages/components/src/components/SplitViewPane/SplitViewPaneHeader.tsx
+var HeaderTitleActionSlot = createPortalSlot();
+function SplitViewPaneHeader({ title, onClose, onExpand, onNext, onPrevious, hideArrows, headerClassName, titleId, open }) {
+	const [retainedOnExpand, setRetainedOnExpand] = useState(() => onExpand);
+	useLayoutEffect(() => {
+		if (open !== false) setRetainedOnExpand(() => onExpand);
+	}, [onExpand, open]);
+	const visibleOnExpand = open === false ? retainedOnExpand : onExpand;
+	return /* @__PURE__ */ jsxs("header", {
+		className: cn("sticky top-0 flex items-center gap-space-1 border-b border-subtle bg-elevated px-space-4 py-1.5 text-base font-semibold text-secondary", headerClassName),
+		style: { zIndex: zIndices.stickyHeader },
+		children: [
+			/* @__PURE__ */ jsx(IconButton, {
+				label: "Close",
+				icon: CaretDoubleRightIcon,
+				onClick: onClose,
+				variant: "plain",
+				color: "secondary",
+				size: "xs",
+				iconClassName: "size-5 text-icon-tertiary",
+				"data-testid": "split-view-pane-close-button",
+				className: "bg-transparent"
+			}),
+			visibleOnExpand && /* @__PURE__ */ jsx(IconButton, {
+				label: "Expand",
+				icon: CornersOutIcon,
+				onClick: visibleOnExpand,
+				variant: "plain",
+				color: "secondary",
+				size: "sm",
+				iconClassName: "text-icon-tertiary",
+				"data-testid": "split-view-pane-expand-button",
+				className: "bg-transparent"
+			}),
+			!hideArrows && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx("div", { className: "mx-space-1 h-5 border-r border-default" }),
+				/* @__PURE__ */ jsx(IconButton, {
+					label: "Navigate down",
+					tooltipProps: { title: /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center",
+						children: [/* @__PURE__ */ jsx(Text, {
+							variant: "sm",
+							children: "Navigate down"
+						}), /* @__PURE__ */ jsx(Kbd, {
+							className: "ml-space-2",
+							children: "J"
+						})]
+					}) },
+					icon: CaretDownIcon,
+					onClick: onNext,
+					variant: "plain",
+					color: "secondary",
+					size: "xs",
+					iconClassName: cn("size-5", onNext && "text-icon-tertiary"),
+					disabled: !onNext,
+					className: "bg-transparent"
+				}),
+				/* @__PURE__ */ jsx(IconButton, {
+					label: "Navigate up",
+					tooltipProps: { title: /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center",
+						children: [/* @__PURE__ */ jsx(Text, {
+							variant: "sm",
+							children: "Navigate up"
+						}), /* @__PURE__ */ jsx(Kbd, {
+							className: "ml-space-2",
+							children: "K"
+						})]
+					}) },
+					icon: CaretUpIcon,
+					onClick: onPrevious,
+					variant: "plain",
+					color: "secondary",
+					size: "xs",
+					iconClassName: cn("size-5", onPrevious && "text-icon-tertiary"),
+					disabled: !onPrevious,
+					className: "bg-transparent"
+				})
+			] }),
+			titleId && /* @__PURE__ */ jsx(Text, {
+				id: titleId,
+				as: "h2",
+				variant: "h3",
+				className: "min-w-0",
+				color: "secondary",
+				children: title
+			}),
+			/* @__PURE__ */ jsx(HeaderTitleActionSlot.Slot, { className: "flex flex-1 items-center justify-end gap-space-2 empty:hidden" })
+		]
+	});
+}
+//#endregion
+export { HeaderTitleActionSlot, SplitViewPaneHeader };
+
+//# sourceMappingURL=SplitViewPaneHeader.js.map

package/dist/components/SplitViewPane/SplitViewPaneHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitViewPaneHeader.js","names":[],"sources":["../../../src/components/SplitViewPane/SplitViewPaneHeader.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport { useLayoutEffect, useState } from 'react';\n\nimport { CornersOutIcon } from '@phosphor-icons/react/dist/ssr/CornersOut';\n\nimport {\n  CaretDoubleRightIcon,\n  CaretDownIcon,\n  CaretUpIcon,\n} from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport zIndices from '../../utils/zIndices';\nimport { IconButton } from '../IconButton';\nimport { Kbd } from '../Kbd';\nimport { createPortalSlot } from '../PortalSlot';\nimport { Text } from '../Text';\n\nexport const HeaderTitleActionSlot = createPortalSlot();\n\nexport function SplitViewPaneHeader({\n  title,\n  onClose,\n  onExpand,\n  onNext,\n  onPrevious,\n  hideArrows,\n  headerClassName,\n  titleId,\n  open,\n}: {\n  title: ReactNode;\n  onClose?: () => void;\n  onExpand?: (event: MouseEvent<HTMLButtonElement>) => void;\n  onNext?: () => void;\n  onPrevious?: () => void;\n  hideArrows?: boolean;\n  headerClassName?: string;\n  titleId?: string;\n  open?: boolean;\n}) {\n  const [retainedOnExpand, setRetainedOnExpand] = useState<\n    ((event: MouseEvent<HTMLButtonElement>) => void) | undefined\n  >(() => onExpand);\n\n  useLayoutEffect(() => {\n    if (open !== false) setRetainedOnExpand(() => onExpand);\n  }, [onExpand, open]);\n\n  const visibleOnExpand = open === false ? retainedOnExpand : onExpand;\n  return (\n    <header\n      className={cn(\n        'sticky top-0 flex items-center gap-space-1 border-b border-subtle bg-elevated px-space-4 py-1.5 text-base font-semibold text-secondary',\n        headerClassName\n      )}\n      style={{ zIndex: zIndices.stickyHeader }}\n    >\n      <IconButton\n        label=\"Close\"\n        icon={CaretDoubleRightIcon}\n        onClick={onClose}\n        variant=\"plain\"\n        color=\"secondary\"\n        size=\"xs\"\n        iconClassName=\"size-5 text-icon-tertiary\"\n        data-testid=\"split-view-pane-close-button\"\n        className=\"bg-transparent\"\n      />\n\n      {visibleOnExpand && (\n        <IconButton\n          label=\"Expand\"\n          icon={CornersOutIcon}\n          onClick={visibleOnExpand}\n          variant=\"plain\"\n          color=\"secondary\"\n          size=\"sm\"\n          iconClassName=\"text-icon-tertiary\"\n          data-testid=\"split-view-pane-expand-button\"\n          className=\"bg-transparent\"\n        />\n      )}\n      {!hideArrows && (\n        <>\n          <div className=\"mx-space-1 h-5 border-r border-default\" />\n          <IconButton\n            label=\"Navigate down\"\n            tooltipProps={{\n              title: (\n                <div className=\"flex items-center\">\n                  <Text variant=\"sm\">Navigate down</Text>\n                  <Kbd className=\"ml-space-2\">J</Kbd>\n                </div>\n              ),\n            }}\n            icon={CaretDownIcon}\n            onClick={onNext}\n            variant=\"plain\"\n            color=\"secondary\"\n            size=\"xs\"\n            iconClassName={cn('size-5', onNext && 'text-icon-tertiary')}\n            disabled={!onNext}\n            className=\"bg-transparent\"\n          />\n\n          <IconButton\n            label=\"Navigate up\"\n            tooltipProps={{\n              title: (\n                <div className=\"flex items-center\">\n                  <Text variant=\"sm\">Navigate up</Text>\n                  <Kbd className=\"ml-space-2\">K</Kbd>\n                </div>\n              ),\n            }}\n            icon={CaretUpIcon}\n            onClick={onPrevious}\n            variant=\"plain\"\n            color=\"secondary\"\n            size=\"xs\"\n            iconClassName={cn('size-5', onPrevious && 'text-icon-tertiary')}\n            disabled={!onPrevious}\n            className=\"bg-transparent\"\n          />\n        </>\n      )}\n      {titleId && (\n        <Text\n          id={titleId}\n          as=\"h2\"\n          variant=\"h3\"\n          className=\"min-w-0\"\n          color=\"secondary\"\n        >\n          {title}\n        </Text>\n      )}\n\n      <HeaderTitleActionSlot.Slot className=\"flex flex-1 items-center justify-end gap-space-2 empty:hidden\" />\n    </header>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAiBA,IAAa,wBAAwB,iBAAiB;AAEtD,SAAgB,oBAAoB,EAClC,OACA,SACA,UACA,QACA,YACA,YACA,iBACA,SACA,QAWC;CACD,MAAM,CAAC,kBAAkB,uBAAuB,eAExC,QAAQ;CAEhB,sBAAsB;EACpB,IAAI,SAAS,OAAO,0BAA0B,QAAQ;CACxD,GAAG,CAAC,UAAU,IAAI,CAAC;CAEnB,MAAM,kBAAkB,SAAS,QAAQ,mBAAmB;CAC5D,OACE,qBAAC,UAAD;EACE,WAAW,GACT,0IACA,eACF;EACA,OAAO,EAAE,QAAQ,SAAS,aAAa;EALzC,UAAA;GAOE,oBAAC,YAAD;IACE,OAAM;IACN,MAAM;IACN,SAAS;IACT,SAAQ;IACR,OAAM;IACN,MAAK;IACL,eAAc;IACd,eAAY;IACZ,WAAU;GACX,CAAA;GAEA,mBACC,oBAAC,YAAD;IACE,OAAM;IACN,MAAM;IACN,SAAS;IACT,SAAQ;IACR,OAAM;IACN,MAAK;IACL,eAAc;IACd,eAAY;IACZ,WAAU;GACX,CAAA;GAEF,CAAC,cACA,qBAAA,YAAA,EAAA,UAAA;IACE,oBAAC,OAAD,EAAK,WAAU,yCAA0C,CAAA;IACzD,oBAAC,YAAD;KACE,OAAM;KACN,cAAc,EACZ,OACE,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,oBAAC,MAAD;OAAM,SAAQ;OAAK,UAAA;MAAmB,CAAA,GACtC,oBAAC,KAAD;OAAK,WAAU;OAAa,UAAA;MAAM,CAAA,CAC/B;KAET,CAAA,EAAA;KACA,MAAM;KACN,SAAS;KACT,SAAQ;KACR,OAAM;KACN,MAAK;KACL,eAAe,GAAG,UAAU,UAAU,oBAAoB;KAC1D,UAAU,CAAC;KACX,WAAU;IACX,CAAA;IAED,oBAAC,YAAD;KACE,OAAM;KACN,cAAc,EACZ,OACE,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,oBAAC,MAAD;OAAM,SAAQ;OAAK,UAAA;MAAiB,CAAA,GACpC,oBAAC,KAAD;OAAK,WAAU;OAAa,UAAA;MAAM,CAAA,CAC/B;KAET,CAAA,EAAA;KACA,MAAM;KACN,SAAS;KACT,SAAQ;KACR,OAAM;KACN,MAAK;KACL,eAAe,GAAG,UAAU,cAAc,oBAAoB;KAC9D,UAAU,CAAC;KACX,WAAU;IACX,CAAA;GACD,EAAA,CAAA;GAEH,WACC,oBAAC,MAAD;IACE,IAAI;IACJ,IAAG;IACH,SAAQ;IACR,WAAU;IACV,OAAM;IAEL,UAAA;GACG,CAAA;GAGR,oBAAC,sBAAsB,MAAvB,EAA4B,WAAU,gEAAiE,CAAA;EACjG;;AAEZ"}

package/dist/components/SplitViewPane/index.d.ts

@@ -0,0 +1,2 @@
+export { CustomHeaderSlot, HeaderTitleActionSlot, SplitViewPane, } from './SplitViewPane.js';
+export type { SplitViewPaneProps } from './SplitViewPane.js';

package/dist/components/SplitViewPane/index.js

@@ -0,0 +1,3 @@
+import { HeaderTitleActionSlot } from "./SplitViewPaneHeader.js";
+import { CustomHeaderSlot, SplitViewPane } from "./SplitViewPane.js";
+export { CustomHeaderSlot, HeaderTitleActionSlot, SplitViewPane };

package/dist/components/SplitViewPane/openPaneRegistry.d.ts

@@ -0,0 +1,2 @@
+import type { RefObject } from 'react';
+export declare function registerOpenPane(id: string, zIndex: number, element: RefObject<HTMLDivElement | null>, onEscape: (event: KeyboardEvent) => void, onMouseDownOutside?: (event: MouseEvent) => void): () => void;

package/dist/components/SplitViewPane/openPaneRegistry.js

@@ -0,0 +1,49 @@
+//#region packages/components/src/components/SplitViewPane/openPaneRegistry.ts
+var openSplitViewPanes = /* @__PURE__ */ new Map();
+var nextOpenPaneOrder = 0;
+function getTopmostPane() {
+	let topmostPane;
+	for (const pane of openSplitViewPanes.values()) if (!topmostPane || pane.zIndex > topmostPane.zIndex || pane.zIndex === topmostPane.zIndex && pane.order > topmostPane.order) topmostPane = pane;
+	return topmostPane;
+}
+function handleEscapeKeyDown(event) {
+	if (event.key !== "Escape") return;
+	queueMicrotask(() => {
+		if (event.defaultPrevented) return;
+		getTopmostPane()?.onEscape(event);
+	});
+}
+function handleMouseDown(event) {
+	const topmostPane = getTopmostPane();
+	const path = event.composedPath();
+	if (topmostPane?.onMouseDownOutside == null || document.querySelector("[data-pane-interaction-boundary][data-state=\"open\"]") != null || path.some((target) => target instanceof HTMLElement && (target.classList.contains("data-grid-row-component") || target.hasAttribute("data-split-view-pane-interaction-boundary") || target.hasAttribute("data-split-view-pane-resize-handle")))) return;
+	const element = topmostPane.element.current;
+	if (element == null || path.includes(element)) return;
+	const bounds = element.getBoundingClientRect();
+	if (!(event.clientX >= bounds.left && event.clientX <= bounds.right && event.clientY >= bounds.top && event.clientY <= bounds.bottom)) topmostPane.onMouseDownOutside(event);
+}
+function registerOpenPane(id, zIndex, element, onEscape, onMouseDownOutside) {
+	openSplitViewPanes.set(id, {
+		id,
+		zIndex,
+		order: nextOpenPaneOrder++,
+		element,
+		onEscape,
+		onMouseDownOutside
+	});
+	if (openSplitViewPanes.size === 1) {
+		document.addEventListener("keydown", handleEscapeKeyDown);
+		document.addEventListener("mousedown", handleMouseDown, true);
+	}
+	return () => {
+		openSplitViewPanes.delete(id);
+		if (openSplitViewPanes.size === 0) {
+			document.removeEventListener("keydown", handleEscapeKeyDown);
+			document.removeEventListener("mousedown", handleMouseDown, true);
+		}
+	};
+}
+//#endregion
+export { registerOpenPane };
+
+//# sourceMappingURL=openPaneRegistry.js.map

package/dist/components/SplitViewPane/openPaneRegistry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"openPaneRegistry.js","names":[],"sources":["../../../src/components/SplitViewPane/openPaneRegistry.ts"],"sourcesContent":["import type { RefObject } from 'react';\n\ntype OpenSplitViewPane = {\n  id: string;\n  zIndex: number;\n  order: number;\n  element: RefObject<HTMLDivElement | null>;\n  onEscape: (event: KeyboardEvent) => void;\n  onMouseDownOutside?: (event: MouseEvent) => void;\n};\n\nconst openSplitViewPanes = new Map<string, OpenSplitViewPane>();\nlet nextOpenPaneOrder = 0;\n\nfunction getTopmostPane() {\n  let topmostPane: OpenSplitViewPane | undefined;\n  for (const pane of openSplitViewPanes.values()) {\n    if (\n      !topmostPane ||\n      pane.zIndex > topmostPane.zIndex ||\n      (pane.zIndex === topmostPane.zIndex && pane.order > topmostPane.order)\n    ) {\n      topmostPane = pane;\n    }\n  }\n  return topmostPane;\n}\n\nfunction handleEscapeKeyDown(event: KeyboardEvent) {\n  if (event.key !== 'Escape') return;\n\n  queueMicrotask(() => {\n    if (event.defaultPrevented) return;\n    getTopmostPane()?.onEscape(event);\n  });\n}\n\nfunction handleMouseDown(event: MouseEvent) {\n  const topmostPane = getTopmostPane();\n  const path = event.composedPath();\n  if (\n    topmostPane?.onMouseDownOutside == null ||\n    document.querySelector(\n      '[data-pane-interaction-boundary][data-state=\"open\"]'\n    ) != null ||\n    path.some(\n      (target) =>\n        target instanceof HTMLElement &&\n        (target.classList.contains('data-grid-row-component') ||\n          target.hasAttribute('data-split-view-pane-interaction-boundary') ||\n          target.hasAttribute('data-split-view-pane-resize-handle'))\n    )\n  ) {\n    return;\n  }\n\n  const element = topmostPane.element.current;\n  // The bounds comparison below misses clicks on the pane's own subpixel edge,\n  // so containment decides first.\n  if (element == null || path.includes(element)) return;\n  const bounds = element.getBoundingClientRect();\n  const isInside =\n    event.clientX >= bounds.left &&\n    event.clientX <= bounds.right &&\n    event.clientY >= bounds.top &&\n    event.clientY <= bounds.bottom;\n  if (!isInside) topmostPane.onMouseDownOutside(event);\n}\n\nexport function registerOpenPane(\n  id: string,\n  zIndex: number,\n  element: RefObject<HTMLDivElement | null>,\n  onEscape: (event: KeyboardEvent) => void,\n  onMouseDownOutside?: (event: MouseEvent) => void\n) {\n  openSplitViewPanes.set(id, {\n    id,\n    zIndex,\n    order: nextOpenPaneOrder++,\n    element,\n    onEscape,\n    onMouseDownOutside,\n  });\n\n  if (openSplitViewPanes.size === 1) {\n    document.addEventListener('keydown', handleEscapeKeyDown);\n    document.addEventListener('mousedown', handleMouseDown, true);\n  }\n\n  return () => {\n    openSplitViewPanes.delete(id);\n    if (openSplitViewPanes.size === 0) {\n      document.removeEventListener('keydown', handleEscapeKeyDown);\n      document.removeEventListener('mousedown', handleMouseDown, true);\n    }\n  };\n}\n"],"mappings":";AAWA,IAAM,qCAAqB,IAAI,IAA+B;AAC9D,IAAI,oBAAoB;AAExB,SAAS,iBAAiB;CACxB,IAAI;CACJ,KAAK,MAAM,QAAQ,mBAAmB,OAAO,GAC3C,IACE,CAAC,eACD,KAAK,SAAS,YAAY,UACzB,KAAK,WAAW,YAAY,UAAU,KAAK,QAAQ,YAAY,OAEhE,cAAc;CAGlB,OAAO;AACT;AAEA,SAAS,oBAAoB,OAAsB;CACjD,IAAI,MAAM,QAAQ,UAAU;CAE5B,qBAAqB;EACnB,IAAI,MAAM,kBAAkB;EAC5B,eAAe,CAAC,EAAE,SAAS,KAAK;CAClC,CAAC;AACH;AAEA,SAAS,gBAAgB,OAAmB;CAC1C,MAAM,cAAc,eAAe;CACnC,MAAM,OAAO,MAAM,aAAa;CAChC,IACE,aAAa,sBAAsB,QACnC,SAAS,cACP,uDACF,KAAK,QACL,KAAK,MACF,WACC,kBAAkB,gBACjB,OAAO,UAAU,SAAS,yBAAyB,KAClD,OAAO,aAAa,2CAA2C,KAC/D,OAAO,aAAa,oCAAoC,EAC9D,GAEA;CAGF,MAAM,UAAU,YAAY,QAAQ;CAGpC,IAAI,WAAW,QAAQ,KAAK,SAAS,OAAO,GAAG;CAC/C,MAAM,SAAS,QAAQ,sBAAsB;CAM7C,IAAI,EAJF,MAAM,WAAW,OAAO,QACxB,MAAM,WAAW,OAAO,SACxB,MAAM,WAAW,OAAO,OACxB,MAAM,WAAW,OAAO,SACX,YAAY,mBAAmB,KAAK;AACrD;AAEA,SAAgB,iBACd,IACA,QACA,SACA,UACA,oBACA;CACA,mBAAmB,IAAI,IAAI;EACzB;EACA;EACA,OAAO;EACP;EACA;EACA;CACF,CAAC;CAED,IAAI,mBAAmB,SAAS,GAAG;EACjC,SAAS,iBAAiB,WAAW,mBAAmB;EACxD,SAAS,iBAAiB,aAAa,iBAAiB,IAAI;CAC9D;CAEA,aAAa;EACX,mBAAmB,OAAO,EAAE;EAC5B,IAAI,mBAAmB,SAAS,GAAG;GACjC,SAAS,oBAAoB,WAAW,mBAAmB;GAC3D,SAAS,oBAAoB,aAAa,iBAAiB,IAAI;EACjE;CACF;AACF"}

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,35 @@
+import { type SelectionControlSize } from '../../utils/componentSizes.js';
+interface SwitchBaseProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    id?: string;
+    className?: string;
+    /** Track height. The pointer target remains at least 24px. */
+    size?: SelectionControlSize;
+    disabled?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
+}
+interface SwitchWithLabelProps extends SwitchBaseProps {
+    label: string;
+    labelClassName?: string;
+    labelPosition?: 'left' | 'right';
+    'aria-label'?: never;
+    'aria-labelledby'?: never;
+}
+interface SwitchWithAriaLabelProps extends SwitchBaseProps {
+    'aria-label': string;
+    label?: never;
+    labelClassName?: never;
+    labelPosition?: never;
+    'aria-labelledby'?: never;
+}
+interface SwitchWithAriaLabelledByProps extends SwitchBaseProps {
+    'aria-labelledby': string;
+    label?: never;
+    labelClassName?: never;
+    labelPosition?: never;
+    'aria-label'?: never;
+}
+export type SwitchProps = SwitchWithLabelProps | SwitchWithAriaLabelProps | SwitchWithAriaLabelledByProps;
+export declare const Switch: ({ checked, onChange, id, className, size, disabled, onClick, label, labelClassName, labelPosition, ...rest }: SwitchProps) => import("react").JSX.Element;
+export {};