@drivenets/design-system 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -36,7 +36,7 @@
     "directory": "/packages/design-system"
   },
   "dependencies": {
-    "@ark-ui/react": "^5.31.0",
+    "@ark-ui/react": "^5.34.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
@@ -50,10 +50,11 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@tanstack/react-router": "^1.163.3",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.13.18",
-    "@zag-js/react": "^1.33.1",
-    "@zag-js/steps": "^1.33.1",
+    "@tanstack/react-virtual": "^3.13.19",
+    "@zag-js/react": "^1.35.2",
+    "@zag-js/steps": "^1.35.2",
     "classnames": "^2.5.1"
   },
   "peerDependencies": {
@@ -63,29 +64,30 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",
-    "@faker-js/faker": "^9.9.0",
+    "@eslint/compat": "^2.0.2",
+    "@faker-js/faker": "^10.3.0",
     "@hookform/resolvers": "^5.2.2",
     "@rollup/plugin-babel": "^6.1.0",
-    "@storybook/addon-a11y": "^10.2.7",
-    "@storybook/addon-docs": "^10.2.7",
-    "@storybook/addon-vitest": "^10.2.7",
-    "@storybook/builder-vite": "^10.2.7",
-    "@storybook/react-vite": "^10.2.7",
-    "@tanstack/react-query": "^5.90.20",
-    "@tanstack/react-router": "^1.158.4",
+    "@storybook/addon-a11y": "^10.2.13",
+    "@storybook/addon-docs": "^10.2.13",
+    "@storybook/addon-vitest": "^10.2.13",
+    "@storybook/builder-vite": "^10.2.13",
+    "@storybook/react-vite": "^10.2.13",
+    "@tanstack/react-query": "^5.90.21",
+    "@tanstack/react-router": "^1.163.3",
     "@types/eslint-plugin-jsx-a11y": "^6.10.1",
-    "@types/react": "^19.2.13",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitest/browser": "^4.0.18",
     "@vitest/browser-playwright": "^4.0.18",
     "@vitest/coverage-v8": "^4.0.18",
     "babel-plugin-react-compiler": "^1.0.0",
-    "eslint": "^9.39.2",
+    "eslint": "^10.0.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^10.2.7",
-    "jsdom": "^25.0.1",
+    "eslint-plugin-storybook": "^10.2.13",
+    "jsdom": "^28.1.0",
     "mockdate": "^3.0.5",
     "playwright": "^1.58.2",
     "postcss": "^8.5.6",
@@ -93,26 +95,27 @@
     "publint": "^0.3.17",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-hook-form": "^7.71.1",
+    "react-hook-form": "^7.71.2",
     "rollup-plugin-sass": "^1.15.3",
     "sass-embedded": "^1.97.3",
-    "storybook": "^10.2.7",
-    "tsdown": "^0.18.4",
+    "storybook": "^10.2.13",
+    "tsdown": "^0.20.3",
     "typed-scss-modules": "^8.1.1",
     "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^5.2.0",
     "vite": "^7.3.1",
     "vitest": "^4.0.18",
-    "zod": "^3.25.76",
-    "@drivenets/vite-plugin-design-system": "0.0.5"
+    "zod": "^4.3.6",
+    "@drivenets/vite-plugin-design-system": "0.0.6"
   },
   "scripts": {
-    "lint": "pnpm generate-scss-dts; eslint --max-warnings=0 .",
-    "typecheck": "pnpm generate-scss-dts; tsc",
+    "lint": "pnpm generate-scss-dts && eslint --max-warnings=0 .; EXIT_CODE=$?; rm -rf .scss-dts; exit $EXIT_CODE",
+    "typecheck": "pnpm generate-scss-dts && tsc; EXIT_CODE=$?; rm -rf .scss-dts; exit $EXIT_CODE",
     "generate-scss-dts": "typed-scss-modules ./src -o ./.scss-dts --nameFormat all --exportType default > /dev/null 2>&1",
     "storybook": "storybook dev -p 6006",
-    "test": "vitest",
-    "test:coverage": "vitest --coverage",
+    "test": "vitest --project=\"!requires-build\"",
+    "test:coverage": "pnpm test --coverage",
+    "test:requires-build": "vitest --project=requires-build",
     "build": "tsdown",
     "build:watch": "pnpm build --watch",
     "build:storybook": "storybook build",

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

@@ -189,7 +189,8 @@ $autocomplete-opacity-visible: 1;
 	}
 }
 
