@xonic0506/sonic-ui 0.6.0 → 0.6.1

package/dist/components/data-grid.js

@@ -184,7 +184,7 @@ function Oe({ id: e, draggable: t, renderCells: n, ...r }) {
 	});
 }
 function ke({ rows: t, getRowId: r, columns: a, "aria-label": o, sorting: s, defaultSorting: c = null, onSortingChange: l, selection: u, onSelectionChange: h, columnOrder: g, onColumnOrderChange: _, onRowOrderChange: y, loading: b, emptyState: C, errorState: w, pagination: T, className: ie }) {
-	let E = u !== void 0 || h !== void 0, D = y !== void 0, O = _ !== void 0, [k, me] = L(s, c, l), [A, P] = L(u, [], h), [F, Te] = L(g, a.map(N), _), [ke, R] = L(T?.page, T?.defaultPage ?? 1, T?.onPageChange), [z, Ae] = L(T?.pageSize, T?.defaultPageSize ?? 20, T?.onPageSizeChange), B = T?.rowCount !== void 0, je = T ? Math.max(1, Math.ceil((B ? T.rowCount : t.length) / z)) : 1, V = Math.min(ke, je), H = v.useMemo(() => new Map(a.map((e) => [N(e), e])), [a]), Me = v.useMemo(() => {
+	let E = u !== void 0 || h !== void 0, D = y !== void 0, O = _ !== void 0, [k, me] = L(s, c, l), [A, P] = L(u, [], h), [F, Te] = L(g, a.map(N), _), [ke, R] = L(T?.page, T?.defaultPage ?? 1, T?.onPageChange), [z, Ae] = L(T?.pageSize, T?.defaultPageSize ?? 20, T?.onPageSizeChange), B = T?.rowCount !== void 0, je = T ? Math.max(1, Math.ceil((B ? T.rowCount : t.length) / z)) : 1, V = Math.min(ke, je), Me = v.useId(), H = v.useMemo(() => new Map(a.map((e) => [N(e), e])), [a]), Ne = v.useMemo(() => {
 		let e = [];
 		E && e.push({
 			id: j,
@@ -214,7 +214,7 @@ function ke({ rows: t, getRowId: r, columns: a, "aria-label": o, sorting: s, def
 		a,
 		E,
 		D
-	]), Ne = v.useMemo(() => ({
+	]), Pe = v.useMemo(() => ({
 		start: [
 			...E ? [j] : [],
 			...D ? [M] : [],
@@ -227,13 +227,13 @@ function ke({ rows: t, getRowId: r, columns: a, "aria-label": o, sorting: s, def
 		D
 	]), U = ae({
 		features: ye,
-		columns: Me,
+		columns: Ne,
 		data: t,
 		getRowId: (e) => r(e),
 		state: {
 			sorting: k ? [k] : [],
 			columnOrder: F,
-			columnPinning: Ne,
+			columnPinning: Pe,
 			pagination: {
 				pageIndex: V - 1,
 				pageSize: T ? z : t.length
@@ -245,12 +245,12 @@ function ke({ rows: t, getRowId: r, columns: a, "aria-label": o, sorting: s, def
 		...U.getStartFlatHeaders(),
 		...U.getCenterFlatHeaders(),
 		...U.getEndFlatHeaders()
-	], G = U.getRowModel().rows, Pe = t.map(r), K = G.map((e) => e.id), q = U.getCenterFlatHeaders().map((e) => e.column.id), Fe = D && !k, J = v.useRef(null), Y = !T && G.length > ve, Ie = oe({
-		count: Y ? G.length : 0,
-		getScrollElement: () => J.current,
+	], G = U.getRowModel().rows, Fe = t.map(r), K = G.map((e) => e.id), q = U.getCenterFlatHeaders().map((e) => e.column.id), Ie = D && !k, Le = v.useRef(null), J = !T && G.length > ve, Re = oe({
+		count: J ? G.length : 0,
+		getScrollElement: () => Le.current,
 		estimateSize: () => 40,
 		overscan: 8
-	}), X = Y ? Ie.getVirtualItems() : null, Le = X ? X.map((e) => G[e.index]) : G, Re = X?.[0]?.start ?? 0, ze = X ? Ie.getTotalSize() - (X.at(-1)?.end ?? 0) : 0, Be = typeof document > "u" ? void 0 : document.body, Ve = fe(de(le, { activationConstraint: { distance: 4 } }), de(ce, { coordinateGetter: ge })), Z = Ce(Pe, (e) => y?.(e)), Q = Ce(q, (e) => Te([...F.filter((t) => !e.includes(t)), ...e])), He = (e) => {
+	}), Y = J ? Re.getVirtualItems() : null, ze = Y ? Y.map((e) => G[e.index]) : G, Be = Y?.[0]?.start ?? 0, X = Y ? Re.getTotalSize() - (Y.at(-1)?.end ?? 0) : 0, Ve = typeof document > "u" ? void 0 : document.body, He = fe(de(le, { activationConstraint: { distance: 4 } }), de(ce, { coordinateGetter: ge })), Z = Ce(Fe, (e) => y?.(e)), Q = Ce(q, (e) => Te([...F.filter((t) => !e.includes(t)), ...e])), Ue = (e) => {
 		me(k?.id === e ? k.desc ? null : {
 			id: e,
 			desc: !0
@@ -258,7 +258,7 @@ function ke({ rows: t, getRowId: r, columns: a, "aria-label": o, sorting: s, def
 			id: e,
 			desc: !1
 		}), T && V !== 1 && R(1);
-	}, Ue = K.length > 0 && K.every((e) => A.includes(e)), We = !Ue && K.some((e) => A.includes(e)), Ge = (e) => P([...A.filter((e) => !K.includes(e)), ...e ? K : []]), Ke = (t) => {
+	}, We = K.length > 0 && K.every((e) => A.includes(e)), Ge = !We && K.some((e) => A.includes(e)), Ke = (e) => P([...A.filter((e) => !K.includes(e)), ...e ? K : []]), qe = (t) => {
 		let { column: r } = t, i = r.id, a = r.getIsPinned(), o = a === "start" ? "left" : a === "end" ? "right" : void 0, s = {
 			pinned: o,
 			style: we(r, i === j || i === M || H.get(i)?.width !== void 0),
@@ -267,9 +267,9 @@ function ke({ rows: t, getRowId: r, columns: a, "aria-label": o, sorting: s, def
 		if (i === j) return /* @__PURE__ */ x(p, {
 			...s,
 			children: /* @__PURE__ */ x(n, {
-				checked: Ue,
-				indeterminate: We,
-				onCheckedChange: Ge,
+				checked: We,
+				indeterminate: Ge,
+				onCheckedChange: Ke,
 				children: /* @__PURE__ */ x("span", {
 					className: "sn:sr-only",
 					children: "모든 행 선택"
@@ -285,7 +285,7 @@ function ke({ rows: t, getRowId: r, columns: a, "aria-label": o, sorting: s, def
 		}, i);
 		let c = H.get(i), l = c.header ?? "", u = "sortable" in c && c.sortable ? {
 			sort: k?.id === i ? k.desc ? "desc" : "asc" : "none",
-			onSort: () => He(i)
+			onSort: () => Ue(i)
 		} : {}, d = c.type === "actions" && !c.header ? /* @__PURE__ */ x("span", {
 			className: "sn:sr-only",
 			children: "동작"
@@ -304,20 +304,20 @@ function ke({ rows: t, getRowId: r, columns: a, "aria-label": o, sorting: s, def
 			...u,
 			children: d
 		}, i);
-	}, qe = (e) => /* @__PURE__ */ x(m, { children: /* @__PURE__ */ x(f, {
+	}, Je = (e) => /* @__PURE__ */ x(m, { children: /* @__PURE__ */ x(f, {
 		colSpan: W.length,
 		className: "sn:h-auto sn:p-0",
 		children: e
 	}) }), $;
-	return $ = w ? qe(w) : b ? Array.from({ length: 5 }, (e, t) => /* @__PURE__ */ x(m, { children: W.map((e) => /* @__PURE__ */ x(f, { children: e.column.id === j || e.column.id === M ? null : /* @__PURE__ */ x(i, {
+	return $ = w ? Je(w) : b ? Array.from({ length: 5 }, (e, t) => /* @__PURE__ */ x(m, { children: W.map((e) => /* @__PURE__ */ x(f, { children: e.column.id === j || e.column.id === M ? null : /* @__PURE__ */ x(i, {
 		shape: "text",
 		className: "sn:w-2/3"
-	}) }, e.id)) }, t)) : G.length === 0 ? C ? qe(C) : null : /* @__PURE__ */ S(re, { children: [
-		Re > 0 && /* @__PURE__ */ x("tr", {
+	}) }, e.id)) }, t)) : G.length === 0 ? C ? Je(C) : null : /* @__PURE__ */ S(re, { children: [
+		Be > 0 && /* @__PURE__ */ x("tr", {
 			"aria-hidden": !0,
-			style: { height: Re }
+			style: { height: Be }
 		}),
-		Le.map((t) => {
+		ze.map((t) => {
 			let r = A.includes(t.id), i = Z.drop?.id === t.id ? xe[Z.drop.side] : void 0, a = [
 				...t.getStartVisibleCells(),
 				...t.getCenterVisibleCells(),
@@ -325,10 +325,10 @@ function ke({ rows: t, getRowId: r, columns: a, "aria-label": o, sorting: s, def
 			];
 			return /* @__PURE__ */ x(Oe, {
 				id: t.id,
-				draggable: Fe,
+				draggable: Ie,
 				selected: r,
 				"aria-selected": E ? r : void 0,
-				"aria-rowindex": Y ? t.index + 2 : void 0,
+				"aria-rowindex": J ? t.index + 2 : void 0,
 				renderCells: (o) => a.map((a) => {
 					let { column: s } = a, c = s.id, l = s.getIsPinned(), u = l === "start" ? "left" : l === "end" ? "right" : void 0, d = H.get(c), p;
 					return p = c === j ? /* @__PURE__ */ x(n, {
@@ -348,25 +348,26 @@ function ke({ rows: t, getRowId: r, columns: a, "aria-label": o, sorting: s, def
 				})
 			}, t.id);
 		}),
-		ze > 0 && /* @__PURE__ */ x("tr", {
+		X > 0 && /* @__PURE__ */ x("tr", {
 			"aria-hidden": !0,
-			style: { height: ze }
+			style: { height: X }
 		})
 	] }), /* @__PURE__ */ S("div", {
 		className: e("sn:flex sn:w-full sn:flex-col sn:gap-4", ie),
 		children: [/* @__PURE__ */ x("div", {
-			ref: J,
-			className: "sn:min-h-0 sn:w-full sn:flex-1 sn:overflow-auto",
+			ref: Le,
+			className: "sn:relative sn:min-h-0 sn:w-full sn:flex-1 sn:overflow-auto",
 			children: /* @__PURE__ */ S("table", {
 				"aria-label": o,
 				"aria-busy": b || void 0,
-				"aria-rowcount": Y ? G.length + 1 : void 0,
+				"aria-rowcount": J ? G.length + 1 : void 0,
 				className: e(te, "sn:bg-surface"),
 				children: [/* @__PURE__ */ x(se, {
-					sensors: Ve,
+					id: `DndDescribedBy-${Me}-columns`,
+					sensors: He,
 					collisionDetection: ue,
 					accessibility: {
-						container: Be,
+						container: Ve,
 						announcements: I("열", () => q),
 						screenReaderInstructions: Se
 					},
@@ -376,13 +377,14 @@ function ke({ rows: t, getRowId: r, columns: a, "aria-label": o, sorting: s, def
 					children: /* @__PURE__ */ x(ee, { children: /* @__PURE__ */ x(pe, {
 						items: O ? q : [],
 						strategy: he,
-						children: /* @__PURE__ */ x(m, { children: W.map(Ke) })
+						children: /* @__PURE__ */ x(m, { children: W.map(qe) })
 					}) })
 				}), /* @__PURE__ */ x(se, {
-					sensors: Ve,
+					id: `DndDescribedBy-${Me}-rows`,
+					sensors: He,
 					collisionDetection: ue,
 					accessibility: {
-						container: Be,
+						container: Ve,
 						announcements: I("행", () => K),
 						screenReaderInstructions: Se
 					},
@@ -390,7 +392,7 @@ function ke({ rows: t, getRowId: r, columns: a, "aria-label": o, sorting: s, def
 					onDragEnd: Z.onDragEnd,
 					onDragCancel: Z.onDragCancel,
 					children: /* @__PURE__ */ x(pe, {
-						items: Fe ? K : [],
+						items: Ie ? K : [],
 						strategy: _e,
 						children: /* @__PURE__ */ x(d, { children: $ })
 					})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xonic0506/sonic-ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Figma-first personal design system (Base UI + Tailwind v4, prebuilt CSS)",
   "license": "MIT",
   "repository": {