@drivenets/design-system 0.19.0 → 0.20.0

package/src/components/ds-code-input/use-collapsed-viewport.ts

@@ -0,0 +1,289 @@
+import { type Dispatch, type RefObject, type SetStateAction, useEffect, useState } from 'react';
+import {
+	getAdditionalLineCount,
+	getLineAtIndex,
+	getLineIndexAtOffset,
+	getLogicalLineCount,
+	getSelectedLineCount,
+	getVisibleLineIndex,
+	measureTextWidth,
+	scrollToLogicalLine,
+} from './ds-code-input.utils';
+
+const CARET_INLINE_PADDING_PX = 16;
+
+export type CollapsedIndicator =
+	| { kind: 'plusN'; count: number }
+	| { kind: 'line'; current: number; total: number }
+	| { kind: 'selection'; selected: number; total: number };
+
+export interface CollapsedViewport {
+	focused: boolean;
+	visibleLine: number;
+	caretLine: number;
+	totalLines: number;
+	indicator: CollapsedIndicator | null;
+	fadeStart: boolean;
+	fadeEnd: boolean;
+	showEllipsis: boolean;
+	echoText: string;
+	revealCaretLine: () => void;
+}
+
+export interface CollapsedViewportHandlers {
+	onSelect: () => void;
+	onKeyUp: () => void;
+	onClick: () => void;
+	onScroll: () => void;
+	onFocus: () => void;
+	onBlur: () => void;
+	onBeforeInput: () => void;
+}
+
+interface ViewportSnapshot {
+	totalLines: number;
+	caretLine: number;
+	visibleLine: number;
+	selectedLines: number;
+	clipped: boolean;
+	fadeStart: boolean;
+	fadeEnd: boolean;
+}
+
+const initialSnapshot: ViewportSnapshot = {
+	totalLines: 1,
+	caretLine: 1,
+	visibleLine: 1,
+	selectedLines: 0,
+	clipped: false,
+	fadeStart: false,
+	fadeEnd: false,
+};
+
+const snapshotsEqual = (left: ViewportSnapshot, right: ViewportSnapshot) =>
+	left.totalLines === right.totalLines &&
+	left.caretLine === right.caretLine &&
+	left.visibleLine === right.visibleLine &&
+	left.selectedLines === right.selectedLines &&
+	left.clipped === right.clipped &&
+	left.fadeStart === right.fadeStart &&
+	left.fadeEnd === right.fadeEnd;
+
+const readViewport = (textarea: HTMLTextAreaElement): ViewportSnapshot => {
+	const value = textarea.value;
+	const totalLines = getLogicalLineCount(value);
+	const caretLine = getLineIndexAtOffset(value, textarea.selectionStart) + 1;
+	const visibleLine = Math.min(getVisibleLineIndex(textarea) + 1, totalLines);
+	const selectedLines = getSelectedLineCount(value, textarea.selectionStart, textarea.selectionEnd);
+	const visibleText = getLineAtIndex(value, visibleLine - 1);
+	const clipped = measureTextWidth(textarea, visibleText) > textarea.clientWidth;
+	const fadeStart = textarea.scrollLeft > 0;
+	const fadeEnd = textarea.scrollLeft + textarea.clientWidth < textarea.scrollWidth - 1;
+
+	return {
+		totalLines,
+		caretLine,
+		visibleLine,
+		selectedLines,
+		clipped,
+		fadeStart,
+		fadeEnd,
+	};
+};
+
+const commitViewport = (
+	textarea: HTMLTextAreaElement,
+	setSnapshot: Dispatch<SetStateAction<ViewportSnapshot>>,
+) => {
+	const next = readViewport(textarea);
+
+	setSnapshot((current) => (snapshotsEqual(current, next) ? current : next));
+};
+
+/**
+ * The collapsed field shows one logical line. This hook tracks which line is
+ * visible, where the caret is, overflow fades, and the +N / Ln x/y / selection chip.
+ */
+export const useCollapsedViewport = (
+	textareaRef: RefObject<HTMLTextAreaElement | null>,
+	value: string,
+	ready: boolean,
+	collapsed: boolean,
+): CollapsedViewport & CollapsedViewportHandlers => {
+	const [focused, setFocused] = useState(false);
+	const [snapshot, setSnapshot] = useState(initialSnapshot);
+
+	const sync = () => {
+		const textarea = textareaRef.current;
+
+		if (textarea) {
+			commitViewport(textarea, setSnapshot);
+		}
+	};
+
+	// Scroll so the caret line is the one visible row (used after collapse).
+	const revealCaretLine = () => {
+		const textarea = textareaRef.current;
+
+		if (!textarea) {
+			return;
+		}
+
+		const lineIndex = getLineIndexAtOffset(textarea.value, textarea.selectionStart);
+
+		scrollToLogicalLine(textarea, lineIndex);
+		textarea.scrollLeft = Math.max(0, textarea.scrollLeft - CARET_INLINE_PADDING_PX);
+		setSnapshot((current) => ({
+			...current,
+			visibleLine: lineIndex + 1,
+			caretLine: lineIndex + 1,
+		}));
+	};
+
+	const onSelect = sync;
+	const onKeyUp = sync;
+	const onClick = sync;
+
+	const onScroll = () => {
+		if (collapsed) {
+			sync();
+		}
+	};
+
+	const onFocus = () => {
+		if (!collapsed) {
+			return;
+		}
+
+		setFocused(true);
+		revealCaretLine();
+		sync();
+	};
+
+	const onBlur = () => {
+		if (!collapsed) {
+			return;
+		}
+
+		const textarea = textareaRef.current;
+
+		setFocused(false);
+
+		if (textarea) {
+			// Idle field always shows the start of the document.
+			scrollToLogicalLine(textarea, 0);
+			textarea.scrollLeft = 0;
+		}
+
+		sync();
+	};
+
+	const onBeforeInput = () => {
+		if (!collapsed) {
+			return;
+		}
+
+		const textarea = textareaRef.current;
+
+		if (!textarea) {
+			return;
+		}
+
+		const next = readViewport(textarea);
+
+		// Typing while looking at another line: jump to the caret line first.
+		if (next.caretLine !== next.visibleLine) {
+			revealCaretLine();
+		}
+	};
+
+	useEffect(() => {
+		const textarea = textareaRef.current;
+
+		if (!textarea || !ready) {
+			setFocused(false);
+
+			return;
+		}
+
+		const syncFromDom = () => commitViewport(textarea, setSnapshot);
+
+		// React's onSelect is backed by selectionchange, so programmatic
+		// `select` events (tests, setSelectionRange) still need a native listener.
+		textarea.addEventListener('select', syncFromDom);
+
+		// Line-by-line, not native pixel scroll — a one-row textarea would
+		// otherwise feel broken. React's onWheel is passive, so this stays native.
+		const handleWheel = (event: WheelEvent) => {
+			if (document.activeElement !== textarea || event.deltaY === 0) {
+				return;
+			}
+
+			const next = readViewport(textarea);
+			const direction = event.deltaY > 0 ? 1 : -1;
+			const nextLine = next.visibleLine + direction;
+
+			if (nextLine < 1 || nextLine > next.totalLines) {
+				return;
+			}
+
+			event.preventDefault();
+			scrollToLogicalLine(textarea, nextLine - 1);
+			syncFromDom();
+		};
+
+		let observer: ResizeObserver | undefined;
+
+		if (collapsed) {
+			textarea.addEventListener('wheel', handleWheel, { passive: false });
+			setFocused(document.activeElement === textarea);
+			observer = new ResizeObserver(syncFromDom);
+			observer.observe(textarea);
+		} else {
+			setFocused(false);
+		}
+
+		syncFromDom();
+
+		return () => {
+			textarea.removeEventListener('select', syncFromDom);
+			textarea.removeEventListener('wheel', handleWheel);
+			observer?.disconnect();
+		};
+	}, [ready, collapsed, value, textareaRef]);
+
+	const additional = getAdditionalLineCount(value);
+	// Caret line, painted as a static stand-in while the real textarea lives in the overlay.
+	const echoText = getLineAtIndex(value, snapshot.caretLine - 1);
+
+	// Selection spanning lines > focused line position > idle +N.
+	let indicator: CollapsedIndicator | null = null;
+
+	if (snapshot.selectedLines > 1) {
+		indicator = { kind: 'selection', selected: snapshot.selectedLines, total: snapshot.totalLines };
+	} else if (focused && additional > 0) {
+		indicator = { kind: 'line', current: snapshot.visibleLine, total: snapshot.totalLines };
+	} else if (!focused && additional > 0) {
+		indicator = { kind: 'plusN', count: additional };
+	}
+
+	return {
+		focused,
+		visibleLine: snapshot.visibleLine,
+		caretLine: snapshot.caretLine,
+		totalLines: Math.max(snapshot.totalLines, getLogicalLineCount(value)),
+		indicator,
+		fadeStart: focused && snapshot.fadeStart,
+		fadeEnd: focused && snapshot.fadeEnd,
+		showEllipsis: (!focused || !collapsed || !ready) && snapshot.clipped,
+		echoText,
+		revealCaretLine,
+		onSelect,
+		onKeyUp,
+		onClick,
+		onScroll,
+		onFocus,
+		onBlur,
+		onBeforeInput,
+	};
+};

