@drivenets/design-system 0.19.0 → 0.20.0

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);
+}

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

@@ -0,0 +1,237 @@
+import { useRef, useState } from 'react';
+import { DsButtonV3 } from '../../../ds-button-v3';
+import { DsEmptyState } from '../../../ds-empty-state';
+import { DsIcon } from '../../../ds-icon';
+import { DsPopover } from '../../../ds-popover';
+import { DsSpinner } from '../../../ds-spinner';
+import { DsTag } from '../../../ds-tag';
+import styles from './ds-saved-filters-trigger.module.scss';
+import type { DsSavedFiltersTriggerProps } from '../../ds-saved-filters.types';
+import {
+	isThenable,
+	PICKER_GUTTER_PX,
+	resolveLocale,
+	runMaybeAsync,
+	type NamedTarget,
+} from '../../ds-saved-filters.utils';
+import { usePickerOutsideDismiss } from '../../hooks';
+import { DeleteConfirm } from '../ds-saved-filters-delete-confirm';
+import { NameModal } from '../ds-saved-filters-name-modal';
+import { SavedFilterRow } from '../ds-saved-filters-row';
+
+const PICKER_WIDTH_PX = 320;
+
+/**
+ * @summary Tag and picker for named filter snapshots, including rename and delete.
+ *
+ * Internal to the filters component and not exported from the package.
+ */
+export const DsSavedFiltersTrigger = ({
+	items,
+	value,
+	dirty,
+	locale: localeProp,
+	ref,
+	className,
+	style,
+	onValueChange,
+	onClear,
+	onRename,
+	onDelete,
+}: DsSavedFiltersTriggerProps) => {
+	const locale = resolveLocale(localeProp);
+	const [open, setOpen] = useState(false);
+	const [renameTarget, setRenameTarget] = useState<NamedTarget | null>(null);
+	const [deleteTarget, setDeleteTarget] = useState<NamedTarget | null>(null);
+	const [clearing, setClearing] = useState(false);
+	const [renaming, setRenaming] = useState(false);
+	const [deleting, setDeleting] = useState(false);
+	const triggerWrapRef = useRef<HTMLDivElement>(null);
+	const activeItem = items.find((item) => item.id === value);
+	const label = activeItem?.name ?? locale.savedFilters;
+	const hasItems = items.length > 0;
+	const triggerBusy = clearing || renaming || deleting;
+
+	usePickerOutsideDismiss(open, triggerWrapRef, () => setOpen(false));
+
+	const togglePicker = () => {
+		if (triggerBusy) {
+			return;
+		}
+
+		setOpen((current) => !current);
+	};
+
+	const handleApply = (id: string) => {
+		if (triggerBusy) {
+			return;
+		}
+
+		onValueChange(id);
+		setOpen(false);
+	};
+
+	const handleClear = async () => {
+		if (triggerBusy) {
+			return;
+		}
+
+		await runMaybeAsync(onClear(), setClearing);
+	};
+
+	const handleRename = async (name: string) => {
+		if (!renameTarget || triggerBusy) {
+			return;
+		}
+
+		const target = renameTarget;
+		const result = onRename(target.id, name);
+
+		if (!isThenable(result)) {
+			setRenameTarget(null);
+
+			return;
+		}
+
+		setRenaming(true);
+
+		try {
+			await result;
+			setRenameTarget(null);
+		} catch {
+			// Overlay stays open; the consumer handles the error.
+		} finally {
+			setRenaming(false);
+		}
+	};
+
+	const handleDelete = async () => {
+		if (!deleteTarget || triggerBusy) {
+			return;
+		}
+
+		const target = deleteTarget;
+		const result = onDelete(target.id);
+
+		if (!isThenable(result)) {
+			setDeleteTarget(null);
+
+			return;
+		}
+
+		setDeleting(true);
+
+		try {
+			await result;
+			setDeleteTarget(null);
+		} catch {
+			// Overlay stays open; the consumer handles the error.
+		} finally {
+			setDeleting(false);
+		}
+	};
+
+	const tag = (
+		<DsTag
+			ref={ref}
+			className={className}
+			style={style}
+			label={label}
+			selected={Boolean(activeItem)}
+			warning={dirty}
+			slots={{
+				icon: clearing ? (
+					<DsSpinner size="small" />
+				) : (
+					<DsIcon icon="bookmark" size="small" filled={Boolean(activeItem)} />
+				),
+			}}
+			locale={{
+				deleteAriaLabel: locale.clearAriaLabel,
+				expandAriaLabel: locale.expandAriaLabel,
+				warningAriaLabel: locale.unsavedChanges,
+			}}
+			onClick={togglePicker}
+			onDelete={activeItem ? handleClear : undefined}
+			onExpandClick={hasItems ? togglePicker : undefined}
+		/>
+	);
+
+	return (
+		<>
+			<DsPopover.Root
+				open={open}
+				side="bottom"
+				align="start"
+				gutter={PICKER_GUTTER_PX}
+				onInteractOutside={(event) => event.preventDefault()}
+				onOpenChange={setOpen}
+			>
+				<DsPopover.Anchor>
+					<div ref={triggerWrapRef}>{tag}</div>
+				</DsPopover.Anchor>
+				<DsPopover.Panel width={PICKER_WIDTH_PX}>
+					<div className={styles.pickerHeader}>
+						<DsPopover.Header className={styles.pickerTitle}>{locale.savedFilters}</DsPopover.Header>
+						<DsButtonV3
+							className={styles.pickerClose}
+							variant="tertiary"
+							size="small"
+							icon="close"
+							aria-label={locale.close}
+							onClick={() => setOpen(false)}
+						/>
+					</div>
+					<DsPopover.Content className={styles.pickerContent}>
+						{hasItems ? (
+							items.map((item) => (
+								<SavedFilterRow
+									key={item.id}
+									item={item}
+									selected={item.id === value}
+									blocked={triggerBusy}
+									locale={locale}
+									onRename={setRenameTarget}
+									onDelete={setDeleteTarget}
+									onApply={handleApply}
+								/>
+							))
+						) : (
+							<DsEmptyState variant="noData" message={locale.noSavedFilters} />
+						)}
+					</DsPopover.Content>
+				</DsPopover.Panel>
+			</DsPopover.Root>
+			{renameTarget ? (
+				<NameModal
+					title={locale.renameTitle}
+					initialName={renameTarget.name}
+					entryKey={`rename-${renameTarget.id}`}
+					locale={locale}
+					loading={renaming}
+					onSubmit={handleRename}
+					onClose={() => {
+						if (!renaming) {
+							setRenameTarget(null);
+						}
+					}}
+				/>
+			) : null}
+			{deleteTarget ? (
+				<DeleteConfirm
+					target={deleteTarget}
+					locale={locale}
+					loading={deleting}
+					onConfirm={handleDelete}
+					onClose={() => {
+						if (!deleting) {
+							setDeleteTarget(null);
+						}
+					}}
+				/>
+			) : null}
+		</>
+	);
+};
+
+DsSavedFiltersTrigger.displayName = 'DsSavedFilters.Trigger';

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

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

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

@@ -0,0 +1,2 @@
+export { DsSavedFiltersSave } from './ds-saved-filters-save';
+export { DsSavedFiltersTrigger } from './ds-saved-filters-trigger';

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

@@ -0,0 +1,6 @@
+import { DsSavedFiltersSave, DsSavedFiltersTrigger } from './components';
+
+export const DsSavedFilters = {
+	Trigger: DsSavedFiltersTrigger,
+	Save: DsSavedFiltersSave,
+};