@drivenets/design-system 0.13.0 → 0.14.0

package/src/components/ds-table/grouping/utils/column-group.ts

@@ -0,0 +1,119 @@
+import type { CSSProperties } from 'react';
+import {
+	type Column,
+	type ColumnDef,
+	type VisibilityState,
+	defaultColumnSizing,
+} from '@tanstack/react-table';
+
+/**
+ * Builds the flex style for a group header cell so it lines up with the combined
+ * width of its visible leaf columns.
+ *
+ * Fixed-width leaves contribute to `flexBasis`; default-sized leaves each add one
+ * unit of `flexGrow`, mirroring how {@link getColumnSizeStyle} sizes leaf cells so
+ * both header rows distribute free space identically.
+ */
+export const getGroupColumnSizeStyle = <TData, TValue>(
+	leafColumns: Column<TData, TValue>[],
+): CSSProperties => {
+	let fixedWidth = 0;
+	let flexCount = 0;
+
+	for (const leaf of leafColumns) {
+		const size = leaf.getSize();
+		if (size !== defaultColumnSizing.size) {
+			fixedWidth += size;
+		} else {
+			flexCount += 1;
+		}
+	}
+
+	if (flexCount === 0) {
+		return { width: fixedWidth, minWidth: fixedWidth, flexShrink: 0 };
+	}
+
+	return { flexGrow: flexCount, flexShrink: 0, flexBasis: fixedWidth, minWidth: fixedWidth };
+};
+
+/**
+ * Whether a column is the first visible leaf of its parent group. Used to draw a
+ * single side border at the start of each group in both the header and body.
+ */
+export const isFirstLeafColumnOfGroup = <TData, TValue>(column: Column<TData, TValue>): boolean => {
+	const parent = column.parent;
+	if (!parent) {
+		return false;
+	}
+
+	const visibleLeaves = parent.getLeafColumns().filter((leaf) => leaf.getIsVisible());
+
+	return visibleLeaves[0]?.id === column.id;
+};
+
+type GroupColumnDef<TData, TValue> = ColumnDef<TData, TValue> & {
+	id?: string;
+	accessorKey?: string;
+	columns?: ColumnDef<TData, TValue>[];
+};
+
+const getLeafColumnId = <TData, TValue>(def: GroupColumnDef<TData, TValue>): string | undefined =>
+	def.id ?? def.accessorKey;
+
+/**
+ * Collects the ids of groups declared with `meta.group.defaultCollapsed`, used to
+ * seed the uncontrolled collapse state.
+ */
+export const getInitialCollapsedGroups = <TData, TValue>(columns: ColumnDef<TData, TValue>[]): string[] => {
+	const collapsed: string[] = [];
+
+	const visit = (defs: ColumnDef<TData, TValue>[]) => {
+		for (const def of defs as GroupColumnDef<TData, TValue>[]) {
+			if (def.columns) {
+				if (def.id && def.meta?.group?.defaultCollapsed) {
+					collapsed.push(def.id);
+				}
+				visit(def.columns);
+			}
+		}
+	};
+
+	visit(columns);
+
+	return collapsed;
+};
+
+/**
+ * Maps collapsed groups to a {@link VisibilityState} that hides every leaf column
+ * inside a collapsed group except those flagged `meta.keepVisibleWhenCollapsed`.
+ * Layered on top of the consumer's own visibility so collapse never mutates it.
+ */
+export const getCollapsedColumnVisibility = <TData, TValue>(
+	columns: ColumnDef<TData, TValue>[],
+	collapsedGroupIds: string[],
+): VisibilityState => {
+	const visibility: VisibilityState = {};
+
+	const visit = (defs: ColumnDef<TData, TValue>[], isInsideCollapsedGroup: boolean) => {
+		for (const def of defs as GroupColumnDef<TData, TValue>[]) {
+			if (def.columns) {
+				const isGroupCollapsed = isInsideCollapsedGroup || (!!def.id && collapsedGroupIds.includes(def.id));
+				visit(def.columns, isGroupCollapsed);
+				continue;
+			}
+
+			if (!isInsideCollapsedGroup || def.meta?.keepVisibleWhenCollapsed) {
+				continue;
+			}
+
+			const columnId = getLeafColumnId(def);
+			if (columnId) {
+				visibility[columnId] = false;
+			}
+		}
+	};
+
+	visit(columns, false);
+
+	return visibility;
+};

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

