@drivenets/design-system 0.18.1 → 0.20.0

package/src/components/ds-bulk-actions/ds-bulk-actions.unit.test.ts

@@ -0,0 +1,195 @@
+/* eslint-disable vitest/expect-expect */
+import { describe, expect, expectTypeOf, it } from 'vitest';
+import type {
+	DsBulkActionsItemProps,
+	DsBulkActionsMenuEntry,
+	DsBulkActionsProps,
+} from './ds-bulk-actions.types';
+import { computeBulkActionsOverflow } from './hooks/compute-bulk-actions-overflow';
+
+type ClickHandler = () => void;
+
+const chrome = {
+	badgeWidth: 60,
+	dismissWidth: 40,
+	labelWidth: 120,
+	gap: 4,
+	moreWidth: 70,
+};
+
+describe('DsBulkActionsItemProps discriminated union', () => {
+	it('allows click items with icon, label, and onClick', () => {
+		expectTypeOf<{ icon: 'edit'; label: string; onClick: ClickHandler }>().toExtend<DsBulkActionsItemProps>();
+		expectTypeOf<{
+			icon: 'edit';
+			label: string;
+			onClick: ClickHandler;
+			disabled: true;
+			width: 120;
+		}>().toExtend<DsBulkActionsItemProps>();
+		expectTypeOf<{
+			icon: 'edit';
+			label: string;
+			onClick: ClickHandler;
+			width: 'fixed';
+		}>().toExtend<DsBulkActionsItemProps>();
+		expectTypeOf<{
+			icon: 'edit';
+			label: string;
+			onClick: ClickHandler;
+			width: 'fit-content';
+		}>().toExtend<DsBulkActionsItemProps>();
+	});
+
+	it('allows menu items with icon, label, and menu', () => {
+		expectTypeOf<{
+			icon: 'share';
+			label: string;
+			menu: DsBulkActionsMenuEntry[];
+		}>().toExtend<DsBulkActionsItemProps>();
+		expectTypeOf<{
+			icon: 'share';
+			label: string;
+			disabled: true;
+			menu: Array<
+				| {
+						value: string;
+						label: string;
+						icon: 'mail';
+						onSelect: ClickHandler;
+						disabled: false;
+						variant: 'error';
+				  }
+				| {
+						value: string;
+						label: string;
+						menu: Array<{ value: string; label: string; onSelect: ClickHandler }>;
+				  }
+			>;
+		}>().toExtend<DsBulkActionsItemProps>();
+	});
+
+	it('rejects mixing onClick with menu', () => {
+		expectTypeOf<{
+			icon: 'edit';
+			label: string;
+			onClick: ClickHandler;
+			menu: DsBulkActionsMenuEntry[];
+		}>().not.toExtend<DsBulkActionsItemProps>();
+	});
+
+	it('rejects children composition', () => {
+		expectTypeOf<{ children: string }>().not.toExtend<DsBulkActionsItemProps>();
+		expectTypeOf<{
+			icon: 'edit';
+			label: string;
+			onClick: ClickHandler;
+			children: string;
+		}>().not.toExtend<DsBulkActionsItemProps>();
+		expectTypeOf<{
+			icon: 'share';
+			label: string;
+			menu: DsBulkActionsMenuEntry[];
+			children: string;
+		}>().not.toExtend<DsBulkActionsItemProps>();
+	});
+
+	it('requires icon, label, and either onClick or menu', () => {
+		expectTypeOf<{ icon: 'edit'; label: string }>().not.toExtend<DsBulkActionsItemProps>();
+		expectTypeOf<{ icon: 'edit'; onClick: ClickHandler }>().not.toExtend<DsBulkActionsItemProps>();
+		expectTypeOf<{ label: string; onClick: ClickHandler }>().not.toExtend<DsBulkActionsItemProps>();
+		expectTypeOf<{ icon: 'share'; menu: DsBulkActionsMenuEntry[] }>().not.toExtend<DsBulkActionsItemProps>();
+	});
+});
+
+describe('DsBulkActionsMenuEntry', () => {
+	it('allows a leaf with onSelect or a branch with nested menu, not both', () => {
+		expectTypeOf<{
+			value: string;
+			label: string;
+			icon: 'mail';
+			onSelect: ClickHandler;
+			disabled: true;
+			variant: 'error';
+		}>().toExtend<DsBulkActionsMenuEntry>();
+		expectTypeOf<{
+			value: string;
+			label: string;
+			menu: Array<{ value: string; label: string; onSelect: ClickHandler }>;
+		}>().toExtend<DsBulkActionsMenuEntry>();
+		expectTypeOf<{ value: string; label: string }>().toExtend<DsBulkActionsMenuEntry>();
+		expectTypeOf<{
+			value: string;
+			label: string;
+			onSelect: ClickHandler;
+			menu: DsBulkActionsMenuEntry[];
+		}>().not.toExtend<DsBulkActionsMenuEntry>();
+	});
+});
+
+describe('DsBulkActionsProps', () => {
+	it('accepts children action slots, menuPlacement, and locale.moreActionsLabel', () => {
+		expectTypeOf<{
+			selectedCount: number;
+			onClearSelection: ClickHandler;
+			menuPlacement: 'top';
+			locale: { moreActionsLabel: string };
+		}>().toExtend<DsBulkActionsProps>();
+
+		expectTypeOf<DsBulkActionsProps>().toHaveProperty('children');
+		expectTypeOf<DsBulkActionsProps>().toHaveProperty('menuPlacement');
+		expectTypeOf<DsBulkActionsProps>().not.toHaveProperty('actions');
+	});
+});
+
+describe('computeBulkActionsOverflow', () => {
+	it('keeps every item visible when the bar is wide enough', () => {
+		expect(
+			computeBulkActionsOverflow({
+				...chrome,
+				containerWidth: 600,
+				itemWidths: [70, 70, 70, 70],
+			}),
+		).toEqual({ visibleCount: 4, showMore: false, summaryLabelHidden: false });
+	});
+
+	it('collapses rightmost items into More and keeps the summary label', () => {
+		expect(
+			computeBulkActionsOverflow({
+				...chrome,
+				containerWidth: 450,
+				itemWidths: [70, 70, 70, 70, 70],
+			}),
+		).toEqual({ visibleCount: 2, showMore: true, summaryLabelHidden: false });
+	});
+
+	it('hides the summary label only after collapsing to one visible action', () => {
+		expect(
+			computeBulkActionsOverflow({
+				...chrome,
+				containerWidth: 250,
+				itemWidths: [70, 70, 70, 70, 70],
+			}),
+		).toEqual({ visibleCount: 1, showMore: true, summaryLabelHidden: true });
+	});
+
+	it('does not render More when a single item remains', () => {
+		expect(
+			computeBulkActionsOverflow({
+				...chrome,
+				containerWidth: 200,
+				itemWidths: [70],
+			}),
+		).toEqual({ visibleCount: 1, showMore: false, summaryLabelHidden: true });
+	});
+
+	it('returns no actions when the bar has none', () => {
+		expect(
+			computeBulkActionsOverflow({
+				...chrome,
+				containerWidth: 400,
+				itemWidths: [],
+			}),
+		).toEqual({ visibleCount: 0, showMore: false, summaryLabelHidden: false });
+	});
+});

