@drivenets/design-system 0.7.2 → 0.8.0

package/src/components/ds-table/components/ds-table-row-selectable-cell/ds-table-row-selectable-cell.tsx

@@ -8,13 +8,14 @@ import styles from './ds-table-row-selectable-cell.module.scss';
 
 export const DsTableRowSelectableCell = <TData,>({
 	row,
+	isSelected,
 	className,
 }: DsTableRowSelectableCellProps<TData>) => {
 	return (
 		<TableCell className={classnames(styles.cell, className)}>
 			<DsCheckbox
 				className={stylesShared.checkboxContainer}
-				checked={row.getIsSelected()}
+				checked={isSelected}
 				disabled={!row.getCanSelect()}
 				onClick={(e) => {
 					e.stopPropagation();

package/src/components/ds-table/components/ds-table-row-selectable-cell/ds-table-row-selectable-cell.types.ts

@@ -2,5 +2,6 @@ import type { Row } from '@tanstack/react-table';
 
 export interface DsTableRowSelectableCellProps<TData> {
 	row: Row<TData>;
+	isSelected: boolean;
 	className?: string;
 }

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

@@ -10,6 +10,7 @@ import { DsTableCell } from '../ds-table-cell';
 
 export const DsTableRowVirtualized = <TData,>({
 	row,
+	isSelected,
 	rowsMapRef,
 	rowHeightsMapRef,
 	rowVirtualizer,
@@ -47,7 +48,7 @@ export const DsTableRowVirtualized = <TData,>({
 					rowsMapRef.current.delete(key);
 				}
 			}}
-			data-state={isActive ? 'active' : row.getIsSelected() ? 'selected' : undefined}
+			data-state={isActive ? 'active' : isSelected ? 'selected' : undefined}
 			className={classnames(
 				styles.row,
 				{
@@ -67,7 +68,9 @@ export const DsTableRowVirtualized = <TData,>({
 				<TableCell>{renderExpandedRow?.(row.original)}</TableCell>
 			) : (
 				<>
-					{selectable && <DsTableRowSelectableCell row={row} className={styles.selectableCell} />}
+					{selectable && (
+						<DsTableRowSelectableCell row={row} isSelected={isSelected} className={styles.selectableCell} />
+					)}
 					{expandable && <DsTableRowExpandableCell row={row} className={styles.expandableCell} />}
 					{row.getVisibleCells().map((cell, idx) => {
 						const isLastColumn = idx === row.getVisibleCells().length - 1;

package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.types.ts

@@ -1,10 +1,12 @@
+import { type RefObject } from 'react';
 import { type Row } from '@tanstack/react-table';
 import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
 
 export interface DsTableRowVirtualizedProps<TData> {
 	row: Row<TData>;
-	rowsMapRef: React.RefObject<Map<string, HTMLTableRowElement>>;
-	rowHeightsMapRef: React.RefObject<Map<string, number>>;
+	isSelected: boolean;
+	rowsMapRef: RefObject<Map<string, HTMLTableRowElement>>;
+	rowHeightsMapRef: RefObject<Map<string, number>>;
 	rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
 	virtualRow: VirtualItem;
 	isExpandedRowContent?: boolean;

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

@@ -250,12 +250,15 @@ const DsTable = <TData extends { id: string }, TValue>({
 								estimateSize={virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize]}
 								overscan={virtualizedOptions?.overscan}
 								onScroll={onScroll}
+								rowSelection={rowSelection}
 							/>
 						) : (
 							<TableBody>
 								<SortableWrapper>
 									{rows.length
-										? rows.map((row) => <DsTableRow key={row.id} row={row} />)
+										? rows.map((row) => (
+												<DsTableRow key={row.id} row={row} isSelected={!!rowSelection[row.id]} />
+											))
 										: renderEmptyState()}
 								</SortableWrapper>
 							</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;
+	}
+}

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;
+}