@drivenets/design-system 0.18.1 → 0.19.0

package/src/components/ds-main-menu/ds-main-menu.module.scss

@@ -0,0 +1,349 @@
+$z-index: 1000;
+$tile-size: 92px;
+$badge-size: 24px;
+$utility-min-height: 28px;
+$utility-icon-size: 20px;
+$transition-duration: 0.2s;
+$focus-outline-width: 2px;
+$disabled-icon-opacity: 0.55;
+$shadow: 0 6px 18px rgb(4 69 204 / 30%);
+$expanded-card-width: 290px;
+$icon-size: 42px;
+
+@mixin interactive-surface {
+	background: var(--background-action-secondary-hover);
+	color: var(--font-action);
+}
+
+@mixin expanded-surface {
+	background: var(--background-action-secondary-hover);
+}
+
+.root {
+	--ds-main-menu-z-index: #{$z-index};
+
+	position: relative;
+	z-index: var(--ds-main-menu-z-index);
+	display: flex;
+	flex-direction: column;
+	width: max-content;
+	padding: var(--sm) var(--lg);
+	border-radius: var(--4xs);
+	background: var(--background);
+	box-shadow: $shadow;
+}
+
+.grid {
+	display: grid;
+	gap: var(--sm);
+	margin: 0;
+	padding: 0;
+	list-style: none;
+
+	&[data-variant='compact'] {
+		grid-template-columns: repeat(3, 1fr);
+	}
+
+	&[data-variant='expanded'] {
+		grid-template-columns: repeat(2, $expanded-card-width);
+	}
+}
+
+.tile {
+	position: relative;
+}
+
+.tileLink {
+	position: relative;
+	box-sizing: content-box;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--xs);
+	width: $tile-size;
+	height: $tile-size;
+	padding: var(--standard);
+	border: none;
+	border-radius: var(--3xs);
+	background: var(--background);
+	color: var(--font-secondary);
+	text-align: center;
+	text-decoration: none;
+	cursor: pointer;
+	transition:
+		background-color $transition-duration ease,
+		color $transition-duration ease,
+		box-shadow $transition-duration ease;
+
+	&:hover:not(:disabled):not([aria-disabled='true']) {
+		@include interactive-surface;
+	}
+
+	&:active:not(:disabled):not([aria-disabled='true']) {
+		@include interactive-surface;
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		@include interactive-surface;
+
+		outline: $focus-outline-width solid var(--border-action-primary);
+		outline-offset: -$focus-outline-width;
+	}
+}
+
+.tileLinkSelected {
+	@include interactive-surface;
+
+	box-shadow: inset 0 0 0 1px var(--border-action-primary);
+}
+
+.tileLinkDisabled {
+	background: var(--background);
+	box-shadow: none;
+	color: var(--font-disabled);
+	cursor: not-allowed;
+
+	.tileIcon {
+		opacity: $disabled-icon-opacity;
+	}
+}
+
+.tileLinkComingSoon {
+	cursor: not-allowed;
+}
+
+.tileIcon {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: $icon-size;
+	height: $icon-size;
+}
+
+.graphic {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+
+.tileLabel {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	text-align: center;
+	padding: 0 var(--3xs);
+}
+
+.badge {
+	position: absolute;
+	z-index: 1;
+	top: var(--xs);
+	right: var(--xs);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: $badge-size;
+	height: $badge-size;
+	border: 1px solid var(--border);
+	border-radius: var(--3xs);
+	background: var(--background);
+	color: var(--font-main);
+}
+
+.expandedItem {
+	position: relative;
+}
+
+.expandedLink {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	gap: var(--standard);
+	width: 100%;
+	padding: var(--md) var(--xl);
+	border: 1px solid var(--border);
+	border-radius: var(--3xs);
+	background: var(--background);
+	color: var(--font-main);
+	text-align: left;
+	text-decoration: none;
+	cursor: pointer;
+	transition:
+		background-color $transition-duration ease,
+		box-shadow $transition-duration ease;
+
+	&:hover:not([aria-disabled='true']) {
+		@include expanded-surface;
+	}
+
+	&:active:not([aria-disabled='true']) {
+		@include expanded-surface;
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		@include expanded-surface;
+
+		outline: $focus-outline-width solid var(--border-action-primary);
+		outline-offset: -$focus-outline-width;
+	}
+}
+
+.expandedLinkSelected {
+	@include expanded-surface;
+
+	box-shadow: inset 0 0 0 1px var(--border-action-primary);
+}
+
+.expandedLinkDisabled {
+	background: var(--background);
+	box-shadow: none;
+	color: var(--font-disabled);
+	cursor: not-allowed;
+
+	.expandedIcon {
+		opacity: $disabled-icon-opacity;
+	}
+}
+
+.expandedLinkComingSoon {
+	cursor: not-allowed;
+}
+
+.expandedIcon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: $icon-size;
+	height: $icon-size;
+	color: inherit;
+}
+
+.expandedText {
+	display: flex;
+	flex-direction: column;
+	gap: var(--xs);
+	width: 100%;
+	word-break: break-word;
+}
+
+.expandedDescription {
+	color: var(--font-secondary);
+}
+
+.expandedAction {
+	position: absolute;
+	z-index: 1;
+	top: var(--md);
+	right: var(--xl);
+	display: flex;
+	align-items: center;
+	height: $icon-size;
+}
+
+.expandedActionBadge {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: $badge-size;
+	height: $badge-size;
+	border: 1px solid var(--border);
+	border-radius: var(--3xs);
+	background: var(--background);
+	color: var(--font-main);
+}
+
+.footer {
+	display: flex;
+	flex-direction: column;
+	gap: var(--xs);
+	margin-top: var(--xs);
+}
+
+.utilityList {
+	display: flex;
+	gap: var(--xs);
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.utilityItem {
+	flex: 1 1 0;
+	min-width: 0;
+}
+
+.utilityLink {
+	display: flex;
+	align-items: center;
+	gap: var(--xs);
+	width: 100%;
+	min-height: $utility-min-height;
+	padding: var(--3xs) var(--xs);
+	border: $focus-outline-width solid transparent;
+	border-radius: var(--3xs);
+	background: transparent;
+	color: var(--font-secondary);
+	text-align: left;
+	text-decoration: none;
+	cursor: pointer;
+	transition:
+		background-color $transition-duration ease,
+		color $transition-duration ease,
+		border-color $transition-duration ease;
+
+	&:hover {
+		@include interactive-surface;
+	}
+
+	&:active {
+		@include interactive-surface;
+
+		border-color: var(--border-action-primary);
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		@include interactive-surface;
+
+		border-color: var(--border-action-primary);
+	}
+}
+
+.utilityIcon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: $utility-icon-size;
+	height: $utility-icon-size;
+	flex-shrink: 0;
+	color: inherit;
+}
+
+.utilityLabel {
+	min-width: 0;
+}
+
+// Reset the DsPopover.Panel container so the nav's own visual styles (bg, shadow, radius) render,
+// and size it to the menu content instead of DsPopover's fixed default width.
+.panel {
+	background: transparent !important;
+	box-shadow: none !important;
+	width: max-content !important;
+	min-width: max-content !important;
+}

