@drivenets/design-system 0.19.0 → 0.20.0

package/src/components/ds-saved-filters/ds-saved-filters.types.ts

@@ -0,0 +1,106 @@
+import type { CSSProperties, Ref } from 'react';
+
+export interface DsSavedFilterItem {
+	id: string;
+	name: string;
+	/**
+	 * Number of **Filter conditions** in this snapshot. Omit to hide the trailing count.
+	 */
+	count?: number;
+}
+
+export interface DsSavedFiltersLocale {
+	savedFilters?: string;
+	noSavedFilters?: string;
+	saveFilter?: string;
+	/**
+	 * Menu item for overwriting the active snapshot. `{name}` is replaced with the active name.
+	 */
+	updateFilter?: string;
+	saveAsNew?: string;
+	renameFilter?: string;
+	deleteFilter?: string;
+	nameLabel?: string;
+	confirm?: string;
+	cancel?: string;
+	close?: string;
+	unsavedChanges?: string;
+	rowActions?: string;
+	expandAriaLabel?: string;
+	clearAriaLabel?: string;
+	saveAsTitle?: string;
+	renameTitle?: string;
+	deleteTitle?: string;
+	/**
+	 * Confirmation body. `{name}` is replaced with the snapshot name.
+	 */
+	deleteMessage?: string;
+	deleteConfirm?: string;
+}
+
+export const defaultDsSavedFiltersLocale: Required<DsSavedFiltersLocale> = Object.freeze({
+	savedFilters: 'Saved filters',
+	noSavedFilters: 'No saved filters yet. Build a filter, then choose “Save filter”.',
+	saveFilter: 'Save filter',
+	updateFilter: 'Update “{name}”',
+	saveAsNew: 'Save as a new filter',
+	renameFilter: 'Rename filter',
+	deleteFilter: 'Delete filter',
+	nameLabel: 'Filter name',
+	confirm: 'Save',
+	cancel: 'Cancel',
+	close: 'Close',
+	unsavedChanges: 'Unsaved changes',
+	rowActions: 'Filter actions',
+	expandAriaLabel: 'Open saved filters',
+	clearAriaLabel: 'Clear filters',
+	saveAsTitle: 'Save as a new filter',
+	renameTitle: 'Rename filter',
+	deleteTitle: 'Delete filter',
+	deleteMessage: 'Delete “{name}”? This cannot be undone.',
+	deleteConfirm: 'Delete',
+});
+
+/**
+ * Return a Promise to keep the launching control in a loading state until it settles.
+ */
+export type DsSavedFiltersAsyncHandler<Args extends unknown[] = []> = (...args: Args) => void | Promise<void>;
+
+export interface DsSavedFiltersTriggerProps {
+	items: ReadonlyArray<DsSavedFilterItem>;
+	/**
+	 * Id of the **Active saved filter**, or `null` when none is applied.
+	 */
+	value: string | null;
+	/**
+	 * Whether the working document diverged from the **Active saved filter**.
+	 */
+	dirty?: boolean;
+	locale?: DsSavedFiltersLocale;
+	ref?: Ref<HTMLDivElement>;
+	className?: string;
+	style?: CSSProperties;
+	onValueChange: (id: string | null) => void;
+	onClear: DsSavedFiltersAsyncHandler;
+	onRename: DsSavedFiltersAsyncHandler<[id: string, name: string]>;
+	onDelete: DsSavedFiltersAsyncHandler<[id: string]>;
+}
+
+export interface DsSavedFiltersSaveProps {
+	items: ReadonlyArray<DsSavedFilterItem>;
+	/**
+	 * Id of the **Active saved filter**, or `null` when none is applied.
+	 */
+	value: string | null;
+	/**
+	 * Blocks saving, for example while there is nothing to save
+	 * @default false
+	 */
+	disabled?: boolean;
+	locale?: DsSavedFiltersLocale;
+	ref?: Ref<HTMLButtonElement>;
+	className?: string;
+	style?: CSSProperties;
+	onUpdate: DsSavedFiltersAsyncHandler;
+	onSaveAs: DsSavedFiltersAsyncHandler<[name: string]>;
+}

package/src/components/ds-saved-filters/ds-saved-filters.utils.ts

