@drivenets/design-system 0.18.1 → 0.20.0

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

@@ -0,0 +1,60 @@
+import type { DsPopoverAlign, DsPopoverSide } from './ds-popover.types';
+
+/**
+ * Collapses a side plus alignment into the single placement string Ark expects.
+ * `center` is the implicit alignment, so it carries no suffix.
+ */
+export const toPlacement = (side: DsPopoverSide, align: DsPopoverAlign) =>
+	align === 'center' ? side : (`${side}-${align}` as const);
+
+/**
+ * Whether a pointer can hover at all. Touch fires enter/leave around a tap, which
+ * would open and immediately re-toggle the panel — on those the click owns opening.
+ */
+export const isHoverPointer = (pointerType: string) => pointerType !== 'touch';
+
+/**
+ * Adapts a cancelable DS focus handler into Ark's `initialFocusEl` / `finalFocusEl`.
+ * `preventDefault` keeps the current focus; otherwise Ark picks the default target.
+ */
+export const toFocusEl = (handler: ((event: Event) => void) | undefined, eventName: string) =>
+	handler
+		? () => {
+				const event = new Event(eventName, { cancelable: true });
+				handler(event);
+
+				return event.defaultPrevented ? (document.activeElement as HTMLElement | null) : undefined;
+			}
+		: undefined;
+
+/**
+ * Body and the document element dump keyboard users at the top of the page,
+ * so they are not useful restore targets.
+ */
+const isRestorableFocusTarget = (el: EventTarget | null): el is HTMLElement =>
+	el instanceof HTMLElement && el.isConnected && el !== document.body && el !== document.documentElement;
+
+/**
+ * Runs `onCloseAutoFocus` when Ark's restore is disabled. If the handler
+ * prevents default, focus stays on the element that had it at close time.
+ */
+export const invokeCloseAutoFocus = (handler: (event: Event) => void) => {
+	const event = new Event('closeAutoFocus', { cancelable: true });
+	handler(event);
+
+	if (!event.defaultPrevented) {
+		return;
+	}
+
+	const focused = document.activeElement;
+
+	if (!isRestorableFocusTarget(focused)) {
+		return;
+	}
+
+	requestAnimationFrame(() => {
+		if (focused.isConnected) {
+			focused.focus({ preventScroll: true });
+		}
+	});
+};

package/src/components/ds-popover/ds-popover.utils.unit.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest';
+import { isHoverPointer, toPlacement } from './ds-popover.utils';
+
+describe('toPlacement', () => {
+	it('joins side and alignment', () => {
+		expect(toPlacement('right', 'start')).toBe('right-start');
+		expect(toPlacement('top', 'end')).toBe('top-end');
+	});
+
+	it('drops the suffix for the implicit center alignment', () => {
+		expect(toPlacement('bottom', 'center')).toBe('bottom');
+		expect(toPlacement('left', 'center')).toBe('left');
+	});
+});
+
+describe('isHoverPointer', () => {
+	it('accepts pointers that can hover', () => {
+		expect(isHoverPointer('mouse')).toBe(true);
+		expect(isHoverPointer('pen')).toBe(true);
+	});
+
+	it('rejects touch, so a tap stays a plain click', () => {
+		expect(isHoverPointer('touch')).toBe(false);
+	});
+});

package/src/components/ds-saved-filters/components/ds-saved-filters-delete-confirm.tsx

