@drivenets/design-system 0.14.0 → 0.15.0

package/dist/index.js

@@ -8408,8 +8408,8 @@ const useArkDialogBodyLockCleanup = (open, enabled) => {
 //#endregion
 //#region src/components/ds-drawer/ds-drawer.tsx
 const DsDrawer = (t0) => {
-	const $ = c(25);
-	const { open, onOpenChange, columns: t1, position: t2, backdrop: t3, closeOnEscape: t4, closeOnInteractOutside: t5, portal: t6, style, className, children } = t0;
+	const $ = c(28);
+	const { open, onOpenChange, onOpenAutoFocus, columns: t1, position: t2, backdrop: t3, closeOnEscape: t4, closeOnInteractOutside: t5, portal: t6, style, className, children } = t0;
 	const columns = t1 === void 0 ? 4 : t1;
 	const position = t2 === void 0 ? "end" : t2;
 	const backdrop = t3 === void 0 ? false : t3;
@@ -8427,75 +8427,88 @@ const DsDrawer = (t0) => {
 		$[1] = t7;
 	} else t7 = $[1];
 	const handleOpenChange = t7;
-	const Wrapper = portal ? Portal : Fragment$1;
 	let t8;
-	if ($[2] !== backdrop) {
-		t8 = backdrop && /* @__PURE__ */ jsx(Dialog.Backdrop, { className: ds_drawer_module_default.backdrop });
-		$[2] = backdrop;
+	if ($[2] !== onOpenAutoFocus) {
+		t8 = onOpenAutoFocus ? () => {
+			const event = new Event("openAutoFocus", { cancelable: true });
+			onOpenAutoFocus(event);
+			return event.defaultPrevented ? document.activeElement : void 0;
+		} : void 0;
+		$[2] = onOpenAutoFocus;
 		$[3] = t8;
 	} else t8 = $[3];
-	const t9 = ds_drawer_module_default[`position-${position}`];
-	const t10 = ds_drawer_module_default[`cols-${resolvedColumns}`];
-	let t11;
-	if ($[4] !== className || $[5] !== t10 || $[6] !== t9) {
-		t11 = classNames(ds_drawer_module_default.drawer, t9, className, t10);
-		$[4] = className;
-		$[5] = t10;
-		$[6] = t9;
-		$[7] = t11;
-	} else t11 = $[7];
+	const initialFocusEl = t8;
+	const Wrapper = portal ? Portal : Fragment$1;
+	let t9;
+	if ($[4] !== backdrop) {
+		t9 = backdrop && /* @__PURE__ */ jsx(Dialog.Backdrop, { className: ds_drawer_module_default.backdrop });
+		$[4] = backdrop;
+		$[5] = t9;
+	} else t9 = $[5];
+	const t10 = ds_drawer_module_default[`position-${position}`];
+	const t11 = ds_drawer_module_default[`cols-${resolvedColumns}`];
 	let t12;
-	if ($[8] !== children) {
-		t12 = /* @__PURE__ */ jsx("div", {
-			className: ds_drawer_module_default.content,
-			children
-		});
-		$[8] = children;
+	if ($[6] !== className || $[7] !== t10 || $[8] !== t11) {
+		t12 = classNames(ds_drawer_module_default.drawer, t10, className, t11);
+		$[6] = className;
+		$[7] = t10;
+		$[8] = t11;
 		$[9] = t12;
 	} else t12 = $[9];
 	let t13;
-	if ($[10] !== style || $[11] !== t11 || $[12] !== t12) {
-		t13 = /* @__PURE__ */ jsx(Dialog.Positioner, {
+	if ($[10] !== children) {
+		t13 = /* @__PURE__ */ jsx("div", {
+			className: ds_drawer_module_default.content,
+			children
+		});
+		$[10] = children;
+		$[11] = t13;
+	} else t13 = $[11];
+	let t14;
+	if ($[12] !== style || $[13] !== t12 || $[14] !== t13) {
+		t14 = /* @__PURE__ */ jsx(Dialog.Positioner, {
 			className: ds_drawer_module_default.positioner,
 			children: /* @__PURE__ */ jsx(Dialog.Content, {
 				style,
-				className: t11,
-				children: t12
+				className: t12,
+				children: t13
 			})
 		});
-		$[10] = style;
-		$[11] = t11;
-		$[12] = t12;
-		$[13] = t13;
-	} else t13 = $[13];
-	let t14;
-	if ($[14] !== Wrapper || $[15] !== t13 || $[16] !== t8) {
-		t14 = /* @__PURE__ */ jsxs(Wrapper, { children: [t8, t13] });
-		$[14] = Wrapper;
-		$[15] = t13;
-		$[16] = t8;
-		$[17] = t14;
-	} else t14 = $[17];
+		$[12] = style;
+		$[13] = t12;
+		$[14] = t13;
+		$[15] = t14;
+	} else t14 = $[15];
 	let t15;
-	if ($[18] !== backdrop || $[19] !== closeOnEscape || $[20] !== closeOnInteractOutside || $[21] !== handleOpenChange || $[22] !== open || $[23] !== t14) {
-		t15 = /* @__PURE__ */ jsx(Dialog.Root, {
+	if ($[16] !== Wrapper || $[17] !== t14 || $[18] !== t9) {
+		t15 = /* @__PURE__ */ jsxs(Wrapper, { children: [t9, t14] });
+		$[16] = Wrapper;
+		$[17] = t14;
+		$[18] = t9;
+		$[19] = t15;
+	} else t15 = $[19];
+	let t16;
+	if ($[20] !== backdrop || $[21] !== closeOnEscape || $[22] !== closeOnInteractOutside || $[23] !== handleOpenChange || $[24] !== initialFocusEl || $[25] !== open || $[26] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Dialog.Root, {
 			open,
 			onOpenChange: handleOpenChange,
 			modal: backdrop,
 			closeOnEscape,
 			closeOnInteractOutside,
 			preventScroll: backdrop,
-			children: t14
-		});
-		$[18] = backdrop;
-		$[19] = closeOnEscape;
-		$[20] = closeOnInteractOutside;
-		$[21] = handleOpenChange;
-		$[22] = open;
-		$[23] = t14;
-		$[24] = t15;
-	} else t15 = $[24];
-	return t15;
+			initialFocusEl,
+			children: t15
+		});
+		$[20] = backdrop;
+		$[21] = closeOnEscape;
+		$[22] = closeOnInteractOutside;
+		$[23] = handleOpenChange;
+		$[24] = initialFocusEl;
+		$[25] = open;
+		$[26] = t15;
+		$[27] = t16;
+	} else t16 = $[27];
+	return t16;
 };
 const Header$2 = (t0) => {
 	const $ = c(6);
@@ -14759,6 +14772,7 @@ function useFileUpload({ adapter, autoUpload = true, maxConcurrent = 3, maxFiles
 			updateFileProgress(fileId_2, 100);
 			onFileUploadComplete?.(fileId_2, result);
 		} catch (error_0) {
+			if (abortController.signal.aborted) return;
 			const errorMessage = error_0 instanceof Error ? error_0.message : "Upload failed";
 			let status_0 = "interrupted";
 			if (error_0 instanceof FileUploadError) status_0 = error_0.isRetryable ? "interrupted" : "error";
@@ -16510,6 +16524,263 @@ const progressLinearSizes = [
 	"large"
 ];
 //#endregion
+//#region src/components/ds-progress-task-bar/ds-progress-task-bar.module.scss
+var ds_progress_task_bar_module_default = {
+	"bar": "SN3VFW_bar",
+	"segment": "SN3VFW_segment",
+	"segmentCompleted": "SN3VFW_segmentCompleted",
+	"segmentFailed": "SN3VFW_segmentFailed",
+	"segmentRunning": "SN3VFW_segmentRunning",
+	"statusIcon": "SN3VFW_statusIcon",
+	"total": "SN3VFW_total"
+};
+//#endregion
+//#region src/components/ds-progress-task-bar/ds-progress-task-bar.types.ts
+const taskBarStatuses = [
+	"completed",
+	"running",
+	"failed"
+];
+//#endregion
+//#region src/components/ds-progress-task-bar/utils.ts
+const COUNT_UNITS = [
+	{
+		value: 1e9,
+		suffix: "B"
+	},
+	{
+		value: 1e6,
+		suffix: "M"
+	},
+	{
+		value: 1e3,
+		suffix: "K"
+	}
+];
+const ABBREVIATION_FLOOR = 1e3;
+const DECIMAL_THRESHOLD = 10;
+const stripTrailingZero = (value) => value % 1 === 0 ? String(value) : value.toFixed(1);
+/**
+* Format a task count for the legend, following the design's abbreviation rules:
+* - `< 1000` → exact number (e.g. `999`)
+* - single-digit unit → one decimal (e.g. `1.1K`, `1.2M`)
+* - multi-digit unit → whole number, truncated so `999,999 → 999K`
+*/
+const formatCount = (count) => {
+	if (!Number.isFinite(count)) return "0";
+	const rounded = Math.max(0, Math.round(count));
+	if (rounded < ABBREVIATION_FLOOR) return String(rounded);
+	const unit = COUNT_UNITS.find(({ value }) => rounded >= value);
+	if (unit === void 0) return String(rounded);
+	const scaled = rounded / unit.value;
+	if (scaled < DECIMAL_THRESHOLD) return `${stripTrailingZero(Math.round(scaled * 10) / 10)}${unit.suffix}`;
+	return `${String(Math.floor(scaled))}${unit.suffix}`;
+};
+//#endregion
+//#region src/components/ds-progress-task-bar/ds-progress-task-bar.tsx
+const statusIcon = Object.freeze({
+	completed: "check_circle",
+	running: "play_circle",
+	failed: "cancel"
+});
+const statusIconColor = Object.freeze({
+	completed: "success",
+	running: "action",
+	failed: "error"
+});
+const statusTextColor = Object.freeze({
+	completed: "success",
+	running: "action",
+	failed: "error"
+});
+const statusSegmentClass = Object.freeze({
+	completed: ds_progress_task_bar_module_default.segmentCompleted,
+	running: ds_progress_task_bar_module_default.segmentRunning,
+	failed: ds_progress_task_bar_module_default.segmentFailed
+});
+const defaultLocale = Object.freeze({
+	completed: "Completed",
+	running: "Running",
+	failed: "Failed",
+	total: (total) => `of ${total}`
+});
+const DsProgressTaskBar = (t0) => {
+	const $ = c(39);
+	const { completed: t1, running: t2, failed: t3, total, locale, className, style, ref } = t0;
+	const completed = t1 === void 0 ? 0 : t1;
+	const running = t2 === void 0 ? 0 : t2;
+	const failed = t3 === void 0 ? 0 : t3;
+	const t4 = Math.max(0, completed);
+	const t5 = Math.max(0, running);
+	const t6 = Math.max(0, failed);
+	let T0;
+	let t10;
+	let t11;
+	let t12;
+	let t13;
+	let t14;
+	let t15;
+	let t16;
+	let t17;
+	let t18;
+	let t19;
+	let t7;
+	let t8;
+	let t9;
+	if ($[0] !== className || $[1] !== locale || $[2] !== ref || $[3] !== style || $[4] !== t4 || $[5] !== t5 || $[6] !== t6 || $[7] !== total) {
+		const counts = {
+			completed: t4,
+			running: t5,
+			failed: t6
+		};
+		const sum = counts.completed + counts.running + counts.failed;
+		const denominator = Math.max(total ?? sum, sum);
+		const mergedLocale = {
+			...defaultLocale,
+			...locale
+		};
+		const activeStatuses = taskBarStatuses.filter((status) => counts[status] > 0);
+		const segmentWidth = (status_0) => denominator > 0 ? `${String(counts[status_0] / denominator * 100)}%` : "0%";
+		T0 = DsStack;
+		t13 = ref;
+		t14 = "column";
+		t15 = "var(--xs)";
+		t16 = "100%";
+		t17 = className;
+		t18 = style;
+		t19 = /* @__PURE__ */ jsxs(DsStack, {
+			direction: "row",
+			alignItems: "center",
+			justifyContent: "space-between",
+			children: [/* @__PURE__ */ jsx(DsStack, {
+				direction: "row",
+				alignItems: "center",
+				gap: "var(--3xs)",
+				children: activeStatuses.length === 0 ? /* @__PURE__ */ jsx(DsTypography, {
+					variant: "body-xs-reg",
+					color: "secondary",
+					children: "0"
+				}) : activeStatuses.map((status_1) => /* @__PURE__ */ jsxs(DsStack, {
+					direction: "row",
+					alignItems: "center",
+					gap: "var(--4xs)",
+					children: [/* @__PURE__ */ jsx(DsTooltip, {
+						content: mergedLocale[status_1],
+						children: /* @__PURE__ */ jsx("span", {
+							className: ds_progress_task_bar_module_default.statusIcon,
+							children: /* @__PURE__ */ jsx(DsIcon, {
+								icon: statusIcon[status_1],
+								size: "tiny",
+								color: statusIconColor[status_1],
+								filled: true
+							})
+						})
+					}), /* @__PURE__ */ jsx(DsTypography, {
+						variant: "body-xs-reg",
+						color: statusTextColor[status_1],
+						children: formatCount(counts[status_1])
+					})]
+				}, status_1))
+			}), /* @__PURE__ */ jsx(DsTypography, {
+				variant: "body-xs-reg",
+				color: "secondary",
+				className: ds_progress_task_bar_module_default.total,
+				children: mergedLocale.total(formatCount(denominator))
+			})]
+		});
+		t7 = ds_progress_task_bar_module_default.bar;
+		t8 = "progressbar";
+		t9 = 0;
+		t10 = denominator;
+		t11 = sum;
+		t12 = activeStatuses.map((status_2) => /* @__PURE__ */ jsx(DsTooltip, {
+			content: mergedLocale[status_2],
+			children: /* @__PURE__ */ jsx("span", {
+				className: classNames(ds_progress_task_bar_module_default.segment, statusSegmentClass[status_2]),
+				style: { width: segmentWidth(status_2) }
+			})
+		}, status_2));
+		$[0] = className;
+		$[1] = locale;
+		$[2] = ref;
+		$[3] = style;
+		$[4] = t4;
+		$[5] = t5;
+		$[6] = t6;
+		$[7] = total;
+		$[8] = T0;
+		$[9] = t10;
+		$[10] = t11;
+		$[11] = t12;
+		$[12] = t13;
+		$[13] = t14;
+		$[14] = t15;
+		$[15] = t16;
+		$[16] = t17;
+		$[17] = t18;
+		$[18] = t19;
+		$[19] = t7;
+		$[20] = t8;
+		$[21] = t9;
+	} else {
+		T0 = $[8];
+		t10 = $[9];
+		t11 = $[10];
+		t12 = $[11];
+		t13 = $[12];
+		t14 = $[13];
+		t15 = $[14];
+		t16 = $[15];
+		t17 = $[16];
+		t18 = $[17];
+		t19 = $[18];
+		t7 = $[19];
+		t8 = $[20];
+		t9 = $[21];
+	}
+	let t20;
+	if ($[22] !== t10 || $[23] !== t11 || $[24] !== t12 || $[25] !== t7 || $[26] !== t8 || $[27] !== t9) {
+		t20 = /* @__PURE__ */ jsx("div", {
+			className: t7,
+			role: t8,
+			"aria-valuemin": t9,
+			"aria-valuemax": t10,
+			"aria-valuenow": t11,
+			children: t12
+		});
+		$[22] = t10;
+		$[23] = t11;
+		$[24] = t12;
+		$[25] = t7;
+		$[26] = t8;
+		$[27] = t9;
+		$[28] = t20;
+	} else t20 = $[28];
+	let t21;
+	if ($[29] !== T0 || $[30] !== t13 || $[31] !== t14 || $[32] !== t15 || $[33] !== t16 || $[34] !== t17 || $[35] !== t18 || $[36] !== t19 || $[37] !== t20) {
+		t21 = /* @__PURE__ */ jsxs(T0, {
+			ref: t13,
+			direction: t14,
+			gap: t15,
+			width: t16,
+			className: t17,
+			style: t18,
+			children: [t19, t20]
+		});
+		$[29] = T0;
+		$[30] = t13;
+		$[31] = t14;
+		$[32] = t15;
+		$[33] = t16;
+		$[34] = t17;
+		$[35] = t18;
+		$[36] = t19;
+		$[37] = t20;
+		$[38] = t21;
+	} else t21 = $[38];
+	return t21;
+};
+//#endregion
 //#region src/components/ds-radio-group/ds-radio-group.module.scss
 var ds_radio_group_module_default = {
 	"labelInfo": "gJbMxW_labelInfo",
@@ -19470,6 +19741,7 @@ var ds_table_module_default = {
 //#region src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.module.scss
 var ds_table_editable_cell_module_default = {
 	"editButton": "g5FEoW_editButton",
+	"lockIcon": "g5FEoW_lockIcon",
 	"root": "g5FEoW_root"
 };
 //#endregion
@@ -19481,6 +19753,26 @@ const DsTableEditableCell = ({ cell, children }) => {
 		event.stopPropagation();
 		beginEdit(cell);
 	};
+	const editDisabled = cell.column.columnDef.editDisabled?.(cell.getContext());
+	const locked = editDisabled === true || typeof editDisabled === "object";
+	const reason = typeof editDisabled === "object" ? editDisabled.reason : void 0;
+	if (locked) return /* @__PURE__ */ jsxs("div", {
+		className: ds_table_editable_cell_module_default.root,
+		"data-locked": "",
+		children: [children, /* @__PURE__ */ jsx(DsTooltip, {
+			content: reason,
+			children: /* @__PURE__ */ jsx("span", {
+				className: ds_table_editable_cell_module_default.lockIcon,
+				"aria-label": "Editing disabled",
+				role: "img",
+				children: /* @__PURE__ */ jsx(DsIcon, {
+					icon: "lock",
+					size: "small",
+					color: "secondary"
+				})
+			})
+		})]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: ds_table_editable_cell_module_default.root,
 		"data-active": isEditing ? "" : void 0,
@@ -19684,6 +19976,7 @@ var ds_table_row_module_default = {
 	"expandedRow": "t8OZCq_expandedRow",
 	"groupStart": "t8OZCq_groupStart",
 	"isDragging": "t8OZCq_isDragging",
+	"loadingRow": "t8OZCq_loadingRow",
 	"rowDragHandle": "t8OZCq_rowDragHandle",
 	"rowNoBorder": "t8OZCq_rowNoBorder",
 	"selectableCell": "t8OZCq_selectableCell",
@@ -19710,7 +20003,7 @@ const DsRowDragHandle = ({ isDragging, attributes, listeners, style }) => {
 	});
 };
 const DsTableRow = ({ ref, row, isSelected }) => {
-	const { reorderable, onRowClick, onRowDoubleClick, renderExpandedRow, bordered, rowSize, primaryRowActions, secondaryRowActions, activeRowId } = useDsTableContext();
+	const { reorderable, onRowClick, onRowDoubleClick, renderExpandedRow, bordered, rowSize, primaryRowActions, secondaryRowActions, activeRowId, loading } = useDsTableContext();
 	const isExpanded = row.getIsExpanded();
 	const isActive = activeRowId === row.id;
 	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
@@ -19734,7 +20027,7 @@ const DsTableRow = ({ ref, row, isSelected }) => {
 			[ds_table_row_module_default.sizeSmall]: rowSize === "small",
 			[ds_table_row_module_default.sizeMedium]: rowSize === "medium",
 			[ds_table_row_module_default.sizeLarge]: rowSize === "large"
-		}, onRowClick && ds_table_row_module_default.clickableRow, !bordered && ds_table_row_module_default.rowNoBorder, isExpanded && ds_table_row_module_default.expanded),
+		}, onRowClick && ds_table_row_module_default.clickableRow, !bordered && ds_table_row_module_default.rowNoBorder, isExpanded && ds_table_row_module_default.expanded, loading && ds_table_row_module_default.loadingRow),
 		style: rowStyle,
 		onClick: () => onRowClick?.(row.original),
 		onDoubleClick: () => onRowDoubleClick?.(row.original),
@@ -19883,6 +20176,7 @@ var ds_table_row_virtualized_module_default = {
 	"expandedRow": "NcME7q_expandedRow",
 	"expandedRowContent": "NcME7q_expandedRowContent",
 	"groupStart": "NcME7q_groupStart",
+	"loadingRow": "NcME7q_loadingRow",
 	"row": "NcME7q_row",
 	"rowNoBorder": "NcME7q_rowNoBorder",
 	"selectableCell": "NcME7q_selectableCell",
@@ -19893,7 +20187,7 @@ var ds_table_row_virtualized_module_default = {
 //#endregion
 //#region src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.tsx
 const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef, rowVirtualizer, virtualRow, isExpandedRowContent }) => {
-	const { bordered, rowSize, activeRowId, primaryRowActions, secondaryRowActions, renderExpandedRow, onRowClick, onRowDoubleClick } = useDsTableContext();
+	const { bordered, rowSize, activeRowId, primaryRowActions, secondaryRowActions, renderExpandedRow, onRowClick, onRowDoubleClick, loading } = useDsTableContext();
 	const isExpanded = row.getIsExpanded();
 	const isActive = activeRowId === row.id;
 	return /* @__PURE__ */ jsx(TableRow, {
@@ -19912,7 +20206,7 @@ const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef,
 			[ds_table_row_virtualized_module_default.sizeSmall]: rowSize === "small",
 			[ds_table_row_virtualized_module_default.sizeMedium]: rowSize === "medium",
 			[ds_table_row_virtualized_module_default.sizeLarge]: rowSize === "large"
-		}, isExpandedRowContent && ds_table_row_virtualized_module_default.expandedRowContent, onRowClick && ds_table_row_virtualized_module_default.clickableRow, !bordered && ds_table_row_virtualized_module_default.rowNoBorder, isExpanded && ds_table_row_virtualized_module_default.expanded),
+		}, isExpandedRowContent && ds_table_row_virtualized_module_default.expandedRowContent, onRowClick && ds_table_row_virtualized_module_default.clickableRow, !bordered && ds_table_row_virtualized_module_default.rowNoBorder, isExpanded && ds_table_row_virtualized_module_default.expanded, loading && ds_table_row_virtualized_module_default.loadingRow),
 		onClick: isExpandedRowContent ? void 0 : () => onRowClick?.(row.original),
 		onDoubleClick: isExpandedRowContent ? void 0 : () => onRowDoubleClick?.(row.original),
 		children: isExpandedRowContent ? /* @__PURE__ */ jsx(TableCell, { children: renderExpandedRow?.(row.original) }) : /* @__PURE__ */ jsx(Fragment, { children: row.getVisibleCells().map((cell, idx) => {
@@ -20066,7 +20360,7 @@ const ROW_SIZE_HEIGHT_MAP = {
 /**
 * Design system Table component
 */
-const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, collapsedColumnGroups: externalCollapsedColumnGroups, onCollapsedColumnGroupsChange, locale, activeRowId, infiniteScroll, onCellEdit, onCellValidate }) => {
+const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", loading = false, expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, collapsedColumnGroups: externalCollapsedColumnGroups, onCollapsedColumnGroupsChange, locale, activeRowId, infiniteScroll, onCellEdit, onCellValidate }) => {
 	const [data, setData] = React$1.useState(tableData);
 	const [sorting, setSorting] = React$1.useState([]);
 	const [internalColumnFilters, setInternalColumnFilters] = React$1.useState([]);
@@ -20158,9 +20452,20 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 		hasSelectColumn,
 		showSelectAllCheckbox
 	]);
+	const skeletonColumns = useMemo(() => {
+		const toSkeleton = (cols) => cols.map((column) => "columns" in column && column.columns ? {
+			...column,
+			columns: toSkeleton(column.columns)
+		} : {
+			...column,
+			cell: column.loadingCell ?? (() => /* @__PURE__ */ jsx(DsSkeletonText, { width: "60%" }))
+		});
+		return toSkeleton(columns);
+	}, [columns]);
+	const skeletonData = useMemo(() => Array.from({ length: 5 }, (_, i) => ({ id: `ds-table-skeleton-${String(i)}` })), []);
 	const table = useReactTable({
-		data: reorderable ? data : tableData,
-		columns,
+		data: loading ? skeletonData : reorderable ? data : tableData,
+		columns: loading ? skeletonColumns : columns,
 		getCoreRowModel: getCoreRowModel(),
 		onSortingChange: handleSortingChange,
 		getSortedRowModel: getSortedRowModel(),
@@ -20226,6 +20531,7 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 	}) });
 	const selectedRows = Object.entries(rowSelection).filter(([, selected]) => selected).map(([key]) => rowsById[key]?.original).filter((v) => !!v);
 	const isBulkActionsVisible = selectable && actions.length > 0 && selectedRows.length > 0;
+	const editingState = useEditingState(onCellEdit, onCellValidate);
 	const contextValue = {
 		stickyHeader,
 		bordered,
@@ -20235,8 +20541,9 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 		selectable,
 		reorderable,
 		showSelectAllCheckbox,
-		onRowClick,
-		onRowDoubleClick,
+		loading,
+		onRowClick: loading ? void 0 : onRowClick,
+		onRowDoubleClick: loading ? void 0 : onRowDoubleClick,
 		primaryRowActions,
 		secondaryRowActions,
 		renderExpandedRow,
@@ -20246,7 +20553,7 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 		onToggleColumnGroup: toggleColumnGroup,
 		locale,
 		onCellEdit,
-		...useEditingState(onCellEdit, onCellValidate)
+		...editingState
 	};
 	return /* @__PURE__ */ jsx(DsTableContext.Provider, {
 		value: contextValue,
@@ -21821,6 +22128,6 @@ DsWorkspaceLayout.Body = Body;
 DsWorkspaceLayout.SideMenu = SideMenu;
 DsWorkspaceLayout.LeftPanel = LeftPanel;
 //#endregion
-export { BREAKPOINT_LG, DsAlertBanner, DsAutocomplete, DsAvatar, DsAvatarGroup, DsBreadcrumb, DsButton, DsButtonV3, DsCard, DsCatalogLayout, DsCheckbox, DsCheckboxGroup, DsChip, DsChipGroup, DsCommentBubble, DsCommentCard, DsCommentIndicator, DsCommentThread, DsCommentsDrawer, DsConfirmation, DsDateInput, DsDatePicker, DsDateRangePicker, DsDialog, DsDivider, DsDrawer, DsDropdownMenu, DsDropdownMenuLegacy, DsExpandableTextInput, DsFileUpload, DsFilterStatusIcon, DsFormControl, DsGrid, DsGridItem, DsIcon, DsKeyValuePair, DsLoader, DsModal, DsNextStepButton, DsNumberInput, DsPanel, DsPasswordInput, DsPopover, DsProgressArc, DsProgressDonut, DsProgressLinear, DsRadioGroup, DsRadioGroupLegacy, DsSegmentGroup, DsSelect, ds_skeleton_default as DsSkeleton, DsSkeletonCircle, DsSkeletonRect, DsSkeletonText, DsSmartTabs, DsSpinner, DsSplitButton, DsStack, DsStatusBadge, DsStatusBadgeV2, DsStep, DsStepContent, DsStepper, DsSystemStatus, DsTable, DsTableColumnFilterPopover, DsTableEditCellCheckbox, DsTableEditCellDate, DsTableEditCellNumber, DsTableEditCellSelect, DsTableEditCellText, DsTableEditableCell, DsTableEditingCell, DsTabs, DsTag, DsTagFilter, DsTextInput, DsTextarea, DsThreadItem, DsTimePicker, DsToastProvider, DsToggle, DsTooltip, DsTree, DsTypography, DsVerticalTabs, DsWorkspaceLayout, FatalFileUploadError, FileUpload, FileUploadError, RetryableFileUploadError, alertBannerVariants, breakpoints, buttonV3Colors, buttonV3Sizes, buttonV3Variants, cardSizes, checkboxVariants, colors, controlStatuses, createCheckboxFilterAdapter, createDsTreeCollection, createDualRangeFilterAdapter, createFilterAdapter, customIcons, defaultDsTableLocale, dropdownMenuItemVariants, dsKeyValuePairOrientations, filterStatuses, formatTime, iconColors, iconSizes, iconVariants, isCustomIcon, isResponsiveValue, loaderVariants, popoverAligns, popoverSides, progressArcSizes, progressArcVariants, progressDonutSizes, progressDonutVariants, progressLinearSizes, progressLinearVariants, resolveResponsiveValue, skeletonColorVariants, skeletonRadiusVariants, spinnerSizes, splitButtonSizes, statusBadgeV2Phases, statusBadgeV2Sizes, statusBadgeV2Variants, systemStatuses, tagSizes, tagVariants, textInputSizes, useBreakpoint, useCellEditor, useCheckboxSelectAll, useFileUpload, useResponsiveValue, useTableFilters, useToaster, withResponsiveProps };
+export { BREAKPOINT_LG, DsAlertBanner, DsAutocomplete, DsAvatar, DsAvatarGroup, DsBreadcrumb, DsButton, DsButtonV3, DsCard, DsCatalogLayout, DsCheckbox, DsCheckboxGroup, DsChip, DsChipGroup, DsCommentBubble, DsCommentCard, DsCommentIndicator, DsCommentThread, DsCommentsDrawer, DsConfirmation, DsDateInput, DsDatePicker, DsDateRangePicker, DsDialog, DsDivider, DsDrawer, DsDropdownMenu, DsDropdownMenuLegacy, DsExpandableTextInput, DsFileUpload, DsFilterStatusIcon, DsFormControl, DsGrid, DsGridItem, DsIcon, DsKeyValuePair, DsLoader, DsModal, DsNextStepButton, DsNumberInput, DsPanel, DsPasswordInput, DsPopover, DsProgressArc, DsProgressDonut, DsProgressLinear, DsProgressTaskBar, DsRadioGroup, DsRadioGroupLegacy, DsSegmentGroup, DsSelect, ds_skeleton_default as DsSkeleton, DsSkeletonCircle, DsSkeletonRect, DsSkeletonText, DsSmartTabs, DsSpinner, DsSplitButton, DsStack, DsStatusBadge, DsStatusBadgeV2, DsStep, DsStepContent, DsStepper, DsSystemStatus, DsTable, DsTableColumnFilterPopover, DsTableEditCellCheckbox, DsTableEditCellDate, DsTableEditCellNumber, DsTableEditCellSelect, DsTableEditCellText, DsTableEditableCell, DsTableEditingCell, DsTabs, DsTag, DsTagFilter, DsTextInput, DsTextarea, DsThreadItem, DsTimePicker, DsToastProvider, DsToggle, DsTooltip, DsTree, DsTypography, DsVerticalTabs, DsWorkspaceLayout, FatalFileUploadError, FileUpload, FileUploadError, RetryableFileUploadError, alertBannerVariants, breakpoints, buttonV3Colors, buttonV3Sizes, buttonV3Variants, cardSizes, checkboxVariants, colors, controlStatuses, createCheckboxFilterAdapter, createDsTreeCollection, createDualRangeFilterAdapter, createFilterAdapter, customIcons, defaultDsTableLocale, dropdownMenuItemVariants, dsKeyValuePairOrientations, filterStatuses, formatTime, iconColors, iconSizes, iconVariants, isCustomIcon, isResponsiveValue, loaderVariants, popoverAligns, popoverSides, progressArcSizes, progressArcVariants, progressDonutSizes, progressDonutVariants, progressLinearSizes, progressLinearVariants, resolveResponsiveValue, skeletonColorVariants, skeletonRadiusVariants, spinnerSizes, splitButtonSizes, statusBadgeV2Phases, statusBadgeV2Sizes, statusBadgeV2Variants, systemStatuses, tagSizes, tagVariants, taskBarStatuses, textInputSizes, useBreakpoint, useCellEditor, useCheckboxSelectAll, useFileUpload, useResponsiveValue, useTableFilters, useToaster, withResponsiveProps };
 
 //# sourceMappingURL=index.js.map