-.noMatches {
+.noMatches,
+.loading {
 	padding: var(--spacing-xs);
 	color: var(--color-font-disabled);
 	text-align: center;

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

@@ -1,15 +1,17 @@
-import { Combobox, useListCollection } from '@ark-ui/react/combobox';
+import { useState } from 'react';
+import { Combobox, createListCollection } from '@ark-ui/react/combobox';
 import { useFilter } from '@ark-ui/react/locale';
 import { Highlight } from '@ark-ui/react/highlight';
 import { Portal } from '@ark-ui/react/portal';
 import classNames from 'classnames';
 import styles from './ds-autocomplete.module.scss';
-import type { DsAutocompleteProps } from './ds-autocomplete.types';
+import type { DsAutocompleteOption, DsAutocompleteProps } from './ds-autocomplete.types';
 import { DsIcon } from '../ds-icon';
 
 export const DsAutocomplete = ({
 	id,
-	options,
+	options = [],
+	loading = false,
 	style,
 	className,
 	placeholder = 'Start typing to search...',
@@ -17,36 +19,42 @@ export const DsAutocomplete = ({
 	invalid = false,
 	onValueChange,
 	onInputValueChange,
-	noMatchesMessage = 'No matches found',
+	onOpenChange,
+	locale: { loading: loadingMessage = 'Loading...', noMatches: noMatchesMessage = 'No matches found' } = {},
 	highlightMatch = true,
 	showTrigger = true,
 	startAdornment,
 }: DsAutocompleteProps) => {
+	const [filterText, setFilterText] = useState('');
 	const filterUtils = useFilter({ sensitivity: 'base' });
 
-	const { collection, filter } = useListCollection({
-		initialItems: options.map((opt) => opt.label),
-		filter: (item, query) => filterUtils.contains(item, query),
+	const filteredOptions = filterText
+		? options.filter((opt) => filterUtils.contains(opt.label, filterText))
+		: options;
+
+	const collection = createListCollection<DsAutocompleteOption>({
+		items: filteredOptions,
+		itemToString: (item) => item.label,
+		itemToValue: (item) => item.value,
 	});
 
 	const handleInputValueChange = (details: Combobox.InputValueChangeDetails) => {
-		filter(details.inputValue);
+		setFilterText(details.inputValue);
 		onInputValueChange?.(details.inputValue);
 	};
 
-	const handleValueChange = (details: Combobox.ValueChangeDetails) => {
-		const selectedLabel = details.value[0];
-		if (!selectedLabel) {
-			return;
-		}
-
-		const selectedOption = options.find((opt) => opt.label === selectedLabel);
+	const handleValueChange = (details: Combobox.ValueChangeDetails<DsAutocompleteOption>) => {
+		const selectedItem = details.items[0];
 
-		if (selectedOption) {
-			onValueChange?.(selectedOption.value);
+		if (selectedItem) {
+			onValueChange?.(selectedItem.value);
 		}
 	};
 
+	const handleOpenChange = (details: Combobox.OpenChangeDetails) => {
+		onOpenChange?.(details.open);
+	};
+
 	const rootClass = classNames(
 		styles.root,
 		{
@@ -66,6 +74,7 @@ export const DsAutocomplete = ({
 			invalid={invalid}
 			onInputValueChange={handleInputValueChange}
 			onValueChange={handleValueChange}
+			onOpenChange={handleOpenChange}
 			closeOnSelect
 		>
 			<Combobox.Control className={styles.control}>
@@ -95,31 +104,29 @@ export const DsAutocomplete = ({
 			<Portal>
 				<Combobox.Positioner className={styles.positioner}>
 					<Combobox.Content className={styles.content}>
-						{collection.items.length === 0 ? (
+						{loading && <div className={styles.loading}>{loadingMessage}</div>}
+
+						{!loading && collection.items.length === 0 && (
 							<div className={styles.noMatches}>{noMatchesMessage}</div>
-						) : (
+						)}
+
+						{!loading && collection.items.length > 0 && (
 							<Combobox.ItemGroup className={styles.itemGroup}>
-								<Combobox.Context>
-									{(context) =>
-										collection.items.map((item) => {
-											const option = options.find((opt) => opt.label === item);
-											return (
-												<Combobox.Item key={item} item={item} className={styles.item}>
-													{option?.icon && (
-														<DsIcon className={styles.itemIcon} icon={option.icon} aria-hidden="true" />
-													)}
-													<Combobox.ItemText className={styles.itemText}>
-														{highlightMatch ? (
-															<Highlight query={context.inputValue} text={item} ignoreCase />
-														) : (
-															item
-														)}
-													</Combobox.ItemText>
-												</Combobox.Item>
-											);
-										})
-									}
-								</Combobox.Context>
+								{collection.items.map((option) => (
+									<Combobox.Item key={option.value} item={option} className={styles.item}>
+										{option.icon && (
+											<DsIcon className={styles.itemIcon} icon={option.icon} aria-hidden="true" />
+										)}
+
+										<Combobox.ItemText className={styles.itemText}>
+											{highlightMatch ? (
+												<Highlight query={filterText} text={option.label} ignoreCase />
+											) : (
+												option.label
+											)}
+										</Combobox.ItemText>
+									</Combobox.Item>
+								))}
 							</Combobox.ItemGroup>
 						)}
 					</Combobox.Content>

package/src/components/ds-autocomplete/ds-autocomplete.types.tsx

@@ -22,9 +22,16 @@ export interface DsAutocompleteProps {
 	 */
 	id?: string;
 	/**
-	 * Options to display in the dropdown
+	 * Options to display in the dropdown.
+	 * For async/server-driven search, update this prop with fetched results.
 	 */
-	options: DsAutocompleteOption[];
+	options?: DsAutocompleteOption[];
+	/**
+	 * Whether the autocomplete is in a loading state.
+	 * When true, a loading message is shown in the dropdown.
+	 */
+	loading?: boolean;
+
 	/**
 	 * Additional styles to apply to the component
 	 */
@@ -45,19 +52,22 @@ export interface DsAutocompleteProps {
 	 * Whether the autocomplete is in an invalid state
 	 */
 	invalid?: boolean;
+
 	/**
-	 * Event handler called when the value changes (when an option is selected or custom value is entered)
-	 */
-	onValueChange?: (value: string) => void;
-	/**
-	 * Event handler called when the input value changes (on every keystroke)
-	 */
-	onInputValueChange?: (value: string) => void;
-	/**
-	 * Message to display when no options match the input
-	 * @default 'No matches found'
-	 */
-	noMatchesMessage?: string;
+	 * Locale strings for the autocomplete component
+	 */
+	locale?: {
+		/**
+		 * Message to display while results are loading
+		 * @default 'Loading...'
+		 */
+		loading?: string;
+		/**
+		 * Message to display when no options match the input
+		 * @default 'No matches found'
+		 */
+		noMatches?: string;
+	};
 	/**
 	 * Whether to highlight the matching text in the dropdown options
 	 * @default true
@@ -73,4 +83,17 @@ export interface DsAutocompleteProps {
 	 * Content to display at the start of the input (e.g., a search icon).
 	 */
 	startAdornment?: React.ReactNode;
+
+	/**
+	 * Event handler called when the value changes (when an option is selected)
+	 */
+	onValueChange?: (value: string) => void;
+	/**
+	 * Event handler called when the input value changes (on every keystroke)
+	 */
+	onInputValueChange?: (value: string) => void;
+	/**
+	 * Event handler called when the dropdown opens or closes
+	 */
+	onOpenChange?: (open: boolean) => void;
 }

package/src/components/ds-button/versions/ds-button-new/ds-button-new.module.scss

@@ -154,7 +154,7 @@ $button-size-large: 40px;
 		color: var(--color-background-action);
 
 		.content {
-			background: var(--color-background);
+			background: transparent;
 			border-color: transparent;
 		}
 
@@ -238,7 +238,7 @@ $button-size-large: 40px;
 		color: var(--color-background-selected);
 
 		.content {
-			background: var(--color-background);
+			background: transparent;
 			border-color: transparent;
 		}
 
@@ -267,10 +267,6 @@ $button-size-large: 40px;
 		&:disabled {
 			cursor: not-allowed;
 			color: var(--color-background-disable);
-
-			.content {
-				border-color: var(--color-background);
-			}
 		}
 	}
 
@@ -361,7 +357,7 @@ $button-size-large: 40px;
 		color: var(--color-background-danger-strong);
 
 		.content {
-			background: var(--color-background);
+			background: transparent;
 			border-color: transparent;
 		}
 

package/src/components/ds-comment-bubble/components/ds-comment-thread/ds-comment-thread.module.scss

@@ -0,0 +1,62 @@
+$scrollbar-width: 8px;
+$scrollbar-thumb-width: 3.2px;
+$scrollbar-border-radius-pill: 100px;
+$shadow-height: 34px;
+$shadow-border-radius: 0 0 32px 32px;
+$transition-duration: 0.2s;
+
+.thread {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	position: relative;
+	overflow: hidden;
+	min-height: 0;
+}
+
+.initialComment {
+	flex-shrink: 0;
+	position: relative;
+}
+
+.followingComments {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-sm);
+	flex: 1;
+	overflow-y: auto;
+	min-height: 0;
+	padding: var(--spacing-sm) 0;
+
+	&::-webkit-scrollbar {
+		width: $scrollbar-width;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--color-background-tertiary);
+		border-radius: $scrollbar-border-radius-pill;
+		width: $scrollbar-thumb-width;
+	}
+}
+
+.overflowShadow {
+	position: absolute;
+	bottom: 0;
+	transform: translateY(100%);
+	left: 0;
+	right: 0;
+	height: $shadow-height;
+	border-radius: $shadow-border-radius;
+	background: linear-gradient(180deg, rgba(0, 26, 71, 0.2) -135.47%, rgba(0, 26, 71, 0) 54.98%);
+	pointer-events: none;
+	opacity: 0;
+	transition: opacity $transition-duration ease;
+
+	&.visible {
+		opacity: 1;
+	}
+}

package/src/components/ds-comment-bubble/components/ds-comment-thread/ds-comment-thread.tsx

@@ -0,0 +1,83 @@
+import { useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import styles from './ds-comment-thread.module.scss';
+import { DsThreadItem } from '../ds-thread-item';
+import { useScrollOverflow } from '../../hooks';
+import type { DsCommentThreadProps } from './ds-comment-thread.types';
+import type { CommentAuthor } from '../../../ds-comment-card';
+
+export const DsCommentThread = ({
+	messages,
+	commentAuthor,
+	currentUser,
+	onEditMessage,
+	onDeleteMessage,
+	onMarkUnread,
+	onResolved,
+	className,
+}: DsCommentThreadProps) => {
+	const scrollContainerRef = useRef<HTMLDivElement>(null);
+	const bottomRef = useRef<HTMLDivElement>(null);
+
+	const initialMessage = messages.find((m) => m.isInitialMessage) || messages[0];
+	const followingMessages = messages.filter((m) => m.id !== initialMessage?.id);
+
+	const hasOverflow = useScrollOverflow(scrollContainerRef, messages.length);
+
+	useEffect(() => {
+		bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+	}, [messages.length]);
+
+	const isCurrentUserMessage = (author: CommentAuthor): boolean => currentUser?.id === author.id;
+	const isCommentAuthorMessage = (author: CommentAuthor): boolean => commentAuthor.id === author.id;
+	const canModify = (author: CommentAuthor): boolean => isCurrentUserMessage(author);
+
+	if (!initialMessage) {
+		return null;
+	}
+
+	return (
+		<div className={classNames(styles.thread, className)}>
+			<div className={styles.initialComment}>
+				<DsThreadItem
+					id={initialMessage.id}
+					author={initialMessage.author}
+					content={initialMessage.content}
+					createdAt={initialMessage.createdAt}
+					isCommentAuthorMessage={isCommentAuthorMessage(initialMessage.author)}
+					canModify={canModify(initialMessage.author)}
+					onEdit={canModify(initialMessage.author) ? onEditMessage : undefined}
+					onDelete={canModify(initialMessage.author) ? onDeleteMessage : undefined}
+					onMarkUnread={onMarkUnread}
+					onResolved={onResolved}
+				/>
+				<div
+					className={classNames(styles.overflowShadow, {
+						[styles.visible]: hasOverflow,
+					})}
+				/>
+			</div>
+
+			{followingMessages.length > 0 && (
+				<div ref={scrollContainerRef} className={styles.followingComments}>
+					{followingMessages.map((message) => (
+						<DsThreadItem
+							key={message.id}
+							id={message.id}
+							author={message.author}
+							content={message.content}
+							createdAt={message.createdAt}
+							isCommentAuthorMessage={isCommentAuthorMessage(message.author)}
+							canModify={canModify(message.author)}
+							onEdit={canModify(message.author) ? onEditMessage : undefined}
+							onDelete={canModify(message.author) ? onDeleteMessage : undefined}
+							onMarkUnread={onMarkUnread}
+							onResolved={onResolved}
+						/>
+					))}
+					<div ref={bottomRef} />
+				</div>
+			)}
+		</div>
+	);
+};

package/src/components/ds-comment-bubble/components/ds-comment-thread/ds-comment-thread.types.ts

@@ -0,0 +1,12 @@
+import type { CommentMessage, CommentAuthor } from '../../../ds-comment-card';
+
+export interface DsCommentThreadProps {
+	messages: CommentMessage[];
+	commentAuthor: CommentAuthor;
+	currentUser?: CommentAuthor;
+	onEditMessage?: (messageId: string, newContent: string) => void;
+	onDeleteMessage?: (messageId: string) => void;
+	onMarkUnread?: (messageId: string) => void;
+	onResolved?: (messageId: string) => void;
+	className?: string;
+}

package/src/components/ds-comment-bubble/components/ds-comment-thread/index.ts

@@ -0,0 +1,2 @@
+export { DsCommentThread } from './ds-comment-thread';
+export * from './ds-comment-thread.types';

package/src/components/ds-comment-bubble/components/ds-thread-item/ds-thread-item.module.scss

@@ -0,0 +1,149 @@
+$avatar-size: 24px;
+$avatar-fallback-font-size: 10px;
+$header-height: 24px;
+$icon-button-size: 16px;
+$dropdown-min-width: 180px;
+$border-radius-circle: 50%;
+$transition-duration: 0.2s;
+
+@mixin icon-button-size {
+	&#{&} {
+		width: $icon-button-size;
+		height: $icon-button-size;
+		min-width: $icon-button-size;
+		min-height: $icon-button-size;
+		padding: 0;
+		border: none;
+	}
+}
+
+.iconButtonContent {
+	height: $icon-button-size !important;
+	min-height: $icon-button-size !important;
+	padding: 0 !important;
+	border: none !important;
+}
+
+.threadItem {
+	display: flex;
+	gap: var(--spacing-lg);
+	padding: var(--spacing-sm) var(--spacing-standard);
+	position: relative;
+
+	&:hover {
+		.actions {
+			opacity: 1;
+		}
+	}
+
+	&.alignRight {
+		flex-direction: row-reverse;
+
+		.content {
+			align-items: flex-end;
+		}
+
+		.message {
+			text-align: right;
+		}
+	}
+}
+
+.avatarWrapper {
+	flex-shrink: 0;
+}
+
+.avatar {
+	width: $avatar-size;
+	height: $avatar-size;
+	border-radius: $border-radius-circle;
+	object-fit: cover;
+}
+
+.avatarFallback {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: $avatar-size;
+	height: $avatar-size;
+	border-radius: $border-radius-circle;
+	background: var(--color-background-tertiary);
+	font-size: $avatar-fallback-font-size;
+	font-weight: var(--font-weight-semi-bold);
+	color: var(--color-font-main);
+	text-transform: uppercase;
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-3xs);
+	flex: 1;
+	min-width: 0;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+	height: $header-height;
+}
+
+.authorName {
+	font-size: var(--font-size-md);
+	font-weight: var(--font-weight-semi-bold);
+	line-height: var(--line-height-md);
+	color: var(--color-font-main);
+}
+
+.timestamp {
+	font-size: var(--font-size-md);
+	font-weight: var(--font-weight-regular);
+	line-height: var(--line-height-md);
+	color: var(--color-font-secondary);
+}
+
+.message {
+	font-size: var(--font-size-sm);
+	font-weight: var(--font-weight-regular);
+	line-height: var(--line-height-sm);
+	color: var(--color-font-main);
+	word-wrap: break-word;
+	white-space: pre-wrap;
+}
+
+.actions {
+	display: flex;
+	align-items: flex-start;
+	gap: var(--spacing-xs);
+	opacity: 0;
+	transition: opacity $transition-duration ease;
+}
+
+.actionButton {
+	@include icon-button-size;
+}
+
+.editContainer {
+	width: 100%;
+	align-self: stretch;
+}
+
+.editTextarea {
+	width: 100%;
+}
+
+.editActions {
+	display: flex;
+	gap: var(--spacing-xs);
+	justify-content: flex-end;
+	margin-top: var(--spacing-xs);
+}
+
+.dropdownContent {
+	min-width: $dropdown-min-width;
+
+	&#{&} {
+		z-index: 1300;
+	}
+}