@aloudata/aloudata-design 3.1.6 → 3.2.0-beta.0

package/dist/DataPreviewTable/components/Body/Cell.js

@@ -1,42 +1,105 @@
 import { cn } from "../../../lib/utils.js";
+import { c } from "react-compiler-runtime";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/DataPreviewTable/components/Body/Cell.tsx
 var bodyCellClassName = "ald-data-preview-body-cell tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-px-1 tw-py-0.5 tw-text-xs tw-leading-4 tw-text-[var(--content-primary)]";
 function Cell(props) {
+	const $ = c(23);
 	const { style, value, role, "aria-labelledby": labelledBy } = props;
-	const cellProps = {
-		role,
-		"aria-labelledby": labelledBy
-	};
-	if (typeof value === "string") return /* @__PURE__ */ jsx("div", {
-		...cellProps,
-		style,
-		className: bodyCellClassName,
-		children: value
-	});
-	if (typeof value === "number" || typeof value === "boolean") return /* @__PURE__ */ jsx("div", {
-		...cellProps,
-		style,
-		className: bodyCellClassName,
-		children: JSON.stringify(value)
-	});
-	if (typeof value === "object" && value === null) return /* @__PURE__ */ jsx("div", {
-		...cellProps,
-		style: {
-			fontStyle: "italic",
-			color: "var(--content-secondary)",
-			...style
-		},
-		className: cn(bodyCellClassName, "ald-data-preview-body-cell-null"),
-		children: "null"
-	});
-	return /* @__PURE__ */ jsx("div", {
-		...cellProps,
-		style,
-		className: bodyCellClassName,
-		children: value
-	});
+	let t0;
+	if ($[0] !== labelledBy || $[1] !== role) {
+		t0 = {
+			role,
+			"aria-labelledby": labelledBy
+		};
+		$[0] = labelledBy;
+		$[1] = role;
+		$[2] = t0;
+	} else t0 = $[2];
+	const cellProps = t0;
+	if (typeof value === "string") {
+		let t1;
+		if ($[3] !== cellProps || $[4] !== style || $[5] !== value) {
+			t1 = /* @__PURE__ */ jsx("div", {
+				...cellProps,
+				style,
+				className: bodyCellClassName,
+				children: value
+			});
+			$[3] = cellProps;
+			$[4] = style;
+			$[5] = value;
+			$[6] = t1;
+		} else t1 = $[6];
+		return t1;
+	}
+	if (typeof value === "number" || typeof value === "boolean") {
+		let t1;
+		if ($[7] !== value) {
+			t1 = JSON.stringify(value);
+			$[7] = value;
+			$[8] = t1;
+		} else t1 = $[8];
+		let t2;
+		if ($[9] !== cellProps || $[10] !== style || $[11] !== t1) {
+			t2 = /* @__PURE__ */ jsx("div", {
+				...cellProps,
+				style,
+				className: bodyCellClassName,
+				children: t1
+			});
+			$[9] = cellProps;
+			$[10] = style;
+			$[11] = t1;
+			$[12] = t2;
+		} else t2 = $[12];
+		return t2;
+	}
+	if (typeof value === "object" && value === null) {
+		let t1;
+		if ($[13] !== style) {
+			t1 = {
+				fontStyle: "italic",
+				color: "var(--content-secondary)",
+				...style
+			};
+			$[13] = style;
+			$[14] = t1;
+		} else t1 = $[14];
+		let t2;
+		if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = cn(bodyCellClassName, "ald-data-preview-body-cell-null");
+			$[15] = t2;
+		} else t2 = $[15];
+		let t3;
+		if ($[16] !== cellProps || $[17] !== t1) {
+			t3 = /* @__PURE__ */ jsx("div", {
+				...cellProps,
+				style: t1,
+				className: t2,
+				children: "null"
+			});
+			$[16] = cellProps;
+			$[17] = t1;
+			$[18] = t3;
+		} else t3 = $[18];
+		return t3;
+	}
+	let t1;
+	if ($[19] !== cellProps || $[20] !== style || $[21] !== value) {
+		t1 = /* @__PURE__ */ jsx("div", {
+			...cellProps,
+			style,
+			className: bodyCellClassName,
+			children: value
+		});
+		$[19] = cellProps;
+		$[20] = style;
+		$[21] = value;
+		$[22] = t1;
+	} else t1 = $[22];
+	return t1;
 }
 //#endregion
 export { Cell as default };