@@ -0,0 +1,35 @@
+import { defaultDsSavedFiltersLocale, type DsSavedFiltersLocale } from './ds-saved-filters.types';
+
+export const PICKER_GUTTER_PX = 4;
+export const NAME_MODAL_COLUMNS = 4;
+
+export type Locale = Required<DsSavedFiltersLocale>;
+export type NamedTarget = { id: string; name: string };
+
+export const resolveLocale = (locale?: DsSavedFiltersLocale): Locale => ({
+	...defaultDsSavedFiltersLocale,
+	...locale,
+});
+
+export const interpolateName = (template: string, name: string) => template.replace('{name}', name);
+
+export const isThenable = (value: unknown): value is Promise<unknown> =>
+	typeof value === 'object' && value !== null && typeof (value as Promise<unknown>).then === 'function';
+
+export const runMaybeAsync = async (result: void | Promise<void>, setBusy: (busy: boolean) => void) => {
+	if (!isThenable(result)) {
+		return true;
+	}
+
+	setBusy(true);
+
+	try {
+		await result;
+
+		return true;
+	} catch {
+		return false;
+	} finally {
+		setBusy(false);
+	}
+};

package/src/components/ds-saved-filters/hooks/index.ts

@@ -0,0 +1 @@
+export { usePickerOutsideDismiss } from './use-picker-outside-dismiss';

package/src/components/ds-saved-filters/hooks/use-picker-outside-dismiss.ts

@@ -0,0 +1,42 @@
+import { useEffect, type RefObject } from 'react';
+
+const OVERLAY_SCOPES = '[data-scope="popover"], [data-scope="menu"], [data-scope="dialog"]';
+
+const isPickerDismissTarget = (event: Event, triggerEl: HTMLElement | null) => {
+	const path = event.composedPath();
+
+	if (triggerEl && path.includes(triggerEl)) {
+		return true;
+	}
+
+	return path.some((node) => node instanceof Element && Boolean(node.closest(OVERLAY_SCOPES)));
+};
+
+/**
+ * Closes the picker on a real outside pointer.
+ * Ark interact-outside is suppressed so portaled menus/dialogs stay usable;
+ * this restores dismiss without treating those layers as outside.
+ */
+export const usePickerOutsideDismiss = (
+	enabled: boolean,
+	triggerEl: RefObject<HTMLElement | null>,
+	onDismiss: () => void,
+) => {
+	useEffect(() => {
+		if (!enabled) {
+			return;
+		}
+
+		const onPointerDown = (event: PointerEvent) => {
+			if (isPickerDismissTarget(event, triggerEl.current)) {
+				return;
+			}
+
+			onDismiss();
+		};
+
+		document.addEventListener('pointerdown', onPointerDown);
+
+		return () => document.removeEventListener('pointerdown', onPointerDown);
+	}, [enabled, triggerEl, onDismiss]);
+};

package/src/components/ds-saved-filters/index.ts

@@ -0,0 +1,2 @@
+export { DsSavedFilters } from './ds-saved-filters';
+export type { DsSavedFiltersSaveProps, DsSavedFiltersTriggerProps } from './ds-saved-filters.types';

package/src/components/ds-segment-group/ds-segment-group.module.scss

@@ -1,20 +1,30 @@
+$transition-duration: 0.2s;
+$focus-border-width: 2px;
+
+@mixin item-size($height, $inline-padding) {
+	height: $height;
+	padding: 0 $inline-padding;
+
+	&:not(:has(.segmentItemText)) {
+		width: $height;
+		padding: 0;
+	}
+}
+
 .segmentGroupRoot {
 	display: inline-flex;
 	align-items: center;
 	position: relative;
+	box-sizing: border-box;
+	padding: var(--3xs);
+	gap: var(--2xs);
 	background: var(--background-secondary);
 	border: 1px solid var(--border-contrast);
-	border-radius: 4px;
-	gap: var(--2xs);
-	height: 36px;
-	padding: var(--3xs);
+	border-radius: var(--3xs);
 
 	&.small {
-		height: 28px;
-		padding: var(--4xs);
-
 		.segmentItem {
-			padding: var(--4xs) var(--xs);
+			@include item-size(var(--lg), var(--xs));
 		}
 	}
 }
@@ -24,49 +34,68 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	padding: var(--3xs) var(--sm);
-	gap: var(--2xs);
-	flex: 1;
+	box-sizing: border-box;
 	z-index: 1;
+	gap: var(--3xs);
+	@include item-size(var(--xl), var(--sm));
+	border: 1px solid transparent;
+	border-radius: var(--3xs);
+	color: var(--font-main);
 	cursor: pointer;
