@drivenets/design-system 0.12.1 → 0.14.0

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

@@ -4,6 +4,7 @@ import { Portal } from '@ark-ui/react/portal';
 import classNames from 'classnames';
 import type { DsModalProps } from './ds-modal.types';
 import styles from './ds-modal.module.scss';
+import { useArkDialogBodyLockCleanup } from '../../utils/use-ark-dialog-body-lock-cleanup';
 import { DsIcon } from '../ds-icon';
 import { DsTypography } from '../ds-typography';
 
@@ -24,6 +25,8 @@ const DsModal = ({
 	children,
 	onOpenChange,
 }: DsModalProps) => {
+	useArkDialogBodyLockCleanup(open, modal);
+
 	const handleOpenChange = (details: { open: boolean }) => {
 		onOpenChange(details.open);
 	};

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

@@ -0,0 +1,18 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=34877-158343
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-modal
+// component=DsModal.Body
+//
+// `DAP_modal-content_v02` maps to `DsModal.Body`. Its freeform `Modal content slot`
+// becomes the body children.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const content = instance.getSlot('Modal content slot');
+
+export default {
+	example: figma.code`<DsModal.Body>${content}</DsModal.Body>`,
+	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	id: 'ds-modal-content',
+	metadata: { nestable: true },
+};

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

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=32014-16402
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-modal
+// component=DsModal.Footer
+//
+// `DAP_modal-footer_v02` maps to `DsModal.Footer` > `DsModal.Actions`. The
+// `right side buttons` slot resolves its `DAP_Button_v03` instances via the
+// existing `ds-button-v3` Code Connect.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const rightButtons = instance.getSlot('right side buttons');
+
+export default {
+	example: figma.code`<DsModal.Footer><DsModal.Actions>${rightButtons}</DsModal.Actions></DsModal.Footer>`,
+	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	id: 'ds-modal-footer',
+	metadata: { nestable: true },
+};

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

@@ -0,0 +1,21 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=32030-12809
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-modal
+// component=DsModal.Header
+//
+// `DAP_modal-header_v02` maps to the composed `DsModal.Header` (title + close
+// trigger). The `Type=drill-down` variant (back breadcrumb) and the optional
+// booleans (status badge, description, tags, etc.) have no code-component prop and
+// are omitted.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const titleNode = instance.findText('Left side', { traverseInstances: true });
+const title = titleNode.type === 'TEXT' ? titleNode.textContent : 'Modal title';
+
+export default {
+	example: figma.code`<DsModal.Header><DsModal.Title>${title}</DsModal.Title><DsModal.CloseTrigger /></DsModal.Header>`,
+	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	id: 'ds-modal-header',
+	metadata: { nestable: true },
+};

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

@@ -0,0 +1,36 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=34877-158966
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-modal
+// component=DsModal
+//
+// `DAP_modal_v02` is the full modal. It composes the header, content, and footer
+// parts, each of which has its own Code Connect template; resolve them dynamically
+// so swapped variants stay in sync. The `Type` variant (confirmation/form) has no
+// `DsModal` prop equivalent — both render the same composition.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const header = instance.findInstance('DAP_modal-header_v02', { traverseInstances: true });
+let headerCode: figma.ResultSection[] | undefined;
+if (header.type === 'INSTANCE') {
+	headerCode = header.executeTemplate().example;
+}
+
+const content = instance.findInstance('DAP_modal-content_v02', { traverseInstances: true });
+let contentCode: figma.ResultSection[] | undefined;
+if (content.type === 'INSTANCE') {
+	contentCode = content.executeTemplate().example;
+}
+
+const footer = instance.findInstance('DAP_modal-footer_v02', { traverseInstances: true });
+let footerCode: figma.ResultSection[] | undefined;
+if (footer.type === 'INSTANCE') {
+	footerCode = footer.executeTemplate().example;
+}
+
+export default {
+	example: figma.code`<DsModal open columns={6} onOpenChange={() => {}}>${headerCode}${contentCode}${footerCode}</DsModal>`,
+	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	id: 'ds-modal',
+	metadata: { nestable: false },
+};

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

@@ -1,23 +1,65 @@
-@use '../../styles/typography';
+.panel {
+	z-index: 1000;
+	display: flex;
+	flex-direction: column;
+	background: var(--background);
+	border-radius: var(--3xs);
+	// Figma "Elevation 1" — only the alpha is tokenized; offset/blur stay component-scoped.
+	box-shadow: 0 5px 15px 0 var(--shadow-moderate);
+	outline: 0;
+	transform-origin: var(--transform-origin);
+
+	// `display: flex` above outranks the UA `[hidden]` rule, so the closed panel
+	// would stay on screen. Re-assert `display: none` for Ark's hidden state.
+	&[hidden] {
+		display: none;
+	}
+
+	&[data-state='open'] {
+		animation: ds-popover-in 0.2s ease;
+	}
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	gap: var(--xs);
+	padding: var(--sm) var(--lg);
+	border-bottom: 1px solid var(--border);
+}
+
+.headerIcon {
+	display: inline-flex;
+	flex-shrink: 0;
+}
+
+.title {
+	// Typography (heading3) + color come from the DsTypography it composes onto.
+	margin: 0;
+}
 
 .content {
-	width: max-content;
-	// approx. 2 columns (64 * 2)
-	min-width: 128px;
-	// approx. 6 columns (64 * 6)
-	max-width: 384px;
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
-	box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.25);
-	border-radius: 2px;
-	background: var(--color-dap-gray-050);
-	padding: 12px;
+	gap: var(--xs);
+	padding: var(--standard) var(--lg);
 }
 