package/src/components/ds-code-input/use-editor-host.ts

@@ -0,0 +1,87 @@
+import { type RefObject, useLayoutEffect, useRef, useState } from 'react';
+import { applyTextSelection, type TextSelection } from './ds-code-input.utils';
+
+interface UseEditorHostOptions {
+	isExpanded: boolean;
+	collapsedSlotRef: RefObject<HTMLDivElement | null>;
+	overlaySlotRef: RefObject<HTMLDivElement | null>;
+	hostClassName?: string;
+	textareaRef: RefObject<HTMLTextAreaElement | null>;
+	pendingSelectionRef: RefObject<TextSelection | null>;
+	shouldFocus: boolean;
+}
+
+/**
+ * One host div for the textarea. Attach it to the current slot (collapsed or
+ * overlay), then the component portals the same textarea into that host.
+ */
+export const useEditorHost = ({
+	isExpanded,
+	collapsedSlotRef,
+	overlaySlotRef,
+	hostClassName,
+	textareaRef,
+	pendingSelectionRef,
+	shouldFocus,
+}: UseEditorHostOptions) => {
+	const [hostReady, setHostReady] = useState(false);
+	const hostRef = useRef<HTMLDivElement | null>(null);
+	// True only while appendChild runs, so the component can swallow the
+	// focus/blur that moving a focused node fires.
+	const isMovingHostRef = useRef(false);
+
+	useLayoutEffect(() => {
+		if (hostRef.current === null) {
+			hostRef.current = document.createElement('div');
+		}
+
+		const host = hostRef.current;
+		const dest = isExpanded ? overlaySlotRef.current : collapsedSlotRef.current;
+
+		if (!dest) {
+			return;
+		}
+
+		isMovingHostRef.current = true;
+		host.className = hostClassName ?? '';
+
+		if (host.parentElement !== dest) {
+			dest.appendChild(host);
+		}
+
+		const textarea = textareaRef.current;
+		const pending = pendingSelectionRef.current;
+
+		// Put the caret back, then focus only if the user opened the overlay
+		// (not if it opened from outside).
+		if (textarea && pending) {
+			applyTextSelection(textarea, pending);
+			pendingSelectionRef.current = null;
+		}
+
+		if (textarea && shouldFocus) {
+			textarea.focus({ preventScroll: true });
+		}
+
+		isMovingHostRef.current = false;
+
+		if (!hostReady) {
+			setHostReady(true);
+		}
+	}, [
+		isExpanded,
+		hostReady,
+		shouldFocus,
+		hostClassName,
+		collapsedSlotRef,
+		overlaySlotRef,
+		textareaRef,
+		pendingSelectionRef,
+	]);
+
+	return {
+		host: hostRef.current,
+		hostReady,
+		isMovingHostRef,
+	};
+};