package/src/components/ds-main-menu/ds-main-menu.tsx

@@ -0,0 +1,102 @@
+import { useState } from 'react';
+import classNames from 'classnames';
+import { DsDivider } from '../ds-divider';
+import { DsPopover } from '../ds-popover';
+import { ExpandedItem } from './components/expanded-item';
+import { TileLink } from './components/tile-link';
+import { UtilityLink } from './components/utility-link';
+import type { DsMainMenuProps } from './ds-main-menu.types';
+import styles from './ds-main-menu.module.scss';
+
+const DsMainMenu = ({
+	trigger,
+	items,
+	utilityLinks,
+	variant = 'compact',
+	selectedId,
+	onItemSelect,
+	className,
+	style,
+	ref,
+	'aria-label': ariaLabel = 'Main menu',
+	side = 'bottom',
+	align = 'start',
+	gutter = 8,
+	getAnchorElement,
+	open: openProp,
+	onOpenChange,
+}: DsMainMenuProps) => {
+	const isControlled = openProp !== undefined;
+	const [internalOpen, setInternalOpen] = useState(false);
+	const open = isControlled ? openProp : internalOpen;
+
+	const handleOpenChange = (nextOpen: boolean) => {
+		if (!isControlled) {
+			setInternalOpen(nextOpen);
+		}
+
+		onOpenChange?.(nextOpen);
+	};
+
+	const closePanel = () => handleOpenChange(false);
+
+	return (
+		<DsPopover.Root
+			open={open}
+			side={side}
+			align={align}
+			gutter={gutter}
+			getAnchorElement={getAnchorElement}
+			onOpenChange={handleOpenChange}
+		>
+			<DsPopover.Trigger>{trigger}</DsPopover.Trigger>
+			<DsPopover.Panel className={styles.panel}>
+				<nav
+					ref={ref}
+					className={classNames(styles.root, className)}
+					style={style}
+					aria-label={ariaLabel}
+					data-variant={variant}
+				>
+					<ul className={styles.grid} data-variant={variant}>
+						{items.map((item) => (
+							<li key={item.id} className={variant === 'expanded' ? styles.expandedItem : styles.tile}>
+								{variant === 'expanded' ? (
+									<ExpandedItem
+										item={item}
+										isSelected={item.id === selectedId}
+										onItemSelect={onItemSelect}
+										onClose={closePanel}
+									/>
+								) : (
+									<TileLink
+										item={item}
+										isSelected={item.id === selectedId}
+										onItemSelect={onItemSelect}
+										onClose={closePanel}
+									/>
+								)}
+							</li>
+						))}
+					</ul>
+					{utilityLinks.length > 0 && (
+						<div className={styles.footer}>
+							<DsDivider />
+							<ul className={styles.utilityList}>
+								{utilityLinks.map((link) => (
+									<li key={link.id} className={styles.utilityItem}>
+										<UtilityLink link={link} onItemSelect={onItemSelect} onClose={closePanel} />
+									</li>
+								))}
+							</ul>
+						</div>
+					)}
+				</nav>
+			</DsPopover.Panel>
+		</DsPopover.Root>
+	);
+};
+
+DsMainMenu.displayName = 'DsMainMenu';
+
+export default DsMainMenu;