-.arrow {
-	fill: var(--color-dap-gray-050);
-	filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.1));
-	width: 18px;
-	height: 10px;
+.footer {
+	display: flex;
+	align-items: center;
+	gap: var(--xs);
+	padding: var(--sm) var(--lg);
+}
+
+@keyframes ds-popover-in {
+	from {
+		opacity: 0;
+		transform: scale(0.96);
+	}
+
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
 }

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

@@ -1,33 +1,157 @@
-import type React from 'react';
-import * as Popover from '@radix-ui/react-popover';
+import { Popover } from '@ark-ui/react/popover';
+import { Portal } from '@ark-ui/react/portal';
 import classNames from 'classnames';
+import { DsStack } from '../ds-stack';
+import { DsTypography } from '../ds-typography';
 import styles from './ds-popover.module.scss';
-import type { DsPopoverProps } from './ds-popover.types';
+import type {
+	DsPopoverAlign,
+	DsPopoverContentItemProps,
+	DsPopoverContentProps,
+	DsPopoverFooterProps,
+	DsPopoverHeaderProps,
+	DsPopoverPanelProps,
+	DsPopoverProps,
+	DsPopoverRootProps,
+	DsPopoverSide,
+	DsPopoverTriggerProps,
+} from './ds-popover.types';
 
