@drivenets/design-system 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",

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

@@ -0,0 +1,257 @@
+@use '../../styles/shared/dropdown';
+@use '../../styles/shared/input';
+
+$autocomplete-input-height: 36px;
+$autocomplete-max-visible-items: 4;
+$autocomplete-item-height: 38px;
+$autocomplete-dropdown-max-height: calc($autocomplete-max-visible-items * $autocomplete-item-height);
+$autocomplete-trigger-size: 24px;
+$autocomplete-trigger-border-radius: 4px;
+$autocomplete-highlight-border-radius: 2px;
+$autocomplete-animation-duration: 0.2s;
+$autocomplete-animation-translate: -8px;
+$autocomplete-outline-width: 2px;
+$autocomplete-outline-offset: 2px;
+$autocomplete-rotation-open: 180deg;
+$autocomplete-opacity-hidden: 0;
+$autocomplete-opacity-visible: 1;
+
+.root {
+	position: relative;
+	width: 100%;
+	display: inline-flex;
+	flex-direction: column;
+}
+
+.control {
+	@include input.base-input-container;
+	@include input.input-container-states;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3xs);
+	height: $autocomplete-input-height;
+	min-height: $autocomplete-input-height;
+	max-height: $autocomplete-input-height;
+
+	&[data-focus] {
+		border-color: var(--form-control-border-color, var(--color-border-action-primary)) !important;
+	}
+
+	&[data-invalid] {
+		border-color: var(--color-background-danger-strong);
+	}
+}
+
+.input {
+	@include input.base-input;
+	flex: 1;
+	min-width: 0;
+	outline: none;
+
+	&::placeholder {
+		color: var(--color-font-placeholder);
+	}
+}
+
+.startAdornment {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--color-background-action);
+	flex-shrink: 0;
+}
+
+.iconContainer {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3xs);
+	flex-shrink: 0;
+}
+
+.clearButton {
+	@include input.icon-button;
+	cursor: pointer;
+	opacity: $autocomplete-opacity-hidden;
+	visibility: hidden;
+	transition: opacity $autocomplete-animation-duration ease;
+
+	&:hover {
+		color: var(--color-background-action-hover);
+	}
+}
+
+.control:hover .clearButton,
+.control[data-focus] .clearButton {
+	opacity: $autocomplete-opacity-visible;
+	visibility: visible;
+}
+
+.trigger {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--color-background-deselected);
+	transition:
+		transform $autocomplete-animation-duration ease-in-out,
+		background-color $autocomplete-animation-duration ease,
+		color $autocomplete-animation-duration ease;
+	cursor: pointer;
+	background: transparent;
+	border: none;
+	padding: 0;
+	border-radius: $autocomplete-trigger-border-radius;
+	width: $autocomplete-trigger-size;
+	height: $autocomplete-trigger-size;
+
+	&:hover {
+		color: var(--color-background-deselected-hover);
+		background: var(--color-background-action-hover-weak);
+	}
+
+	&[data-state='open'] {
+		transform: rotate($autocomplete-rotation-open);
+		color: var(--color-background-deselected-hover);
+		background: var(--color-background-action-hover-weak);
+	}
+
+	&:focus-visible {
+		outline: $autocomplete-outline-width solid var(--color-focus);
+		outline-offset: $autocomplete-outline-offset;
+	}
+}
+
+.control[data-focus] .trigger {
+	color: var(--color-background-deselected-hover);
+	background: var(--color-background-action-hover-weak);
+}
+
+.positioner {
+	z-index: var(--z-index-dropdown, 9999);
+	width: var(--reference-width);
+}
+
+.content {
+	@include dropdown.dropdown-content;
+	overflow: hidden;
+	animation: expand $autocomplete-animation-duration ease;
+	width: 100%;
+	min-width: var(--reference-width);
+	max-height: $autocomplete-dropdown-max-height;
+
+	&[data-state='open'] {
+		animation: expand $autocomplete-animation-duration ease;
+	}
+
+	&[data-state='closed'] {
+		animation: collapse $autocomplete-animation-duration ease;
+	}
+}
+
+.itemGroup {
+	overflow-y: auto;
+	overflow-x: hidden;
+	max-height: $autocomplete-dropdown-max-height;
+	scrollbar-width: thin;
+}
+
+.item {
+	@include dropdown.dropdown-item;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+	height: $autocomplete-item-height;
+	min-height: $autocomplete-item-height;
+
+	&[data-highlighted] {
+		background: var(--color-background-secondary-selected-weak);
+	}
+}
+
+.itemIcon {
+	color: var(--color-background-deselected);
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+}
+
+.itemText {
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+
+	mark {
+		background-color: var(--color-data-yellow);
+		color: var(--color-font-main);
+		font-weight: var(--font-weight-medium);
+		padding: 0;
+		border-radius: $autocomplete-highlight-border-radius;
+	}
+}
+
+.noMatches {
+	padding: var(--spacing-xs);
+	color: var(--color-font-disabled);
+	text-align: center;
+	font-size: var(--font-size-sm);
+}
+
+.disabled {
+	.control {
+		color: var(--color-background-deselected);
+		background: var(--color-background-secondary);
+		border-color: var(--color-border-disabled);
+		cursor: not-allowed;
+
+		.input {
+			color: var(--color-font-disabled);
+			cursor: not-allowed;
+		}
+
+		.trigger {
+			color: var(--color-background-disable);
+			cursor: not-allowed;
+			background: transparent;
+
+			&:hover {
+				background: transparent;
+				color: var(--color-background-disable);
+			}
+		}
+	}
+}
+
+.invalid {
+	.control {
+		border-color: var(--color-background-danger-strong);
+
+		&:hover,
+		&[data-focus] {
+			border-color: var(--color-background-danger-strong) !important;
+		}
+	}
+}
+
+@keyframes expand {
+	0% {
+		opacity: $autocomplete-opacity-hidden;
+		transform: translateY($autocomplete-animation-translate);
+	}
+
+	100% {
+		opacity: $autocomplete-opacity-visible;
+		transform: translateY(0);
+	}
+}
+
+@keyframes collapse {
+	0% {
+		opacity: $autocomplete-opacity-visible;
+		transform: translateY(0);
+	}
+
+	100% {
+		opacity: $autocomplete-opacity-hidden;
+		transform: translateY($autocomplete-animation-translate);
+	}
+}

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

