@thewrong/ui 0.3.0 → 0.4.0

package/dist/components/table/components/SortableHeaderCell.cjs

@@ -1 +1 @@
-let e=require("react/jsx-runtime"),t=require("@dnd-kit/sortable"),n=require("@dnd-kit/utilities");function r({id:r,disabled:i=!1,as:a=`div`,colSpan:o,rowSpan:s,className:c,style:l,children:u}){let{setNodeRef:d,attributes:f,listeners:p,transform:m,transition:h,isDragging:g}=(0,t.useSortable)({id:r,disabled:i});return(0,e.jsx)(a,{ref:d,className:c,style:{...l,transform:n.CSS.Translate.toString(m),transition:h,opacity:g?.5:1,cursor:i?void 0:`grab`},...a===`th`?{...o===void 0?{}:{colSpan:o},...s===void 0?{}:{rowSpan:s}}:{},...i?{}:f,...i?{}:p,children:u})}exports.SortableHeaderCell=r;
+let e=require("react"),t=require("react/jsx-runtime"),n=require("@dnd-kit/sortable"),r=require("@dnd-kit/utilities");var i=(0,e.createContext)(null),a=()=>(0,e.useContext)(i);function o({id:a,disabled:o=!1,as:s=`div`,colSpan:c,rowSpan:l,"aria-sort":u,hasSortButton:d=!1,className:f,style:p,children:m}){let{setNodeRef:h,setActivatorNodeRef:g,attributes:_,listeners:v,transform:y,transition:b,isDragging:x}=(0,n.useSortable)({id:a,disabled:o}),S=(0,e.useId)(),C=!o&&d?{setActivatorNodeRef:g,descriptionId:S,onKeyDown:e=>{x||!e.shiftKey&&(e.code===`Space`||e.code===`Enter`)&&e.stopPropagation()}}:null,w={...p,transform:r.CSS.Translate.toString(y),transition:b,opacity:x?.5:1,cursor:o?void 0:`grab`},T=s,E=s===`th`?{...c===void 0?{}:{colSpan:c},...l===void 0?{}:{rowSpan:l}}:{};return(0,t.jsx)(i.Provider,{value:C,children:(0,t.jsxs)(T,{ref:h,className:f,style:w,...E,...o?{}:d?{..._,tabIndex:void 0,"aria-roledescription":void 0,"aria-describedby":void 0,"aria-disabled":void 0,"aria-pressed":void 0}:_,...o?{}:v,onKeyDown:o?void 0:e=>{(!d||e.code===`Space`)&&v?.onKeyDown?.(e)},role:s===`th`?`columnheader`:o?void 0:_.role,"aria-sort":u,children:[m,C&&(0,t.jsx)(`span`,{id:S,"aria-hidden":`true`,className:`sr-only`,children:`Shift+Space로 컬럼 이동을 시작하고 화살표로 이동한 뒤 Space 또는 Enter로 놓습니다.`})]})})}exports.SortableHeaderCell=o,exports.useSortableHeaderKeyboardDrag=a;

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