-	border-radius: 4px;
-
-	&[data-state='checked'] {
-		.segmentItemText {
-			color: var(--font-main);
-			font-weight: var(--font-weight-medium);
-		}
-	}
+	transition:
+		background-color $transition-duration,
+		border-color $transition-duration,
+		color $transition-duration,
+		border-width $transition-duration;
 
 	&[data-state='unchecked'] {
 		background: transparent;
 
-		.segmentItemText {
-			color: var(--background-action);
+		&:hover:not([data-disabled]) {
+			background: var(--background);
 		}
 
+		&:active:not([data-disabled]) {
+			background: var(--background-tertiary);
+		}
+
+		&[data-focus-visible]:not([data-disabled]) {
+			background: var(--background-action-hover-weak);
+			border-width: $focus-border-width;
+			border-color: var(--border-action-secondary);
+		}
+	}
+
+	&[data-state='checked'] {
 		&:hover:not([data-disabled]) {
-			background: var(--background-action-secondary);
+			background: var(--background-action-hover-weak);
+			border-color: var(--border);
 		}
 
 		&:active:not([data-disabled]) {
-			background: var(--background);
-			border-color: var(--border-contrast);
+			background: var(--background-secondary-selected-weak);
+			border-color: var(--border-action-secondary);
+		}
+
+		&[data-focus-visible]:not([data-disabled]) {
+			background: var(--background-secondary-selected-weak);
+			border-width: $focus-border-width;
+			border-color: var(--border-action-secondary);
 		}
 	}
 
 	&[data-disabled] {
 		cursor: not-allowed;
-		background: var(--background-secondary);
+		color: var(--font-disabled);
 
-		.segmentItemText {
-			color: var(--font-disabled);
+		&[data-state='unchecked'] {
+			background: transparent;
 		}
-	}
 
-	&:focus-visible {
-		outline: 2px solid var(--border-action-secondary);
-		outline-offset: 2px;
+		&[data-state='checked'] {
+			background: var(--background);
+			border-color: var(--border-disabled);
+		}
 	}
 }
 
@@ -81,19 +110,18 @@
 	align-items: center;
 	justify-content: center;
 	white-space: nowrap;
-	transition: color 150ms ease-in-out;
+	transition: color $transition-duration;
 }
 
 .segmentIndicator {
 	position: absolute;
-	background: var(--background);
-	border: 1px solid var(--border-contrast);
-	border-radius: 4px;
-	box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.25);
 	z-index: 0;
-	pointer-events: none;
 	width: var(--width);
 	height: var(--height);
 	left: var(--left);
 	top: var(--top);
+	background: var(--background);
+	border: 1px solid var(--border);
+	border-radius: var(--3xs);
+	pointer-events: none;
 }

package/src/components/ds-segment-group/ds-segment-group.tsx

