@drivenets/design-system 0.12.1 → 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/hooks/use-cell-editor.ts

@@ -0,0 +1,81 @@
+import { type KeyboardEventHandler, type MouseEvent, type MouseEventHandler } from 'react';
+import type { CellContext, RowData } from '@tanstack/react-table';
+import { useDsTableContext } from '../context/ds-table-context';
+
+export interface UseCellEditorOptions<TData extends RowData, TValue> {
+	/**
+	 * The TanStack Table CellContext for this cell. Pass through
+	 * the argument received in `ColumnDef.editCell`.
+	 */
+	cellContext: CellContext<TData, TValue>;
+}
+
+export interface UseCellEditorContainerProps {
+	onKeyDown: KeyboardEventHandler<HTMLElement>;
+	onClick: MouseEventHandler;
+	onDoubleClick: MouseEventHandler;
+}
+
+export interface UseCellEditorResult<TValue> {
+	/** The in-progress draft value for the active editor. */
+	value: TValue;
+	/** Validation error from the most recent commit attempt, if any. */
+	error: string | null;
+	/** Update the in-progress draft value. */
+	setValue: (value: TValue) => void;
+	/** Validate and commit the draft. */
+	commit: (overrideValue?: TValue) => void;
+	/** Discard the draft and exit edit mode. */
+	cancel: () => void;
+	/** Stop mouse events from triggering row-level handlers. */
+	stopPropagation: (event: MouseEvent) => void;
+	/** Spread on the custom `editCell` root for pointer isolation from row handlers. */
+	editorContainerProps: UseCellEditorContainerProps;
+}
+
+/**
+ * Wires a TanStack Table `editCell` renderer into DsTable's hoisted editing state.
+ * Only mount this hook inside `ColumnDef.editCell` — the table cell layer handles
+ * entering edit mode on double-click.
+ */
+export const useCellEditor = <TData extends RowData, TValue>({
+	cellContext,
+}: UseCellEditorOptions<TData, TValue>): UseCellEditorResult<TValue> => {
+	const ctx = useDsTableContext<TData, TValue>();
+	const { row, column, getValue } = cellContext;
+
+	const isActiveCell =
+		ctx.editing !== null && ctx.editing.cell.row.id === row.id && ctx.editing.cell.column.id === column.id;
+	const value = isActiveCell && ctx.editing ? ctx.editing.draftValue : getValue();
+	const error = isActiveCell && ctx.editing ? ctx.editing.error : null;
+
+	const setValue = (next: TValue) => {
+		ctx.setDraft(next);
+	};
+
+	const commit = (overrideValue?: TValue) => {
+		ctx.commit(overrideValue);
+	};
+
+	const cancel = () => {
+		ctx.cancel();
+	};
+
+	const stopPropagation = (event: MouseEvent) => {
+		event.stopPropagation();
+	};
+
+	return {
+		value,
+		error,
+		setValue,
+		commit,
+		cancel,
+		stopPropagation,
+		editorContainerProps: {
+			onKeyDown: () => {},
+			onClick: stopPropagation,
+			onDoubleClick: stopPropagation,
+		},
+	};
+};

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

@@ -1,7 +1,39 @@
+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';
+
+export { useCellEditor } from './hooks/use-cell-editor';
+export type {
+	UseCellEditorOptions,
+	UseCellEditorResult,
+	UseCellEditorContainerProps,
+} from './hooks/use-cell-editor';
+
+export { DsTableEditableCell } from './components/edit/ds-table-editable-cell';
+export type { DsTableEditableCellProps } from './components/edit/ds-table-editable-cell';
+
+export { DsTableEditingCell } from './components/edit/ds-table-editing-cell';
+export type { DsTableEditingCellProps } from './components/edit/ds-table-editing-cell';
+
+export {
+	DsTableEditCellText,
+	DsTableEditCellNumber,
+	DsTableEditCellSelect,
+	DsTableEditCellDate,
+	DsTableEditCellCheckbox,
+} from './components/edit/cell-editors';
+export type {
+	DsTableEditCellTextProps,
+	DsTableEditCellNumberProps,
+	DsTableEditCellSelectProps,
+	DsTableEditCellDateProps,
+	DsTableEditCellDateValue,
+	DsTableEditCellCheckboxProps,
+} from './components/edit/cell-editors';

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-table/utils/column-size.ts

@@ -2,19 +2,20 @@ import type { CSSProperties } from 'react';
 import { defaultColumnSizing } from '@tanstack/react-table';
 
 /**
- * Generates the appropriate style object for a table column/cell based on its size and virtualization state
+ * Generates the appropriate style object for a table column/cell based on its size
+ *
+ * Custom-sized columns get a fixed `width` plus `minWidth` and `flexShrink: 0` so
+ * they enforce horizontal overflow on the table container. Default-sized columns
+ * grow to fill the row evenly via `flex: 1`.
  *
  * @param columnSize - The size of the column
- * @param virtualized - Whether the table is virtualized
- * @returns Style object or undefined if no custom styling is needed
+ * @returns Style object for the column/cell
  */
-export const getColumnSizeStyle = (columnSize: number, virtualized?: boolean): CSSProperties | undefined => {
+export const getColumnSizeStyle = (columnSize: number): CSSProperties => {
 	const hasCustomSize = columnSize !== defaultColumnSizing.size;
 	if (hasCustomSize) {
-		return { width: columnSize };
+		return { width: columnSize, minWidth: columnSize, flexShrink: 0 };
 	}
 
-	if (virtualized) {
-		return { flex: 1 };
-	}
+	return { flex: 1, minWidth: 0 };
 };

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',
@@ -43,7 +45,7 @@ const DsTag = ({
 	const handleKeyDownTag = (event: KeyboardEvent<HTMLElement>) => {
 		if (onClick && (event.key === 'Enter' || event.key === ' ')) {
 			event.preventDefault();
-			onClick(event as KeyboardEvent<HTMLDivElement>);
+			onClick(event);
 
 			return;
 		}
@@ -66,7 +68,7 @@ const DsTag = ({
 	const handleClick = (event: MouseEvent<HTMLElement>) => {
 		if (onClick) {
 			event.preventDefault();
-			onClick(event as MouseEvent<HTMLDivElement>);
+			onClick(event);
 		}
 	};
 
@@ -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/components/ds-workspace-layout/ds-workspace-layout.context.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+
+export interface DsWorkspaceLayoutContextValue {
+	hasLeftSidePanel: boolean;
+	registerLeftSidePanel: () => void;
+	unregisterLeftSidePanel: () => void;
+}
+
+export const DsWorkspaceLayoutContext = createContext<DsWorkspaceLayoutContextValue | null>(null);
+
+export const useDsWorkspaceLayoutContext = () => {
+	const context = useContext(DsWorkspaceLayoutContext);
+
+	if (!context) {
+		throw new Error('DsWorkspaceLayout compound components must be used within DsWorkspaceLayout');
+	}
+
+	return context;
+};