@drivenets/design-system 0.17.0 → 0.18.0

package/src/components/ds-comment-indicator/ds-comment-indicator.figma.ts

@@ -0,0 +1,32 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=19208-6889
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-comment-indicator
+// component=DsCommentIndicator
+//
+// The linked node is `Structure_CommentIndicatorV1`, the inner structure shared by the
+// indicator variants. The `type` axis (placeholder / default / action-required) maps
+// directly to the `type` prop; on the bare structure node it has no value, so it falls
+// back to `default`. For the `placeholder` state no avatar is shown; the `default` /
+// `action-required` states carry the initiator's avatar. `avatarSrc` is a photo URL
+// and `avatarName` is content — neither is derivable from Figma — so `avatarName` is
+// emitted as a placeholder for the developer to fill in (see `ds-avatar.figma.ts`).
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const type =
+	instance.getEnum('type', {
+		placeholder: 'placeholder',
+		default: 'default',
+		'action-required': 'action-required',
+		'action required': 'action-required',
+	}) ?? 'default';
+
+export default {
+	example:
+		type === 'placeholder'
+			? figma.code`<DsCommentIndicator type="placeholder" onClick={() => {}} />`
+			: figma.code`<DsCommentIndicator type="${type}" avatarName="Full Name" onClick={() => {}} />`,
+	imports: ["import { DsCommentIndicator } from '@drivenets/design-system';"],
+	id: 'ds-comment-indicator',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-comments-drawer/ds-comments-drawer.figma.ts

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=19346-10511
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-comments-drawer
+// component=DsCommentsDrawer
+//
+// `DsCommentsDrawerV1` is the comments side panel. Unlike `ds-drawer` / `ds-modal` it
+// does not compose its children through slots: the toolbar, search, and the comment
+// list are all internal, and the cards are rendered from the `comments` data array.
+// There is therefore nothing to resolve via `executeTemplate` — the snippet emits
+// `comments` / `onOpenChange` identifier placeholders for the developer to wire to
+// state. The Figma `Type` axis (`Default` / `Regular`) has no `DsCommentsDrawer` prop
+// equivalent — both render the same composition.
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsCommentsDrawer open comments={comments} onOpenChange={() => {}} />`,
+	imports: ["import { DsCommentsDrawer } from '@drivenets/design-system';"],
+	id: 'ds-comments-drawer',
+	metadata: { nestable: false },
+} satisfies figma.Template;

package/src/components/ds-select/ds-select.figma.ts

@@ -8,6 +8,7 @@ const instance = figma.selectedInstance;
 const size = instance.getEnum('Size', {
 	Default: 'default',
 	Small: 'small',
+	Large: 'large',
 });
 
 const state = instance.getEnum('State', {
@@ -22,7 +23,7 @@ const state = instance.getEnum('State', {
 
 const disabled = state === 'disable';
 
-const sizeAttr = size === 'small' ? 'size="small"' : '';
+const sizeAttr = size === 'small' || size === 'large' ? `size="${size}"` : '';
 
 // 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

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

@@ -135,7 +135,12 @@ const DsSelect = ({
 			lazyMount
 		>
 			<Select.Control
-				className={classNames(styles.control, size === 'small' && styles.small, className)}
+				className={classNames(
+					styles.control,
+					size === 'small' && styles.small,
+					size === 'large' && styles.large,
+					className,
+				)}
 				style={style}
 				onBlur={onBlur}
 				onKeyDown={(e) => {

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

@@ -2,7 +2,8 @@ import type React from 'react';
 import type { ReactNode } from 'react';
 import type { IconName } from '../ds-icon';
 
-export type SelectSize = 'default' | 'small';
+export const selectSizes = ['small', 'default', 'large'] as const;
+export type SelectSize = (typeof selectSizes)[number];
 
 export interface DsSelectOption {
 	/**

package/src/components/ds-slider/ds-slider.figma.ts

@@ -0,0 +1,29 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=29879-165
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-slider
+// component=DsSlider
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const type = instance.getEnum('type', {
+	value: 'value',
+	range: 'range',
+});
+
+const isRange = type === 'range';
+
+const attrs = [
+	'label="Input label"',
+	isRange ? 'type="range"' : '',
+	isRange ? 'defaultValue={[36, 60]}' : 'defaultValue={36}',
+	isRange ? "thumbLabels={['Minimum', 'Maximum']}" : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsSlider ${attrs} />`,
+	imports: ["import { DsSlider } from '@drivenets/design-system';"],
+	id: 'ds-slider',
+	metadata: { nestable: false },
+} satisfies figma.Template;

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

