npm - @drivenets/design-system - Versions diffs - 0.14.0 → 0.15.0 - Mend

@drivenets/design-system 0.14.0 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,18 @@
 # @drivenets/design-system
+## 0.15.0
+### Minor Changes
+- b9bf892: Add an `onOpenAutoFocus` prop to `DsDrawer`. Call `event.preventDefault()` to stop the drawer from stealing focus on open, keeping the caret where it was (e.g. in a text input that triggered the drawer) for type-ahead / popover patterns.
+### Patch Changes
+- b9bf892: Fix `DsDrawer` intercepting pointer events while closed. A closed (or closing) drawer stays mounted and transformed; for inset/offset drawers this could land the invisible content over neighboring UI and swallow its clicks. Closed-state content is now `pointer-events: none`, so a closed drawer is fully click-through regardless of docked position, while open drawers (including during the open animation) stay interactive.
+- f672a7c: Add `DsProgressTaskBar` component
+- 99099bc: Add a `loading` prop to `DsTable`
+- c429032: Add `ColumnDef.editDisabled` to `DsTable` for locking individual editable cells.
 ## 0.14.0
 ### Minor Changes

package/README.md CHANGED Viewed

@@ -27,7 +27,7 @@ We recommend using our provided Vite plugin to automatically include the necessa
 Or you can manually add the following lines to the `<head>` section of your `index.html` file:
 ```HTML
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" />
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Mono:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" />

package/dist/index.cjs CHANGED Viewed

@@ -8437,8 +8437,8 @@ const useArkDialogBodyLockCleanup = (open, enabled) => {
 //#endregion
 //#region src/components/ds-drawer/ds-drawer.tsx
 const DsDrawer = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(25);
-	const { open, onOpenChange, columns: t1, position: t2, backdrop: t3, closeOnEscape: t4, closeOnInteractOutside: t5, portal: t6, style, className, children } = t0;
+	const $ = (0, react_compiler_runtime.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;
@@ -8456,75 +8456,88 @@ const DsDrawer = (t0) => {
 		$[1] = t7;
 	} else t7 = $[1];
 	const handleOpenChange = t7;
-	const Wrapper = portal ? _ark_ui_react_portal.Portal : react.Fragment;
 	let t8;
-	if ($[2] !== backdrop) {
-		t8 = backdrop && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.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 = (0, classnames.default)(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 ? _ark_ui_react_portal.Portal : react.Fragment;
+	let t9;
+	if ($[4] !== backdrop) {
+		t9 = backdrop && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.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__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: ds_drawer_module_default.content,
-			children
-		});
-		$[8] = children;
+	if ($[6] !== className || $[7] !== t10 || $[8] !== t11) {
+		t12 = (0, classnames.default)(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__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.Dialog.Positioner, {
+	if ($[10] !== children) {
+		t13 = /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.Dialog.Positioner, {
 			className: ds_drawer_module_default.positioner,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.Dialog.Root, {
+	if ($[16] !== Wrapper || $[17] !== t14 || $[18] !== t9) {
+		t15 = /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.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 $ = (0, react_compiler_runtime.c)(6);
@@ -14788,6 +14801,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";
@@ -16539,6 +16553,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 $ = (0, react_compiler_runtime.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__ */ (0, react_jsx_runtime.jsxs)(DsStack, {
+			direction: "row",
+			alignItems: "center",
+			justifyContent: "space-between",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsStack, {
+				direction: "row",
+				alignItems: "center",
+				gap: "var(--3xs)",
+				children: activeStatuses.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
+					variant: "body-xs-reg",
+					color: "secondary",
+					children: "0"
+				}) : activeStatuses.map((status_1) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsStack, {
+					direction: "row",
+					alignItems: "center",
+					gap: "var(--4xs)",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTooltip, {
+						content: mergedLocale[status_1],
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: ds_progress_task_bar_module_default.statusIcon,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+								icon: statusIcon[status_1],
+								size: "tiny",
+								color: statusIconColor[status_1],
+								filled: true
+							})
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
+						variant: "body-xs-reg",
+						color: statusTextColor[status_1],
+						children: formatCount(counts[status_1])
+					})]
+				}, status_1))
+			}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(DsTooltip, {
+			content: mergedLocale[status_2],
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: (0, classnames.default)(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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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",
@@ -19499,6 +19770,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
@@ -19510,6 +19782,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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: ds_table_editable_cell_module_default.root,
+		"data-locked": "",
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTooltip, {
+			content: reason,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: ds_table_editable_cell_module_default.lockIcon,
+				"aria-label": "Editing disabled",
+				role: "img",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+					icon: "lock",
+					size: "small",
+					color: "secondary"
+				})
+			})
+		})]
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: ds_table_editable_cell_module_default.root,
 		"data-active": isEditing ? "" : void 0,
@@ -19713,6 +20005,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",
@@ -19739,7 +20032,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 } = (0, _dnd_kit_sortable.useSortable)({
@@ -19763,7 +20056,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),
@@ -19912,6 +20205,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",
@@ -19922,7 +20216,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__ */ (0, react_jsx_runtime.jsx)(TableRow, {
@@ -19941,7 +20235,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__ */ (0, react_jsx_runtime.jsx)(TableCell, { children: renderExpandedRow?.(row.original) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: row.getVisibleCells().map((cell, idx) => {
@@ -20095,7 +20389,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.useState(tableData);
 	const [sorting, setSorting] = react.useState([]);
 	const [internalColumnFilters, setInternalColumnFilters] = react.useState([]);
@@ -20187,9 +20481,20 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 		hasSelectColumn,
 		showSelectAllCheckbox
 	]);
+	const skeletonColumns = (0, react.useMemo)(() => {
+		const toSkeleton = (cols) => cols.map((column) => "columns" in column && column.columns ? {
+			...column,
+			columns: toSkeleton(column.columns)
+		} : {
+			...column,
+			cell: column.loadingCell ?? (() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsSkeletonText, { width: "60%" }))
+		});
+		return toSkeleton(columns);
+	}, [columns]);
+	const skeletonData = (0, react.useMemo)(() => Array.from({ length: 5 }, (_, i) => ({ id: `ds-table-skeleton-${String(i)}` })), []);
 	const table = (0, _tanstack_react_table.useReactTable)({
-		data: reorderable ? data : tableData,
-		columns,
+		data: loading ? skeletonData : reorderable ? data : tableData,
+		columns: loading ? skeletonColumns : columns,
 		getCoreRowModel: (0, _tanstack_react_table.getCoreRowModel)(),
 		onSortingChange: handleSortingChange,
 		getSortedRowModel: (0, _tanstack_react_table.getSortedRowModel)(),
@@ -20255,6 +20560,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,
@@ -20264,8 +20570,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,
@@ -20275,7 +20582,7 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
 		onToggleColumnGroup: toggleColumnGroup,
 		locale,
 		onCellEdit,
-		...useEditingState(onCellEdit, onCellValidate)
+		...editingState
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableContext.Provider, {
 		value: contextValue,
@@ -21896,6 +22203,7 @@ exports.DsPopover = DsPopover;
 exports.DsProgressArc = DsProgressArc;
 exports.DsProgressDonut = DsProgressDonut;
 exports.DsProgressLinear = DsProgressLinear;
+exports.DsProgressTaskBar = DsProgressTaskBar;
 exports.DsRadioGroup = DsRadioGroup;
 exports.DsRadioGroupLegacy = DsRadioGroupLegacy;
 exports.DsSegmentGroup = DsSegmentGroup;
@@ -21985,6 +22293,7 @@ exports.statusBadgeV2Variants = statusBadgeV2Variants;
 exports.systemStatuses = systemStatuses;
 exports.tagSizes = tagSizes;
 exports.tagVariants = tagVariants;
+exports.taskBarStatuses = taskBarStatuses;
 exports.textInputSizes = textInputSizes;
 exports.useBreakpoint = useBreakpoint;
 exports.useCellEditor = useCellEditor;