@drivenets/design-system 0.7.3 → 0.9.0

package/src/components/ds-date-range-picker/ds-date-range-picker.tsx

@@ -0,0 +1,101 @@
+import classNames from 'classnames';
+import { DsFormControl } from '../ds-form-control';
+import { DsButton } from '../ds-button';
+import { DsIcon } from '../ds-icon';
+import { useControlled } from '../../utils/use-controlled';
+import type { DsDateRangePickerProps } from './ds-date-range-picker.types';
+import styles from './ds-date-range-picker.module.scss';
+import { earlierDate, laterDate } from './ds-date-range-picker.utils';
+
+const DsDateRangePicker = ({
+	value: valueProp,
+	defaultValue = [null, null],
+	onChange,
+	min,
+	max,
+	withTime = false,
+	orientation = 'horizontal',
+	hideClearAll = false,
+	closeOnSelect = true,
+	disabled,
+	readOnly,
+	className,
+	disablePortal,
+	locale,
+	slotProps,
+}: DsDateRangePickerProps) => {
+	const [value, setValue] = useControlled(valueProp, onChange, defaultValue);
+
+	const [startDate, endDate] = value;
+
+	const handleStartChange = (date: Date | null) => {
+		setValue([date, endDate]);
+	};
+
+	const handleEndChange = (date: Date | null) => {
+		setValue([startDate, date]);
+	};
+
+	const handleClearAll = () => {
+		setValue([null, null]);
+	};
+
+	// max allowed date for the "Start date" is the earliest of "max" and the selected "endDate"
+	const effectiveStartMax = earlierDate(max, endDate ?? undefined);
+
+	// min allowed date for the "End date" is the later of "min" and the selected "startDate"
+	const effectiveEndMin = laterDate(min, startDate ?? undefined);
+
+	const showClearAll = !hideClearAll && !disabled && !readOnly && (!!startDate || !!endDate);
+
+	return (
+		<div className={classNames(styles.root, styles[orientation], className)}>
+			<DsFormControl
+				label="Start date"
+				{...slotProps?.startDateFormControl}
+				className={classNames(styles.formControl, slotProps?.startDateFormControl?.className)}
+			>
+				<DsFormControl.DatePicker
+					value={startDate}
+					onChange={handleStartChange}
+					min={min}
+					max={effectiveStartMax}
+					withTime={withTime}
+					closeOnSelect={closeOnSelect}
+					disabled={disabled}
+					readOnly={readOnly}
+					disablePortal={disablePortal}
+					{...slotProps?.startDatePicker}
+				/>
+			</DsFormControl>
+
+			<DsFormControl
+				label="End date"
+				{...slotProps?.endDateFormControl}
+				className={classNames(styles.formControl, slotProps?.startDateFormControl?.className)}
+			>
+				<DsFormControl.DatePicker
+					value={endDate}
+					onChange={handleEndChange}
+					min={effectiveEndMin}
+					max={max}
+					withTime={withTime}
+					closeOnSelect={closeOnSelect}
+					disabled={disabled}
+					readOnly={readOnly}
+					disablePortal={disablePortal}
+					{...slotProps?.endDatePicker}
+				/>
+			</DsFormControl>
+
+			{showClearAll && (
+				<DsButton design="v1.2" buttonType="tertiary" className={styles.clearButton} onClick={handleClearAll}>
+					<DsIcon icon="close" size="small" />
+					{locale?.clearAllLabel ?? 'Clear all'}
+				</DsButton>
+			)}
+		</div>
+	);
+};
+
+export default DsDateRangePicker;

package/src/components/ds-date-range-picker/ds-date-range-picker.types.ts

