@drivenets/design-system 0.18.1 → 0.20.0

package/src/components/ds-code-input/ds-code-input.module.scss

@@ -0,0 +1,25 @@
+.root {
+	display: block;
+	width: 100%;
+}
+
+.panel {
+	overflow: hidden;
+
+	&.invalid {
+		outline: 1px solid var(--background-error);
+		outline-offset: -1px;
+	}
+}
+
+.visuallyHidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	border: 0;
+	overflow: hidden;
+	white-space: nowrap;
+	clip-path: inset(50%);
+}

package/src/components/ds-code-input/ds-code-input.tsx

@@ -0,0 +1,401 @@
+import { type ChangeEvent, type FocusEvent, useEffect, useId, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
+import { DsButtonV3, type ButtonV3Size } from '../ds-button-v3';
+import { DsPopover } from '../ds-popover';
+import { mergeRefs } from '../../utils/merge-refs';
+import { CollapsedCodeField } from './collapsed-code-field';
+import collapsedStyles from './collapsed-code-field/collapsed-code-field.module.scss';
+import { DsCodeInputPanel } from './ds-code-input-panel';
+import panelStyles from './ds-code-input-panel/ds-code-input-panel.module.scss';
+import styles from './ds-code-input.module.scss';
+import type { CodeInputSize, DsCodeInputProps } from './ds-code-input.types';
+import {
+	applyTextSelection,
+	canonicalizeLf,
+	getAdditionalLineCount,
+	getLogicalLineCount,
+	readTextSelection,
+	type TextSelection,
+} from './ds-code-input.utils';
+import { useCollapsedViewport } from './use-collapsed-viewport';
+import { useEditorHost } from './use-editor-host';
+
+const toggleSizes: Record<CodeInputSize, ButtonV3Size> = Object.freeze({
+	small: 'tiny',
+	default: 'small',
+	large: 'small',
+});
+
+const OVERLAY_GUTTER_PX = 4;
+
+const defaultLocale = Object.freeze({
+	expand: 'Expand code editor',
+	collapse: 'Collapse code editor',
+	searchPlaceholder: 'Search in code',
+	codeLabel: 'Code',
+	additionalLines: (count: number) => `↵ +${String(count)}`,
+	additionalLinesLabel: (count: number) => `${String(count)} additional code lines`,
+	linePosition: (current: number, total: number) => `Ln ${String(current)}/${String(total)}`,
+	multilineDescription: (total: number) =>
+		`Multiline code, ${String(total)} lines. Only one line is visible. Expand to view the complete code.`,
+	linePositionDescription: (current: number, total: number) =>
+		`Line ${String(current)} of ${String(total)}; other code lines are hidden.`,
+	selectionStatus: (selected: number, total: number) =>
+		`${String(selected)} lines selected · ${String(total)} total`,
+	expandedAnnouncement: (total: number) => `Code editor expanded, ${String(total)} lines.`,
+	collapsedAnnouncement: 'Code editor collapsed',
+});
+
+/**
+ * Multiline editor for code, such as a query expression. The collapsed field is a
+ * one-row viewport of the same document; expanding opens a larger overlay with search.
+ * There is one textarea: collapsed and expanded are two homes it moves between.
+ *
+ * @summary multiline code field that expands into a searchable overlay
+ */
+const DsCodeInput = ({
+	id,
+	ref,
+	name,
+	size = 'default',
+	value,
+	defaultValue,
+	placeholder,
+	disabled = false,
+	readOnly = false,
+	invalid = false,
+	'aria-describedby': ariaDescribedBy,
+	expanded,
+	defaultExpanded = false,
+	onExpandChange,
+	onChange,
+	onValueChange,
+	onFocus,
+	onBlur,
+	maxLength,
+	locale,
+	slots,
+	className,
+	style,
+}: DsCodeInputProps) => {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? '');
+	const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
+	// True when the user opened the overlay and should keep typing in it.
+	const [focusOnOpen, setFocusOnOpen] = useState(false);
+	const [announcement, setAnnouncement] = useState('');
+
+	const textareaRef = useRef<HTMLTextAreaElement>(null);
+	const collapsedSlotRef = useRef<HTMLDivElement>(null);
+	const overlaySlotRef = useRef<HTMLDivElement>(null);
+	// Caret/selection saved before the textarea moves to the other slot.
+	const pendingSelectionRef = useRef<TextSelection | null>(null);
+	// True when the user closed the overlay and should land back in the field.
+	const focusOnCloseRef = useRef(false);
+	// Skip the first expand/collapse announcement so mount is silent.
+	const skipAnnouncementRef = useRef(true);
+
+	const panelId = useId();
+	const descriptionId = useId();
+	const announcementId = useId();
+
+	const strings = { ...defaultLocale, ...locale };
+
+	const isValueControlled = value !== undefined;
+	const currentValue = isValueControlled ? value : uncontrolledValue;
+
+	const isExpandedControlled = expanded !== undefined;
+	const isExpanded = isExpandedControlled ? expanded : uncontrolledExpanded;
+
+	const handleOpenChange = (open: boolean) => {
+		if (open) {
+			focusOnCloseRef.current = false;
+
+			// User-open already saved the caret. If the overlay opened some other
+			// way, snapshot it now so it still comes back after the move.
+			if (!pendingSelectionRef.current) {
+				const textarea = textareaRef.current;
+
+				if (textarea) {
+					pendingSelectionRef.current = readTextSelection(textarea);
+				}
+			}
+		} else {
+			setFocusOnOpen(false);
+		}
+
+		if (!isExpandedControlled) {
+			setUncontrolledExpanded(open);
+		}
+
+		onExpandChange?.(open);
+	};
+
+	const { host, hostReady, isMovingHostRef } = useEditorHost({
+		isExpanded,
+		collapsedSlotRef,
+		overlaySlotRef,
+		hostClassName: isExpanded ? panelStyles.editorHost : collapsedStyles.editorHost,
+		textareaRef,
+		pendingSelectionRef,
+		shouldFocus: isExpanded && focusOnOpen,
+	});
+	const viewport = useCollapsedViewport(textareaRef, currentValue, hostReady, !isExpanded);
+	const revealCaretLineRef = useRef(viewport.revealCaretLine);
+
+	revealCaretLineRef.current = viewport.revealCaretLine;
+
+	useEffect(() => {
+		if (skipAnnouncementRef.current) {
+			skipAnnouncementRef.current = false;
+
+			return;
+		}
+
+		setAnnouncement(
+			isExpanded
+				? strings.expandedAnnouncement(getLogicalLineCount(currentValue))
+				: strings.collapsedAnnouncement,
+		);
+		// Announce presentation changes only — not every keystroke in the document.
+		// eslint-disable-next-line react-hooks/exhaustive-deps -- currentValue/strings would re-announce while typing
+	}, [isExpanded]);
+
+	const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+		// Some browsers insert \r\n. Rewrite to \n and put the caret back so
+		// typing does not jump.
+		const newValue = canonicalizeLf(event.target.value);
+
+		if (newValue !== event.target.value) {
+			const selection = readTextSelection(event.target);
+
+			event.target.value = newValue;
+			applyTextSelection(event.target, selection);
+		}
+
+		if (!isValueControlled) {
+			setUncontrolledValue(newValue);
+		}
+
+		onChange?.(event);
+		onValueChange?.(newValue);
+	};
+
+	const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {
+		// Moving the host fires fake focus/blur. Ignore those so callers do not
+		// think the user left the field.
+		if (isMovingHostRef.current) {
+			return;
+		}
+
+		onFocus?.(event);
+	};
+
+	const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {
+		if (isMovingHostRef.current) {
+			return;
+		}
+
+		onBlur?.(event);
+	};
+
+	const handleUserOpen = () => {
+		const textarea = textareaRef.current;
+
+		if (textarea) {
+			pendingSelectionRef.current = readTextSelection(textarea);
+		}
+
+		setFocusOnOpen(true);
+		handleOpenChange(true);
+	};
+
+	const additionalLines = getAdditionalLineCount(currentValue);
+	const description =
+		!isExpanded && additionalLines > 0
+			? viewport.focused
+				? strings.linePositionDescription(viewport.visibleLine, viewport.totalLines)
+				: strings.multilineDescription(viewport.totalLines)
+			: undefined;
+
+	// One textarea, rendered once and portaled into the host. rows / wrap /
+	// className flip when it moves between the collapsed slot and the overlay.
+	const editor = host
+		? createPortal(
+				<textarea
+					id={id}
+					ref={mergeRefs(ref, textareaRef)}
+					name={name}
+					className={isExpanded ? panelStyles.codeArea : collapsedStyles.input}
+					rows={isExpanded ? undefined : 1}
+					wrap={isExpanded ? 'soft' : 'off'}
+					value={currentValue}
+					placeholder={placeholder}
+					disabled={disabled}
+					readOnly={readOnly}
+					maxLength={maxLength}
+					spellCheck={false}
+					autoComplete="off"
+					aria-multiline="true"
+					aria-label={isExpanded && !id ? strings.codeLabel : undefined}
+					aria-invalid={invalid || undefined}
+					aria-describedby={
+						[description && descriptionId, ariaDescribedBy].filter(Boolean).join(' ') || undefined
+					}
+					onChange={handleChange}
+					onSelect={viewport.onSelect}
+					onKeyUp={viewport.onKeyUp}
+					onClick={viewport.onClick}
+					onScroll={viewport.onScroll}
+					onBeforeInput={viewport.onBeforeInput}
+					onFocus={(event) => {
+						if (!isMovingHostRef.current) {
+							viewport.onFocus();
+						}
+
+						handleFocus(event);
+					}}
+					onBlur={(event) => {
+						if (!isMovingHostRef.current) {
+							viewport.onBlur();
+						}
+
+						handleBlur(event);
+					}}
+					onKeyDown={(event) => {
+						if (event.key === 'Escape' && isExpanded) {
+							event.stopPropagation();
+							focusOnCloseRef.current = true;
+							handleOpenChange(false);
+
+							return;
+						}
+
+						if (!isExpanded && event.altKey && event.key === 'ArrowDown') {
+							event.preventDefault();
+							event.stopPropagation();
+							handleUserOpen();
+						}
+					}}
+				/>,
+				host,
+			)
+		: null;
+
+	return (
+		<DsPopover.Root
+			open={isExpanded}
+			side="bottom"
+			align="start"
+			gutter={OVERLAY_GUTTER_PX}
+			matchAnchorWidth
+			// We own focus so the expand button does not steal it.
+			restoreFocus={false}
+			onOpenAutoFocus={(event) => {
+				event.preventDefault();
+
+				if (focusOnOpen) {
+					textareaRef.current?.focus({ preventScroll: true });
+				}
+			}}
+			onCloseAutoFocus={(event) => {
+				event.preventDefault();
+
+				// Put focus back in the collapsed field and scroll to the caret line.
+				if (focusOnCloseRef.current) {
+					textareaRef.current?.focus({ preventScroll: true });
+					revealCaretLineRef.current();
+					focusOnCloseRef.current = false;
+				}
+			}}
+			onOpenChange={handleOpenChange}
+		>
+			<DsPopover.Anchor>
+				<div className={classNames(styles.root, className)} style={style}>
+					<CollapsedCodeField
+						size={size}
+						placeholder={placeholder}
+						disabled={disabled}
+						invalid={invalid}
+						showEcho={isExpanded}
+						echoText={viewport.echoText}
+						fadeStart={viewport.fadeStart}
+						fadeEnd={viewport.fadeEnd}
+						showEllipsis={viewport.showEllipsis}
+						indicator={
+							isExpanded && additionalLines > 0
+								? { kind: 'line', current: viewport.caretLine, total: viewport.totalLines }
+								: isExpanded
+									? null
+									: viewport.indicator
+						}
+						additionalLinesLabel={strings.additionalLinesLabel}
+						additionalLines={strings.additionalLines}
+						linePosition={strings.linePosition}
+						selectionStatus={strings.selectionStatus}
+						editorSlotRef={collapsedSlotRef}
+						onExpand={handleUserOpen}
+						adornment={
+							<>
+								<DsPopover.Trigger>
+									<DsButtonV3
+										variant="tertiary"
+										size={toggleSizes[size]}
+										icon={isExpanded ? 'collapse_content' : 'expand_content'}
+										aria-label={isExpanded ? strings.collapse : strings.expand}
+										aria-expanded={isExpanded}
+										aria-controls={panelId}
+										onPointerDown={(event) => {
+											// Snapshot the caret and request focus before the
+											// button would steal it.
+											event.preventDefault();
+
+											if (isExpanded) {
+												focusOnCloseRef.current = true;
+											} else {
+												const textarea = textareaRef.current;
+
+												if (textarea) {
+													pendingSelectionRef.current = readTextSelection(textarea);
+												}
+
+												setFocusOnOpen(true);
+											}
+										}}
+									/>
+								</DsPopover.Trigger>
+								{slots?.endAdornment}
+							</>
+						}
+					/>
+					{description && (
+						<span id={descriptionId} className={styles.visuallyHidden}>
+							{description}
+						</span>
+					)}
+					<div id={announcementId} className={styles.visuallyHidden} aria-live="polite" aria-atomic="true">
+						{announcement}
+					</div>
+				</div>
+			</DsPopover.Anchor>
+
+			<DsPopover.Panel
+				id={panelId}
+				className={classNames(styles.panel, invalid && styles.invalid)}
+				aria-label={strings.codeLabel}
+			>
+				<DsCodeInputPanel
+					value={currentValue}
+					isOpen={isExpanded}
+					searchPlaceholder={strings.searchPlaceholder}
+					editorSlotRef={overlaySlotRef}
+				/>
+			</DsPopover.Panel>
+			{editor}
+		</DsPopover.Root>
+	);
+};
+
+DsCodeInput.displayName = 'DsCodeInput';
+
+export default DsCodeInput;