@@ -0,0 +1,53 @@
+import { DsButtonV3 } from '../../ds-button-v3';
+import { DsModal } from '../../ds-modal';
+import { DsTypography } from '../../ds-typography';
+import {
+	interpolateName,
+	NAME_MODAL_COLUMNS,
+	type Locale,
+	type NamedTarget,
+} from '../ds-saved-filters.utils';
+
+export const DeleteConfirm = ({
+	target,
+	locale,
+	loading,
+	onConfirm,
+	onClose,
+}: {
+	target: NamedTarget;
+	locale: Locale;
+	loading: boolean;
+	onConfirm: () => void;
+	onClose: () => void;
+}) => (
+	<DsModal
+		open
+		columns={NAME_MODAL_COLUMNS}
+		onOpenChange={(next) => {
+			if (!next && !loading) {
+				onClose();
+			}
+		}}
+	>
+		<DsModal.Header>
+			<DsModal.Title>{locale.deleteTitle}</DsModal.Title>
+			<DsModal.CloseTrigger />
+		</DsModal.Header>
+		<DsModal.Body>
+			<DsTypography variant="body-md-reg">{interpolateName(locale.deleteMessage, target.name)}</DsTypography>
+		</DsModal.Body>
+		<DsModal.Footer>
+			<DsModal.Actions>
+				<DsButtonV3 variant="secondary" size="small" disabled={loading} onClick={onClose}>
+					{locale.cancel}
+				</DsButtonV3>
+				<DsButtonV3 color="error" size="small" loading={loading} onClick={onConfirm}>
+					{locale.deleteConfirm}
+				</DsButtonV3>
+			</DsModal.Actions>
+		</DsModal.Footer>
+	</DsModal>
+);
+
+DeleteConfirm.displayName = 'DeleteConfirm';

package/src/components/ds-saved-filters/components/ds-saved-filters-name-entry.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { DsButtonV3 } from '../../ds-button-v3';
+import { DsFormControl } from '../../ds-form-control';
+import { DsStack } from '../../ds-stack';
+
+interface NameEntryFieldsProps {
+	initialName?: string;
+	nameLabel: string;
+	confirmLabel: string;
+	cancelLabel: string;
+	loading?: boolean;
+	onSubmit: (name: string) => void;
+	onCancel: () => void;
+}
+
+export const NameEntryFields = ({
+	initialName = '',
+	nameLabel,
+	confirmLabel,
+	cancelLabel,
+	loading = false,
+	onSubmit,
+	onCancel,
+}: NameEntryFieldsProps) => {
+	const [name, setName] = useState(initialName);
+	const trimmed = name.trim();
+	const confirmDisabled = trimmed.length === 0;
+
+	const handleSubmit = () => {
+		if (confirmDisabled || loading) {
+			return;
+		}
+
+		onSubmit(trimmed);
+	};
+
+	return (
+		<DsStack direction="column" gap="var(--sm)">
+			<DsFormControl label={nameLabel}>
+				<DsFormControl.TextInput
+					value={name}
+					disabled={loading}
+					onValueChange={setName}
+					onKeyDown={(event) => {
+						if (event.key === 'Enter') {
+							event.preventDefault();
+							handleSubmit();
+						}
+					}}
+				/>
+			</DsFormControl>
+			<DsStack direction="row" gap="var(--xs)" justifyContent="flex-end">
+				<DsButtonV3 variant="secondary" size="small" disabled={loading} onClick={onCancel}>
+					{cancelLabel}
+				</DsButtonV3>
+				<DsButtonV3 size="small" disabled={confirmDisabled} loading={loading} onClick={handleSubmit}>
+					{confirmLabel}
+				</DsButtonV3>
+			</DsStack>
+		</DsStack>
+	);
+};
+
+NameEntryFields.displayName = 'NameEntryFields';

package/src/components/ds-saved-filters/components/ds-saved-filters-name-modal.tsx