package/src/components/ds-bulk-actions/ds-bulk-actions.utils.ts

@@ -0,0 +1,91 @@
+import {
+	Children,
+	Fragment,
+	isValidElement,
+	type CSSProperties,
+	type ReactElement,
+	type ReactNode,
+} from 'react';
+import type {
+	BulkActionsItemWidthMode,
+	DsBulkActionsItemProps,
+	DsBulkActionsItemWidth,
+	DsBulkActionsMenuEntry,
+} from './ds-bulk-actions.types';
+
+const ITEM_WIDTH_CUSTOM_VAR = '--ds-bulk-actions-item-width';
+
+export interface ItemWidthLayout {
+	mode: BulkActionsItemWidthMode | 'custom';
+	buttonStyle?: CSSProperties;
+}
+
+export const resolveItemWidth = (width?: DsBulkActionsItemWidth): ItemWidthLayout => {
+	if (width === undefined || width === 'fixed') {
+		return { mode: 'fixed' };
+	}
+
+	if (width === 'fit-content') {
+		return { mode: 'fit-content' };
+	}
+
+	return {
+		mode: 'custom',
+		buttonStyle: { [ITEM_WIDTH_CUSTOM_VAR]: `${String(width)}px` } as CSSProperties,
+	};
+};
+
+export const isMenuItemProps = (
+	props: DsBulkActionsItemProps,
+): props is Extract<DsBulkActionsItemProps, { menu: DsBulkActionsMenuEntry[] }> =>
+	'menu' in props && props.menu !== undefined;
+
+export const isSubmenuEntry = (
+	entry: DsBulkActionsMenuEntry,
+): entry is Extract<DsBulkActionsMenuEntry, { menu: DsBulkActionsMenuEntry[] }> =>
+	'menu' in entry && entry.menu !== undefined;
+
+export const isItemElement = (child: ReactNode): child is ReactElement<DsBulkActionsItemProps> =>
+	isValidElement(child) &&
+	typeof child.type === 'function' &&
+	'displayName' in child.type &&
+	child.type.displayName === 'DsBulkActions.Item';
+
+export const getBulkActionItems = (children: ReactNode): ReactElement<DsBulkActionsItemProps>[] => {
+	const items: ReactElement<DsBulkActionsItemProps>[] = [];
+
+	Children.forEach(children, (child) => {
+		if (isItemElement(child)) {
+			items.push(child);
+			return;
+		}
+
+		if (isValidElement(child) && child.type === Fragment) {
+			items.push(...getBulkActionItems((child.props as { children?: ReactNode }).children));
+		}
+	});
+
+	return items;
+};
+
+export const itemToOverflowEntry = (item: DsBulkActionsItemProps, index: number): DsBulkActionsMenuEntry => {
+	const { icon, label, disabled } = item;
+
+	if (isMenuItemProps(item)) {
+		return {
+			value: `overflow-${String(index)}`,
+			label,
+			icon,
+			disabled,
+			menu: item.menu,
+		};
+	}
+
+	return {
+		value: `overflow-${String(index)}`,
+		label,
+		icon,
+		disabled,
+		onSelect: item.onClick,
+	};
+};

