@drivenets/design-system 0.11.1 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -68,6 +68,7 @@
     "@rolldown/plugin-babel": "^0.2.2",
     "@storybook/addon-a11y": "^10.2.19",
     "@storybook/addon-docs": "^10.2.19",
+    "@storybook/addon-mcp": "^0.6.0",
     "@storybook/addon-vitest": "^10.2.19",
     "@storybook/react-vite": "^10.2.19",
     "@tanstack/react-query": "^5.90.21",

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

@@ -49,7 +49,7 @@ $autocomplete-opacity-visible: 1;
 	outline: none;
 
 	&::placeholder {
-		color: var(--font-disabled);
+		color: var(--font-placeholder);
 	}
 }
 

package/src/components/ds-dropdown-menu/ds-dropdown-menu.module.scss

@@ -16,6 +16,11 @@
 	&[hidden] {
 		display: none;
 	}
+
+	&[data-nested='menu'] {
+		margin-top: -1px;
+		z-index: 10000;
+	}
 }
 
 .header {

package/src/components/ds-key-value-pair/ds-key-value-pair.module.scss

@@ -35,7 +35,6 @@
 }
 
 .root[data-orientation='horizontal'] .valueContainer {
-	justify-items: end;
 	min-width: 0;
 }
 
@@ -50,10 +49,6 @@
 	overflow: hidden;
 }
 