@@ -0,0 +1,104 @@
+.root {
+	--ds-slider-thumb-size: var(--md);
+	--ds-slider-thumb-size-active: var(--lg);
+	--ds-slider-thumb-border: 2px;
+	--ds-slider-thumb-border-active: 4px;
+	--ds-slider-track-height: 4px;
+	--ds-slider-focus-ring: 3px;
+	--ds-slider-radius: 9999px;
+	--ds-slider-transition: 0.2s;
+
+	display: flex;
+	flex-direction: column;
+	gap: var(--sm);
+	width: 100%;
+
+	&.small {
+		--ds-slider-thumb-size: var(--standard);
+		--ds-slider-thumb-size-active: var(--md);
+		--ds-slider-track-height: 2px;
+	}
+
+	&.large {
+		--ds-slider-thumb-size: var(--lg);
+		--ds-slider-thumb-size-active: 28px;
+		--ds-slider-thumb-border: 3px;
+		--ds-slider-thumb-border-active: 5px;
+		--ds-slider-track-height: 8px;
+	}
+
+	&[data-disabled] {
+		cursor: not-allowed;
+
+		.range {
+			background: var(--background-disable);
+		}
+
+		.thumb {
+			cursor: not-allowed;
+			border-color: var(--background-disable);
+		}
+	}
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--xs);
+	padding-bottom: var(--4xs);
+}
+
+.valueText {
+	margin-left: auto;
+	text-align: right;
+}
+
+.control {
+	position: relative;
+	display: flex;
+	align-items: center;
+	min-height: var(--ds-slider-thumb-size-active);
+}
+
+.track {
+	flex: 1;
+	height: var(--ds-slider-track-height);
+	background: var(--background-secondary-hover);
+	border-radius: var(--ds-slider-radius);
+}
+
+.range {
+	height: 100%;
+	background: var(--background-primary);
+	border-radius: var(--ds-slider-radius);
+}
+
+.thumb {
+	box-sizing: border-box;
+	width: var(--ds-slider-thumb-size);
+	height: var(--ds-slider-thumb-size);
+	background: var(--background);
+	border: var(--ds-slider-thumb-border) solid var(--background-primary);
+	border-radius: var(--ds-slider-radius);
+	outline: none;
+	cursor: pointer;
+	transition:
+		width var(--ds-slider-transition),
+		height var(--ds-slider-transition),
+		border-width var(--ds-slider-transition),
+		border-color var(--ds-slider-transition),
+		box-shadow var(--ds-slider-transition);
+
+	&:not([data-disabled]):hover,
+	&:focus-visible {
+		width: var(--ds-slider-thumb-size-active);
+		height: var(--ds-slider-thumb-size-active);
+		border-width: var(--ds-slider-thumb-border-active);
+		border-color: var(--background-primary-hover);
+	}
+
+	&:focus-visible {
+		box-shadow: 0 0 0 var(--ds-slider-focus-ring) var(--background-secondary-hover);
+	}
+}

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

