ods-ant 0.2.0 → 0.4.1

package/dist-lib/display/Table.js

@@ -0,0 +1,1036 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { t } from "../useCustomIcon-B-VUK-84.js";
+import { Tooltip as n, ensureTooltipStyles as r } from "./Tooltip.js";
+import { Pagination as i } from "../navigation/Pagination.js";
+import { Input as a, Table as o } from "antd";
+import s, { useEffect as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/ds/display/Table.tsx
+var d = "ds-table-styles", f = (e) => typeof e == "string" || typeof e == "number", p = ({ value: e, withTooltip: t, tooltipDelay: r, tooltipSize: i, tooltipTitle: a }) => {
+	let o = s.useRef(null), [c, u] = s.useState(!1), d = String(e), f = s.useCallback(() => {
+		let e = o.current;
+		if (!e) return;
+		let t = e.scrollWidth > e.clientWidth;
+		u((e) => e === t ? e : t);
+	}, []);
+	s.useEffect(() => {
+		let e = o.current;
+		if (!e) return;
+		f();
+		let t = requestAnimationFrame(() => {
+			f(), requestAnimationFrame(f);
+		}), n = window.setTimeout(f, 120), r = typeof ResizeObserver < "u" ? new ResizeObserver(f) : null;
+		return r ? r.observe(e) : typeof window < "u" && window.addEventListener("resize", f), () => {
+			r ? r.disconnect() : typeof window < "u" && window.removeEventListener("resize", f), cancelAnimationFrame(t), window.clearTimeout(n);
+		};
+	}, [d, f]);
+	let p = /* @__PURE__ */ l("span", {
+		ref: o,
+		className: "ds-table-cell-truncate",
+		onMouseOverCapture: f,
+		onFocus: f,
+		children: d
+	});
+	return t ? /* @__PURE__ */ l(n, {
+		title: c ? void 0 : null,
+		dsSize: i,
+		dsTitle: a,
+		dsBody: d,
+		mouseEnterDelay: r,
+		trigger: "hover",
+		children: p
+	}) : p;
+};
+function m(...e) {
+	return e.filter(Boolean).join(" ");
+}
+function h(t) {
+	if (t === !1) return !1;
+	let { tooltip: n } = e, r = t && typeof t == "object" ? t : void 0;
+	return {
+		...r,
+		color: r?.color ?? n.surface.background,
+		arrow: r?.arrow ?? !0,
+		classNames: {
+			...r?.classNames,
+			root: m("ds-tooltip-overlay", "ds-tooltip-size-normal", r?.classNames?.root, r?.overlayClassName)
+		},
+		styles: {
+			...r?.styles,
+			container: {
+				borderRadius: n.radius,
+				color: n.surface.body,
+				letterSpacing: 0,
+				minWidth: n.width.normal.min,
+				maxWidth: n.width.normal.max,
+				padding: n.padding.normal,
+				...r?.styles?.container
+			}
+		}
+	};
+}
+function g(e, n) {
+	return e && e.map((e) => {
+		let r = { ...e };
+		return Array.isArray(r.children) && r.children.length > 0 && (r.children = g(r.children, n)), r.sorter && (r.showSorterTooltip = h(r.showSorterTooltip === void 0 ? n : r.showSorterTooltip)), r.sorter && !r.sortIcon && (r.sortIcon = ({ sortOrder: e }) => /* @__PURE__ */ l("span", {
+			className: "ds-table-sort-icon",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ l(t, {
+				name: e === "ascend" ? "arrowThickUp" : "arrowThickDown",
+				size: 10,
+				style: { color: "inherit" }
+			})
+		})), r;
+	});
+}
+function ee(e, t, n) {
+	if (!e || t === "none" || e.length === 0) return e;
+	let r = t === "first" || t === "both", i = t === "last" || t === "both", a = e.length - 1;
+	return e.map((e, t) => {
+		let o = { ...e }, s = r && t === 0, c = i && t === a;
+		return s && (o.fixed = "left", o.width ??= n), c && (o.fixed = "right", o.width ??= n), o;
+	});
+}
+function te(e, t, n, r, i) {
+	return e && e.map((e) => {
+		let a = { ...e };
+		if (Array.isArray(a.children) && a.children.length > 0) return a.children = te(a.children, t, n, r, i), a;
+		let o = a.render;
+		return a.ellipsis == null || a.ellipsis === !0 ? a.ellipsis = { showTitle: !1 } : typeof a.ellipsis == "object" && (a.ellipsis = {
+			...a.ellipsis,
+			showTitle: !1
+		}), a.render = (e, a, s) => {
+			let c = o ? o(e, a, s) : e;
+			return f(c) ? /* @__PURE__ */ l(p, {
+				value: c,
+				withTooltip: t,
+				tooltipDelay: n,
+				tooltipSize: r,
+				tooltipTitle: i
+			}) : !o && f(e) ? /* @__PURE__ */ l(p, {
+				value: e,
+				withTooltip: t,
+				tooltipDelay: n,
+				tooltipSize: r,
+				tooltipTitle: i
+			}) : c;
+		}, a;
+	});
+}
+function _(e) {
+	if (typeof e?.key == "string") return e.key;
+	if (typeof e?.dataIndex == "string") return e.dataIndex;
+	if (typeof e?.dataIndex == "number") return String(e.dataIndex);
+}
+function v(e) {
+	if (typeof e == "number" && Number.isFinite(e)) return e;
+	if (typeof e == "string" && e.endsWith("px")) {
+		let t = Number(e.slice(0, -2));
+		return Number.isFinite(t) ? t : void 0;
+	}
+}
+function y(e, t, n) {
+	let r = Math.max(t, Math.round(e));
+	return typeof n == "number" ? Math.min(n, r) : r;
+}
+function ne(e, t, n = {}) {
+	if (!e) return n;
+	let r = { ...n }, i = (e) => {
+		e.forEach((e) => {
+			if (Array.isArray(e.children) && e.children.length > 0) {
+				i(e.children);
+				return;
+			}
+			let t = _(e);
+			if (!t || r[t] != null) return;
+			let n = v(e.width);
+			n != null && (r[t] = n);
+		});
+	};
+	return i(e), r;
+}
+function b(e) {
+	let t = e == null ? "" : String(e);
+	return t ? t.length * 8 : 0;
+}
+function x(e) {
+	return typeof e == "string" || typeof e == "number" ? String(e) : "";
+}
+function re(e, t, n) {
+	if (!e) return e;
+	let r = t.slice(0, Math.max(0, n.sampleSize)), i = (e) => {
+		let t = { ...e };
+		if (Array.isArray(t.children) && t.children.length > 0) return t.children = t.children.map(i), t;
+		if (t.width != null) return t;
+		let a = _(t);
+		if (n.enabledColumnKeys && (!a || !n.enabledColumnKeys.has(a))) return t;
+		let o = b(x(t.title)), s = r.reduce((e, n, r) => {
+			let i = S(n, t.dataIndex), a = typeof t.render == "function" ? t.render(i, n, r) : i, o = f(a) ? b(a) : b(i);
+			return Math.max(e, o);
+		}, 0);
+		return t.width = y(Math.max(o, s) + n.cellPadding, n.minWidth, n.maxWidth), t;
+	};
+	return e.map(i);
+}
+function ie(e) {
+	if (!(e === !0 || e === !1 || e == null)) {
+		if (Array.isArray(e)) return new Set(e.map(String));
+		if (typeof e == "string") return new Set(e.split(",").map((e) => e.trim()).filter(Boolean));
+		if (typeof e == "object") return new Set(Object.entries(e).filter(([, e]) => !!e).map(([e]) => e));
+	}
+}
+function S(e, t) {
+	if (Array.isArray(t)) return t.reduce((e, t) => {
+		if (e && typeof e == "object") return e[String(t)];
+	}, e);
+	if (typeof t == "string" || typeof t == "number") return e[String(t)];
+}
+function ae(e, t, n) {
+	if (Array.isArray(t) && t.length > 0) {
+		let r = { ...e }, i = r;
+		for (let e = 0; e < t.length - 1; e += 1) {
+			let n = String(t[e]), r = i[n], a = r && typeof r == "object" ? { ...r } : {};
+			i[n] = a, i = a;
+		}
+		return i[String(t[t.length - 1])] = n, r;
+	}
+	return typeof t == "string" || typeof t == "number" ? {
+		...e,
+		[String(t)]: n
+	} : e;
+}
+function oe(e, t, n) {
+	return e && e.map((e) => {
+		let r = { ...e };
+		if (Array.isArray(r.children) && r.children.length > 0) return r.children = oe(r.children, t, n), r;
+		let i = _(r);
+		return !(i && t.has(i)) || r.dataIndex == null || (r.render = (e, t, i) => {
+			let o = S(t, r.dataIndex), s = typeof o == "number";
+			return /* @__PURE__ */ l(a, {
+				className: "ds-table-edit-input",
+				type: s ? "number" : "text",
+				size: "small",
+				value: o == null ? "" : String(o),
+				onChange: (e) => {
+					let t = e.target.value, a = s ? t === "" ? null : Number(t) : t;
+					n(i, r.dataIndex, a);
+				}
+			});
+		}), r;
+	});
+}
+function se(e, t) {
+	return e && e.map((e) => {
+		let n = { ...e };
+		if (Array.isArray(n.children) && n.children.length > 0) return n.children = se(n.children, t), n;
+		let r = _(n);
+		return !r || t.has(r) ? n : null;
+	}).filter((e) => e !== null);
+}
+var ce = ({ columns: e, visibleColumns: t, onToggle: n }) => {
+	let r = s.useMemo(() => {
+		let t = [], n = (e) => {
+			e.forEach((e) => {
+				if (Array.isArray(e.children) && e.children.length > 0) n(e.children);
+				else {
+					let n = _(e), r = e.title || (typeof e.dataIndex == "string" ? e.dataIndex : "Column");
+					n && t.push({
+						key: n,
+						label: String(r)
+					});
+				}
+			});
+		};
+		return n(e), t;
+	}, [e]);
+	return /* @__PURE__ */ u("div", {
+		className: "ds-table-column-visibility-control",
+		children: [/* @__PURE__ */ l("label", {
+			className: "ds-table-control-label",
+			children: "Columns:"
+		}), /* @__PURE__ */ l("div", {
+			className: "ds-table-control-checkboxes",
+			children: r.map(({ key: e, label: r }) => /* @__PURE__ */ u("label", {
+				className: "ds-table-control-checkbox",
+				children: [/* @__PURE__ */ l("input", {
+					type: "checkbox",
+					checked: t.has(e),
+					onChange: (t) => n(e, t.target.checked)
+				}), /* @__PURE__ */ l("span", { children: r })]
+			}, e))
+		})]
+	});
+}, le = ({ width: e, minWidth: t = 96, maxWidth: n, onResize: r, children: i, className: a, style: o, ...c }) => {
+	let d = s.useRef(0), f = s.useRef(0), p = s.useCallback((e) => {
+		r && r(y(e, t, n));
+	}, [
+		n,
+		t,
+		r
+	]), h = s.useCallback((n) => {
+		if (!r || typeof document > "u") return;
+		n.preventDefault(), n.stopPropagation(), f.current = n.clientX, d.current = e ?? n.currentTarget.parentElement?.getBoundingClientRect().width ?? t;
+		let i = (e) => {
+			let t = e.clientX - f.current;
+			p(d.current + t);
+		}, a = () => {
+			document.removeEventListener("mousemove", i), document.removeEventListener("mouseup", a), document.body.style.cursor = "", document.body.style.userSelect = "";
+		};
+		document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.addEventListener("mousemove", i), document.addEventListener("mouseup", a);
+	}, [
+		t,
+		r,
+		p,
+		e
+	]), g = s.useCallback((t) => {
+		!r || e == null || t.key !== "ArrowLeft" && t.key !== "ArrowRight" || (t.preventDefault(), t.stopPropagation(), p(e + (t.key === "ArrowLeft" ? -1 : 1) * (t.shiftKey ? 24 : 8)));
+	}, [
+		r,
+		p,
+		e
+	]);
+	return /* @__PURE__ */ u("th", {
+		...c,
+		className: m(a, r ? "ds-table-resizable-header-cell" : void 0),
+		style: {
+			...o,
+			width: e
+		},
+		children: [i, r ? /* @__PURE__ */ l("button", {
+			type: "button",
+			className: "ds-table-resize-handle",
+			"aria-label": "Resize column",
+			onClick: (e) => e.stopPropagation(),
+			onMouseDown: h,
+			onKeyDown: g
+		}) : null]
+	});
+};
+function ue(e, t, n, r, i, a) {
+	return e && e.map((e) => {
+		let o = { ...e };
+		if (Array.isArray(o.children) && o.children.length > 0) return o.children = ue(o.children, t, n, r, i, a), o;
+		let s = _(o);
+		if (!s) return o;
+		let c = t[s] ?? v(o.width) ?? a, l = o.onHeaderCell;
+		return o.width = c, o.onHeaderCell = (e) => {
+			let t = l?.(e) ?? {};
+			return {
+				...t,
+				width: c,
+				minWidth: r,
+				maxWidth: i,
+				onResize: (e) => n(s, e),
+				className: m(t.className, "ds-table-resizable-header")
+			};
+		}, o;
+	});
+}
+function de(e, t) {
+	if (!e || e.length === 0) return t;
+	let n = (e) => e.flatMap((e) => Array.isArray(e?.children) && e.children.length > 0 ? n(e.children) : [v(e?.width) ?? t]), r = n(e);
+	return r.length === 0 ? t : r.reduce((e, t) => e + t, 0);
+}
+function fe() {
+	if (typeof document > "u") return;
+	let { table: t, checkbox: n } = e, r = document.getElementById(d);
+	r || (r = document.createElement("style"), r.id = d, document.head.appendChild(r)), r.textContent = `
+    .ds-table {
+      font-family: "Nunito", sans-serif;
+      color: ${t.text.body};
+    }
+
+    .ds-table .ant-table {
+      font-family: "Nunito", sans-serif;
+      color: ${t.text.body};
+      background: ${t.surface.container};
+    }
+
+    .ds-table .ant-table-thead > tr > th {
+      color: ${t.text.header} !important;
+      font-weight: ${t.typography.header.fontWeight} !important;
+      font-size: ${t.typography.header.fontSize} !important;
+      line-height: ${t.typography.header.lineHeight} !important;
+      letter-spacing: ${t.typography.header.letterSpacing} !important;
+      background: ${t.surface.container} !important;
+      border-bottom: ${t.border.headerDividerWidth} solid ${t.border.container} !important;
+      padding: ${t.padding.normal.header} !important;
+      height: ${t.rowHeight.normal.header} !important;
+      vertical-align: middle !important;
+      box-sizing: border-box !important;
+    }
+
+    .ds-table .ant-table-thead > tr > th::before {
+      display: none !important;
+    }
+
+    .ds-table .ant-table-tbody > tr:not(.ant-table-measure-row) > td {
+      color: ${t.text.body} !important;
+      font-weight: ${t.typography.body.fontWeight} !important;
+      font-size: ${t.typography.body.fontSize} !important;
+      line-height: ${t.typography.body.lineHeight} !important;
+      letter-spacing: ${t.typography.body.letterSpacing} !important;
+      border-bottom: 1px solid ${t.border.bodyDivider} !important;
+      background: transparent !important;
+      padding: ${t.padding.normal.body} !important;
+      height: ${t.rowHeight.normal.body} !important;
+      vertical-align: middle !important;
+      transition: none !important;
+      box-sizing: border-box !important;
+    }
+
+    .ds-table .ant-table-tbody > tr:hover > td {
+      background: ${t.surface.rowHover} !important;
+    }
+
+    .ds-table .ant-table-tbody > tr.ant-table-row-selected > td,
+    .ds-table .ant-table-tbody > tr.ant-table-row-selected:hover > td {
+      background: ${t.surface.rowSelected} !important;
+    }
+
+    .ds-table .ant-table-selection-column .ant-checkbox.ant-checkbox-indeterminate {
+      border-color: ${n.border.checked} !important;
+      background-color: ${n.background.checked} !important;
+    }
+
+    .ds-table .ant-table-selection-column .ant-checkbox.ant-checkbox-indeterminate::after {
+      content: '' !important;
+      position: absolute !important;
+      left: 50% !important;
+      top: 50% !important;
+      margin: 0 !important;
+      border: 0 !important;
+      border-radius: 1px !important;
+      background: ${n.mark.indeterminate} !important;
+      width: ${n.indeterminate.sm.width}px !important;
+      height: ${n.indeterminate.sm.height}px !important;
+      transform: translate(-50%, -50%) !important;
+      opacity: 1 !important;
+    }
+
+    .ds-table .ant-table-thead > tr > th.ant-table-column-sort,
+    .ds-table .ant-table-thead > tr > th.ant-table-column-sort:hover {
+      color: ${t.text.header} !important;
+    }
+
+    .ds-table .ant-table-thead > tr > th.ant-table-column-has-sorters,
+    .ds-table .ant-table-thead > tr > th.ant-table-column-has-sorters:hover {
+      color: ${t.text.header} !important;
+    }
+
+    .ds-table .ant-table-thead > tr > th.ant-table-column-has-sorters .ant-table-column-sorters {
+      justify-content: flex-start !important;
+      gap: 6px !important;
+    }
+
+    .ds-table .ant-table-thead > tr > th.ant-table-column-has-sorters .ant-table-column-title {
+      flex: none !important;
+      font-weight: 600 !important;
+    }
+
+    .ds-table .ant-table-thead > tr > th.ant-table-column-has-sorters .ant-table-column-sorter {
+      opacity: 0 !important;
+      transition: none !important;
+      margin-inline-start: 0 !important;
+    }
+
+    .ds-table .ant-table-thead > tr > th.ant-table-column-has-sorters .ds-table-sort-icon {
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      width: 10px !important;
+      height: 10px !important;
+      opacity: 0 !important;
+      transition: none !important;
+      color: inherit !important;
+    }
+
+    .ds-table .ant-table-thead > tr > th.ant-table-column-has-sorters:hover .ant-table-column-sorter,
+    .ds-table .ant-table-thead > tr > th.ant-table-column-sort .ant-table-column-sorter {
+      opacity: 1 !important;
+    }
+
+    .ds-table .ant-table-thead > tr > th.ant-table-column-has-sorters:hover .ds-table-sort-icon,
+    .ds-table .ant-table-thead > tr > th.ant-table-column-sort .ds-table-sort-icon {
+      opacity: 1 !important;
+    }
+
+    .ds-table .ant-table-column-sorter,
+    .ds-table .ant-table-column-sorter-up,
+    .ds-table .ant-table-column-sorter-down {
+      color: ${t.text.sorterMuted} !important;
+    }
+
+    .ds-table .ant-table-column-sorter-up.active,
+    .ds-table .ant-table-column-sorter-down.active {
+      color: ${t.text.header} !important;
+    }
+
+    .ds-table .ant-table-pagination.ant-pagination {
+      margin-top: 16px !important;
+      margin-bottom: 0 !important;
+    }
+
+    .ds-table .ant-table-row-expand-icon-cell {
+      vertical-align: middle !important;
+    }
+
+    .ds-table .ant-table-row-expand-icon-cell .ds-table-expand-toggle {
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      margin: 0 auto !important;
+      line-height: 0 !important;
+    }
+
+    .ds-table .ant-table-row-expand-icon-cell .ds-table-expand-toggle svg {
+      display: block !important;
+      width: 16px !important;
+      height: 16px !important;
+    }
+
+    .ds-table .ds-table-cell-truncate {
+      display: block !important;
+      width: 100% !important;
+      overflow: hidden !important;
+      white-space: nowrap !important;
+      text-overflow: ellipsis !important;
+    }
+
+    .ds-table.ds-table-size-small .ant-table-thead > tr > th,
+    .ds-table.ds-table-size-small .ant-table-tbody > tr:not(.ant-table-measure-row) > td {
+      vertical-align: middle !important;
+    }
+
+    .ds-table.ds-table-size-small .ant-table-thead > tr > th {
+      font-size: ${t.typography.compactHeader.fontSize} !important;
+      line-height: ${t.typography.compactHeader.lineHeight} !important;
+      font-weight: ${t.typography.compactHeader.fontWeight} !important;
+      letter-spacing: ${t.typography.compactHeader.letterSpacing} !important;
+      height: ${t.rowHeight.compact.header} !important;
+      padding: ${t.padding.compact.header} !important;
+      border-bottom: ${t.border.headerDividerWidth} solid ${t.border.container} !important;
+    }
+
+    .ds-table.ds-table-size-small .ant-table-tbody > tr:not(.ant-table-measure-row) > td {
+      font-size: ${t.typography.compactBody.fontSize} !important;
+      line-height: ${t.typography.compactBody.lineHeight} !important;
+      font-weight: ${t.typography.compactBody.fontWeight} !important;
+      letter-spacing: ${t.typography.compactBody.letterSpacing} !important;
+      height: ${t.rowHeight.compact.body} !important;
+      min-height: ${t.rowHeight.compact.body} !important;
+      max-height: ${t.rowHeight.compact.body} !important;
+      padding: ${t.padding.compact.body} !important;
+    }
+
+    .ds-table.ds-table-size-small .ant-table-tbody > tr {
+      height: ${t.rowHeight.compact.body} !important;
+      min-height: ${t.rowHeight.compact.body} !important;
+      max-height: ${t.rowHeight.compact.body} !important;
+    }
+
+    .ds-table.ds-table-size-small .ant-tag {
+      margin-inline-end: 0 !important;
+      padding: 0 4px !important;
+      height: 16px !important;
+      line-height: 16px !important;
+      font-size: 10px !important;
+      border-radius: 2px !important;
+      display: inline-flex !important;
+      align-items: center !important;
+    }
+
+    .ds-table.ds-table-size-middle .ant-table-thead > tr > th,
+    .ds-table.ds-table-size-middle .ant-table-tbody > tr:not(.ant-table-measure-row) > td {
+      padding: 0 16px !important;
+      vertical-align: middle !important;
+    }
+
+    .ds-table.ds-table-size-middle .ant-table-thead > tr > th {
+      font-size: ${t.typography.header.fontSize} !important;
+      line-height: ${t.typography.header.lineHeight} !important;
+      letter-spacing: ${t.typography.header.letterSpacing} !important;
+      height: ${t.rowHeight.normal.header} !important;
+      font-weight: ${t.typography.header.fontWeight} !important;
+    }
+
+    .ds-table.ds-table-size-middle .ant-table-tbody > tr:not(.ant-table-measure-row) > td {
+      font-size: ${t.typography.body.fontSize} !important;
+      line-height: ${t.typography.body.lineHeight} !important;
+      letter-spacing: ${t.typography.body.letterSpacing} !important;
+      height: ${t.rowHeight.normal.body} !important;
+    }
+
+    .ds-table.ds-table-size-large .ant-table-thead > tr > th,
+    .ds-table.ds-table-size-large .ant-table-tbody > tr:not(.ant-table-measure-row) > td {
+      padding: 0 16px !important;
+      vertical-align: middle !important;
+    }
+
+    .ds-table.ds-table-size-large .ant-table-thead > tr > th {
+      font-size: 18px !important;
+      line-height: 22px !important;
+      letter-spacing: -0.036px !important;
+      height: 50px !important;
+      font-weight: 600 !important;
+    }
+
+    .ds-table.ds-table-size-large .ant-table-tbody > tr:not(.ant-table-measure-row) > td {
+      font-size: 16px !important;
+      line-height: 20px !important;
+      letter-spacing: -0.016px !important;
+      height: 46px !important;
+    }
+
+    .ds-table .ant-table-thead > tr > th,
+    .ds-table .ant-table-thead > tr > th:hover {
+      color: ${t.text.body} !important;
+      font-weight: ${t.typography.body.fontWeight} !important;
+    }
+
+    .ds-table .ant-table-thead > tr > th .ant-table-column-title {
+      color: inherit !important;
+      font-weight: inherit !important;
+    }
+
+    .ds-table .ant-table-thead > tr > th.ant-table-column-has-sorters,
+    .ds-table .ant-table-thead > tr > th.ant-table-column-has-sorters:hover,
+    .ds-table .ant-table-thead > tr > th.ant-table-column-sort,
+    .ds-table .ant-table-thead > tr > th.ant-table-column-sort:hover {
+      color: ${t.text.header} !important;
+      font-weight: ${t.typography.header.fontWeight} !important;
+    }
+
+    .ds-table .ant-table-thead > tr > th.ant-table-column-has-sorters .ant-table-column-title,
+    .ds-table .ant-table-thead > tr > th.ant-table-column-sort .ant-table-column-title {
+      font-weight: ${t.typography.header.fontWeight} !important;
+    }
+
+    .ds-table.ds-table-styleA .ant-table {
+      background: ${t.surface.container} !important;
+    }
+
+    .ds-table.ds-table-styleA .ant-table-thead > tr > th {
+      border-bottom-width: 2px !important;
+    }
+
+    .ds-table.ds-table-styleA .ant-table-container {
+      border: none !important;
+      border-radius: 0 !important;
+      background: ${t.surface.container} !important;
+    }
+
+    .ds-table.ds-table-styleAEditable .ant-table {
+      background: ${t.surface.container} !important;
+    }
+
+    .ds-table.ds-table-styleAEditable .ant-table-thead > tr > th {
+      border-bottom-width: 2px !important;
+    }
+
+    .ds-table.ds-table-styleAEditable .ant-table-container {
+      border: none !important;
+      border-radius: 0 !important;
+      background: ${t.surface.container} !important;
+    }
+
+    .ds-table.ds-table-styleACustomizable .ant-table {
+      background: ${t.surface.container} !important;
+    }
+
+    .ds-table.ds-table-styleACustomizable .ant-table-thead > tr > th {
+      border-bottom-width: 2px !important;
+    }
+
+    .ds-table.ds-table-styleACustomizable .ant-table-container {
+      border: none !important;
+      border-radius: 0 !important;
+      background: ${t.surface.container} !important;
+    }
+
+    .ds-table.ds-table-styleAResizable .ant-table {
+      background: ${t.surface.container} !important;
+    }
+
+    .ds-table.ds-table-styleAResizable .ant-table-thead > tr > th {
+      border-bottom-width: 2px !important;
+    }
+
+    .ds-table.ds-table-styleAResizable .ant-table-container {
+      border: none !important;
+      border-radius: 0 !important;
+      background: ${t.surface.container} !important;
+    }
+
+    .ds-table .ds-table-resizable-header-cell {
+      position: relative !important;
+    }
+
+    .ds-table .ds-table-resize-handle {
+      position: absolute !important;
+      top: 8px !important;
+      inset-inline-end: 0 !important;
+      bottom: 8px !important;
+      width: 12px !important;
+      padding: 0 !important;
+      border: 0 !important;
+      border-radius: 0 !important;
+      background: transparent !important;
+      cursor: col-resize !important;
+      touch-action: none !important;
+      z-index: 2 !important;
+    }
+
+    .ds-table .ds-table-resize-handle::after {
+      content: '' !important;
+      position: absolute !important;
+      top: 0 !important;
+      bottom: 0 !important;
+      inset-inline-end: 5px !important;
+      width: 1px !important;
+      background: ${t.border.bodyDivider} !important;
+      opacity: 0 !important;
+      transition: opacity 120ms ease !important;
+    }
+
+    .ds-table .ds-table-resizable-header-cell:hover .ds-table-resize-handle::after,
+    .ds-table .ds-table-resize-handle:focus-visible::after {
+      opacity: 1 !important;
+      background: ${t.text.header} !important;
+    }
+
+    .ds-table .ds-table-resize-handle:focus-visible {
+      outline: 2px solid ${t.text.header} !important;
+      outline-offset: -2px !important;
+    }
+
+    .ds-table.ds-table-styleAFixedHeaderFooter .ant-table {
+      background: ${t.surface.container} !important;
+    }
+
+    .ds-table.ds-table-styleAFixedHeaderFooter .ant-table-thead > tr > th {
+      border-bottom-width: 2px !important;
+    }
+
+    .ds-table.ds-table-styleAFixedHeaderFooter .ant-table-container {
+      border: none !important;
+      border-radius: 0 !important;
+      background: ${t.surface.container} !important;
+    }
+
+    .ds-table-fixed-frame {
+      display: flex !important;
+      flex-direction: column !important;
+      width: 100% !important;
+      background: ${t.surface.container} !important;
+    }
+
+    .ds-table-fixed-frame > .ds-table.ant-table-wrapper,
+    .ds-table-fixed-frame > .ant-table-wrapper {
+      flex: 1 1 auto !important;
+      min-height: 0 !important;
+    }
+
+    .ds-table-fixed-frame .ant-table-body {
+      overflow-y: auto !important;
+    }
+
+    .ds-table-fixed-footer {
+      flex: 0 0 auto !important;
+      min-height: 56px !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: flex-end !important;
+      padding: 12px 16px !important;
+      border-top: 1px solid ${t.border.bodyDivider} !important;
+      background: ${t.surface.container} !important;
+      box-sizing: border-box !important;
+    }
+
+    .ds-table-column-visibility-control {
+      display: flex !important;
+      align-items: center !important;
+      gap: 12px !important;
+      margin-bottom: 16px !important;
+      padding: 12px 0 !important;
+      flex-wrap: wrap !important;
+    }
+
+    .ds-table-control-label {
+      font-weight: 600 !important;
+      font-size: 14px !important;
+      color: ${t.text.body} !important;
+      margin: 0 !important;
+    }
+
+    .ds-table-control-checkboxes {
+      display: flex !important;
+      gap: 12px !important;
+      flex-wrap: wrap !important;
+    }
+
+    .ds-table-control-checkbox {
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: 6px !important;
+      font-size: 14px !important;
+      color: ${t.text.body} !important;
+      cursor: pointer !important;
+      user-select: none !important;
+      margin: 0 !important;
+    }
+
+    .ds-table-control-checkbox input[type='checkbox'] {
+      width: 16px !important;
+      height: 16px !important;
+      cursor: pointer !important;
+      margin: 0 !important;
+    }
+
+    .ds-table .ds-table-edit-input.ant-input,
+    .ds-table .ds-table-edit-input.ant-input-affix-wrapper {
+      height: 26px !important;
+      min-height: 26px !important;
+      width: 100% !important;
+      min-width: 0 !important;
+      max-width: 100% !important;
+      box-sizing: border-box !important;
+      border-radius: 4px !important;
+      border: 1px solid ${e.input.border.default} !important;
+      background: ${e.input.background.default} !important;
+      color: ${e.input.text.focus} !important;
+      padding: 3px 8px !important;
+      font-size: 12px !important;
+      line-height: 16px !important;
+    }
+
+    .ds-table .ds-table-edit-input.ant-input:hover,
+    .ds-table .ds-table-edit-input.ant-input-affix-wrapper:hover {
+      border-color: ${e.input.border.hover} !important;
+    }
+
+    .ds-table .ds-table-edit-input.ant-input:focus,
+    .ds-table .ds-table-edit-input.ant-input-focused,
+    .ds-table .ds-table-edit-input.ant-input-affix-wrapper-focused {
+      border-color: ${e.input.border.focus} !important;
+      box-shadow: none !important;
+      outline: none !important;
+    }
+
+    .ds-table.ds-table-styleB {
+      background: ${t.surface.layout};
+      padding: 0;
+    }
+
+    .ds-table.ds-table-styleB .ant-table {
+      background: ${t.surface.layout} !important;
+    }
+
+    .ds-table.ds-table-styleB .ant-table-container {
+      border: 1px solid ${t.border.container} !important;
+      border-radius: ${t.border.radius} !important;
+      overflow: hidden !important;
+      background: ${t.surface.layout} !important;
+    }
+
+    .ds-table.ds-table-styleB .ant-table-thead > tr > th {
+      border-bottom-width: ${t.border.headerDividerWidth} !important;
+      background: ${t.surface.headerDefault} !important;
+    }
+
+
+    .ds-table.ds-table-styleB.ds-table-header-white .ant-table-thead > tr > th {
+      background: ${t.surface.headerWhite} !important;
+    }
+  `;
+}
+var C = ({ dsStyle: e = "styleA", dsHeaderVariant: t = "default", dsFrozenColumns: n = "none", dsFrozenBreakpoint: a = 768, dsFrozenColumnWidth: d = 180, dsTruncateCellText: f = !1, dsTruncateTooltip: p = !0, dsTruncateTooltipDelay: m = .25, dsTruncateTooltipSize: v = "normal", dsTruncateTooltipTitle: b = "Title Heading", dsEditableColumns: x = [], dsOnEditableDataChange: S, dsCustomizable: C = !1, dsVisibleColumns: w, dsOnVisibleColumnsChange: pe, dsFixedBodyHeight: me = 320, dsResizableColumns: he = !1, dsColumnWidths: T, dsOnColumnWidthsChange: ge, dsResizableColumnMinWidth: E = 96, dsResizableColumnMaxWidth: D, dsResizableDefaultColumnWidth: O = 180, dsResponsive: k = !0, dsResponsiveMinColumnWidth: _e = 160, dsDensity: ve = "comfortable", dsStickyHeader: ye = !1, dsStickyOffsetHeader: be = 0, dsRowsPerPageOptions: A, dsAutoSizeColumns: j = !1, dsAutoSizeMinWidth: xe = 96, dsAutoSizeMaxWidth: Se = 520, dsAutoSizeSampleSize: Ce = 50, dsAutoSizeCellPadding: we = 32, size: Te, className: Ee, columns: M, dataSource: N, pagination: P, ...De }) => {
+	let [Oe, ke] = s.useState(!1), [F, Ae] = s.useState(Array.isArray(N) ? N : []), [I, je] = s.useState(() => Array.isArray(w) ? new Set(w.map(String)) : M && Array.isArray(M) ? new Set(M.map((e) => _(e)).filter((e) => !!e)) : /* @__PURE__ */ new Set()), [Me, L] = s.useState(() => T ?? ne(M, O));
+	c(() => {
+		fe(), r();
+	}, []), c(() => {
+		if (typeof window > "u") return;
+		let e = () => {
+			ke(window.innerWidth <= a);
+		};
+		return e(), window.addEventListener("resize", e), () => {
+			window.removeEventListener("resize", e);
+		};
+	}, [a]), c(() => {
+		e === "styleAEditable" && Ae(Array.isArray(N) ? N : []);
+	}, [N, e]);
+	let { scroll: R, tableLayout: Ne, showSorterTooltip: z, components: B, sticky: Pe, ...Fe } = De, V = n !== "none" && Oe, H = e === "styleAEditable", U = e === "styleACustomizable" && C, W = e === "styleAFixedHeaderFooter", G = e === "styleAResizable" || he, K = P && typeof P == "object" ? P : void 0, q = s.useMemo(() => !K || !A || A.length === 0 ? K : {
+		...K,
+		pageSizeOptions: K.pageSizeOptions ?? A,
+		showSizeChanger: K.showSizeChanger ?? !0
+	}, [A, K]), Ie = Te ?? (ve === "compact" ? "small" : "middle"), [Le, Re] = s.useState(K?.defaultCurrent ?? 1), [ze, Be] = s.useState(K?.defaultPageSize ?? K?.pageSize ?? 10);
+	c(() => {
+		U && Array.isArray(w) && je(new Set(w.map(String)));
+	}, [w, U]), c(() => {
+		if (G) {
+			if (T) {
+				L(T);
+				return;
+			}
+			L((e) => ne(M, O, e));
+		}
+	}, [
+		M,
+		T,
+		O,
+		G
+	]);
+	let Ve = s.useCallback((e, t) => {
+		je((n) => {
+			let r = new Set(n);
+			t ? r.add(e) : r.delete(e);
+			let i = Array.from(r);
+			return pe?.(i), r;
+		});
+	}, [pe]), He = s.useMemo(() => Array.isArray(x) ? x.map(String) : typeof x == "string" ? x.split(",").map((e) => e.trim()).filter(Boolean) : x && typeof x == "object" ? Object.entries(x).filter(([, e]) => !!e).map(([e]) => e) : [], [x]), Ue = s.useCallback((e, t, n) => {
+		Ae((r) => {
+			if (!Array.isArray(r) || !r[e]) return r;
+			let i = [...r], a = i[e];
+			return i[e] = ae(a, t, n), S?.(i), i;
+		});
+	}, [S]), We = s.useCallback((e, t) => {
+		let n = y(t, E, D);
+		L((t) => {
+			let r = {
+				...t,
+				[e]: n
+			};
+			return ge?.(r), r;
+		});
+	}, [
+		ge,
+		D,
+		E
+	]), J = s.useMemo(() => {
+		let e = g(M, z), t = V ? ee(e, n, d) : e, r = U ? se(t, I) : t, i = new Set(He), a = H ? oe(r, i, Ue) : r, o = H ? F : Array.isArray(N) ? N : [], s = ie(j), c = j === !0 || s?.size ? re(a, o, {
+			minWidth: xe,
+			maxWidth: Se,
+			sampleSize: Ce,
+			cellPadding: we,
+			enabledColumnKeys: s
+		}) : a, l = G ? ue(c, Me, We, E, D, O) : c;
+		return !f || H ? l : te(l, p, m, v, b);
+	}, [
+		M,
+		z,
+		d,
+		n,
+		f,
+		p,
+		m,
+		v,
+		b,
+		He,
+		Ue,
+		G,
+		Me,
+		We,
+		E,
+		D,
+		O,
+		j,
+		xe,
+		Se,
+		Ce,
+		we,
+		V,
+		H,
+		F,
+		N,
+		I,
+		U,
+		Ve
+	]), Y = s.useMemo(() => de(J, _e), [J, _e]), X = s.useCallback((e) => k ? !e || typeof e != "object" ? { x: Y } : {
+		...e,
+		x: e.x ?? Y
+	} : e, [k, Y]), Ge = s.useMemo(() => {
+		if (W) {
+			let e = R && typeof R == "object" ? R : {};
+			return X({
+				...e,
+				y: e.y ?? me
+			});
+		}
+		return X(R);
+	}, [
+		R,
+		X,
+		me,
+		V,
+		W,
+		G
+	]), Ke = H || G || k ? Ne ?? "fixed" : Ne, qe = Pe ?? (ye ? { offsetHeader: be } : void 0), Je = s.useMemo(() => G ? {
+		...B,
+		header: {
+			...B?.header,
+			cell: le
+		}
+	} : B, [B, G]), Ye = q?.total ?? (Array.isArray(N) ? N.length : 0), Z = q?.current ?? Le, Q = q?.pageSize ?? ze, Xe = s.useMemo(() => {
+		let e = H ? F : N;
+		if (!W || !Array.isArray(e) || q?.total != null && q.total > e.length) return e;
+		let t = (Z - 1) * Q;
+		return e.slice(t, t + Q);
+	}, [
+		N,
+		F,
+		Z,
+		Q,
+		q?.total,
+		H,
+		W
+	]), Ze = {
+		...q,
+		current: Z,
+		pageSize: Q,
+		total: Ye,
+		showSizeChanger: q?.showSizeChanger ?? !1,
+		onChange: (e, t) => {
+			Re(e), Be(t), q?.onChange?.(e, t);
+		},
+		onShowSizeChange: (e, t) => {
+			Re(e), Be(t), q?.onShowSizeChange?.(e, t);
+		}
+	}, Qe = [
+		"ds-table",
+		`ds-table-${e}`,
+		`ds-table-size-${Ie}`,
+		k ? "ds-table-responsive" : "",
+		t === "white" ? "ds-table-header-white" : "",
+		Ee || ""
+	].filter(Boolean).join(" "), $ = /* @__PURE__ */ l(o, {
+		...Fe,
+		columns: J,
+		dataSource: Xe,
+		pagination: W ? !1 : q ?? P,
+		scroll: Ge,
+		tableLayout: Ke,
+		components: Je,
+		size: Ie,
+		className: Qe,
+		sticky: qe,
+		showSorterTooltip: h(z)
+	});
+	return W ? /* @__PURE__ */ u("div", {
+		className: `${Qe} ds-table-fixed-frame`,
+		children: [$, /* @__PURE__ */ l("div", {
+			className: "ds-table-fixed-footer",
+			children: /* @__PURE__ */ l(i, { ...Ze })
+		})]
+	}) : U ? /* @__PURE__ */ u("div", {
+		className: Qe,
+		children: [/* @__PURE__ */ l(ce, {
+			columns: M,
+			visibleColumns: I,
+			onToggle: Ve
+		}), $]
+	}) : $;
+};
+//#endregion
+export { C as Table, C as default };
+
+//# sourceMappingURL=Table.js.map