@@ -1,7 +1,10 @@
+import './grouping/types/column-group-meta.augmentation';
+
 export type { SecondaryRowAction, RowAction } from './components/ds-table-cell';
 export type { ScrollParams } from './components/ds-table-body-virtualized';
 
 export * from './filters';
+export type { DsColumnGroupMeta } from './grouping';
 
 export { default as DsTable } from './ds-table';
 export * from './ds-table.types';

package/src/components/ds-table/styles/_variables.scss

@@ -1,5 +1,6 @@
 $border-radius: 4px;
 $border-width: 1px;
+$group-border-width: 2px;
 $virtualized-height: 600px;
 $reorder-column-width: 60px;
 $container-margin-vertical: 1rem;

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

@@ -63,7 +63,9 @@
 		background: var(--background);
 		border-color: var(--border-contrast);
 
-		.label {
+		.label,
+		.key,
+		.value {
 			color: var(--font-disabled);
 		}
 
@@ -105,6 +107,25 @@
 	@include typography.ellipsis;
 }
 
+.keyValue {
+	min-width: 0;
+}
+
+.key {
+	flex-shrink: 0;
+	color: var(--font-main);
+
+	&::after {
+		content: ':';
+	}
+}
+
+.value {
+	@include typography.ellipsis;
+
+	color: var(--font-secondary);
+}
+
 .icon {
 	flex-shrink: 0;
 	display: flex;

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

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import styles from './ds-tag.module.scss';
 import type { DsTagProps } from './ds-tag.types';
 import { DsIcon } from '../ds-icon';
+import { DsStack } from '../ds-stack';
 import { DsTypography } from '../ds-typography';
 
 /**
@@ -11,6 +12,7 @@ import { DsTypography } from '../ds-typography';
 const DsTag = ({
 	ref,
 	label,
+	value,
 	className,
 	style = {},
 	size = 'medium',
@@ -102,9 +104,20 @@ const DsTag = ({
 						))}
 				</span>
 			)}
-			<DsTypography variant={size === 'small' ? 'body-xs-reg' : 'body-sm-reg'} className={styles.label}>
-				{label}
-			</DsTypography>
+			{variant === 'key-value' ? (
+				<DsStack direction="row" alignItems="center" gap="var(--3xs)" className={styles.keyValue}>
+					<DsTypography variant={size === 'small' ? 'body-xs-md' : 'body-sm-md'} className={styles.key}>
+						{label}
+					</DsTypography>
+					<DsTypography variant={size === 'small' ? 'body-xs-reg' : 'body-sm-reg'} className={styles.value}>
+						{value}
+					</DsTypography>
+				</DsStack>
+			) : (
+				<DsTypography variant={size === 'small' ? 'body-xs-reg' : 'body-sm-reg'} className={styles.label}>
+					{label}
+				</DsTypography>
+			)}
 			{onDelete && !disabled && (
 				<button
 					type="button"

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

@@ -3,16 +3,16 @@ import type { CSSProperties, KeyboardEvent, MouseEvent, ReactNode, Ref } from 'r
 export const tagSizes = ['medium', 'small'] as const;
 export type TagSize = (typeof tagSizes)[number];
 
-export const tagVariants = ['default', 'include', 'exclude'] as const;
+export const tagVariants = ['default', 'include', 'exclude', 'key-value'] as const;
 export type TagVariant = (typeof tagVariants)[number];
 
-export interface DsTagProps {
+interface DsTagBaseProps {
 	/**
 	 * Ref to the tag element
 	 */
 	ref?: Ref<HTMLElement>;
 	/**
-	 * The label text to display in the tag
+	 * The label text to display in the tag. For the `key-value` variant this is the key.
 	 */
 	label: ReactNode;
 	/**
@@ -50,11 +50,6 @@ export interface DsTagProps {
 	 * @default false
 	 */
 	selected?: boolean;
-	/**
-	 * Variant of the tag
-	 * @default 'default'
-	 */
-	variant?: TagVariant;
 	/**
 	 * Whether the tag is disabled
 	 * @default false
@@ -71,3 +66,22 @@ export interface DsTagProps {
 		icon?: ReactNode;
 	};
 }
+
+interface DsTagStandardProps extends DsTagBaseProps {
+	/**
+	 * Variant of the tag
+	 * @default 'default'
+	 */
+	variant?: 'default' | 'include' | 'exclude';
+	value?: never;
+}
+
+interface DsTagKeyValueProps extends DsTagBaseProps {
+	variant: 'key-value';
+	/**
+	 * Secondary-colored value rendered after the key (`label`). Required for the `key-value` variant.
+	 */
+	value: ReactNode;
+}
+
+export type DsTagProps = DsTagStandardProps | DsTagKeyValueProps;