-const DsPopover: React.FC<DsPopoverProps> = ({
-	trigger,
+const DEFAULT_PANEL_WIDTH = 400;
+
+export const toPlacement = (side: DsPopoverSide, align: DsPopoverAlign) =>
+	align === 'center' ? side : (`${side}-${align}` as const);
+
+const DsPopoverRoot = ({
+	open,
+	defaultOpen,
+	side = 'bottom',
+	align = 'center',
+	gutter = 8,
+	modal = false,
 	children,
+	onOpenChange,
+}: DsPopoverRootProps) => (
+	<Popover.Root
+		open={open}
+		defaultOpen={defaultOpen}
+		modal={modal}
+		positioning={{ placement: toPlacement(side, align), gutter }}
+		onOpenChange={(details) => onOpenChange?.(details.open)}
+	>
+		{children}
+	</Popover.Root>
+);
+
+const DsPopoverTrigger = ({ children, className }: DsPopoverTriggerProps) => (
+	<Popover.Trigger asChild className={className}>
+		{children}
+	</Popover.Trigger>
+);
+
+const DsPopoverPanel = ({
+	width = DEFAULT_PANEL_WIDTH,
 	className,
-	align = 'center',
-	side = 'top',
-}) => {
+	style,
+	children,
+	ref,
+	'aria-label': ariaLabel,
+}: DsPopoverPanelProps) => (
+	<Portal>
+		<Popover.Positioner>
+			<Popover.Content
+				ref={ref}
+				aria-label={ariaLabel}
+				className={classNames(styles.panel, className)}
+				style={{ ...style, width }}
+			>
+				{children}
+			</Popover.Content>
+		</Popover.Positioner>
+	</Portal>
+);
+
+const DsPopoverHeader = ({ icon, className, style, children }: DsPopoverHeaderProps) => (
+	<div className={classNames(styles.header, className)} style={style}>
+		{icon && <span className={styles.headerIcon}>{icon}</span>}
+		<Popover.Title className={styles.title} asChild>
+			<DsTypography variant="heading3" color="main">
+				{children}
+			</DsTypography>
+		</Popover.Title>
+	</div>
+);
+
+const DsPopoverContent = ({ className, style, children }: DsPopoverContentProps) => (
+	<div className={classNames(styles.content, className)} style={style}>
+		{children}
+	</div>
+);
+
+const DsPopoverContentItem = ({
+	status,
+	headline,
+	className,
+	style,
+	children,
+}: DsPopoverContentItemProps) => {
+	const hasHeader = Boolean(status) || Boolean(headline);
+
 	return (
-		<Popover.Root>
-			<Popover.Trigger asChild>{trigger}</Popover.Trigger>
-			<Popover.Portal>
-				<Popover.Content
-					side={side}
-					align={align}
-					sideOffset={8}
-					collisionPadding={16}
-					className={classNames(styles.content, className)}
-				>
-					{children}
-					<Popover.Arrow className={styles.arrow} />
-				</Popover.Content>
-			</Popover.Portal>
-		</Popover.Root>
+		<DsStack direction="column" gap="var(--xs)" className={className} style={style}>
+			{hasHeader && (
+				<DsStack direction="row" alignItems="center" gap="var(--xs)">
+					{status}
+					{headline && (
+						<DsTypography variant="body-sm-semi-bold" color="main">
+							{headline}
+						</DsTypography>
+					)}
+				</DsStack>
+			)}
+			{children && (
+				<DsTypography variant="body-sm-reg" color="main" asChild>
+					<DsStack direction="row" alignItems="center" gap="var(--xs)">
+						{children}
+					</DsStack>
+				</DsTypography>
+			)}
+		</DsStack>
 	);
 };
 
-export default DsPopover;
+const DsPopoverFooter = ({ className, style, children }: DsPopoverFooterProps) => (
+	<div className={classNames(styles.footer, className)} style={style}>
+		{children}
+	</div>
+);
+
+/**
+ * Legacy single-element form. Keeps the old call signature and `side` default
+ * ('top') compiling and opening, but now renders the new fixed-width panel —
+ * styling differs from the old Radix popover and the Radix `Popover.Close`
+ * context is no longer wired.
+ * @deprecated Migrate to the compound API (`DsPopover.Root` / `.Trigger` / `.Panel`).
+ */
+const DsPopoverLegacy = ({
+	trigger,
+	children,
+	className,
+	side = 'top',
+	align = 'center',
+}: DsPopoverProps) => (
+	<DsPopoverRoot side={side} align={align}>
+		<DsPopoverTrigger>{trigger}</DsPopoverTrigger>
+		<DsPopoverPanel className={className}>{children}</DsPopoverPanel>
+	</DsPopoverRoot>
+);
+
+export const DsPopover = Object.assign(DsPopoverLegacy, {
+	Root: DsPopoverRoot,
+	Trigger: DsPopoverTrigger,
+	Panel: DsPopoverPanel,
+	Header: DsPopoverHeader,
+	Content: DsPopoverContent,
+	ContentItem: DsPopoverContentItem,
+	Footer: DsPopoverFooter,
+});

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

@@ -1,24 +1,107 @@
-import type React from 'react';
+import type { CSSProperties, ReactNode, Ref } from 'react';
 
-export interface DsPopoverProps {
+export const popoverSides = ['top', 'right', 'bottom', 'left'] as const;
+export type DsPopoverSide = (typeof popoverSides)[number];
+
+export const popoverAligns = ['start', 'center', 'end'] as const;
+export type DsPopoverAlign = (typeof popoverAligns)[number];
+
+export interface DsPopoverRootProps {
+	/** Controlled open state. Pair with `onOpenChange`. */
+	open?: boolean;
+	/** Initial open state when uncontrolled. */
+	defaultOpen?: boolean;
 	/**
-	 * The element that triggers the popover
+	 * Preferred side of the trigger to render the panel against.
+	 * @default 'bottom'
 	 */
-	trigger: React.ReactNode;
+	side?: DsPopoverSide;
 	/**
-	 * The content to be rendered inside the popover
+	 * Alignment of the panel along the trigger edge.
+	 * @default 'center'
 	 */
-	children: React.ReactNode;
+	align?: DsPopoverAlign;
 	/**
-	 * Additional CSS class names
+	 * Gap in pixels between the trigger and the panel.
+	 * @default 8
 	 */
-	className?: string;
+	gutter?: number;
 	/**
-	 * The alignment of the popover content
+	 * Trap focus and block interaction with elements outside the panel.
+	 * @default false
 	 */
-	align?: 'start' | 'center' | 'end';
+	modal?: boolean;
+	children: ReactNode;
+	/** Fires when the popover opens or closes. */
+	onOpenChange?: (open: boolean) => void;
+}
+
+export interface DsPopoverTriggerProps {
+	/** Single focusable element that toggles the popover. */
+	children: ReactNode;
+	className?: string;
+}
+
+export interface DsPopoverPanelProps {
 	/**
-	 * The position of the popover relative to the trigger element
+	 * Panel width in pixels.
+	 * @default 400
 	 */
-	side?: 'top' | 'right' | 'bottom' | 'left';
+	width?: number;
+	className?: string;
+	style?: CSSProperties;
+	children: ReactNode;
+	ref?: Ref<HTMLDivElement>;
+	'aria-label'?: string;
+}
+
+export interface DsPopoverHeaderProps {
+	/** Leading visual (e.g. a colored task-type icon) rendered before the title. */
+	icon?: ReactNode;
+	className?: string;
+	style?: CSSProperties;
+	/** Title content, exposed as the popover's accessible name. */
+	children: ReactNode;
+}
+
+export interface DsPopoverContentProps {
+	className?: string;
+	style?: CSSProperties;
+	/** Ordered `DsPopover.ContentItem` children. Compose `DsDivider` between them for visual separation. */
+	children: ReactNode;
+}
+
+export interface DsPopoverContentItemProps {
+	/** Status badge shown in the item's header row. */
+	status?: ReactNode;
+	/** Bold headline text shown in the item's header row. */
+	headline?: ReactNode;
+	className?: string;
+	style?: CSSProperties;
+	/** Item body — text, avatar rows, icons, images, etc. */
+	children?: ReactNode;
+}
+
+export interface DsPopoverFooterProps {
+	className?: string;
+	style?: CSSProperties;
+	/** Footer actions, typically a single secondary CTA button. */
+	children: ReactNode;
+}
+
+/**
+ * Props for the legacy single-element call form (`<DsPopover trigger=… />`).
+ * @deprecated Use the compound API: `DsPopover.Root` + `DsPopover.Trigger` + `DsPopover.Panel`.
+ */
+export interface DsPopoverProps {
+	/** Element that toggles the popover. */
+	trigger: ReactNode;
+	/** Panel content. */
+	children: ReactNode;
+	/** Forwarded to the panel. */
+	className?: string;
+	/** @default 'center' */
+	align?: DsPopoverAlign;
+	/** @default 'top' */
+	side?: DsPopoverSide;
 }

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

@@ -1,2 +1,2 @@
-export { default as DsPopover } from './ds-popover';
+export { DsPopover } from './ds-popover';
 export * from './ds-popover.types';

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

@@ -0,0 +1,53 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=13773-1189
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-select
+// component=DsSelect
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum('Size', {
+	Default: 'default',
+	Small: 'small',
+});
+
+const state = instance.getEnum('State', {
+	Default: 'default',
+	Hover: 'hover',
+	Focus: 'focus',
+	Active: 'active',
+	Disable: 'disable',
+	Error: 'error',
+	'Error - Focus': 'errorFocus',
+});
+
+const disabled = state === 'disable';
+
+const sizeAttr = size === 'small' ? 'size="small"' : '';
+
+// Multi-select is driven by the nested dropdown menu's `Type` (Checkbox = multi). The menu
+// lives inside the select tree even when collapsed, so the designer's intent is read in any
+// state; an absent menu (ErrorHandle) safely defaults to single-select.
+const menu = instance.findInstance('DAP_dropdown menu_v01', { traverseInstances: true });
+const multiple =
+	menu.type === 'INSTANCE' && menu.getEnum('Type', { default: false, Checkbox: true, Radio: false }) === true;
+
+// `value` and `options` are required by `DsSelectProps` but are data, not derivable from
+// Figma, so emit placeholders for the developer to fill in (the discriminated union needs
+// an array `value` when `multiple`). The same string is surfaced as `fcProps` so a parent
+// `DsFormControl` template can emit `<DsFormControl.Select ${fcProps} />` uniformly.
+const attrs = [
+	sizeAttr,
+	disabled ? 'disabled' : '',
+	multiple ? 'multiple' : '',
+	'options={[]}',
+	multiple ? 'value={[]}' : 'value=""',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsSelect ${attrs} />`,
+	imports: ["import { DsSelect } from '@drivenets/design-system'"],
+	id: 'ds-select',
+	metadata: { nestable: true, props: { fcMember: 'Select', fcProps: attrs } },
+};

package/src/components/ds-split-button/ds-split-button.figma.ts

@@ -0,0 +1,95 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=32830-9950
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-split-button
+// component=DsSplitButton
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state = instance.getEnum('state', {
+	default: 'default',
+	hover: 'hover',
+	select: 'select',
+	focus: 'focus',
+	disabled: 'disabled',
+	running: 'running',
+});
+const disabled = state === 'disabled';
+const loading = state === 'running';
+
+const button = instance.findInstance('DAP_Button_v03', { traverseInstances: true });
+const size =
+	button.type === 'INSTANCE'
+		? button.getEnum('Size', { tiny: 'small', small: 'small', medium: 'medium', large: 'medium' })
+		: 'medium';
+
+const structure = instance.findInstance('.button-structure', { traverseInstances: true });
+const showIcon = structure.type === 'INSTANCE' ? structure.getBoolean('Show icon') : false;
+
+// `DsButtonV3.icon` is an icon-name string. Swapped icons keep the placeholder layer
+// name (e.g. `DAP_GM_O_check_circle`), so resolve via Code Connect ID or metadata.
+const toIconName = (name: string): string =>
+	name
+		.replace(/^DAP_DAP_/, 'DAP_')
+		.replace(/^DAP_GM_[OS]_/, '')
+		.replace(/^DAP_outline_icon\//, '')
+		.replace(/^DAP_/, '')
+		.replace(/^\/+/, '')
+		.replace(/[\s/]+/g, '_')
+		.toLowerCase();
+
+const iconNameFromCodeConnectId = (id: string | null): string | undefined => {
+	if (!id) {
+		return undefined;
+	}
+	if (id.startsWith('ds-icon-o-')) {
+		return id.slice('ds-icon-o-'.length);
+	}
+	if (id.startsWith('ds-icon-s-')) {
+		return id.slice('ds-icon-s-'.length);
+	}
+	return undefined;
+};
+
+const resolveIcon = (iconInstance: figma.InstanceHandle): string | undefined => {
+	const fromCcId = iconNameFromCodeConnectId(iconInstance.codeConnectId());
+	if (fromCcId) {
+		return fromCcId;
+	}
+
+	const iconFromMetadata = iconInstance.executeTemplate().metadata?.props?.icon;
+	if (typeof iconFromMetadata === 'string') {
+		return iconFromMetadata;
+	}
+
+	return toIconName(iconInstance.name);
+};
+
+const leadingIcon = structure.type === 'INSTANCE' ? structure.getInstanceSwap('Leading icon') : undefined;
+const iconFromSwap = leadingIcon?.type === 'INSTANCE' ? resolveIcon(leadingIcon) : undefined;
+const iconFromChild =
+	structure.type === 'INSTANCE'
+		? structure
+				.findConnectedInstances((node) => node.codeConnectId()?.startsWith('ds-icon-') ?? false, {
+					traverseInstances: true,
+				})
+				.find((node): node is figma.InstanceHandle => node.type === 'INSTANCE')
+		: undefined;
+const icon = iconFromSwap ?? (iconFromChild ? resolveIcon(iconFromChild) : undefined);
+
+// The split button's button slot is intended for an icon-only button, so emit
+// `icon` (and `loading`) rather than a text `children` label.
+// While loading, a spinner replaces the icon, so omit it
+// (the leading icon is the component's default placeholder in that state).
+const buttonProps = [
+	!loading && showIcon && icon ? `icon: '${icon}'` : undefined,
+	loading ? 'loading: true' : undefined,
+]
+	.filter(Boolean)
+	.join(', ');
+
+export default {
+	example: figma.code`<DsSplitButton size="${size}"${disabled ? ' disabled' : ''} slotProps={{ button: { ${buttonProps} }, select: { options: [], value: '' } }} />`,
+	imports: ["import { DsSplitButton } from '@drivenets/design-system'"],
+	id: 'ds-split-button',
+	metadata: { nestable: false },
+};