@@ -0,0 +1,95 @@
+import type { DsDatePickerProps } from '../ds-date-picker';
+import type { DsFormControlProps } from '../ds-form-control';
+
+export type DateRangeValue = [Date | null, Date | null];
+
+export const dateRangePickerOrientations = ['horizontal', 'vertical'] as const;
+export type DateRangePickerOrientation = (typeof dateRangePickerOrientations)[number];
+
+export interface DsDateRangePickerLocale {
+	clearAllLabel?: string;
+}
+
+export type DateRangeFormControlSlotProps = Partial<Omit<DsFormControlProps, 'children'>>;
+
+export interface DsDateRangePickerSlotProps {
+	startDatePicker?: DsDatePickerProps;
+	endDatePicker?: DsDatePickerProps;
+	startDateFormControl?: DateRangeFormControlSlotProps;
+	endDateFormControl?: DateRangeFormControlSlotProps;
+}
+
+export interface DsDateRangePickerProps {
+	/**
+	 * Controlled value as a tuple of [startDate, endDate].
+	 * `null` for either element means that date is empty.
+	 * `undefined` means the component is uncontrolled.
+	 */
+	value?: DateRangeValue;
+
+	/**
+	 * Default value for uncontrolled mode
+	 */
+	defaultValue?: DateRangeValue;
+
+	/**
+	 * Callback when either date changes
+	 */
+	onChange?: (value: DateRangeValue) => void;
+
+	/**
+	 * Minimum allowed datetime for both pickers
+	 */
+	min?: Date;
+
+	/**
+	 * Maximum allowed datetime for both pickers
+	 */
+	max?: Date;
+
+	/**
+	 * Whether to show date pickers with time
+	 * @default false
+	 */
+	withTime?: boolean;
+
+	/**
+	 * Layout orientation of the two pickers
+	 * @default 'horizontal'
+	 */
+	orientation?: DateRangePickerOrientation;
+
+	/**
+	 * Whether to hide the "Clear all" button
+	 * @default false
+	 */
+	hideClearAll?: boolean;
+
+	/**
+	 * Whether to close the calendar when a date is selected. This is ignored when withTime is true.
+	 * @default true
+	 */
+	closeOnSelect?: boolean;
+
+	disabled?: boolean;
+
+	readOnly?: boolean;
+
+	className?: string;
+
+	/**
+	 * Whether to disable the portal for both calendar popups
+	 * @default false
+	 */
+	disablePortal?: boolean;
+
+	/**
+	 * Localizable labels and text
+	 */
+	locale?: DsDateRangePickerLocale;
+
+	/**
+	 * Props forwarded to sub-component slots
+	 */
+	slotProps?: DsDateRangePickerSlotProps;
+}

package/src/components/ds-date-range-picker/ds-date-range-picker.utils.ts

@@ -0,0 +1,19 @@
+export const earlierDate = (a: Date | undefined, b: Date | undefined): Date | undefined => {
+	if (!a) {
+		return b;
+	}
+	if (!b) {
+		return a;
+	}
+	return a < b ? a : b;
+};
+
+export const laterDate = (a: Date | undefined, b: Date | undefined): Date | undefined => {
+	if (!a) {
+		return b;
+	}
+	if (!b) {
+		return a;
+	}
+	return a > b ? a : b;
+};

