@drivenets/design-system 0.7.3 → 0.8.0

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

@@ -0,0 +1,61 @@
+import classNames from 'classnames';
+import { TimeItem } from '../time-item';
+import type { TimePeriod, TimeScrollerProps } from './time-scroller.types';
+import styles from './time-scroller.module.scss';
+import { useScrollToSelected } from './time-scroller.utils';
+
+/**
+ * In AM/PM mode, hours start from 12 and then go from to 1 to 11.
+ * e.g. 12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
+ */
+const HOURS = [12, ...Array.from({ length: 11 }, (_, i) => i + 1)];
+
+const MINUTES = Array.from({ length: 60 }, (_, i) => i);
+const PERIODS: TimePeriod[] = ['AM', 'PM'];
+
+export const TimeScroller = ({ open, slotProps: { hour, minute, period }, className }: TimeScrollerProps) => {
+	const hourScroll = useScrollToSelected(hour.value, open);
+	const minuteScroll = useScrollToSelected(minute.value, open);
+
+	return (
+		<div className={classNames(styles.container, className)}>
+			<div ref={hourScroll.columnRef} className={styles.column} role="listbox" aria-label="Hour">
+				{HOURS.map((h) => (
+					<TimeItem
+						key={h}
+						ref={h === hour.value ? hourScroll.selectedRef : undefined}
+						label={String(h).padStart(2, '0')}
+						selected={h === hour.value}
+						disabled={hour.isDisabled?.(h)}
+						onClick={() => hour.onChange?.(h)}
+					/>
+				))}
+			</div>
+
+			<div ref={minuteScroll.columnRef} className={styles.column} role="listbox" aria-label="Minute">
+				{MINUTES.map((m) => (
+					<TimeItem
+						key={m}
+						ref={m === minute.value ? minuteScroll.selectedRef : undefined}
+						label={String(m).padStart(2, '0')}
+						selected={m === minute.value}
+						disabled={minute.isDisabled?.(m)}
+						onClick={() => minute.onChange?.(m)}
+					/>
+				))}
+			</div>
+
+			<div className={styles.column} role="listbox" aria-label="AM/PM">
+				{PERIODS.map((p) => (
+					<TimeItem
+						key={p}
+						label={p}
+						selected={p === period.value}
+						disabled={period.isDisabled?.(p)}
+						onClick={() => period.onChange?.(p)}
+					/>
+				))}
+			</div>
+		</div>
+	);
+};

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

@@ -0,0 +1,17 @@
+export type TimePeriod = 'AM' | 'PM';
+
+export interface TimeScrollerProps {
+	className?: string;
+	open: boolean;
+	slotProps: {
+		hour: TimeScrollerSlotProps<number>;
+		minute: TimeScrollerSlotProps<number>;
+		period: TimeScrollerSlotProps<TimePeriod>;
+	};
+}
+
+export interface TimeScrollerSlotProps<TValue> {
+	value?: TValue;
+	onChange?: (value: TValue) => void;
+	isDisabled?: (value: TValue) => boolean;
+}

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

@@ -0,0 +1,44 @@
+import { useLayoutEffect, useEffect, useRef } from 'react';
+
+export const useScrollToSelected = (value: unknown, open: boolean) => {
+	const columnRef = useRef<HTMLDivElement | null>(null);
+	const selectedRef = useRef<HTMLButtonElement | null>(null);
+
+	useLayoutEffect(() => {
+		const column = columnRef.current;
+		const selected = selectedRef.current;
+
+		if (!column || !selected) {
+			return;
+		}
+
+		scrollToCenter(column, selected, 'smooth');
+	}, [value]);
+
+	useEffect(() => {
+		if (!open) {
+			return;
+		}
+
+		// Ark UI removes `display: none` from Popover.Content after React's commit phase,
+		// so layout measurements are only valid after the browser has painted.
+		requestAnimationFrame(() => {
+			const column = columnRef.current;
+			const selected = selectedRef.current;
+
+			if (!column || !selected) {
+				return;
+			}
+
+			scrollToCenter(column, selected, 'instant');
+		});
+	}, [open]);
+
+	return { columnRef, selectedRef };
+};
+
+const scrollToCenter = (column: HTMLDivElement, selected: HTMLButtonElement, behavior: ScrollBehavior) => {
+	const columnCenter = column.offsetHeight / 2;
+	const itemCenter = selected.offsetTop + selected.offsetHeight / 2;
+	column.scrollTo({ top: itemCenter - columnCenter, behavior });
+};

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