@@ -0,0 +1,118 @@
+import { Slider, type SliderValueChangeDetails } from '@ark-ui/react/slider';
+import classNames from 'classnames';
+import { useControlled } from '../../utils/use-controlled';
+import { DsTypography } from '../ds-typography';
+import type { DsSliderProps, DsSliderValue } from './ds-slider.types';
+import { toArray } from './ds-slider.utils';
+import styles from './ds-slider.module.scss';
+
+/**
+ * @summary Selects a numeric value or a numeric interval by dragging thumbs along a track.
+ *
+ * Use for picking a number or interval from a known continuous range where visual
+ * adjustment beats typing (filter ranges, thresholds, capacity limits). For exact
+ * numeric entry use DsNumberInput; for a few discrete options use DsSegmentGroup.
+ */
+const DsSlider = ({
+	ref,
+	className,
+	style,
+	label,
+	type = 'value',
+	size = 'medium',
+	min = 0,
+	max = 100,
+	step = 1,
+	value,
+	defaultValue,
+	name,
+	disabled = false,
+	thumbLabels,
+	formatValue = String,
+	onValueChange,
+	onValueChangeEnd,
+}: DsSliderProps) => {
+	const isRange = type === 'range';
+
+	const controlledValue = toArray(value);
+	const fallbackValue = isRange ? [min, max] : [min];
+
+	const toPublicValue = (next: number[]): DsSliderValue =>
+		isRange ? [next[0] ?? min, next[1] ?? max] : (next[0] ?? min);
+
+	const [values, setValues] = useControlled<number[]>(
+		controlledValue,
+		controlledValue !== undefined ? (next) => onValueChange?.(toPublicValue(next)) : undefined,
+		toArray(defaultValue) ?? fallbackValue,
+	);
+
+	const handleValueChange = (details: SliderValueChangeDetails) => {
+		setValues(details.value);
+
+		if (controlledValue === undefined) {
+			onValueChange?.(toPublicValue(details.value));
+		}
+	};
+
+	const valueText = isRange
+		? `${formatValue(values[0] ?? min)}-${formatValue(values[1] ?? max)}`
+		: formatValue(values[0] ?? min);
+
+	const textColor = disabled ? 'disabled' : 'main';
+
+	const thumbAriaLabels = isRange ? thumbLabels : label ? [label] : thumbLabels;
+
+	const rootClass = classNames(
+		styles.root,
+		{
+			[styles.small]: size === 'small',
+			[styles.large]: size === 'large',
+		},
+		className,
+	);
+
+	return (
+		<Slider.Root
+			ref={ref}
+			className={rootClass}
+			style={style}
+			value={values}
+			min={min}
+			max={max}
+			step={step}
+			name={name}
+			disabled={disabled}
+			aria-label={thumbAriaLabels}
+			onValueChange={handleValueChange}
+			onValueChangeEnd={(details) => onValueChangeEnd?.(toPublicValue(details.value))}
+		>
+			<div className={styles.header}>
+				{label && (
+					<DsTypography variant="body-sm-md" color={textColor}>
+						{label}
+					</DsTypography>
+				)}
+
+				<DsTypography variant="body-sm-md" color={textColor} className={styles.valueText}>
+					{valueText}
+				</DsTypography>
+			</div>
+
+			<Slider.Control className={styles.control}>
+				<Slider.Track className={styles.track}>
+					<Slider.Range className={styles.range} />
+				</Slider.Track>
+
+				{values.map((_, index) => (
+					<Slider.Thumb key={index} index={index} className={styles.thumb}>
+						<Slider.HiddenInput />
+					</Slider.Thumb>
+				))}
+			</Slider.Control>
+		</Slider.Root>
+	);
+};
+
+DsSlider.displayName = 'DsSlider';
+
+export default DsSlider;

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

@@ -0,0 +1,102 @@
+import type { CSSProperties, Ref } from 'react';
+
+export const sliderTypes = ['value', 'range'] as const;
+export type DsSliderType = (typeof sliderTypes)[number];
+
+export const sliderSizes = ['small', 'medium', 'large'] as const;
+export type DsSliderSize = (typeof sliderSizes)[number];
+
+/**
+ * Value for a `value` slider (single number) or a `range` slider ([min, max] tuple).
+ */
+export type DsSliderValue = number | [number, number];
+
+/**
+ * Props for the DsSlider component.
+ */
+export type DsSliderProps = {
+	/**
+	 * Forwarded ref for the slider root element.
+	 */
+	ref?: Ref<HTMLDivElement>;
+
+	className?: string;
+
+	style?: CSSProperties;
+
+	/**
+	 * Visible label rendered above the track. Becomes the accessible name of the control.
+	 */
+	label?: string;
+
+	/**
+	 * Selection mode: a single value or a `[min, max]` interval.
+	 * @default 'value'
+	 */
+	type?: DsSliderType;
+
+	/**
+	 * Drives thumb and track sizing together (S/M/L → 16/20/24px thumb, 2/4/8px track).
+	 * Accepts a responsive value (e.g. `{ md: 'small', lg: 'medium' }`).
+	 * @default 'medium'
+	 */
+	size?: DsSliderSize;
+
+	/**
+	 * Lowest selectable value.
+	 * @default 0
+	 */
+	min?: number;
+
+	/**
+	 * Highest selectable value.
+	 * @default 100
+	 */
+	max?: number;
+
+	/**
+	 * Granularity that the value snaps to. Must be greater than 0.
+	 * Accepts a responsive value (e.g. `{ md: 5, lg: 1 }`).
+	 * @default 1
+	 */
+	step?: number;
+
+	/**
+	 * Controlled value. A number for `type="value"`, a `[min, max]` tuple for `type="range"`.
+	 */
+	value?: DsSliderValue;
+
+	/**
+	 * Uncontrolled initial value. Defaults to `min` for `value` and `[min, max]` for `range`.
+	 */
+	defaultValue?: DsSliderValue;
+
+	/**
+	 * Form field name applied to the hidden inputs.
+	 */
+	name?: string;
+
+	disabled?: boolean;
+
+	/**
+	 * Accessible name per thumb. Required for `type="range"` (e.g. `['Minimum', 'Maximum']`).
+	 * Accepts a responsive value (e.g. `{ md: ['Min', 'Max'], lg: ['Minimum', 'Maximum'] }`).
+	 */
+	thumbLabels?: string[];
+
+	/**
+	 * Formats each number shown in the output above the track. Range values are joined with `-`.
+	 * @default String
+	 */
+	formatValue?: (value: number) => string;
+
+	/**
+	 * Called live while the value changes (drag or keyboard).
+	 */
+	onValueChange?: (value: DsSliderValue) => void;
+
+	/**
+	 * Called once an interaction settles (pointer released or key committed).
+	 */
+	onValueChangeEnd?: (value: DsSliderValue) => void;
+};