package/src/components/ds-filters-bar/components/ds-filters-bar-builder/ds-filters-bar-builder.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../../ds-filters-bar.context';
+import type { DsFiltersBarBuilderProps } from './ds-filters-bar-builder.types';
+
+export const Builder: FC<DsFiltersBarBuilderProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+Builder.displayName = 'DsFiltersBar.Builder';

package/src/components/ds-filters-bar/components/ds-filters-bar-builder/ds-filters-bar-builder.types.ts

@@ -0,0 +1,41 @@
+import type { CSSProperties } from 'react';
+
+export interface DsFiltersBarBuilderLocale {
+	title?: string;
+	searchField?: string;
+	selectField?: string;
+	searchSubfield?: string;
+	selectSubfield?: string;
+	searchOperator?: string;
+	selectOperator?: string;
+	valuePlaceholder?: string;
+	save?: string;
+}
+
+export const defaultDsFiltersBarBuilderLocale: Required<DsFiltersBarBuilderLocale> = Object.freeze({
+	title: 'Query builder',
+	searchField: 'Search field',
+	selectField: 'Select a field',
+	searchSubfield: 'Search subfield',
+	selectSubfield: 'Select a subfield',
+	searchOperator: 'Search operator',
+	selectOperator: 'Select an operator',
+	valuePlaceholder: 'Value',
+	save: 'Save query',
+});
+
+/**
+ * Query builder view: builds one condition step by step. The field's type decides the steps —
+ * compound: subfield, operator, value; text and number: operator, value; enum: value.
+ */
+export interface DsFiltersBarBuilderProps {
+	/**
+	 * Field ids offered first, in this order — chosen by product or suggested by AI. Every field in
+	 * the bar stays searchable.
+	 * @default all fields, in `fields` order
+	 */
+	suggestedFields?: ReadonlyArray<string>;
+	locale?: DsFiltersBarBuilderLocale;
+	className?: string;
+	style?: CSSProperties;
+}