package/src/components/ds-bulk-actions/ds-bulk-actions.utils.unit.test.ts

@@ -0,0 +1,134 @@
+import { createElement, Fragment, type FunctionComponent } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import type { DsBulkActionsItemProps } from './ds-bulk-actions.types';
+import {
+	getBulkActionItems,
+	isItemElement,
+	isSubmenuEntry,
+	itemToOverflowEntry,
+	resolveItemWidth,
+} from './ds-bulk-actions.utils';
+
+const StubItem: FunctionComponent<DsBulkActionsItemProps> = () => null;
+StubItem.displayName = 'DsBulkActions.Item';
+
+const createItem = (props: DsBulkActionsItemProps, key?: string) =>
+	createElement(StubItem, { key, ...props });
+
+const clickItem: DsBulkActionsItemProps = { icon: 'edit', label: 'Edit', onClick: () => {} };
+
+describe('resolveItemWidth', () => {
+	it('uses the fixed column when width is omitted', () => {
+		expect(resolveItemWidth()).toEqual({ mode: 'fixed' });
+	});
+
+	it('uses the fixed column when width is fixed', () => {
+		expect(resolveItemWidth('fixed')).toEqual({ mode: 'fixed' });
+	});
+
+	it('hugs the label when width is fit-content', () => {
+		expect(resolveItemWidth('fit-content')).toEqual({ mode: 'fit-content' });
+	});
+
+	it('sets a custom pixel width via CSS variable', () => {
+		expect(resolveItemWidth(120)).toEqual({
+			mode: 'custom',
+			buttonStyle: { '--ds-bulk-actions-item-width': '120px' },
+		});
+	});
+});
+
+describe('itemToOverflowEntry', () => {
+	it('maps a click item to a leaf entry that keeps onSelect', () => {
+		const onClick = vi.fn();
+		const item: DsBulkActionsItemProps = {
+			icon: 'edit',
+			label: 'Edit',
+			disabled: true,
+			onClick,
+		};
+
+		expect(itemToOverflowEntry(item, 2)).toEqual({
+			value: 'overflow-2',
+			label: 'Edit',
+			icon: 'edit',
+			disabled: true,
+			onSelect: onClick,
+		});
+	});
+
+	it('maps a menu item to a branch entry that keeps the nested menu', () => {
+		const menu = [{ value: 'mail', label: 'Mail', icon: 'mail' as const }];
+		const item: DsBulkActionsItemProps = {
+			icon: 'share',
+			label: 'Share',
+			menu,
+		};
+
+		expect(itemToOverflowEntry(item, 0)).toEqual({
+			value: 'overflow-0',
+			label: 'Share',
+			icon: 'share',
+			disabled: undefined,
+			menu,
+		});
+	});
+});
+
+describe('isItemElement', () => {
+	it('matches an element whose type carries the Item displayName', () => {
+		expect(isItemElement(createItem(clickItem))).toBe(true);
+	});
+
+	it('rejects other elements, strings, and nullish children', () => {
+		expect(isItemElement(createElement('div'))).toBe(false);
+		expect(isItemElement('Notify')).toBe(false);
+		expect(isItemElement(null)).toBe(false);
+		expect(isItemElement(undefined)).toBe(false);
+	});
+});
+
+describe('getBulkActionItems', () => {
+	it('collects only Item elements and drops other children', () => {
+		const first = createItem(clickItem, 'a');
+		const second = createItem({ icon: 'delete_outline', label: 'Delete', onClick: () => {} }, 'b');
+
+		const items = getBulkActionItems([first, 'text', createElement('span'), second, null]);
+
+		expect(items).toEqual([first, second]);
+	});
+
+	it('flattens Item elements nested inside fragments', () => {
+		const first = createItem(clickItem, 'a');
+		const second = createItem({ icon: 'share', label: 'Share', onClick: () => {} }, 'b');
+		const fragment = createElement(Fragment, null, second);
+
+		expect(getBulkActionItems([first, fragment])).toEqual([first, second]);
+	});
+
+	it('returns an empty array when there are no Item children', () => {
+		expect(getBulkActionItems(createElement('div'))).toEqual([]);
+	});
+});
+
+describe('isSubmenuEntry', () => {
+	it('identifies a branch entry with a nested menu', () => {
+		expect(
+			isSubmenuEntry({
+				value: 'share',
+				label: 'Share',
+				menu: [{ value: 'mail', label: 'Mail' }],
+			}),
+		).toBe(true);
+	});
+
+	it('rejects a leaf entry with onSelect', () => {
+		expect(
+			isSubmenuEntry({
+				value: 'edit',
+				label: 'Edit',
+				onSelect: () => undefined,
+			}),
+		).toBe(false);
+	});
+});

