@designbasekorea/ui 0.1.30 → 0.1.32

package/dist/index.esm.js

@@ -9628,29 +9628,13 @@ const Skeleton = forwardRef(({ variant = 'text', size = 'm', width, height, anim
 });
 Skeleton.displayName = 'Skeleton';
 
-const SplitView = ({ direction = 'horizontal', mode = 'ratio', panels, splitterSize = 4, splitterColor, splitterHoverColor, fullWidth = false, fullHeight = false, className, 
-// Legacy props
-first, second, initialSplit = 0.5, firstSize = 200, minSize = 100, maxSize, }) => {
-    // Legacy mode: first/second props를 panels로 변환
-    const effectivePanels = panels || [
-        {
-            content: first,
-            size: mode === 'fixed' ? firstSize : initialSplit,
-            minSize,
-            maxSize,
-            resizable: true,
-        },
-        {
-            content: second,
-            resizable: false, // 마지막 패널은 flex로 채움
-        },
-    ];
+const SplitView = ({ direction = 'horizontal', mode = 'ratio', panels, splitterSize = 4, splitterColor, splitterHoverColor, fullWidth = false, fullHeight = false, className, }) => {
     // 각 패널의 현재 크기 상태
-    const [panelSizes, setPanelSizes] = useState(() => effectivePanels.map((panel, index) => {
+    const [panelSizes, setPanelSizes] = useState(() => panels.map((panel, index) => {
         if (panel.size !== undefined)
             return panel.size;
         if (mode === 'ratio')
-            return 1 / effectivePanels.length;
+            return 1 / panels.length;
         return 200; // 기본 고정 크기
     }));
     const [draggingIndex, setDraggingIndex] = useState(null);
@@ -9667,7 +9651,7 @@ first, second, initialSplit = 0.5, firstSize = 200, minSize = 100, maxSize, }) =
         if (draggingIndex === null || !containerRef.current)
             return;
         const containerRect = containerRef.current.getBoundingClientRect();
-        const panel = effectivePanels[draggingIndex];
+        const panel = panels[draggingIndex];
         let newSize;
         if (direction === 'horizontal') {
             const containerWidth = containerRect.width;
@@ -9716,7 +9700,7 @@ first, second, initialSplit = 0.5, firstSize = 200, minSize = 100, maxSize, }) =
             next[draggingIndex] = newSize;
             return next;
         });
-    }, [draggingIndex, direction, mode, splitterSize, panelSizes, effectivePanels]);
+    }, [draggingIndex, direction, mode, splitterSize, panelSizes, panels]);
     // 드래그 종료
     const handleMouseUp = useCallback(() => {
         setDraggingIndex(null);
@@ -9744,12 +9728,18 @@ first, second, initialSplit = 0.5, firstSize = 200, minSize = 100, maxSize, }) =
         '--splitter-color': splitterColor,
         '--splitter-hover-color': splitterHoverColor,
     };
-    return (jsx("div", { ref: containerRef, className: classes, style: style, children: effectivePanels.map((panel, index) => {
+    return (jsx("div", { ref: containerRef, className: classes, style: style, children: panels.map((panel, index) => {
             const size = panelSizes[index];
-            const isLast = index === effectivePanels.length - 1;
+            const isLast = index === panels.length - 1;
+            const isFlexible = panel.flexible !== undefined ? panel.flexible : isLast;
             const isResizable = panel.resizable !== false && !isLast;
             const panelStyle = {};
-            if (!isLast) {
+            if (isFlexible) {
+                // flexible 패널은 나머지 공간을 자동으로 채움
+                panelStyle.flex = 1;
+            }
+            else {
+                // 고정 크기 또는 비율 패널
                 if (direction === 'horizontal') {
                     panelStyle.width = mode === 'fixed' ? `${size}px` : `${size * 100}%`;
                     panelStyle.flexShrink = 0;
@@ -9759,13 +9749,8 @@ first, second, initialSplit = 0.5, firstSize = 200, minSize = 100, maxSize, }) =
                     panelStyle.flexShrink = 0;
                 }
             }
-            else {
-                panelStyle.flex = 1;
-            }
-            return (jsxs(React.Fragment, { children: [jsx("div", { className: clsx('designbase-split-view__panel', panel.className), style: panelStyle, children: panel.content }), !isLast && (jsx("div", { className: clsx('designbase-split-view__splitter', `designbase-split-view__splitter--direction-${direction}`, { 'designbase-split-view__splitter--disabled': !isResizable }), onMouseDown: isResizable ? handleMouseDown(index) : undefined, style: {
-                            cursor: isResizable
-                                ? direction === 'horizontal' ? 'col-resize' : 'row-resize'
-                                : 'default',
+            return (jsxs(React.Fragment, { children: [jsx("div", { className: clsx('designbase-split-view__panel', panel.className), style: panelStyle, children: panel.content }), !isLast && isResizable && (jsx("div", { className: clsx('designbase-split-view__splitter', `designbase-split-view__splitter--direction-${direction}`), onMouseDown: handleMouseDown(index), style: {
+                            cursor: direction === 'horizontal' ? 'col-resize' : 'row-resize',
                         } }))] }, index));
         }) }));
 };