package/src/components/ds-date-range-picker/ds-date-range-picker.utils.unit.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import { earlierDate, laterDate } from './ds-date-range-picker.utils';
+
+const createDate = (year: number, month: number, day: number) => new Date(year, month - 1, day);
+
+describe('Date Range Picker Utils', () => {
+	describe('earlierDate', () => {
+		it('should return the earlier of two dates', () => {
+			const jan = createDate(2024, 1, 1);
+			const mar = createDate(2024, 3, 15);
+
+			expect(earlierDate(jan, mar)).toBe(jan);
+			expect(earlierDate(mar, jan)).toBe(jan);
+		});
+
+		it('should return the other date when one is undefined', () => {
+			const date = createDate(2024, 6, 1);
+
+			expect(earlierDate(undefined, date)).toBe(date);
+			expect(earlierDate(date, undefined)).toBe(date);
+		});
+
+		it('should return undefined when both are undefined', () => {
+			expect(earlierDate(undefined, undefined)).toBeUndefined();
+		});
+	});
+
+	describe('laterDate', () => {
+		it('should return the later of two dates', () => {
+			const jan = createDate(2024, 1, 1);
+			const mar = createDate(2024, 3, 15);
+
+			expect(laterDate(jan, mar)).toBe(mar);
+			expect(laterDate(mar, jan)).toBe(mar);
+		});
+
+		it('should return the other date when one is undefined', () => {
+			const date = createDate(2024, 6, 1);
+
+			expect(laterDate(undefined, date)).toBe(date);
+			expect(laterDate(date, undefined)).toBe(date);
+		});
+
+		it('should return undefined when both are undefined', () => {
+			expect(laterDate(undefined, undefined)).toBeUndefined();
+		});
+	});
+});

package/src/components/ds-date-range-picker/index.ts

@@ -0,0 +1,9 @@
+export { default as DsDateRangePicker } from './ds-date-range-picker';
+export type {
+	DsDateRangePickerProps,
+	DsDateRangePickerLocale,
+	DsDateRangePickerSlotProps,
+	DateRangeFormControlSlotProps,
+	DateRangeValue,
+	DateRangePickerOrientation,
+} from './ds-date-range-picker.types';

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

@@ -6,12 +6,8 @@ import type { DsDrawerProps } from './ds-drawer.types';
 import styles from './ds-drawer.module.scss';
 import { DsIcon } from '../ds-icon';
 import { DsTypography } from '../ds-typography';
+import { useResponsiveValue } from '../../utils/responsive';
 