package/src/components/ds-tag/ds-tag.unit.test.ts

@@ -0,0 +1,32 @@
+/* eslint-disable vitest/expect-expect */
+import type { ReactNode } from 'react';
+import { describe, expectTypeOf, it } from 'vitest';
+import type { DsTagProps, TagVariant } from './ds-tag.types';
+
+describe('DsTagProps discriminated union', () => {
+	it('includes key-value in the variant union', () => {
+		expectTypeOf<TagVariant>().toEqualTypeOf<'default' | 'include' | 'exclude' | 'key-value'>();
+	});
+
+	it('allows standard variants without a value', () => {
+		expectTypeOf<{ label: string }>().toExtend<DsTagProps>();
+		expectTypeOf<{ label: string; variant: 'default' }>().toExtend<DsTagProps>();
+		expectTypeOf<{ label: string; variant: 'include' }>().toExtend<DsTagProps>();
+		expectTypeOf<{ label: string; variant: 'exclude' }>().toExtend<DsTagProps>();
+	});
+
+	it('requires a value for the key-value variant', () => {
+		expectTypeOf<{ label: string; variant: 'key-value'; value: string }>().toExtend<DsTagProps>();
+		expectTypeOf<{ label: string; variant: 'key-value' }>().not.toExtend<DsTagProps>();
+	});
+
+	it('forbids a value on standard variants', () => {
+		expectTypeOf<{ label: string; value: string }>().not.toExtend<DsTagProps>();
+		expectTypeOf<{ label: string; variant: 'default'; value: string }>().not.toExtend<DsTagProps>();
+		expectTypeOf<{ label: string; variant: 'include'; value: string }>().not.toExtend<DsTagProps>();
+	});
+
+	it('types the key-value value as ReactNode', () => {
+		expectTypeOf<Extract<DsTagProps, { variant: 'key-value' }>['value']>().toEqualTypeOf<ReactNode>();
+	});
+});

package/src/components/ds-tag-filter/ds-tag-filter.tsx

@@ -5,7 +5,7 @@ import styles from './ds-tag-filter.module.scss';
 import type { DsTagFilterProps, TagFilterItem } from './ds-tag-filter.types';
 import { useTagOverflowCalculation } from './hooks/use-tag-overflow-calculation';
 import { DsTypography } from '../ds-typography';
-import { DsTag } from '../ds-tag';
+import { DsTag, type DsTagProps } from '../ds-tag';
 import { DsButton } from '../ds-button';
 import { DsIcon } from '../ds-icon';
 
