@drivenets/design-system 0.15.0 → 0.17.0

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

@@ -1,5 +1,32 @@
 import type { CSSProperties, ReactNode } from 'react';
 
+export const tooltipPlacements = [
+	'top',
+	'top-start',
+	'top-end',
+	'bottom',
+	'bottom-start',
+	'bottom-end',
+	'left',
+	'left-start',
+	'left-end',
+	'right',
+	'right-start',
+	'right-end',
+] as const;
+
+export type TooltipPlacement = (typeof tooltipPlacements)[number];
+
+/**
+ * Viewport-relative rect (CSS pixels) the tooltip anchors to, instead of the trigger.
+ */
+export interface TooltipAnchorRect {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+}
+
 export interface DsTooltipProps {
 	/**
 	 * Tooltip content
@@ -9,6 +36,19 @@ export interface DsTooltipProps {
 	 * The content to be rendered inside the tooltip
 	 */
 	children: ReactNode;
+	/**
+	 * Placement relative to the trigger; `-start` / `-end` align to that edge.
+	 */
+	placement?: TooltipPlacement;
+	/**
+	 * When true the trigger renders but the tooltip never opens.
+	 */
+	disabled?: boolean;
+	/**
+	 * Anchors the tooltip to a virtual rect instead of the trigger, re-evaluated on
+	 * each reposition. Return `null` to fall back to the trigger.
+	 */
+	getAnchorRect?: () => TooltipAnchorRect | null;
 	/**
 	 * Props forwarded to nested sub-components.
 	 */

package/src/components/ds-tree/ds-tree.module.scss

@@ -27,7 +27,7 @@ $transition-duration: 0.2s;
 		background: var(--background-action-hover-weak);
 	}
 