@@ -32,7 +32,15 @@ const Root: React.FC<DsSegmentGroupRootProps> = ({
 /**
  * Item component - renders a single segment button
  */
-const Item: React.FC<DsSegmentGroupItemProps> = ({ value, label, className, style, children, ...props }) => {
+const Item: React.FC<DsSegmentGroupItemProps> = ({
+	value,
+	label,
+	className,
+	style,
+	children,
+	size = 'default',
+	...props
+}) => {
 	return (
 		<SegmentGroup.Item
 			value={value}
@@ -40,7 +48,7 @@ const Item: React.FC<DsSegmentGroupItemProps> = ({ value, label, className, styl
 			style={style}
 			{...props}
 		>
-			{label ? <ItemText>{label}</ItemText> : children}
+			{label ? <ItemText size={size}>{label}</ItemText> : children}
 			<SegmentGroup.ItemControl />
 			<SegmentGroup.ItemHiddenInput />
 		</SegmentGroup.Item>
@@ -50,9 +58,14 @@ const Item: React.FC<DsSegmentGroupItemProps> = ({ value, label, className, styl
 /**
  * ItemText component - renders text content within an item
  */
-const ItemText: React.FC<DsSegmentGroupItemTextProps> = ({ className, children, ...props }) => (
+const ItemText: React.FC<DsSegmentGroupItemTextProps> = ({
+	className,
+	children,
+	size = 'default',
+	...props
+}) => (
 	<SegmentGroup.ItemText className={classNames(styles.segmentItemText, className)} {...props} asChild>
-		<DsTypography variant="body-sm-reg">{children}</DsTypography>
+		<DsTypography variant={size === 'small' ? 'body-xs-md' : 'body-sm-md'}>{children}</DsTypography>
 	</SegmentGroup.ItemText>
 );
 
@@ -61,7 +74,6 @@ const ItemText: React.FC<DsSegmentGroupItemTextProps> = ({ className, children,
  *
  * @example
  * <DsSegmentGroup.Root value={value} onValueChange={setValue} size="default">
- *   <DsSegmentGroup.Indicator />
  *   <DsSegmentGroup.Item value="option1" label="Option 1" />
  *   <DsSegmentGroup.Item value="option2">
  *     <DsIcon icon="settings" />

package/src/components/ds-segment-group/ds-segment-group.types.ts

@@ -8,7 +8,8 @@ import {
 /**
  * Size variants for the segment group
  */
-export type DsSegmentGroupSize = 'small' | 'default';
+export const segmentGroupSizes = ['small', 'default'] as const;
+export type DsSegmentGroupSize = (typeof segmentGroupSizes)[number];
 
 /**
  * Props for the DsSegmentGroup Root component
@@ -50,9 +51,14 @@ export interface DsSegmentGroupRootProps extends Pick<
  */
 export type DsSegmentGroupItemProps = Pick<
 	SegmentGroupItemProps,
-	'id' | 'value' | 'disabled' | 'className' | 'style'
-> &
-	(
+	'id' | 'value' | 'disabled' | 'className' | 'style' | 'aria-label'
+> & {
+	/**
+	 * Size variant of the segment item. Pass through to `ItemText` when using `label`.
+	 * @default 'default'
+	 */
+	size?: DsSegmentGroupSize;
+} & (
 		| {
 				/**
 				 * The segment group item content
@@ -78,4 +84,13 @@ export type DsSegmentGroupItemProps = Pick<
 /**
  * Props for the DsSegmentGroup ItemText component
  */
-export type DsSegmentGroupItemTextProps = Pick<SegmentGroupItemTextProps, 'className' | 'style' | 'children'>;
+export type DsSegmentGroupItemTextProps = Pick<
+	SegmentGroupItemTextProps,
+	'className' | 'style' | 'children'
+> & {
+	/**
+	 * Size variant of the item text
+	 * @default 'default'
+	 */
+	size?: DsSegmentGroupSize;
+};

package/src/components/ds-segment-group/figma/ds-segment-group-v2-item.figma.ts

@@ -0,0 +1,109 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=42657-2125
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-segment-group
+// component=DsSegmentGroup.Item
+//
+// Figma `Part_SegmentItemV2` maps onto `DsSegmentGroup.Item` (see
+// ds-segment-group-item.figma.ts for the V1 part). Hover / pressed / focus are
+// visual-only and have no matching props.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state = instance.getEnum('state', {
+	default: 'default',
+	hover: 'hover',
+	pressed: 'pressed',
+	focus: 'focus',
+	disabled: 'disabled',
+});
+
+const structure = instance.findInstance('Structure_SegmentItemV2', { traverseInstances: true });
+
+const iconOnly =
+	structure.type === 'INSTANCE' ? structure.getEnum('icon-only', { true: true, false: false }) : false;
+const withIcon = structure.type === 'INSTANCE' ? structure.getBoolean('withIcon') : false;
+
+const mediumLabel = structure.type === 'INSTANCE' ? structure.findText('SegBtn') : undefined;
+const smallLabel = structure.type === 'INSTANCE' ? structure.findText('Button') : undefined;
+const label =
+	mediumLabel?.type === 'TEXT'
+		? mediumLabel.textContent
+		: smallLabel?.type === 'TEXT'
+			? smallLabel.textContent
+			: 'Option';
+
+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 iconNode =
+	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 = iconNode ? resolveIcon(iconNode) : undefined;
+
+const slug = label
+	.toLowerCase()
+	.replace(/[^a-z0-9]+/g, '-')
+	.replace(/^-+|-+$/g, '');
+const value = slug || 'option';
+
+const disabledAttr = state === 'disabled' ? ' disabled' : '';
+const showIcon = Boolean(icon && (iconOnly || withIcon));
+
+export default {
+	example:
+		iconOnly && icon
+			? figma.code`<DsSegmentGroup.Item value="${value}" aria-label="${label}"${disabledAttr}>
+	<DsIcon icon="${icon}" size="tiny" color="main" />
+</DsSegmentGroup.Item>`
+			: showIcon && icon
+				? figma.code`<DsSegmentGroup.Item value="${value}"${disabledAttr}>
+	<DsIcon icon="${icon}" size="tiny" color="main" />
+	<DsSegmentGroup.ItemText>${label}</DsSegmentGroup.ItemText>
+</DsSegmentGroup.Item>`
+				: figma.code`<DsSegmentGroup.Item value="${value}" label="${label}"${disabledAttr} />`,
+	imports:
+		showIcon || iconOnly
+			? ["import { DsIcon, DsSegmentGroup } from '@drivenets/design-system';"]
+			: ["import { DsSegmentGroup } from '@drivenets/design-system';"],
+	id: 'ds-segment-group-v2-item',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-segment-group/figma/ds-segment-group-v2.figma.ts

@@ -0,0 +1,31 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=42663-2224
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-segment-group
+// component=DsSegmentGroup.Root
+//
+// Figma ships `DsSegmentGroupV2` alongside `DsSegmentGroupV1`. Both map onto the
+// same code component (see ds-segment-group.figma.ts for the older set).
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum('Size', {
+	medium: 'medium',
+	small: 'small',
+});
+
+const sizeAttr = size === 'small' ? ' size="small"' : '';
+
+// `Slot` is homogeneous `Part_SegmentItemV2` instances. Interpolating the slot
+// object itself renders a clickable "Slot" label; execute each child's template
+// so the parent snippet inline `DsSegmentGroup.Item`.
+const slot = instance.getSlot('Slot');
+const items = (slot?.connectedInstances ?? []).map((item) => item.executeTemplate().example);
+
+export default {
+	example: figma.code`<DsSegmentGroup.Root${sizeAttr}>
+	${items}
+</DsSegmentGroup.Root>`,
+	imports: ["import { DsSegmentGroup } from '@drivenets/design-system';"],
+	id: 'ds-segment-group-v2',
+	metadata: { nestable: false },
+} satisfies figma.Template;

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

@@ -7,7 +7,18 @@
 // is a single variant backed by an internal, non-exposed include/exclude sub-toggle, so it can
 // only be surfaced as one code value — it maps to `variant="include"`; switch to `variant="exclude"`
 // for the exclude case. `label` is content, pulled from the tag text when present, otherwise a
-// placeholder; `value` (required only for `key-value`) is emitted as a placeholder.
+// placeholder; `value` (required by `key-value`, `operator-filter` and `query-filter`) is emitted
+// as a placeholder.
+//
+// Three code props are deliberately not derived from this node:
+// - `shape` — the pill radius is not modelled in Figma at all, so `shape="round"` is a code-side
+//   choice.
+// - `warning` / `onExpandClick` — the warning ellipse and `Part_expandCollapseBtn_v01` are hidden
+//   layers in every variant of this node, so the emitted example leaves both off; add them in code
+//   when the design that consumes the tag shows them.
+//
+// `operator-filter` nests a `DsButtonV4` trigger that does not exist in code. The trigger is a
+// consumer-owned slot, so the example emits a `DsSelect` placeholder for the developer to wire.
 import figma from 'figma';
 
 const instance = figma.selectedInstance;
@@ -17,6 +28,8 @@ const variant =
 		default: 'default',
 		'include-exclude': 'include',
 		'key-value': 'key-value',
+		'operator-filter': 'operator-filter',
+		'query-filter': 'query-filter',
 	}) ?? 'default';
 
 const size = instance.getEnum('Size', { medium: 'medium', small: 'small' }) ?? 'medium';
@@ -32,10 +45,13 @@ const state = instance.getEnum('State', {
 const labelNode = instance.findText('Tag-name', { traverseInstances: true });
 const label = labelNode.type === 'TEXT' ? labelNode.textContent : 'Label';
 
+const requiresValue = variant === 'key-value' || variant === 'operator-filter' || variant === 'query-filter';
+
 const attrs = [
 	`label="${label}"`,
 	variant !== 'default' ? `variant="${variant}"` : '',
-	variant === 'key-value' ? 'value="Value"' : '',
+	requiresValue ? 'value="Value"' : '',
+	variant === 'operator-filter' ? 'slots={{ operator: <DsSelect options={[]} value="" /> }}' : '',
 	size === 'small' ? 'size="small"' : '',
 	state === 'selected' ? 'selected' : '',
 	state === 'disabled' ? 'disabled' : '',
@@ -45,7 +61,11 @@ const attrs = [
 
 export default {
 	example: figma.code`<DsTag ${attrs} />`,
-	imports: ["import { DsTag } from '@drivenets/design-system';"],
+	imports: [
+		variant === 'operator-filter'
+			? "import { DsSelect, DsTag } from '@drivenets/design-system';"
+			: "import { DsTag } from '@drivenets/design-system';",
+	],
 	id: 'ds-tag',
 	metadata: { nestable: true },
 } satisfies figma.Template;