@drivenets/design-system 0.18.1 → 0.20.0

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

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

@@ -0,0 +1,106 @@
+import type { CSSProperties, Ref } from 'react';
+
+export interface DsSavedFilterItem {
+	id: string;
+	name: string;
+	/**
+	 * Number of **Filter conditions** in this snapshot. Omit to hide the trailing count.
+	 */
+	count?: number;
+}
+
+export interface DsSavedFiltersLocale {
+	savedFilters?: string;
+	noSavedFilters?: string;
+	saveFilter?: string;
+	/**
+	 * Menu item for overwriting the active snapshot. `{name}` is replaced with the active name.
+	 */
+	updateFilter?: string;
+	saveAsNew?: string;
+	renameFilter?: string;
+	deleteFilter?: string;
+	nameLabel?: string;
+	confirm?: string;
+	cancel?: string;
+	close?: string;
+	unsavedChanges?: string;
+	rowActions?: string;
+	expandAriaLabel?: string;
+	clearAriaLabel?: string;
+	saveAsTitle?: string;
+	renameTitle?: string;
+	deleteTitle?: string;
+	/**
+	 * Confirmation body. `{name}` is replaced with the snapshot name.
+	 */
+	deleteMessage?: string;
+	deleteConfirm?: string;
+}
+
+export const defaultDsSavedFiltersLocale: Required<DsSavedFiltersLocale> = Object.freeze({
+	savedFilters: 'Saved filters',
+	noSavedFilters: 'No saved filters yet. Build a filter, then choose “Save filter”.',
+	saveFilter: 'Save filter',
+	updateFilter: 'Update “{name}”',
+	saveAsNew: 'Save as a new filter',
+	renameFilter: 'Rename filter',
+	deleteFilter: 'Delete filter',
+	nameLabel: 'Filter name',
+	confirm: 'Save',
+	cancel: 'Cancel',
+	close: 'Close',
+	unsavedChanges: 'Unsaved changes',
+	rowActions: 'Filter actions',
+	expandAriaLabel: 'Open saved filters',
+	clearAriaLabel: 'Clear filters',
+	saveAsTitle: 'Save as a new filter',
+	renameTitle: 'Rename filter',
+	deleteTitle: 'Delete filter',
+	deleteMessage: 'Delete “{name}”? This cannot be undone.',
+	deleteConfirm: 'Delete',
+});
+
+/**
+ * Return a Promise to keep the launching control in a loading state until it settles.
+ */
+export type DsSavedFiltersAsyncHandler<Args extends unknown[] = []> = (...args: Args) => void | Promise<void>;
+
+export interface DsSavedFiltersTriggerProps {
+	items: ReadonlyArray<DsSavedFilterItem>;
+	/**
+	 * Id of the **Active saved filter**, or `null` when none is applied.
+	 */
+	value: string | null;
+	/**
+	 * Whether the working document diverged from the **Active saved filter**.
+	 */
+	dirty?: boolean;
+	locale?: DsSavedFiltersLocale;
+	ref?: Ref<HTMLDivElement>;
+	className?: string;
+	style?: CSSProperties;
+	onValueChange: (id: string | null) => void;
+	onClear: DsSavedFiltersAsyncHandler;
+	onRename: DsSavedFiltersAsyncHandler<[id: string, name: string]>;
+	onDelete: DsSavedFiltersAsyncHandler<[id: string]>;
+}
+
+export interface DsSavedFiltersSaveProps {
+	items: ReadonlyArray<DsSavedFilterItem>;
+	/**
+	 * Id of the **Active saved filter**, or `null` when none is applied.
+	 */
+	value: string | null;
+	/**
+	 * Blocks saving, for example while there is nothing to save
+	 * @default false
+	 */
+	disabled?: boolean;
+	locale?: DsSavedFiltersLocale;
+	ref?: Ref<HTMLButtonElement>;
+	className?: string;
+	style?: CSSProperties;
+	onUpdate: DsSavedFiltersAsyncHandler;
+	onSaveAs: DsSavedFiltersAsyncHandler<[name: string]>;
+}

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

@@ -0,0 +1,35 @@
+import { defaultDsSavedFiltersLocale, type DsSavedFiltersLocale } from './ds-saved-filters.types';
+
+export const PICKER_GUTTER_PX = 4;
+export const NAME_MODAL_COLUMNS = 4;
+
+export type Locale = Required<DsSavedFiltersLocale>;
+export type NamedTarget = { id: string; name: string };
+
+export const resolveLocale = (locale?: DsSavedFiltersLocale): Locale => ({
+	...defaultDsSavedFiltersLocale,
+	...locale,
+});
+
+export const interpolateName = (template: string, name: string) => template.replace('{name}', name);
+
+export const isThenable = (value: unknown): value is Promise<unknown> =>
+	typeof value === 'object' && value !== null && typeof (value as Promise<unknown>).then === 'function';
+
+export const runMaybeAsync = async (result: void | Promise<void>, setBusy: (busy: boolean) => void) => {
+	if (!isThenable(result)) {
+		return true;
+	}
+
+	setBusy(true);
+
+	try {
+		await result;
+
+		return true;
+	} catch {
+		return false;
+	} finally {
+		setBusy(false);
+	}
+};

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