package/src/components/ds-main-menu/ds-main-menu.types.ts

@@ -0,0 +1,86 @@
+import type { CSSProperties, ReactElement, ReactNode, Ref } from 'react';
+import type { DsPopoverAlign, DsPopoverSide } from '../ds-popover';
+import type { IconType } from '../ds-icon';
+
+export const mainMenuItemStates = ['default', 'disabled', 'comingSoon', 'extend'] as const;
+export type DsMainMenuItemState = (typeof mainMenuItemStates)[number];
+
+export const mainMenuVariants = ['compact', 'expanded'] as const;
+export type DsMainMenuVariant = (typeof mainMenuVariants)[number];
+
+export interface DsMainMenuItem {
+	id: string;
+	label: string;
+	/**
+	 * Tile graphic. Material/custom icon name (`'speed'`) or an SVG component for branded marks.
+	 */
+	icon: IconType;
+	/**
+	 * Supporting copy shown beneath the label in the `'expanded'` variant. Ignored in `'compact'`.
+	 */
+	description?: string;
+	href?: string;
+	state?: DsMainMenuItemState;
+	/**
+	 * Element rendered in the top-right badge slot. When omitted, a default badge is shown for
+	 * `'comingSoon'` (wrench icon) and `'extend'` (fullscreen icon). Pass `null` to suppress it.
+	 */
+	statusBadge?: ReactElement | null;
+}
+
+export interface DsMainMenuUtilityLink {
+	id: string;
+	label: string;
+	/** Leading graphic. Material/custom icon name or an SVG component. */
+	icon: IconType;
+	href?: string;
+}
+
+export interface DsMainMenuProps {
+	/** Single focusable element that toggles the menu panel. */
+	trigger: ReactNode;
+	items: DsMainMenuItem[];
+	utilityLinks: DsMainMenuUtilityLink[];
+	/**
+	 * Layout of the menu items. `'compact'` renders square icon tiles in a grid;
+	 * `'expanded'` renders wide cards with an icon, heading, and `description`.
+	 * Chosen once per menu — the two layouts are never mixed.
+	 * @default 'compact'
+	 */
+	variant?: DsMainMenuVariant;
+	/** Currently selected app tile. Matched against `items[].id`. */
+	selectedId?: string;
+	onItemSelect?: (id: string) => void;
+	/** Accessible name for the navigation landmark. */
+	'aria-label'?: string;
+	className?: string;
+	style?: CSSProperties;
+	ref?: Ref<HTMLElement>;
+	/**
+	 * Preferred side of the trigger to render the panel against.
+	 * @default 'bottom'
+	 */
+	side?: DsPopoverSide;
+	/**
+	 * Alignment of the panel along the trigger edge.
+	 * @default 'start'
+	 */
+	align?: DsPopoverAlign;
+	/**
+	 * Gap in pixels between the trigger and the panel.
+	 * @default 8
+	 */
+	gutter?: number;
+	/**
+	 * Returns the element the panel should position against instead of the trigger.
+	 * Useful when the trigger lives in a sidebar and the panel should open beside the content area.
+	 */
+	getAnchorElement?: () => HTMLElement | null;
+	/** Controlled open state. Pair with `onOpenChange`. */
+	open?: boolean;
+	/** Fires when the popover opens or closes. */
+	onOpenChange?: (open: boolean) => void;
+}
+
+export const COMING_SOON_TOOLTIP = 'Coming soon — this app is still under construction';
+export const EXTEND_TOOLTIP = 'Click to open the app';

