@thewrong/ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,46 @@
+import { ColumnPresetSelector as e } from "../components/ColumnPresetSelector.esm.js";
+import { useColumnPresets as t } from "./useColumnPresets.esm.js";
+import { useMemo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/table/hooks/useTableColumnState.tsx
+function i({ pageKey: i, columns: a, columnGroups: o, showSelector: s = !0, selectorClassName: c }) {
+	let l = t({
+		pageKey: i,
+		columns: a,
+		columnGroups: o
+	});
+	return {
+		columnState: n(() => ({
+			columnOrder: l.columnOrder,
+			hiddenColumns: l.hiddenColumns,
+			columnWidths: l.columnWidths,
+			onColumnOrderChange: l.setColumnOrder,
+			onColumnWidthsChange: l.setColumnWidths
+		}), [
+			l.columnOrder,
+			l.hiddenColumns,
+			l.columnWidths,
+			l.setColumnOrder,
+			l.setColumnWidths
+		]),
+		selector: s && i ? /* @__PURE__ */ r(e, {
+			columns: a,
+			columnGroups: o,
+			activePreset: l.activePreset,
+			columnOrder: l.columnOrder,
+			hiddenColumns: l.hiddenColumns,
+			columnWidths: l.columnWidths,
+			isDirty: l.isDirty,
+			hasPreset: l.hasPreset,
+			onApplyPreset: l.applyPreset,
+			onSaveActivePreset: l.saveActivePreset,
+			onResetActivePreset: l.resetActivePreset,
+			onColumnOrderChange: l.setColumnOrder,
+			onHiddenColumnsChange: l.setHiddenColumns,
+			onSetColumnWidth: l.setColumnWidth,
+			className: c
+		}) : null
+	};
+}
+//#endregion
+export { i as useTableColumnState };

package/dist/components/table/hooks/useTableDragSelection.d.ts

@@ -0,0 +1,2 @@
+export { useTableDragSelection } from '../../../hooks/useTableDragSelection.js';
+export type { UseTableDragSelectionOptions } from '../../../hooks/useTableDragSelection.js';

package/dist/components/table/hooks/useTableSort.cjs

@@ -0,0 +1 @@
+let e=require("react");function t({initialSort:t,serverSide:n=!1,onSort:r}={}){let[i,a]=(0,e.useState)(t||null);return{sort:i,handleSort:(0,e.useCallback)(e=>{let t={key:e,direction:i?.key===e?i.direction===`asc`?`desc`:i.direction===`desc`?null:`asc`:`asc`},o=t.direction===null?null:t;a(o),n&&r&&o&&r(o)},[i,n,r]),sortedData:(0,e.useCallback)((e,t)=>!i||!i.direction||n?e:[...e].sort((e,n)=>{let r=t(e,i.key),a=t(n,i.key);if(r==null&&a==null)return 0;if(r==null)return 1;if(a==null)return-1;if(typeof r==`number`&&typeof a==`number`)return i.direction===`asc`?r-a:a-r;let o=String(r),s=String(a),c=o.localeCompare(s,`ko`,{numeric:!0});return i.direction===`asc`?c:-c}),[i,n])}}exports.useTableSort=t;

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

@@ -1,4 +1,4 @@
-import { ColumnSort } from '../types';
+import { ColumnSort } from '../types.js';
 /**
  * 테이블 정렬 훅 옵션
  */

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

@@ -0,0 +1,30 @@
+import { useCallback as e, useState as t } from "react";
+//#region src/components/table/hooks/useTableSort.ts
+function n({ initialSort: n, serverSide: r = !1, onSort: i } = {}) {
+	let [a, o] = t(n || null);
+	return {
+		sort: a,
+		handleSort: e((e) => {
+			let t = {
+				key: e,
+				direction: a?.key === e ? a.direction === "asc" ? "desc" : a.direction === "desc" ? null : "asc" : "asc"
+			}, n = t.direction === null ? null : t;
+			o(n), r && i && n && i(n);
+		}, [
+			a,
+			r,
+			i
+		]),
+		sortedData: e((e, t) => !a || !a.direction || r ? e : [...e].sort((e, n) => {
+			let r = t(e, a.key), i = t(n, a.key);
+			if (r == null && i == null) return 0;
+			if (r == null) return 1;
+			if (i == null) return -1;
+			if (typeof r == "number" && typeof i == "number") return a.direction === "asc" ? r - i : i - r;
+			let o = String(r), s = String(i), c = o.localeCompare(s, "ko", { numeric: !0 });
+			return a.direction === "asc" ? c : -c;
+		}), [a, r])
+	};
+}
+//#endregion
+export { n as useTableSort };

package/dist/components/table/hooks/useVirtualTable.cjs

@@ -0,0 +1 @@
+const e=require("../../../hooks/useVirtualRows.cjs");let t=require("react");function n({count:n,estimateSize:r=50,overscan:i=5,scrollElement:a}){let o=(0,t.useRef)(null),{virtualizer:s}=e.useVirtualRows({count:n,scrollElementRef:o,scrollElement:a,estimateSize:r,overscan:i});return(0,t.useMemo)(()=>({virtualizer:s,parentRef:o}),[s])}exports.useVirtualTable=n;

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

@@ -0,0 +1,18 @@
+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 = n(null), { virtualizer: c } = e({
+		count: r,
+		scrollElementRef: s,
+		scrollElement: o,
+		estimateSize: i,
+		overscan: a
+	});
+	return t(() => ({
+		virtualizer: c,
+		parentRef: s
+	}), [c]);
+}
+//#endregion
+export { r as useVirtualTable };

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

@@ -0,0 +1,127 @@
+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 _ = 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 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: [v, R]
+	}), G = (t, n) => {
+		let r = [a(n)];
+		return O && r.push(i()), e(r);
+	};
+	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__ */ 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__ */ g("div", {
+				className: "relative flex flex-1 flex-col min-h-0",
+				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__ */ h(t, {
+						message: "",
+						className: "min-h-0"
+					})
+				}), /* @__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__ */ h("p", {
+							className: "text-fg-muted",
+							children: S
+						})
+					}) : /* @__PURE__ */ g("table", {
+						ref: P,
+						className: e(z, B, V, "!table-auto"),
+						style: { minWidth: "100%" },
+						children: [
+							/* @__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__ */ 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__ */ h("span", { children: t.header })
+									})
+								}, t.key)) })
+							}),
+							/* @__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: i
+										}, n.key);
+									})
+								}, 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: 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}`);
+								})]
+							})
+						]
+					})
+				})]
+			}), k]
+		})
+	});
+});
+_.displayName = "MiniTable";
+//#endregion
+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-mini-table.esm.js

@@ -0,0 +1,31 @@
+import { PaginationFooter as e } from "./components/PaginationFooter.esm.js";
+import { MiniTable as t } from "./mini-table.esm.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/table/paginated-mini-table.tsx
+var i = n((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 /* @__PURE__ */ r(t, {
+		ref: i,
+		"data-testid": _,
+		footerSlot: /* @__PURE__ */ r(e, {
+			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";
+//#endregion
+export { i as PaginatedMiniTable };

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/paginated-table.esm.js

@@ -0,0 +1,31 @@
+import { Table as e } from "./table.esm.js";
+import { PaginationFooter as t } from "./components/PaginationFooter.esm.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/table/paginated-table.tsx
+var i = n((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 /* @__PURE__ */ r(e, {
+		ref: i,
+		"data-testid": _,
+		footerSlot: /* @__PURE__ */ r(t, {
+			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";
+//#endregion
+export { i as PaginatedTable };

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>;