ods-ant 0.2.0 → 0.4.0

package/dist-lib/display/Table.js

@@ -0,0 +1,979 @@
+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 b(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 n = _(e);
+			!n || r[n] != null || (r[n] = v(e.width) ?? t);
+		});
+	};
+	return i(e), r;
+}
+function x(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 ne(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 re(e, t, n) {
+	return e && e.map((e) => {
+		let r = { ...e };
+		if (Array.isArray(r.children) && r.children.length > 0) return r.children = re(r.children, t, n), r;
+		let i = _(r);
+		return !(i && t.has(i)) || r.dataIndex == null || (r.render = (e, t, i) => {
+			let o = x(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 ie(e, t) {
+	return e && e.map((e) => {
+		let n = { ...e };
+		if (Array.isArray(n.children) && n.children.length > 0) return n.children = ie(n.children, t), n;
+		let r = _(n);
+		return !r || t.has(r) ? n : null;
+	}).filter((e) => e !== null);
+}
+var ae = ({ 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))
+		})]
+	});
+}, oe = ({ 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 se(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 = se(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 ce() {
+	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 > 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 > 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 > 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 > 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 > 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 > 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 > 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 S = ({ 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: x = "Title Heading", dsEditableColumns: S = [], dsOnEditableDataChange: C, dsCustomizable: le = !1, dsVisibleColumns: w, dsOnVisibleColumnsChange: T, dsFixedBodyHeight: E = 320, dsResizableColumns: ue = !1, dsColumnWidths: D, dsOnColumnWidthsChange: de, dsResizableColumnMinWidth: O = 96, dsResizableColumnMaxWidth: k, dsResizableDefaultColumnWidth: A = 180, size: j = "middle", className: fe, columns: M, dataSource: N, pagination: P, ...pe }) => {
+	let [me, he] = s.useState(!1), [ge, _e] = s.useState(Array.isArray(N) ? N : []), [F, I] = 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()), [L, R] = s.useState(() => D ?? b(M, A));
+	c(() => {
+		ce(), r();
+	}, []), c(() => {
+		if (typeof window > "u") return;
+		let e = () => {
+			he(window.innerWidth <= a);
+		};
+		return e(), window.addEventListener("resize", e), () => {
+			window.removeEventListener("resize", e);
+		};
+	}, [a]), c(() => {
+		e === "styleAEditable" && _e(Array.isArray(N) ? N : []);
+	}, [N, e]);
+	let { scroll: z, tableLayout: B, showSorterTooltip: V, components: H, ...ve } = pe, U = n !== "none" && me, W = e === "styleAEditable", G = e === "styleACustomizable" && le, K = e === "styleAFixedHeaderFooter", q = e === "styleAResizable" || ue, J = P && typeof P == "object" ? P : void 0, [ye, Y] = s.useState(J?.defaultCurrent ?? 1), [be, xe] = s.useState(J?.defaultPageSize ?? J?.pageSize ?? 10);
+	c(() => {
+		G && Array.isArray(w) && I(new Set(w.map(String)));
+	}, [w, G]), c(() => {
+		if (q) {
+			if (D) {
+				R(D);
+				return;
+			}
+			R((e) => b(M, A, e));
+		}
+	}, [
+		M,
+		D,
+		A,
+		q
+	]);
+	let Se = s.useCallback((e, t) => {
+		I((n) => {
+			let r = new Set(n);
+			t ? r.add(e) : r.delete(e);
+			let i = Array.from(r);
+			return T?.(i), r;
+		});
+	}, [T]), Ce = s.useMemo(() => Array.isArray(S) ? S.map(String) : typeof S == "string" ? S.split(",").map((e) => e.trim()).filter(Boolean) : S && typeof S == "object" ? Object.entries(S).filter(([, e]) => !!e).map(([e]) => e) : [], [S]), we = s.useCallback((e, t, n) => {
+		_e((r) => {
+			if (!Array.isArray(r) || !r[e]) return r;
+			let i = [...r], a = i[e];
+			return i[e] = ne(a, t, n), C?.(i), i;
+		});
+	}, [C]), Te = s.useCallback((e, t) => {
+		let n = y(t, O, k);
+		R((t) => {
+			let r = {
+				...t,
+				[e]: n
+			};
+			return de?.(r), r;
+		});
+	}, [
+		de,
+		k,
+		O
+	]), Ee = s.useMemo(() => {
+		let e = g(M, V), t = U ? ee(e, n, d) : e, r = G ? ie(t, F) : t, i = new Set(Ce), a = W ? re(r, i, we) : r, o = q ? se(a, L, Te, O, k, A) : a;
+		return !f || W ? o : te(o, p, m, v, x);
+	}, [
+		M,
+		V,
+		d,
+		n,
+		f,
+		p,
+		m,
+		v,
+		x,
+		Ce,
+		we,
+		q,
+		L,
+		Te,
+		O,
+		k,
+		A,
+		U,
+		W,
+		F,
+		G,
+		Se
+	]), De = s.useMemo(() => {
+		if (K) {
+			let e = z && typeof z == "object" ? z : {};
+			return {
+				...e,
+				y: e.y ?? E
+			};
+		}
+		return q || U ? !z || typeof z != "object" ? { x: "max-content" } : {
+			...z,
+			x: z.x ?? "max-content"
+		} : z;
+	}, [
+		z,
+		E,
+		U,
+		K,
+		q
+	]), Oe = W || q ? B ?? "fixed" : B, ke = s.useMemo(() => q ? {
+		...H,
+		header: {
+			...H?.header,
+			cell: oe
+		}
+	} : H, [H, q]), Ae = J?.total ?? (Array.isArray(N) ? N.length : 0), X = J?.current ?? ye, Z = J?.pageSize ?? be, je = s.useMemo(() => {
+		let e = W ? ge : N;
+		if (!K || !Array.isArray(e) || J?.total != null && J.total > e.length) return e;
+		let t = (X - 1) * Z;
+		return e.slice(t, t + Z);
+	}, [
+		N,
+		ge,
+		X,
+		Z,
+		J?.total,
+		W,
+		K
+	]), Me = {
+		...J,
+		current: X,
+		pageSize: Z,
+		total: Ae,
+		showSizeChanger: J?.showSizeChanger ?? !1,
+		onChange: (e, t) => {
+			Y(e), xe(t), J?.onChange?.(e, t);
+		},
+		onShowSizeChange: (e, t) => {
+			Y(e), xe(t), J?.onShowSizeChange?.(e, t);
+		}
+	}, Q = [
+		"ds-table",
+		`ds-table-${e}`,
+		`ds-table-size-${j}`,
+		t === "white" ? "ds-table-header-white" : "",
+		fe || ""
+	].filter(Boolean).join(" "), $ = /* @__PURE__ */ l(o, {
+		...ve,
+		columns: Ee,
+		dataSource: je,
+		pagination: K ? !1 : P,
+		scroll: De,
+		tableLayout: Oe,
+		components: ke,
+		size: j,
+		className: Q,
+		showSorterTooltip: h(V)
+	});
+	return K ? /* @__PURE__ */ u("div", {
+		className: `${Q} ds-table-fixed-frame`,
+		children: [$, /* @__PURE__ */ l("div", {
+			className: "ds-table-fixed-footer",
+			children: /* @__PURE__ */ l(i, { ...Me })
+		})]
+	}) : G ? /* @__PURE__ */ u("div", {
+		className: Q,
+		children: [/* @__PURE__ */ l(ae, {
+			columns: M,
+			visibleColumns: F,
+			onToggle: Se
+		}), $]
+	}) : $;
+};
+//#endregion
+export { S as Table, S as default };
+
+//# sourceMappingURL=Table.js.map