@@ -0,0 +1,130 @@
+import { Combobox, useListCollection } 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 { DsIcon } from '../ds-icon';
+
+export const DsAutocomplete = ({
+	id,
+	options,
+	style,
+	className,
+	placeholder = 'Start typing to search...',
+	disabled = false,
+	invalid = false,
+	onValueChange,
+	onInputValueChange,
+	noMatchesMessage = 'No matches found',
+	highlightMatch = true,
+	showTrigger = true,
+	startAdornment,
+}: DsAutocompleteProps) => {
+	const filterUtils = useFilter({ sensitivity: 'base' });
+
+	const { collection, filter } = useListCollection({
+		initialItems: options.map((opt) => opt.label),
+		filter: (item, query) => filterUtils.contains(item, query),
+	});
+
+	const handleInputValueChange = (details: Combobox.InputValueChangeDetails) => {
+		filter(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);
+
+		if (selectedOption) {
+			onValueChange?.(selectedOption.value);
+		}
+	};
+
+	const rootClass = classNames(
+		styles.root,
+		{
+			[styles.disabled]: disabled,
+			[styles.invalid]: invalid,
+		},
+		className,
+	);
+
+	return (
+		<Combobox.Root
+			id={id}
+			collection={collection}
+			className={rootClass}
+			style={style}
+			disabled={disabled}
+			invalid={invalid}
+			onInputValueChange={handleInputValueChange}
+			onValueChange={handleValueChange}
+			closeOnSelect
+		>
+			<Combobox.Control className={styles.control}>
+				{startAdornment && <span className={styles.startAdornment}>{startAdornment}</span>}
+
+				<Combobox.Input className={styles.input} placeholder={placeholder} />
+
+				<Combobox.Context>
+					{(context) => (
+						<div className={styles.iconContainer}>
+							{context.inputValue && !disabled && (
+								<Combobox.ClearTrigger className={styles.clearButton} aria-label="Clear">
+									<DsIcon icon="close" size="medium" />
+								</Combobox.ClearTrigger>
+							)}
+
+							{showTrigger && (
+								<Combobox.Trigger className={styles.trigger} aria-label="Toggle dropdown">
+									<DsIcon icon="keyboard_arrow_down" size="medium" />
+								</Combobox.Trigger>
+							)}
+						</div>
+					)}
+				</Combobox.Context>
+			</Combobox.Control>
+
+			<Portal>
+				<Combobox.Positioner className={styles.positioner}>
+					<Combobox.Content className={styles.content}>
+						{collection.items.length === 0 ? (
+							<div className={styles.noMatches}>{noMatchesMessage}</div>
+						) : (
+							<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>
+							</Combobox.ItemGroup>
+						)}
+					</Combobox.Content>
+				</Combobox.Positioner>
+			</Portal>
+		</Combobox.Root>
+	);
+};

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