package/src/components/ds-filters-bar/components/ds-filters-bar-builder/index.ts

@@ -0,0 +1 @@
+export { Builder } from './ds-filters-bar-builder';

package/src/components/ds-filters-bar/components/ds-filters-bar-clear-all.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../ds-filters-bar.context';
+import type { DsFiltersBarClearAllProps } from '../ds-filters-bar.types';
+
+export const ClearAll: FC<DsFiltersBarClearAllProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+ClearAll.displayName = 'DsFiltersBar.ClearAll';

package/src/components/ds-filters-bar/components/ds-filters-bar-conditions/ds-filters-bar-conditions.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../../ds-filters-bar.context';
+import type { DsFiltersBarConditionsProps } from './ds-filters-bar-conditions.types';
+
+export const Conditions: FC<DsFiltersBarConditionsProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+Conditions.displayName = 'DsFiltersBar.Conditions';

package/src/components/ds-filters-bar/components/ds-filters-bar-conditions/ds-filters-bar-conditions.types.ts

@@ -0,0 +1,30 @@
+import type { CSSProperties } from 'react';
+
+export interface DsFiltersBarConditionsLocale {
+	/**
+	 * Accessible name of the icon-only button that opens the filters dialog
+	 */
+	addFilter?: string;
+	/**
+	 * Accessible name of a chip's remove button. Receives the chip's field label.
+	 */
+	removeCondition?: (label: string) => string;
+	filtersDialogTitle?: string;
+	saveFilters?: string;
+}
+
+export const defaultDsFiltersBarConditionsLocale: Required<DsFiltersBarConditionsLocale> = Object.freeze({
+	addFilter: 'Add filter',
+	removeCondition: (label: string) => `Remove filter: ${label}`,
+	filtersDialogTitle: 'Filters',
+	saveFilters: 'Save filters',
+});
+
+/**
+ * Filters view: the add-filter button with its filters dialog, and one chip per condition.
+ */
+export interface DsFiltersBarConditionsProps {
+	locale?: DsFiltersBarConditionsLocale;
+	className?: string;
+	style?: CSSProperties;
+}

package/src/components/ds-filters-bar/components/ds-filters-bar-conditions/index.ts

@@ -0,0 +1 @@
+export { Conditions } from './ds-filters-bar-conditions';

package/src/components/ds-filters-bar/components/ds-filters-bar-pinned.ts

@@ -0,0 +1,31 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../ds-filters-bar.context';
+import type {
+	DsFiltersBarPinnedProps,
+	DsFiltersBarPinnedGroupProps,
+	DsFiltersBarPinnedToggleProps,
+} from '../ds-filters-bar.types';
+
+export const Pinned: FC<DsFiltersBarPinnedProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+Pinned.displayName = 'DsFiltersBar.Pinned';
+
+export const PinnedGroup: FC<DsFiltersBarPinnedGroupProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+PinnedGroup.displayName = 'DsFiltersBar.PinnedGroup';
+
+export const PinnedToggle: FC<DsFiltersBarPinnedToggleProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+PinnedToggle.displayName = 'DsFiltersBar.PinnedToggle';

