@thewrong/ui 0.2.0 → 0.3.0

package/dist/components/table/hooks/useVirtualTable.esm.js

@@ -1,15 +1,15 @@
-import { useMemo as e, useRef as t } from "react";
-import { useVirtualizer as n } from "@tanstack/react-virtual";
+import { useVirtualRows as e } from "../../../hooks/useVirtualRows.esm.js";
+import { useMemo as t, useRef as n } from "react";
 //#region src/components/table/hooks/useVirtualTable.ts
 function r({ count: r, estimateSize: i = 50, overscan: a = 5, scrollElement: o }) {
-	let s = t(null), c = n({
+	let s = n(null), { virtualizer: c } = e({
 		count: r,
-		getScrollElement: () => o || s.current,
-		estimateSize: () => i,
-		overscan: a,
-		enabled: r > 0
+		scrollElementRef: s,
+		scrollElement: o,
+		estimateSize: i,
+		overscan: a
 	});
-	return e(() => ({
+	return t(() => ({
 		virtualizer: c,
 		parentRef: s
 	}), [c]);

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

@@ -0,0 +1,27 @@
+/**
+ * Table 컴포넌트 모듈 export
+ */
+export { Table } from './table.js';
+export { PaginatedTable } from './paginated-table.js';
+export { MiniTable } from './mini-table.js';
+export type { MiniTableProps } from './mini-table.js';
+export { PaginatedMiniTable } from './paginated-mini-table.js';
+export type { PaginatedMiniTableProps } from './paginated-mini-table.js';
+export { AccordionTable } from './accordion-table.js';
+export type { AccordionTableProps, AccordionExpandable, ExpandedRowId, } from './accordion-table.js';
+export type { TableProps, PaginatedTableProps, TableColumn, TableColumnGroupMeta, TableColumnState, TableVariant, TableSize, SortDirection, ColumnSort, } from './types.js';
+export { useVirtualTable } from './hooks/useVirtualTable.js';
+export type { UseVirtualTableOptions, UseVirtualTableReturn, } from './hooks/useVirtualTable.js';
+export { useTableSort } from './hooks/useTableSort.js';
+export type { UseTableSortOptions, UseTableSortReturn, } from './hooks/useTableSort.js';
+export { useInfiniteScroll } from './hooks/useInfiniteScroll.js';
+export type { UseInfiniteScrollOptions } from './hooks/useInfiniteScroll.js';
+export { Pagination } from './components/Pagination.js';
+export type { PaginationProps } from './components/Pagination.js';
+export { ColumnPresetSelector } from './components/ColumnPresetSelector.js';
+export { ColumnSettingsTable } from './components/ColumnSettingsTable.js';
+export { useColumnPresets } from './hooks/useColumnPresets.js';
+export type { UseColumnPresetsOptions, UseColumnPresetsReturn, } from './hooks/useColumnPresets.js';
+export { useTableColumnState } from './hooks/useTableColumnState.js';
+export { ColumnPresetStorage } from '../../lib/column-preset-storage.js';
+export type { PresetNumber, ColumnPresetData, PagePresets, AllPresets, } from '../../lib/column-preset-storage.js';

package/dist/components/table/mini-table.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../loading-spinner/LoadingSpinner.cjs"),n=require("../../hooks/useFillEmptyRows.cjs"),r=require("./utils.cjs");let i=require("react"),a=require("react/jsx-runtime");var o=(0,i.forwardRef)((o,s)=>{let{data:c,columns:l,loading:u=!1,isFetching:d=!1,emptyMessage:f=`데이터가 없어요`,rowHeight:p,height:m,variant:h=`default`,size:g=`medium`,fillEmptyRows:_=!0,onRowClick:v,footerSlot:y,getRowKey:b,className:x=``,"data-testid":S,...C}=o,w=(0,i.useRef)(null),T=(0,i.useRef)(null),E=(0,i.useRef)(null),D=(0,i.useRef)(null),O=(0,i.useMemo)(()=>l.filter(e=>!e.hidden),[l]),k=r.getTableBaseClasses(),A=r.getTableVariantClasses(h),j=r.getTableSizeClasses(g),M=(0,i.useMemo)(()=>{let e={};return m&&(e.height=typeof m==`number`?`${m}px`:m),e},[m]),{emptyRowCount:N,measuredRowHeight:P}=n.useFillEmptyRows({enabled:_,containerRef:T,theadRef:E,tbodyRef:D,excludeRowsSelector:`tr:not([data-empty-row])`,remainingMode:`sum-real-rows`,deps:[c,O]}),F=(t,n)=>{let i=[r.getStripedRowClasses(n)];return v&&i.push(r.getHoverableRowClasses()),e.cn(i)};return u?(0,a.jsx)(`div`,{ref:s,className:e.cn(`flex items-center justify-center p-8 flex-1`,x),style:M,"data-testid":S,...C,children:(0,a.jsx)(t.LoadingSpinner,{message:`데이터를 불러오는 중이에요...`,className:`min-h-0`})}):(0,a.jsx)(`div`,{ref:s,className:e.cn(`relative flex flex-col min-h-0 gap-4 md:gap-5 xl:gap-6`,x),style:M,"data-testid":S,...C,children:(0,a.jsxs)(`div`,{className:`flex flex-1 flex-col min-h-0 gap-4 md:gap-5 xl:gap-6`,children:[(0,a.jsxs)(`div`,{className:`relative flex flex-1 flex-col min-h-0`,children:[(0,a.jsx)(`div`,{className:e.cn(`pointer-events-none absolute inset-0 z-30 flex items-center justify-center bg-bg-surface/60 backdrop-blur-[2px] transition-opacity duration-150`,d?`opacity-100`:`opacity-0`),...d?{role:`status`,"aria-live":`polite`}:{"aria-hidden":!0},children:(0,a.jsx)(t.LoadingSpinner,{message:``,className:`min-h-0`})}),(0,a.jsx)(`div`,{ref:T,className:`scrollbar-table overflow-x-auto overflow-y-hidden flex-1 bg-bg-page`,children:c.length===0?(0,a.jsx)(`div`,{className:`flex items-center justify-center p-8 h-full`,children:(0,a.jsx)(`p`,{className:`text-fg-muted`,children:f})}):(0,a.jsxs)(`table`,{ref:w,className:e.cn(k,A,j,`!table-auto`),style:{minWidth:`100%`},children:[(0,a.jsx)(`colgroup`,{children:O.map((e,t)=>{let n=t===O.length-1;return(0,a.jsx)(`col`,{"data-col-key":e.key,style:n?void 0:e.width?{width:typeof e.width==`number`?`${e.width}px`:e.width}:void 0},e.key)})}),(0,a.jsx)(`thead`,{ref:E,className:r.getTableHeaderClasses(),children:(0,a.jsx)(`tr`,{children:O.map(t=>(0,a.jsx)(`th`,{className:e.cn(r.getTableHeaderCellClasses(),r.getColumnAlignClasses(t.align??`center`),t.hideOnMobile&&`hidden md:table-cell`),style:{...t.minWidth?{minWidth:`${t.minWidth}px`}:{minWidth:50}},children:(0,a.jsx)(`div`,{className:`flex items-center justify-center w-full px-1 select-none`,children:(0,a.jsx)(`span`,{children:t.header})})},t.key))})}),(0,a.jsxs)(`tbody`,{ref:D,children:[c.map((t,n)=>(0,a.jsx)(`tr`,{className:F(t,n),onClick:()=>v?.(t,n),style:p?{height:`${p}px`}:void 0,children:O.map(n=>{let i=n.accessor?n.accessor(t):t[n.key];return(0,a.jsx)(`td`,{className:e.cn(r.getTableCellClassesNoTruncate(),r.getColumnAlignClasses(n.align??`left`),n.hideOnMobile&&`hidden md:table-cell`),style:p?{height:`${p}px`,maxHeight:`${p}px`}:void 0,children:i},n.key)})},b?b(t,n):n)),_&&Array.from({length:N}).map((t,n)=>{let i=c.length+n,o=p??P??void 0;return(0,a.jsx)(`tr`,{"data-empty-row":!0,"aria-hidden":`true`,className:r.getStripedRowClasses(i),style:o?{height:`${o}px`}:void 0,children:O.map(t=>(0,a.jsx)(`td`,{className:e.cn(r.getTableCellClassesNoTruncate(),t.hideOnMobile&&`hidden md:table-cell`),style:o?{height:`${o}px`}:void 0},t.key))},`empty-${n}`)})]})]})})]}),y]})})});o.displayName=`MiniTable`,exports.MiniTable=o;

package/dist/{src/components → components}/table/mini-table.d.ts

@@ -1,4 +1,4 @@
-import { TableColumn, TableSize, TableVariant } from './types';
+import { TableColumn, TableSize, TableVariant } from './types.js';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 export interface MiniTableProps<T> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
     data: T[];

package/dist/components/table/mini-table.esm.js

@@ -1,126 +1,127 @@
-import { LoadingSpinner as e } from "../loading-spinner/LoadingSpinner.esm.js";
-import { useFillEmptyRows as t } from "./hooks/useFillEmptyRows.esm.js";
-import { getColumnAlignClasses as n, getHoverableRowClasses as r, getStripedRowClasses as i, getTableBaseClasses as a, getTableCellClassesNoTruncate as o, getTableHeaderCellClasses as s, getTableHeaderClasses as c, getTableSizeClasses as l, getTableVariantClasses as u } from "./utils.esm.js";
-import { forwardRef as d, useMemo as f, useRef as p } from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.esm.js";
+import { LoadingSpinner as t } from "../loading-spinner/LoadingSpinner.esm.js";
+import { useFillEmptyRows as n } from "../../hooks/useFillEmptyRows.esm.js";
+import { getColumnAlignClasses as r, getHoverableRowClasses as i, getStripedRowClasses as a, getTableBaseClasses as o, getTableCellClassesNoTruncate as s, getTableHeaderCellClasses as c, getTableHeaderClasses as l, getTableSizeClasses as u, getTableVariantClasses as d } from "./utils.esm.js";
+import { forwardRef as f, useMemo as p, useRef as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/table/mini-table.tsx
-var g = d((d, g) => {
-	let { data: _, columns: v, loading: y = !1, isFetching: b = !1, emptyMessage: x = "데이터가 없어요", rowHeight: S, height: C, variant: w = "default", size: T = "medium", fillEmptyRows: E = !0, onRowClick: D, footerSlot: O, getRowKey: k, className: A = "", "data-testid": j, ...M } = d, N = p(null), P = p(null), F = p(null), I = p(null), L = f(() => v.filter((e) => !e.hidden), [v]), R = a(), z = u(w), B = l(T), V = f(() => {
+var _ = f((f, _) => {
+	let { data: v, columns: y, loading: b = !1, isFetching: x = !1, emptyMessage: S = "데이터가 없어요", rowHeight: C, height: w, variant: T = "default", size: E = "medium", fillEmptyRows: D = !0, onRowClick: O, footerSlot: k, getRowKey: A, className: j = "", "data-testid": M, ...N } = f, P = m(null), F = m(null), I = m(null), L = m(null), R = p(() => y.filter((e) => !e.hidden), [y]), z = o(), B = d(T), V = u(E), H = p(() => {
 		let e = {};
-		return C && (e.height = typeof C == "number" ? `${C}px` : C), e;
-	}, [C]), { emptyRowCount: H, measuredRowHeight: U } = t({
-		enabled: E,
-		containerRef: P,
-		theadRef: F,
-		tbodyRef: I,
+		return w && (e.height = typeof w == "number" ? `${w}px` : w), e;
+	}, [w]), { emptyRowCount: U, measuredRowHeight: W } = n({
+		enabled: D,
+		containerRef: F,
+		theadRef: I,
+		tbodyRef: L,
 		excludeRowsSelector: "tr:not([data-empty-row])",
 		remainingMode: "sum-real-rows",
-		deps: [_, L]
-	}), W = (e, t) => {
-		let n = [i(t)];
-		return D && n.push(r()), n.join(" ");
+		deps: [v, R]
+	}), G = (t, n) => {
+		let r = [a(n)];
+		return O && r.push(i()), e(r);
 	};
-	return y ? /* @__PURE__ */ m("div", {
-		ref: g,
-		className: `flex items-center justify-center p-8 flex-1 ${A}`,
-		style: V,
-		"data-testid": j,
-		...M,
-		children: /* @__PURE__ */ m(e, {
+	return b ? /* @__PURE__ */ h("div", {
+		ref: _,
+		className: e("flex items-center justify-center p-8 flex-1", j),
+		style: H,
+		"data-testid": M,
+		...N,
+		children: /* @__PURE__ */ h(t, {
 			message: "데이터를 불러오는 중이에요...",
 			className: "min-h-0"
 		})
-	}) : /* @__PURE__ */ m("div", {
-		ref: g,
-		className: `relative flex flex-col min-h-0 gap-4 md:gap-5 xl:gap-6 ${A}`,
-		style: V,
-		"data-testid": j,
-		...M,
-		children: /* @__PURE__ */ h("div", {
+	}) : /* @__PURE__ */ h("div", {
+		ref: _,
+		className: e("relative flex flex-col min-h-0 gap-4 md:gap-5 xl:gap-6", j),
+		style: H,
+		"data-testid": M,
+		...N,
+		children: /* @__PURE__ */ g("div", {
 			className: "flex flex-1 flex-col min-h-0 gap-4 md:gap-5 xl:gap-6",
-			children: [/* @__PURE__ */ h("div", {
+			children: [/* @__PURE__ */ g("div", {
 				className: "relative flex flex-1 flex-col min-h-0",
-				children: [/* @__PURE__ */ m("div", {
-					className: `pointer-events-none absolute inset-0 z-30 flex items-center justify-center bg-white/50 backdrop-blur-[2px] transition-opacity duration-150 dark:bg-neutral-900/50 ${b ? "opacity-100" : "opacity-0"}`,
-					...b ? {
+				children: [/* @__PURE__ */ h("div", {
+					className: e("pointer-events-none absolute inset-0 z-30 flex items-center justify-center bg-bg-surface/60 backdrop-blur-[2px] transition-opacity duration-150", x ? "opacity-100" : "opacity-0"),
+					...x ? {
 						role: "status",
 						"aria-live": "polite"
 					} : { "aria-hidden": !0 },
-					children: /* @__PURE__ */ m(e, {
+					children: /* @__PURE__ */ h(t, {
 						message: "",
 						className: "min-h-0"
 					})
-				}), /* @__PURE__ */ m("div", {
-					ref: P,
-					className: "scrollbar-table overflow-x-auto overflow-y-hidden flex-1 bg-bg-base-secondary",
-					children: _.length === 0 ? /* @__PURE__ */ m("div", {
+				}), /* @__PURE__ */ h("div", {
+					ref: F,
+					className: "scrollbar-table overflow-x-auto overflow-y-hidden flex-1 bg-bg-page",
+					children: v.length === 0 ? /* @__PURE__ */ h("div", {
 						className: "flex items-center justify-center p-8 h-full",
-						children: /* @__PURE__ */ m("p", {
-							className: "text-neutral-600 dark:text-neutral-400",
-							children: x
+						children: /* @__PURE__ */ h("p", {
+							className: "text-fg-muted",
+							children: S
 						})
-					}) : /* @__PURE__ */ h("table", {
-						ref: N,
-						className: `${R} ${z} ${B} !table-auto`,
+					}) : /* @__PURE__ */ g("table", {
+						ref: P,
+						className: e(z, B, V, "!table-auto"),
 						style: { minWidth: "100%" },
 						children: [
-							/* @__PURE__ */ m("colgroup", { children: L.map((e, t) => {
-								let n = t === L.length - 1;
-								return /* @__PURE__ */ m("col", {
+							/* @__PURE__ */ h("colgroup", { children: R.map((e, t) => {
+								let n = t === R.length - 1;
+								return /* @__PURE__ */ h("col", {
 									"data-col-key": e.key,
 									style: n ? void 0 : e.width ? { width: typeof e.width == "number" ? `${e.width}px` : e.width } : void 0
 								}, e.key);
 							}) }),
-							/* @__PURE__ */ m("thead", {
-								ref: F,
-								className: c(),
-								children: /* @__PURE__ */ m("tr", { children: L.map((e) => /* @__PURE__ */ m("th", {
-									className: `${s()} ${n(e.align ?? "center")} ${e.hideOnMobile ? "hidden md:table-cell" : ""}`,
-									style: { ...e.minWidth ? { minWidth: `${e.minWidth}px` } : { minWidth: 50 } },
-									children: /* @__PURE__ */ m("div", {
+							/* @__PURE__ */ h("thead", {
+								ref: I,
+								className: l(),
+								children: /* @__PURE__ */ h("tr", { children: R.map((t) => /* @__PURE__ */ h("th", {
+									className: e(c(), r(t.align ?? "center"), t.hideOnMobile && "hidden md:table-cell"),
+									style: { ...t.minWidth ? { minWidth: `${t.minWidth}px` } : { minWidth: 50 } },
+									children: /* @__PURE__ */ h("div", {
 										className: "flex items-center justify-center w-full px-1 select-none",
-										children: /* @__PURE__ */ m("span", { children: e.header })
+										children: /* @__PURE__ */ h("span", { children: t.header })
 									})
-								}, e.key)) })
+								}, t.key)) })
 							}),
-							/* @__PURE__ */ h("tbody", {
-								ref: I,
-								children: [_.map((e, t) => /* @__PURE__ */ m("tr", {
-									className: W(e, t),
-									onClick: () => D?.(e, t),
-									style: S ? { height: `${S}px` } : void 0,
-									children: L.map((t) => {
-										let r = t.accessor ? t.accessor(e) : e[t.key];
-										return /* @__PURE__ */ m("td", {
-											className: `${o()} ${n(t.align ?? "left")} ${t.hideOnMobile ? "hidden md:table-cell" : ""}`,
-											style: S ? {
-												height: `${S}px`,
-												maxHeight: `${S}px`
+							/* @__PURE__ */ g("tbody", {
+								ref: L,
+								children: [v.map((t, n) => /* @__PURE__ */ h("tr", {
+									className: G(t, n),
+									onClick: () => O?.(t, n),
+									style: C ? { height: `${C}px` } : void 0,
+									children: R.map((n) => {
+										let i = n.accessor ? n.accessor(t) : t[n.key];
+										return /* @__PURE__ */ h("td", {
+											className: e(s(), r(n.align ?? "left"), n.hideOnMobile && "hidden md:table-cell"),
+											style: C ? {
+												height: `${C}px`,
+												maxHeight: `${C}px`
 											} : void 0,
-											children: r
-										}, t.key);
+											children: i
+										}, n.key);
 									})
-								}, k ? k(e, t) : t)), E && Array.from({ length: H }).map((e, t) => {
-									let n = _.length + t, r = S ?? U ?? void 0;
-									return /* @__PURE__ */ m("tr", {
+								}, A ? A(t, n) : n)), D && Array.from({ length: U }).map((t, n) => {
+									let r = v.length + n, i = C ?? W ?? void 0;
+									return /* @__PURE__ */ h("tr", {
 										"data-empty-row": !0,
 										"aria-hidden": "true",
-										className: i(n),
-										style: r ? { height: `${r}px` } : void 0,
-										children: L.map((e) => /* @__PURE__ */ m("td", {
-											className: `${o()} ${e.hideOnMobile ? "hidden md:table-cell" : ""}`,
-											style: r ? { height: `${r}px` } : void 0
-										}, e.key))
-									}, `empty-${t}`);
+										className: a(r),
+										style: i ? { height: `${i}px` } : void 0,
+										children: R.map((t) => /* @__PURE__ */ h("td", {
+											className: e(s(), t.hideOnMobile && "hidden md:table-cell"),
+											style: i ? { height: `${i}px` } : void 0
+										}, t.key))
+									}, `empty-${n}`);
 								})]
 							})
 						]
 					})
 				})]
-			}), O]
+			}), k]
 		})
 	});
 });
-g.displayName = "MiniTable";
+_.displayName = "MiniTable";
 //#endregion
-export { g as MiniTable };
+export { _ as MiniTable };

package/dist/components/table/paginated-mini-table.cjs

@@ -0,0 +1 @@
+const e=require("./components/PaginationFooter.cjs"),t=require("./mini-table.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=(0,n.forwardRef)((n,i)=>{let{currentPage:a,totalPages:o,onPageChange:s,pageSize:c,pageSizeOptions:l,onPageSizeChange:u,totalElements:d,hasPreviousPage:f,hasNextPage:p,showTotalCount:m=!1,enablePageJump:h=!1,enableKeyboardPagination:g=!1,"data-testid":_,...v}=n;return(0,r.jsx)(t.MiniTable,{ref:i,"data-testid":_,footerSlot:(0,r.jsx)(e.PaginationFooter,{currentPage:a,totalPages:o,onPageChange:s,pageSize:c,pageSizeOptions:l,onPageSizeChange:u,hasPreviousPage:f,hasNextPage:p,totalElements:d,showTotalCount:m,enablePageJump:h,enableKeyboardPagination:g,"data-testid":_}),...v})});i.displayName=`PaginatedMiniTable`,exports.PaginatedMiniTable=i;

package/dist/{src/components → components}/table/paginated-mini-table.d.ts

@@ -1,4 +1,4 @@
-import { MiniTableProps } from './mini-table';
+import { MiniTableProps } from './mini-table.js';
 export interface PaginatedMiniTableProps<T> extends MiniTableProps<T> {
     /** 1-base. */
     currentPage: number;

package/dist/components/table/paginated-table.cjs

@@ -0,0 +1 @@
+const e=require("./table.cjs"),t=require("./components/PaginationFooter.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=(0,n.forwardRef)((n,i)=>{let{currentPage:a,totalPages:o,onPageChange:s,pageSize:c,pageSizeOptions:l,onPageSizeChange:u,totalElements:d,hasPreviousPage:f,hasNextPage:p,enableKeyboardPagination:m=!0,showTotalCount:h=!0,enablePageJump:g=!0,"data-testid":_,...v}=n;return(0,r.jsx)(e.Table,{ref:i,"data-testid":_,footerSlot:(0,r.jsx)(t.PaginationFooter,{currentPage:a,totalPages:o,onPageChange:s,pageSize:c,pageSizeOptions:l,onPageSizeChange:u,hasPreviousPage:f,hasNextPage:p,totalElements:d,showTotalCount:h,enablePageJump:g,enableKeyboardPagination:m,"data-testid":_}),...v})});i.displayName=`PaginatedTable`,exports.PaginatedTable=i;

package/dist/{src/components → components}/table/paginated-table.d.ts

@@ -1,4 +1,4 @@
-import { PaginatedTableProps } from './types';
+import { PaginatedTableProps } from './types.js';
 /**
  * PaginatedTable — Table 코어를 래핑해 페이지네이션 footer를 추가한 변형.
  * Table 본체 로직(헤더 정렬·리사이즈·grip, 본문 스트라이프·선택·sticky, 컬럼 프리셋)은 Table에 그대로 위임한다.

package/dist/components/table/table.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../../node_modules/lucide-react/dist/esm/icons/grip-vertical.cjs"),n=require("../loading-spinner/LoadingSpinner.cjs"),r=require("../table-checkbox/TableCheckbox.cjs"),i=require("./column-group-utils.cjs"),a=require("./components/SortableHeaderCell.cjs"),o=require("./hooks/useColumnResize.cjs"),ee=require("../../hooks/useFillEmptyRows.cjs"),te=require("../../hooks/useTableDragSelection.cjs"),ne=require("./hooks/useTableSort.cjs"),s=require("./utils.cjs");let c=require("react"),l=require("react/jsx-runtime"),u=require("@dnd-kit/core"),d=require("@dnd-kit/sortable");var re=({transform:e,draggingNodeRect:t,containerNodeRect:n})=>{let r={...e,y:0};if(!t||!n)return r;let i=n.left-t.left,a=n.right-t.right;return r.x=Math.min(Math.max(r.x,i),a),r},f=(0,c.forwardRef)((f,p)=>{let{data:m,columns:h,columnGroups:g,rowHeight:_,loading:ie=!1,isFetching:v=!1,emptyMessage:ae=`데이터가 없어요`,onRowClick:y,selectedRows:b=[],onRowSelect:x,enableRowSelection:S=!1,enableSelectAll:C=!1,rowCompare:w,getRowId:T,enableSorting:E=!1,serverSideSorting:D=!1,onSortChange:oe,initialSort:se,variant:ce=`default`,size:le=`medium`,stickyHeader:O=!0,height:k,maxHeight:A,storageKey:ue,columnState:j,fillEmptyRows:M=!0,totalElements:N,footerSlot:de,className:P=``,"data-testid":F,...I}=f,{sort:fe,sortedData:L}=ne.useTableSort({initialSort:se,serverSide:D,onSort:oe||void 0}),R=(0,c.useMemo)(()=>!E||D?m:L(m,(e,t)=>{let n=h.find(e=>e.key===t);if(n?.accessor){let r=n.accessor(e);return typeof r==`string`||typeof r==`number`?r:e[t]}return e[t]}),[m,E,D,fe,L,h]),z=(0,c.useRef)(null),B=(0,c.useRef)(null),V=(0,c.useRef)(null),H=(0,c.useRef)(null),U=!!j,pe=(0,u.useSensors)((0,u.useSensor)(u.PointerSensor,{activationConstraint:{distance:5}}),(0,u.useSensor)(u.KeyboardSensor,{coordinateGetter:d.sortableKeyboardCoordinates})),W=(0,c.useMemo)(()=>i.buildColumnSlots(h,g),[h,g]),G=(0,c.useMemo)(()=>{if(!j)return W.filter(e=>!(e.kind===`column`&&e.leafColumns[0].hidden));let e=new Set(j.hiddenColumns);return i.applyColumnState(W,j.columnOrder,e)},[W,j]),K=(0,c.useMemo)(()=>i.flattenLeafColumns(G),[G]),q=(0,c.useMemo)(()=>i.hasGroupSlot(G),[G]),me=(0,c.useMemo)(()=>new Map(W.map(e=>[e.key,e])),[W]),he=e=>{let{active:t,over:n}=e;if(!j||!n||t.id===n.id)return;let r=me.get(String(n.id));if(r?.kind===`column`&&r.leafColumns[0].excludeFromPreset)return;let i=j.columnOrder,a=i.indexOf(String(t.id)),o=i.indexOf(String(n.id));a===-1||o===-1||j.onColumnOrderChange((0,d.arrayMove)(i,a,o))},{handleMouseDown:ge,handleDoubleClick:_e,getColumnWidth:J,measureRef:ve}=o.useColumnResize({columns:K,data:R,getCellContent:(e,t)=>{let n=K.find(e=>e.key===t);return n?.accessor?n.accessor(e):e[t]},tableRef:z,...j?{controlledWidths:j.columnWidths,onColumnWidthsChange:j.onColumnWidthsChange}:{storageKey:ue}}),ye=s.getTableBaseClasses(),be=s.getTableVariantClasses(ce),xe=s.getTableSizeClasses(le),Y=S&&C?48:0,Se=(0,c.useMemo)(()=>K.reduce((e,t)=>{let n=J(t.key,t.width),r=parseFloat(n);return e+(Number.isFinite(r)?r:0)},0)+Y,[K,J,Y]),X=(0,c.useMemo)(()=>{let e={};return k&&(e.height=typeof k==`number`?`${k}px`:k),A&&(e.maxHeight=typeof A==`number`?`${A}px`:A),e},[k,A]),{emptyRowCount:Ce,measuredRowHeight:we}=ee.useFillEmptyRows({enabled:M,containerRef:B,theadRef:V,tbodyRef:H,excludeRowsSelector:`tr:not([data-empty-row])`,remainingMode:`sum-real-rows`,deps:[R,K]}),Z=e=>!S||b.length===0?!1:w?b.some(t=>w(t,e)):b.some(t=>t===e),Te=(0,c.useMemo)(()=>!S||!C||R.length===0?!1:R.every(e=>Z(e)),[S,C,R,Z]),Ee=()=>{!S||!x||(Te?R.forEach(e=>{Z(e)&&x(e,!1)}):R.forEach(e=>{Z(e)||x(e,!0)}))},Q=S&&!!x&&!!T,$=te.useTableDragSelection({rows:R,getRowId:T??(()=>-1),isSelected:e=>Z(e),setSelected:(e,t)=>x?.(e,t),enabled:Q,scrollContainerRef:B}),De=(t,n)=>{let r=[s.getStripedRowClasses(n)];return Z(t)&&r.push(s.getSelectedRowClasses()),y&&r.push(s.getHoverableRowClasses()),e.cn(r)};return ie?(0,l.jsx)(`div`,{ref:p,className:e.cn(`flex items-center justify-center p-8 flex-1`,P),style:X,"data-testid":F,...I,children:(0,l.jsx)(n.LoadingSpinner,{message:`데이터를 불러오는 중이에요...`,className:`min-h-0`})}):(0,l.jsxs)(`div`,{ref:p,className:e.cn(`isolate relative flex flex-col min-h-0 gap-4 md:gap-5 xl:gap-6`,P),style:X,"data-testid":F,...I,children:[(0,l.jsx)(`div`,{ref:ve,className:`absolute invisible whitespace-nowrap`,style:{top:`-9999px`,left:`-9999px`}}),(0,l.jsxs)(`div`,{className:`flex flex-1 flex-col min-h-0 gap-4 md:gap-5 xl:gap-6`,children:[(0,l.jsxs)(`div`,{className:`relative flex flex-1 flex-col min-h-0`,children:[(0,l.jsx)(`div`,{className:e.cn(`pointer-events-none absolute inset-0 z-30 flex items-center justify-center bg-bg-surface/60 backdrop-blur-[2px] transition-opacity duration-150`,v?`opacity-100`:`opacity-0`),...v?{role:`status`,"aria-live":`polite`}:{"aria-hidden":!0},children:(0,l.jsx)(n.LoadingSpinner,{message:``,className:`min-h-0`})}),(0,l.jsx)(`div`,{ref:B,className:`scrollbar-table overflow-auto flex-1 bg-bg-page`,children:R.length===0?(0,l.jsx)(`div`,{className:`flex items-center justify-center p-8 h-full`,children:(0,l.jsx)(`p`,{className:`text-fg-muted`,children:ae})}):(0,l.jsx)(u.DndContext,{sensors:pe,collisionDetection:u.closestCenter,onDragEnd:he,modifiers:[re],children:(0,l.jsxs)(`table`,{ref:z,className:e.cn(ye,be,xe),style:{tableLayout:`fixed`,minWidth:`100%`,width:`${Se}px`},children:[(0,l.jsxs)(`colgroup`,{children:[S&&C&&(0,l.jsx)(`col`,{style:{width:`48px`}}),K.map(e=>(0,l.jsx)(`col`,{"data-col-key":e.key,style:{width:J(e.key,e.width)}},e.key))]}),(0,l.jsxs)(`thead`,{ref:V,className:s.getTableHeaderClasses(),style:{position:O?`sticky`:`relative`,top:O?0:void 0,zIndex:O?20:void 0},children:[(0,l.jsxs)(`tr`,{children:[S&&C&&(0,l.jsx)(`th`,{rowSpan:q?2:1,className:e.cn(s.getTableHeaderCellClasses(),s.getColumnAlignClasses(`center`),`w-12 px-0`),children:(0,l.jsx)(`div`,{className:`flex items-center justify-center`,children:(0,l.jsx)(r.TableCheckbox,{checked:Te,onChange:()=>Ee(),ariaLabel:`전체 선택`})})}),(0,l.jsx)(d.SortableContext,{items:G.map(e=>e.key),strategy:d.horizontalListSortingStrategy,children:G.map(n=>{if(n.kind===`group`)return(0,l.jsxs)(a.SortableHeaderCell,{id:n.key,disabled:!U,as:`th`,colSpan:n.leafColumns.length,className:e.cn(s.getTableHeaderCellClasses(),s.getColumnAlignClasses(`center`),`group/header-cell relative`,n.hideOnMobile&&`hidden md:table-cell`),children:[U&&(0,l.jsx)(`span`,{className:`absolute left-0.5 top-1/2 -translate-y-1/2 text-fg-subtle opacity-0 transition-opacity group-hover/header-cell:opacity-100`,"aria-hidden":`true`,children:(0,l.jsx)(t.GripVertical,{className:`h-3.5 w-3.5`})}),(0,l.jsx)(`div`,{className:`flex items-center justify-center w-full pr-1 pl-3 select-none`,children:(0,l.jsx)(`span`,{children:n.header})})]},n.key);let r=n.leafColumns[0],i=!U||r.excludeFromPreset===!0;return(0,l.jsxs)(a.SortableHeaderCell,{id:r.key,disabled:i,as:`th`,rowSpan:q?2:1,className:e.cn(s.getTableHeaderCellClasses(),s.getColumnAlignClasses(`center`),`group/header-cell relative`,r.sticky&&`sticky left-0 z-20 bg-bg-table-header`,r.hideOnMobile&&`hidden md:table-cell`),style:{width:J(r.key,r.width),minWidth:r.minWidth||50},children:[!i&&(0,l.jsx)(`span`,{className:`absolute left-0.5 top-1/2 -translate-y-1/2 text-fg-subtle opacity-0 transition-opacity group-hover/header-cell:opacity-100`,"aria-hidden":`true`,children:(0,l.jsx)(t.GripVertical,{className:`h-3.5 w-3.5`})}),(0,l.jsx)(`div`,{className:`flex items-center justify-center w-full pr-1 pl-3 select-none`,children:(0,l.jsx)(`span`,{children:r.header})}),r.excludeFromPreset!==!0&&(0,l.jsx)(`div`,{className:`group/resize absolute right-0 top-0 h-full w-3 cursor-col-resize z-50 flex items-center justify-center`,onPointerDown:e=>e.stopPropagation(),onMouseDown:e=>{e.preventDefault(),e.stopPropagation(),ge(r.key,e)},onDoubleClick:e=>{e.preventDefault(),e.stopPropagation(),_e(r.key,e)},onClick:e=>{e.preventDefault(),e.stopPropagation()},style:{touchAction:`none`},title:`드래그하여 너비 조절, 더블 클릭하여 자동 조절`,children:(0,l.jsx)(`span`,{"aria-hidden":`true`,className:`h-1/2 w-0.5 rounded-full bg-transparent transition-colors group-hover/header-cell:bg-border-default group-hover/resize:!bg-primary group-active/resize:!bg-primary-hover`})})]},r.key)})})]}),q&&(0,l.jsx)(`tr`,{children:G.filter(e=>e.kind===`group`).flatMap(e=>e.leafColumns).map(t=>(0,l.jsx)(`th`,{className:e.cn(s.getTableHeaderCellClasses(),s.getColumnAlignClasses(t.align??`center`),t.hideOnMobile&&`hidden md:table-cell`),style:{width:J(t.key,t.width),minWidth:t.minWidth||50},children:(0,l.jsx)(`div`,{className:`flex items-center justify-center w-full pr-1 pl-3 select-none`,children:(0,l.jsx)(`span`,{children:t.header})})},t.key))})]}),(0,l.jsxs)(`tbody`,{ref:H,children:[R.map((t,n)=>{let i=Z(t);return(0,l.jsxs)(`tr`,{className:De(t,n),onClick:()=>y?.(t,n),style:_?{height:`${_}px`}:void 0,children:[S&&C&&(0,l.jsx)(`td`,{className:e.cn(s.getTableCellClasses(),s.getColumnAlignClasses(`center`),`w-12 select-none`),onClick:e=>e.stopPropagation(),onMouseDown:Q?e=>{e.preventDefault(),$.onRowMouseDown(n)}:void 0,onMouseEnter:Q?()=>$.onRowMouseEnter(n):void 0,children:(0,l.jsx)(`div`,{className:`flex items-center justify-center`,children:(0,l.jsx)(r.TableCheckbox,{checked:i,onChange:e=>x?.(t,e),pointerEventsNone:Q,ariaLabel:`행 선택`})})}),K.map(n=>{let r=n.accessor?n.accessor(t):t[n.key];return(0,l.jsx)(`td`,{className:e.cn(s.getTableCellClasses(),s.getColumnAlignClasses(n.align),n.sticky&&`sticky left-0 z-10 bg-inherit`,n.hideOnMobile&&`hidden md:table-cell`),style:{width:J(n.key,n.width),minWidth:n.minWidth||50,..._?{height:`${_}px`,maxHeight:`${_}px`,overflow:`hidden`}:{}},children:r},n.key)})]},n)}),M&&Array.from({length:Ce}).map((t,n)=>{let r=R.length+n,i=_??we??void 0;return(0,l.jsxs)(`tr`,{"data-empty-row":!0,"aria-hidden":`true`,className:s.getStripedRowClasses(r),style:i?{height:`${i}px`}:void 0,children:[S&&C&&(0,l.jsx)(`td`,{className:e.cn(s.getTableCellClasses(),`w-12`),style:i?{height:`${i}px`}:void 0}),K.map(t=>(0,l.jsx)(`td`,{className:e.cn(s.getTableCellClasses(),t.hideOnMobile&&`hidden md:table-cell`),style:{width:J(t.key,t.width),minWidth:t.minWidth||50,...i?{height:`${i}px`}:{}}},t.key))]},`empty-${n}`)})]})]})})})]}),de??(N===void 0?null:(0,l.jsx)(`div`,{className:`flex justify-end shrink-0 text-sm text-fg-muted`,children:(0,l.jsxs)(`span`,{children:[`총 `,N.toLocaleString(),`건`]})}))]})]})});f.displayName=`Table`,exports.Table=f;

package/dist/{src/components → components}/table/table.d.ts

@@ -1,9 +1,10 @@
-import { TableProps } from './types';
+import { TableProps } from './types.js';
 /**
  * Table — 코어 테이블. 헤더(정렬/리사이즈/grip 드래그) + 본문(스트라이프/선택/sticky) + 컬럼 프리셋.
  *
  * 페이지네이션이 없는 조회 API 또는 페이지네이션 영역을 별도로 렌더하는 경우 사용.
  * PaginatedTable은 이 컴포넌트를 wrap해서 footer(Pagination/PageJump/PageSize)를 추가.
+ * 컬럼 너비 합이 컨테이너보다 작아 열이 늘어나면 브라우저가 남는 폭을 재분배하므로 드래그 이동량과 화면 변화량이 비례하지 않는다. 컬럼 합을 컨테이너 이상으로 지정한다(여백 컬럼이 필요하면 AccordionTable을 쓴다 — Table에는 여백 컬럼 옵션이 없다).
  */
 export declare const Table: <T>(props: TableProps<T> & {
     ref?: React.ForwardedRef<HTMLDivElement>;