@@ -0,0 +1,158 @@
+import { type ChangeEvent, Fragment, useEffect, useRef, useState } from 'react';
+import { Popover } from '@ark-ui/react/popover';
+import { Portal } from '@ark-ui/react/portal';
+import type { DsTimePickerProps } from './ds-time-picker.types';
+import { clampTime, formatTime, parseTime, timeScrollerAdapter } from './ds-time-picker.utils';
+import { TimeScroller } from './components/time-scroller/time-scroller';
+import { DsIcon } from '../ds-icon';
+import { DsButton } from '../ds-button';
+import { DsTextInput } from '../ds-text-input';
+import { useControlled } from '../../utils/use-controlled';
+
+const DsTimePicker = (props: DsTimePickerProps) => {
+	const {
+		id,
+		ref,
+		className,
+		placeholder,
+		min,
+		max,
+		disabled,
+		readOnly,
+		disablePortal = false,
+		locale,
+		slotProps,
+	} = props;
+	const [value, setValue] = useControlled(props.value, props.onChange, props.defaultValue ?? null);
+	const [isOpen, setIsOpen] = useControlled(props.open, props.onOpenChange, props.defaultOpen ?? false);
+	const [isFocused, setIsFocused] = useState(false);
+
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	const formattedValue = formatTime(value);
+
+	// If the time is before the min or after the max, immediately clamp it to the min or max
+	if (value) {
+		const clamped = clampTime(value, min, max);
+
+		if (clamped !== value) {
+			setValue(clamped);
+		}
+	}
+
+	// Reformat on value change, but skip while focused to avoid disrupting typing
+	useEffect(() => {
+		if (!isFocused && inputRef.current) {
+			inputRef.current.value = formattedValue;
+		}
+	}, [isFocused, formattedValue]);
+
+	const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+		const inputVal = e.target.value;
+
+		if (!inputVal) {
+			setValue(null);
+			return;
+		}
+
+		const parsed = parseTime(inputVal);
+
+		if (parsed) {
+			const newDate = value ? new Date(value) : new Date();
+			newDate.setHours(parsed.hours, parsed.minutes, 0, 0);
+			setValue(newDate);
+		}
+	};
+
+	const handleFocus = () => {
+		setIsFocused(true);
+	};
+
+	const resetInput = () => {
+		if (inputRef.current) {
+			inputRef.current.value = value ? formattedValue : '';
+		}
+	};
+
+	const handleBlur = () => {
+		setIsFocused(false);
+
+		const inputVal = inputRef.current?.value ?? '';
+
+		if (!inputVal) {
+			setValue(null);
+			return;
+		}
+
+		const parsed = parseTime(inputVal);
+
+		if (parsed) {
+			const newDate = value ? new Date(value) : new Date();
+			newDate.setHours(parsed.hours, parsed.minutes, 0, 0);
+			setValue(newDate);
+		} else {
+			resetInput();
+		}
+	};
+
+	const handleOpenChange = (details: Popover.OpenChangeDetails) => {
+		if (disabled || readOnly) {
+			return;
+		}
+
+		setIsOpen(details.open);
+	};
+
+	const Wrapper = disablePortal ? Fragment : Portal;
+
+	return (
+		<Popover.Root
+			open={isOpen}
+			onOpenChange={handleOpenChange}
+			positioning={{ placement: 'bottom-start', gutter: 4 }}
+		>
+			<Popover.Anchor asChild>
+				<div ref={ref} className={className}>
+					<DsTextInput
+						ref={inputRef}
+						id={id}
+						placeholder={placeholder ?? 'hh:mm AM/PM'}
+						defaultValue={formattedValue}
+						onChange={handleInputChange}
+						onFocus={handleFocus}
+						onBlur={handleBlur}
+						readOnly={readOnly}
+						disabled={disabled}
+						{...slotProps?.input}
+						slots={{
+							endAdornment: slotProps?.input?.slots?.endAdornment ?? (
+								<Popover.Trigger asChild>
+									<DsButton
+										design="v1.2"
+										size="tiny"
+										buttonType="tertiary"
+										disabled={disabled || readOnly}
+										aria-label={locale?.openLabel ?? 'Open time picker'}
+									>
+										<DsIcon icon="schedule" variant="outlined" size="tiny" />
+									</DsButton>
+								</Popover.Trigger>
+							),
+							...slotProps?.input?.slots,
+						}}
+					/>
+				</div>
+			</Popover.Anchor>
+
+			<Wrapper>
+				<Popover.Positioner>
+					<Popover.Content {...slotProps?.popover}>
+						<TimeScroller open={isOpen} {...timeScrollerAdapter(value, setValue, min, max)} />
+					</Popover.Content>
+				</Popover.Positioner>
+			</Wrapper>
+		</Popover.Root>
+	);
+};
+
+export default DsTimePicker;

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

