@drivenets/design-system 0.18.1 → 0.20.0

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/components/ds-tree/ds-tree.tsx

@@ -79,14 +79,14 @@ const DsTreeTree = ({ className, style, children }: DsTreeTreeProps) => (
 	</TreeView.Tree>
 );
 
-const DsTreeBranch = ({ className, style, children }: DsTreeBranchProps) => (
-	<TreeView.Branch className={classNames(styles.branch, className)} style={style}>
+const DsTreeBranch = ({ className, style, children, ...rest }: DsTreeBranchProps) => (
+	<TreeView.Branch {...rest} className={classNames(styles.branch, className)} style={style}>
 		{children}
 	</TreeView.Branch>
 );
 
-const DsTreeBranchControl = ({ className, style, children }: DsTreeBranchControlProps) => (
-	<TreeView.BranchControl className={classNames(styles.branchControl, className)} style={style}>
+const DsTreeBranchControl = ({ className, style, children, ...rest }: DsTreeBranchControlProps) => (
+	<TreeView.BranchControl {...rest} className={classNames(styles.branchControl, className)} style={style}>
 		{children}
 	</TreeView.BranchControl>
 );
@@ -97,8 +97,8 @@ const DsTreeBranchIndicator = ({ className, style, children }: DsTreeBranchIndic
 	</TreeView.BranchIndicator>
 );
 
-const DsTreeBranchText = ({ className, style, children }: DsTreeBranchTextProps) => (
-	<TreeView.BranchText className={classNames(styles.branchText, className)} style={style}>
+const DsTreeBranchText = ({ className, style, children, ...rest }: DsTreeBranchTextProps) => (
+	<TreeView.BranchText {...rest} className={classNames(styles.branchText, className)} style={style}>
 		{children}
 	</TreeView.BranchText>
 );
@@ -113,14 +113,14 @@ const DsTreeBranchIndentGuide = ({ className, style }: DsTreeBranchIndentGuidePr
 	<TreeView.BranchIndentGuide className={classNames(styles.branchIndentGuide, className)} style={style} />
 );
 
-const DsTreeItem = ({ className, style, children, onClick }: DsTreeItemProps) => (
-	<TreeView.Item className={classNames(styles.item, className)} style={style} onClick={onClick}>
+const DsTreeItem = ({ className, style, children, onClick, ...rest }: DsTreeItemProps) => (
+	<TreeView.Item {...rest} className={classNames(styles.item, className)} style={style} onClick={onClick}>
 		{children}
 	</TreeView.Item>
 );
 
-const DsTreeItemText = ({ className, style, children }: DsTreeItemTextProps) => (
-	<TreeView.ItemText className={classNames(styles.itemText, className)} style={style}>
+const DsTreeItemText = ({ className, style, children, ...rest }: DsTreeItemTextProps) => (
+	<TreeView.ItemText {...rest} className={classNames(styles.itemText, className)} style={style}>
 		{children}
 	</TreeView.ItemText>
 );

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

@@ -1,4 +1,14 @@
-import type { CSSProperties, MouseEvent, ReactNode, Ref } from 'react';
+import type {
+	AriaAttributes,
+	CSSProperties,
+	FocusEventHandler,
+	KeyboardEventHandler,
+	MouseEvent,
+	MouseEventHandler,
+	PointerEventHandler,
+	ReactNode,
+	Ref,
+} from 'react';
 import type { TreeView as ArkTreeView } from '@ark-ui/react/tree-view';
 import type { IconType } from '../ds-icon';
 import type { FilterStatus } from '../ds-filter-status-icon';
@@ -96,7 +106,7 @@ export interface DsTreeRootProps<T extends DsTreeNode = DsTreeNode> extends DsTr
 	/**
 	 * Whether clicking anywhere on a branch row toggles its expansion in addition
 	 * to clicking the branch indicator.
-	 * @default false
+	 * @default true
 	 */
 	expandOnClick?: boolean;
 
@@ -148,26 +158,49 @@ export interface DsTreeRootProps<T extends DsTreeNode = DsTreeNode> extends DsTr
 
 export type DsTreeTreeProps = DsTreeBasePropsWithChildren;
 
-export type DsTreeBranchProps = DsTreeBasePropsWithChildren;
+/**
+ * Props a wrapping `asChild` trigger (`DsPopover.Trigger`, `DsTooltip`) injects onto
+ * the element it wraps. Row parts forward these so wrapping a row actually wires up
+ * instead of silently doing nothing.
+ */
+export interface DsTreeRowTriggerProps<T extends HTMLElement = HTMLElement> {
+	id?: string;
+	ref?: Ref<T>;
+	tabIndex?: number;
+	'aria-haspopup'?: AriaAttributes['aria-haspopup'];
+	'aria-expanded'?: AriaAttributes['aria-expanded'];
+	'aria-controls'?: string;
+	'data-state'?: string;
+	onClick?: MouseEventHandler<T>;
+	onPointerDown?: PointerEventHandler<T>;
+	onPointerEnter?: PointerEventHandler<T>;
+	onPointerLeave?: PointerEventHandler<T>;
+	onFocus?: FocusEventHandler<T>;
+	onBlur?: FocusEventHandler<T>;
+	onKeyDown?: KeyboardEventHandler<T>;
+}
+
+export type DsTreeBranchProps = DsTreeBasePropsWithChildren & DsTreeRowTriggerProps<HTMLDivElement>;
 
-export type DsTreeBranchControlProps = DsTreeBasePropsWithChildren;
+export type DsTreeBranchControlProps = DsTreeBasePropsWithChildren & DsTreeRowTriggerProps<HTMLDivElement>;
 
 export type DsTreeBranchIndicatorProps = DsTreeBasePropsWithChildren;
 
-export type DsTreeBranchTextProps = DsTreeBasePropsWithChildren;
+export type DsTreeBranchTextProps = DsTreeBasePropsWithChildren & DsTreeRowTriggerProps<HTMLSpanElement>;
 
 export type DsTreeBranchContentProps = DsTreeBasePropsWithChildren;
 
 export type DsTreeBranchIndentGuideProps = DsTreeBaseProps;
 
-export interface DsTreeItemProps extends DsTreeBasePropsWithChildren {
+export interface DsTreeItemProps
+	extends DsTreeBasePropsWithChildren, Omit<DsTreeRowTriggerProps<HTMLDivElement>, 'onClick'> {
 	/**
 	 * Called when the leaf item is clicked. Receives the native mouse event.
 	 */
 	onClick?: (event: MouseEvent<HTMLDivElement>) => void;
 }
 
-export type DsTreeItemTextProps = DsTreeBasePropsWithChildren;
+export type DsTreeItemTextProps = DsTreeBasePropsWithChildren & DsTreeRowTriggerProps<HTMLSpanElement>;
 
 export type DsTreeItemIndicatorProps = DsTreeBaseProps;
 

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';
@@ -11,6 +13,7 @@ export * from './components/ds-checkbox';
 export * from './components/ds-checkbox-group';
 export * from './components/ds-chip';
 export * from './components/ds-chip-group';
+export * from './components/ds-code-input';
 export * from './components/ds-comment-bubble';
 export * from './components/ds-comment-card';
 export * from './components/ds-comment-indicator';
@@ -23,18 +26,22 @@ 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';
 export * from './components/ds-password-input';
+export * from './components/ds-pin-toggle';
 export * from './components/ds-popover';
 export * from './components/ds-progress-arc';
 export * from './components/ds-progress-donut';
@@ -64,6 +71,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 };
-};

package/src/components/ds-table/components/ds-table-bulk-actions/ds-table-bulk-actions.module.scss

@@ -1,112 +0,0 @@
-@use '../../../../styles/typography';
-
-.bulkActionsContainer {
-	position: absolute;
-	bottom: 20px;
-	left: 50%;
-	transform: translateX(-50%);
-	background-color: var(--color-dap-gray-050);
-	border-radius: 8px;
-	box-shadow: 0 4px 12px #0445cc66;
-	z-index: 1;
-	display: flex;
-	align-items: center;
-	border-radius: 8px;
-	overflow: hidden;
-	animation-duration: 0.3s;
-	animation-timing-function: ease-out;
-	animation-fill-mode: forwards;
-
-	&.entering {
-		animation-name: slideUpFadeIn;
-	}
-
-	&.exiting {
-		animation-name: slideDownFadeOut;
-	}
-}
-
-.bulkActionsContent {
-	display: flex;
-	align-items: center;
-	padding-right: 6px;
-	padding-left: 6px;
-}
-
-.selectedCountContainer {
-	background-color: var(--color-dap-blue-600);
-	display: flex;
-	align-items: center;
-	padding: 6px 22px;
-}
-
-.selectedCountBadge {
-	color: var(--color-dap-gray-050);
-	margin: 0;
-}
-
-.bulkActionsInfo {
-	color: var(--color-dap-gray-600);
-	text-wrap: nowrap;
-	padding-left: 8px;
-	padding-right: 56px;
-}
-
-.bulkActionsActions {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-
-	> .actionButton {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		gap: var(--3xs);
-		border-right: 1px solid var(--color-dap-gray-400);
-		width: 68px;
-		height: 48px;
-		border-radius: 0;
-	}
-
-	> .actionButton:first-child {
-		border-left: 1px solid var(--color-dap-gray-400);
-	}
-}
-
-.escapeButtonContent {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	color: var(--color-dap-gray-600);
-	gap: 2px !important;
-	width: 36px;
-	padding-left: 4px;
-
-	&:hover {
-		color: var(--color-dap-gray-500);
-	}
-}
-
-@keyframes slideUpFadeIn {
-	0% {
-		opacity: 0;
-		transform: translate(-50%, 100%);
-	}
-	100% {
-		opacity: 1;
-		transform: translate(-50%, 0);
-	}
-}
-
-@keyframes slideDownFadeOut {
-	0% {
-		opacity: 1;
-		transform: translate(-50%, 0);
-	}
-	100% {
-		opacity: 0;
-		transform: translate(-50%, 100%);
-	}
-}

package/src/components/ds-table/components/ds-table-bulk-actions/ds-table-bulk-actions.tsx

@@ -1,67 +0,0 @@
-import type React from 'react';
-import { useEffect, useState } from 'react';
-import classnames from 'classnames';
-import { DsButton } from '../../../ds-button';
-import { DsIcon } from '../../../ds-icon';
-import styles from './ds-table-bulk-actions.module.scss';
-import type { BulkActionsProps } from './ds-table-bulk-actions.types';
-import { DsTypography } from '../../../ds-typography';
-
-const DsTableBulkActions: React.FC<BulkActionsProps> = ({ numSelectedRows, actions, onClearSelection }) => {
-	const [isRendered, setIsRendered] = useState(false);
-	const [animationClass, setAnimationClass] = useState('');
-
-	useEffect(() => {
-		if (numSelectedRows > 0) {
-			setIsRendered(true);
-			setAnimationClass(styles.entering);
-		} else if (isRendered) {
-			setAnimationClass(styles.exiting);
-			const timer = setTimeout(() => {
-				setIsRendered(false);
-				setAnimationClass('');
-			}, 300);
-			return () => clearTimeout(timer);
-		}
-	}, [numSelectedRows, isRendered]);
-
-	if (!isRendered) {
-		return null;
-	}
-
-	return (
-		<div className={classnames(styles.bulkActionsContainer, animationClass)}>
-			<div className={styles.selectedCountContainer}>
-				<DsTypography variant="heading1" className={styles.selectedCountBadge}>
-					{numSelectedRows}
-				</DsTypography>
-			</div>
-			<div className={styles.bulkActionsContent}>
-				<DsTypography variant="body-md-semi-bold" className={styles.bulkActionsInfo}>
-					Items selected
-				</DsTypography>
-
-				<div className={styles.bulkActionsActions}>
-					{actions.map((action, index) => (
-						<button key={index} type="button" className={styles.actionButton} onClick={action.onClick}>
-							<DsIcon icon={action.icon} />
-							<DsTypography variant="body-xs-md">{action.label}</DsTypography>
-						</button>
-					))}
-				</div>
-
-				<DsButton
-					variant="borderless"
-					size="small"
-					color="neutral-2"
-					contentClassName={styles.escapeButtonContent}
-					onClick={onClearSelection}
-				>
-					<DsIcon icon="close" />
-				</DsButton>
-			</div>
-		</div>
-	);
-};
-
-export default DsTableBulkActions;

package/src/components/ds-table/components/ds-table-bulk-actions/ds-table-bulk-actions.types.ts

@@ -1,41 +0,0 @@
-import type { IconType } from '../../../ds-icon';
-
-/**
- * Represents a bulk action that can be performed on selected table rows
- */
-export interface Action {
-	/**
-	 * Icon to be displayed for the action
-	 */
-	icon: IconType;
-
-	/**
-	 * Label text for the action
-	 */
-	label: string;
-
-	/**
-	 * Function to be called when the action is clicked
-	 */
-	onClick: () => void;
-}
-
-/**
- * Props for the bulk actions component
- */
-export interface BulkActionsProps {
-	/**
-	 * Number of rows currently selected in the table
-	 */
-	numSelectedRows: number;
-
-	/**
-	 * Array of actions to be displayed in the bulk actions bar
-	 */
-	actions: Action[];
-
-	/**
-	 * Function to be called when the selection should be cleared
-	 */
-	onClearSelection: () => void;
-}

package/src/components/ds-table/components/ds-table-bulk-actions/index.ts

@@ -1,2 +0,0 @@
-export { default as DsTableBulkActions } from './ds-table-bulk-actions';
-export * from './ds-table-bulk-actions.types';