@drivenets/design-system 0.19.0 → 0.20.0

package/src/components/ds-pin-toggle/index.ts

@@ -0,0 +1,2 @@
+export { default as DsPinToggle } from './ds-pin-toggle';
+export * from './ds-pin-toggle.types';

package/src/components/ds-popover/components/popover-trigger/index.ts

@@ -0,0 +1 @@
+export { PopoverTrigger } from './popover-trigger';

package/src/components/ds-popover/components/popover-trigger/popover-trigger.tsx

@@ -0,0 +1,15 @@
+import { Popover } from '@ark-ui/react/popover';
+import { useHoverTriggerProps } from '../../ds-popover.hover-intent';
+import type { DsPopoverTriggerProps } from '../../ds-popover.types';
+
+export const PopoverTrigger = ({ children, className }: DsPopoverTriggerProps) => {
+	const hoverProps = useHoverTriggerProps();
+
+	return (
+		<Popover.Trigger asChild className={className} {...hoverProps}>
+			{children}
+		</Popover.Trigger>
+	);
+};
+
+PopoverTrigger.displayName = 'DsPopover.Trigger';

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

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+import type { HoverIntent } from './ds-popover.hover-intent';
+
+export interface DsPopoverContextValue {
+	matchAnchorWidth: boolean;
+	registerAnchor: (el: HTMLElement | null) => void;
+	registerContentId: (id: string | undefined) => void;
+	hoverIntent: HoverIntent | null;
+}
+
+export const DsPopoverContext = createContext<DsPopoverContextValue>({
+	matchAnchorWidth: false,
+	registerAnchor: () => undefined,
+	registerContentId: () => undefined,
+	hoverIntent: null,
+});
+
+export const useDsPopoverContext = () => useContext(DsPopoverContext);

package/src/components/ds-popover/ds-popover.hover-intent.ts

@@ -0,0 +1,65 @@
+import type { FocusEvent, PointerEvent } from 'react';
+import { usePopoverContext } from '@ark-ui/react/popover';
+import { useDsPopoverContext } from './ds-popover.context';
+import { isHoverPointer } from './ds-popover.utils';
+
+export const DEFAULT_OPEN_DELAY_MS = 200;
+export const DEFAULT_CLOSE_DELAY_MS = 150;
+
+export interface HoverIntent {
+	openDelay: number;
+	closeDelay: number;
+	setFocusInPanel: (inPanel: boolean) => void;
+	/** True once if the trigger is about to be re-focused by Ark's close-time restore. */
+	consumeFocusRestore: () => boolean;
+	/** Owns one shared timer */
+	schedule: (action: () => void, delay: number) => void;
+}
+
+const useHoverIntent = () => useDsPopoverContext().hoverIntent;
+
+export const useHoverIntentProps = () => {
+	const intent = useHoverIntent();
+	const { setOpen } = usePopoverContext();
+
+	if (!intent) {
+		return undefined;
+	}
+
+	const onPointerIntent = (event: PointerEvent, open: boolean, delay: number) => {
+		if (!isHoverPointer(event.pointerType)) {
+			return;
+		}
+
+		intent.schedule(() => setOpen(open), delay);
+	};
+
+	return {
+		onPointerEnter: (event: PointerEvent) => onPointerIntent(event, true, intent.openDelay),
+		onPointerLeave: (event: PointerEvent) => onPointerIntent(event, false, intent.closeDelay),
+	};
+};
+
+export const useHoverTriggerProps = () => {
+	const pointerProps = useHoverIntentProps();
+	const intent = useHoverIntent();
+	const { setOpen } = usePopoverContext();
+
+	if (!intent) {
+		return undefined;
+	}
+
+	return {
+		...pointerProps,
+		onFocus: (event: FocusEvent<HTMLElement>) => {
+			// Closing with focus inside the panel makes Ark re-focus the trigger
+			if (intent.consumeFocusRestore()) {
+				return;
+			}
+
+			if (event.target.matches(':focus-visible')) {
+				setOpen(true);
+			}
+		},
+	};
+};

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

@@ -1,11 +1,20 @@
-import { Popover } from '@ark-ui/react/popover';
+import { useEffect, useLayoutEffect, useRef, useState, type FocusEvent } from 'react';
+import { Popover, type PopoverRootProps } from '@ark-ui/react/popover';
 import { Portal } from '@ark-ui/react/portal';
 import classNames from 'classnames';
 import { DsStack } from '../ds-stack';
 import { DsTypography } from '../ds-typography';