@@ -0,0 +1,48 @@
+import type { RefObject } from 'react';
+import type { DsTextInputProps } from '../ds-text-input';
+import type { PopoverContentProps } from '@ark-ui/react/popover';
+
+export interface DsTimePickerProps {
+	id?: string;
+	ref?: RefObject<HTMLDivElement>;
+	className?: string;
+
+	value?: Date | null;
+	defaultValue?: Date;
+
+	open?: boolean;
+	defaultOpen?: boolean;
+
+	placeholder?: string;
+
+	min?: Date;
+	max?: Date;
+
+	disabled?: boolean;
+	readOnly?: boolean;
+
+	/**
+	 * Whether to disable the portal for the popover content
+	 * @default false
+	 */
+	disablePortal?: boolean;
+
+	locale?: DsTimePickerLocale;
+	slotProps?: DsTimePickerSlotProps;
+
+	onChange?: (value: Date | null) => void;
+	onOpenChange?: (open: boolean) => void;
+}
+
+export interface DsTimePickerLocale {
+	openLabel?: string;
+	clearLabel?: string;
+	hourLabel?: string;
+	minuteLabel?: string;
+	periodLabel?: string;
+}
+
+export interface DsTimePickerSlotProps {
+	input?: DsTextInputProps;
+	popover?: PopoverContentProps;
+}

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