package/src/components/ds-main-menu/ds-main-menu.utils.ts

@@ -0,0 +1,40 @@
+import type { KeyboardEvent, MouseEvent } from 'react';
+import type { DsMainMenuItem, DsMainMenuProps } from './ds-main-menu.types';
+
+export const isNonActivatable = (state: DsMainMenuItem['state']) =>
+	state === 'disabled' || state === 'comingSoon';
+
+export const handleActivatableClick = (
+	event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>,
+	id: string,
+	href: string | undefined,
+	onItemSelect: DsMainMenuProps['onItemSelect'],
+	onClose: () => void,
+) => {
+	if (!href) {
+		event.preventDefault();
+	}
+
+	onItemSelect?.(id);
+	onClose();
+};
+
+export const handleActivatableKeyDown = (
+	event: KeyboardEvent<HTMLAnchorElement | HTMLButtonElement>,
+	id: string,
+	href: string | undefined,
+	onItemSelect: DsMainMenuProps['onItemSelect'],
+	onClose: () => void,
+) => {
+	if (event.key !== 'Enter' && event.key !== ' ') {
+		return;
+	}
+
+	event.preventDefault();
+	onItemSelect?.(id);
+	onClose();
+
+	if (href) {
+		(event.currentTarget as HTMLAnchorElement).click();
+	}
+};

package/src/components/ds-main-menu/index.ts

@@ -0,0 +1,9 @@
+export { default as DsMainMenu } from './ds-main-menu';
+export type {
+	DsMainMenuItem,
+	DsMainMenuItemState,
+	DsMainMenuProps,
+	DsMainMenuUtilityLink,
+	DsMainMenuVariant,
+} from './ds-main-menu.types';
+export { COMING_SOON_TOOLTIP, mainMenuItemStates, mainMenuVariants } from './ds-main-menu.types';

package/src/components/ds-modal/figma/ds-modal-footer.figma.ts

@@ -1,4 +1,4 @@
-// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=32014-16402
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=43101-8753
 // source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-modal
 // component=DsModal.Footer
 //

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

