@drivenets/design-system 0.14.0 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -64,6 +64,7 @@
     "@eslint/compat": "^2.1.0",
     "@faker-js/faker": "^10.3.0",
     "@figma/code-connect": "^1.4.8",
+    "@github-ui/storybook-addon-performance-panel": "^1.1.4",
     "@hookform/resolvers": "^5.4.0",
     "@rolldown/plugin-babel": "^0.2.3",
     "@storybook/addon-a11y": "^10.4.1",
@@ -104,8 +105,8 @@
     "vitest": "^4.1.7",
     "vitest-browser-react": "^2.1.0",
     "zod": "^4.4.3",
-    "@drivenets/eslint-plugin-internal": "0.0.0",
-    "@drivenets/vite-plugin-design-system": "0.0.9"
+    "@drivenets/vite-plugin-design-system": "0.0.10",
+    "@drivenets/eslint-plugin-internal": "0.0.0"
   },
   "scripts": {
     "start": "storybook dev -p 6006",

package/src/components/ds-drawer/ds-drawer.module.scss

@@ -56,6 +56,20 @@
 		transform 0.2s ease,
 		width 0.2s ease;
 
+	// A closed (or closing) drawer is invisible but stays mounted and transformed.
+	// Without this it still hit-tests and can swallow clicks on neighboring UI when
+	// docked at a non-zero offset. Keep it click-through whenever it is not open.
+	//
+	// `!important` is required: when this drawer is stacked with other open Ark
+	// dialogs (e.g. a non-modal drawer opened over another dialog), Ark's layer
+	// management writes an inline `pointer-events: auto` onto the content, which
+	// would otherwise win over this rule and let the closed drawer keep eating
+	// clicks. Overriding a third-party inline style is the canonical use of
+	// `!important`, and a closed drawer must never be a pointer target.
+	&[data-state='closed'] {
+		pointer-events: none !important;
+	}
+
 	&.position-end {
 		right: 0;
 		transform-origin: 100% 50%;

package/src/components/ds-drawer/ds-drawer.tsx

@@ -1,5 +1,5 @@
 import { type CSSProperties, type ReactNode, Fragment } from 'react';
-import { Dialog } from '@ark-ui/react/dialog';
+import { Dialog, type DialogRootProps } from '@ark-ui/react/dialog';
 import { Portal } from '@ark-ui/react/portal';
 import classNames from 'classnames';
 import type { DsDrawerProps } from './ds-drawer.types';
@@ -12,6 +12,7 @@ import { useResponsiveValue } from '../../utils/responsive';
 const DsDrawer = ({
 	open,
 	onOpenChange,
+	onOpenAutoFocus,
 	columns = 4,
 	position = 'end',
 	backdrop = false,
@@ -29,6 +30,23 @@ const DsDrawer = ({
 		onOpenChange(details.open);
 	};
 
+	// Mirrors Radix's `onOpenAutoFocus`. Ark reads `initialFocusEl` when the drawer
+	// opens to decide what to focus. To honor `preventDefault()`, we point initial
+	// focus back at the element that was focused when the drawer opened (e.g. the
+	// input that triggered it), so the caret stays put. Returning `undefined` keeps
+	// Ark's default of focusing the first element inside the drawer. The cast covers
+	// the `undefined` branch, which sits outside Ark's `MaybeElement` return type.
+	const initialFocusEl = (
+		onOpenAutoFocus
+			? () => {
+					const event = new Event('openAutoFocus', { cancelable: true });
+					onOpenAutoFocus(event);
+
+					return event.defaultPrevented ? (document.activeElement as HTMLElement | null) : undefined;
+				}
+			: undefined
+	) as DialogRootProps['initialFocusEl'];
+
 	const Wrapper = portal ? Portal : Fragment;
 
 	return (
@@ -39,6 +57,7 @@ const DsDrawer = ({
 			closeOnEscape={closeOnEscape}
 			closeOnInteractOutside={closeOnInteractOutside}
 			preventScroll={backdrop}
+			initialFocusEl={initialFocusEl}
 		>
 			<Wrapper>
 				{backdrop && <Dialog.Backdrop className={styles.backdrop} />}

package/src/components/ds-drawer/ds-drawer.types.ts

@@ -20,6 +20,13 @@ export interface DsDrawerProps extends Pick<DialogProps, 'closeOnEscape' | 'clos
 	 * Callback when the drawer open state changes
 	 */
 	onOpenChange: (open: boolean) => void;
+	/**
+	 * Called when focus is about to move into the drawer as it opens.
+	 * Call `event.preventDefault()` to stop the drawer from stealing focus,
+	 * keeping the caret where it was (e.g. in a text input that triggered the
+	 * drawer). Useful for type-ahead / popover patterns.
+	 */
+	onOpenAutoFocus?: (event: Event) => void;
 	/**
 	 * Number of grid columns the drawer should span (1-12).
 	 * Accepts a responsive value, e.g. `{ lg: 4, md: 6 }`.

package/src/components/ds-file-upload/hooks/use-file-upload.ts

@@ -224,6 +224,13 @@ export function useFileUpload({
 			updateFileProgress(fileId, 100);
 			onFileUploadComplete?.(fileId, result);
 		} catch (error) {
+			// A fired abort signal means the upload was cancelled or removed by the
+			// user. Adapters reject with a (retryable) error on abort, but that must
+			// not overwrite the terminal status owned by cancelUpload/removeFile.
+			if (abortController.signal.aborted) {
+				return;
+			}
+
 			const errorMessage = error instanceof Error ? error.message : 'Upload failed';
 			// Determine status based on error type
 			// Unknown errors are treated as retryable (network errors, etc.)

package/src/components/ds-progress-task-bar/ds-progress-task-bar.figma.ts

@@ -0,0 +1,29 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=36987-43620
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-progress-task-bar
+// component=DsProgressTaskBar
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// Boolean property names are case-sensitive: `Running` / `Failed` are capitalized.
+const zero = instance.getBoolean('zero');
+const completed = instance.getBoolean('completed');
+const running = instance.getBoolean('Running');
+const failed = instance.getBoolean('Failed');
+
+// Booleans only toggle a status on/off, so emit a representative count per status.
+const attrs = [
+	completed ? 'completed={300}' : '',
+	running ? 'running={100}' : '',
+	failed ? 'failed={100}' : '',
+	'total={1000}',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: zero ? figma.code`<DsProgressTaskBar total={999} />` : figma.code`<DsProgressTaskBar ${attrs} />`,
+	imports: ["import { DsProgressTaskBar } from '@drivenets/design-system'"],
+	id: 'ds-progress-task-bar',
+	metadata: { nestable: false },
+};

package/src/components/ds-progress-task-bar/ds-progress-task-bar.module.scss

@@ -0,0 +1,39 @@
+$bar-height: 8px;
+$segment-min-width: 4px;
+
+.statusIcon {
+	display: inline-flex;
+}
+
+.total {
+	flex-shrink: 0;
+}
+
+.bar {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: $bar-height;
+	overflow: hidden;
+	background-color: var(--background-action-secondary-hover);
+	border-radius: var(--3xs);
+}
+
+.segment {
+	flex: none;
+	min-width: $segment-min-width;
+	height: 100%;
+	transition: width 0.2s ease;
+}
+
+.segmentCompleted {
+	background-color: var(--background-success-medium);
+}
+
+.segmentRunning {
+	background-color: var(--background-light-primary);
+}
+
+.segmentFailed {
+	background-color: var(--background-error);
+}

package/src/components/ds-progress-task-bar/ds-progress-task-bar.tsx

@@ -0,0 +1,122 @@
+import classNames from 'classnames';
+
+import { DsIcon, type IconColor, type IconName } from '../ds-icon';
+import { DsStack } from '../ds-stack';
+import { DsTooltip } from '../ds-tooltip';
+import { DsTypography, type TypographyColor } from '../ds-typography';
+
+import styles from './ds-progress-task-bar.module.scss';
+import {
+	type DsProgressTaskBarLocale,
+	type DsProgressTaskBarProps,
+	type TaskBarStatus,
+	taskBarStatuses,
+} from './ds-progress-task-bar.types';
+import { formatCount } from './utils';
+
+const statusIcon: Record<TaskBarStatus, IconName> = Object.freeze({
+	completed: 'check_circle',
+	running: 'play_circle',
+	failed: 'cancel',
+});
+
+const statusIconColor: Record<TaskBarStatus, IconColor> = Object.freeze({
+	completed: 'success',
+	running: 'action',
+	failed: 'error',
+});
+
+const statusTextColor: Record<TaskBarStatus, TypographyColor> = Object.freeze({
+	completed: 'success',
+	running: 'action',
+	failed: 'error',
+});
+
+const statusSegmentClass: Record<TaskBarStatus, string> = Object.freeze({
+	completed: styles.segmentCompleted,
+	running: styles.segmentRunning,
+	failed: styles.segmentFailed,
+});
+
+const defaultLocale: Required<DsProgressTaskBarLocale> = Object.freeze({
+	completed: 'Completed',
+	running: 'Running',
+	failed: 'Failed',
+	total: (total: string) => `of ${total}`,
+});
+
+const DsProgressTaskBar = ({
+	completed = 0,
+	running = 0,
+	failed = 0,
+	total,
+	locale,
+	className,
+	style,
+	ref,
+}: DsProgressTaskBarProps) => {
+	const counts: Record<TaskBarStatus, number> = {
+		completed: Math.max(0, completed),
+		running: Math.max(0, running),
+		failed: Math.max(0, failed),
+	};
+
+	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: TaskBarStatus) =>
+		denominator > 0 ? `${String((counts[status] / denominator) * 100)}%` : '0%';
+
+	return (
+		<DsStack ref={ref} direction="column" gap="var(--xs)" width="100%" className={className} style={style}>
+			<DsStack direction="row" alignItems="center" justifyContent="space-between">
+				<DsStack direction="row" alignItems="center" gap="var(--3xs)">
+					{activeStatuses.length === 0 ? (
+						<DsTypography variant="body-xs-reg" color="secondary">
+							0
+						</DsTypography>
+					) : (
+						activeStatuses.map((status) => (
+							<DsStack key={status} direction="row" alignItems="center" gap="var(--4xs)">
+								<DsTooltip content={mergedLocale[status]}>
+									<span className={styles.statusIcon}>
+										<DsIcon icon={statusIcon[status]} size="tiny" color={statusIconColor[status]} filled />
+									</span>
+								</DsTooltip>
+								<DsTypography variant="body-xs-reg" color={statusTextColor[status]}>
+									{formatCount(counts[status])}
+								</DsTypography>
+							</DsStack>
+						))
+					)}
+				</DsStack>
+
+				<DsTypography variant="body-xs-reg" color="secondary" className={styles.total}>
+					{mergedLocale.total(formatCount(denominator))}
+				</DsTypography>
+			</DsStack>
+
+			<div
+				className={styles.bar}
+				role="progressbar"
+				aria-valuemin={0}
+				aria-valuemax={denominator}
+				aria-valuenow={sum}
+			>
+				{activeStatuses.map((status) => (
+					<DsTooltip key={status} content={mergedLocale[status]}>
+						<span
+							className={classNames(styles.segment, statusSegmentClass[status])}
+							style={{ width: segmentWidth(status) }}
+						/>
+					</DsTooltip>
+				))}
+			</div>
+		</DsStack>
+	);
+};
+
+export default DsProgressTaskBar;

package/src/components/ds-progress-task-bar/ds-progress-task-bar.types.ts

@@ -0,0 +1,65 @@
+import type { CSSProperties, Ref } from 'react';
+
+export const taskBarStatuses = ['completed', 'running', 'failed'] as const;
+export type TaskBarStatus = (typeof taskBarStatuses)[number];
+
+export interface DsProgressTaskBarLocale {
+	/** @default 'Completed' */
+	completed?: string;
+	/** @default 'Running' */
+	running?: string;
+	/** @default 'Failed' */
+	failed?: string;
+	/**
+	 * Builds the trailing total label from the already-formatted total value.
+	 * @default (total) => `of ${total}`
+	 */
+	total?: (total: string) => string;
+}
+
+export interface DsProgressTaskBarProps {
+	/**
+	 * Number of completed tasks.
+	 * @default 0
+	 */
+	completed?: number;
+
+	/**
+	 * Number of running tasks.
+	 * @default 0
+	 */
+	running?: number;
+
+	/**
+	 * Number of failed tasks.
+	 * @default 0
+	 */
+	failed?: number;
+
+	/**
+	 * Total task count used as the denominator for segment widths and shown as
+	 * the trailing "of {total}" label. Defaults to the sum of the status counts
+	 * (fully filled bar).
+	 */
+	total?: number;
+
+	/**
+	 * Localized strings (status tooltips and total label).
+	 */
+	locale?: DsProgressTaskBarLocale;
+
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: CSSProperties;
+
+	/**
+	 * Ref to the root element
+	 */
+	ref?: Ref<HTMLDivElement>;
+}

package/src/components/ds-progress-task-bar/index.ts

@@ -0,0 +1,2 @@
+export { default as DsProgressTaskBar } from './ds-progress-task-bar';
+export * from './ds-progress-task-bar.types';

package/src/components/ds-progress-task-bar/utils.ts

@@ -0,0 +1,51 @@
+interface CountUnit {
+	value: number;
+	suffix: string;
+}
+
+const COUNT_UNITS: readonly CountUnit[] = [
+	{ value: 1_000_000_000, suffix: 'B' },
+	{ value: 1_000_000, suffix: 'M' },
+	{ value: 1_000, suffix: 'K' },
+];
+
+// Counts below this are shown verbatim; at or above it they are abbreviated.
+const ABBREVIATION_FLOOR = 1_000;
+
+// Below this multiple of a unit, show one decimal place (e.g. 1.1K); at or
+// above it, show a whole number (e.g. 87K).
+const DECIMAL_THRESHOLD = 10;
+
+const stripTrailingZero = (value: number): string => (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`
+ */
+export const formatCount = (count: number): string => {
+	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 === undefined) {
+		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}`;
+};

package/src/components/ds-table/components/ds-table-row/ds-table-row.module.scss

@@ -9,7 +9,7 @@
 		}
 	}
 
-	&:hover {
+	&:not(.loadingRow):hover {
 		background-color: var(--background-secondary);
 	}
 

package/src/components/ds-table/components/ds-table-row/ds-table-row.tsx

@@ -51,6 +51,7 @@ const DsTableRow = <TData,>({ ref, row, isSelected }: DsTableRowProps<TData>) =>
 		primaryRowActions,
 		secondaryRowActions,
 		activeRowId,
+		loading,
 	} = useDsTableContext<TData, unknown>();
 	const isExpanded = row.getIsExpanded();
 	const isActive = activeRowId === row.id;
@@ -90,6 +91,7 @@ const DsTableRow = <TData,>({ ref, row, isSelected }: DsTableRowProps<TData>) =>
 					onRowClick && styles.clickableRow,
 					!bordered && styles.rowNoBorder,
 					isExpanded && styles.expanded,
+					loading && styles.loadingRow,
 				)}
 				style={rowStyle}
 				onClick={() => onRowClick?.(row.original)}

package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.module.scss

@@ -7,7 +7,7 @@
 	position: absolute;
 	width: 100%;
 
-	&:hover {
+	&:not(.loadingRow):hover {
 		background-color: var(--background-secondary);
 	}
 

package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.tsx

@@ -26,6 +26,7 @@ export const DsTableRowVirtualized = <TData,>({
 		renderExpandedRow,
 		onRowClick,
 		onRowDoubleClick,
+		loading,
 	} = useDsTableContext<TData, unknown>();
 	const isExpanded = row.getIsExpanded();
 	const isActive = activeRowId === row.id;
@@ -58,6 +59,7 @@ export const DsTableRowVirtualized = <TData,>({
 				onRowClick && styles.clickableRow,
 				!bordered && styles.rowNoBorder,
 				isExpanded && styles.expanded,
+				loading && styles.loadingRow,
 			)}
 			onClick={isExpandedRowContent ? undefined : () => onRowClick?.(row.original)}
 			onDoubleClick={isExpandedRowContent ? undefined : () => onRowDoubleClick?.(row.original)}

package/src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.module.scss

@@ -11,18 +11,30 @@
 		outline: none;
 	}
 
-	.editButton {
+	.editButton,
+	.lockIcon {
 		flex-shrink: 0;
 		opacity: 0;
 		pointer-events: none;
 	}
 
+	.lockIcon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
 	&:hover,
 	&:focus-within,
 	&[data-active] {
-		.editButton {
+		.editButton,
+		.lockIcon {
 			opacity: 1;
 			pointer-events: auto;
 		}
 	}
+
+	&[data-locked] {
+		cursor: default;
+	}
 }

package/src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.tsx

@@ -1,5 +1,7 @@
 import type { MouseEvent } from 'react';
 import { DsButtonV3 } from '../../../../ds-button-v3';
+import { DsIcon } from '../../../../ds-icon';
+import { DsTooltip } from '../../../../ds-tooltip';
 import styles from './ds-table-editable-cell.module.scss';
 import type { DsTableEditableCellProps } from './ds-table-editable-cell.types';
 import { useDsTableContext } from '../../../context/ds-table-context';
@@ -16,6 +18,23 @@ export const DsTableEditableCell = <TData, TValue>({
 		beginEdit(cell);
 	};
 
+	const editDisabled = cell.column.columnDef.editDisabled?.(cell.getContext());
+	const locked = editDisabled === true || typeof editDisabled === 'object';
+	const reason = typeof editDisabled === 'object' ? editDisabled.reason : undefined;
+
+	if (locked) {
+		return (
+			<div className={styles.root} data-locked="">
+				{children}
+				<DsTooltip content={reason}>
+					<span className={styles.lockIcon} aria-label="Editing disabled" role="img">
+						<DsIcon icon="lock" size="small" color="secondary" />
+					</span>
+				</DsTooltip>
+			</div>
+		);
+	}
+
 	return (
 		<div
 			className={styles.root}

package/src/components/ds-table/ds-table-column.types.ts

@@ -1,6 +1,15 @@
 import type { ReactNode } from 'react';
 import type { CellContext, RowData } from '@tanstack/react-table';
 
+/**
+ * Result of a column's `editDisabled` resolver for a single cell.
+ *
+ * - `false` (or `undefined`) keeps the cell editable.
+ * - `true` locks the cell with no tooltip.
+ * - `{ reason }` locks the cell and shows `reason` in a tooltip on hover.
+ */
+export type DsTableEditDisabledResult = boolean | { reason?: ReactNode };
+
 declare module '@tanstack/react-table' {
 	interface ColumnDefBase<TData extends RowData, TValue> {
 		/**
@@ -8,5 +17,20 @@ declare module '@tanstack/react-table' {
 		 * When omitted, the column is not editable.
 		 */
 		editCell?: (context: CellContext<TData, TValue>) => ReactNode;
+
+		/**
+		 * Locks individual cells of an otherwise editable column (one that defines
+		 * `editCell`). When this returns a truthy value for a cell, that cell shows a
+		 * lock icon instead of the edit affordance and cannot enter edit mode. Return
+		 * `{ reason }` to surface an optional tooltip explaining why. Has no effect on
+		 * columns without `editCell`.
+		 */
+		editDisabled?: (context: CellContext<TData, TValue>) => DsTableEditDisabledResult;
+
+		/**
+		 * Renders this column's cell content while the table is `loading`.
+		 * When omitted, a default text skeleton is rendered.
+		 */
+		loadingCell?: (context: CellContext<TData, TValue>) => ReactNode;
 	}
 }

package/src/components/ds-table/ds-table.tsx

@@ -26,6 +26,7 @@ import { useDragAndDrop } from './hooks/use-drag-and-drop';
 import { type DsTableContextType, DsTableContext, useEditingState } from './context/ds-table-context';
 import { DsTableBodyVirtualized } from './components/ds-table-body-virtualized';
 import { useColumnGroups } from './grouping';
+import { DsSkeletonText } from '../ds-skeleton';
 import {
 	EMPTY_TABLE_STATE_TEXT,
 	EXPANDER_COLUMN_ID,
@@ -34,6 +35,7 @@ import {
 	REORDER_COLUMN_WIDTH,
 	SELECT_COLUMN_ID,
 	SELECT_COLUMN_WIDTH,
+	SKELETON_ROW_COUNT,
 } from './utils/constants';
 
 // Row size to pixel height mapping (matches CSS variables)
@@ -59,6 +61,7 @@ const DsTable = <TData extends { id: string }, TValue>({
 	bordered = true,
 	fullWidth = true,
 	rowSize = 'medium',
+	loading = false,
 	expandable = false,
 	renderExpandedRow,
 	selectable = false,
@@ -201,9 +204,29 @@ const DsTable = <TData extends { id: string }, TValue>({
 		return augmentedColumns;
 	}, [columnsProp, hasExpanderColumn, hasReorderColumn, hasSelectColumn, showSelectAllCheckbox]);
 
+	const skeletonColumns = useMemo<ColumnDef<TData, TValue>[]>(() => {
+		const toSkeleton = (cols: ColumnDef<TData, TValue>[]): ColumnDef<TData, TValue>[] =>
+			cols.map((column) =>
+				'columns' in column && column.columns
+					? { ...column, columns: toSkeleton(column.columns) }
+					: { ...column, cell: column.loadingCell ?? (() => <DsSkeletonText width="60%" />) },
+			);
+
+		return toSkeleton(columns);
+	}, [columns]);
+
+	const skeletonData = useMemo<TData[]>(
+		() =>
+			Array.from(
+				{ length: SKELETON_ROW_COUNT },
+				(_, i) => ({ id: `ds-table-skeleton-${String(i)}` }) as TData,
+			),
+		[],
+	);
+
 	const table = useReactTable({
-		data: reorderable ? data : tableData,
-		columns,
+		data: loading ? skeletonData : reorderable ? data : tableData,
+		columns: loading ? skeletonColumns : columns,
 		getCoreRowModel: getCoreRowModel(),
 		onSortingChange: handleSortingChange,
 		getSortedRowModel: getSortedRowModel(),
@@ -295,8 +318,9 @@ const DsTable = <TData extends { id: string }, TValue>({
 		selectable,
 		reorderable,
 		showSelectAllCheckbox,
-		onRowClick,
-		onRowDoubleClick,
+		loading,
+		onRowClick: loading ? undefined : onRowClick,
+		onRowDoubleClick: loading ? undefined : onRowDoubleClick,
 		primaryRowActions,
 		secondaryRowActions,
 		renderExpandedRow,

package/src/components/ds-table/ds-table.types.ts

@@ -314,6 +314,13 @@ export interface DsDataTableProps<TData, TValue> {
 	 */
 	rowSize?: DsTableRowSize;
 
+	/**
+	 * When `true`, renders placeholder skeleton rows instead of the data. Column
+	 * headers stay intact and row interactions are disabled while loading.
+	 * @default false
+	 */
+	loading?: boolean;
+
 	/**
 	 * Whether the table is expandable or if an individual row should be expandable
 	 */