@@ -1,4 +1,10 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, KeyboardEvent, ReactNode } from 'react';
+interface SortableHeaderKeyboardDrag {
+    setActivatorNodeRef: (element: HTMLElement | null) => void;
+    descriptionId: string;
+    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
+}
+export declare const useSortableHeaderKeyboardDrag: () => SortableHeaderKeyboardDrag | null;
 interface SortableHeaderCellProps {
     id: string;
     /**
@@ -14,6 +20,8 @@ interface SortableHeaderCellProps {
     colSpan?: number;
     /** `as="th"`일 때만 의미. 그룹과 평면 컬럼이 섞일 때 평면 컬럼은 rowSpan=2. */
     rowSpan?: number;
+    "aria-sort"?: "ascending" | "descending";
+    hasSortButton?: boolean;
     className?: string;
     style?: CSSProperties;
     children: ReactNode;
@@ -23,5 +31,5 @@ interface SortableHeaderCellProps {
  * 5px 임계는 부모 DndContext의 PointerSensor에서 처리해서, 헤더 클릭(정렬)이나
  * 리사이즈 핸들 mousedown은 방해하지 않아요.
  */
-export declare function SortableHeaderCell({ id, disabled, as, colSpan, rowSpan, className, style, children, }: SortableHeaderCellProps): import("react").JSX.Element;
+export declare function SortableHeaderCell({ id, disabled, as, colSpan, rowSpan, "aria-sort": ariaSort, hasSortButton, className, style, children, }: SortableHeaderCellProps): import("react").JSX.Element;
 export {};

package/dist/components/table/components/SortableHeaderCell.esm.js

@@ -1,30 +1,58 @@
-import { jsx as e } from "react/jsx-runtime";
-import { useSortable as t } from "@dnd-kit/sortable";
-import { CSS as n } from "@dnd-kit/utilities";
+import { createContext as e, useContext as t, useId as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useSortable as a } from "@dnd-kit/sortable";
+import { CSS as o } from "@dnd-kit/utilities";
 //#region src/components/table/components/SortableHeaderCell.tsx
-function r({ id: r, disabled: i = !1, as: a = "div", colSpan: o, rowSpan: s, className: c, style: l, children: u }) {
-	let { setNodeRef: d, attributes: f, listeners: p, transform: m, transition: h, isDragging: g } = t({
-		id: r,
-		disabled: i
-	});
-	return /* @__PURE__ */ e(a, {
-		ref: d,
-		className: c,
-		style: {
-			...l,
-			transform: n.Translate.toString(m),
-			transition: h,
-			opacity: g ? .5 : 1,
-			cursor: i ? void 0 : "grab"
-		},
-		...a === "th" ? {
-			...o === void 0 ? {} : { colSpan: o },
-			...s === void 0 ? {} : { rowSpan: s }
-		} : {},
-		...i ? {} : f,
-		...i ? {} : p,
-		children: u
+var s = e(null), c = () => t(s);
+function l({ id: e, disabled: t = !1, as: c = "div", colSpan: l, rowSpan: u, "aria-sort": d, hasSortButton: f = !1, className: p, style: m, children: h }) {
+	let { setNodeRef: g, setActivatorNodeRef: _, attributes: v, listeners: y, transform: b, transition: x, isDragging: S } = a({
+		id: e,
+		disabled: t
+	}), C = n(), w = !t && f ? {
+		setActivatorNodeRef: _,
+		descriptionId: C,
+		onKeyDown: (e) => {
+			S || !e.shiftKey && (e.code === "Space" || e.code === "Enter") && e.stopPropagation();
+		}
+	} : null, T = {
+		...m,
+		transform: o.Translate.toString(b),
+		transition: x,
+		opacity: S ? .5 : 1,
+		cursor: t ? void 0 : "grab"
+	}, E = c, D = c === "th" ? {
+		...l === void 0 ? {} : { colSpan: l },
+		...u === void 0 ? {} : { rowSpan: u }
+	} : {};
+	return /* @__PURE__ */ r(s.Provider, {
+		value: w,
+		children: /* @__PURE__ */ i(E, {
+			ref: g,
+			className: p,
+			style: T,
+			...D,
+			...t ? {} : f ? {
+				...v,
+				tabIndex: void 0,
+				"aria-roledescription": void 0,
+				"aria-describedby": void 0,
+				"aria-disabled": void 0,
+				"aria-pressed": void 0
+			} : v,
+			...t ? {} : y,
+			onKeyDown: t ? void 0 : (e) => {
+				(!f || e.code === "Space") && y?.onKeyDown?.(e);
+			},
+			role: c === "th" ? "columnheader" : t ? void 0 : v.role,
+			"aria-sort": d,
+			children: [h, w && /* @__PURE__ */ r("span", {
+				id: C,
+				"aria-hidden": "true",
+				className: "sr-only",
+				children: "Shift+Space로 컬럼 이동을 시작하고 화살표로 이동한 뒤 Space 또는 Enter로 놓습니다."
+			})]
+		})
 	});
 }
 //#endregion
-export { r as SortableHeaderCell };
+export { l as SortableHeaderCell, c as useSortableHeaderKeyboardDrag };

package/dist/components/table/hooks/sort-state.cjs

@@ -0,0 +1 @@
+function e(e,t,n=`tri`){return e?.key!==t||e.direction===null?{key:t,direction:`asc`}:e.direction===`asc`?{key:t,direction:`desc`}:n===`toggle`?{key:t,direction:`asc`}:null}function t(e,t){return e?.key===t?e.direction:null}function n(e){return e===`asc`?`ascending`:e===`desc`?`descending`:void 0}exports.ariaSort=n,exports.nextSort=e,exports.sortDirectionFor=t;

package/dist/components/table/hooks/sort-state.d.ts

@@ -0,0 +1,5 @@
+import { ColumnSort, SortDirection } from '../types.js';
+export type SortCycle = "tri" | "toggle";
+export declare function nextSort(current: ColumnSort | null, key: string, cycle?: SortCycle): ColumnSort | null;
+export declare function sortDirectionFor(sort: ColumnSort | null, key: string): SortDirection;
+export declare function ariaSort(direction: SortDirection): "ascending" | "descending" | undefined;

package/dist/components/table/hooks/sort-state.esm.js

@@ -0,0 +1,21 @@
+//#region src/components/table/hooks/sort-state.ts
+function e(e, t, n = "tri") {
+	return e?.key !== t || e.direction === null ? {
+		key: t,
+		direction: "asc"
+	} : e.direction === "asc" ? {
+		key: t,
+		direction: "desc"
+	} : n === "toggle" ? {
+		key: t,
+		direction: "asc"
+	} : null;
+}
+function t(e, t) {
+	return e?.key === t ? e.direction : null;
+}
+function n(e) {
+	return e === "asc" ? "ascending" : e === "desc" ? "descending" : void 0;
+}
+//#endregion
+export { n as ariaSort, e as nextSort, t as sortDirectionFor };

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

@@ -1 +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;
+const e=require("./sort-state.cjs");let t=require("react");function n({initialSort:n,serverSide:r=!1,onSort:i,cycle:a=`tri`}={}){let[o,s]=(0,t.useState)(n||null);return{sort:o,handleSort:(0,t.useCallback)(t=>{let n=e.nextSort(o,t,a);s(n),r&&i&&i(n)},[o,r,i,a]),sortedData:(0,t.useCallback)((e,t)=>!o||!o.direction||r?e:[...e].sort((e,n)=>{let r=t(e,o.key),i=t(n,o.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 o.direction===`asc`?r-i:i-r;let a=String(r),s=String(i),c=a.localeCompare(s,`ko`,{numeric:!0});return o.direction===`asc`?c:-c}),[o,r])}}exports.useTableSort=n;

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

@@ -1,4 +1,5 @@
 import { ColumnSort } from '../types.js';
+import { SortCycle } from './sort-state.js';
 /**
  * 테이블 정렬 훅 옵션
  */
@@ -15,7 +16,9 @@ export interface UseTableSortOptions {
     /**
      * 서버 사이드 정렬 콜백
      */
-    onSort?: (sort: ColumnSort) => void;
+    onSort?: (sort: ColumnSort | null) => void;
+    /** 정렬 순서. tri는 오름차순 → 내림차순 → 해제, toggle은 두 방향만 순환한다. */
+    cycle?: SortCycle;
 }
 /**
  * 테이블 정렬 훅 반환값
@@ -32,7 +35,7 @@ export interface UseTableSortReturn {
     /**
      * 정렬된 데이터 (클라이언트 사이드 정렬 시)
      */
-    sortedData: <T>(data: T[], getValue: (row: T, key: string) => any) => T[];
+    sortedData: <T>(data: T[], getValue: (row: T, key: string) => unknown) => T[];
 }
 /**
  * 테이블 정렬 훅
@@ -44,4 +47,4 @@ export interface UseTableSortReturn {
  * });
  * ```
  */
-export declare function useTableSort({ initialSort, serverSide, onSort, }?: UseTableSortOptions): UseTableSortReturn;
+export declare function useTableSort({ initialSort, serverSide, onSort, cycle, }?: UseTableSortOptions): UseTableSortReturn;

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

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

package/dist/components/table/paginated-table.d.ts

@@ -2,6 +2,8 @@ import { PaginatedTableProps } from './types.js';
 /**
  * PaginatedTable — Table 코어를 래핑해 페이지네이션 footer를 추가한 변형.
  * Table 본체 로직(헤더 정렬·리사이즈·grip, 본문 스트라이프·선택·sticky, 컬럼 프리셋)은 Table에 그대로 위임한다.
+ * 클라이언트 정렬은 전달된 현재 페이지 데이터만 정렬한다. 서버 페이지네이션이면 serverSideSorting을 사용하고,
+ * 정렬 변경 시 페이지 초기화는 호출부에서 처리한다.
  */
 export declare const PaginatedTable: <T>(props: PaginatedTableProps<T> & {
     ref?: React.ForwardedRef<HTMLDivElement>;

package/dist/components/table/table.cjs

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

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

@@ -4,6 +4,8 @@ import { TableProps } from './types.js';
  *
  * 페이지네이션이 없는 조회 API 또는 페이지네이션 영역을 별도로 렌더하는 경우 사용.
  * PaginatedTable은 이 컴포넌트를 wrap해서 footer(Pagination/PageJump/PageSize)를 추가.
+ * 클라이언트 정렬은 전달된 현재 페이지 데이터만 정렬한다. 서버 페이지네이션이면 serverSideSorting을 사용하고,
+ * 정렬 변경 시 페이지 초기화는 호출부에서 처리한다.
  * 컬럼 너비 합이 컨테이너보다 작아 열이 늘어나면 브라우저가 남는 폭을 재분배하므로 드래그 이동량과 화면 변화량이 비례하지 않는다. 컬럼 합을 컨테이너 이상으로 지정한다(여백 컬럼이 필요하면 AccordionTable을 쓴다 — Table에는 여백 컬럼 옵션이 없다).
  */
 export declare const Table: <T>(props: TableProps<T> & {