teachable-design-system 0.5.2 → 0.5.4

package/dist/index.cjs.js

@@ -1481,6 +1481,7 @@ const getCellBackgroundColor = (params) => {
 const TableOuterWrapper = styled.div `
   position: relative;
   display: inline-block;
+  ${({ $width }) => $width && `width: ${$width};`}
   outline: none;
 
   &:focus {
@@ -2031,6 +2032,29 @@ function Table({ title, onTitleChange, onTitleDelete, columns, data, onCellEdit,
     const [titleValue, setTitleValue] = React.useState(title || '');
     // 실제 사용할 rowHeight (styleConfig 우선)
     const effectiveRowHeight = styleConfig?.bodyRowHeight || rowHeight || '30px';
+    // 테이블 너비 계산 (컬럼 width 합계)
+    const tableWidth = React.useMemo(() => {
+        const hasAllWidths = columns.every(col => col.width);
+        if (!hasAllWidths)
+            return undefined; // width 미정의 컬럼이 있으면 auto
+        let totalWidth = 0;
+        for (const col of columns) {
+            const w = col.width;
+            if (typeof w === 'number') {
+                totalWidth += w;
+            }
+            else if (typeof w === 'string') {
+                const num = parseFloat(w);
+                if (!isNaN(num)) {
+                    totalWidth += num;
+                }
+                else {
+                    return undefined; // %, auto 등은 계산 불가
+                }
+            }
+        }
+        return `${totalWidth}px`;
+    }, [columns]);
     const sortedData = React.useMemo(() => {
         if (!sortColumn || !sortDirection)
             return data;
@@ -2369,7 +2393,7 @@ function Table({ title, onTitleChange, onTitleDelete, columns, data, onCellEdit,
             document.removeEventListener('keydown', handleKeyDown);
         };
     }, [isSelecting, handleCellMouseUp, handleKeyDown]);
-    return (jsxRuntime.jsxs(TableOuterWrapper, { ref: outerRef, className: className, tabIndex: 0, onContextMenu: handleContextMenu, children: [jsxRuntime.jsxs(TableWrapper, { "$borderColor": styleConfig?.borderColor, children: [(title !== undefined || onTitleChange) && (jsxRuntime.jsxs(TableTitle, { "$fontFamily": styleConfig?.fontFamily, children: [isEditingTitle ? (jsxRuntime.jsx(TableTitleInput, { value: titleValue, onChange: (e) => setTitleValue(e.target.value), onBlur: handleTitleSave, onKeyDown: handleTitleKeyDown, autoFocus: true })) : (jsxRuntime.jsx("span", { onDoubleClick: () => onTitleChange && setIsEditingTitle(true), children: title || '제목 없음' })), onTitleDelete && (jsxRuntime.jsx(TableTitleActions, { children: jsxRuntime.jsx("button", { onClick: onTitleDelete, style: {
+    return (jsxRuntime.jsxs(TableOuterWrapper, { ref: outerRef, className: className, tabIndex: 0, onContextMenu: handleContextMenu, "$width": tableWidth, children: [jsxRuntime.jsxs(TableWrapper, { "$borderColor": styleConfig?.borderColor, children: [(title !== undefined || onTitleChange) && (jsxRuntime.jsxs(TableTitle, { "$fontFamily": styleConfig?.fontFamily, children: [isEditingTitle ? (jsxRuntime.jsx(TableTitleInput, { value: titleValue, onChange: (e) => setTitleValue(e.target.value), onBlur: handleTitleSave, onKeyDown: handleTitleKeyDown, autoFocus: true })) : (jsxRuntime.jsx("span", { onDoubleClick: () => onTitleChange && setIsEditingTitle(true), children: title || '제목 없음' })), onTitleDelete && (jsxRuntime.jsx(TableTitleActions, { children: jsxRuntime.jsx("button", { onClick: onTitleDelete, style: {
                                         background: 'transparent',
                                         border: 'none',
                                         cursor: 'pointer',