@@ -0,0 +1,50 @@
+import { DsModal } from '../../ds-modal';
+import { NAME_MODAL_COLUMNS, type Locale } from '../ds-saved-filters.utils';
+import { NameEntryFields } from './ds-saved-filters-name-entry';
+
+export const NameModal = ({
+	title,
+	initialName,
+	entryKey,
+	locale,
+	loading,
+	onSubmit,
+	onClose,
+}: {
+	title: string;
+	initialName: string;
+	entryKey: string;
+	locale: Locale;
+	loading: boolean;
+	onSubmit: (name: string) => void;
+	onClose: () => void;
+}) => (
+	<DsModal
+		open
+		columns={NAME_MODAL_COLUMNS}
+		onOpenChange={(next) => {
+			if (!next && !loading) {
+				onClose();
+			}
+		}}
+	>
+		<DsModal.Header>
+			<DsModal.Title>{title}</DsModal.Title>
+			<DsModal.CloseTrigger />
+		</DsModal.Header>
+		<DsModal.Body>
+			<NameEntryFields
+				key={entryKey}
+				initialName={initialName}
+				nameLabel={locale.nameLabel}
+				confirmLabel={locale.confirm}
+				cancelLabel={locale.cancel}
+				loading={loading}
+				onSubmit={onSubmit}
+				onCancel={onClose}
+			/>
+		</DsModal.Body>
+	</DsModal>
+);
+
+NameModal.displayName = 'NameModal';

package/src/components/ds-saved-filters/components/ds-saved-filters-row/ds-saved-filters-row.module.scss