+import { PopoverTrigger } from './components/popover-trigger';
+import { DsPopoverContext, useDsPopoverContext } from './ds-popover.context';
+import {
+	DEFAULT_CLOSE_DELAY_MS,
+	DEFAULT_OPEN_DELAY_MS,
+	useHoverIntentProps,
+} from './ds-popover.hover-intent';
+import { invokeCloseAutoFocus, toFocusEl, toPlacement } from './ds-popover.utils';
 import styles from './ds-popover.module.scss';
 import type {
-	DsPopoverAlign,
+	DsPopoverAnchorProps,
 	DsPopoverContentItemProps,
 	DsPopoverContentProps,
 	DsPopoverFooterProps,
@@ -13,14 +22,10 @@ import type {
 	DsPopoverPanelProps,
 	DsPopoverProps,
 	DsPopoverRootProps,
-	DsPopoverSide,
-	DsPopoverTriggerProps,
 } from './ds-popover.types';
 
 const DEFAULT_PANEL_WIDTH = 400;
-
-export const toPlacement = (side: DsPopoverSide, align: DsPopoverAlign) =>
-	align === 'center' ? side : (`${side}-${align}` as const);
+const MATCHED_PANEL_WIDTH = 'var(--reference-width)';
 
 const DsPopoverRoot = ({
 	open,
@@ -29,48 +34,164 @@ const DsPopoverRoot = ({
 	align = 'center',
 	gutter = 8,
 	modal = false,
+	matchAnchorWidth = false,
+	restoreFocus,
+	openOn = 'click',
+	openDelay = DEFAULT_OPEN_DELAY_MS,
+	closeDelay = DEFAULT_CLOSE_DELAY_MS,
 	getAnchorElement,
 	children,
+	onOpenAutoFocus,
+	onCloseAutoFocus,
+	onInteractOutside,
 	onOpenChange,
-}: DsPopoverRootProps) => (
-	<Popover.Root
-		open={open}
-		defaultOpen={defaultOpen}
-		modal={modal}
-		positioning={{ placement: toPlacement(side, align), gutter, getAnchorElement }}
-		onOpenChange={(details) => onOpenChange?.(details.open)}
-	>
-		{children}
-	</Popover.Root>
-);
+}: DsPopoverRootProps) => {
+	const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+	const anchorRef = useRef<HTMLElement | null>(null);
+	const restoringFocus = useRef(false);
+	const [contentId, setContentId] = useState<string>();
+	const [focusInPanel, setFocusInPanel] = useState(false);
 
-const DsPopoverTrigger = ({ children, className }: DsPopoverTriggerProps) => (
-	<Popover.Trigger asChild className={className}>
-		{children}
-	</Popover.Trigger>
-);
+	useEffect(() => () => clearTimeout(timer.current), []);
+
+	const schedule = (action: () => void, delay: number) => {
+		clearTimeout(timer.current);
+		timer.current = setTimeout(action, delay);
+	};
+
+	const isHover = openOn === 'hover';
+
+	const consumeFocusRestore = () => {
+		const restoring = restoringFocus.current;
+		restoringFocus.current = false;
+
+		return restoring;
+	};
+
+	const registerAnchor = (el: HTMLElement | null) => {
+		anchorRef.current = el;
+	};
+
+	const ownsCloseFocus = restoreFocus === false && Boolean(onCloseAutoFocus);
+	const initialFocusEl = toFocusEl(onOpenAutoFocus, 'openAutoFocus') as PopoverRootProps['initialFocusEl'];
+	const finalFocusEl = ownsCloseFocus
+		? undefined
+		: (toFocusEl(onCloseAutoFocus, 'closeAutoFocus') as PopoverRootProps['finalFocusEl']);
+	const arkRestoreFocus = ownsCloseFocus ? false : (restoreFocus ?? (!isHover || focusInPanel));
+
+	return (
+		<DsPopoverContext.Provider
+			value={{
+				matchAnchorWidth,
+				registerAnchor,
+				registerContentId: setContentId,
+				hoverIntent: isHover
+					? { openDelay, closeDelay, schedule, setFocusInPanel, consumeFocusRestore }
+					: null,
+			}}
+		>
+			<Popover.Root
+				open={open}
+				defaultOpen={defaultOpen}
+				modal={modal}
+				ids={contentId ? { content: contentId } : undefined}
+				// Trigger focus is lost when open on hover
+				// eslint-disable-next-line jsx-a11y/no-autofocus
+				autoFocus={!isHover}
+				restoreFocus={arkRestoreFocus}
+				positioning={{
+					placement: toPlacement(side, align),
+					gutter,
+					sameWidth: matchAnchorWidth,
+					...(getAnchorElement ? { getAnchorElement } : {}),
+				}}
+				initialFocusEl={initialFocusEl}
+				finalFocusEl={finalFocusEl}
+				persistentElements={[() => anchorRef.current]}
+				onInteractOutside={
+					onInteractOutside
+						? (event) => {
+								const dsEvent = new Event('interactOutside', { cancelable: true });
+								onInteractOutside(dsEvent);
+
+								if (dsEvent.defaultPrevented) {
+									event.preventDefault();
+								}
+							}
+						: undefined
+				}
+				onOpenChange={(details) => {
+					if (!details.open && focusInPanel) {
+						restoringFocus.current = true;
+					}
+
+					if (!details.open && ownsCloseFocus && onCloseAutoFocus) {
+						invokeCloseAutoFocus(onCloseAutoFocus);
+					}
+
+					onOpenChange?.(details.open);
+				}}
+			>
+				{children}
+			</Popover.Root>
+		</DsPopoverContext.Provider>
+	);
+};
+
+const DsPopoverAnchor = ({ children, className }: DsPopoverAnchorProps) => {
+	const { registerAnchor } = useDsPopoverContext();
+
+	return (
+		<Popover.Anchor asChild className={className} ref={registerAnchor}>
+			{children}
+		</Popover.Anchor>
+	);
+};
 
 const DsPopoverPanel = ({
-	width = DEFAULT_PANEL_WIDTH,
+	width,
 	className,
 	style,
 	children,
 	ref,
+	id,
 	'aria-label': ariaLabel,
-}: DsPopoverPanelProps) => (
-	<Portal>
-		<Popover.Positioner>
-			<Popover.Content
-				ref={ref}
-				aria-label={ariaLabel}
-				className={classNames(styles.panel, className)}
-				style={{ ...style, width }}
-			>
-				{children}
-			</Popover.Content>
-		</Popover.Positioner>
-	</Portal>
-);
+}: DsPopoverPanelProps) => {
+	const { matchAnchorWidth, registerContentId, hoverIntent } = useDsPopoverContext();
+	const hoverProps = useHoverIntentProps();
+	const resolvedWidth = width ?? (matchAnchorWidth ? MATCHED_PANEL_WIDTH : DEFAULT_PANEL_WIDTH);
+
+	useLayoutEffect(() => {
+		registerContentId(id);
+
+		return () => registerContentId(undefined);
+	}, [id, registerContentId]);
+
+	const onFocus = () => hoverIntent?.setFocusInPanel(true);
+	const onBlur = (event: FocusEvent<HTMLDivElement>) => {
+		if (!event.currentTarget.contains(event.relatedTarget)) {
+			hoverIntent?.setFocusInPanel(false);
+		}
+	};
+
+	return (
+		<Portal>
+			<Popover.Positioner>
+				<Popover.Content
+					{...hoverProps}
+					onFocus={onFocus}
+					onBlur={onBlur}
+					ref={ref}
+					aria-label={ariaLabel}
+					className={classNames(styles.panel, className)}
+					style={{ ...style, width: resolvedWidth }}
+				>
+					{children}
+				</Popover.Content>
+			</Popover.Positioner>
+		</Portal>
+	);
+};
 
 const DsPopoverHeader = ({ icon, className, style, children }: DsPopoverHeaderProps) => (
 	<div className={classNames(styles.header, className)} style={style}>
@@ -142,14 +263,14 @@ const DsPopoverLegacy = ({
 	align = 'center',
 }: DsPopoverProps) => (
 	<DsPopoverRoot side={side} align={align}>
-		<DsPopoverTrigger>{trigger}</DsPopoverTrigger>
+		<PopoverTrigger>{trigger}</PopoverTrigger>
 		<DsPopoverPanel className={className}>{children}</DsPopoverPanel>
 	</DsPopoverRoot>
 );
 
 DsPopoverLegacy.displayName = 'DsPopover';
 DsPopoverRoot.displayName = 'DsPopover.Root';
-DsPopoverTrigger.displayName = 'DsPopover.Trigger';
+DsPopoverAnchor.displayName = 'DsPopover.Anchor';
 DsPopoverPanel.displayName = 'DsPopover.Panel';
 DsPopoverHeader.displayName = 'DsPopover.Header';
 DsPopoverContent.displayName = 'DsPopover.Content';
@@ -158,7 +279,8 @@ DsPopoverFooter.displayName = 'DsPopover.Footer';
 
 export const DsPopover = Object.assign(DsPopoverLegacy, {
 	Root: DsPopoverRoot,
-	Trigger: DsPopoverTrigger,
+	Trigger: PopoverTrigger,
+	Anchor: DsPopoverAnchor,
 	Panel: DsPopoverPanel,
 	Header: DsPopoverHeader,
 	Content: DsPopoverContent,

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

@@ -6,6 +6,9 @@ export type DsPopoverSide = (typeof popoverSides)[number];
 export const popoverAligns = ['start', 'center', 'end'] as const;
 export type DsPopoverAlign = (typeof popoverAligns)[number];
 
+export const popoverOpenTriggers = ['click', 'hover'] as const;
+export type DsPopoverOpenTrigger = (typeof popoverOpenTriggers)[number];
+
 export interface DsPopoverRootProps {
 	/** Controlled open state. Pair with `onOpenChange`. */
 	open?: boolean;
@@ -31,14 +34,62 @@ export interface DsPopoverRootProps {
 	 * @default false
 	 */
 	modal?: boolean;
+	/**
+	 * Size the panel to the positioning reference (Anchor, or the trigger).
+	 * An explicit `DsPopover.Panel` `width` wins over this.
+	 * @default false
+	 */
+	matchAnchorWidth?: boolean;
+	/**
+	 * Whether to restore focus to the previously focused element on close.
+	 * @default true
+	 */
+	restoreFocus?: boolean;
+	/**
+	 * Trigger open method - click / hover
+	 * @default 'click'
+	 */
+	openOn?: DsPopoverOpenTrigger;
+	/**
+	 * Milliseconds the pointer must rest on the trigger before the panel opens.
+	 * Ignored unless `openOn` is `'hover'`.
+	 * @default 200
+	 */
+	openDelay?: number;
+	/**
+	 * Milliseconds after the pointer leaves the trigger or the panel before it
+	 * closes. Ignored unless `openOn` is `'hover'`.
+	 * @default 150
+	 */
+	closeDelay?: number;
 	/**
 	 * Returns the element the panel should position against.
 	 * When provided, the panel anchors to this element instead of the trigger —
 	 * useful when the trigger lives in one place (e.g. a sidebar) and the panel
-	 * should appear relative to a different reference point.
+	 * should appear relative to a different reference point. Prefer `DsPopover.Anchor`
+	 * when the reference is in the tree.
 	 */
 	getAnchorElement?: () => HTMLElement | null;
 	children: ReactNode;
+	/**
+	 * Called when focus is about to move into the panel as it opens.
+	 * Call `event.preventDefault()` to stop the default move to the first focusable
+	 * control; focus another node in the same handler if needed.
+	 */
+	onOpenAutoFocus?: (event: Event) => void;
+	/**
+	 * Called when focus is about to leave the panel as it closes.
+	 * Call `event.preventDefault()` to stop restoring focus to the trigger;
+	 * focus another node in the same handler if needed.
+	 * Still runs when `restoreFocus` is false.
+	 */
+	onCloseAutoFocus?: (event: Event) => void;
+	/**
+	 * Called when the user interacts outside the panel.
+	 * Call `event.preventDefault()` to keep the panel open. Clicks on
+	 * `DsPopover.Anchor` already do not dismiss.
+	 */
+	onInteractOutside?: (event: Event) => void;
 	/** Fires when the popover opens or closes. */
 	onOpenChange?: (open: boolean) => void;
 }
@@ -49,6 +100,12 @@ export interface DsPopoverTriggerProps {
 	className?: string;
 }
 
+export interface DsPopoverAnchorProps {
+	/** Single element the panel positions against. Wraps the trigger when they share a field. */
+	children: ReactNode;
+	className?: string;
+}
+
 export interface DsPopoverPanelProps {
 	/**
 	 * Panel width in pixels.
@@ -59,6 +116,7 @@ export interface DsPopoverPanelProps {
 	style?: CSSProperties;
 	children: ReactNode;
 	ref?: Ref<HTMLDivElement>;
+	id?: string;
 	'aria-label'?: string;
 }
 

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';