package/src/components/ds-code-input/ds-code-input.types.ts

@@ -0,0 +1,166 @@
+import type React from 'react';
+
+export const codeInputSizes = ['small', 'default', 'large'] as const;
+export type CodeInputSize = (typeof codeInputSizes)[number];
+
+export interface DsCodeInputProps {
+	/**
+	 * Associates the editor with a `<label htmlFor>`. When set, the expanded
+	 * textarea keeps that name instead of `locale.codeLabel`.
+	 */
+	id?: string;
+	/**
+	 * The ref to the editor textarea
+	 */
+	ref?: React.Ref<HTMLTextAreaElement>;
+	/**
+	 * The name of the input
+	 */
+	name?: string;
+	/**
+	 * @default default
+	 */
+	size?: CodeInputSize;
+	/**
+	 * The current value. Shared by the collapsed viewport and the overlay.
+	 */
+	value?: string;
+	/**
+	 * The initial value when rendered.
+	 * Use when you don't need to control the value of the input.
+	 */
+	defaultValue?: string;
+	/**
+	 * The placeholder text
+	 */
+	placeholder?: string;
+	/**
+	 * Whether the input is disabled. The overlay still opens so long values stay searchable.
+	 * @default false
+	 */
+	disabled?: boolean;
+	/**
+	 * Whether the value is read only. The overlay still opens so long values stay searchable.
+	 * @default false
+	 */
+	readOnly?: boolean;
+	/**
+	 * Shows the error border and sets `aria-invalid`. Point `aria-describedby` at the message.
+	 * @default false
+	 */
+	invalid?: boolean;
+	/**
+	 * Id of an element that describes the value, such as an error message
+	 */
+	'aria-describedby'?: string;
+	/**
+	 * Whether the overlay is open. Pair with `onExpandChange`.
+	 */
+	expanded?: boolean;
+	/**
+	 * Initial overlay state when uncontrolled.
+	 * @default false
+	 */
+	defaultExpanded?: boolean;
+	/**
+	 * Fires when the overlay opens or closes
+	 */
+	onExpandChange?: (expanded: boolean) => void;
+	/**
+	 * Callback when the value changes
+	 */
+	onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+	/**
+	 * Value change event handler (provides just the value)
+	 */
+	onValueChange?: (value: string) => void;
+	/**
+	 * Event handler called when the editor receives focus
+	 */
+	onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+	/**
+	 * Event handler called when the editor loses focus
+	 */
+	onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+	/**
+	 * The maximum number of characters
+	 */
+	maxLength?: number;
+	/**
+	 * User-facing strings
+	 */
+	locale?: DsCodeInputLocale;
+	/**
+	 * Optional render slots for customizing parts of the collapsed field.
+	 */
+	slots?: {
+		/**
+		 * Adornment to display after the expand button
+		 */
+		endAdornment?: React.ReactNode;
+	};
+	className?: string;
+	style?: React.CSSProperties;
+}
+
+export interface DsCodeInputLocale {
+	/**
+	 * Accessible name of the button that opens the overlay
+	 * @default 'Expand code editor'
+	 */
+	expand?: string;
+	/**
+	 * Accessible name of the button that closes the overlay
+	 * @default 'Collapse code editor'
+	 */
+	collapse?: string;
+	/**
+	 * @default 'Search in code'
+	 */
+	searchPlaceholder?: string;
+	/**
+	 * Accessible name of the overlay when the compact field is inert
+	 * @default 'Code'
+	 */
+	codeLabel?: string;
+	/**
+	 * Visual label for hidden logical lines. Receives the additional-line count.
+	 * @default (count) => `↵ +${count}`
+	 */
+	additionalLines?: (count: number) => string;
+	/**
+	 * Accessible name for hidden logical lines. Receives the additional-line count.
+	 * @default (count) => `${count} additional code lines`
+	 */
+	additionalLinesLabel?: (count: number) => string;
+	/**
+	 * Visual focused line indicator. Receives the visible line and the total.
+	 * @default (current, total) => `Ln ${current}/${total}`
+	 */
+	linePosition?: (current: number, total: number) => string;
+	/**
+	 * Accessible description while collapsed and multiline.
+	 * @default (total) => `Multiline code, ${total} lines. Only one line is visible. Expand to view the complete code.`
+	 */
+	multilineDescription?: (total: number) => string;
+	/**
+	 * Accessible description while focused on a hidden line.
+	 * @default (current, total) => `Line ${current} of ${total}; other code lines are hidden.`
+	 */
+	linePositionDescription?: (current: number, total: number) => string;
+	/**
+	 * Visual status when a selection spans hidden lines.
+	 * @default (selected, total) => `${selected} lines selected · ${total} total`
+	 */
+	selectionStatus?: (selected: number, total: number) => string;
+	/**
+	 * Announced once when the overlay opens. Receives the logical line count.
+	 * @default (total) => `Code editor expanded, ${total} lines.`
+	 */
+	expandedAnnouncement?: (total: number) => string;
+	/**
+	 * Announced once when the overlay closes
+	 * @default 'Code editor collapsed'
+	 */
+	collapsedAnnouncement?: string;
+}