-/**
- * Composable drawer component.
- * Supports grid-based sizing, flexible positioning, and compound components.
- * Use columns prop to control drawer width (1-12 grid columns).
- */
 const DsDrawer = ({
 	open,
 	onOpenChange,
@@ -25,9 +21,12 @@ const DsDrawer = ({
 	className,
 	children,
 }: DsDrawerProps) => {
+	const resolvedColumns = useResponsiveValue(columns);
+
 	const handleOpenChange = (details: { open: boolean }) => {
 		onOpenChange(details.open);
 	};
+
 	const Wrapper = portal ? Portal : Fragment;
 
 	return (
@@ -48,10 +47,8 @@ const DsDrawer = ({
 							styles.drawer,
 							styles[`position-${position}`],
 							className,
-
-							// @ts-expect-error: these classnames are generated dynamically in scss
-							// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-							styles[`cols-${String(columns)}`],
+							// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+							styles[`cols-${resolvedColumns}`],
 						)}
 					>
 						<div className={styles.content}>{children}</div>

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

@@ -1,5 +1,6 @@
 import type { CSSProperties, ReactNode } from 'react';
 import type { UseDialogProps as DialogProps } from '@ark-ui/react/dialog';
+import type { ResponsiveValue } from '../../utils/responsive';
 
 /**
  * Available positions for the drawer
@@ -20,10 +21,11 @@ export interface DsDrawerProps extends Pick<DialogProps, 'closeOnEscape' | 'clos
 	 */
 	onOpenChange: (open: boolean) => void;
 	/**
-	 * Number of grid columns the drawer should span (1-12)
+	 * Number of grid columns the drawer should span (1-12).
+	 * Accepts a responsive value, e.g. `{ lg: 4, md: 6 }`.
 	 * @default 4
 	 */
-	columns?: DsDrawerColumns;
+	columns?: ResponsiveValue<DsDrawerColumns>;
 	/**
 	 * Position of the drawer
 	 * @default 'end'

package/src/components/ds-file-upload/ds-file-upload-api.types.ts

@@ -9,6 +9,7 @@ export interface UploadedFile extends File {
 	progress: number;
 	status: UploadFileStatus;
 	errors?: FileError[];
+	originalFile: File;
 }
 
 export interface FileUploadOptions {

package/src/components/ds-file-upload/hooks/use-file-upload.ts

@@ -211,7 +211,7 @@ export function useFileUpload({
 
 		try {
 			const result = await adapter.upload({
-				file,
+				file: file.originalFile,
 				fileId,
 				metadata,
 				signal: abortController.signal,

package/src/components/ds-file-upload/index.ts

@@ -1,7 +1,12 @@
 export { default as DsFileUpload } from './ds-file-upload';
 export { FileUpload } from './components/file-upload';
 export * from './ds-file-upload.types';
-export type { FileUploadAdapter, FileUploadOptions, FileUploadResult } from './ds-file-upload-api.types';
+export type {
+	FileUploadAdapter,
+	FileUploadOptions,
+	FileUploadResult,
+	UploadedFile,
+} from './ds-file-upload-api.types';
 export * from './hooks';
 export { FileUploadError, RetryableFileUploadError, FatalFileUploadError } from './errors/file-upload-errors';
 export type { AcceptedFileType, FileExtension } from './types/accept-types';

package/src/components/ds-file-upload/utils/file-factory.ts

@@ -14,5 +14,6 @@ export function createUploadedFile(file: File, status: UploadFileStatus, errors?
 		progress: 0,
 		status,
 		errors,
+		originalFile: file,
 	} satisfies UploadedFile;
 }

package/src/components/ds-file-upload/utils/file-factory.unit.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest';
+import { createUploadedFile } from './file-factory';
+
+describe('createUploadedFile', () => {
+	const makeFile = (name = 'test.txt', content = 'hello') =>
+		new File([content], name, { type: 'text/plain' });
+
+	it('should preserve originalFile reference', () => {
+		const mockFile = makeFile();
+		const uploaded = createUploadedFile(mockFile, 'pending');
+
+		expect(uploaded.originalFile).toBe(mockFile);
+	});
+
+	it('should preserve originalFile through object spread (retry scenario)', () => {
+		const mockFile = makeFile('data.bin', 'bytes');
+		const uploaded = createUploadedFile(mockFile, 'pending');
+		const data = { ...uploaded, status: 'uploading' as const };
+
+		expect(data.originalFile).toBe(mockFile);
+	});
+
+	it('should set upload metadata correctly', () => {
+		const name = 'test.txt';
+		const content = 'hello';
+		const mockFile = makeFile(name, content);
+		const uploaded = createUploadedFile(mockFile, 'error', ['TOO_LARGE']);
+
+		expect(uploaded.status).toBe('error');
+		expect(uploaded.progress).toBe(0);
+		expect(uploaded.errors).toEqual(['TOO_LARGE']);
+		expect(uploaded.name).toBe(name);
+		expect(uploaded.size).toBe(content.length);
+		expect(uploaded.type).toBe('text/plain');
+		expect(uploaded.id).toMatch(new RegExp(`^${name}-`));
+	});
+});

package/src/components/ds-form-control/ds-form-control.tsx

@@ -10,6 +10,8 @@ import { DsPasswordInput } from '../ds-password-input';
 import type { DsFormControlDescriptionProps, DsFormControlProps } from './ds-form-control.types';
 import styles from './ds-form-control.module.scss';
 import { DsDateInput } from '../ds-date-input';
+import { DsDatePicker } from '../ds-date-picker';
+import { DsTimePicker } from '../ds-time-picker';
 
 const FormControlContext = createContext<{ controlId: string } | null>(null);
 
@@ -61,9 +63,8 @@ const DsFormControl = ({
 					styles.container,
 					className,
 
-					// @ts-expect-error: `info` doesn't have its own classname
-					// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-					status && message && styles[status],
+					// Casting because `info` doesn't have its own classname
+					status && message && styles[status as keyof typeof styles],
 				)}
 				style={style}
 			>
@@ -95,7 +96,10 @@ const DsFormControl = ({
 DsFormControl.TextInput = controlify(DsTextInput);
 DsFormControl.NumberInput = controlify(DsNumberInput);
 DsFormControl.PasswordInput = controlify(DsPasswordInput);
+/** @deprecated DsDateInput is deprecated. Use DsDatePicker or DsDateRangePicker instead. */
 DsFormControl.DateInput = controlify(DsDateInput);
+DsFormControl.DatePicker = controlify(DsDatePicker);
+DsFormControl.TimePicker = controlify(DsTimePicker);
 DsFormControl.Textarea = controlify(DsTextarea);
 DsFormControl.Select = controlify(DsSelect);
 DsFormControl.Description = DsFormControlDescription;

package/src/components/ds-key-value-pair/ds-key-value-pair.module.scss

@@ -0,0 +1,72 @@
+.root {
+	display: flex;
+	align-items: flex-start;
+}
+
+.root[data-orientation='vertical'] {
+	flex-direction: column;
+}
+
+.root[data-orientation='horizontal'] {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	column-gap: var(--spacing-xs);
+	align-items: start;
+}
+
+.label {
+	padding-bottom: var(--spacing-4xs);
+	padding-left: var(--spacing-sm);
+	color: var(--color-font-main);
+	white-space: nowrap;
+	flex-shrink: 0;
+}
+
+.root[data-orientation='horizontal'] .label {
+	padding-bottom: 0;
+	padding-top: var(--spacing-3xs);
+}
+
+.valueContainer {
+	display: grid;
+	align-items: center;
+	width: 100%;
+	outline: none;
+}
+
+.root[data-orientation='horizontal'] .valueContainer {
+	justify-items: end;
+	min-width: 0;
+}
+
+.valueDisplay {
+	width: 100%;
+	min-width: 0;
+	min-height: 28px;
+	padding: var(--spacing-3xs) var(--spacing-sm);
+	color: var(--color-font-secondary);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.root[data-orientation='horizontal'] .valueDisplay {
+	text-align: end;
+}
+
+.editorSlot {
+	display: none;
+	min-width: 0;
+}
+
+.valueContainer[data-editable]:hover .valueDisplay,
+.valueContainer[data-editable]:focus-within .valueDisplay,
+.valueContainer[data-editable]:has([data-state='open']) .valueDisplay {
+	display: none;
+}
+
+.valueContainer[data-editable]:hover .editorSlot,
+.valueContainer[data-editable]:focus-within .editorSlot,
+.valueContainer[data-editable]:has([data-state='open']) .editorSlot {
+	display: block;
+}

package/src/components/ds-key-value-pair/ds-key-value-pair.tsx

@@ -0,0 +1,47 @@
+import classNames from 'classnames';
+
+import { DsTypography } from '../ds-typography';
+import styles from './ds-key-value-pair.module.scss';
+import type { DsKeyValuePairProps } from './ds-key-value-pair.types';
+
+const DsKeyValuePair = ({
+	ref,
+	keyLabel,
+	value,
+	readOnly = false,
+	orientation = 'vertical',
+	editInput,
+	className,
+	style,
+}: DsKeyValuePairProps) => {
+	const editable = !readOnly && !!editInput;
+
+	return (
+		<div
+			ref={ref}
+			className={classNames(styles.root, className)}
+			data-orientation={orientation}
+			data-readonly={readOnly || undefined}
+			style={style}
+		>
+			<DsTypography variant="body-sm-md" className={styles.label}>
+				{keyLabel}
+			</DsTypography>
+
+			<div
+				className={styles.valueContainer}
+				/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- tabIndex enables keyboard focus which triggers :focus-within to reveal the editor */
+				tabIndex={editable ? 0 : undefined}
+				data-editable={editable || undefined}
+			>
+				<DsTypography variant="body-sm-reg" asChild>
+					<div className={styles.valueDisplay}>{value}</div>
+				</DsTypography>
+
+				{editable && <div className={styles.editorSlot}>{editInput}</div>}
+			</div>
+		</div>
+	);
+};
+
+export default DsKeyValuePair;

package/src/components/ds-key-value-pair/ds-key-value-pair.types.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties, ReactNode, Ref } from 'react';
+
+export const dsKeyValuePairOrientations = ['vertical', 'horizontal'] as const;
+export type DsKeyValuePairOrientation = (typeof dsKeyValuePairOrientations)[number];
+
+export interface DsKeyValuePairProps {
+	keyLabel: ReactNode;
+
+	/** Shown when the editor is not active (read-only or not hovered). */
+	value?: ReactNode;
+
+	/** @default false */
+	readOnly?: boolean;
+
+	/** @default 'vertical' */
+	orientation?: DsKeyValuePairOrientation;
+
+	/** Editor content revealed on hover/focus when not read-only. */
+	editInput?: ReactNode;
+
+	ref?: Ref<HTMLDivElement>;
+	className?: string;
+	style?: CSSProperties;
+}

package/src/components/ds-key-value-pair/index.ts

@@ -0,0 +1,3 @@
+export { default as DsKeyValuePair } from './ds-key-value-pair';
+export type { DsKeyValuePairProps, DsKeyValuePairOrientation } from './ds-key-value-pair.types';
+export { dsKeyValuePairOrientations } from './ds-key-value-pair.types';

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

@@ -9,7 +9,7 @@ import SpinnerIcon from './spinner-icon';
  */
 const DsLoader = ({ variant = 'spinner', className, ...props }: DsLoaderProps) => {
 	return (
-		<div className={classNames(styles.loaderContainer, className)} {...props}>
+		<div className={classNames(styles.loaderContainer, className)} role="progressbar" {...props}>
 			{variant === 'pulsing' ? <PulsingIcon /> : <SpinnerIcon />}
 		</div>
 	);

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

@@ -2,7 +2,10 @@
 	position: relative;
 	background: var(--white);
 	padding: var(--spacing-6);
-	width: 340px;
+	width: 20vw;
+	min-width: 240px;
+	max-width: 480px;
+	height: 100vh;
 	border-inline-end: 1px solid transparent;
 
 	&[data-state='open']:hover,

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

@@ -3,7 +3,7 @@ import * as Collapsible from '@radix-ui/react-collapsible';
 import classnames from 'classnames';
 import styles from './ds-panel.module.scss';
 import { DsIcon } from '../ds-icon';
-import type { DsPanelCollapseButtonProps, DsPanelProps } from './ds-panel.types';
+import type { DsPanelBaseProps, DsPanelCollapseButtonProps } from './ds-panel.types';
 
 function useDraggable(enabled: boolean) {
 	const rootRef = useRef<HTMLDivElement>(null);
@@ -84,20 +84,24 @@ function useDraggable(enabled: boolean) {
 	return rootRef;
 }
 
-export function DsPanel({
+export function DsPanelBase({
 	open,
 	onOpenChange,
 	children,
 	className,
+	style,
 	slotProps,
 	variant = 'docked',
+	width,
 	draggable = false,
 	disablePadding = false,
 	...props
-}: DsPanelProps) {
+}: DsPanelBaseProps) {
 	const isDraggable = variant === 'floating' && draggable;
 	const rootRef = useDraggable(isDraggable);
 
+	const rootStyle = width ? { ...style, width } : style;
+
 	return (
 		<Collapsible.Root
 			ref={rootRef}
@@ -108,6 +112,7 @@ export function DsPanel({
 				[styles.variantFloating]: variant === 'floating',
 				[styles.disablePadding]: disablePadding,
 			})}
+			style={rootStyle}
 			{...props}
 		>
 			<DsPanelCollapseButton {...slotProps?.collapseButton} />