@drivenets/design-system 0.7.3 → 0.8.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 { DateRangeValue, 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<DateRangeValue>(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-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);
 
@@ -95,7 +97,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-status-badge/ds-status-badge.module.scss

@@ -74,6 +74,6 @@
 	@include status-ghost(var(--color-background-danger-strong-hover), var(--color-status-bg-failed));
 }
 
-.label {
+.label::first-letter {
 	text-transform: capitalize;
 }

package/src/components/ds-table/components/ds-table-body-virtualized/ds-table-body-virtualized.tsx

@@ -4,7 +4,7 @@ import { useVirtualizer, type Virtualizer } from '@tanstack/react-virtual';
 import styles from './ds-table-body-virtualized.module.scss';
 import { DsTableRowVirtualized } from '../ds-table-row-virtualized';
 import type { DsTableBodyVirtualizedProps } from './ds-table-body-virtualized.types';
-import { TableBody } from '../core-table';
+import { TableBody, TableRow, TableCell } from '../core-table';
 import { EMPTY_TABLE_STATE_TEXT } from '../../utils/constants';
 
 export const DsTableBodyVirtualized = <TData,>({
@@ -138,7 +138,9 @@ function DsTableBody<TData>({
 					);
 				})
 			) : (
-				<div className={styles.emptyState}>{emptyState || EMPTY_TABLE_STATE_TEXT}</div>
+				<TableRow>
+					<TableCell className={styles.emptyState}>{emptyState || EMPTY_TABLE_STATE_TEXT}</TableCell>
+				</TableRow>
 			)}
 		</TableBody>
 	);

package/src/components/ds-time-picker/components/time-item/index.ts

@@ -0,0 +1 @@
+export * from './time-item';

package/src/components/ds-time-picker/components/time-item/time-item.module.scss

@@ -0,0 +1,37 @@
+$time-item-height: 32px;
+$time-item-width: 48px;
+
+.container {
+	display: flex;
+	width: $time-item-width;
+	height: $time-item-height;
+	flex-shrink: 0;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	border-radius: 8px;
+	background: transparent;
+	color: var(--color-font-main);
+
+	&.selected {
+		background: var(--color-background-selected);
+		color: var(--color-font-on-action);
+	}
+
+	&.disabled {
+		color: var(--color-font-disabled);
+		pointer-events: none;
+	}
+
+	&:not(.selected, .disabled) {
+		&:hover {
+			border: 1px solid var(--color-border);
+			background: var(--color-background-action-hover-weak);
+		}
+
+		&:focus-visible {
+			border: 2px solid var(--color-border-action-secondary);
+			background: var(--color-background-action-hover-weak);
+		}
+	}
+}

package/src/components/ds-time-picker/components/time-item/time-item.tsx

@@ -0,0 +1,26 @@
+import classNames from 'classnames';
+import type { TimeItemProps } from './time-item.types';
+import styles from './time-item.module.scss';
+import { DsTypography } from '../../../ds-typography';
+
+export const TimeItem = ({ ref, className, selected, disabled, onClick, label }: TimeItemProps) => {
+	return (
+		<button
+			ref={ref}
+			type="button"
+			role="option"
+			aria-selected={selected}
+			aria-disabled={disabled || undefined}
+			disabled={disabled}
+			className={classNames(
+				styles.container,
+				selected && styles.selected,
+				disabled && styles.disabled,
+				className,
+			)}
+			onClick={onClick}
+		>
+			<DsTypography variant="body-md-md">{label}</DsTypography>
+		</button>
+	);
+};

package/src/components/ds-time-picker/components/time-item/time-item.types.ts

@@ -0,0 +1,10 @@
+import type { RefObject } from 'react';
+
+export interface TimeItemProps {
+	ref?: RefObject<HTMLButtonElement | null>;
+	className?: string;
+	label: string;
+	selected: boolean;
+	disabled?: boolean;
+	onClick: () => void;
+}

package/src/components/ds-time-picker/components/time-scroller/index.ts

@@ -0,0 +1,2 @@
+export type { TimePeriod, TimeScrollerProps } from './time-scroller.types';
+export * from './time-scroller';

package/src/components/ds-time-picker/components/time-scroller/time-scroller.module.scss

@@ -0,0 +1,25 @@
+$column-width: 56px;
+$column-max-height: 280px;
+
+.container {
+	display: flex;
+	padding: var(--spacing-xs);
+	background: var(--color-background);
+	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.22);
+}
+
+.column {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: $column-width;
+	gap: var(--spacing-xs);
+	max-height: $column-max-height;
+	overflow-y: auto;
+	scroll-snap-type: y mandatory;
+
+	scrollbar-width: none;
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}