@drivenets/design-system 0.1.0 → 0.3.0

package/src/components/ds-tag-filter/ds-tag-filter.tsx

@@ -0,0 +1,178 @@
+import { useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
+import styles from './ds-tag-filter.module.scss';
+import type { DsTagFilterProps, TagFilterItem } from './ds-tag-filter.types';
+import { useTagOverflowCalculation } from './hooks/use-tag-overflow-calculation';
+import { DsTypography } from '../ds-typography';
+import { DsTag } from '../ds-tag';
+import { DsButton } from '../ds-button';
+import { DsIcon } from '../ds-icon';
+
+/**
+ * Design system TagFilter component
+ *
+ * A component for displaying active filters as tags with overflow handling.
+ * Shows visible tags in up to 2 rows, with the Expand button to show hidden items.
+ */
+const DsTagFilter = ({
+	items,
+	locale = {},
+	className,
+	style,
+	onClearAll,
+	onItemDelete,
+	onItemSelect,
+	onExpand,
+}: DsTagFilterProps) => {
+	const [expanded, setExpanded] = useState(false);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const measurementRef = useRef<HTMLDivElement>(null);
+
+	const { row1TagCount, row2TagCount, hasOverflow } = useTagOverflowCalculation({
+		containerRef,
+		measurementRef,
+		totalItems: items.length,
+		expanded,
+	});
+
+	const {
+		label = 'Filtered by:',
+		clearButton = 'Clear all filters',
+		hiddenCountPlural = 'filters',
+		hiddenCountSingular = 'filter',
+		collapseTagLabel = 'Collapse',
+	} = locale;
+
+	// Split items into row sections
+	const row1Tags = items.slice(0, row1TagCount);
+	const row2Tags = items.slice(row1TagCount, row1TagCount + row2TagCount);
+	const hiddenTags = expanded ? [] : items.slice(row1TagCount + row2TagCount);
+
+	if (items.length === 0) {
+		return null;
+	}
+
+	const hiddenCount = hiddenTags.length;
+	const hasRow2Content = row2Tags.length > 0 || hasOverflow;
+
+	const renderTag = (item: TagFilterItem) => {
+		const tagProps = item.slotProps?.tag || {};
+
+		return (
+			<DsTag
+				{...tagProps}
+				key={item.id}
+				label={item.label}
+				selected={item.selected}
+				onClick={onItemSelect ? () => onItemSelect(item) : undefined}
+				onDelete={onItemDelete ? () => onItemDelete(item) : undefined}
+			/>
+		);
+	};
+
+	const handleExpandToggle = () => {
+		const newExpanded = !expanded;
+		setExpanded(newExpanded);
+		onExpand?.(newExpanded);
+	};
+
+	// Measurement container rendered via portal to keep it outside the component's DOM tree
+	// This prevents Testing Library from finding duplicate elements
+	// We use it to calculate the number of remaining tags to render
+	const measurementContainer = (
+		<div ref={measurementRef} className={styles.measurementContainer} aria-hidden="true">
+			{label && (
+				<span data-measure-label="">
+					<DsTypography variant="body-sm-reg" className={styles.label}>
+						{label}
+					</DsTypography>
+				</span>
+			)}
+			{items.map((item) => (
+				<DsTag
+					key={item.id}
+					data-measure-tag=""
+					label={item.label}
+					selected={item.selected}
+					onClick={onItemSelect ? () => onItemSelect(item) : undefined}
+					onDelete={onItemDelete ? () => onItemDelete(item) : undefined}
+				/>
+			))}
+			{onClearAll && (
+				<DsButton
+					data-measure-clear=""
+					design="v1.2"
+					buttonType="tertiary"
+					variant="ghost"
+					className={styles.clearButton}
+					contentClassName={styles.clearContent}
+					size="small"
+				>
+					<DsIcon icon="close" />
+					{clearButton}
+				</DsButton>
+			)}
+			<DsTag data-measure-expand="" label="+99 filters" className={styles.expandTag} />
+		</div>
+	);
+
+	/**
+	 * IMPORTANT!
+	 * If you make any changes to this layout (styling, JSX, anything that affects it.)
+	 * please, apply the exact same changes to the "measurementContainer"
+	 */
+	return (
+		<>
+			<div
+				ref={containerRef}
+				className={classNames(styles.container, expanded && styles.expanded, className)}
+				style={style}
+			>
+				<div className={styles.row1}>
+					{label && (
+						<DsTypography variant="body-sm-reg" className={styles.label}>
+							{label}
+						</DsTypography>
+					)}
+					{row1Tags.map((item) => renderTag(item))}
+					{onClearAll && (
+						<DsButton
+							design="v1.2"
+							buttonType="tertiary"
+							variant="ghost"
+							className={styles.clearButton}
+							contentClassName={styles.clearContent}
+							size="small"
+							onClick={onClearAll}
+						>
+							<DsIcon icon="close" />
+							{clearButton}
+						</DsButton>
+					)}
+				</div>
+
+				{hasRow2Content && (
+					<div className={styles.row2}>
+						{row2Tags.map((item) => renderTag(item))}
+						{hasOverflow && (
+							<DsTag
+								label={
+									expanded
+										? collapseTagLabel
+										: `+${String(hiddenCount)} ${hiddenCount === 1 ? hiddenCountSingular : hiddenCountPlural}`
+								}
+								selected={expanded}
+								className={styles.expandTag}
+								onClick={handleExpandToggle}
+							/>
+						)}
+					</div>
+				)}
+			</div>
+			{createPortal(measurementContainer, document.body)}
+		</>
+	);
+};
+
+export default DsTagFilter;

package/src/components/ds-tag-filter/ds-tag-filter.types.ts

@@ -0,0 +1,68 @@
+import type { CSSProperties } from 'react';
+import type { DsTagProps } from '../ds-tag';
+
+export interface TagFilterItem {
+	/**
+	 * Unique identifier for the tag
+	 */
+	id: string;
+	/**
+	 * The label text to display in the tag
+	 */
+	label: string;
+	/**
+	 * Additional metadata to store with the tag
+	 */
+	metadata?: Record<string, unknown>;
+	/**
+	 * Whether the tag is selected/checked
+	 */
+	selected?: boolean;
+	/**
+	 * Additional props to pass to the components
+	 */
+	slotProps?: {
+		tag?: Partial<DsTagProps>;
+	};
+}
+
+export interface DsTagFilterProps {
+	/**
+	 * Array of tag items to display
+	 */
+	items: TagFilterItem[];
+	/**
+	 * Locale object (you can pass custom strings for localization)
+	 */
+	locale?: {
+		label?: string;
+		clearButton?: string;
+		collapseTagLabel?: string;
+		hiddenCountSingular?: string;
+		hiddenCountPlural?: string;
+	};
+	/**
+	 * Callback when "Clear all" is clicked
+	 */
+	onClearAll?: () => void;
+	/**
+	 * Callback when a tag is deleted/removed
+	 */
+	onItemDelete?: (item: TagFilterItem) => void;
+	/**
+	 * Callback when a tag is selected
+	 */
+	onItemSelect?: (item: TagFilterItem) => void;
+	/**
+	 * Callback when the Expand button is clicked
+	 */
+	onExpand?: (expanded?: boolean) => void;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: CSSProperties;
+}

package/src/components/ds-tag-filter/hooks/use-tag-overflow-calculation.ts

@@ -0,0 +1,135 @@
+import { type RefObject, useCallback, useLayoutEffect, useState } from 'react';
+import { fitTagsInRow, getContainerAvailableWidth, getElementMeasurements } from '../utils';
+
+interface UseTagOverflowCalculationOptions {
+	containerRef: RefObject<HTMLDivElement | null>;
+	measurementRef: RefObject<HTMLDivElement | null>;
+	totalItems: number;
+	expanded: boolean;
+}
+
+interface UseTagOverflowCalculationResult {
+	row1TagCount: number;
+	row2TagCount: number;
+	hasOverflow: boolean;
+}
+
+// Extra space needed per row for animated delete button that appears on hover
+const TAG_HOVER_BUTTON_SPACE = 20;
+
+/**
+ * Custom hook to calculate how many tags can fit in 2 rows.
+ *
+ * Row 1: Label + Tags + Clear Button
+ * Row 2: Remaining Tags + Expand Tag (only if overflow)
+ *
+ * Measures actual element widths to determine optimal placement.
+ */
+export const useTagOverflowCalculation = ({
+	containerRef,
+	measurementRef,
+	totalItems,
+	expanded,
+}: UseTagOverflowCalculationOptions): UseTagOverflowCalculationResult => {
+	const [state, setState] = useState<UseTagOverflowCalculationResult>({
+		row1TagCount: 0,
+		row2TagCount: 0,
+		hasOverflow: false,
+	});
+
+	const calculateLayout = useCallback(() => {
+		if (!containerRef.current || !measurementRef.current) {
+			return;
+		}
+
+		const container = containerRef.current;
+		const measurementContainer = measurementRef.current;
+
+		const { tagWidths, labelWidth, clearButtonWidth, expandTagWidth, gap } =
+			getElementMeasurements(measurementContainer);
+
+		if (tagWidths.length === 0) {
+			setState({ row1TagCount: 0, row2TagCount: 0, hasOverflow: false });
+			return;
+		}
+
+		const containerWidth = getContainerAvailableWidth(container);
+
+		// Calculate Row 1 available space (Label + Tags + Clear Button)
+		const row1AvailableWidth = containerWidth - labelWidth - clearButtonWidth - TAG_HOVER_BUTTON_SPACE;
+
+		// Calculate how many tags fit in Row 1
+		const row1Result = fitTagsInRow(tagWidths, row1AvailableWidth, gap);
+		const remainingTags = tagWidths.slice(row1Result.count);
+
+		if (remainingTags.length === 0) {
+			// All tags fit in Row 1, no overflow
+			setState({ row1TagCount: row1Result.count, row2TagCount: 0, hasOverflow: false });
+			return;
+		}
+
+		// Calculate with expand tag reserved (pessimistic)
+		const row2AvailableWithExpand = containerWidth - expandTagWidth - TAG_HOVER_BUTTON_SPACE;
+		const row2WithExpandResult = fitTagsInRow(remainingTags, row2AvailableWithExpand, gap);
+
+		// Check if there's overflow (more remaining tags than fit in Row 2 with expand)
+		const overflowExists = remainingTags.length > row2WithExpandResult.count;
+
+		if (overflowExists) {
+			// Use the count with expand tag space reserved
+			setState({
+				row1TagCount: row1Result.count,
+				row2TagCount: row2WithExpandResult.count,
+				hasOverflow: true,
+			});
+		} else {
+			// No overflow - recalculate Row 2 without reserving expand tag space
+			const row2AvailableWithoutExpand = containerWidth - TAG_HOVER_BUTTON_SPACE;
+			const row2FullResult = fitTagsInRow(remainingTags, row2AvailableWithoutExpand, gap);
+
+			// Double-check: if even without expand tag we can't fit all, we have overflow
+			if (row2FullResult.count < remainingTags.length) {
+				setState({
+					row1TagCount: row1Result.count,
+					row2TagCount: row2WithExpandResult.count,
+					hasOverflow: true,
+				});
+			} else {
+				setState({ row1TagCount: row1Result.count, row2TagCount: row2FullResult.count, hasOverflow: false });
+			}
+		}
+	}, [containerRef, measurementRef]);
+
+	useLayoutEffect(() => {
+		// Use requestAnimationFrame to ensure DOM is fully laid out
+		const rafId = requestAnimationFrame(() => {
+			calculateLayout();
+		});
+
+		const resizeObserver = new ResizeObserver(() => {
+			requestAnimationFrame(() => {
+				calculateLayout();
+			});
+		});
+
+		if (containerRef.current) {
+			resizeObserver.observe(containerRef.current);
+		}
+
+		return () => {
+			cancelAnimationFrame(rafId);
+			resizeObserver.disconnect();
+		};
+	}, [containerRef, measurementRef, totalItems, expanded, calculateLayout]);
+
+	// When expanded, show all tags
+	if (expanded) {
+		return {
+			row1TagCount: state.row1TagCount,
+			row2TagCount: totalItems - state.row1TagCount,
+			hasOverflow: true, // Keep expand button visible to allow collapse
+		};
+	}
+
+	return state;
+};

package/src/components/ds-tag-filter/index.ts

@@ -0,0 +1,2 @@
+export { default as DsTagFilter } from './ds-tag-filter';
+export type { TagFilterItem, DsTagFilterProps } from './ds-tag-filter.types';