@drivenets/design-system 0.18.0 → 0.19.0

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

@@ -58,19 +58,21 @@ const DsToggle = ({
 				<DsIcon icon="close" size={iconSize} className={closeIconClass} />
 			</Switch.Control>
 
-			{label ? (
-				<Switch.Label>
-					<DsTypography variant={isSmall ? 'body-xs-md' : 'body-sm-md'}>{label}</DsTypography>
-					{!!labelInfo && (
-						<DsTypography variant="body-xs-reg" className={styles.labelInfo}>
-							{labelInfo}
-						</DsTypography>
-					)}
-				</Switch.Label>
-			) : (
-				children
-			)}
-			<Switch.HiddenInput />
+			<Switch.Label>
+				{label ? (
+					<>
+						<DsTypography variant={isSmall ? 'body-xs-md' : 'body-sm-md'}>{label}</DsTypography>
+						{!!labelInfo && (
+							<DsTypography variant="body-xs-reg" className={styles.labelInfo}>
+								{labelInfo}
+							</DsTypography>
+						)}
+					</>
+				) : (
+					children
+				)}
+			</Switch.Label>
+			<Switch.HiddenInput className={styles.hiddenInput} />
 		</Switch.Root>
 	);
 };

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

@@ -14,6 +14,9 @@ const DsTooltip: FC<DsTooltipProps> = ({
 	children,
 	placement = 'top',
 	disabled = false,
+	interactive = false,
+	openDelay = OPEN_DELAY_MS,
+	closeDelay = CLOSE_DELAY_MS,
 	getAnchorRect,
 	slotProps,
 }) => {
@@ -23,8 +26,9 @@ const DsTooltip: FC<DsTooltipProps> = ({
 
 	return (
 		<Tooltip.Root
-			openDelay={OPEN_DELAY_MS}
-			closeDelay={CLOSE_DELAY_MS}
+			interactive={interactive}
+			openDelay={openDelay}
+			closeDelay={closeDelay}
 			disabled={disabled}
 			positioning={{ placement, gutter: TOOLTIP_GUTTER_PX, getAnchorRect: getAnchorRect ?? undefined }}
 			lazyMount

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

@@ -44,6 +44,23 @@ export interface DsTooltipProps {
 	 * When true the trigger renders but the tooltip never opens.
 	 */
 	disabled?: boolean;
+	/**
+	 * When true, content is pointer-reachable and the tooltip stays open while the
+	 * pointer is over it. Pair with a non-zero `closeDelay` (e.g. 150) so the pointer
+	 * can travel from the trigger onto the content; `0` can lose that handoff.
+	 * @default false
+	 */
+	interactive?: boolean;
+	/**
+	 * Milliseconds after pointer enter or focus before the tooltip opens.
+	 * @default 200
+	 */
+	openDelay?: number;
+	/**
+	 * Milliseconds after pointer leave before the tooltip closes.
+	 * @default 0
+	 */
+	closeDelay?: number;
 	/**
 	 * Anchors the tooltip to a virtual rect instead of the trigger, re-evaluated on
 	 * each reposition. Return `null` to fall back to the trigger.

package/src/components/ds-top-bar-navigation/ds-top-bar-navigation.figma.ts

@@ -0,0 +1,35 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=9543-40942
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-top-bar-navigation
+// component=DsTopBarNavigation
+//
+// `DsTopBarNavigationV1` maps to the `DsTopBarNavigation` compound component. Figma models the
+// bar as a fixed 920px left frame with an absolutely-positioned breadcrumb; in code the zones
+// are flex (`.Logo` fixed-basis, `.Breadcrumb` shrinkable, `.Center` reserved, `.Actions`
+// pinned right), so none of that geometry maps to props.
+//
+// The brand glyph and wordmark are consumer slots — no brand asset ships with the design
+// system — so they are emitted as placeholders. Figma's `DsBotButtonV1` maps to `DsBotButton`,
+// which is connected separately in `ds-bot-button/ds-bot-button.figma.ts`.
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsTopBarNavigation>
+	<DsTopBarNavigation.Logo logo={<img src="/brand-mark.svg" alt="" />} wordmark="DAP" href="/" onAppsClick={() => {}} />
+	<DsTopBarNavigation.Breadcrumb>
+		<DsBreadcrumb items={[]} />
+	</DsTopBarNavigation.Breadcrumb>
+	<DsTopBarNavigation.Center />
+	<DsTopBarNavigation.Actions>
+		<DsTopBarNavigation.Notifications count={13} onClick={() => {}} />
+		<DsBotButton />
+		<DsTopBarNavigation.UserMenu name="Full Name">
+			<DsDropdownMenu.Item value="profile">Profile</DsDropdownMenu.Item>
+		</DsTopBarNavigation.UserMenu>
+	</DsTopBarNavigation.Actions>
+</DsTopBarNavigation>`,
+	imports: [
+		"import { DsTopBarNavigation, DsBotButton, DsBreadcrumb, DsDropdownMenu } from '@drivenets/design-system';",
+	],
+	id: 'ds-top-bar-navigation',
+	metadata: { nestable: false },
+} satisfies figma.Template;

package/src/components/ds-top-bar-navigation/ds-top-bar-navigation.module.scss

@@ -0,0 +1,150 @@
+$focus-outline-width: 2px;
+$disabled-avatar-opacity: 0.55;
+
+.root {
+	--ds-top-bar-navigation-height: 54px;
+	--ds-top-bar-navigation-logo-min-width: 174px;
+	--ds-top-bar-navigation-logo-glyph-size: 32px;
+	--ds-top-bar-navigation-wordmark-font-size: 24px;
+	--ds-top-bar-navigation-breadcrumb-offset: var(--lg);
+	--ds-top-bar-navigation-zone-gap: var(--lg);
+	--ds-top-bar-navigation-badge-size: 16px;
+	--ds-top-bar-navigation-caret-size: 20px;
+
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	height: var(--ds-top-bar-navigation-height);
+	padding-right: var(--md);
+	border-bottom: 1px solid var(--border);
+	background: var(--background);
+}
+
+.logo {
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	gap: var(--sm);
+	align-self: stretch;
+	min-width: var(--ds-top-bar-navigation-logo-min-width);
+	padding: 0 var(--lg);
+	background: var(--background-primary);
+	color: var(--font-on-action);
+}
+
+.logoLockup {
+	display: flex;
+	align-items: center;
+	gap: var(--xs);
+	color: inherit;
+	text-decoration: none;
+}
+
+.logoGlyph {
+	display: flex;
+	flex-shrink: 0;
+	width: var(--ds-top-bar-navigation-logo-glyph-size);
+	height: var(--ds-top-bar-navigation-logo-glyph-size);
+}
+
+.logoWordmark {
+	font-family: var(--font-family-heading);
+	font-size: var(--ds-top-bar-navigation-wordmark-font-size);
+	font-weight: var(--font-weight-bold);
+	white-space: nowrap;
+}
+
+.breadcrumb {
+	display: flex;
+	align-items: center;
+	min-width: 0;
+	margin-left: var(--ds-top-bar-navigation-breadcrumb-offset);
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.center {
+	display: flex;
+	align-items: center;
+	flex: 1;
+	min-width: 0;
+}
+
+.actions {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	gap: var(--standard);
+	margin-inline-start: auto;
+	padding-inline-start: var(--ds-top-bar-navigation-zone-gap);
+}
+
+.notificationsBadge {
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-width: var(--ds-top-bar-navigation-badge-size);
+	height: var(--ds-top-bar-navigation-badge-size);
+	padding: 0 var(--3xs);
+	border-radius: 9999px;
+	background: var(--background-error);
+	color: var(--font-on-action);
+	font-size: var(--body-font-size-xs);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--body-line-height-xs);
+
+	&[data-empty] {
+		display: none;
+	}
+}
+
+.userMenuTrigger {
+	display: flex;
+	align-items: center;
+	gap: var(--3xs);
+	padding: 0;
+	border: none;
+	border-radius: var(--3xs);
+	background: transparent;
+	color: var(--font-main);
+	cursor: pointer;
+
+	// Nested for the extra class of specificity: `DsAvatar` paints its own `background-color`
+	// and `color` from a single-class rule, so a standalone `.userMenuAvatar` ties with it and
+	// bundle order picks the winner.
+	.userMenuAvatar {
+		background-color: var(--light-buttons-tertiary);
+		color: var(--font-main);
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		outline: $focus-outline-width solid var(--border-action-primary);
+		outline-offset: $focus-outline-width;
+	}
+
+	&:disabled {
+		color: var(--font-disabled);
+		cursor: not-allowed;
+
+		// The caret follows `color`; the avatar sets its own fill and text color above, so
+		// neither inherits the disabled tone — dim the whole lockup instead.
+		.userMenuAvatar {
+			opacity: $disabled-avatar-opacity;
+		}
+	}
+}
+
+.userMenuCaret {
+	display: flex;
+	flex-shrink: 0;
+	width: var(--ds-top-bar-navigation-caret-size);
+	height: var(--ds-top-bar-navigation-caret-size);
+}

package/src/components/ds-top-bar-navigation/ds-top-bar-navigation.tsx

@@ -0,0 +1,161 @@
+import classNames from 'classnames';
+import styles from './ds-top-bar-navigation.module.scss';
+import { DsAvatar } from '../ds-avatar';
+import { DsButtonV3 } from '../ds-button-v3';
+import { DsDropdownMenu } from '../ds-dropdown-menu';
+import { DsIcon } from '../ds-icon';
+import {
+	notificationCountCap,
+	type DsTopBarNavigationActionsProps,
+	type DsTopBarNavigationBreadcrumbProps,
+	type DsTopBarNavigationCenterProps,
+	type DsTopBarNavigationLogoProps,
+	type DsTopBarNavigationNotificationsProps,
+	type DsTopBarNavigationProps,
+	type DsTopBarNavigationUserMenuProps,
+} from './ds-top-bar-navigation.types';
+
+const DEFAULT_LOCALE = Object.freeze({
+	appsButtonLabel: 'Apps',
+	notificationsButtonLabel: 'Notifications',
+	notificationsButtonLabelWithCount: (count: number) => `Notifications, ${String(count)} unread`,
+	userMenuButtonLabel: (name: string) => `Account menu for ${name}`,
+});
+
+const DEFAULT_USER_MENU_POSITIONING = Object.freeze({ placement: 'bottom-end' } as const);
+
+const DsTopBarNavigationRoot = ({ className, ...rest }: DsTopBarNavigationProps) => (
+	<div {...rest} className={classNames(styles.root, className)} />
+);
+
+const Logo = ({
+	className,
+	logo,
+	wordmark,
+	href,
+	locale,
+	onLogoClick,
+	onAppsClick,
+	appsMenu,
+	...rest
+}: DsTopBarNavigationLogoProps) => {
+	const lockup = (
+		<>
+			{logo ? <span className={styles.logoGlyph}>{logo}</span> : null}
+			{wordmark ? <span className={styles.logoWordmark}>{wordmark}</span> : null}
+		</>
+	);
+
+	return (
+		<div {...rest} className={classNames(styles.logo, className)}>
+			{href ? (
+				<a className={styles.logoLockup} href={href} aria-label={locale?.homeLinkLabel} onClick={onLogoClick}>
+					{lockup}
+				</a>
+			) : (
+				<span className={styles.logoLockup}>{lockup}</span>
+			)}
+
+			{appsMenu}
+
+			{!appsMenu && onAppsClick ? (
+				<DsButtonV3
+					variant="tertiary"
+					color="light"
+					size="small"
+					icon="apps"
+					aria-label={locale?.appsButtonLabel ?? DEFAULT_LOCALE.appsButtonLabel}
+					onClick={onAppsClick}
+				/>
+			) : null}
+		</div>
+	);
+};
+
+const Breadcrumb = ({ className, ...rest }: DsTopBarNavigationBreadcrumbProps) => (
+	<div {...rest} className={classNames(styles.breadcrumb, className)} />
+);
+
+/** Reserved zone between the breadcrumb trail and the actions. Empty by design today. */
+const Center = ({ className, ...rest }: DsTopBarNavigationCenterProps) => (
+	<div {...rest} className={classNames(styles.center, className)} />
+);
+
+const Actions = ({ className, ...rest }: DsTopBarNavigationActionsProps) => (
+	<div {...rest} className={classNames(styles.actions, className)} />
+);
+
+const Notifications = ({ count = 0, locale, ...rest }: DsTopBarNavigationNotificationsProps) => {
+	const hasCount = count > 0;
+	const label = hasCount
+		? (locale?.notificationsButtonLabelWithCount ?? DEFAULT_LOCALE.notificationsButtonLabelWithCount)(count)
+		: (locale?.notificationsButtonLabel ?? DEFAULT_LOCALE.notificationsButtonLabel);
+
+	return (
+		<DsButtonV3 {...rest} variant="tertiary" size="small" icon="notifications_active" aria-label={label}>
+			{/*
+				Always rendered so DsButtonV3 never switches to its icon-only geometry,
+				which would re-pad the bell when the count clears.
+			*/}
+			<span className={styles.notificationsBadge} aria-hidden data-empty={hasCount ? undefined : ''}>
+				{count > notificationCountCap ? `${String(notificationCountCap)}+` : count}
+			</span>
+		</DsButtonV3>
+	);
+};
+
+const UserMenu = ({
+	className,
+	name,
+	src,
+	children,
+	open,
+	positioning,
+	locale,
+	onOpenChange,
+	onSelect,
+	...rest
+}: DsTopBarNavigationUserMenuProps) => (
+	<DsDropdownMenu.Root
+		open={open}
+		// Merged, not replaced: a caller who only overrides `gutter` keeps `bottom-end`, which is
+		// what stops the menu from spilling past the right edge of the bar.
+		positioning={{ ...DEFAULT_USER_MENU_POSITIONING, ...positioning }}
+		onOpenChange={onOpenChange}
+		onSelect={onSelect}
+	>
+		<DsDropdownMenu.Trigger asChild>
+			<button
+				{...rest}
+				type="button"
+				className={classNames(styles.userMenuTrigger, className)}
+				aria-label={(locale?.userMenuButtonLabel ?? DEFAULT_LOCALE.userMenuButtonLabel)(name)}
+			>
+				<DsAvatar className={styles.userMenuAvatar} name={name} src={src} size="regular" type="circle" />
+				<span className={styles.userMenuCaret}>
+					<DsIcon icon="arrow_drop_down" size="small" aria-hidden />
+				</span>
+			</button>
+		</DsDropdownMenu.Trigger>
+		<DsDropdownMenu.Content>{children}</DsDropdownMenu.Content>
+	</DsDropdownMenu.Root>
+);
+
+DsTopBarNavigationRoot.displayName = 'DsTopBarNavigation';
+Logo.displayName = 'DsTopBarNavigation.Logo';
+Breadcrumb.displayName = 'DsTopBarNavigation.Breadcrumb';
+Center.displayName = 'DsTopBarNavigation.Center';
+Actions.displayName = 'DsTopBarNavigation.Actions';
+Notifications.displayName = 'DsTopBarNavigation.Notifications';
+UserMenu.displayName = 'DsTopBarNavigation.UserMenu';
+
+const DsTopBarNavigation = Object.assign(DsTopBarNavigationRoot, {
+	Logo,
+	Breadcrumb,
+	Center,
+	Actions,
+	Notifications,
+	UserMenu,
+});
+
+export default DsTopBarNavigation;

package/src/components/ds-top-bar-navigation/ds-top-bar-navigation.types.ts

@@ -0,0 +1,117 @@
+import type { ComponentPropsWithRef, MouseEvent, ReactNode } from 'react';
+import type { DsDropdownMenuPositioning } from '../ds-dropdown-menu';
+
+/** Count above which the notification badge collapses to `<cap>+`. */
+export const notificationCountCap = 99;
+
+export type DsTopBarNavigationProps = ComponentPropsWithRef<'div'>;
+
+export interface DsTopBarNavigationLogoProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+	/**
+	 * Brand glyph rendered at 32px before the wordmark. Kept as a slot, so the bar stays
+	 * tenant-neutral — no brand asset ships with the design system.
+	 */
+	logo?: ReactNode;
+	/**
+	 * Brand wordmark rendered beside the glyph. Styled with the heading font; pass a node
+	 * when the mark needs custom kerning.
+	 */
+	wordmark?: ReactNode;
+	/**
+	 * Turns the glyph and wordmark into a link to the platform home.
+	 */
+	href?: string;
+	locale?: {
+		/**
+		 * Accessible name for the logo link. Only applied when `href` is set; useful when the
+		 * wordmark is an image rather than text.
+		 */
+		homeLinkLabel?: string;
+		/**
+		 * @default 'Apps'
+		 */
+		appsButtonLabel?: string;
+	};
+	/**
+	 * Fires on the logo link itself, not the surrounding zone. Call `preventDefault` here to
+	 * hand navigation to a client-side router instead of letting the browser reload the document.
+	 */
+	onLogoClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+	/**
+	 * Renders the app-switcher button. Omit to hide the button entirely. Ignored when
+	 * `appsMenu` is set.
+	 */
+	onAppsClick?: () => void;
+	/**
+	 * Takes over the app-switcher slot with your own control — pass a `DsMainMenu` to open the
+	 * app grid from the brand zone. The node is rendered as-is, so it owns its own trigger,
+	 * open state, and positioning.
+	 */
+	appsMenu?: ReactNode;
+}
+
+export type DsTopBarNavigationBreadcrumbProps = ComponentPropsWithRef<'div'>;
+
+export type DsTopBarNavigationCenterProps = ComponentPropsWithRef<'div'>;
+
+export type DsTopBarNavigationActionsProps = ComponentPropsWithRef<'div'>;
+
+export interface DsTopBarNavigationNotificationsProps extends Omit<
+	ComponentPropsWithRef<'button'>,
+	'children' | 'aria-label' | 'color'
+> {
+	/**
+	 * Unread count. `0` or omitted renders the bell with no badge; anything above
+	 * `notificationCountCap` collapses to a capped label.
+	 */
+	count?: number;
+	locale?: {
+		/**
+		 * Accessible name when there are no unread notifications.
+		 * @default 'Notifications'
+		 */
+		notificationsButtonLabel?: string;
+		/**
+		 * Accessible name when unread notifications exist. Receives the uncapped count.
+		 * @default (count) => `Notifications, ${count} unread`
+		 */
+		notificationsButtonLabelWithCount?: (count: number) => string;
+	};
+}
+
+export interface DsTopBarNavigationUserMenuProps extends Omit<
+	ComponentPropsWithRef<'button'>,
+	'children' | 'aria-label' | 'onSelect'
+> {
+	/**
+	 * Drives the avatar initials and its accessible name.
+	 */
+	name: string;
+	/**
+	 * Avatar photo URL. Omit, or let it fail to load, to fall back to initials.
+	 */
+	src?: string;
+	/**
+	 * Menu entries — `DsDropdownMenu.Item`, `.Separator`, `.ItemGroup` and friends.
+	 */
+	children?: ReactNode;
+	/**
+	 * Open state for controlled usage.
+	 */
+	open?: boolean;
+	/**
+	 * Placement and offset of the menu. Defaults to `bottom-end` so the menu stays inside the
+	 * viewport when the trigger sits against the right edge of the bar.
+	 */
+	positioning?: DsDropdownMenuPositioning;
+	locale?: {
+		/**
+		 * Accessible name for the trigger. Receives `name`; the default distinguishes the
+		 * control from the avatar's own name tooltip.
+		 * @default (name) => `Account menu for ${name}`
+		 */
+		userMenuButtonLabel?: (name: string) => string;
+	};
+	onOpenChange?: (open: boolean) => void;
+	onSelect?: (value: string) => void;
+}

package/src/components/ds-top-bar-navigation/index.ts

@@ -0,0 +1,2 @@
+export { default as DsTopBarNavigation } from './ds-top-bar-navigation';
+export * from './ds-top-bar-navigation.types';

package/src/index.ts

@@ -2,7 +2,9 @@ export * from './components/ds-alert-banner';
 export * from './components/ds-autocomplete';
 export * from './components/ds-avatar';
 export * from './components/ds-avatar-group';
+export * from './components/ds-bot-button';
 export * from './components/ds-breadcrumb';
+export * from './components/ds-bulk-actions';
 export * from './components/ds-button';
 export * from './components/ds-button-v3';
 export * from './components/ds-card';
@@ -23,14 +25,17 @@ export * from './components/ds-dialog';
 export * from './components/ds-divider';
 export * from './components/ds-drawer';
 export * from './components/ds-dropdown-menu';
+export * from './components/ds-empty-state';
 export * from './components/ds-expandable-text-input';
 export * from './components/ds-file-upload';
 export * from './components/ds-filter-status-icon';
 export * from './components/ds-form-control';
 export * from './components/ds-grid';
 export * from './components/ds-icon';
+export * from './components/ds-illustration';
 export * from './components/ds-key-value-pair';
 export * from './components/ds-loader';
+export * from './components/ds-main-menu';
 export * from './components/ds-modal';
 export * from './components/ds-number-input';
 export * from './components/ds-panel';
@@ -64,6 +69,7 @@ export * from './components/ds-time-picker';
 export * from './components/ds-toast';
 export * from './components/ds-toggle';
 export * from './components/ds-tooltip';
+export * from './components/ds-top-bar-navigation';
 export * from './components/ds-tree';
 export * from './components/ds-typography';
 export * from './components/ds-user-card';

package/src/utils/use-is-horizontally-overflowing.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+export const useIsHorizontallyOverflowing = <T extends HTMLElement = HTMLElement>(content?: string) => {
+	const [element, setElement] = useState<T | null>(null);
+	const [measuredOverflow, setMeasuredOverflow] = useState(false);
+
+	useEffect(() => {
+		if (!element || !content) {
+			return;
+		}
+
+		const measure = () => {
+			setMeasuredOverflow(element.scrollWidth > element.clientWidth);
+		};
+
+		measure();
+
+		const resizeObserver = new ResizeObserver(measure);
+		resizeObserver.observe(element);
+
+		// document.fonts is missing in jsdom; `'fonts' in document` (not optional chaining) satisfies TS.
+		const fonts = 'fonts' in document ? document.fonts : undefined;
+		fonts?.addEventListener('loadingdone', measure);
+
+		return () => {
+			resizeObserver.disconnect();
+			fonts?.removeEventListener('loadingdone', measure);
+		};
+	}, [content, element]);
+
+	return {
+		ref: setElement,
+		isOverflowing: Boolean(content) && measuredOverflow,
+	};
+};

package/src/components/ds-site-node/hooks/use-is-overflowing.ts

@@ -1,31 +0,0 @@
-import { useLayoutEffect, useRef, useState } from 'react';
-
-export const useIsOverflowing = <T extends HTMLElement = HTMLElement>(text: string | undefined) => {
-	const ref = useRef<T>(null);
-	const [isOverflowing, setIsOverflowing] = useState(false);
-
-	useLayoutEffect(() => {
-		const element = ref.current;
-		if (!element) {
-			return;
-		}
-
-		const measure = () => setIsOverflowing(element.scrollWidth > element.clientWidth);
-		measure();
-
-		const observer = new ResizeObserver(measure);
-		observer.observe(element);
-
-		const frame = requestAnimationFrame(measure);
-		document.fonts.ready.then(measure).catch(() => undefined);
-		document.fonts.addEventListener('loadingdone', measure);
-
-		return () => {
-			cancelAnimationFrame(frame);
-			observer.disconnect();
-			document.fonts.removeEventListener('loadingdone', measure);
-		};
-	}, [text]);
-
-	return { ref, isOverflowing };
-};