package/src/components/ds-bulk-actions/hooks/compute-bulk-actions-overflow.ts

@@ -0,0 +1,85 @@
+const FIT_EPSILON_PX = 0.5;
+const MIN_VISIBLE_ACTIONS = 1;
+const STACK_GAP_COUNT_WITH_LABEL = 3;
+const STACK_GAP_COUNT_WITHOUT_LABEL = 2;
+
+export interface BulkActionsOverflowMetrics {
+	containerWidth: number;
+	badgeWidth: number;
+	dismissWidth: number;
+	labelWidth: number;
+	itemWidths: number[];
+	moreWidth: number;
+	gap: number;
+}
+
+export interface BulkActionsOverflowState {
+	visibleCount: number;
+	showMore: boolean;
+	summaryLabelHidden: boolean;
+}
+
+const sum = (values: number[]): number => values.reduce((total, value) => total + value, 0);
+
+const chromeWidth = ({
+	badgeWidth,
+	dismissWidth,
+	labelWidth,
+	gap,
+	hideLabel,
+}: Pick<BulkActionsOverflowMetrics, 'badgeWidth' | 'dismissWidth' | 'labelWidth' | 'gap'> & {
+	hideLabel: boolean;
+}): number => {
+	const gapCount = hideLabel ? STACK_GAP_COUNT_WITHOUT_LABEL : STACK_GAP_COUNT_WITH_LABEL;
+	const labelPart = hideLabel ? 0 : labelWidth;
+
+	return badgeWidth + dismissWidth + labelPart + gapCount * gap;
+};
+
+const fits = (usedWidth: number, containerWidth: number): boolean =>
+	usedWidth <= containerWidth + FIT_EPSILON_PX;
+
+/**
+ * First-N visible / rightmost overflow, then hide the summary label as a last resort.
+ * Dismiss and the count badge are never collapsed.
+ */
+export const computeBulkActionsOverflow = ({
+	containerWidth,
+	badgeWidth,
+	dismissWidth,
+	labelWidth,
+	itemWidths,
+	moreWidth,
+	gap,
+}: BulkActionsOverflowMetrics): BulkActionsOverflowState => {
+	const itemCount = itemWidths.length;
+
+	if (itemCount === 0) {
+		return { visibleCount: 0, showMore: false, summaryLabelHidden: false };
+	}
+
+	const chrome = {
+		badgeWidth,
+		dismissWidth,
+		labelWidth,
+		gap,
+	};
+
+	if (fits(chromeWidth({ ...chrome, hideLabel: false }) + sum(itemWidths), containerWidth)) {
+		return { visibleCount: itemCount, showMore: false, summaryLabelHidden: false };
+	}
+
+	for (let visibleCount = itemCount - 1; visibleCount >= MIN_VISIBLE_ACTIONS; visibleCount--) {
+		const actionsWidth = sum(itemWidths.slice(0, visibleCount)) + moreWidth;
+
+		if (fits(chromeWidth({ ...chrome, hideLabel: false }) + actionsWidth, containerWidth)) {
+			return { visibleCount, showMore: true, summaryLabelHidden: false };
+		}
+	}
+
+	return {
+		visibleCount: MIN_VISIBLE_ACTIONS,
+		showMore: itemCount > MIN_VISIBLE_ACTIONS,
+		summaryLabelHidden: true,
+	};
+};