@@ -0,0 +1,68 @@
+$count-dot-size: 8px;
+
+.row {
+	display: flex;
+	align-items: center;
+	gap: var(--xs);
+	width: 100%;
+	min-height: 20px;
+	border-radius: var(--3xs);
+
+	&[data-selected] {
+		min-height: 26px;
+		padding-block: var(--3xs);
+		background: var(--background-primary-subtle-hover);
+	}
+
+	&:hover {
+		background: var(--background-primary-subtle-hover);
+	}
+}
+
+.rowMain {
+	display: flex;
+	flex: 1;
+	gap: var(--3xs);
+	align-items: center;
+	min-width: 0;
+	padding: 0;
+	border: none;
+	background: transparent;
+	text-align: start;
+	cursor: pointer;
+	color: inherit;
+
+	&:focus-visible {
+		outline: 2px solid var(--border-action-primary);
+		outline-offset: 2px;
+		border-radius: var(--3xs);
+	}
+}
+
+.rowName {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.rowMeta {
+	display: flex;
+	flex-shrink: 0;
+	gap: var(--xs);
+	align-items: center;
+}
+
+.count {
+	display: flex;
+	gap: var(--3xs);
+	align-items: center;
+}
+
+.countDot {
+	flex-shrink: 0;
+	width: $count-dot-size;
+	height: $count-dot-size;
+	border-radius: 9999px;
+	background: var(--color-dap-blue-700);
+}

package/src/components/ds-saved-filters/components/ds-saved-filters-row/ds-saved-filters-row.tsx

@@ -0,0 +1,83 @@
+import type { MouseEvent } from 'react';
+import { DsButtonV3 } from '../../../ds-button-v3';
+import { DsDropdownMenu } from '../../../ds-dropdown-menu';
+import { DsIcon } from '../../../ds-icon';
+import { DsTypography } from '../../../ds-typography';
+import styles from './ds-saved-filters-row.module.scss';
+import type { DsSavedFilterItem } from '../../ds-saved-filters.types';
+import { PICKER_GUTTER_PX, type Locale, type NamedTarget } from '../../ds-saved-filters.utils';
+
+export const SavedFilterRow = ({
+	item,
+	selected,
+	blocked,
+	locale,
+	onApply,
+	onRename,
+	onDelete,
+}: {
+	item: DsSavedFilterItem;
+	selected: boolean;
+	blocked: boolean;
+	locale: Locale;
+	onApply: (id: string) => void;
+	onRename: (target: NamedTarget) => void;
+	onDelete: (target: NamedTarget) => void;
+}) => (
+	<div className={styles.row} data-selected={selected ? '' : undefined}>
+		<button
+			type="button"
+			className={styles.rowMain}
+			aria-pressed={selected}
+			aria-disabled={blocked || undefined}
+			onClick={() => {
+				if (blocked) {
+					return;
+				}
+
+				onApply(item.id);
+			}}
+		>
+			<DsIcon icon="bookmark" size="small" filled={selected} />
+			<DsTypography variant="body-sm-reg" className={styles.rowName}>
+				{item.name}
+			</DsTypography>
+		</button>
+		<div className={styles.rowMeta}>
+			{item.count !== undefined && (
+				<span className={styles.count}>
+					<span className={styles.countDot} />
+					<DsTypography variant="body-xs-semi-bold">{item.count}</DsTypography>
+				</span>
+			)}
+			<DsDropdownMenu.Root positioning={{ placement: 'bottom-end', gutter: PICKER_GUTTER_PX }}>
+				<DsDropdownMenu.Trigger asChild>
+					<DsButtonV3
+						variant="tertiary"
+						size="tiny"
+						icon="more_vert"
+						aria-label={`${locale.rowActions}: ${item.name}`}
+						disabled={blocked}
+						onClick={(event: MouseEvent<HTMLButtonElement>) => event.stopPropagation()}
+					/>
+				</DsDropdownMenu.Trigger>
+				<DsDropdownMenu.Content>
+					<DsDropdownMenu.Item value="rename" onClick={() => onRename({ id: item.id, name: item.name })}>
+						<DsIcon icon="edit" size="small" />
+						{locale.renameFilter}
+					</DsDropdownMenu.Item>
+					<DsDropdownMenu.Item
+						value="delete"
+						variant="error"
+						onClick={() => onDelete({ id: item.id, name: item.name })}
+					>
+						<DsIcon icon="delete" size="small" />
+						{locale.deleteFilter}
+					</DsDropdownMenu.Item>
+				</DsDropdownMenu.Content>
+			</DsDropdownMenu.Root>
+		</div>
+	</div>
+);
+
+SavedFilterRow.displayName = 'SavedFilterRow';

package/src/components/ds-saved-filters/components/ds-saved-filters-row/index.ts

@@ -0,0 +1 @@
+export { SavedFilterRow } from './ds-saved-filters-row';

package/src/components/ds-saved-filters/components/ds-saved-filters-save.tsx

@@ -0,0 +1,164 @@
+import { useState } from 'react';
+import { DsButtonV3 } from '../../ds-button-v3';
+import { DsDropdownMenu } from '../../ds-dropdown-menu';
+import { DsPopover } from '../../ds-popover';
+import type { DsSavedFiltersSaveProps } from '../ds-saved-filters.types';
+import {
+	interpolateName,
+	isThenable,
+	PICKER_GUTTER_PX,
+	resolveLocale,
+	runMaybeAsync,
+} from '../ds-saved-filters.utils';
+import { NameEntryFields } from './ds-saved-filters-name-entry';
+import { NameModal } from './ds-saved-filters-name-modal';
+
+const NAME_POPOVER_WIDTH_PX = 320;
+
+/**
+ * @summary Save control for the current filter document: update or save as new.
+ *
+ * Internal to the filters component and not exported from the package.
+ */
+export const DsSavedFiltersSave = ({
+	items,
+	value,
+	disabled = false,
+	locale: localeProp,
+	ref,
+	className,
+	style,
+	onUpdate,
+	onSaveAs,
+}: DsSavedFiltersSaveProps) => {
+	const locale = resolveLocale(localeProp);
+	const [nameOpen, setNameOpen] = useState(false);
+	const [saveAsOpen, setSaveAsOpen] = useState(false);
+	const [updating, setUpdating] = useState(false);
+	const [savingAs, setSavingAs] = useState(false);
+	const activeItem = items.find((item) => item.id === value);
+	const saveBusy = updating || savingAs;
+
+	const handleUpdate = async () => {
+		if (saveBusy) {
+			return;
+		}
+
+		await runMaybeAsync(onUpdate(), setUpdating);
+	};
+
+	const handleSaveAs = async (name: string) => {
+		if (saveBusy) {
+			return;
+		}
+
+		const result = onSaveAs(name);
+
+		if (!isThenable(result)) {
+			setSaveAsOpen(false);
+			setNameOpen(false);
+
+			return;
+		}
+
+		setSavingAs(true);
+
+		try {
+			await result;
+			setSaveAsOpen(false);
+			setNameOpen(false);
+		} catch {
+			// Overlay stays open; the consumer handles the error.
+		} finally {
+			setSavingAs(false);
+		}
+	};
+
+	const saveButton = (
+		<DsButtonV3
+			ref={ref}
+			className={className}
+			style={style}
+			variant="tertiary"
+			size="small"
+			icon="bookmark_add"
+			disabled={disabled}
+			loading={updating}
+		>
+			{locale.saveFilter}
+		</DsButtonV3>
+	);
+
+	if (activeItem) {
+		return (
+			<>
+				<DsDropdownMenu.Root>
+					<DsDropdownMenu.Trigger asChild>{saveButton}</DsDropdownMenu.Trigger>
+					<DsDropdownMenu.Content>
+						<DsDropdownMenu.Item value="update" disabled={saveBusy} onClick={handleUpdate}>
+							{interpolateName(locale.updateFilter, activeItem.name)}
+						</DsDropdownMenu.Item>
+						<DsDropdownMenu.Item value="saveAs" disabled={saveBusy} onClick={() => setSaveAsOpen(true)}>
+							{locale.saveAsNew}
+						</DsDropdownMenu.Item>
+					</DsDropdownMenu.Content>
+				</DsDropdownMenu.Root>
+				{saveAsOpen ? (
+					<NameModal
+						title={locale.saveAsTitle}
+						initialName=""
+						entryKey="saveAs"
+						locale={locale}
+						loading={savingAs}
+						onSubmit={handleSaveAs}
+						onClose={() => {
+							if (!savingAs) {
+								setSaveAsOpen(false);
+							}
+						}}
+					/>
+				) : null}
+			</>
+		);
+	}
+
+	return (
+		<DsPopover.Root
+			open={nameOpen}
+			side="bottom"
+			align="start"
+			gutter={PICKER_GUTTER_PX}
+			onOpenChange={(next) => {
+				if (savingAs) {
+					return;
+				}
+
+				setNameOpen(next);
+			}}
+		>
+			<DsPopover.Trigger>{saveButton}</DsPopover.Trigger>
+			<DsPopover.Panel width={NAME_POPOVER_WIDTH_PX}>
+				<DsPopover.Header>{locale.saveAsTitle}</DsPopover.Header>
+				<DsPopover.Content>
+					{nameOpen ? (
+						<NameEntryFields
+							key="save-popover"
+							nameLabel={locale.nameLabel}
+							confirmLabel={locale.confirm}
+							cancelLabel={locale.cancel}
+							loading={savingAs}
+							onSubmit={handleSaveAs}
+							onCancel={() => {
+								if (!savingAs) {
+									setNameOpen(false);
+								}
+							}}
+						/>
+					) : null}
+				</DsPopover.Content>
+			</DsPopover.Panel>
+		</DsPopover.Root>
+	);
+};
+
+DsSavedFiltersSave.displayName = 'DsSavedFilters.Save';

package/src/components/ds-saved-filters/components/ds-saved-filters-trigger/ds-saved-filters-trigger.module.scss

@@ -0,0 +1,21 @@
+.pickerHeader {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	border-bottom: 1px solid var(--border);
+}
+
+.pickerTitle {
+	flex: 1;
+	min-width: 0;
+	border-bottom: none;
+}
+
+.pickerClose {
+	flex-shrink: 0;
+	margin-inline-end: var(--sm);
+}
+
+.pickerContent {
+	padding: var(--standard);
+}