package/dist/DataPreviewTable/components/Body/Cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","names":[],"sources":["../../../../src/DataPreviewTable/components/Body/Cell.tsx"],"sourcesContent":["interface ICell {\n  value: TValue;\n  style?: React.CSSProperties;\n  role?: 'cell';\n  'aria-labelledby'?: string;\n}\nimport { cn } from '../../../lib/utils';\nimport React from 'react';\nimport { TValue } from '../../interface';\n\nconst bodyCellClassName =\n  'ald-data-preview-body-cell tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-px-1 tw-py-0.5 tw-text-xs tw-leading-4 tw-text-[var(--content-primary)]';\n\nexport default function Cell(props: ICell) {\n  const { style, value, role, 'aria-labelledby': labelledBy } = props;\n  const cellProps = { role, 'aria-labelledby': labelledBy };\n  if (typeof value === 'string') {\n    return (\n      <div {...cellProps} style={style} className={bodyCellClassName}>\n        {value}\n      </div>\n    );\n  }\n  if (typeof value === 'number' || typeof value === 'boolean') {\n    return (\n      <div {...cellProps} style={style} className={bodyCellClassName}>\n        {JSON.stringify(value)}\n      </div>\n    );\n  }\n  if (typeof value === 'object' && value === null) {\n    return (\n      <div\n        {...cellProps}\n        style={{\n          fontStyle: 'italic',\n          color: 'var(--content-secondary)',\n          ...style,\n        }}\n        className={cn(bodyCellClassName, 'ald-data-preview-body-cell-null')}\n      >\n        null\n      </div>\n    );\n  }\n  return (\n    <div {...cellProps} style={style} className={bodyCellClassName}>\n      {value}\n    </div>\n  );\n}\n"],"mappings":";;;;AAUA,IAAM,oBACJ;AAEF,SAAwB,KAAK,OAAc;CACzC,MAAM,EAAE,OAAO,OAAO,MAAM,mBAAmB,eAAe;CAC9D,MAAM,YAAY;EAAE;EAAM,mBAAmB;EAAY;AACzD,KAAI,OAAO,UAAU,SACnB,QACE,oBAAC,OAAD;EAAK,GAAI;EAAkB;EAAO,WAAW;YAC1C;EACG,CAAA;AAGV,KAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAChD,QACE,oBAAC,OAAD;EAAK,GAAI;EAAkB;EAAO,WAAW;YAC1C,KAAK,UAAU,MAAM;EAClB,CAAA;AAGV,KAAI,OAAO,UAAU,YAAY,UAAU,KACzC,QACE,oBAAC,OAAD;EACE,GAAI;EACJ,OAAO;GACL,WAAW;GACX,OAAO;GACP,GAAG;GACJ;EACD,WAAW,GAAG,mBAAmB,kCAAkC;YACpE;EAEK,CAAA;AAGV,QACE,oBAAC,OAAD;EAAK,GAAI;EAAkB;EAAO,WAAW;YAC1C;EACG,CAAA"}
+{"version":3,"file":"Cell.js","names":["ICell","value","TValue","style","React","CSSProperties","role","cn","bodyCellClassName","Cell","props","$","_c","labelledBy","t0","cellProps","t1","JSON","stringify","t2","fontStyle","color","Symbol","for","t3"],"sources":["../../../../src/DataPreviewTable/components/Body/Cell.tsx"],"sourcesContent":["interface ICell {\n  value: TValue;\n  style?: React.CSSProperties;\n  role?: 'cell';\n  'aria-labelledby'?: string;\n}\nimport { cn } from '../../../lib/utils';\nimport React from 'react';\nimport { TValue } from '../../interface';\n\nconst bodyCellClassName =\n  'ald-data-preview-body-cell tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-px-1 tw-py-0.5 tw-text-xs tw-leading-4 tw-text-[var(--content-primary)]';\n\nexport default function Cell(props: ICell) {\n  const { style, value, role, 'aria-labelledby': labelledBy } = props;\n  const cellProps = { role, 'aria-labelledby': labelledBy };\n  if (typeof value === 'string') {\n    return (\n      <div {...cellProps} style={style} className={bodyCellClassName}>\n        {value}\n      </div>\n    );\n  }\n  if (typeof value === 'number' || typeof value === 'boolean') {\n    return (\n      <div {...cellProps} style={style} className={bodyCellClassName}>\n        {JSON.stringify(value)}\n      </div>\n    );\n  }\n  if (typeof value === 'object' && value === null) {\n    return (\n      <div\n        {...cellProps}\n        style={{\n          fontStyle: 'italic',\n          color: 'var(--content-secondary)',\n          ...style,\n        }}\n        className={cn(bodyCellClassName, 'ald-data-preview-body-cell-null')}\n      >\n        null\n      </div>\n    );\n  }\n  return (\n    <div {...cellProps} style={style} className={bodyCellClassName}>\n      {value}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAUA,IAAMQ,oBACJ;AAEF,SAAeC,KAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CACb,MAAA,EAAAT,OAAAF,OAAAK,MAAA,mBAAAO,eAA8DH;CAAM,IAAAI;AAAA,KAAAH,EAAA,OAAAE,cAAAF,EAAA,OAAAL,MAAA;AAClDQ,OAAA;GAAAR;GAAA,mBAA2BO;GAAY;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAL;AAAAK,IAAA,KAAAG;OAAAA,MAAAH,EAAA;CAAzD,MAAAI,YAAkBD;AAClB,KAAI,OAAOb,UAAU,UAAQ;EAAA,IAAAe;AAAA,MAAAL,EAAA,OAAAI,aAAAJ,EAAA,OAAAR,SAAAQ,EAAA,OAAAV,OAAA;AAEzBe,QAAA,oBAAA,OAAA;IAEM,GAFGD;IAAkBZ;IAAkBK,WAAAA;cAC1CP;IACG,CAAA;AAAAU,KAAA,KAAAI;AAAAJ,KAAA,KAAAR;AAAAQ,KAAA,KAAAV;AAAAU,KAAA,KAAAK;QAAAA,MAAAL,EAAA;AAAA,SAFNK;;AAKJ,KAAI,OAAOf,UAAU,YAAY,OAAOA,UAAU,WAAS;EAAA,IAAAe;AAAA,MAAAL,EAAA,OAAAV,OAAA;AAGpDe,QAAAC,KAAIC,UAAWjB,MAAM;AAAAU,KAAA,KAAAV;AAAAU,KAAA,KAAAK;QAAAA,MAAAL,EAAA;EAAA,IAAAQ;AAAA,MAAAR,EAAA,OAAAI,aAAAJ,EAAA,QAAAR,SAAAQ,EAAA,QAAAK,IAAA;AADxBG,QAAA,oBAAA,OAAA;IAEM,GAFGJ;IAAkBZ;IAAkBK,WAAAA;cAC1CQ;IACG,CAAA;AAAAL,KAAA,KAAAI;AAAAJ,KAAA,MAAAR;AAAAQ,KAAA,MAAAK;AAAAL,KAAA,MAAAQ;QAAAA,MAAAR,EAAA;AAAA,SAFNQ;;AAKJ,KAAI,OAAOlB,UAAU,YAAYA,UAAU,MAAI;EAAA,IAAAe;AAAA,MAAAL,EAAA,QAAAR,OAAA;AAIlCa,QAAA;IAAAI,WACM;IAAQC,OACZ;IAA0B,GAC9BlB;IACJ;AAAAQ,KAAA,MAAAR;AAAAQ,KAAA,MAAAK;QAAAA,MAAAL,EAAA;EAAA,IAAAQ;AAAA,MAAAR,EAAA,QAAAW,OAAAC,IAAA,4BAAA,EAAA;AACUJ,QAAAZ,GAAGC,mBAAmB,kCAAkC;AAAAG,KAAA,MAAAQ;QAAAA,MAAAR,EAAA;EAAA,IAAAa;AAAA,MAAAb,EAAA,QAAAI,aAAAJ,EAAA,QAAAK,IAAA;AAPrEQ,QAAA,oBAAA,OAAA;IAUM,GATAT;IACG,OAAAC;IAKI,WAAAG;cACZ;IAEK,CAAA;AAAAR,KAAA,MAAAI;AAAAJ,KAAA,MAAAK;AAAAL,KAAA,MAAAa;QAAAA,MAAAb,EAAA;AAAA,SAVNa;;CAYH,IAAAR;AAAA,KAAAL,EAAA,QAAAI,aAAAJ,EAAA,QAAAR,SAAAQ,EAAA,QAAAV,OAAA;AAECe,OAAA,oBAAA,OAAA;GAEM,GAFGD;GAAkBZ;GAAkBK,WAAAA;aAC1CP;GACG,CAAA;AAAAU,IAAA,MAAAI;AAAAJ,IAAA,MAAAR;AAAAQ,IAAA,MAAAV;AAAAU,IAAA,MAAAK;OAAAA,MAAAL,EAAA;AAAA,QAFNK"}

package/dist/DataPreviewTable/components/Body/Error.d.ts

@@ -5,6 +5,6 @@ interface IErrorProps {
     headerHeight: number;
     errorMsg?: string | React.ReactNode;
 }
-declare function ErrorBody(props: IErrorProps): import("react/jsx-runtime").JSX.Element;
+declare function ErrorBody(props: IErrorProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof ErrorBody>;
 export default _default;

package/dist/DataPreviewTable/components/Body/Error.js.map

@@ -1 +1 @@
-{"version":3,"file":"Error.js","names":[],"sources":["../../../../src/DataPreviewTable/components/Body/Error.tsx"],"sourcesContent":["import React, { memo, useContext } from 'react';\nimport Result from '../../../Result';\nimport { LocaleContext, getTranslator } from '../../../locale/default';\n\ninterface IErrorProps {\n  wrapWidth: number;\n  wrapHeight: number;\n  headerHeight: number;\n  errorMsg?: string | React.ReactNode;\n}\nfunction ErrorBody(props: IErrorProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    wrapWidth,\n    wrapHeight,\n    headerHeight,\n    errorMsg = t.DataPreviewTable.loadFailed,\n  } = props;\n  return (\n    <div\n      className=\"ald-data-preview-table-error tw-absolute tw-left-0 tw-flex tw-items-center tw-justify-center\"\n      style={{\n        width: wrapWidth,\n        height: Math.max(wrapHeight - headerHeight, 0),\n        top: headerHeight,\n      }}\n    >\n      {typeof errorMsg === 'string' ? (\n        <Result status=\"warning\" subTitle={errorMsg} />\n      ) : (\n        errorMsg\n      )}\n    </div>\n  );\n}\nexport default memo(ErrorBody);\n"],"mappings":";;;;;AAUA,SAAS,UAAU,OAAoB;CACrC,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EACJ,WACA,YACA,cACA,WAAW,EAAE,iBAAiB,eAC5B;AACJ,QACE,oBAAC,OAAD;EACE,WAAU;EACV,OAAO;GACL,OAAO;GACP,QAAQ,KAAK,IAAI,aAAa,cAAc,EAAE;GAC9C,KAAK;GACN;YAEA,OAAO,aAAa,WACnB,oBAAC,QAAD;GAAQ,QAAO;GAAU,UAAU;GAAY,CAAA,GAE/C;EAEE,CAAA;;AAGV,IAAA,gBAAe,KAAK,UAAU"}
+{"version":3,"file":"Error.js","names":["React","memo","useContext","Result","LocaleContext","getTranslator","IErrorProps","wrapWidth","wrapHeight","headerHeight","errorMsg","ReactNode","ErrorBody","props","locale","t","DataPreviewTable","loadFailed","width","height","Math","max","top"],"sources":["../../../../src/DataPreviewTable/components/Body/Error.tsx"],"sourcesContent":["import React, { memo, useContext } from 'react';\nimport Result from '../../../Result';\nimport { LocaleContext, getTranslator } from '../../../locale/default';\n\ninterface IErrorProps {\n  wrapWidth: number;\n  wrapHeight: number;\n  headerHeight: number;\n  errorMsg?: string | React.ReactNode;\n}\nfunction ErrorBody(props: IErrorProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    wrapWidth,\n    wrapHeight,\n    headerHeight,\n    errorMsg = t.DataPreviewTable.loadFailed,\n  } = props;\n  return (\n    <div\n      className=\"ald-data-preview-table-error tw-absolute tw-left-0 tw-flex tw-items-center tw-justify-center\"\n      style={{\n        width: wrapWidth,\n        height: Math.max(wrapHeight - headerHeight, 0),\n        top: headerHeight,\n      }}\n    >\n      {typeof errorMsg === 'string' ? (\n        <Result status=\"warning\" subTitle={errorMsg} />\n      ) : (\n        errorMsg\n      )}\n    </div>\n  );\n}\nexport default memo(ErrorBody);\n"],"mappings":";;;;;AAUA,SAASY,UAAUC,OAAoB;CACrC,MAAM,EAAEC,WAAWZ,WAAWE,cAAc;CAC5C,MAAMW,IAAIV,cAAcS,OAAO;CAE/B,MAAM,EACJP,WACAC,YACAC,cACAC,WAAWK,EAAEC,iBAAiBC,eAC5BJ;AACJ,QACE,oBAAC,OAAD;EACE,WAAU;EACV,OAAO;GACLK,OAAOX;GACPY,QAAQC,KAAKC,IAAIb,aAAaC,cAAc,EAAE;GAC9Ca,KAAKb;GACN;YAEA,OAAOC,aAAa,WACnB,oBAAC,QAAD;GAAQ,QAAO;GAAU,UAAUA;GAAY,CAAA,GAE/CA;EAEE,CAAA;;AAGV,IAAA,gBAAeT,KAAKW,UAAU"}

package/dist/DataPreviewTable/components/Body/index.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { IColumnLayout, PreviewColumn, TValue } from '../../interface';
+import { IColumnLayout, PreviewColumn, TValue } from '../../interface.js';
 interface IHeader {
     tableId: string;
     columns: PreviewColumn[];
@@ -9,6 +9,6 @@ interface IHeader {
     rowRange: [number, number];
     headerHeight: number;
 }
-declare function Body(props: IHeader): import("react/jsx-runtime").JSX.Element;
+declare function Body(props: IHeader): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Body>;
 export default _default;

package/dist/DataPreviewTable/components/Body/index.js

@@ -1,49 +1,85 @@
 import { cn } from "../../../lib/utils.js";
 import Cell from "./Cell.js";
+import { c } from "react-compiler-runtime";
 import { createElement, memo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/DataPreviewTable/components/Body/index.tsx
 function Body(props) {
-	const { tableId, columns, columnLayout, datasource, columnRange: [startIndex, endIndex], rowRange: [startRowIndex, endRowIndex], headerHeight } = props;
-	return /* @__PURE__ */ jsx("div", {
-		role: "rowgroup",
-		className: "ald-data-preview-table-body",
-		children: datasource.slice(startRowIndex, endRowIndex).map((row, rowIndex) => {
-			const currentRowIndex = startRowIndex + rowIndex;
-			return /* @__PURE__ */ jsx("div", {
-				role: "row",
-				"aria-rowindex": currentRowIndex + 2,
-				style: { display: "contents" },
-				children: row.slice(startIndex, endIndex + 1).map((cell, index) => {
-					const columnIndex = startIndex + index;
-					const style = {
-						height: 20,
-						width: columnLayout[columns[columnIndex].id].width,
-						top: currentRowIndex * 20 + headerHeight,
-						left: columnLayout[columns[columnIndex].id].left,
-						position: "absolute",
-						textAlign: columns[columnIndex].align || "left"
-					};
-					const render = columns[columnIndex].render;
-					const cellProps = {
-						role: "cell",
-						"aria-labelledby": `${tableId}-column-${encodeURIComponent(columns[columnIndex].id)}`
-					};
-					if (render) return /* @__PURE__ */ createElement("div", {
-						...cellProps,
-						className: cn("ald-data-preview-body-cell ald-data-preview-body-cell-custom", "tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-text-xs tw-leading-4 tw-text-[var(--content-primary)]"),
-						style,
-						key: columnIndex
-					}, render(cell));
-					return /* @__PURE__ */ jsx(Cell, {
-						style,
-						value: cell,
-						...cellProps
-					}, columnIndex);
-				})
-			}, currentRowIndex);
-		})
-	});
+	const $ = c(20);
+	const { tableId, columns, columnLayout, datasource, columnRange: t0, rowRange: t1, headerHeight } = props;
+	const [startIndex, endIndex] = t0;
+	const [startRowIndex, endRowIndex] = t1;
+	let t2;
+	if ($[0] !== columnLayout || $[1] !== columns || $[2] !== datasource || $[3] !== endIndex || $[4] !== endRowIndex || $[5] !== headerHeight || $[6] !== startIndex || $[7] !== startRowIndex || $[8] !== tableId) {
+		let t3;
+		if ($[10] !== columnLayout || $[11] !== columns || $[12] !== endIndex || $[13] !== headerHeight || $[14] !== startIndex || $[15] !== startRowIndex || $[16] !== tableId) {
+			t3 = (row, rowIndex) => {
+				const currentRowIndex = startRowIndex + rowIndex;
+				return /* @__PURE__ */ jsx("div", {
+					role: "row",
+					"aria-rowindex": currentRowIndex + 2,
+					style: { display: "contents" },
+					children: row.slice(startIndex, endIndex + 1).map((cell, index) => {
+						const columnIndex = startIndex + index;
+						const style = {
+							height: 20,
+							width: columnLayout[columns[columnIndex].id].width,
+							top: currentRowIndex * 20 + headerHeight,
+							left: columnLayout[columns[columnIndex].id].left,
+							position: "absolute",
+							textAlign: columns[columnIndex].align || "left"
+						};
+						const render = columns[columnIndex].render;
+						const cellProps = {
+							role: "cell",
+							"aria-labelledby": `${tableId}-column-${encodeURIComponent(columns[columnIndex].id)}`
+						};
+						if (render) return /* @__PURE__ */ createElement("div", {
+							...cellProps,
+							className: cn("ald-data-preview-body-cell ald-data-preview-body-cell-custom", "tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-text-xs tw-leading-4 tw-text-[var(--content-primary)]"),
+							style,
+							key: columnIndex
+						}, render(cell));
+						return /* @__PURE__ */ jsx(Cell, {
+							style,
+							value: cell,
+							...cellProps
+						}, columnIndex);
+					})
+				}, currentRowIndex);
+			};
+			$[10] = columnLayout;
+			$[11] = columns;
+			$[12] = endIndex;
+			$[13] = headerHeight;
+			$[14] = startIndex;
+			$[15] = startRowIndex;
+			$[16] = tableId;
+			$[17] = t3;
+		} else t3 = $[17];
+		t2 = datasource.slice(startRowIndex, endRowIndex).map(t3);
+		$[0] = columnLayout;
+		$[1] = columns;
+		$[2] = datasource;
+		$[3] = endIndex;
+		$[4] = endRowIndex;
+		$[5] = headerHeight;
+		$[6] = startIndex;
+		$[7] = startRowIndex;
+		$[8] = tableId;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[18] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			role: "rowgroup",
+			className: "ald-data-preview-table-body",
+			children: t2
+		});
+		$[18] = t2;
+		$[19] = t3;
+	} else t3 = $[19];
+	return t3;
 }
 var Body_default = memo(Body);
 //#endregion

package/dist/DataPreviewTable/components/Body/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/DataPreviewTable/components/Body/index.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport { cn } from '../../../lib/utils';\nimport { CELL_HEIGHT } from '../../constant';\nimport { IColumnLayout, PreviewColumn, TValue } from '../../interface';\nimport Cell from './Cell';\ninterface IHeader {\n  tableId: string;\n  columns: PreviewColumn[];\n  columnLayout: IColumnLayout;\n  columnRange: [number, number];\n  datasource: TValue[][];\n  rowRange: [number, number];\n  headerHeight: number;\n}\nfunction Body(props: IHeader) {\n  const {\n    tableId,\n    columns,\n    columnLayout,\n    datasource,\n    columnRange: [startIndex, endIndex],\n    rowRange: [startRowIndex, endRowIndex],\n    headerHeight,\n  } = props;\n\n  return (\n    <div role=\"rowgroup\" className=\"ald-data-preview-table-body\">\n      {datasource.slice(startRowIndex, endRowIndex).map((row, rowIndex) => {\n        const currentRowIndex = startRowIndex + rowIndex;\n\n        return (\n          <div\n            role=\"row\"\n            aria-rowindex={currentRowIndex + 2}\n            key={currentRowIndex}\n            style={{ display: 'contents' }}\n          >\n            {row.slice(startIndex, endIndex + 1).map((cell, index) => {\n              const columnIndex = startIndex + index;\n              const style: React.CSSProperties = {\n                height: CELL_HEIGHT,\n                width: columnLayout[columns[columnIndex].id].width,\n                top: currentRowIndex * CELL_HEIGHT + headerHeight,\n                left: columnLayout[columns[columnIndex].id].left,\n                position: 'absolute',\n                textAlign: columns[columnIndex].align || 'left',\n              };\n              const render = columns[columnIndex].render;\n              const cellProps = {\n                role: 'cell' as const,\n                'aria-labelledby': `${tableId}-column-${encodeURIComponent(\n                  columns[columnIndex].id,\n                )}`,\n              };\n              if (render) {\n                return (\n                  <div\n                    {...cellProps}\n                    className={cn(\n                      'ald-data-preview-body-cell ald-data-preview-body-cell-custom',\n                      'tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-text-xs tw-leading-4 tw-text-[var(--content-primary)]',\n                    )}\n                    style={style}\n                    key={columnIndex}\n                  >\n                    {render(cell)}\n                  </div>\n                );\n              }\n              return (\n                <Cell\n                  key={columnIndex}\n                  style={style}\n                  value={cell}\n                  {...cellProps}\n                />\n              );\n            })}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\nexport default memo(Body);\n"],"mappings":";;;;;AAcA,SAAS,KAAK,OAAgB;CAC5B,MAAM,EACJ,SACA,SACA,cACA,YACA,aAAa,CAAC,YAAY,WAC1B,UAAU,CAAC,eAAe,cAC1B,iBACE;AAEJ,QACE,oBAAC,OAAD;EAAK,MAAK;EAAW,WAAU;YAC5B,WAAW,MAAM,eAAe,YAAY,CAAC,KAAK,KAAK,aAAa;GACnE,MAAM,kBAAkB,gBAAgB;AAExC,UACE,oBAAC,OAAD;IACE,MAAK;IACL,iBAAe,kBAAkB;IAEjC,OAAO,EAAE,SAAS,YAAY;cAE7B,IAAI,MAAM,YAAY,WAAW,EAAE,CAAC,KAAK,MAAM,UAAU;KACxD,MAAM,cAAc,aAAa;KACjC,MAAM,QAA6B;MACjC,QAAA;MACA,OAAO,aAAa,QAAQ,aAAa,IAAI;MAC7C,KAAK,kBAAA,KAAgC;MACrC,MAAM,aAAa,QAAQ,aAAa,IAAI;MAC5C,UAAU;MACV,WAAW,QAAQ,aAAa,SAAS;MAC1C;KACD,MAAM,SAAS,QAAQ,aAAa;KACpC,MAAM,YAAY;MAChB,MAAM;MACN,mBAAmB,GAAG,QAAQ,UAAU,mBACtC,QAAQ,aAAa,GACtB;MACF;AACD,SAAI,OACF,QACE,8BAAC,OAAD;MACE,GAAI;MACJ,WAAW,GACT,gEACA,kMACD;MACM;MACP,KAAK;MAGD,EADH,OAAO,KAAK,CACT;AAGV,YACE,oBAAC,MAAD;MAES;MACP,OAAO;MACP,GAAI;MACJ,EAJK,YAIL;MAEJ;IACE,EA5CC,gBA4CD;IAER;EACE,CAAA;;AAGV,IAAA,eAAe,KAAK,KAAK"}
+{"version":3,"file":"index.js","names":["React","memo","cn","CELL_HEIGHT","IColumnLayout","PreviewColumn","TValue","Cell","IHeader","tableId","columns","columnLayout","columnRange","datasource","rowRange","headerHeight","Body","props","$","_c","t0","t1","startIndex","endIndex","startRowIndex","endRowIndex","t2","t3","row","rowIndex","currentRowIndex","display","slice","map","cell","index","columnIndex","style","height","width","id","top","left","position","textAlign","align","render","cellProps","role","const","encodeURIComponent"],"sources":["../../../../src/DataPreviewTable/components/Body/index.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport { cn } from '../../../lib/utils';\nimport { CELL_HEIGHT } from '../../constant';\nimport { IColumnLayout, PreviewColumn, TValue } from '../../interface';\nimport Cell from './Cell';\ninterface IHeader {\n  tableId: string;\n  columns: PreviewColumn[];\n  columnLayout: IColumnLayout;\n  columnRange: [number, number];\n  datasource: TValue[][];\n  rowRange: [number, number];\n  headerHeight: number;\n}\nfunction Body(props: IHeader) {\n  const {\n    tableId,\n    columns,\n    columnLayout,\n    datasource,\n    columnRange: [startIndex, endIndex],\n    rowRange: [startRowIndex, endRowIndex],\n    headerHeight,\n  } = props;\n\n  return (\n    <div role=\"rowgroup\" className=\"ald-data-preview-table-body\">\n      {datasource.slice(startRowIndex, endRowIndex).map((row, rowIndex) => {\n        const currentRowIndex = startRowIndex + rowIndex;\n\n        return (\n          <div\n            role=\"row\"\n            aria-rowindex={currentRowIndex + 2}\n            key={currentRowIndex}\n            style={{ display: 'contents' }}\n          >\n            {row.slice(startIndex, endIndex + 1).map((cell, index) => {\n              const columnIndex = startIndex + index;\n              const style: React.CSSProperties = {\n                height: CELL_HEIGHT,\n                width: columnLayout[columns[columnIndex].id].width,\n                top: currentRowIndex * CELL_HEIGHT + headerHeight,\n                left: columnLayout[columns[columnIndex].id].left,\n                position: 'absolute',\n                textAlign: columns[columnIndex].align || 'left',\n              };\n              const render = columns[columnIndex].render;\n              const cellProps = {\n                role: 'cell' as const,\n                'aria-labelledby': `${tableId}-column-${encodeURIComponent(\n                  columns[columnIndex].id,\n                )}`,\n              };\n              if (render) {\n                return (\n                  <div\n                    {...cellProps}\n                    className={cn(\n                      'ald-data-preview-body-cell ald-data-preview-body-cell-custom',\n                      'tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-text-xs tw-leading-4 tw-text-[var(--content-primary)]',\n                    )}\n                    style={style}\n                    key={columnIndex}\n                  >\n                    {render(cell)}\n                  </div>\n                );\n              }\n              return (\n                <Cell\n                  key={columnIndex}\n                  style={style}\n                  value={cell}\n                  {...cellProps}\n                />\n              );\n            })}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\nexport default memo(Body);\n"],"mappings":";;;;;;AAcA,SAAAgB,KAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CACE,MAAA,EAAAV,SAAAC,SAAAC,cAAAE,YAAAD,aAAAQ,IAAAN,UAAAO,IAAAN,iBAQIE;CAHW,MAAA,CAAAK,YAAAC,YAAAH;CACH,MAAA,CAAAI,eAAAC,eAAAJ;CAA4B,IAAAK;AAAA,KAAAR,EAAA,OAAAP,gBAAAO,EAAA,OAAAR,WAAAQ,EAAA,OAAAL,cAAAK,EAAA,OAAAK,YAAAL,EAAA,OAAAO,eAAAP,EAAA,OAAAH,gBAAAG,EAAA,OAAAI,cAAAJ,EAAA,OAAAM,iBAAAN,EAAA,OAAAT,SAAA;EAAA,IAAAkB;AAAA,MAAAT,EAAA,QAAAP,gBAAAO,EAAA,QAAAR,WAAAQ,EAAA,QAAAK,YAAAL,EAAA,QAAAH,gBAAAG,EAAA,QAAAI,cAAAJ,EAAA,QAAAM,iBAAAN,EAAA,QAAAT,SAAA;AAMckB,SAAAC,KAAAC,aAAA;IAChD,MAAAC,kBAAwBN,gBAAgBK;AAAS,WAG/C,oBAAA,OAAA;KACO,MAAA;KACU,iBAAAC,kBAAkB;KAE1B,OAAA,EAAAC,SAAW,YAAW;eAE5BH,IAAGI,MAAOV,YAAYC,WAAW,EAAE,CAAAU,KAAKC,MAAAC,UAAA;MACvC,MAAAC,cAAoBd,aAAaa;MACjC,MAAAE,QAAmC;OAAAC,QAAAA;OACdC,OACZ5B,aAAaD,QAAQ0B,aAAYI,IAAID;OAAME,KAC7CX,kBAAAA,KAAgCf;OAAY2B,MAC3C/B,aAAaD,QAAQ0B,aAAYI,IAAIE;OAAKC,UACtC;OAAUC,WACTlC,QAAQ0B,aAAYS,SAApB;OACZ;MACD,MAAAC,SAAepC,QAAQ0B,aAAYU;MACnC,MAAAC,YAAkB;OAAAC,MACV;OAAe,mBACF,GAAGvC,QAAO,UAAWyC,mBACtCxC,QAAQ0B,aAAYI,GACrB;OACF;AACD,UAAIM,OAAM,QAEN,8BAAA,OAAA;OAUM,GATAC;OACO,WAAA7C,GACT,gEACA,kMACF;OACOmC;OACFD,KAAAA;OAGD,EADHU,OAAOZ,KAAI,CACR;AAET,aAEC,oBAAC,MAAD;OAESG;OACAH,OAAAA;OAAI,GACPa;OACJ,EAJKX,YAIL;OAEL;KACG,EA5CCN,gBA4CD;;AAETZ,KAAA,MAAAP;AAAAO,KAAA,MAAAR;AAAAQ,KAAA,MAAAK;AAAAL,KAAA,MAAAH;AAAAG,KAAA,MAAAI;AAAAJ,KAAA,MAAAM;AAAAN,KAAA,MAAAT;AAAAS,KAAA,MAAAS;QAAAA,MAAAT,EAAA;AArDAQ,OAAAb,WAAUmB,MAAOR,eAAeC,YAAY,CAAAQ,IAAKN,GAqDhD;AAAAT,IAAA,KAAAP;AAAAO,IAAA,KAAAR;AAAAQ,IAAA,KAAAL;AAAAK,IAAA,KAAAK;AAAAL,IAAA,KAAAO;AAAAP,IAAA,KAAAH;AAAAG,IAAA,KAAAI;AAAAJ,IAAA,KAAAM;AAAAN,IAAA,KAAAT;AAAAS,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAAA,IAAAS;AAAA,KAAAT,EAAA,QAAAQ,IAAA;AAtDJC,OAAA,oBAAA,OAAA;GAAU,MAAA;GAAqB,WAAA;aAC5BD;GAsDG,CAAA;AAAAR,IAAA,MAAAQ;AAAAR,IAAA,MAAAS;OAAAA,MAAAT,EAAA;AAAA,QAvDNS;;AA0DJ,IAAA,eAAe1B,KAAKe,KAAK"}

package/dist/DataPreviewTable/components/Body.js

@@ -0,0 +1,2 @@
+export * from './Body/index.js';
+export { default } from './Body/index.js';

package/dist/DataPreviewTable/components/DragBar/Mask.d.ts

@@ -1,4 +1,5 @@
+import { default as React } from 'react';
 export default function Mask({ onMouseMove, onMouseUp, }: {
     onMouseMove: (e: MouseEvent) => void;
     onMouseUp: (e: MouseEvent) => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/DataPreviewTable/components/DragBar/Mask.js

@@ -1,29 +1,50 @@
+import { c } from "react-compiler-runtime";
 import { useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/DataPreviewTable/components/DragBar/Mask.tsx
-function Mask({ onMouseMove, onMouseUp }) {
-	useEffect(() => {
-		const onMouseMoveEvent = (event) => {
-			onMouseMove(event);
+function Mask(t0) {
+	const $ = c(5);
+	const { onMouseMove, onMouseUp } = t0;
+	let t1;
+	let t2;
+	if ($[0] !== onMouseMove || $[1] !== onMouseUp) {
+		t1 = () => {
+			const onMouseMoveEvent = (event) => {
+				onMouseMove(event);
+			};
+			const onMouseUpEvent = (event_0) => {
+				onMouseUp(event_0);
+			};
+			document.addEventListener("mousemove", onMouseMoveEvent);
+			document.addEventListener("mouseup", onMouseUpEvent);
+			return () => {
+				document.removeEventListener("mousemove", onMouseMoveEvent);
+				document.removeEventListener("mouseup", onMouseUpEvent);
+			};
 		};
-		const onMouseUpEvent = (event) => {
-			onMouseUp(event);
-		};
-		document.addEventListener("mousemove", onMouseMoveEvent);
-		document.addEventListener("mouseup", onMouseUpEvent);
-		return () => {
-			document.removeEventListener("mousemove", onMouseMoveEvent);
-			document.removeEventListener("mouseup", onMouseUpEvent);
-		};
-	}, [onMouseMove, onMouseUp]);
-	return /* @__PURE__ */ jsx("div", { style: {
-		position: "fixed",
-		left: 0,
-		top: 0,
-		zIndex: 1e3,
-		width: "100vw",
-		height: "100vh"
-	} });
+		t2 = [onMouseMove, onMouseUp];
+		$[0] = onMouseMove;
+		$[1] = onMouseUp;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx("div", { style: {
+			position: "fixed",
+			left: 0,
+			top: 0,
+			zIndex: 1e3,
+			width: "100vw",
+			height: "100vh"
+		} });
+		$[4] = t3;
+	} else t3 = $[4];
+	return t3;
 }
 //#endregion
 export { Mask as default };

package/dist/DataPreviewTable/components/DragBar/Mask.js.map

@@ -1 +1 @@
-{"version":3,"file":"Mask.js","names":[],"sources":["../../../../src/DataPreviewTable/components/DragBar/Mask.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nexport default function Mask({\n  onMouseMove,\n  onMouseUp,\n}: {\n  onMouseMove: (e: MouseEvent) => void;\n  onMouseUp: (e: MouseEvent) => void;\n}) {\n  useEffect(() => {\n    const onMouseMoveEvent = (event: MouseEvent) => {\n      onMouseMove(event);\n    };\n    const onMouseUpEvent = (event: MouseEvent) => {\n      onMouseUp(event);\n    };\n    document.addEventListener('mousemove', onMouseMoveEvent);\n    document.addEventListener('mouseup', onMouseUpEvent);\n    return () => {\n      document.removeEventListener('mousemove', onMouseMoveEvent);\n      document.removeEventListener('mouseup', onMouseUpEvent);\n    };\n  }, [onMouseMove, onMouseUp]);\n  return (\n    <div\n      style={{\n        position: 'fixed',\n        left: 0,\n        top: 0,\n        zIndex: 1000,\n        width: '100vw',\n        height: '100vh',\n      }}\n    ></div>\n  );\n}\n"],"mappings":";;;AACA,SAAwB,KAAK,EAC3B,aACA,aAIC;AACD,iBAAgB;EACd,MAAM,oBAAoB,UAAsB;AAC9C,eAAY,MAAM;;EAEpB,MAAM,kBAAkB,UAAsB;AAC5C,aAAU,MAAM;;AAElB,WAAS,iBAAiB,aAAa,iBAAiB;AACxD,WAAS,iBAAiB,WAAW,eAAe;AACpD,eAAa;AACX,YAAS,oBAAoB,aAAa,iBAAiB;AAC3D,YAAS,oBAAoB,WAAW,eAAe;;IAExD,CAAC,aAAa,UAAU,CAAC;AAC5B,QACE,oBAAC,OAAD,EACE,OAAO;EACL,UAAU;EACV,MAAM;EACN,KAAK;EACL,QAAQ;EACR,OAAO;EACP,QAAQ;EACT,EACI,CAAA"}
+{"version":3,"file":"Mask.js","names":["React","useEffect","Mask","t0","$","_c","onMouseMove","onMouseUp","t1","t2","onMouseMoveEvent","event","onMouseUpEvent","event_0","document","addEventListener","removeEventListener","t3","Symbol","for","position","left","top","zIndex","width","height"],"sources":["../../../../src/DataPreviewTable/components/DragBar/Mask.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nexport default function Mask({\n  onMouseMove,\n  onMouseUp,\n}: {\n  onMouseMove: (e: MouseEvent) => void;\n  onMouseUp: (e: MouseEvent) => void;\n}) {\n  useEffect(() => {\n    const onMouseMoveEvent = (event: MouseEvent) => {\n      onMouseMove(event);\n    };\n    const onMouseUpEvent = (event: MouseEvent) => {\n      onMouseUp(event);\n    };\n    document.addEventListener('mousemove', onMouseMoveEvent);\n    document.addEventListener('mouseup', onMouseUpEvent);\n    return () => {\n      document.removeEventListener('mousemove', onMouseMoveEvent);\n      document.removeEventListener('mouseup', onMouseUpEvent);\n    };\n  }, [onMouseMove, onMouseUp]);\n  return (\n    <div\n      style={{\n        position: 'fixed',\n        left: 0,\n        top: 0,\n        zIndex: 1000,\n        width: '100vw',\n        height: '100vh',\n      }}\n    ></div>\n  );\n}\n"],"mappings":";;;;AACA,SAAeE,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAc,MAAA,EAAAC,aAAAC,cAAAJ;CAM5B,IAAAK;CAAA,IAAAC;AAAA,KAAAL,EAAA,OAAAE,eAAAF,EAAA,OAAAG,WAAA;AACWC,aAAA;GACR,MAAAE,oBAAyBC,UAAA;AACvBL,gBAAYK,MAAM;;GAEpB,MAAAC,kBAAuBC,YAAA;AACrBN,cAAUI,QAAM;;AAElBG,YAAQC,iBAAkB,aAAaL,iBAAiB;AACxDI,YAAQC,iBAAkB,WAAWH,eAAe;AAAA,gBAC7C;AACLE,aAAQE,oBAAqB,aAAaN,iBAAiB;AAC3DI,aAAQE,oBAAqB,WAAWJ,eAAe;;;AAExDH,OAAA,CAACH,aAAaC,UAAU;AAAAH,IAAA,KAAAE;AAAAF,IAAA,KAAAG;AAAAH,IAAA,KAAAI;AAAAJ,IAAA,KAAAK;QAAA;AAAAD,OAAAJ,EAAA;AAAAK,OAAAL,EAAA;;AAb3BH,WAAUO,IAaPC,GAAyB;CAAA,IAAAQ;AAAA,KAAAb,EAAA,OAAAc,OAAAC,IAAA,4BAAA,EAAA;AAE1BF,OAAA,oBAAA,OAAA,EACS,OAAA;GAAAG,UACK;GAAOC,MACX;GAACC,KACF;GAACC,QACE;GAAIC,OACL;GAAOC,QACN;GACV,EACK,CAAA;AAAArB,IAAA,KAAAa;OAAAA,MAAAb,EAAA;AAAA,QATPa"}

package/dist/DataPreviewTable/components/DragBar/index.d.ts

@@ -4,6 +4,6 @@ declare function DragBar(props: {
     columnId: string;
     onChange: (columnId: string, width: number) => void;
     headerHeight: number;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof DragBar>;
 export default _default;

package/dist/DataPreviewTable/components/DragBar/index.js

@@ -1,57 +1,107 @@
 import { cn } from "../../../lib/utils.js";
 import Mask from "./Mask.js";
-import { memo, useCallback, useRef, useState } from "react";
+import { c } from "react-compiler-runtime";
+import { memo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { createPortal, flushSync } from "react-dom";
 //#region src/DataPreviewTable/components/DragBar/index.tsx
 function DragBar(props) {
+	const $ = c(19);
 	const { wrapWidth, columnId, onChange, headerHeight } = props;
 	const [show, setShow] = useState(false);
 	const [dragBarLeft, setDragBarLeft] = useState(0);
 	const dragElRef = useRef(null);
-	const mouseDownRef = useRef({
-		down: false,
-		clientX: 0
-	});
-	const getBarLeft = useCallback((currentClientX) => {
-		const offset = mouseDownRef.current.clientX - currentClientX;
-		if (offset >= wrapWidth - 50) return wrapWidth - 50;
-		else return offset;
-	}, [wrapWidth]);
-	return /* @__PURE__ */ jsx("div", {
-		ref: dragElRef,
-		onMouseDown: (event) => {
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			down: false,
+			clientX: 0
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const mouseDownRef = useRef(t0);
+	let t1;
+	if ($[1] !== wrapWidth) {
+		t1 = (currentClientX) => {
+			const offset = mouseDownRef.current.clientX - currentClientX;
+			if (offset >= wrapWidth - 50) return wrapWidth - 50;
+			else return offset;
+		};
+		$[1] = wrapWidth;
+		$[2] = t1;
+	} else t1 = $[2];
+	const getBarLeft = t1;
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (event) => {
 			mouseDownRef.current = {
 				clientX: event.clientX,
 				down: true
 			};
 			setShow(true);
-		},
-		onClick: (e) => {
-			e.stopPropagation();
-		},
-		style: {
+		};
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== dragBarLeft || $[5] !== headerHeight) {
+		t3 = {
 			right: dragBarLeft,
 			height: headerHeight
-		},
-		className: cn("ald-data-preview-header-drag-bar tw-absolute tw-right-0 tw-top-0 tw-z-[2] tw-w-[3px] hover:tw-cursor-col-resize hover:tw-bg-[var(--border-brand-strong)]", { "ald-data-preview-header-drag-bar-active tw-bg-[var(--border-brand-strong)]": show }),
-		children: show ? createPortal(/* @__PURE__ */ jsx(Mask, {
-			onMouseMove: (event) => {
+		};
+		$[4] = dragBarLeft;
+		$[5] = headerHeight;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== show) {
+		t4 = cn("ald-data-preview-header-drag-bar tw-absolute tw-right-0 tw-top-0 tw-z-[2] tw-w-[3px] hover:tw-cursor-col-resize hover:tw-bg-[var(--border-brand-strong)]", { "ald-data-preview-header-drag-bar-active tw-bg-[var(--border-brand-strong)]": show });
+		$[7] = show;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== columnId || $[10] !== getBarLeft || $[11] !== onChange || $[12] !== show || $[13] !== wrapWidth) {
+		t5 = show ? createPortal(/* @__PURE__ */ jsx(Mask, {
+			onMouseMove: (event_0) => {
 				if (mouseDownRef.current.down === false) return;
-				const currentClientX = event.clientX;
+				const currentClientX_0 = event_0.clientX;
 				flushSync(() => {
-					setDragBarLeft(getBarLeft(currentClientX));
+					setDragBarLeft(getBarLeft(currentClientX_0));
 				});
 			},
-			onMouseUp: (event) => {
+			onMouseUp: (event_1) => {
 				mouseDownRef.current.down = false;
 				setShow(false);
-				const currentClientX = event.clientX;
-				onChange(columnId, wrapWidth - getBarLeft(currentClientX));
+				const currentClientX_1 = event_1.clientX;
+				onChange(columnId, wrapWidth - getBarLeft(currentClientX_1));
 				setDragBarLeft(0);
 			}
-		}), document.body) : null
-	});
+		}), document.body) : null;
+		$[9] = columnId;
+		$[10] = getBarLeft;
+		$[11] = onChange;
+		$[12] = show;
+		$[13] = wrapWidth;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== t3 || $[16] !== t4 || $[17] !== t5) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			ref: dragElRef,
+			onMouseDown: t2,
+			onClick: _temp,
+			style: t3,
+			className: t4,
+			children: t5
+		});
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	return t6;
+}
+function _temp(e) {
+	e.stopPropagation();
 }
 var DragBar_default = memo(DragBar);
 //#endregion

package/dist/DataPreviewTable/components/DragBar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/DataPreviewTable/components/DragBar/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport React, { memo, useCallback, useRef, useState } from 'react';\nimport { createPortal, flushSync } from 'react-dom';\nimport { COLUMN_MIN_WIDTH } from '../../constant';\nimport Mask from './Mask';\nfunction DragBar(props: {\n  wrapWidth: number;\n  columnId: string;\n  onChange: (columnId: string, width: number) => void;\n  headerHeight: number;\n}) {\n  const { wrapWidth, columnId, onChange, headerHeight } = props;\n  const [show, setShow] = useState(false);\n  const [dragBarLeft, setDragBarLeft] = useState(0);\n  const dragElRef = useRef<HTMLDivElement>(null);\n  const mouseDownRef = useRef({\n    down: false,\n    clientX: 0,\n  });\n  const getBarLeft = useCallback(\n    (currentClientX: number) => {\n      const startClientX = mouseDownRef.current.clientX;\n      const offset = startClientX - currentClientX;\n      if (offset >= wrapWidth - COLUMN_MIN_WIDTH) {\n        return wrapWidth - COLUMN_MIN_WIDTH;\n      } else {\n        return offset;\n      }\n    },\n    [wrapWidth],\n  );\n\n  return (\n    <div\n      ref={dragElRef}\n      onMouseDown={(event) => {\n        mouseDownRef.current = {\n          clientX: event.clientX,\n          down: true,\n        };\n        setShow(true);\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n      }}\n      style={{ right: dragBarLeft, height: headerHeight }}\n      className={cn(\n        'ald-data-preview-header-drag-bar tw-absolute tw-right-0 tw-top-0 tw-z-[2] tw-w-[3px] hover:tw-cursor-col-resize hover:tw-bg-[var(--border-brand-strong)]',\n        {\n          'ald-data-preview-header-drag-bar-active tw-bg-[var(--border-brand-strong)]':\n            show,\n        },\n      )}\n    >\n      {show\n        ? createPortal(\n            <Mask\n              onMouseMove={(event) => {\n                const mouseDownState = mouseDownRef.current;\n                if (mouseDownState.down === false) return;\n                const currentClientX = event.clientX;\n                flushSync(() => {\n                  setDragBarLeft(getBarLeft(currentClientX));\n                });\n              }}\n              onMouseUp={(event) => {\n                mouseDownRef.current.down = false;\n                setShow(false);\n                const currentClientX = event.clientX;\n                onChange(columnId, wrapWidth - getBarLeft(currentClientX));\n                setDragBarLeft(0);\n              }}\n            ></Mask>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n}\nexport default memo(DragBar);\n"],"mappings":";;;;;;AAKA,SAAS,QAAQ,OAKd;CACD,MAAM,EAAE,WAAW,UAAU,UAAU,iBAAiB;CACxD,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;CACjD,MAAM,YAAY,OAAuB,KAAK;CAC9C,MAAM,eAAe,OAAO;EAC1B,MAAM;EACN,SAAS;EACV,CAAC;CACF,MAAM,aAAa,aAChB,mBAA2B;EAE1B,MAAM,SADe,aAAa,QAAQ,UACZ;AAC9B,MAAI,UAAU,YAAA,GACZ,QAAO,YAAA;MAEP,QAAO;IAGX,CAAC,UAAU,CACZ;AAED,QACE,oBAAC,OAAD;EACE,KAAK;EACL,cAAc,UAAU;AACtB,gBAAa,UAAU;IACrB,SAAS,MAAM;IACf,MAAM;IACP;AACD,WAAQ,KAAK;;EAEf,UAAU,MAAM;AACd,KAAE,iBAAiB;;EAErB,OAAO;GAAE,OAAO;GAAa,QAAQ;GAAc;EACnD,WAAW,GACT,4JACA,EACE,8EACE,MACH,CACF;YAEA,OACG,aACE,oBAAC,MAAD;GACE,cAAc,UAAU;AAEtB,QADuB,aAAa,QACjB,SAAS,MAAO;IACnC,MAAM,iBAAiB,MAAM;AAC7B,oBAAgB;AACd,oBAAe,WAAW,eAAe,CAAC;MAC1C;;GAEJ,YAAY,UAAU;AACpB,iBAAa,QAAQ,OAAO;AAC5B,YAAQ,MAAM;IACd,MAAM,iBAAiB,MAAM;AAC7B,aAAS,UAAU,YAAY,WAAW,eAAe,CAAC;AAC1D,mBAAe,EAAE;;GAEb,CAAA,EACR,SAAS,KACV,GACD;EACA,CAAA;;AAGV,IAAA,kBAAe,KAAK,QAAQ"}
+{"version":3,"file":"index.js","names":["cn","React","memo","useCallback","useRef","useState","createPortal","flushSync","COLUMN_MIN_WIDTH","Mask","DragBar","props","$","_c","wrapWidth","columnId","onChange","headerHeight","show","setShow","dragBarLeft","setDragBarLeft","dragElRef","t0","Symbol","for","down","clientX","mouseDownRef","t1","currentClientX","startClientX","current","offset","getBarLeft","t2","event","t3","right","height","t4","t5","event_0","mouseDownState","currentClientX_0","event_1","currentClientX_1","document","body","t6","_temp","e","stopPropagation"],"sources":["../../../../src/DataPreviewTable/components/DragBar/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport React, { memo, useCallback, useRef, useState } from 'react';\nimport { createPortal, flushSync } from 'react-dom';\nimport { COLUMN_MIN_WIDTH } from '../../constant';\nimport Mask from './Mask';\nfunction DragBar(props: {\n  wrapWidth: number;\n  columnId: string;\n  onChange: (columnId: string, width: number) => void;\n  headerHeight: number;\n}) {\n  const { wrapWidth, columnId, onChange, headerHeight } = props;\n  const [show, setShow] = useState(false);\n  const [dragBarLeft, setDragBarLeft] = useState(0);\n  const dragElRef = useRef<HTMLDivElement>(null);\n  const mouseDownRef = useRef({\n    down: false,\n    clientX: 0,\n  });\n  const getBarLeft = useCallback(\n    (currentClientX: number) => {\n      const startClientX = mouseDownRef.current.clientX;\n      const offset = startClientX - currentClientX;\n      if (offset >= wrapWidth - COLUMN_MIN_WIDTH) {\n        return wrapWidth - COLUMN_MIN_WIDTH;\n      } else {\n        return offset;\n      }\n    },\n    [wrapWidth],\n  );\n\n  return (\n    <div\n      ref={dragElRef}\n      onMouseDown={(event) => {\n        mouseDownRef.current = {\n          clientX: event.clientX,\n          down: true,\n        };\n        setShow(true);\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n      }}\n      style={{ right: dragBarLeft, height: headerHeight }}\n      className={cn(\n        'ald-data-preview-header-drag-bar tw-absolute tw-right-0 tw-top-0 tw-z-[2] tw-w-[3px] hover:tw-cursor-col-resize hover:tw-bg-[var(--border-brand-strong)]',\n        {\n          'ald-data-preview-header-drag-bar-active tw-bg-[var(--border-brand-strong)]':\n            show,\n        },\n      )}\n    >\n      {show\n        ? createPortal(\n            <Mask\n              onMouseMove={(event) => {\n                const mouseDownState = mouseDownRef.current;\n                if (mouseDownState.down === false) return;\n                const currentClientX = event.clientX;\n                flushSync(() => {\n                  setDragBarLeft(getBarLeft(currentClientX));\n                });\n              }}\n              onMouseUp={(event) => {\n                mouseDownRef.current.down = false;\n                setShow(false);\n                const currentClientX = event.clientX;\n                onChange(columnId, wrapWidth - getBarLeft(currentClientX));\n                setDragBarLeft(0);\n              }}\n            ></Mask>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n}\nexport default memo(DragBar);\n"],"mappings":";;;;;;;AAKA,SAAAU,QAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAME,MAAA,EAAAC,WAAAC,UAAAC,UAAAC,iBAAwDN;CACxD,MAAA,CAAAO,MAAAC,WAAwBd,SAAS,MAAM;CACvC,MAAA,CAAAe,aAAAC,kBAAsChB,SAAS,EAAE;CACjD,MAAAiB,YAAkBlB,OAAuB,KAAK;CAAC,IAAAmB;AAAA,KAAAX,EAAA,OAAAY,OAAAC,IAAA,4BAAA,EAAA;AACnBF,OAAA;GAAAG,MACpB;GAAKC,SACF;GACV;AAAAf,IAAA,KAAAW;OAAAA,MAAAX,EAAA;CAHD,MAAAgB,eAAqBxB,OAAOmB,GAG1B;CAAC,IAAAM;AAAA,KAAAjB,EAAA,OAAAE,WAAA;AAEDe,QAAAC,mBAAA;GAEE,MAAAG,SADqBL,aAAYI,QAAQL,UACXG;AAC9B,OAAIG,UAAUnB,YAAAA,GAA4B,QACjCA,YAAAA;OAA4B,QAE5BmB;;AAEVrB,IAAA,KAAAE;AAAAF,IAAA,KAAAiB;OAAAA,MAAAjB,EAAA;CATH,MAAAsB,aAAmBL;CAWjB,IAAAM;AAAA,KAAAvB,EAAA,OAAAY,OAAAC,IAAA,4BAAA,EAAA;AAKeU,QAAAC,UAAA;AACXR,gBAAYI,UAAW;IAAAL,SACZS,MAAKT;IAAQD,MAChB;IAFY;AAIpBP,WAAQ,KAAK;;AACdP,IAAA,KAAAuB;OAAAA,MAAAvB,EAAA;CAAA,IAAAyB;AAAA,KAAAzB,EAAA,OAAAQ,eAAAR,EAAA,OAAAK,cAAA;AAIMoB,OAAA;GAAAC,OAASlB;GAAWmB,QAAUtB;GAAc;AAAAL,IAAA,KAAAQ;AAAAR,IAAA,KAAAK;AAAAL,IAAA,KAAAyB;OAAAA,MAAAzB,EAAA;CAAA,IAAA4B;AAAA,KAAA5B,EAAA,OAAAM,MAAA;AACxCsB,OAAAxC,GACT,4JACA,EAAA,8EAEIkB,MAEN,CAAC;AAAAN,IAAA,KAAAM;AAAAN,IAAA,KAAA4B;OAAAA,MAAA5B,EAAA;CAAA,IAAA6B;AAAA,KAAA7B,EAAA,OAAAG,YAAAH,EAAA,QAAAsB,cAAAtB,EAAA,QAAAI,YAAAJ,EAAA,QAAAM,QAAAN,EAAA,QAAAE,WAAA;AAEA2B,OAAAvB,OACGZ,aACE,oBAAC,MAAD;GACe,cAAAoC,YAAA;AAEX,QADuBd,aAAYI,QACjBN,SAAU,MAAK;IACjC,MAAAkB,mBAAuBR,QAAKT;AAC5BpB,oBAAU;AACRc,oBAAea,WAAWJ,iBAAe,CAAC;MAC1C;;GAEO,YAAAe,YAAA;AACTjB,iBAAYI,QAAQN,OAAQ;AAC5BP,YAAQ,MAAM;IACd,MAAA2B,mBAAuBV,QAAKT;AAC5BX,aAASD,UAAUD,YAAYoB,WAAWJ,iBAAe,CAAC;AAC1DT,mBAAe,EAAE;;GAEb,CAAA,EACR0B,SAAQC,KAEN,GArBP;AAqBOpC,IAAA,KAAAG;AAAAH,IAAA,MAAAsB;AAAAtB,IAAA,MAAAI;AAAAJ,IAAA,MAAAM;AAAAN,IAAA,MAAAE;AAAAF,IAAA,MAAA6B;OAAAA,MAAA7B,EAAA;CAAA,IAAAqC;AAAA,KAAArC,EAAA,QAAAyB,MAAAzB,EAAA,QAAA4B,MAAA5B,EAAA,QAAA6B,IAAA;AA1CVQ,OAAA,oBAAA,OAAA;GACO3B,KAAAA;GACQ,aAAAa;GAOJ,SAAAe;GAGF,OAAAb;GACI,WAAAG;aAQVC;GAsBG,CAAA;AAAA7B,IAAA,MAAAyB;AAAAzB,IAAA,MAAA4B;AAAA5B,IAAA,MAAA6B;AAAA7B,IAAA,MAAAqC;OAAAA,MAAArC,EAAA;AAAA,QA3CNqC;;AA5BJ,SAAAC,MAAAC,GAAA;AAsCQA,GAACC,iBAAkB;;AAoC3B,IAAA,kBAAelD,KAAKQ,QAAQ"}