-	&[data-focus] {
+	&:focus-visible {
 		position: relative;
 		outline: none;
 		background: var(--background-action-hover-weak);
@@ -56,7 +56,7 @@ $transition-duration: 0.2s;
 	}
 
 	&:hover .itemAction,
-	&[data-focus-visible] .itemAction {
+	&:focus-within .itemAction {
 		opacity: 1;
 	}
 }

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

@@ -38,6 +38,9 @@ const DsTreeRoot = <T extends DsTreeNode = DsTreeNode>({
 	checkedValue,
 	defaultCheckedValue,
 	onCheckedChange,
+	focusedValue,
+	defaultFocusedValue,
+	onFocusChange,
 	typeahead = true,
 	lazyMount = true,
 	unmountOnExit,
@@ -56,6 +59,9 @@ const DsTreeRoot = <T extends DsTreeNode = DsTreeNode>({
 		checkedValue={checkedValue}
 		defaultCheckedValue={defaultCheckedValue}
 		onCheckedChange={onCheckedChange}
+		focusedValue={focusedValue}
+		defaultFocusedValue={defaultFocusedValue}
+		onFocusChange={onFocusChange}
 		typeahead={typeahead}
 		lazyMount={lazyMount}
 		unmountOnExit={unmountOnExit}
@@ -153,6 +159,22 @@ const DsTreeItemAction = ({ className, style, children, onClick }: DsTreeItemAct
 	</button>
 );
 
+DsTreeRoot.displayName = 'DsTree.Root';
+DsTreeTree.displayName = 'DsTree.Tree';
+Object.defineProperty(TreeView.NodeProvider, 'displayName', { value: 'DsTree.NodeProvider' });
+Object.defineProperty(TreeView.NodeContext, 'displayName', { value: 'DsTree.NodeContext' });
+DsTreeBranch.displayName = 'DsTree.Branch';
+DsTreeBranchControl.displayName = 'DsTree.BranchControl';
+DsTreeBranchIndicator.displayName = 'DsTree.BranchIndicator';
+DsTreeBranchText.displayName = 'DsTree.BranchText';
+DsTreeBranchContent.displayName = 'DsTree.BranchContent';
+DsTreeBranchIndentGuide.displayName = 'DsTree.BranchIndentGuide';
+DsTreeItem.displayName = 'DsTree.Item';
+DsTreeItemText.displayName = 'DsTree.ItemText';
+DsTreeItemIndicator.displayName = 'DsTree.ItemIndicator';
+DsTreeItemAction.displayName = 'DsTree.ItemAction';
+DsTreeNodeCheckbox.displayName = 'DsTree.NodeCheckbox';
+
 export const DsTree = {
 	Root: DsTreeRoot,
 	Tree: DsTreeTree,

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

@@ -115,6 +115,22 @@ export interface DsTreeRootProps<T extends DsTreeNode = DsTreeNode> extends DsTr
 	 */
 	onCheckedChange?: ArkTreeView.RootProps<T>['onCheckedChange'];
 
+	/**
+	 * Id of the node with keyboard focus (controlled). Use with `onFocusChange`.
+	 * When `null`, Ark treats the first node as focused for roving-tabindex purposes.
+	 */
+	focusedValue?: string | null;
+	/**
+	 * Id of the node focused initially when uncontrolled. When `null` (the Ark
+	 * default), the first node receives focus for roving-tabindex purposes.
+	 */
+	defaultFocusedValue?: string | null;
+	/**
+	 * Called when the focused node changes. Receives the Ark focus-change details
+	 * including the new `focusedValue` (or `null` when nothing is focused).
+	 */
+	onFocusChange?: ArkTreeView.RootProps<T>['onFocusChange'];
+
 	/**
 	 * Whether to enable typeahead navigation — typing characters focuses matching nodes.
 	 */

package/src/components/ds-typography/ds-typography.config.ts

@@ -30,7 +30,7 @@ export const typographyVariantConfig = {
 	heading4: { element: 'h4', component: ark.h4 },
 } as const;
 
-/** Semantic text colors backed by `--font-*` tokens in `_root_new.scss`. */
+/** Semantic text colors backed by `--font-*` tokens in `_root.scss`. */
 export const typographyColors = [
 	'main',
 	'secondary',

package/src/components/ds-typography/ds-typography.figma.ts

@@ -0,0 +1,63 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=39324-248
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-typography
+// component=DsTypography
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const variant = instance.getEnum('font-style', {
+	heading1: 'heading1',
+	heading2: 'heading2',
+	heading3: 'heading3',
+	heading4: 'heading4',
+	'body-md-reg': 'body-md-reg',
+	'body-md-md': 'body-md-md',
+	'body-md-semi-bold': 'body-md-semi-bold',
+	'body-md-bold': 'body-md-bold',
+	'body-md-link': 'body-md-link',
+	'body-sm-reg': 'body-sm-reg',
+	'body-sm-md': 'body-sm-md',
+	'body-sm-semi-bold': 'body-sm-semi-bold',
+	'body-sm-bold': 'body-sm-bold',
+	'body-sm-link': 'body-sm-link',
+	'body-xs-reg': 'body-xs-reg',
+	'body-xs-md': 'body-xs-md',
+	'body-xs-semi-bold': 'body-xs-semi-bold',
+	'body-xs-bold': 'body-xs-bold',
+	'body-xs-link': 'body-xs-link',
+	'code-sm-reg': 'code-sm-reg',
+	'code-sm-semi-bold': 'code-sm-semi-bold',
+	'code-xs-reg': 'code-xs-reg',
+	'code-xs-semi-bold': 'code-xs-semi-bold',
+});
+
+const color = instance.getEnum('color', {
+	main: 'main',
+	secondary: 'secondary',
+	action: 'action',
+	'action-hover': 'action-hover',
+	'action-secondary': 'action-secondary',
+	'action-secondary-hover': 'action-secondary-hover',
+	disabled: 'disabled',
+	'light-disabled': 'light-disabled',
+	'on-action': 'on-action',
+	'on-disabled': 'on-disabled',
+	placeholder: 'placeholder',
+	highlight: 'highlight',
+	success: 'success',
+	warning: 'warning',
+	error: 'error',
+	code: 'code',
+});
+
+const textNode = instance.children.find((child): child is figma.TextHandle => child.type === 'TEXT');
+const text = textNode?.textContent ?? 'Text';
+
+const colorProp = color === 'main' ? '' : figma.code` color="${color}"`;
+
+export default {
+	example: figma.code`<DsTypography variant="${variant}"${colorProp}>${text}</DsTypography>`,
+	imports: ["import { DsTypography } from '@drivenets/design-system';"],
+	id: 'ds-typography',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-typography/ds-typography.module.scss

@@ -1,5 +1,21 @@
 @use '../../styles/typography';
 
+.truncateSingle {
+	display: block;
+	max-width: 100%;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.truncateMultiline {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: var(--ds-typography-line-clamp);
+	line-clamp: var(--ds-typography-line-clamp);
+	overflow: hidden;
+}
+
 .heading1 {
 	@include typography.heading1;
 }

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

@@ -1,6 +1,10 @@
+import { type CSSProperties, useRef } from 'react';
 import classNames from 'classnames';
 import type { DsTypographyProps } from './ds-typography.types';
 import { typographyColors, typographyVariantConfig } from './ds-typography.config';
+import { useTruncation } from './hooks/use-truncation';
+import { mergeRefs } from '../../utils/merge-refs';
+import { DsTooltip } from '../ds-tooltip';
 import styles from './ds-typography.module.scss';
 
 const semanticColorSet = new Set<string>(typographyColors);
@@ -8,6 +12,9 @@ const semanticColorSet = new Set<string>(typographyColors);
 const resolveColor = (color: string): string =>
 	semanticColorSet.has(color) ? `var(--font-${color})` : color;
 
+const resolveLineClamp = (truncate: boolean | number): number =>
+	typeof truncate === 'number' ? Math.max(1, Math.floor(truncate)) : 1;
+
 /*
  * Design system Typography component that provides consistent text styling
  */
@@ -18,25 +25,75 @@ const DsTypography = ({
 	className,
 	style,
 	color,
+	truncate = false,
+	tooltip = false,
+	tooltipContent,
 	children,
 	...props
 }: DsTypographyProps) => {
 	const Component = typographyVariantConfig[variant].component;
 
-	return (
+	const internalRef = useRef<HTMLElement>(null);
+
+	const truncationEnabled = truncate !== false;
+	const lineClamp = resolveLineClamp(truncate);
+	const isMultiline = truncationEnabled && lineClamp > 1;
+
+	const tooltipEnabled = truncationEnabled && tooltip;
+	const { isTruncated, getAnchorRect } = useTruncation(internalRef, tooltipEnabled, [children, truncate]);
+
+	let resolvedStyle: CSSProperties | undefined;
+
+	if (color || isMultiline || style) {
+		resolvedStyle = {};
+
+		if (color) {
+			resolvedStyle.color = resolveColor(color);
+		}
+
+		if (isMultiline) {
+			Object.assign(resolvedStyle, { '--ds-typography-line-clamp': lineClamp });
+		}
+
+		if (style) {
+			Object.assign(resolvedStyle, style);
+		}
+	}
+
+	const truncateClass = truncationEnabled
+		? isMultiline
+			? styles.truncateMultiline
+			: styles.truncateSingle
+		: undefined;
+
+	const element = (
 		<Component
-			// very dynamic ref in here
-			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-			// @ts-expect-error
-			ref={ref}
+			ref={mergeRefs(ref, internalRef)}
 			asChild={asChild}
-			className={classNames(styles[variant], className)}
-			style={color ? { color: resolveColor(color), ...style } : style}
+			className={classNames(styles[variant], truncateClass, className)}
+			style={resolvedStyle}
 			{...props}
 		>
 			{children}
 		</Component>
 	);
+
+	if (!tooltipEnabled) {
+		return element;
+	}
+
+	return (
+		<DsTooltip
+			content={tooltipContent ?? children}
+			placement="top"
+			disabled={!isTruncated}
+			getAnchorRect={getAnchorRect}
+		>
+			{element}
+		</DsTooltip>
+	);
 };
 
+DsTypography.displayName = 'DsTypography';
+
 export default DsTypography;

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

@@ -31,6 +31,19 @@ export interface DsTypographyProps {
 	 * When true, composes typography styles onto the child element without extra DOM nodes
 	 */
 	asChild?: boolean;
+	/**
+	 * Truncates overflowing text with an ellipsis. A number clamps to that many lines
+	 * (`true` is a single line). Needs a width-constrained layout context.
+	 */
+	truncate?: boolean | number;
+	/**
+	 * Reveals the full text in a tooltip on hover/focus, but only while it overflows.
+	 */
+	tooltip?: boolean;
+	/**
+	 * Tooltip content override; defaults to `children`.
+	 */
+	tooltipContent?: React.ReactNode;
 	/**
 	 * The content of the component
 	 */

package/src/components/ds-typography/hooks/use-truncation.ts

@@ -0,0 +1,151 @@
+import { type RefObject, useCallback, useLayoutEffect, useState } from 'react';
+import type { TooltipAnchorRect } from '../../ds-tooltip';
+
+const OVERFLOW_TOLERANCE_PX = 1;
+const FALLBACK_LINE_HEIGHT_RATIO = 1.2;
+const DEFAULT_FONT_SIZE_PX = 16;
+const ELLIPSIS = '\u2026';
+
+interface Truncation {
+	isTruncated: boolean;
+	getAnchorRect: () => TooltipAnchorRect | null;
+}
+
+const ellipsisWidthCache = new Map<string, number>();
+let ellipsisMeasureSpan: HTMLSpanElement | null = null;
+
+const measureEllipsisWidth = (computed: CSSStyleDeclaration): number => {
+	const cacheKey = `${computed.fontStyle}|${computed.fontWeight}|${computed.fontSize}|${computed.fontFamily}|${computed.letterSpacing}`;
+	const cached = ellipsisWidthCache.get(cacheKey);
+
+	if (cached !== undefined) {
+		return cached;
+	}
+
+	ellipsisMeasureSpan ??= document.createElement('span');
+	const span = ellipsisMeasureSpan;
+
+	span.textContent = ELLIPSIS;
+	span.style.position = 'absolute';
+	span.style.visibility = 'hidden';
+	span.style.whiteSpace = 'pre';
+	span.style.fontStyle = computed.fontStyle;
+	span.style.fontWeight = computed.fontWeight;
+	span.style.fontSize = computed.fontSize;
+	span.style.fontFamily = computed.fontFamily;
+	span.style.letterSpacing = computed.letterSpacing;
+
+	document.body.appendChild(span);
+	const width = span.getBoundingClientRect().width;
+	span.remove();
+
+	ellipsisWidthCache.set(cacheKey, width);
+	return width;
+};
+
+let measureRange: Range | null = null;
+
+const measureFittingPrefixRight = (textNode: Text, maxRight: number): number => {
+	measureRange ??= document.createRange();
+	const range = measureRange;
+
+	let low = 0;
+	let high = textNode.length;
+	let fittingLength = 0;
+
+	while (low <= high) {
+		const mid = (low + high) >>> 1;
+		range.setStart(textNode, 0);
+		range.setEnd(textNode, mid);
+
+		if (range.getBoundingClientRect().right <= maxRight) {
+			fittingLength = mid;
+			low = mid + 1;
+		} else {
+			high = mid - 1;
+		}
+	}
+
+	range.setStart(textNode, 0);
+	range.setEnd(textNode, fittingLength);
+	return range.getBoundingClientRect().right;
+};
+
+const getFirstTextNode = (element: HTMLElement): Text | null =>
+	element.firstChild instanceof Text ? element.firstChild : null;
+
+export const useTruncation = (
+	ref: RefObject<HTMLElement | null>,
+	enabled: boolean,
+	deps: readonly unknown[] = [],
+): Truncation => {
+	const [isTruncated, setIsTruncated] = useState(false);
+
+	useLayoutEffect(() => {
+		const element = ref.current;
+
+		if (!enabled || !element) {
+			setIsTruncated(false);
+			return;
+		}
+
+		const measure = () => {
+			const overflowsHorizontally = element.scrollWidth - element.clientWidth > OVERFLOW_TOLERANCE_PX;
+			const overflowsVertically = element.scrollHeight - element.clientHeight > OVERFLOW_TOLERANCE_PX;
+
+			setIsTruncated(overflowsHorizontally || overflowsVertically);
+		};
+
+		const rafId = requestAnimationFrame(measure);
+
+		const resizeObserver = new ResizeObserver(() => requestAnimationFrame(measure));
+		resizeObserver.observe(element);
+
+		return () => {
+			cancelAnimationFrame(rafId);
+			resizeObserver.disconnect();
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ref, enabled, ...deps]);
+
+	const getAnchorRect = useCallback((): TooltipAnchorRect | null => {
+		const element = ref.current;
+
+		if (!element) {
+			return null;
+		}
+
+		const rect = element.getBoundingClientRect();
+		const computed = getComputedStyle(element);
+
+		const paddingRight = parseFloat(computed.paddingRight) || 0;
+		const borderRight = parseFloat(computed.borderRightWidth) || 0;
+		const paddingBottom = parseFloat(computed.paddingBottom) || 0;
+		const borderBottom = parseFloat(computed.borderBottomWidth) || 0;
+
+		const fontSize = parseFloat(computed.fontSize) || DEFAULT_FONT_SIZE_PX;
+		const lineHeight = parseFloat(computed.lineHeight) || fontSize * FALLBACK_LINE_HEIGHT_RATIO;
+
+		const contentRight = rect.right - paddingRight - borderRight;
+		const ellipsisWidth = measureEllipsisWidth(computed);
+
+		const textNode = getFirstTextNode(element);
+		const isSingleLine = computed.whiteSpace === 'nowrap';
+
+		const ellipsisCenterX =
+			isSingleLine && textNode
+				? measureFittingPrefixRight(textNode, contentRight - ellipsisWidth) + ellipsisWidth / 2
+				: contentRight - ellipsisWidth / 2;
+
+		const lastLineBottom = rect.bottom - paddingBottom - borderBottom;
+
+		return {
+			x: ellipsisCenterX,
+			y: lastLineBottom - lineHeight,
+			width: 0,
+			height: lineHeight,
+		};
+	}, [ref]);
+
+	return { isTruncated, getAnchorRect };
+};

package/src/components/ds-user-card/ds-user-card.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=38540-44159
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-user-card
+// component=DsUserCard
+//
+// `DAP_user-menu-header_v01` (#38540:44159) is a plain composed instance with no
+// variant props, so it maps directly to `DsUserCard`. `name` and `subtitle` are text
+// content and `src` is a photo URL — none are derivable from Figma — so they are
+// emitted as placeholders for the developer to fill in (see `ds-select.figma.ts`).
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsUserCard name="Full Name" subtitle="subtitle" />`,
+	imports: ["import { DsUserCard } from '@drivenets/design-system';"],
+	id: 'ds-user-card',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-user-card/ds-user-card.module.scss

@@ -0,0 +1,25 @@
+.userCard {
+	display: flex;
+	align-items: center;
+	gap: var(--xs);
+	padding: var(--sm);
+	border-bottom: 1px solid var(--border-secondary);
+}
+
+.text {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	gap: var(--3xs);
+	padding-top: var(--4xs);
+	min-width: 0;
+}
+
+.name,
+.subtitle {
+	display: block;
+	max-width: 100%;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}

package/src/components/ds-user-card/ds-user-card.tsx

@@ -0,0 +1,31 @@
+import type { FC } from 'react';
+import classNames from 'classnames';
+import styles from './ds-user-card.module.scss';
+import type { DsUserCardProps } from './ds-user-card.types';
+import { DsAvatar } from '../ds-avatar';
+import { DsTypography } from '../ds-typography';
+
+/**
+ * @summary Compact identity header pairing an avatar with a name and optional subtitle.
+ *
+ * Presentational card used as the header of a user menu. Renders a medium
+ * `DsAvatar` (initials fallback derived from `name`) beside a two-line text
+ * block; both lines truncate with an ellipsis when they overflow.
+ */
+export const DsUserCard: FC<DsUserCardProps> = ({ name, subtitle, src, className, style }) => {
+	return (
+		<div className={classNames(styles.userCard, className)} style={style}>
+			<DsAvatar name={name} src={src} size="md" />
+			<div className={styles.text}>
+				<DsTypography variant="heading4" color="main" className={styles.name}>
+					{name}
+				</DsTypography>
+				{subtitle && (
+					<DsTypography variant="body-xs-reg" color="secondary" className={styles.subtitle}>
+						{subtitle}
+					</DsTypography>
+				)}
+			</div>
+		</div>
+	);
+};

package/src/components/ds-user-card/ds-user-card.types.ts

@@ -0,0 +1,26 @@
+import type { CSSProperties } from 'react';
+
+export interface DsUserCardProps {
+	/**
+	 * Full name shown as the title. Also drives the avatar initials fallback,
+	 * image alt text, and hover tooltip.
+	 */
+	name: string;
+	/**
+	 * Secondary line rendered under the name, such as an email address or role.
+	 */
+	subtitle?: string;
+	/**
+	 * Avatar image URL. Falls back to initials derived from `name` when omitted
+	 * or when the image fails to load.
+	 */
+	src?: string;
+	/**
+	 * Custom class name applied to the root element.
+	 */
+	className?: string;
+	/**
+	 * Custom inline styles applied to the root element.
+	 */
+	style?: CSSProperties;
+}

package/src/components/ds-user-card/index.ts

@@ -0,0 +1,2 @@
+export * from './ds-user-card';
+export * from './ds-user-card.types';

package/src/components/ds-vertical-tabs/ds-vertical-tabs.tsx

@@ -26,7 +26,13 @@ import styles from './ds-vertical-tabs.module.scss';
  * </DsVerticalTabs>
  * ```
  */
-const DsVerticalTabs = ({ value, onValueChange, className, style, children }: DsVerticalTabsRootProps) => {
+const DsVerticalTabsRoot = ({
+	value,
+	onValueChange,
+	className,
+	style,
+	children,
+}: DsVerticalTabsRootProps) => {
 	const handleValueChange = (details: { value: string | null }) => {
 		onValueChange?.(details.value);
 	};
@@ -73,8 +79,15 @@ const DsVerticalTabsContent = ({ value, className, children }: DsVerticalTabsCon
 	);
 };
 
-DsVerticalTabs.List = DsVerticalTabsList;
-DsVerticalTabs.Tab = DsVerticalTabsTab;
-DsVerticalTabs.Content = DsVerticalTabsContent;
+DsVerticalTabsList.displayName = 'DsVerticalTabs.List';
+DsVerticalTabsTab.displayName = 'DsVerticalTabs.Tab';
+DsVerticalTabsContent.displayName = 'DsVerticalTabs.Content';
+
+const DsVerticalTabs = Object.assign(DsVerticalTabsRoot, {
+	displayName: 'DsVerticalTabs',
+	List: DsVerticalTabsList,
+	Tab: DsVerticalTabsTab,
+	Content: DsVerticalTabsContent,
+});
 
 export default DsVerticalTabs;