-.root[data-orientation='horizontal'] .valueDisplay {
-	text-align: end;
-}
-
 .editorSlot {
 	display: none;
 	min-width: 0;

package/src/components/ds-status-badge/ds-status-badge.types.ts

@@ -1,13 +1,28 @@
 import type { CSSProperties } from 'react';
 import type { IconType } from '../ds-icon';
 
+/**
+ * @deprecated Use `statusBadgeV2Phases` and `StatusBadgeV2Phase` from `DsStatusBadgeV2` instead.
+ */
 export const dsStatuses = ['active', 'running', 'pending', 'draft', 'inactive', 'warning', 'failed'] as const;
 
+/**
+ * @deprecated Use `StatusBadgeV2Phase` from `DsStatusBadgeV2` instead.
+ */
 export type DsStatus = (typeof dsStatuses)[number];
 
+/**
+ * @deprecated Use `statusBadgeV2Sizes` and `StatusBadgeV2Size` from `DsStatusBadgeV2` instead.
+ */
 export const statusBadgeSizes = ['medium', 'small'] as const;
+/**
+ * @deprecated Use `StatusBadgeV2Size` from `DsStatusBadgeV2` instead.
+ */
 export type StatusBadgeSize = (typeof statusBadgeSizes)[number];
 
+/**
+ * @deprecated Use `DsStatusBadgeV2Props` and `DsStatusBadgeV2` instead.
+ */
 export interface DsStatusBadgeProps {
 	/**
 	 * The icon of the status badge

package/src/components/ds-status-badge-v2/ds-status-badge-v2.module.scss

@@ -0,0 +1,109 @@
+@mixin phase($bg, $icon-color, $font-color: var(--font-main)) {
+	background-color: $bg;
+	color: $font-color;
+	--_icon-color: #{$icon-color};
+}
+
+$size-medium: 22px;
+$size-small: 18px;
+$badge-icon-size-small: 12px;
+
+.root {
+	display: inline-flex;
+	align-items: center;
+	border-radius: 9999px;
+	width: max-content;
+}
+
+.icon {
+	display: inline-flex;
+	color: var(--_icon-color);
+	pointer-events: none;
+}
+
+.label::first-letter {
+	text-transform: capitalize;
+}
+
+.medium {
+	height: $size-medium;
+	padding: 0 var(--xs) 0 var(--3xs);
+	gap: var(--3xs);
+}
+
+.small {
+	height: $size-small;
+	padding: 0 var(--2xs) 0 var(--3xs);
+	gap: var(--3xs);
+}
+
+.small .icon {
+	--_badge-icon-size: #{$badge-icon-size-small};
+}
+
+.iconOnly {
+	padding: 0;
+	justify-content: center;
+
+	&.medium {
+		width: $size-medium;
+	}
+
+	&.small {
+		width: $size-small;
+	}
+}
+
+.textOnly {
+	&.medium {
+		padding: 0 var(--xs);
+	}
+
+	&.small {
+		padding: 0 var(--2xs);
+	}
+}
+
+.not-started {
+	@include phase(var(--background-secondary), var(--icon-secondary), var(--font-secondary));
+}
+
+.temporary {
+	@include phase(var(--background-secondary), var(--icon-secondary), var(--font-secondary));
+}
+
+.in-review {
+	@include phase(var(--background-secondary), var(--icon-secondary), var(--font-secondary));
+}
+
+.pending {
+	@include phase(var(--background-pending), var(--icon-pending));
+}
+
+.active {
+	@include phase(var(--background-active-status), var(--icon-action));
+}
+
+.execution {
+	@include phase(var(--background-execution), var(--icon-execution));
+}
+
+.result-succeeded {
+	@include phase(var(--background-success), var(--icon-success));
+}
+
+.result-warning {
+	@include phase(var(--background-warning), var(--icon-warning));
+}
+
+.result-failed {
+	@include phase(var(--background-error-secondary-hover), var(--icon-error));
+}
+
+.deprecated {
+	@include phase(var(--background-secondary), var(--icon-secondary), var(--font-secondary));
+}
+
+.secondary {
+	background-color: transparent;
+}

package/src/components/ds-status-badge-v2/ds-status-badge-v2.tsx

@@ -0,0 +1,77 @@
+import type { Ref } from 'react';
+import classNames from 'classnames';
+import styles from './ds-status-badge-v2.module.scss';
+import type { DsStatusBadgeV2BaseProps } from './ds-status-badge-v2.types';
+import { phaseIconMap } from './phase-config';
+import { DsIcon } from '../ds-icon';
+import { DsTooltip } from '../ds-tooltip';
+import { DsTypography } from '../ds-typography';
+
+const DsStatusBadgeV2 = ({
+	phase,
+	label,
+	icon,
+	iconOnly = false,
+	variant = 'primary',
+	size = 'medium',
+	className,
+	style,
+	ref,
+	'aria-label': ariaLabel,
+}: DsStatusBadgeV2BaseProps) => {
+	const resolvedIcon = icon === null ? null : (icon ?? phaseIconMap[phase]);
+	const hasIcon = resolvedIcon !== null;
+	const isTextOnly = !hasIcon;
+	const tooltipContent = iconOnly ? label : undefined;
+
+	const iconStyle =
+		size === 'small'
+			? {
+					fontSize: 'var(--_badge-icon-size)',
+					width: 'var(--_badge-icon-size)',
+					height: 'var(--_badge-icon-size)',
+				}
+			: undefined;
+
+	const rootClass = classNames(
+		styles.root,
+		styles[phase],
+		styles[size],
+		{
+			[styles.secondary]: variant === 'secondary',
+			[styles.iconOnly]: iconOnly,
+			[styles.textOnly]: isTextOnly,
+		},
+		className,
+	);
+
+	const badge = (
+		<div
+			ref={ref as Ref<HTMLDivElement>}
+			className={rootClass}
+			style={style}
+			role="status"
+			aria-label={ariaLabel ?? label}
+		>
+			{hasIcon && (
+				<span className={styles.icon}>
+					<DsIcon icon={resolvedIcon} size="tiny" filled aria-hidden="true" style={iconStyle} />
+				</span>
+			)}
+
+			{!iconOnly && (
+				<DsTypography className={styles.label} variant="body-xs-reg">
+					{label}
+				</DsTypography>
+			)}
+		</div>
+	);
+
+	if (iconOnly) {
+		return <DsTooltip content={tooltipContent}>{badge}</DsTooltip>;
+	}
+
+	return badge;
+};
+
+export default DsStatusBadgeV2;

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

@@ -0,0 +1,79 @@
+import type { CSSProperties, Ref } from 'react';
+import type { IconType } from '../ds-icon';
+import type { ResponsiveValue } from '../../utils/responsive';
+
+export const statusBadgeV2Phases = [
+	'not-started',
+	'temporary',
+	'in-review',
+	'pending',
+	'active',
+	'execution',
+	'result-succeeded',
+	'result-warning',
+	'result-failed',
+	'deprecated',
+] as const;
+
+export type StatusBadgeV2Phase = (typeof statusBadgeV2Phases)[number];
+
+export const statusBadgeV2Variants = ['primary', 'secondary'] as const;
+export type StatusBadgeV2Variant = (typeof statusBadgeV2Variants)[number];
+
+export const statusBadgeV2Sizes = ['medium', 'small'] as const;
+export type StatusBadgeV2Size = (typeof statusBadgeV2Sizes)[number];
+
+export interface DsStatusBadgeV2SharedProps {
+	/**
+	 * Lifecycle phase that determines color and default icon.
+	 * Each phase maps to a color palette and a default Material Symbols icon.
+	 */
+	phase: StatusBadgeV2Phase;
+
+	label: string;
+
+	/**
+	 * Visual variant controlling background treatment.
+	 * - `'primary'`: tinted background pill or circle
+	 * - `'secondary'`: no background, inline presentation
+	 * @default 'primary'
+	 */
+	variant?: StatusBadgeV2Variant;
+
+	/**
+	 * Badge size controlling height, padding, and icon dimensions. Responsive.
+	 * @default 'medium'
+	 */
+	size?: StatusBadgeV2Size;
+
+	className?: string;
+
+	style?: CSSProperties;
+
+	ref?: Ref<HTMLElement>;
+
+	'aria-label'?: string;
+}
+
+/**
+ * When `iconOnly` is true, `icon` cannot be `null` — the badge must have an icon
+ * (either the phase default or a custom one). When `iconOnly` is false or omitted,
+ * `icon` can be `null` to force a text-only badge.
+ */
+export type StatusBadgeV2IconOnlyProps =
+	| {
+			/** When true, hides the label text and renders icon-only. The label is used as tooltip content instead. */
+			iconOnly: true;
+			/** Override the default phase icon. When omitted, the default icon for the phase is used. */
+			icon?: IconType;
+	  }
+	| {
+			iconOnly?: false;
+			icon?: IconType | null;
+	  };
+
+export type DsStatusBadgeV2BaseProps = DsStatusBadgeV2SharedProps & StatusBadgeV2IconOnlyProps;
+
+export type DsStatusBadgeV2Props = Omit<DsStatusBadgeV2SharedProps, 'size'> & {
+	size?: ResponsiveValue<StatusBadgeV2Size>;
+} & StatusBadgeV2IconOnlyProps;

package/src/components/ds-status-badge-v2/ds-status-badge-v2.unit.test.ts

@@ -0,0 +1,25 @@
+/* eslint-disable vitest/expect-expect */
+import { describe, expectTypeOf, it } from 'vitest';
+import type { StatusBadgeV2IconOnlyProps } from './ds-status-badge-v2.types';
+
+describe('DsStatusBadgeV2 types', () => {
+	it('allows iconOnly with a custom icon', () => {
+		expectTypeOf<{ iconOnly: true; icon: () => null }>().toExtend<StatusBadgeV2IconOnlyProps>();
+	});
+
+	it('allows iconOnly without icon (phase default)', () => {
+		expectTypeOf<{ iconOnly: true }>().toExtend<StatusBadgeV2IconOnlyProps>();
+	});
+
+	it('allows icon=null when iconOnly is false', () => {
+		expectTypeOf<{ iconOnly: false; icon: null }>().toExtend<StatusBadgeV2IconOnlyProps>();
+	});
+
+	it('allows icon=null when iconOnly is omitted', () => {
+		expectTypeOf<{ icon: null }>().toExtend<StatusBadgeV2IconOnlyProps>();
+	});
+
+	it('prevents iconOnly=true with icon=null', () => {
+		expectTypeOf<{ iconOnly: true; icon: null }>().not.toExtend<StatusBadgeV2IconOnlyProps>();
+	});
+});

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

@@ -0,0 +1,13 @@
+import { withResponsiveProps } from '../../utils/responsive';
+import DsStatusBadgeV2Base from './ds-status-badge-v2';
+
+export const DsStatusBadgeV2 = withResponsiveProps(DsStatusBadgeV2Base, ['size']);
+
+export type {
+	StatusBadgeV2Phase,
+	StatusBadgeV2Variant,
+	StatusBadgeV2Size,
+	DsStatusBadgeV2BaseProps,
+	DsStatusBadgeV2Props,
+} from './ds-status-badge-v2.types';
+export { statusBadgeV2Phases, statusBadgeV2Variants, statusBadgeV2Sizes } from './ds-status-badge-v2.types';

package/src/components/ds-status-badge-v2/phase-config.ts

@@ -0,0 +1,15 @@
+import type { IconType } from '../ds-icon';
+import type { StatusBadgeV2Phase } from './ds-status-badge-v2.types';
+
+export const phaseIconMap: Record<StatusBadgeV2Phase, IconType> = Object.freeze({
+	'not-started': 'lasso_select',
+	temporary: 'hourglass_empty',
+	'in-review': 'document_search',
+	pending: 'timer_pause',
+	active: 'power_settings_circle',
+	execution: 'timelapse',
+	'result-succeeded': 'verified',
+	'result-warning': 'warning',
+	'result-failed': 'cancel',
+	deprecated: 'inventory_2',
+});

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

@@ -6,6 +6,7 @@ import { DsTableRowVirtualized } from '../ds-table-row-virtualized';
 import type { DsTableBodyVirtualizedProps } from './ds-table-body-virtualized.types';
 import { TableBody, TableRow, TableCell } from '../core-table';
 import { EMPTY_TABLE_STATE_TEXT } from '../../utils/constants';
+import { useInfiniteScroll } from './use-infinite-scroll';
 
 export const DsTableBodyVirtualized = <TData,>({
 	table,
@@ -15,6 +16,7 @@ export const DsTableBodyVirtualized = <TData,>({
 	overscan,
 	onScroll,
 	rowSelection,
+	infiniteScroll,
 }: DsTableBodyVirtualizedProps<TData>) => {
 	const rowsMapRef = useRef(new Map<string, HTMLTableRowElement>());
 	const rowHeightsMapRef = useRef(new Map<string, number>());
@@ -30,6 +32,8 @@ export const DsTableBodyVirtualized = <TData,>({
 		return item ? `${item.row.id}${item.isExpandedRowContent ? '-expanded-content' : ''}` : String(index);
 	};
 
+	const { loadDataIfNeeded } = useInfiniteScroll(tableContainerRef, rows.length, infiniteScroll);
+
 	const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({
 		count: rowsAndExpandedRowContent.length,
 		estimateSize: (index) => {
@@ -56,17 +60,21 @@ export const DsTableBodyVirtualized = <TData,>({
 				});
 			});
 
-			if (sync && onScroll) {
-				const scrollOffset = instance.scrollOffset || 0;
-				const totalContentHeight = instance.getTotalSize();
-				const viewportHeight = instance.scrollElement?.clientHeight;
-				const scrollDirection = instance.scrollDirection;
+			if (sync) {
+				if (onScroll) {
+					const scrollOffset = instance.scrollOffset || 0;
+					const totalContentHeight = instance.getTotalSize();
+					const viewportHeight = instance.scrollElement?.clientHeight;
+					const scrollDirection = instance.scrollDirection;
 
-				if (viewportHeight) {
-					const bottomOffset = totalContentHeight - (scrollOffset + viewportHeight);
+					if (viewportHeight) {
+						const bottomOffset = totalContentHeight - (scrollOffset + viewportHeight);
 
-					onScroll({ scrollOffset, totalContentHeight, viewportHeight, bottomOffset, scrollDirection });
+						onScroll({ scrollOffset, totalContentHeight, viewportHeight, bottomOffset, scrollDirection });
+					}
 				}
+
+				loadDataIfNeeded();
 			}
 		},
 	});

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

@@ -36,6 +36,12 @@ export interface DsTableBodyVirtualizedProps<TData> {
 	 * Current row selection state from TanStack Table. Used to style selected rows.
 	 */
 	rowSelection: RowSelectionState;
+	/**
+	 * Optional infinite-scroll configuration. When provided, the body requests
+	 * `onLoadMore` as the user nears the bottom of the scroll container and
+	 * runs an auto-fill loop until the viewport becomes scrollable.
+	 */
+	infiniteScroll?: InfiniteScrollConfig;
 }
 
 /**
@@ -53,3 +59,58 @@ export interface ScrollParams {
 	/** The direction of the scroll movement */
 	scrollDirection: 'forward' | 'backward' | null;
 }
+
+/**
+ * Configuration for infinite scroll on a virtualized table.
+ *
+ * The Table is responsible for detecting when more rows should be requested
+ * (proximity to the bottom of the scroll container, and the auto-fill loop
+ * when the rendered content does not fill the viewport). The consumer is
+ * responsible for fetching, pagination cursors, error handling, retry, and
+ * for reflecting loading state back via `isLoadingMore`.
+ */
+export interface InfiniteScrollConfig {
+	/**
+	 * Whether more rows can be loaded. When `false`, no further `onLoadMore`
+	 * calls are made. Flip this off when the end of the data set is reached.
+	 */
+	hasMore: boolean;
+
+	/**
+	 * Called when the Table wants the next page of rows. May be synchronous or
+	 * return a `Promise` (e.g. pass an async fetcher such as React Query's
+	 * `fetchNextPage` directly); the Table does not await the return value.
+	 * Reflect the loading state via `isLoadingMore` so the Table can guard
+	 * against duplicate calls.
+	 */
+	onLoadMore: (() => void) | (() => Promise<unknown>);
+
+	/**
+	 * Whether a fetch is currently in flight. While `true`, the Table will not
+	 * call `onLoadMore` again. Set this synchronously inside your handler (or
+	 * track it with a state hook flipped before the fetch starts) if
+	 * `onLoadMore` is not idempotent and you need one-call-per-page semantics;
+	 * consumers using idempotent fetchers (e.g. React Query's `fetchNextPage`)
+	 * can safely leave this unset.
+	 *
+	 * @default false
+	 */
+	isLoadingMore?: boolean;
+
+	/**
+	 * Distance in pixels from the bottom of the scroll container at which
+	 * `onLoadMore` is requested.
+	 *
+	 * @default 500
+	 */
+	thresholdPx?: number;
+
+	/**
+	 * When `true`, the Table will continue to request more rows as long as the
+	 * rendered content does not fill the viewport (so the user can actually
+	 * start scrolling). Disable only when you want strictly user-driven loading.
+	 *
+	 * @default true
+	 */
+	autoFill?: boolean;
+}

package/src/components/ds-table/components/ds-table-body-virtualized/use-infinite-scroll.ts

@@ -0,0 +1,54 @@
+import { useEffect, type RefObject } from 'react';
+import type { InfiniteScrollConfig } from './ds-table-body-virtualized.types';
+
+const DEFAULT_THRESHOLD_PX = 500;
+const DEFAULT_AUTO_FILL = true;
+
+interface UseInfiniteScrollResult {
+	/**
+	 * Evaluates the current scroll position and, if appropriate, calls
+	 * `onLoadMore`. Safe to call from scroll/`onChange` handlers and effects.
+	 */
+	loadDataIfNeeded: () => void;
+}
+
+/**
+ * Owns the infinite-scroll trigger logic for `DsTable`:
+ * threshold detection and the auto-fill loop for short initial pages.
+ */
+export const useInfiniteScroll = (
+	scrollElementRef: RefObject<HTMLElement | null>,
+	rowCount: number,
+	config: InfiniteScrollConfig | undefined,
+): UseInfiniteScrollResult => {
+	const hasMore = config?.hasMore ?? false;
+	const isLoadingMore = config?.isLoadingMore ?? false;
+	const thresholdPx = config?.thresholdPx ?? DEFAULT_THRESHOLD_PX;
+	const autoFill = config?.autoFill ?? DEFAULT_AUTO_FILL;
+
+	const loadDataIfNeeded = () => {
+		const el = scrollElementRef.current;
+
+		if (!config || !hasMore || isLoadingMore || !el) {
+			return;
+		}
+
+		const isScrollable = el.scrollHeight > el.clientHeight;
+		const distanceToBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+		const isNearBottom = isScrollable && distanceToBottom <= thresholdPx;
+		const isNotScrollable = autoFill && !isScrollable;
+
+		if (isNearBottom || isNotScrollable) {
+			void config.onLoadMore();
+		}
+	};
+
+	useEffect(() => {
+		loadDataIfNeeded();
+		// loadDataIfNeeded reads the latest config values from closure; deps cover
+		// the meaningful inputs (data growth, hasMore, loading state).
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [rowCount, hasMore, isLoadingMore]);
+
+	return { loadDataIfNeeded };
+};

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

@@ -15,11 +15,6 @@
 .headerRow {
 	.headerCell {
 		border-bottom: 1px solid var(--color-dap-gray-400);
-
-		&.selectColumn {
-			width: vars.$select-column-width;
-			padding: 0;
-		}
 	}
 
 	&.headerRowNoBorder {
@@ -34,10 +29,6 @@
 	width: 100%;
 }
 
-.reorderColumn {
-	width: vars.$reorder-column-width;
-}
-
 .headerCell {
 	@include typography.body-sm-md;
 	color: var(--font-main);
@@ -64,6 +55,10 @@
 	}
 }
 
+.selectHeaderCell {
+	padding: 0;
+}
+
 .headerSortContainer {
 	display: flex;
 	align-items: center;