package/src/components/ds-slider/ds-slider.utils.ts

@@ -0,0 +1,14 @@
+import type { DsSliderValue } from './ds-slider.types';
+
+/**
+ * Normalizes the public value (a number or a `[min, max]` tuple) into the
+ * `number[]` shape Ark's slider works with. Returns `undefined` when no value
+ * is provided so controlled/uncontrolled detection stays intact.
+ */
+export const toArray = (value: DsSliderValue | undefined): number[] | undefined => {
+	if (value === undefined) {
+		return undefined;
+	}
+
+	return Array.isArray(value) ? value : [value];
+};

package/src/components/ds-slider/index.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+
+import { withResponsiveProps } from '../../utils/responsive';
+import DsSliderBase from './ds-slider';
+
+export const DsSlider = withResponsiveProps(DsSliderBase, ['size', 'step', 'thumbLabels']);
+
+DsSlider.displayName = 'DsSlider';
+
+export type DsSliderProps = ComponentProps<typeof DsSlider>;
+export type { DsSliderValue, DsSliderType, DsSliderSize } from './ds-slider.types';

package/src/components/ds-smart-tabs/figma/ds-smart-tabs-tab.figma.ts

@@ -0,0 +1,83 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15707-16204
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-smart-tabs
+// component=DsSmartTabs.Tab
+//
+// `Part_SmartTabV1` maps to `DsSmartTabs.Tab`, resolved inside the group's
+// `Smart tabs slot` (nestable). Each item = colored icon badge + label + count.
+//
+// Variant divergence — the Figma `state` axis (selected/unselected/hover/focus)
+// is mostly visual: selection is owned by `DsSmartTabs` (`activeTab`), and
+// hover/focus are driven by CSS. Only `disabled` maps to a `DsSmartTabs.Tab` prop.
+//
+// `color` is intentionally not emitted: it is a fixed semantic per-category value
+// (encoded in the nested badge's `category` variant, not a tab-level property) and
+// the category→color mapping is owned by the design system, so the developer sets
+// it explicitly. `value` is data, not derivable from Figma, so slugify the label
+// as a sensible default for the developer to confirm/replace.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state = instance.getEnum('state', {
+	selected: 'selected',
+	unselected: 'unselected',
+	hover: 'hover',
+	focus: 'focus',
+	disabled: 'disabled',
+});
+
+// Label and count are plain text layers (not component properties): the first
+// text child is the label, the second is the right-aligned count.
+const texts = instance.children.filter((child): child is figma.TextHandle => child.type === 'TEXT');
+const label = texts[0]?.textContent.trim() || 'Label';
+const count = texts[1]?.textContent.trim() ?? '';
+
+const value = label
+	.toLowerCase()
+	.replace(/[^a-z0-9]+/g, '-')
+	.replace(/^-+|-+$/g, '');
+
+// The badge glyph maps to `DsSmartTabs.Tab.icon` (an icon-name string). Prefer a
+// connected ds-icon's Code Connect id and fall back to the glyph layer name.
+const resolveIcon = (): string => {
+	const node = instance
+		.findConnectedInstances((n) => n.codeConnectId()?.startsWith('ds-icon-') ?? false, {
+			traverseInstances: true,
+		})
+		.find((n): n is figma.InstanceHandle => n.type === 'INSTANCE');
+
+	const id = node?.codeConnectId();
+	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 (node?.name ?? 'circle')
+		.replace(/^DAP_GM_[OS]_/, '')
+		.replace(/^DAP_/, '')
+		.replace(/[\s/]+/g, '_')
+		.toLowerCase();
+};
+
+// `content` is number|string and is not auto-formatted: emit a numeric literal for
+// a plain integer, otherwise keep the pre-formatted string (e.g. "1,273").
+const contentAttr = /^\d+$/.test(count) ? `content={${count}}` : `content="${count}"`;
+
+const attrs = [
+	`value="${value}"`,
+	`label="${label}"`,
+	`icon="${resolveIcon()}"`,
+	contentAttr,
+	state === 'disabled' ? 'disabled' : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsSmartTabs.Tab ${attrs} />`,
+	imports: ["import { DsSmartTabs } from '@drivenets/design-system';"],
+	id: 'ds-smart-tabs-tab',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-smart-tabs/figma/ds-smart-tabs.figma.ts

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=34864-129238
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-smart-tabs
+// component=DsSmartTabs
+//
+// `DsSmartTabsV1` is the smart-tabs filter row. It maps to `DsSmartTabs`, whose
+// `Smart tabs slot` resolves each item via its own template (`DsSmartTabs.Tab`),
+// so added/removed tabs stay in sync.
+//
+// `activeTab` and `onTabClick` are the controlled selection pair. Figma models
+// only the row chrome — selection state is authored in code, so the snippet emits
+// identifier placeholders for the developer to wire to component state.
+import figma from 'figma';
+
+const tabs = figma.selectedInstance.getSlot('Smart tabs slot');
+
+export default {
+	example: figma.code`<DsSmartTabs activeTab={activeTab} onTabClick={setActiveTab}>
+	${tabs}
+</DsSmartTabs>`,
+	imports: ["import { DsSmartTabs } from '@drivenets/design-system';"],
+	id: 'ds-smart-tabs',
+	metadata: { nestable: false },
+} satisfies figma.Template;

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

@@ -3,11 +3,15 @@
 
 .groupHeaderCell {
 	@include typography.body-sm-md;
+	position: relative;
 	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);
+
+	&:not(:first-child) {
+		border-left: vars.$group-border-width solid var(--border);
+	}
 }
 
 .groupHeaderContent {

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

@@ -3,21 +3,27 @@ import { DsButtonV3 } from '../../../ds-button-v3';
 import { TableHead } from '../core-table';
 import { useDsTableContext } from '../../context/ds-table-context';
 import { getGroupColumnSizeStyle } from '../../grouping';
+import { getResizableHeaderStyle } from '../../utils/column-size';
 import { defaultDsTableLocale } from '../../ds-table.types';
+import { DsTableResizeHandle } from '../ds-table-resize-handle';
 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 { collapsedColumnGroups, onToggleColumnGroup, locale, resizableColumns, resizeSizingReady } =
+		useDsTableContext<TData, TValue>();
 
 	const groupId = header.column.id;
 	const visibleLeafColumns = header.column.getLeafColumns().filter((leaf) => leaf.getIsVisible());
-	const groupStyle = getGroupColumnSizeStyle(visibleLeafColumns);
+	const groupStyle = resizeSizingReady
+		? getResizableHeaderStyle(header.id)
+		: getGroupColumnSizeStyle(visibleLeafColumns, {});
 
 	const isCollapsible = header.column.columnDef.meta?.group?.collapsible ?? false;
 	const isCollapsed = collapsedColumnGroups?.includes(groupId) ?? false;
+	const canResize = resizableColumns && !isCollapsed && header.column.getCanResize();
 
 	const mergedLocale = { ...defaultDsTableLocale, ...locale };
 	const toggleLabel = isCollapsed ? mergedLocale.expandColumnGroup : mergedLocale.collapseColumnGroup;
@@ -25,7 +31,12 @@ export const DsTableGroupHeaderCell = <TData, TValue>({
 	const handleToggle = () => onToggleColumnGroup?.(groupId);
 
 	return (
-		<TableHead className={styles.groupHeaderCell} style={groupStyle} colSpan={header.colSpan}>
+		<TableHead
+			data-column-id={groupId}
+			className={styles.groupHeaderCell}
+			style={groupStyle}
+			colSpan={header.colSpan}
+		>
 			<div className={styles.groupHeaderContent}>
 				<span className={styles.groupLabel}>
 					{flexRender(header.column.columnDef.header, header.getContext())}
@@ -43,6 +54,7 @@ export const DsTableGroupHeaderCell = <TData, TValue>({
 					/>
 				)}
 			</div>
+			{canResize && <DsTableResizeHandle header={header} />}
 		</TableHead>
 	);
 };