@aiquants/resize-panels 1.7.3 → 1.8.0

package/src/Panel.tsx

@@ -0,0 +1,635 @@
+/**
+ * @file Panel component for custom resizable panels
+ * カスタムリサイズ可能パネルのための Panel コンポーネント
+ */
+
+import { type CSSProperties, type MutableRefObject, memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react"
+import { twMerge } from "tailwind-merge"
+import { usePanelGroup } from "./context"
+import { PanelDebugInfo } from "./PanelDebugInfo"
+import type { CollapsibleConfig, PanelCollapseDirection, PanelProps } from "./types"
+import { calculateSnapThreshold, getContainerSize, normalizeSizeConfig } from "./utils"
+import { Logger, LogLevel } from "./utils/simple-logger"
+
+const logger = new Logger(LogLevel.INFO, "[resize-panels]")
+
+type NormalizedCollapsibleConfig = {
+    collapseFromStart: boolean
+    collapseFromEnd: boolean
+}
+
+const collapsibleMatrix = {
+    both: {
+        collapseFromStart: true,
+        collapseFromEnd: true,
+    },
+    start: {
+        collapseFromStart: true,
+        collapseFromEnd: false,
+    },
+    end: {
+        collapseFromStart: false,
+        collapseFromEnd: true,
+    },
+} as const
+
+/**
+ * Normalize collapsible configuration into directional flags.
+ * 折りたたみ設定を方向フラグへ正規化。
+ */
+const normalizeCollapsibleConfig = (config: CollapsibleConfig | undefined): NormalizedCollapsibleConfig => {
+    if (!config) {
+        return {
+            collapseFromStart: false,
+            collapseFromEnd: false,
+        }
+    }
+    const result = collapsibleMatrix[config.from]
+    if (!result) {
+        throw new Error("Invalid collapsible configuration: unsupported 'from' value")
+    }
+    return result
+}
+
+type CommittedSetterParams = {
+    ref: MutableRefObject<number>
+    setState: (value: number) => void
+    panelIdRef: React.RefObject<string>
+    label: "pixel" | "percentage"
+    timerRef?: React.RefObject<ReturnType<typeof setTimeout> | null>
+}
+
+/**
+ * Create a setter that commits numeric size while preventing redundant updates.
+ * 冗長な更新を避けつつ数値サイズをコミットするセッターを生成。
+ */
+const createCommittedSetter = ({ ref, setState, panelIdRef, label, timerRef }: CommittedSetterParams) => {
+    return (nextValue: number) => {
+        if (!Number.isFinite(nextValue)) {
+            return
+        }
+        const sanitized = nextValue < 0 ? 0 : nextValue
+        const threshold = label === "pixel" ? 0.1 : 0.01
+        if (Math.abs(ref.current - sanitized) < threshold) {
+            // 閾値未満の変化は即時反映せず、静止後の最終同期をスケジュール
+            if (timerRef) {
+                if (timerRef.current) {
+                    clearTimeout(timerRef.current)
+                }
+                timerRef.current = setTimeout(() => {
+                    ref.current = sanitized
+                    setState(sanitized)
+                    timerRef.current = null
+                }, 200)
+            }
+            return
+        }
+
+        // 閾値を超える変化があった場合は待機中のタイマーを解除し、即座に反映
+        if (timerRef?.current) {
+            clearTimeout(timerRef.current)
+            timerRef.current = null
+        }
+
+        ref.current = sanitized
+        logger.debug(`commit ${label}`, {
+            panelId: panelIdRef.current,
+            [label]: sanitized,
+        })
+        setState(sanitized)
+    }
+}
+
+/**
+ * Render a resizable panel within a managed group, keeping DOM measurements in sync with reducer state.
+ * 管理対象グループ内で DOM 計測とリデューサー状態を同期させながらリサイズ可能パネルを描画するコンポーネント。
+ */
+export const Panel = memo(
+    ({ id: providedId, defaultSize = { value: 50, unit: "percentage" }, minSize, maxSize, autoMinSize, className, style, children, order = 0, collapsible, defaultCollapsed = false, pixelAdjustPriority, flexAdjustPriority, contentOverflow = "auto" }: PanelProps) => {
+        const { direction, registerPanel, unregisterPanel, getPanel, showDebugInfo: shouldShowDebugInfo, isContainerReady, reportPanelMeasurement, containerSize } = usePanelGroup()
+        const panelRef = useRef<HTMLDivElement>(null)
+        const generatedId = useId()
+        const panelId = useRef(providedId || `panel-${generatedId}`)
+
+        useEffect(() => {
+            // id prop はマウント後に変更できない (登録・DOM 属性・測定が初期 id に固定されるため)
+            // 黙殺すると気付けないため開発者向けに警告を出す
+            if (providedId && providedId !== panelId.current) {
+                logger.warn("Panel id prop change after mount is ignored.", {
+                    currentId: panelId.current,
+                    attemptedId: providedId,
+                })
+            }
+        }, [providedId])
+
+        const collapsibleConfig = useMemo(() => normalizeCollapsibleConfig(collapsible), [collapsible])
+        const isCollapsible = collapsibleConfig.collapseFromStart || collapsibleConfig.collapseFromEnd
+        const preferredCollapsedDirection: PanelCollapseDirection | null = useMemo(() => {
+            if (!isCollapsible) {
+                return null
+            }
+            if (collapsibleConfig.collapseFromStart) {
+                return "start"
+            }
+            if (collapsibleConfig.collapseFromEnd) {
+                return "end"
+            }
+            return null
+        }, [isCollapsible, collapsibleConfig.collapseFromStart, collapsibleConfig.collapseFromEnd])
+        const shouldStartCollapsed = isCollapsible && defaultCollapsed
+        const defaultSizeConfig = useMemo(() => normalizeSizeConfig(defaultSize), [defaultSize])
+        const isPixelUnit = defaultSizeConfig?.unit === "pixels"
+        const preferredPercentage = !isPixelUnit ? defaultSizeConfig?.value : undefined
+
+        // リデューサーが保持する最新パネル状態を取得
+        const currentPanel = getPanel(panelId.current)
+        // 折りたたみフラグが明示的に有効か判定
+        const isExplicitlyCollapsed = Boolean(currentPanel?.collapsed)
+        // サイズがゼロ以下で見かけ上折りたたまれているか判定
+        const hasZeroState = (currentPanel?.size ?? 0) <= 0
+        // 明示折りたたみかゼロ状態かを統合した折りたたみ判定
+        const isEffectivelyCollapsed = isExplicitlyCollapsed || hasZeroState
+
+        // observer コールバックから最新状態を参照するための ref。
+        // effect の依存に currentPanel (リデューサー更新のたびに identity が変わる) を入れると
+        // ドラッグ毎フレーム ResizeObserver / MutationObserver が再生成されるため、ref 経由で渡す。
+        const currentPanelRef = useRef(currentPanel)
+        currentPanelRef.current = currentPanel
+        const isEffectivelyCollapsedRef = useRef(isEffectivelyCollapsed)
+        isEffectivelyCollapsedRef.current = isEffectivelyCollapsed
+
+        const [pixelSize, setPixelSize] = useState(() => {
+            // 初期ピクセルサイズを defaultSize もしくは最新のリデューサー値から取得
+            if (isPixelUnit && defaultSizeConfig) {
+                return defaultSizeConfig.value
+            }
+            if (currentPanel?.size !== undefined) {
+                return currentPanel.size
+            }
+            return 0
+        })
+
+        const [percentageSize, setPercentageSize] = useState(() => {
+            // 初期パーセンテージサイズを defaultSize もしくは最新のリデューサー値から取得
+            if (!isPixelUnit && defaultSizeConfig) {
+                return defaultSizeConfig.value
+            }
+            if (currentPanel?.percentageSize !== undefined) {
+                return currentPanel.percentageSize
+            }
+            return 0
+        })
+        const pixelSizeRef = useRef(pixelSize)
+        const percentageSizeRef = useRef(percentageSize)
+        const pixelSyncTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+        const percentageSyncTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+        useEffect(() => {
+            return () => {
+                if (pixelSyncTimerRef.current) clearTimeout(pixelSyncTimerRef.current)
+                if (percentageSyncTimerRef.current) clearTimeout(percentageSyncTimerRef.current)
+            }
+        }, [])
+
+        const commitPixelSize = useMemo(
+            () =>
+                createCommittedSetter({
+                    ref: pixelSizeRef,
+                    setState: setPixelSize,
+                    panelIdRef: panelId,
+                    label: "pixel",
+                    timerRef: pixelSyncTimerRef,
+                }),
+            [],
+        )
+        const commitPercentageSize = useMemo(
+            () =>
+                createCommittedSetter({
+                    ref: percentageSizeRef,
+                    setState: setPercentageSize,
+                    panelIdRef: panelId,
+                    label: "percentage",
+                    timerRef: percentageSyncTimerRef,
+                }),
+            [],
+        )
+
+        /**
+         * Reset both pixel and percentage caches to zero without debug logging.
+         * デバッグ出力なしでピクセルと割合のキャッシュをゼロへリセット。
+         */
+        const resetPanelSizes = useCallback(() => {
+            // 保留中の最終同期タイマーを破棄する (折りたたみ後に古い実測値が復活するのを防ぐ)
+            if (pixelSyncTimerRef.current) {
+                clearTimeout(pixelSyncTimerRef.current)
+                pixelSyncTimerRef.current = null
+            }
+            if (percentageSyncTimerRef.current) {
+                clearTimeout(percentageSyncTimerRef.current)
+                percentageSyncTimerRef.current = null
+            }
+            if (pixelSizeRef.current !== 0) {
+                pixelSizeRef.current = 0
+                setPixelSize(0)
+            }
+            if (percentageSizeRef.current !== 0) {
+                percentageSizeRef.current = 0
+                setPercentageSize(0)
+            }
+        }, [])
+
+        useEffect(() => {
+            // ResizeObserver がコンテナサイズを取得するまでパネル登録を遅延
+            if (!isContainerReady) {
+                return
+            }
+
+            // ピクセル単位の場合は制約範囲内に収めた初期値を算出
+            let resolvedPixelSize = 0
+            if (isPixelUnit && defaultSizeConfig) {
+                const targetSize = defaultSizeConfig.value
+
+                // ピクセル制約があれば初期値へ反映
+                let constrainedSize = targetSize
+                if (minSize && typeof minSize === "object" && minSize.unit === "pixels") {
+                    constrainedSize = Math.max(constrainedSize, minSize.value)
+                }
+                if (maxSize && typeof maxSize === "object" && maxSize.unit === "pixels") {
+                    constrainedSize = Math.min(constrainedSize, maxSize.value)
+                }
+
+                // 制約を適用した初期ピクセルサイズ
+                resolvedPixelSize = constrainedSize
+            }
+
+            const isInitiallyCollapsed = shouldStartCollapsed
+            const initialCollapseDirection: PanelCollapseDirection | null = isInitiallyCollapsed ? preferredCollapsedDirection : null
+
+            if (defaultCollapsed && !isCollapsible) {
+                logger.warn("Panel defaultCollapsed is ignored because collapsible configuration is not provided.")
+            }
+
+            // 折りたたみ前サイズと割合の初期値を算出 (折りたたみ可能な場合のみ保持)
+            const initialSizeBeforeCollapse = isCollapsible && isInitiallyCollapsed ? (isPixelUnit ? resolvedPixelSize : undefined) : undefined
+            const initialPercentageBeforeCollapse = isCollapsible ? preferredPercentage : undefined
+
+            // パネルデータを構築してリデューサーへ登録
+            const preferredPixelSize = isPixelUnit ? resolvedPixelSize : undefined
+
+            const panel = {
+                id: panelId.current,
+                size: isInitiallyCollapsed ? 0 : resolvedPixelSize,
+                percentageSize: isInitiallyCollapsed ? 0 : preferredPercentage,
+                preferredPercentageSize: preferredPercentage,
+                preferredPixelSize,
+                sizeUnit: defaultSizeConfig?.unit || "percentage",
+                originalPixelSize: isPixelUnit ? resolvedPixelSize : undefined,
+                minSize,
+                maxSize,
+                collapseFromStart: collapsibleConfig.collapseFromStart,
+                collapseFromEnd: collapsibleConfig.collapseFromEnd,
+                collapsedByDirection: initialCollapseDirection,
+                collapsed: isInitiallyCollapsed,
+                sizeBeforeCollapse: initialSizeBeforeCollapse,
+                percentageSizeBeforeCollapse: initialPercentageBeforeCollapse,
+                preferredPercentageSizeBeforeCollapse: isCollapsible ? preferredPercentage : undefined,
+                preferredPixelSizeBeforeCollapse: isCollapsible ? preferredPixelSize : undefined,
+                pixelAdjustPriority,
+                flexAdjustPriority,
+                autoMinSize,
+            }
+
+            registerPanel(panel)
+        }, [
+            autoMinSize,
+            collapsibleConfig.collapseFromEnd,
+            collapsibleConfig.collapseFromStart,
+            defaultCollapsed,
+            defaultSizeConfig,
+            flexAdjustPriority,
+            isCollapsible,
+            isContainerReady,
+            isPixelUnit,
+            maxSize,
+            minSize,
+            pixelAdjustPriority,
+            preferredCollapsedDirection,
+            preferredPercentage,
+            registerPanel,
+            shouldStartCollapsed,
+        ])
+
+        useEffect(() => {
+            // アンマウント時にパネル登録と測定結果をクリア
+            return () => {
+                unregisterPanel(panelId.current)
+                reportPanelMeasurement(panelId.current, null)
+            }
+        }, [unregisterPanel, reportPanelMeasurement])
+
+        const currentSize = currentPanel?.size ?? 0
+
+        /**
+         * Measure the DOM and sync local size caches with the latest reducer state.
+         * DOM を実測し、最新のリデューサー状態とローカルサイズキャッシュを同期する。
+         * observer から毎フレーム呼ばれるため、リデューサー状態は ref 経由で読み依存を安定させる。
+         */
+        const updateSizes = useCallback(() => {
+            const panelElement = panelRef.current
+            if (!panelElement) return
+
+            const latestPanel = currentPanelRef.current
+            if (!latestPanel) {
+                return
+            }
+
+            const parentElement = panelElement.parentElement
+            if (!parentElement) return
+
+            const rect = panelElement.getBoundingClientRect()
+            const parentHorizontal = getContainerSize(parentElement, "horizontal")
+            const parentVertical = getContainerSize(parentElement, "vertical")
+
+            const currentPixelSize = direction === "horizontal" ? rect.width : rect.height
+            const parentSize = direction === "horizontal" ? parentHorizontal.inner : parentVertical.inner
+            const snapThreshold = calculateSnapThreshold(parentSize)
+
+            // 折りたたみ時はサイズをゼロに固定
+            if (isEffectivelyCollapsedRef.current) {
+                resetPanelSizes()
+                return
+            }
+
+            // 実測値がノイズ範囲と判定される場合はスキップ
+            // snapThreshold から導いた閾値より大きなサイズをリデューサーが保持しているのに、ResizeObserver が一瞬だけ極端に小さい値を返すケースがある
+            // その揺らぎを反映すると表示がチラついたり、意図せず折りたたみ判定へ繋がるのでここで検出して破棄する
+            const expectedPanelSize = latestPanel.size ?? 0
+            const noiseThreshold = Math.max(2, snapThreshold * 0.5)
+            const looksLikeNoise = expectedPanelSize > snapThreshold && currentPixelSize < noiseThreshold
+
+            if (looksLikeNoise) {
+                logger.debug("skip noisy measurement", {
+                    panelId: panelId.current,
+                    expectedPanelSize,
+                    measured: currentPixelSize,
+                    noiseThreshold,
+                })
+                return
+            }
+
+            if (currentPixelSize > 0) {
+                // 実測ピクセル値でローカルキャッシュを更新
+                commitPixelSize(currentPixelSize)
+
+                if (parentSize > 0) {
+                    // 親コンテナ比率から割合を再計算
+                    commitPercentageSize((currentPixelSize / parentSize) * 100)
+                }
+                return
+            }
+
+            if (latestPanel.size !== undefined) {
+                commitPixelSize(latestPanel.size)
+            }
+            if (latestPanel.percentageSize !== undefined) {
+                // 状態が保持する割合をそのまま採用
+                commitPercentageSize(latestPanel.percentageSize)
+            } else if (latestPanel.sizeUnit === "pixels" && latestPanel.size !== undefined && parentSize > 0) {
+                // ピクセル単位パネルは親サイズから割合を求める
+                commitPercentageSize((latestPanel.size / parentSize) * 100)
+            }
+        }, [commitPercentageSize, commitPixelSize, direction, resetPanelSizes])
+
+        const hasInitialMeasurementRef = useRef(false)
+        useEffect(() => {
+            // 登録がリデューサーへ反映された直後に一度だけ DOM 実測を同期する
+            // (以降の追従は ResizeObserver / MutationObserver が担う)
+            if (!hasInitialMeasurementRef.current && currentPanel) {
+                hasInitialMeasurementRef.current = true
+                updateSizes()
+            }
+        }, [currentPanel, updateSizes])
+
+        useEffect(() => {
+            // ResizeObserver で DOM 実測を監視し状態と乖離時にローカルキャッシュを更新
+            const panelElement = panelRef.current
+            if (!panelElement) return
+
+            const resizeObserver = new ResizeObserver(() => {
+                updateSizes()
+            })
+
+            resizeObserver.observe(panelElement)
+
+            updateSizes()
+
+            // 初期計測失敗時の再試行タイマー
+            const timeoutIds: Array<ReturnType<typeof setTimeout>> = []
+
+            // PANEL_RESIZE_RETRY_INTERVALS.forEach((delay) => {
+            //     const timeoutId = setTimeout(() => {
+            //         const rect = panelElement.getBoundingClientRect()
+            //         const currentPixelSize = direction === "horizontal" ? rect.width : rect.height
+
+            //         // 初期計測失敗や割合キャッシュ未設定を検出
+            //         const shouldRetry =
+            //             currentPixelSize === 0 || (currentPanel?.sizeUnit === "pixels" && percentageSizeRef.current === 0) || (currentPanel?.sizeUnit === "pixels" && currentPanel?.originalPixelSize !== undefined && percentageSizeRef.current === 0 && currentPixelSize > 0)
+
+            //         if (shouldRetry) {
+            //             // 計測のやり直しをスケジュール
+            //             updateSizes()
+            //         }
+            //     }, delay)
+            //     timeoutIds.push(timeoutId)
+            // })
+
+            const mutationObserver = new MutationObserver(() => {
+                // 親要素の属性や子要素変化でも遅延同期を実行してレイアウト変動へ追従
+                // ただし、測定値の更新による DOM 変更では再実行しない
+                const shouldUpdate = (() => {
+                    if (!panelRef.current) return false
+                    const rect = panelRef.current.getBoundingClientRect()
+                    const measuredSize = direction === "horizontal" ? rect.width : rect.height
+                    // 実測サイズがローカルキャッシュと一致していれば更新不要
+                    if (measuredSize === pixelSizeRef.current) {
+                        return false
+                    }
+                    return true
+                })()
+
+                if (shouldUpdate) {
+                    setTimeout(updateSizes, 0)
+                }
+            })
+
+            const parentElement = panelElement.parentElement
+            if (parentElement) {
+                // 親 (グループコンテナ) 自身の属性変化と直下の子要素の増減のみを監視する。
+                // subtree 監視はパネル内容の DOM 変異のたびに全パネルで強制レイアウトを誘発するため使わない。
+                // パネル自身のサイズ変化は ResizeObserver が捕捉する。
+                mutationObserver.observe(parentElement, {
+                    childList: true,
+                    attributes: true,
+                    attributeFilter: ["style", "class"],
+                })
+            }
+
+            return () => {
+                resizeObserver.disconnect()
+                mutationObserver.disconnect()
+                for (const timeoutId of timeoutIds) {
+                    clearTimeout(timeoutId)
+                }
+            }
+        }, [direction, updateSizes])
+
+        const currentPanelSize = currentPanel?.size
+        const currentPanelPercentageSize = currentPanel?.percentageSize
+        const currentPanelSizeUnit = currentPanel?.sizeUnit
+
+        useEffect(() => {
+            if (currentPanel) {
+                // リデューサーの最新サイズを反映し折りたたみ時はゼロへリセット
+                if (isEffectivelyCollapsed) {
+                    resetPanelSizes()
+                    return
+                }
+                if (currentPanelSize !== undefined) {
+                    commitPixelSize(currentPanelSize)
+                }
+
+                if (currentPanelPercentageSize !== undefined) {
+                    // リデューサーが保持する割合サイズが最新なのでそのまま適用
+                    const targetPercentage = currentPanelPercentageSize
+                    commitPercentageSize(targetPercentage)
+                } else if (currentPanelSizeUnit === "pixels" && currentPanelSize !== undefined) {
+                    // DOM 実測値と親コンテナサイズから割合サイズへの換算を試行
+                    const panelElement = panelRef.current
+                    const parentElement = panelElement?.parentElement
+                    if (panelElement && parentElement) {
+                        const { width, height } = panelElement.getBoundingClientRect()
+                        const parentWidth = parentElement.clientWidth
+                        const parentHeight = parentElement.clientHeight
+
+                        const currentPixelSize = direction === "horizontal" ? width : height
+                        const parentSize = direction === "horizontal" ? parentWidth : parentHeight
+
+                        // ピクセルと親サイズの双方が取得できた場合にのみ割合を更新
+                        if (currentPixelSize > 0 && parentSize > 0) {
+                            const calculatedPercentage = (currentPixelSize / parentSize) * 100
+                            commitPercentageSize(calculatedPercentage)
+                        }
+                    }
+                }
+            }
+        }, [commitPercentageSize, commitPixelSize, currentPanel, currentPanelPercentageSize, currentPanelSize, currentPanelSizeUnit, direction, isEffectivelyCollapsed, resetPanelSizes])
+
+        useEffect(() => {
+            // 最新測定値をコンテキスト経由でグループへ報告しオーバーレイ等を更新
+            reportPanelMeasurement(panelId.current, {
+                pixelSize,
+                percentageSize,
+            })
+        }, [reportPanelMeasurement, pixelSize, percentageSize])
+
+        /**
+         * Compute CSS flex-basis value based on panel size unit and collapse state.
+         * パネルサイズユニットと折りたたみ状態に基づいて CSS flex-basis 値を計算。
+         */
+        const getFlexBasis = () => {
+            if (isEffectivelyCollapsed) {
+                return "0px"
+            }
+            if (currentPanel?.originalPixelSize !== undefined) {
+                return `${currentSize}px`
+            }
+
+            if (currentPanel?.percentageSize !== undefined) {
+                return `${currentPanel.percentageSize}%`
+            }
+
+            return `${currentSize}px`
+        }
+
+        const computedFlexShrink = currentPanel?.sizeUnit === "percentage" && !currentPanel?.collapsed ? 1 : 0
+
+        // パネル自身の Flex 振る舞いと最小サイズを制御するベーススタイル
+        const panelStyle: CSSProperties = {
+            flexBasis: getFlexBasis(),
+            flexGrow: 0,
+            flexShrink: computedFlexShrink,
+            overflow: "hidden",
+            position: "relative",
+            boxSizing: "border-box",
+            minHeight: "0px",
+            minWidth: "0px",
+            ...style,
+        }
+
+        if (direction === "horizontal") {
+            panelStyle.height = "100%"
+            // 横並びではコンテンツに引きずられずに縮むため minWidth を確実に 0 にする
+            panelStyle.minWidth = 0
+        } else {
+            panelStyle.width = "100%"
+            // 縦並びでは高さ縮小時にコンテンツの min-height を無視するため 0 を設定
+            panelStyle.minHeight = 0
+        }
+
+        if (isEffectivelyCollapsed) {
+            // 折りたたみ時にパネルをレイアウトから外しユーザー操作も遮断するためのスタイル
+            if (direction === "horizontal") {
+                panelStyle.width = "0px"
+                panelStyle.minWidth = "0px"
+            } else {
+                panelStyle.height = "0px"
+                panelStyle.minHeight = "0px"
+            }
+            panelStyle.flexGrow = 0
+            panelStyle.flexShrink = 0
+            panelStyle.pointerEvents = "none"
+            panelStyle.visibility = "hidden"
+            if (isExplicitlyCollapsed) {
+                panelStyle.display = "none"
+            }
+        }
+
+        const containerAxisSize = direction === "horizontal" ? containerSize.width : containerSize.height
+
+        // 実際の子要素をパネル内に固定しスクロールも許可するためのラッパースタイル
+        const contentWrapperStyle = useMemo<CSSProperties>(
+            () => ({
+                position: "absolute",
+                inset: "0px",
+                overflow: contentOverflow,
+                display: "flex",
+                flexDirection: "column",
+                width: "100%",
+                height: "100%",
+                minWidth: "0px",
+                minHeight: "0px",
+            }),
+            [contentOverflow],
+        )
+
+        return (
+            <div
+                ref={panelRef}
+                className={twMerge("panel", className)}
+                style={panelStyle}
+                data-panel-id={panelId.current}
+                data-panel-size={currentSize}
+                data-panel-size-unit={currentPanel?.sizeUnit || "percentage"}
+                data-panel-pixel-size={currentPanel?.sizeUnit === "pixels" ? currentPanel?.originalPixelSize : null}
+                data-panel-order={order}
+                data-panel-collapsible={isCollapsible}
+                data-panel-collapse-start={collapsibleConfig.collapseFromStart}
+                data-panel-collapse-end={collapsibleConfig.collapseFromEnd}
+                data-panel-collapsed={currentPanel?.collapsed}
+                aria-hidden={isEffectivelyCollapsed}>
+                <div style={contentWrapperStyle}>{children}</div>
+                {shouldShowDebugInfo && <PanelDebugInfo panel={currentPanel} measuredPixelSize={pixelSize} measuredPercentageSize={percentageSize} containerAxisSize={containerAxisSize} direction={direction} />}
+            </div>
+        )
+    },
+)