@@ -0,0 +1,176 @@
+import type { TimePeriod, TimeScrollerProps } from './components/time-scroller';
+
+const AM_END = 11 * 60 + 59;
+const PM_START = 12 * 60;
+const PM_END = 23 * 60 + 59;
+
+const to24Hour = (hour12: number, period: TimePeriod): number => {
+	if (period === 'AM') {
+		return hour12 === 12 ? 0 : hour12;
+	}
+
+	return hour12 === 12 ? 12 : hour12 + 12;
+};
+
+const to12Hour = (hour24: number): number => {
+	if (hour24 === 0) {
+		return 12;
+	}
+
+	return hour24 > 12 ? hour24 - 12 : hour24;
+};
+
+const toMinutesSinceMidnight = (date: Date): number => {
+	return date.getHours() * 60 + date.getMinutes();
+};
+
+/**
+ * If the time is before the min or after the max, clamp it to the min or max
+ */
+export const clampTime = (date: Date, min?: Date, max?: Date): Date => {
+	const time = toMinutesSinceMidnight(date);
+
+	if (min && time < toMinutesSinceMidnight(min)) {
+		const clamped = new Date(date);
+		clamped.setHours(min.getHours(), min.getMinutes(), 0, 0);
+		return clamped;
+	}
+
+	if (max && time > toMinutesSinceMidnight(max)) {
+		const clamped = new Date(date);
+		clamped.setHours(max.getHours(), max.getMinutes(), 0, 0);
+		return clamped;
+	}
+
+	return date;
+};
+
+const getTimeRange = (min?: Date, max?: Date) => ({
+	minTime: min ? toMinutesSinceMidnight(min) : 0,
+	maxTime: max ? toMinutesSinceMidnight(max) : PM_END,
+});
+
+const validateMinMax = (hour?: number, period?: TimePeriod, min?: Date, max?: Date) => {
+	if (!min && !max) {
+		return {};
+	}
+
+	const { minTime, maxTime } = getTimeRange(min, max);
+
+	return {
+		isPeriodDisabled: (p: TimePeriod) => {
+			if (p === 'AM') {
+				return AM_END < minTime;
+			}
+
+			return PM_END < minTime || PM_START > maxTime;
+		},
+
+		isHourDisabled: (h: number) => {
+			if (!period) {
+				return false;
+			}
+
+			const h24 = to24Hour(h, period);
+			return h24 * 60 + 59 < minTime || h24 * 60 > maxTime;
+		},
+
+		isMinuteDisabled: (m: number) => {
+			if (hour === undefined || !period) {
+				return false;
+			}
+
+			const time = to24Hour(hour, period) * 60 + m;
+			return time < minTime || time > maxTime;
+		},
+	};
+};
+
+/**
+ * Format a Date to a 12-hour time string (hh:mm AM/PM)
+ */
+export const formatTime = (date?: Date | null): string => {
+	if (!date) {
+		return '';
+	}
+
+	const hour24 = date.getHours();
+	const minute = date.getMinutes();
+	const period = hour24 >= 12 ? 'PM' : 'AM';
+	const paddedHour = String(to12Hour(hour24)).padStart(2, '0');
+	const paddedMinute = String(minute).padStart(2, '0');
+
+	return `${paddedHour}:${paddedMinute} ${period}`;
+};
+
+/**
+ * Parse a 12-hour time string (hh:mm AM/PM) to an object with hours and minutes
+ */
+export const parseTime = (text: string) => {
+	const match = text.match(/^(\d{1,2}):(\d{2})\s+(AM|PM)$/i);
+
+	if (!match?.[1] || !match[2] || !match[3]) {
+		return null;
+	}
+
+	const h12 = parseInt(match[1], 10);
+	const minutes = parseInt(match[2], 10);
+	const period = match[3].toUpperCase();
+
+	if (h12 < 1 || h12 > 12 || minutes < 0 || minutes > 59) {
+		return null;
+	}
+
+	const hours = period === 'AM' ? (h12 === 12 ? 0 : h12) : h12 === 12 ? 12 : h12 + 12;
+
+	return { hours, minutes };
+};
+
+export const timeScrollerAdapter = (
+	date?: Date | null,
+	setDate?: (date: Date | null) => void,
+	min?: Date,
+	max?: Date,
+) => {
+	const hour = date ? to12Hour(date.getHours()) : undefined;
+	const minute = date?.getMinutes();
+	const period = date ? (date.getHours() >= 12 ? 'PM' : 'AM') : undefined;
+
+	const clampAndSet = (newDate: Date) => {
+		setDate?.(clampTime(newDate, min, max));
+	};
+
+	const { isHourDisabled, isMinuteDisabled, isPeriodDisabled } = validateMinMax(hour, period, min, max);
+
+	return {
+		slotProps: {
+			hour: {
+				value: hour,
+				onChange: (h: number) => {
+					const newDate = date ? new Date(date) : new Date();
+					newDate.setHours(to24Hour(h, period ?? 'AM'), minute ?? 0, 0, 0);
+					clampAndSet(newDate);
+				},
+				isDisabled: isHourDisabled,
+			},
+			minute: {
+				value: minute,
+				onChange: (m: number) => {
+					const newDate = date ? new Date(date) : new Date();
+					newDate.setHours(to24Hour(hour ?? 12, period ?? 'AM'), m, 0, 0);
+					clampAndSet(newDate);
+				},
+				isDisabled: isMinuteDisabled,
+			},
+			period: {
+				value: period,
+				onChange: (p: TimePeriod) => {
+					const newDate = date ? new Date(date) : new Date();
+					newDate.setHours(to24Hour(hour ?? 12, p), minute ?? 0, 0, 0);
+					clampAndSet(newDate);
+				},
+				isDisabled: isPeriodDisabled,
+			},
+		},
+	} satisfies Pick<TimeScrollerProps, 'slotProps'>;
+};