package/src/components/ds-filters-bar/components/ds-filters-bar-query/ds-filters-bar-query.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../../ds-filters-bar.context';
+import type { DsFiltersBarQueryProps } from './ds-filters-bar-query.types';
+
+export const Query: FC<DsFiltersBarQueryProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+Query.displayName = 'DsFiltersBar.Query';

package/src/components/ds-filters-bar/components/ds-filters-bar-query/ds-filters-bar-query.types.ts

@@ -0,0 +1,22 @@
+import type { CSSProperties } from 'react';
+
+export interface DsFiltersBarQueryLocale {
+	placeholder?: string;
+}
+
+export const defaultDsFiltersBarQueryLocale: Required<DsFiltersBarQueryLocale> = Object.freeze({
+	placeholder: 'status = "Active" AND trigger = "Scheduled"',
+});
+
+/**
+ * Advanced query view: one-line code field with an overlay for long queries.
+ */
+export interface DsFiltersBarQueryProps {
+	/**
+	 * @default false
+	 */
+	disabled?: boolean;
+	locale?: DsFiltersBarQueryLocale;
+	className?: string;
+	style?: CSSProperties;
+}

package/src/components/ds-filters-bar/components/ds-filters-bar-query/index.ts

@@ -0,0 +1 @@
+export { Query } from './ds-filters-bar-query';

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

@@ -0,0 +1,19 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../ds-filters-bar.context';
+import type { DsFiltersBarSavedFiltersProps, DsFiltersBarSaveFilterProps } from '../ds-filters-bar.types';
+
+export const SavedFilters: FC<DsFiltersBarSavedFiltersProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+SavedFilters.displayName = 'DsFiltersBar.SavedFilters';
+
+export const SaveFilter: FC<DsFiltersBarSaveFilterProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+SaveFilter.displayName = 'DsFiltersBar.SaveFilter';

package/src/components/ds-filters-bar/components/ds-filters-bar-search.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../ds-filters-bar.context';
+import type { DsFiltersBarSearchProps } from '../ds-filters-bar.types';
+
+export const Search: FC<DsFiltersBarSearchProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+Search.displayName = 'DsFiltersBar.Search';

package/src/components/ds-filters-bar/components/ds-filters-bar-summary.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../ds-filters-bar.context';
+import type { DsFiltersBarSummaryProps } from '../ds-filters-bar.types';
+
+export const Summary: FC<DsFiltersBarSummaryProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+Summary.displayName = 'DsFiltersBar.Summary';

package/src/components/ds-filters-bar/components/ds-filters-bar-toolbar.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../ds-filters-bar.context';
+import type { DsFiltersBarToolbarProps } from '../ds-filters-bar.types';
+
+export const Toolbar: FC<DsFiltersBarToolbarProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+Toolbar.displayName = 'DsFiltersBar.Toolbar';

package/src/components/ds-filters-bar/components/ds-filters-bar-view-switch.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../ds-filters-bar.context';
+import type { DsFiltersBarViewSwitchProps } from '../ds-filters-bar.types';
+
+export const ViewSwitch: FC<DsFiltersBarViewSwitchProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+ViewSwitch.displayName = 'DsFiltersBar.ViewSwitch';

package/src/components/ds-filters-bar/components/ds-filters-bar-view.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { useDsFiltersBarContext } from '../ds-filters-bar.context';
+import type { DsFiltersBarViewProps } from '../ds-filters-bar.types';
+
+export const View: FC<DsFiltersBarViewProps> = () => {
+	useDsFiltersBarContext();
+
+	return null;
+};
+
+View.displayName = 'DsFiltersBar.View';

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

@@ -0,0 +1,11 @@
+export { ClearAll } from './ds-filters-bar-clear-all';
+export { Pinned, PinnedGroup, PinnedToggle } from './ds-filters-bar-pinned';
+export { SavedFilters, SaveFilter } from './ds-filters-bar-saved-filters';
+export { Search } from './ds-filters-bar-search';
+export { Summary } from './ds-filters-bar-summary';
+export { Toolbar } from './ds-filters-bar-toolbar';
+export { View } from './ds-filters-bar-view';
+export { ViewSwitch } from './ds-filters-bar-view-switch';
+export { Builder } from './ds-filters-bar-builder';
+export { Conditions } from './ds-filters-bar-conditions';
+export { Query } from './ds-filters-bar-query';