@@ -0,0 +1 @@
+export { usePickerOutsideDismiss } from './use-picker-outside-dismiss';

package/src/components/ds-saved-filters/hooks/use-picker-outside-dismiss.ts

@@ -0,0 +1,42 @@
+import { useEffect, type RefObject } from 'react';
+
+const OVERLAY_SCOPES = '[data-scope="popover"], [data-scope="menu"], [data-scope="dialog"]';
+
+const isPickerDismissTarget = (event: Event, triggerEl: HTMLElement | null) => {
+	const path = event.composedPath();
+
+	if (triggerEl && path.includes(triggerEl)) {
+		return true;
+	}
+
+	return path.some((node) => node instanceof Element && Boolean(node.closest(OVERLAY_SCOPES)));
+};
+
+/**
+ * Closes the picker on a real outside pointer.
+ * Ark interact-outside is suppressed so portaled menus/dialogs stay usable;
+ * this restores dismiss without treating those layers as outside.
+ */
+export const usePickerOutsideDismiss = (
+	enabled: boolean,
+	triggerEl: RefObject<HTMLElement | null>,
+	onDismiss: () => void,
+) => {
+	useEffect(() => {
+		if (!enabled) {
+			return;
+		}
+
+		const onPointerDown = (event: PointerEvent) => {
+			if (isPickerDismissTarget(event, triggerEl.current)) {
+				return;
+			}
+
+			onDismiss();
+		};
+
+		document.addEventListener('pointerdown', onPointerDown);
+
+		return () => document.removeEventListener('pointerdown', onPointerDown);
+	}, [enabled, triggerEl, onDismiss]);
+};

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

@@ -0,0 +1,2 @@
+export { DsSavedFilters } from './ds-saved-filters';
+export type { DsSavedFiltersSaveProps, DsSavedFiltersTriggerProps } from './ds-saved-filters.types';

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

@@ -1,20 +1,30 @@
+$transition-duration: 0.2s;
+$focus-border-width: 2px;
+
+@mixin item-size($height, $inline-padding) {
+	height: $height;
+	padding: 0 $inline-padding;
+
+	&:not(:has(.segmentItemText)) {
+		width: $height;
+		padding: 0;
+	}
+}
+
 .segmentGroupRoot {
 	display: inline-flex;
 	align-items: center;
 	position: relative;
+	box-sizing: border-box;
+	padding: var(--3xs);
+	gap: var(--2xs);
 	background: var(--background-secondary);
 	border: 1px solid var(--border-contrast);
-	border-radius: 4px;
-	gap: var(--2xs);
-	height: 36px;
-	padding: var(--3xs);
+	border-radius: var(--3xs);
 
 	&.small {
-		height: 28px;
-		padding: var(--4xs);
-
 		.segmentItem {
-			padding: var(--4xs) var(--xs);
+			@include item-size(var(--lg), var(--xs));
 		}
 	}
 }
@@ -24,49 +34,68 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	padding: var(--3xs) var(--sm);
-	gap: var(--2xs);
-	flex: 1;
+	box-sizing: border-box;
 	z-index: 1;
+	gap: var(--3xs);
+	@include item-size(var(--xl), var(--sm));
+	border: 1px solid transparent;
+	border-radius: var(--3xs);
+	color: var(--font-main);
 	cursor: pointer;
-	border-radius: 4px;
-
-	&[data-state='checked'] {
-		.segmentItemText {
-			color: var(--font-main);
-			font-weight: var(--font-weight-medium);
-		}
-	}
+	transition:
+		background-color $transition-duration,
+		border-color $transition-duration,
+		color $transition-duration,
+		border-width $transition-duration;
 
 	&[data-state='unchecked'] {
 		background: transparent;
 
-		.segmentItemText {
-			color: var(--background-action);
+		&:hover:not([data-disabled]) {
+			background: var(--background);
 		}
 
+		&:active:not([data-disabled]) {
+			background: var(--background-tertiary);
+		}
+
+		&[data-focus-visible]:not([data-disabled]) {
+			background: var(--background-action-hover-weak);
+			border-width: $focus-border-width;
+			border-color: var(--border-action-secondary);
+		}
+	}
+
+	&[data-state='checked'] {
 		&:hover:not([data-disabled]) {
-			background: var(--background-action-secondary);
+			background: var(--background-action-hover-weak);
+			border-color: var(--border);
 		}
 
 		&:active:not([data-disabled]) {
-			background: var(--background);
-			border-color: var(--border-contrast);
+			background: var(--background-secondary-selected-weak);
+			border-color: var(--border-action-secondary);
+		}
+
+		&[data-focus-visible]:not([data-disabled]) {
+			background: var(--background-secondary-selected-weak);
+			border-width: $focus-border-width;
+			border-color: var(--border-action-secondary);
 		}
 	}
 
 	&[data-disabled] {
 		cursor: not-allowed;
-		background: var(--background-secondary);
+		color: var(--font-disabled);
 
-		.segmentItemText {
-			color: var(--font-disabled);
+		&[data-state='unchecked'] {
+			background: transparent;
 		}
-	}
 
-	&:focus-visible {
-		outline: 2px solid var(--border-action-secondary);
-		outline-offset: 2px;
+		&[data-state='checked'] {
+			background: var(--background);
+			border-color: var(--border-disabled);
+		}
 	}
 }
 
@@ -81,19 +110,18 @@
 	align-items: center;
 	justify-content: center;
 	white-space: nowrap;
-	transition: color 150ms ease-in-out;
+	transition: color $transition-duration;
 }
 
 .segmentIndicator {
 	position: absolute;
-	background: var(--background);
-	border: 1px solid var(--border-contrast);
-	border-radius: 4px;
-	box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.25);
 	z-index: 0;