package/src/components/ds-bulk-actions/hooks/use-bulk-actions-overflow.ts

@@ -0,0 +1,153 @@
+import { type CSSProperties, type RefObject, useLayoutEffect, useState } from 'react';
+import { computeBulkActionsOverflow, type BulkActionsOverflowState } from './compute-bulk-actions-overflow';
+
+const allVisible = (itemCount: number): BulkActionsOverflowState => ({
+	visibleCount: itemCount,
+	showMore: false,
+	summaryLabelHidden: false,
+});
+
+const sameOverflowState = (prev: BulkActionsOverflowState, next: BulkActionsOverflowState): boolean =>
+	prev.visibleCount === next.visibleCount &&
+	prev.showMore === next.showMore &&
+	prev.summaryLabelHidden === next.summaryLabelHidden;
+
+const isConstrainedCssLength = (value: CSSProperties['width']): boolean => {
+	if (value === undefined) {
+		return false;
+	}
+
+	return (
+		value !== 'auto' &&
+		value !== 'fit-content' &&
+		value !== 'max-content' &&
+		value !== 'min-content' &&
+		value !== 'none'
+	);
+};
+
+// A bare `width` set via className cannot be detected here: the default
+// `width: fit-content` also resolves to a pixel value, so computed `width` is
+// ambiguous. Consumers must bound the toolbar via `style.width`, `style.maxWidth`,
+// or a CSS `max-width` (detected below) to enable overflow.
+const hasExplicitWidthConstraint = (element: HTMLElement, style?: CSSProperties): boolean => {
+	if (isConstrainedCssLength(style?.width) || isConstrainedCssLength(style?.maxWidth)) {
+		return true;
+	}
+
+	return getComputedStyle(element).maxWidth !== 'none';
+};
+
+interface UseBulkActionsOverflowOptions {
+	active: boolean;
+	itemCount: number;
+	style?: CSSProperties;
+	containerRef: RefObject<HTMLElement | null>;
+	stackRef: RefObject<HTMLElement | null>;
+	badgeRef: RefObject<HTMLElement | null>;
+	dismissRef: RefObject<HTMLElement | null>;
+	measureRef: RefObject<HTMLElement | null>;
+}
+
+export const useBulkActionsOverflow = ({
+	active,
+	itemCount,
+	style,
+	containerRef,
+	stackRef,
+	badgeRef,
+	dismissRef,
+	measureRef,
+}: UseBulkActionsOverflowOptions): BulkActionsOverflowState => {
+	const [state, setState] = useState<BulkActionsOverflowState>(() => allVisible(itemCount));
+	const styleWidth = style?.width;
+	const styleMaxWidth = style?.maxWidth;
+
+	useLayoutEffect(() => {
+		if (!active) {
+			return;
+		}
+
+		const container = containerRef.current;
+
+		if (!container) {
+			return;
+		}
+
+		const constraintStyle = { width: styleWidth, maxWidth: styleMaxWidth };
+		let observerRafId = 0;
+
+		const measureLayout = () => {
+			if (!hasExplicitWidthConstraint(container, constraintStyle) || itemCount === 0) {
+				setState((prev) => {
+					const next = allVisible(itemCount);
+					return sameOverflowState(prev, next) ? prev : next;
+				});
+				return;
+			}
+
+			const stack = stackRef.current;
+			const badge = badgeRef.current;
+			const dismiss = dismissRef.current;
+			const measure = measureRef.current;
+
+			if (!stack || !badge || !dismiss || !measure) {
+				return;
+			}
+
+			const itemWidths = Array.from(
+				measure.querySelectorAll<HTMLElement>('[data-overflow-measure="item"]'),
+			).map((el) => el.getBoundingClientRect().width);
+			const moreEl = measure.querySelector<HTMLElement>('[data-overflow-measure="more"]');
+			const labelEl = measure.querySelector<HTMLElement>('[data-overflow-measure="label"]');
+
+			if (!moreEl || !labelEl || itemWidths.length !== itemCount) {
+				return;
+			}
+
+			const gap = parseFloat(getComputedStyle(stack).columnGap || getComputedStyle(stack).gap) || 0;
+
+			const next = computeBulkActionsOverflow({
+				containerWidth: container.getBoundingClientRect().width,
+				badgeWidth: badge.getBoundingClientRect().width,
+				dismissWidth: dismiss.getBoundingClientRect().width,
+				labelWidth: labelEl.getBoundingClientRect().width,
+				itemWidths,
+				moreWidth: moreEl.getBoundingClientRect().width,
+				gap,
+			});
+
+			setState((prev) => (sameOverflowState(prev, next) ? prev : next));
+		};
+
+		measureLayout();
+
+		const observer = new ResizeObserver(() => {
+			cancelAnimationFrame(observerRafId);
+			observerRafId = requestAnimationFrame(measureLayout);
+		});
+
+		observer.observe(container);
+
+		if (measureRef.current) {
+			observer.observe(measureRef.current);
+		}
+
+		return () => {
+			cancelAnimationFrame(observerRafId);
+			observer.disconnect();
+		};
+	}, [
+		active,
+		badgeRef,
+		containerRef,
+		dismissRef,
+		itemCount,
+		measureRef,
+		stackRef,
+		styleMaxWidth,
+		styleWidth,
+	]);
+
+	return state;
+};