package/src/components/ds-code-input/ds-code-input.utils.ts

@@ -0,0 +1,94 @@
+export type TextSelectionDirection = 'forward' | 'backward' | 'none';
+
+export interface TextSelection {
+	start: number;
+	end: number;
+	direction: TextSelectionDirection;
+}
+
+const CANVAS_TAB_SIZE_FALLBACK = 2;
+
+let measureContext: CanvasRenderingContext2D | null | undefined;
+
+export const canonicalizeLf = (text: string) => text.replace(/\r\n?/g, '\n');
+
+const getLogicalLines = (text: string) => canonicalizeLf(text).split('\n');
+
+export const getLogicalLineCount = (text: string) => getLogicalLines(text).length;
+
+export const getAdditionalLineCount = (text: string) => Math.max(0, getLogicalLineCount(text) - 1);
+
+export const getLineAtIndex = (text: string, lineIndex: number) => getLogicalLines(text)[lineIndex] ?? '';
+
+export const getLineIndexAtOffset = (text: string, offset: number) => {
+	const lf = canonicalizeLf(text);
+	const clamped = Math.min(Math.max(offset, 0), lf.length);
+
+	return lf.slice(0, clamped).split('\n').length - 1;
+};
+
+export const getSelectedLineCount = (text: string, start: number, end: number) => {
+	if (start === end) {
+		return 0;
+	}
+
+	const from = Math.min(start, end);
+	const to = Math.max(start, end);
+
+	return getLineIndexAtOffset(text, to) - getLineIndexAtOffset(text, from) + 1;
+};
+
+export const readTextSelection = (element: HTMLTextAreaElement): TextSelection => ({
+	start: element.selectionStart,
+	end: element.selectionEnd,
+	direction: element.selectionDirection,
+});
+
+export const applyTextSelection = (element: HTMLTextAreaElement, selection: TextSelection) => {
+	const length = element.value.length;
+	const start = Math.min(selection.start, length);
+	const end = Math.min(selection.end, length);
+
+	element.setSelectionRange(start, end, selection.direction);
+};
+
+const getLineHeight = (element: HTMLTextAreaElement) => {
+	const parsed = Number.parseFloat(getComputedStyle(element).lineHeight);
+
+	if (Number.isFinite(parsed)) {
+		return parsed;
+	}
+
+	return Number.parseFloat(getComputedStyle(element).fontSize);
+};
+
+export const scrollToLogicalLine = (element: HTMLTextAreaElement, lineIndex: number) => {
+	element.scrollTop = Math.max(0, lineIndex) * getLineHeight(element);
+};
+
+export const getVisibleLineIndex = (element: HTMLTextAreaElement) => {
+	const lineHeight = getLineHeight(element);
+
+	if (lineHeight <= 0) {
+		return 0;
+	}
+
+	return Math.round(element.scrollTop / lineHeight);
+};
+
+export const measureTextWidth = (element: HTMLElement, text: string) => {
+	if (measureContext === undefined) {
+		measureContext = document.createElement('canvas').getContext('2d');
+	}
+
+	if (!measureContext) {
+		return 0;
+	}
+
+	const computed = getComputedStyle(element);
+	const tabSize = Number.parseInt(computed.tabSize, 10) || CANVAS_TAB_SIZE_FALLBACK;
+
+	measureContext.font = `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;
+
+	return measureContext.measureText(text.replaceAll('\t', ' '.repeat(tabSize))).width;
+};