-	pointer-events: none;
 	width: var(--width);
 	height: var(--height);
 	left: var(--left);
 	top: var(--top);
+	background: var(--background);
+	border: 1px solid var(--border);
+	border-radius: var(--3xs);
+	pointer-events: none;
 }

package/src/components/ds-segment-group/ds-segment-group.tsx

@@ -32,7 +32,15 @@ const Root: React.FC<DsSegmentGroupRootProps> = ({
 /**
  * Item component - renders a single segment button
  */
-const Item: React.FC<DsSegmentGroupItemProps> = ({ value, label, className, style, children, ...props }) => {
+const Item: React.FC<DsSegmentGroupItemProps> = ({
+	value,
+	label,
+	className,
+	style,
+	children,
+	size = 'default',
+	...props
+}) => {
 	return (
 		<SegmentGroup.Item
 			value={value}
@@ -40,7 +48,7 @@ const Item: React.FC<DsSegmentGroupItemProps> = ({ value, label, className, styl
 			style={style}
 			{...props}
 		>
-			{label ? <ItemText>{label}</ItemText> : children}
+			{label ? <ItemText size={size}>{label}</ItemText> : children}
 			<SegmentGroup.ItemControl />
 			<SegmentGroup.ItemHiddenInput />
 		</SegmentGroup.Item>
@@ -50,9 +58,14 @@ const Item: React.FC<DsSegmentGroupItemProps> = ({ value, label, className, styl
 /**
  * ItemText component - renders text content within an item
  */
-const ItemText: React.FC<DsSegmentGroupItemTextProps> = ({ className, children, ...props }) => (
+const ItemText: React.FC<DsSegmentGroupItemTextProps> = ({
+	className,
+	children,
+	size = 'default',
+	...props
+}) => (
 	<SegmentGroup.ItemText className={classNames(styles.segmentItemText, className)} {...props} asChild>
-		<DsTypography variant="body-sm-reg">{children}</DsTypography>
+		<DsTypography variant={size === 'small' ? 'body-xs-md' : 'body-sm-md'}>{children}</DsTypography>
 	</SegmentGroup.ItemText>
 );
 
@@ -61,7 +74,6 @@ const ItemText: React.FC<DsSegmentGroupItemTextProps> = ({ className, children,
  *
  * @example
  * <DsSegmentGroup.Root value={value} onValueChange={setValue} size="default">
- *   <DsSegmentGroup.Indicator />
  *   <DsSegmentGroup.Item value="option1" label="Option 1" />
  *   <DsSegmentGroup.Item value="option2">
  *     <DsIcon icon="settings" />

package/src/components/ds-segment-group/ds-segment-group.types.ts

@@ -8,7 +8,8 @@ import {
 /**
  * Size variants for the segment group
  */
-export type DsSegmentGroupSize = 'small' | 'default';
+export const segmentGroupSizes = ['small', 'default'] as const;
+export type DsSegmentGroupSize = (typeof segmentGroupSizes)[number];
 
 /**
  * Props for the DsSegmentGroup Root component
@@ -50,9 +51,14 @@ export interface DsSegmentGroupRootProps extends Pick<
  */
 export type DsSegmentGroupItemProps = Pick<
 	SegmentGroupItemProps,
-	'id' | 'value' | 'disabled' | 'className' | 'style'
-> &
-	(
+	'id' | 'value' | 'disabled' | 'className' | 'style' | 'aria-label'
+> & {
+	/**
+	 * Size variant of the segment item. Pass through to `ItemText` when using `label`.
+	 * @default 'default'
+	 */
+	size?: DsSegmentGroupSize;
+} & (
 		| {
 				/**
 				 * The segment group item content
@@ -78,4 +84,13 @@ export type DsSegmentGroupItemProps = Pick<
 /**
  * Props for the DsSegmentGroup ItemText component
  */
-export type DsSegmentGroupItemTextProps = Pick<SegmentGroupItemTextProps, 'className' | 'style' | 'children'>;
+export type DsSegmentGroupItemTextProps = Pick<
+	SegmentGroupItemTextProps,
+	'className' | 'style' | 'children'
+> & {
+	/**
+	 * Size variant of the item text
+	 * @default 'default'
+	 */
+	size?: DsSegmentGroupSize;
+};