@drivenets/design-system 0.13.0 → 0.15.0

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-select/ds-select.figma.ts

@@ -0,0 +1,53 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=13773-1189
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-select
+// component=DsSelect
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum('Size', {
+	Default: 'default',
+	Small: 'small',
+});
+
+const state = instance.getEnum('State', {
+	Default: 'default',
+	Hover: 'hover',
+	Focus: 'focus',
+	Active: 'active',
+	Disable: 'disable',
+	Error: 'error',
+	'Error - Focus': 'errorFocus',
+});
+
+const disabled = state === 'disable';
+
+const sizeAttr = size === 'small' ? 'size="small"' : '';
+
+// Multi-select is driven by the nested dropdown menu's `Type` (Checkbox = multi). The menu
+// lives inside the select tree even when collapsed, so the designer's intent is read in any
+// state; an absent menu (ErrorHandle) safely defaults to single-select.
+const menu = instance.findInstance('DAP_dropdown menu_v01', { traverseInstances: true });
+const multiple =
+	menu.type === 'INSTANCE' && menu.getEnum('Type', { default: false, Checkbox: true, Radio: false }) === true;
+
+// `value` and `options` are required by `DsSelectProps` but are data, not derivable from
+// Figma, so emit placeholders for the developer to fill in (the discriminated union needs
+// an array `value` when `multiple`). The same string is surfaced as `fcProps` so a parent
+// `DsFormControl` template can emit `<DsFormControl.Select ${fcProps} />` uniformly.
+const attrs = [
+	sizeAttr,
+	disabled ? 'disabled' : '',
+	multiple ? 'multiple' : '',
+	'options={[]}',
+	multiple ? 'value={[]}' : 'value=""',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsSelect ${attrs} />`,
+	imports: ["import { DsSelect } from '@drivenets/design-system'"],
+	id: 'ds-select',
+	metadata: { nestable: true, props: { fcMember: 'Select', fcProps: attrs } },
+};

package/src/components/ds-split-button/ds-split-button.figma.ts

@@ -0,0 +1,95 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=32830-9950
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-split-button
+// component=DsSplitButton
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state = instance.getEnum('state', {
+	default: 'default',
+	hover: 'hover',
+	select: 'select',
+	focus: 'focus',
+	disabled: 'disabled',
+	running: 'running',
+});
+const disabled = state === 'disabled';
+const loading = state === 'running';
+
+const button = instance.findInstance('DAP_Button_v03', { traverseInstances: true });
+const size =
+	button.type === 'INSTANCE'
+		? button.getEnum('Size', { tiny: 'small', small: 'small', medium: 'medium', large: 'medium' })
+		: 'medium';
+
+const structure = instance.findInstance('.button-structure', { traverseInstances: true });
+const showIcon = structure.type === 'INSTANCE' ? structure.getBoolean('Show icon') : false;
+
+// `DsButtonV3.icon` is an icon-name string. Swapped icons keep the placeholder layer
+// name (e.g. `DAP_GM_O_check_circle`), so resolve via Code Connect ID or metadata.
+const toIconName = (name: string): string =>
+	name
+		.replace(/^DAP_DAP_/, 'DAP_')
+		.replace(/^DAP_GM_[OS]_/, '')
+		.replace(/^DAP_outline_icon\//, '')
+		.replace(/^DAP_/, '')
+		.replace(/^\/+/, '')
+		.replace(/[\s/]+/g, '_')
+		.toLowerCase();
+
+const iconNameFromCodeConnectId = (id: string | null): string | undefined => {
+	if (!id) {
+		return undefined;
+	}
+	if (id.startsWith('ds-icon-o-')) {
+		return id.slice('ds-icon-o-'.length);
+	}
+	if (id.startsWith('ds-icon-s-')) {
+		return id.slice('ds-icon-s-'.length);
+	}
+	return undefined;
+};
+
+const resolveIcon = (iconInstance: figma.InstanceHandle): string | undefined => {
+	const fromCcId = iconNameFromCodeConnectId(iconInstance.codeConnectId());
+	if (fromCcId) {
+		return fromCcId;
+	}
+
+	const iconFromMetadata = iconInstance.executeTemplate().metadata?.props?.icon;
+	if (typeof iconFromMetadata === 'string') {
+		return iconFromMetadata;
+	}
+
+	return toIconName(iconInstance.name);
+};
+
+const leadingIcon = structure.type === 'INSTANCE' ? structure.getInstanceSwap('Leading icon') : undefined;
+const iconFromSwap = leadingIcon?.type === 'INSTANCE' ? resolveIcon(leadingIcon) : undefined;
+const iconFromChild =
+	structure.type === 'INSTANCE'
+		? structure
+				.findConnectedInstances((node) => node.codeConnectId()?.startsWith('ds-icon-') ?? false, {
+					traverseInstances: true,
+				})
+				.find((node): node is figma.InstanceHandle => node.type === 'INSTANCE')
+		: undefined;
+const icon = iconFromSwap ?? (iconFromChild ? resolveIcon(iconFromChild) : undefined);
+
+// The split button's button slot is intended for an icon-only button, so emit
+// `icon` (and `loading`) rather than a text `children` label.
+// While loading, a spinner replaces the icon, so omit it
+// (the leading icon is the component's default placeholder in that state).
+const buttonProps = [
+	!loading && showIcon && icon ? `icon: '${icon}'` : undefined,
+	loading ? 'loading: true' : undefined,
+]
+	.filter(Boolean)
+	.join(', ');
+
+export default {
+	example: figma.code`<DsSplitButton size="${size}"${disabled ? ' disabled' : ''} slotProps={{ button: { ${buttonProps} }, select: { options: [], value: '' } }} />`,
+	imports: ["import { DsSplitButton } from '@drivenets/design-system'"],
+	id: 'ds-split-button',
+	metadata: { nestable: false },
+};

package/src/components/ds-status-badge-v2/ds-status-badge-v2.figma.ts

@@ -0,0 +1,41 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=34428-16204
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-status-badge-v2
+// component=DsStatusBadgeV2
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const phase = instance.getEnum('status', {
+	'not-started': 'not-started',
+	temporary: 'temporary',
+	'in-review': 'in-review',
+	pending: 'pending',
+	active: 'active',
+	execution: 'execution',
+	'result-succeeded': 'result-succeeded',
+	'result-warning': 'result-warning',
+	'result-failed': 'result-failed',
+	deprecated: 'deprecated',
+});
+const variant = instance.getEnum('variant', { primary: 'primary', secondary: 'secondary' });
+const size = instance.getEnum('Size', { medium: 'medium', small: 'small' });
+const structure = instance.getEnum('structure', {
+	'icon+text': 'icon+text',
+	'icon-only': 'icon-only',
+	'text-only': 'text-only',
+});
+
+const labelNode = instance.findText('Active', { traverseInstances: true });
+const label = labelNode.type === 'TEXT' ? labelNode.textContent : 'Active';
+
+export default {
+	example:
+		structure === 'icon-only'
+			? figma.code`<DsStatusBadgeV2 phase="${phase}" label="${label}" variant="${variant}" size="${size}" iconOnly />`
+			: structure === 'text-only'
+				? figma.code`<DsStatusBadgeV2 phase="${phase}" label="${label}" variant="${variant}" size="${size}" icon={null} />`
+				: figma.code`<DsStatusBadgeV2 phase="${phase}" label="${label}" variant="${variant}" size="${size}" />`,
+	imports: ["import { DsStatusBadgeV2 } from '@drivenets/design-system'"],
+	id: 'ds-status-badge-v2',
+	metadata: { nestable: true },
+};

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

@@ -110,7 +110,7 @@ interface DsTableBodyProps<TData> {
 	rowSelection: RowSelectionState;
 }
 
-function DsTableBody<TData>({
+export function DsTableBody<TData>({
 	ref,
 	rowVirtualizer,
 	rowsMapRef,
@@ -122,6 +122,11 @@ function DsTableBody<TData>({
 	const virtualRows = rowVirtualizer.getVirtualItems();
 	const totalSize = rowVirtualizer.getTotalSize();
 
+	// Gate the empty state on real data count, not on rendered virtual rows.
+	// getVirtualItems() transiently returns [] while the virtualizer re-measures
+	// after a `data` swap; rendering nothing for that frame avoids an empty-state flash.
+	const hasNoData = rowsAndExpandedRowContent.length === 0;
+
 	return (
 		<TableBody ref={ref} className={styles.body}>
 			{virtualRows.length > 0 ? (
@@ -144,11 +149,11 @@ function DsTableBody<TData>({
 						/>
 					);
 				})
-			) : (
+			) : hasNoData ? (
 				<TableRow>
 					<TableCell className={styles.emptyState}>{emptyState || EMPTY_TABLE_STATE_TEXT}</TableCell>
 				</TableRow>
-			)}
+			) : null}
 
 			<tr aria-hidden className={styles.sentinel} style={{ top: `${totalSize.toString()}px` }}>
 				<td />

package/src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.module.scss

@@ -0,0 +1,31 @@
+@use '../../../../styles/typography';
+@use '../../styles/variables' as vars;
+
+.groupHeaderCell {
+	@include typography.body-sm-md;
+	color: var(--font-main);
+	height: var(--ds-table-header-height);
+	padding: 0;
+	border-bottom: vars.$border-width solid var(--color-dap-gray-400);
+	border-left: vars.$group-border-width solid var(--border);
+}
+
+.groupHeaderContent {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: vars.$header-sort-gap;
+	width: 100%;
+	height: 100%;
+	padding: 0 var(--standard);
+}
+
+.groupLabel {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.collapseToggle {
+	flex-shrink: 0;
+}

package/src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.tsx

@@ -0,0 +1,48 @@
+import { flexRender } from '@tanstack/react-table';
+import { DsButtonV3 } from '../../../ds-button-v3';
+import { TableHead } from '../core-table';
+import { useDsTableContext } from '../../context/ds-table-context';
+import { getGroupColumnSizeStyle } from '../../grouping';
+import { defaultDsTableLocale } from '../../ds-table.types';
+import type { DsTableGroupHeaderCellProps } from './ds-table-group-header-cell.types';
+import styles from './ds-table-group-header-cell.module.scss';
+
+export const DsTableGroupHeaderCell = <TData, TValue>({
+	header,
+}: DsTableGroupHeaderCellProps<TData, TValue>) => {
+	const { collapsedColumnGroups, onToggleColumnGroup, locale } = useDsTableContext<TData, TValue>();
+
+	const groupId = header.column.id;
+	const visibleLeafColumns = header.column.getLeafColumns().filter((leaf) => leaf.getIsVisible());
+	const groupStyle = getGroupColumnSizeStyle(visibleLeafColumns);
+
+	const isCollapsible = header.column.columnDef.meta?.group?.collapsible ?? false;
+	const isCollapsed = collapsedColumnGroups?.includes(groupId) ?? false;
+
+	const mergedLocale = { ...defaultDsTableLocale, ...locale };
+	const toggleLabel = isCollapsed ? mergedLocale.expandColumnGroup : mergedLocale.collapseColumnGroup;
+
+	const handleToggle = () => onToggleColumnGroup?.(groupId);
+
+	return (
+		<TableHead className={styles.groupHeaderCell} style={groupStyle} colSpan={header.colSpan}>
+			<div className={styles.groupHeaderContent}>
+				<span className={styles.groupLabel}>
+					{flexRender(header.column.columnDef.header, header.getContext())}
+				</span>
+				{isCollapsible && (
+					<DsButtonV3
+						variant="secondary"
+						size="tiny"
+						icon={isCollapsed ? 'chevron_right' : 'chevron_left'}
+						className={styles.collapseToggle}
+						aria-label={toggleLabel}
+						aria-expanded={!isCollapsed}
+						title={toggleLabel}
+						onClick={handleToggle}
+					/>
+				)}
+			</div>
+		</TableHead>
+	);
+};

package/src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.types.ts

@@ -0,0 +1,12 @@
+import type { Header } from '@tanstack/react-table';
+
+/**
+ * Props for the grouping column header cell.
+ */
+export interface DsTableGroupHeaderCellProps<TData, TValue> {
+	/**
+	 * The grouping header from `@tanstack/react-table` (a header whose column nests
+	 * child columns).
+	 */
+	header: Header<TData, TValue>;
+}

package/src/components/ds-table/components/ds-table-group-header-cell/index.ts

@@ -0,0 +1,2 @@
+export { DsTableGroupHeaderCell } from './ds-table-group-header-cell';
+export type { DsTableGroupHeaderCellProps } from './ds-table-group-header-cell.types';

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

@@ -57,6 +57,10 @@
 	justify-content: center;
 }
 
+.groupStart {
+	border-left: vars.$group-border-width solid var(--border);
+}
+
 .headerSortContainer {
 	display: flex;
 	align-items: center;

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

@@ -11,6 +11,8 @@ import { SELECT_COLUMN_ID } from '../../utils/constants';
 import { DsStack } from '../../../ds-stack';
 import { DsTableColumnFilterPopover } from '../../filters/components/column-filter-popover';
 import type { ResolvedColumnFilter } from '../../filters/types/filter-adapter.types';
+import { DsTableGroupHeaderCell } from '../ds-table-group-header-cell';
+import { isFirstLeafColumnOfGroup } from '../../grouping';
 
 const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 	const { stickyHeader, bordered, virtualized } = useDsTableContext<TData, unknown>();
@@ -29,9 +31,24 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 					)}
 				>
 					{headerGroup.headers.map((header) => {
+						if (header.isPlaceholder) {
+							return (
+								<TableHead
+									key={header.id}
+									className={styles.headerCell}
+									style={getColumnSizeStyle(header.getSize())}
+								/>
+							);
+						}
+
+						if (header.subHeaders.length > 0) {
+							return <DsTableGroupHeaderCell key={header.id} header={header} />;
+						}
+
 						const headerStyle = getColumnSizeStyle(header.column.getSize());
 						const canSort = header.column.getCanSort();
 						const isSelectColumn = header.column.id === SELECT_COLUMN_ID;
+						const isGroupStart = isFirstLeafColumnOfGroup(header.column);
 
 						const metaFilter = header.column.columnDef.meta?.filter;
 						const resolvedFilter: ResolvedColumnFilter | undefined =
@@ -47,49 +64,48 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 									isSelectColumn && styles.selectHeaderCell,
 									resolvedFilter && styles.filterableHeader,
 									hasActiveColumnFilter && styles.filterActive,
+									isGroupStart && styles.groupStart,
 								)}
 								onClick={header.column.getToggleSortingHandler()}
 								style={headerStyle}
 							>
-								{header.isPlaceholder ? null : (
-									<div className={styles.headerSortContainer}>
-										<DsStack direction="column" justifyContent="center" width="100%">
-											{flexRender(header.column.columnDef.header, header.getContext())}
-										</DsStack>
-										{canSort && (
-											<div className={styles.pageButtonIconContainer}>
-												{{
-													asc: (
-														<DsIcon
-															icon="arrow_drop_up"
-															className={classnames(styles.pageButtonIcon, stylesShared.pageButtonIcon)}
-														/>
-													),
-													desc: (
-														<DsIcon
-															icon="arrow_drop_down"
-															className={classnames(styles.pageButtonIcon, stylesShared.pageButtonIcon)}
-														/>
-													),
-												}[header.column.getIsSorted() as string] ?? (
-													<div className={classnames(styles.pageButtonIcon, stylesShared.pageButtonIcon)} />
-												)}
-											</div>
-										)}
-										{resolvedFilter && (
-											<div className={styles.filterTriggerContainer}>
-												<DsTableColumnFilterPopover
-													hasActiveFilter={resolvedFilter.hasActiveFilter}
-													onApply={resolvedFilter.onApply}
-													onClear={resolvedFilter.onClear}
-													onCancel={resolvedFilter.onCancel}
-												>
-													{resolvedFilter.render()}
-												</DsTableColumnFilterPopover>
-											</div>
-										)}
-									</div>
-								)}
+								<div className={styles.headerSortContainer}>
+									<DsStack direction="column" justifyContent="center" width="100%">
+										{flexRender(header.column.columnDef.header, header.getContext())}
+									</DsStack>
+									{canSort && (
+										<div className={styles.pageButtonIconContainer}>
+											{{
+												asc: (
+													<DsIcon
+														icon="arrow_drop_up"
+														className={classnames(styles.pageButtonIcon, stylesShared.pageButtonIcon)}
+													/>
+												),
+												desc: (
+													<DsIcon
+														icon="arrow_drop_down"
+														className={classnames(styles.pageButtonIcon, stylesShared.pageButtonIcon)}
+													/>
+												),
+											}[header.column.getIsSorted() as string] ?? (
+												<div className={classnames(styles.pageButtonIcon, stylesShared.pageButtonIcon)} />
+											)}
+										</div>
+									)}
+									{resolvedFilter && (
+										<div className={styles.filterTriggerContainer}>
+											<DsTableColumnFilterPopover
+												hasActiveFilter={resolvedFilter.hasActiveFilter}
+												onApply={resolvedFilter.onApply}
+												onClear={resolvedFilter.onClear}
+												onCancel={resolvedFilter.onCancel}
+											>
+												{resolvedFilter.render()}
+											</DsTableColumnFilterPopover>
+										</div>
+									)}
+								</div>
 							</TableHead>
 						);
 					})}

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);
 	}
 
@@ -85,6 +85,10 @@
 	justify-content: center;
 }
 
+.groupStart {
+	border-left: vars.$group-border-width solid var(--border);
+}
+
 .tableRow .editableCell {
 	padding: 1px;
 

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

@@ -10,6 +10,7 @@ import styles from './ds-table-row.module.scss';
 import { useDsTableContext } from '../../context/ds-table-context';
 import { mergeRefs } from '../../../../utils/merge-refs';
 import { getColumnSizeStyle } from '../../utils/column-size';
+import { isFirstLeafColumnOfGroup } from '../../grouping';
 import { EXPANDER_COLUMN_ID, REORDER_COLUMN_ID, SELECT_COLUMN_ID } from '../../utils/constants';
 
 interface DsRowDragHandleProps {
@@ -50,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;
@@ -89,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)}
@@ -118,6 +121,7 @@ const DsTableRow = <TData,>({ ref, row, isSelected }: DsTableRowProps<TData>) =>
 								styles.tableCell,
 								cell.column.id === EXPANDER_COLUMN_ID && styles.expandableCell,
 								cell.column.id === SELECT_COLUMN_ID && styles.selectableCell,
+								isFirstLeafColumnOfGroup(cell.column) && styles.groupStart,
 								typeof cell.column.columnDef.editCell === 'function' && styles.editableCell,
 							)}
 							style={cellStyle}

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);
 	}
 
@@ -66,6 +66,10 @@
 	justify-content: center;
 }
 
+.groupStart {
+	border-left: vars.$group-border-width solid var(--border);
+}
+
 .expandedRowContent {
 	background-color: var(--background-secondary);