@@ -0,0 +1,76 @@
+import type React from 'react';
+import type { IconName } from '../ds-icon';
+
+export interface DsAutocompleteOption {
+	/**
+	 * Label to display in the autocomplete dropdown
+	 */
+	label: string;
+	/**
+	 * Value to return when the option is selected
+	 */
+	value: string;
+	/**
+	 * Optional icon to display next to the label
+	 */
+	icon?: IconName;
+}
+
+export interface DsAutocompleteProps {
+	/**
+	 * Unique identifier for the autocomplete component
+	 */
+	id?: string;
+	/**
+	 * Options to display in the dropdown
+	 */
+	options: DsAutocompleteOption[];
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: React.CSSProperties;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Placeholder text to display when input is empty
+	 */
+	placeholder?: string;
+	/**
+	 * Whether the autocomplete is disabled
+	 */
+	disabled?: boolean;
+	/**
+	 * 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;
+	/**
+	 * Whether to highlight the matching text in the dropdown options
+	 * @default true
+	 */
+	highlightMatch?: boolean;
+	/**
+	 * Whether to show the dropdown trigger (arrow) button.
+	 * If false, the dropdown will only open on typing.
+	 * @default true
+	 */
+	showTrigger?: boolean;
+	/**
+	 * Content to display at the start of the input (e.g., a search icon).
+	 */
+	startAdornment?: React.ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { DsAutocomplete } from './ds-autocomplete';
+export * from './ds-autocomplete.types';

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

@@ -1,4 +1,4 @@
-@import './mixins';
+@use './mixins' as *;
 
 .avatar {
 	display: inline-flex;

package/src/components/ds-avatar-group/ds-avatar-group.module.scss

@@ -1,4 +1,4 @@
-@import '../ds-avatar/mixins';
+@use '../ds-avatar/mixins' as *;
 
 .avatarGroup {
 	display: flex;

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

@@ -1,121 +1,17 @@
-import type { CSSProperties, ReactNode } from 'react';
-import { Dialog } from '@ark-ui/react/dialog';
-import { Portal } from '@ark-ui/react/portal';
-import classNames from 'classnames';
-import { DsIcon } from '../ds-icon';
+import DsModal from '../ds-modal/ds-modal';
 import type { DsConfirmationProps } from './ds-confirmation.types';
-import styles from './ds-confirmation.module.scss';
-import DsTypography from '../ds-typography/ds-typography';
 
 /**
- * Composable confirmation modal dialog.
+ * @deprecated DsConfirmation is deprecated. Use DsModal instead.
+ * @see {@link ../ds-modal} for the replacement component.
  */
-export const DsConfirmation = ({ open, onOpenChange, style, className, children }: DsConfirmationProps) => {
-	const handleOpenChange = (details: { open: boolean }) => {
-		onOpenChange(details.open);
-	};
-
-	return (
-		<Dialog.Root
-			open={open}
-			onOpenChange={handleOpenChange}
-			modal={true}
-			closeOnEscape={true}
-			closeOnInteractOutside={true}
-		>
-			<Portal>
-				<Dialog.Backdrop className={styles.overlay} />
-				<Dialog.Positioner>
-					<Dialog.Content className={classNames(styles.modal, className)}>
-						<div style={style} className={styles.content}>
-							{children}
-						</div>
-					</Dialog.Content>
-				</Dialog.Positioner>
-			</Portal>
-		</Dialog.Root>
-	);
-};
-
-const Header = ({
-	style,
-	className,
-	children,
-}: {
-	style?: CSSProperties;
-	className?: string;
-	children: ReactNode;
-}) => (
-	<div style={style} className={classNames(styles.header, className)}>
-		{children}
-	</div>
-);
-
-const Title = ({
-	style,
-	className,
-	children,
-}: {
-	style?: CSSProperties;
-	className?: string;
-	children: ReactNode;
-}) => (
-	<Dialog.Title className={classNames(styles.title, className)} style={style} asChild>
-		<DsTypography variant="heading4">{children}</DsTypography>
-	</Dialog.Title>
-);
-
-const CloseTrigger = ({ style, className }: { style?: CSSProperties; className?: string }) => (
-	<Dialog.CloseTrigger style={style} className={className}>
-		<DsIcon icon="close" size="small"></DsIcon>
-	</Dialog.CloseTrigger>
-);
-
-const Body = ({
-	style,
-	className,
-	children,
-}: {
-	style?: CSSProperties;
-	className?: string;
-	children: ReactNode;
-}) => (
-	<div style={style} className={classNames(styles.body, className)}>
-		{children}
-	</div>
-);
-
-const Footer = ({
-	style,
-	className,
-	children,
-}: {
-	style?: CSSProperties;
-	className?: string;
-	children: ReactNode;
-}) => (
-	<div style={style} className={classNames(styles.footer, className)}>
-		{children}
-	</div>
-);
-
-const Actions = ({
-	style,
-	className,
-	children,
-}: {
-	style?: CSSProperties;
-	className?: string;
-	children: ReactNode;
-}) => (
-	<div style={style} className={classNames(styles.actions, className)}>
-		{children}
-	</div>
+export const DsConfirmation = (props: DsConfirmationProps) => (
+	<DsModal columns={4} closeOnEscape closeOnInteractOutside {...props} />
 );
 
-DsConfirmation.Header = Header;
-DsConfirmation.Title = Title;
-DsConfirmation.CloseTrigger = CloseTrigger;
-DsConfirmation.Body = Body;
-DsConfirmation.Footer = Footer;
-DsConfirmation.Actions = Actions;
+DsConfirmation.Header = DsModal.Header;
+DsConfirmation.Title = DsModal.Title;
+DsConfirmation.CloseTrigger = DsModal.CloseTrigger;
+DsConfirmation.Body = DsModal.Body;
+DsConfirmation.Footer = DsModal.Footer;
+DsConfirmation.Actions = DsModal.Actions;

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

@@ -1,7 +1,8 @@
 import type { CSSProperties, ReactNode } from 'react';
 
 /**
- * Props for the DsConfirmation component
+ * @deprecated DsConfirmationProps is deprecated. Use DsModal with variant="info" instead.
+ * @see {@link ../ds-modal/ds-modal} for the replacement.
  */
 export interface DsConfirmationProps {
 	/**

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

@@ -8,7 +8,6 @@
 	max-height: var(--available-height, 400px);
 	overflow-y: auto;
 	width: auto;
-	z-index: var(--layer-index);
 
 	&:focus-visible {
 		outline-offset: 2px;