package/src/components/ds-bulk-actions/index.ts

@@ -0,0 +1,18 @@
+export { default as DsBulkActions } from './ds-bulk-actions';
+export type {
+	DsBulkActionsItemProps,
+	DsBulkActionsItemWidth,
+	DsBulkActionsLocale,
+	DsBulkActionsMenuEntry,
+	DsBulkActionsProps,
+	BulkActionsItemWidthMode,
+	BulkActionsMenuItemVariant,
+	BulkActionsMenuPlacement,
+	BulkActionsPlacement,
+} from './ds-bulk-actions.types';
+export {
+	bulkActionsItemWidthModes,
+	bulkActionsMenuItemVariants,
+	bulkActionsMenuPlacements,
+	bulkActionsPlacements,
+} from './ds-bulk-actions.types';

package/src/components/ds-button-v3/ds-button-v3.module.scss

@@ -164,7 +164,7 @@ $focus-ring-width: 2px;
 
 .root[data-color='default'][data-variant='secondary'] {
 	background-color: var(--background-action-secondary);
-	color: var(--font-main);
+	color: var(--font-action);
 	border-color: var(--border);
 
 	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
@@ -202,7 +202,7 @@ $focus-ring-width: 2px;
 
 .root[data-color='default'][data-variant='tertiary'] {
 	background-color: transparent;
-	color: var(--font-main);
+	color: var(--font-action);
 	border-color: transparent;
 
 	&:hover:not(:disabled):not(:active):not([data-selected='true']) {

package/src/components/ds-catalog-layout/ds-catalog-layout.figma.ts

@@ -32,7 +32,7 @@ const contentHeader =
 
 const contentBody =
 	type === 'empty'
-		? '{/* EmptyStateCard + DsButtonV3 (no data / clear filters) */}'
+		? '{/* DsTable + DsEmptyState (no data / no matches) */}'
 		: '{/* DsTable with data rows */}';
 
 export default {