@@ -51,20 +51,19 @@ const DsTagFilter = ({
 		return null;
 	}
 
-	const renderTag = (item: TagFilterItem) => {
-		const tagProps = item.slotProps?.tag || {};
+	// Merging per-item overrides with the filter-controlled props drops the
+	// discriminated-union narrowing of `DsTagProps` (a known TS spread limitation),
+	// so build the props once and assert the union type.
+	const buildTagProps = (item: TagFilterItem): DsTagProps =>
+		({
+			...item.slotProps?.tag,
+			label: item.label,
+			selected: item.selected,
+			onClick: onItemSelect ? () => onItemSelect(item) : undefined,
+			onDelete: onItemDelete ? () => onItemDelete(item) : undefined,
+		}) as DsTagProps;
 
-		return (
-			<DsTag
-				{...tagProps}
-				key={item.id}
-				label={item.label}
-				selected={item.selected}
-				onClick={onItemSelect ? () => onItemSelect(item) : undefined}
-				onDelete={onItemDelete ? () => onItemDelete(item) : undefined}
-			/>
-		);
-	};
+	const renderTag = (item: TagFilterItem) => <DsTag key={item.id} {...buildTagProps(item)} />;
 
 	const handleExpandToggle = () => {
 		const newExpanded = !expanded;
@@ -75,14 +74,7 @@ const DsTagFilter = ({
 	const measurementContainer = (
 		<div ref={measurementRef} className={styles.measurementContainer} aria-hidden="true">
 			{items.map((item) => (
-				<DsTag
-					key={item.id}
-					data-measure-tag=""
-					label={item.label}
-					selected={item.selected}
-					onClick={onItemSelect ? () => onItemSelect(item) : undefined}
-					onDelete={onItemDelete ? () => onItemDelete(item) : undefined}
-				/>
+				<DsTag key={item.id} data-measure-tag="" {...buildTagProps(item)} />
 			))}
 		</div>
 	);

package/src/components/ds-text-input/ds-text-input.figma.ts

@@ -0,0 +1,60 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=13346-18325
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-text-input
+// component=DsTextInput
+//
+// The Figma component `DAP_input_v01` is a single multi-type input. Its `Type`
+// variant selects which code component to render:
+//   Number              -> DsNumberInput
+//   Password            -> DsPasswordInput
+//   Standard/Error/Read -> DsTextInput
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const type = instance.getEnum('Type', {
+	Standard: 'standard',
+	Error: 'error',
+	'Read Only': 'readOnly',
+	Number: 'number',
+	Password: 'password',
+});
+
+const size = instance.getEnum('Size', {
+	Small: 'small',
+	Default: 'default',
+	Large: 'default',
+});
+
+const state = instance.getEnum('State', {
+	Default: 'default',
+	Hover: 'hover',
+	'Focus/ Typing': 'focus',
+	Disabled: 'disabled',
+	'Read only': 'readOnly',
+});
+
+const disabled = state === 'disabled';
+const readOnly = type === 'readOnly' || state === 'readOnly';
+
+const sizeAttr = size === 'small' ? 'size="small"' : '';
+
+const componentName =
+	type === 'number' ? 'DsNumberInput' : type === 'password' ? 'DsPasswordInput' : 'DsTextInput';
+
+// `DsFormControl` member name and attribute string, surfaced so a parent `DsFormControl`
+// template can emit `<DsFormControl.${fcMember} ${fcProps} />`.
+const fcMember = type === 'number' ? 'NumberInput' : type === 'password' ? 'PasswordInput' : 'TextInput';
+
+const fcProps = [sizeAttr, disabled ? 'disabled' : '', readOnly ? 'readOnly' : ''].filter(Boolean).join(' ');
+
+export default {
+	example:
+		type === 'number'
+			? figma.code`<DsNumberInput ${sizeAttr} ${disabled ? 'disabled' : ''} />`
+			: type === 'password'
+				? figma.code`<DsPasswordInput ${sizeAttr} ${disabled ? 'disabled' : ''} />`
+				: figma.code`<DsTextInput ${sizeAttr} ${disabled ? 'disabled' : ''} ${readOnly ? 'readOnly' : ''} />`,
+	imports: [`import { ${componentName} } from '@drivenets/design-system'`],
+	id: 'ds-text-input',
+	metadata: { nestable: true, props: { fcMember, fcProps } },
+};

package/src/components/ds-time-picker/ds-time-picker.figma.ts

@@ -0,0 +1,18 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=30102-172478
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-time-picker
+// component=DsTimePicker
+//
+// `DAP_hh_mm_drop_down_v1.0` exposes no component properties. The snippet is therefore an
+// illustrative controlled-usage starter (props are not derived from Figma) showing the
+// idiomatic `useState` + `value`/`onChange` pattern. `fcMember`/`fcProps` are surfaced so
+// a parent `DsFormControl` template can render `<DsFormControl.TimePicker />`.
+import figma from 'figma';
+
+export default {
+	example: figma.code`const [value, setValue] = useState<Date | null>(null);
+
+<DsTimePicker value={value} onChange={setValue} placeholder="hh:mm AM/PM" />`,
+	imports: ["import { useState } from 'react'", "import { DsTimePicker } from '@drivenets/design-system'"],
+	id: 'ds-time-picker',
+	metadata: { nestable: true, props: { fcMember: 'TimePicker', fcProps: '' } },
+};

package/src/styles/_root_new.scss

@@ -264,6 +264,7 @@
 	--background-secondary-hover: var(--color-dap-blue-050);
 	--background-secondary-selected-weak: var(--color-dap-gray-100);
 	--background-success: var(--color-dap-green-075);
+	--background-success-medium: var(--color-dap-green-500);
 	--background-success-strong: var(--color-dap-green-600);
 	--background-success-strong-hover: var(--color-dap-green-700);
 	--background-tertiary: var(--color-dap-gray-200);
@@ -327,6 +328,7 @@
 	--icon-secondary: var(--color-dap-gray-600);
 	--icon-success: var(--color-dap-green-700);
 	--icon-success-light: var(--color-dap-green-400);
+	--icon-tertiary: var(--color-dap-brand-200);
 	--icon-warning: var(--color-dap-orange-600);
 	--icon-warning-light: var(--color-dap-orange-400);
 	--light-buttons-primary: var(--color-dap-dark-blue-300);

package/src/styles/_scrollbars.scss

@@ -1,44 +1,12 @@
 $scrollbar-border-radius: 100px;
-$scrollbar-default-size: 12px;
-$scrollbar-thin-size: 4px;
+$scrollbar-default-size: 10px;
+$scrollbar-hover-size: 12px;
+$scrollbar-thin-size: 8px;
 
-@mixin scrollbar-base($size) {
+@mixin scrollbar-auto-hide($rest-size, $hover-size) {
 	&::-webkit-scrollbar {
-		width: $size;
-		height: $size;
-		background: var(--background-secondary);
-	}
-
-	&::-webkit-scrollbar-track {
-		background: var(--background-secondary);
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--background-deselected-hover);
-		border-radius: $scrollbar-border-radius;
-	}
-
-	&::-webkit-scrollbar-corner {
-		background: var(--background-secondary);
-	}
-}
-
-@mixin firefox-scrollbar($size) {
-	@-moz-document url-prefix() {
-		@if $size == $scrollbar-thin-size {
-			scrollbar-width: thin;
-		} @else {
-			scrollbar-width: auto;
-		}
-
-		scrollbar-color: var(--background-deselected-hover) var(--background-secondary);
-	}
-}
-
-@mixin scrollbar-on-hover {
-	&::-webkit-scrollbar {
-		width: $scrollbar-thin-size;
-		height: $scrollbar-thin-size;
+		width: $rest-size;
+		height: $rest-size;
 		background: transparent;
 	}
 
@@ -51,33 +19,42 @@ $scrollbar-thin-size: 4px;
 	}
 
 	&::-webkit-scrollbar-thumb {
-		background-color: transparent;
+		background-color: var(--background-tertiary);
 		border-radius: $scrollbar-border-radius;
 		transition: background-color 0.2s;
 	}
 
-	&:hover::-webkit-scrollbar-thumb {
-		background-color: var(--background-tertiary);
-	}
+	&:hover {
+		&::-webkit-scrollbar {
+			width: $hover-size;
+			height: $hover-size;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: var(--background-secondary);
+		}
 
-	&::-webkit-scrollbar-thumb:hover {
-		background-color: var(--background-deselected-hover);
+		&::-webkit-scrollbar-thumb {
+			background-color: var(--background-deselected-hover);
+		}
 	}
 
 	scrollbar-width: thin;
-	scrollbar-color: transparent transparent;
+	scrollbar-color: var(--background-tertiary) transparent;
 
 	&:hover {
-		scrollbar-color: var(--background-tertiary) transparent;
+		scrollbar-color: var(--background-deselected-hover) var(--background-secondary);
 	}
 }
 
+@mixin scrollbar-on-hover {
+	@include scrollbar-auto-hide($scrollbar-default-size, $scrollbar-hover-size);
+}
+
 * {
-	@include scrollbar-base($scrollbar-default-size);
-	@include firefox-scrollbar($scrollbar-default-size);
+	@include scrollbar-auto-hide($scrollbar-default-size, $scrollbar-hover-size);
 }
 
 .scrollbar-thin {
-	@include scrollbar-base($scrollbar-thin-size);
-	@include firefox-scrollbar($scrollbar-thin-size);
+	@include scrollbar-auto-hide($scrollbar-thin-size, $scrollbar-thin-size);
 }