@@ -29,6 +29,7 @@ const DsPopoverRoot = ({
 	align = 'center',
 	gutter = 8,
 	modal = false,
+	getAnchorElement,
 	children,
 	onOpenChange,
 }: DsPopoverRootProps) => (
@@ -36,7 +37,7 @@ const DsPopoverRoot = ({
 		open={open}
 		defaultOpen={defaultOpen}
 		modal={modal}
-		positioning={{ placement: toPlacement(side, align), gutter }}
+		positioning={{ placement: toPlacement(side, align), gutter, getAnchorElement }}
 		onOpenChange={(details) => onOpenChange?.(details.open)}
 	>
 		{children}

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

@@ -31,6 +31,13 @@ export interface DsPopoverRootProps {
 	 * @default false
 	 */
 	modal?: boolean;
+	/**
+	 * Returns the element the panel should position against.
+	 * When provided, the panel anchors to this element instead of the trigger —
+	 * useful when the trigger lives in one place (e.g. a sidebar) and the panel
+	 * should appear relative to a different reference point.
+	 */
+	getAnchorElement?: () => HTMLElement | null;
 	children: ReactNode;
 	/** Fires when the popover opens or closes. */
 	onOpenChange?: (open: boolean) => void;

package/src/components/ds-site-node/ds-site-node.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { DsSiteNodeProps } from './ds-site-node.types';
-import { useIsOverflowing } from './hooks/use-is-overflowing';
+import { useIsHorizontallyOverflowing } from '../../utils/use-is-horizontally-overflowing';
 import { DsStack } from '../ds-stack';
 import { DsTooltip } from '../ds-tooltip';
 import { DsTypography } from '../ds-typography';
@@ -21,7 +21,7 @@ const DsSiteNode = ({
 	const isSelected = state === 'selected';
 	const isMuted = state === 'muted';
 
-	const { ref: siteCodeRef, isOverflowing } = useIsOverflowing<HTMLSpanElement>(siteCode);
+	const { ref: siteCodeRef, isOverflowing } = useIsHorizontallyOverflowing<HTMLSpanElement>(siteCode);
 
 	return (
 		<button

package/src/components/ds-table/components/ds-table-body-virtualized/ds-table-body-virtualized.module.scss

@@ -4,9 +4,10 @@
 	display: block;
 	position: relative;
 	overflow-y: auto;
+	overflow-x: hidden;
 	flex: 1;
 	min-height: 0;
-	scrollbar-gutter: stable;
+	scrollbar-gutter: auto;
 
 	@include scrollbars.scrollbar-on-hover;
 }
@@ -22,7 +23,16 @@
 	visibility: hidden;
 }
 
-.emptyState {
+.emptyStateRow {
 	position: absolute;
 	inset: 0;
 }
+
+.emptyState {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	text-align: center;
+}

package/src/components/ds-table/components/ds-table-body-virtualized/ds-table-body-virtualized.tsx

@@ -5,7 +5,6 @@ import styles from './ds-table-body-virtualized.module.scss';
 import { DsTableRowVirtualized } from '../ds-table-row-virtualized';
 import type { DsTableBodyVirtualizedProps } from './ds-table-body-virtualized.types';
 import { TableBody, TableRow, TableCell } from '../core-table';
-import { EMPTY_TABLE_STATE_TEXT } from '../../utils/constants';
 import { useInfiniteScroll } from './use-infinite-scroll';
 
 export const DsTableBodyVirtualized = <TData,>({
@@ -150,8 +149,8 @@ export function DsTableBody<TData>({
 					);
 				})
 			) : hasNoData ? (
-				<TableRow>
-					<TableCell className={styles.emptyState}>{emptyState || EMPTY_TABLE_STATE_TEXT}</TableCell>
+				<TableRow className={styles.emptyStateRow}>
+					<TableCell className={styles.emptyState}>{emptyState}</TableCell>
 				</TableRow>
 			) : null}
 

package/src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.module.scss

@@ -20,16 +20,11 @@
 	justify-content: space-between;
 	gap: vars.$header-sort-gap;
 	width: 100%;
+	min-width: 0;
 	height: 100%;
 	padding: 0 var(--standard);
 }
 
-.groupLabel {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
 .collapseToggle {
 	flex-shrink: 0;
 }