@drivenets/design-system 0.7.3 → 0.9.0

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

@@ -1,9 +1,12 @@
 import type * as Collapsible from '@radix-ui/react-collapsible';
 
+import type { ResponsiveValue } from '../../utils/responsive';
+
 export type DsPanelVariant = 'docked' | 'floating';
 
-export type DsPanelProps = Omit<Collapsible.CollapsibleProps, 'onOpenChange'> & {
+export type DsPanelBaseProps = Omit<Collapsible.CollapsibleProps, 'onOpenChange'> & {
 	variant?: DsPanelVariant;
+	width?: number;
 	draggable?: boolean;
 	disablePadding?: boolean;
 	slotProps?: {
@@ -12,6 +15,10 @@ export type DsPanelProps = Omit<Collapsible.CollapsibleProps, 'onOpenChange'> &
 	onOpenChange?: (open: boolean) => void;
 };
 
+export type DsPanelProps = Omit<DsPanelBaseProps, 'width'> & {
+	width?: ResponsiveValue<number>;
+};
+
 export type DsPanelCollapseButtonProps = {
 	onClick?: () => void;
 	collapsed?: boolean;

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

@@ -1,2 +1,5 @@
-export { DsPanel } from './ds-panel';
+import { withResponsiveProps } from '../../utils/responsive';
+import { DsPanelBase } from './ds-panel';
+
+export const DsPanel = withResponsiveProps(DsPanelBase, ['width']);
 export type { DsPanelProps, DsPanelVariant, DsPanelCollapseButtonProps } from './ds-panel.types';

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

@@ -53,8 +53,11 @@
 	@include typography.ellipsis;
 	grid-column: 1;
 	grid-row: 1;
-	color: var(--color-font-secondary);
 	text-align: start;
+
+	.trigger:not([data-disabled]) & {
+		color: var(--color-font-secondary);
+	}
 }
 
 .multiSelectItemsContainer {

package/src/components/ds-split-button/ds-split-button.module.scss

@@ -0,0 +1,99 @@
+@use '../../styles/shared/button' as button;
+
+$highlighted-z-index: 1;
+$divider-z-index: $highlighted-z-index + 1;
+$divider-width: 1px;
+$border-width: 1px;
+
+@mixin when-button-disabled {
+	.root:has(.actionButton:disabled) & {
+		@content;
+	}
+}
+
+@mixin when-select-disabled {
+	.root:has(.select[data-disabled]) & {
+		@content;
+	}
+}
+
+@mixin when-button-highlighted {
+	.root:has(.actionButton:not(:disabled):is(:hover, :focus-visible, :active, [data-selected='true'])) & {
+		@content;
+	}
+}
+
+@mixin when-select-highlighted {
+	.root:has(
+			.select:not([data-disabled]):is(:hover, :active, [data-state='open']),
+			.select:not([data-disabled]) :focus-visible
+		)
+		& {
+		@content;
+	}
+}
+
+.root {
+	display: inline-flex;
+
+	.actionButton {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+}
+
+.actionButton {
+	@include when-button-highlighted {
+		z-index: $highlighted-z-index;
+		transition: border-color button.$transition-duration-quick;
+	}
+
+	&:not(:disabled):is(:hover, :active, [data-selected='true']) {
+		border-right-color: var(--border-border-secondary-hover);
+	}
+
+	&:not(:disabled):focus-visible {
+		border-right-color: var(--border-border-inverse);
+	}
+}
+
+.select {
+	margin-left: -$divider-width;
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+.dividerAnchor {
+	position: relative;
+}
+
+.dividerWrapper {
+	position: absolute;
+	top: $border-width;
+	bottom: $border-width;
+	left: -$divider-width;
+	z-index: $divider-z-index;
+	width: $divider-width;
+	padding: var(--spacing-3xs) 0;
+	background-color: var(--background-background);
+
+	@include when-button-highlighted {
+		display: none;
+	}
+	@include when-select-highlighted {
+		display: none;
+	}
+}
+
+.divider {
+	background-color: var(--color-border-secondary);
+	width: $divider-width;
+	height: 100%;
+
+	@include when-button-disabled {
+		background-color: var(--border-border-disabled);
+	}
+	@include when-select-disabled {
+		background-color: var(--border-border-disabled);
+	}
+}

package/src/components/ds-split-button/ds-split-button.tsx

@@ -0,0 +1,49 @@
+import classNames from 'classnames';
+import { DsSelect, type SelectSize } from '../ds-select';
+import styles from './ds-split-button.module.scss';
+import type { DsSplitButtonProps, SplitButtonSize } from './ds-split-button.types';
+import { DsButtonV3 } from '../ds-button-v3';
+
+const DsSplitButton = ({
+	ref,
+	className,
+	style,
+	size = 'medium',
+	disabled,
+	slotProps,
+}: DsSplitButtonProps) => {
+	const { className: buttonClassName, disabled: buttonDisabled, ...buttonProps } = slotProps.button;
+
+	const { className: selectClassName, disabled: selectDisabled, ...selectProps } = slotProps.select;
+
+	return (
+		<div ref={ref} className={classNames(styles.root, className)} style={style}>
+			<DsButtonV3
+				{...buttonProps}
+				variant="secondary"
+				size={size}
+				disabled={buttonDisabled ?? disabled}
+				className={classNames(styles.actionButton, buttonClassName)}
+			/>
+
+			<div className={styles.dividerAnchor}>
+				<div className={styles.dividerWrapper}>
+					<div className={styles.divider} />
+				</div>
+			</div>
+
+			<DsSelect
+				{...selectProps}
+				size={getSelectSize(size)}
+				disabled={selectDisabled ?? disabled}
+				className={classNames(styles.select, selectClassName)}
+			/>
+		</div>
+	);
+};
+
+const getSelectSize = (size: SplitButtonSize): SelectSize => {
+	return size === 'medium' ? 'default' : 'small';
+};
+
+export default DsSplitButton;

package/src/components/ds-split-button/ds-split-button.types.ts

@@ -0,0 +1,25 @@
+import type { CSSProperties, Ref } from 'react';
+import type { DsButtonV3Props } from '../ds-button-v3';
+import type { DsSelectProps } from '../ds-select';
+import type { DistributiveOmit } from '../../utils/type-utils';
+
+export const splitButtonSizes = ['medium', 'small'] as const;
+export type SplitButtonSize = (typeof splitButtonSizes)[number];
+
+type ButtonSlotProps = Omit<DsButtonV3Props, 'variant' | 'color' | 'size'>;
+
+type SelectSlotProps = DistributiveOmit<DsSelectProps, 'size'>;
+
+export interface DsSplitButtonSlotProps {
+	button: ButtonSlotProps;
+	select: SelectSlotProps;
+}
+
+export interface DsSplitButtonProps {
+	ref?: Ref<HTMLDivElement>;
+	className?: string;
+	style?: CSSProperties;
+	size?: SplitButtonSize;
+	disabled?: boolean;
+	slotProps: DsSplitButtonSlotProps;
+}

package/src/components/ds-split-button/index.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps } from 'react';
+import { withResponsiveProps } from '../../utils/responsive';
+import DsSplitButtonBase from './ds-split-button';
+export { type DsSplitButtonSlotProps, splitButtonSizes } from './ds-split-button.types';
+
+export const DsSplitButton = withResponsiveProps(DsSplitButtonBase, ['size']);
+
+DsSplitButton.displayName = 'DsSplitButton';
+
+export type DsSplitButtonProps = ComponentProps<typeof DsSplitButton>;

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

@@ -0,0 +1,4 @@
+.root {
+	display: flex;
+	flex-direction: column;
+}

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

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+
+import styles from './ds-stack.module.scss';
+import type { DsStackProps } from './ds-stack.types';
+
+export const DsStack = ({
+	direction,
+	gap,
+	alignItems,
+	justifyContent,
+	flex,
+	flexWrap,
+	width,
+	children,
+	className,
+	style,
+	ref,
+}: DsStackProps) => {
+	const layoutStyle: React.CSSProperties = {
+		flexDirection: direction,
+		gap,
+		alignItems,
+		justifyContent,
+		flex,
+		flexWrap,
+		width,
+		...style,
+	};
+
+	return (
+		<div ref={ref} className={classNames(styles.root, className)} style={layoutStyle}>
+			{children}
+		</div>
+	);
+};

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

@@ -0,0 +1,19 @@
+import type { Properties } from 'csstype';
+
+type CSSProps = Properties<string | number>;
+import type { CSSProperties, ReactNode, Ref } from 'react';
+
+export interface DsStackProps {
+	direction?: CSSProps['flexDirection'];
+	gap?: CSSProps['gap'];
+	alignItems?: CSSProps['alignItems'];
+	justifyContent?: CSSProps['justifyContent'];
+	flex?: CSSProps['flex'];
+	flexWrap?: CSSProps['flexWrap'];
+	width?: CSSProps['width'];
+
+	children?: ReactNode;
+	className?: string;
+	style?: CSSProperties;
+	ref?: Ref<HTMLDivElement>;
+}

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

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'react';
+
+import { withResponsiveProps } from '../../utils/responsive';
+import { DsStack as DsStackBase } from './ds-stack';
+
+export const DsStack = withResponsiveProps(DsStackBase, [
+	'direction',
+	'gap',
+	'alignItems',
+	'justifyContent',
+	'flex',
+	'flexWrap',
+	'width',
+]);
+
+DsStack.displayName = 'DsStack';
+
+export type DsStackProps = ComponentProps<typeof DsStack>;

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,>({
@@ -16,8 +16,8 @@ export const DsTableBodyVirtualized = <TData,>({
 	onScroll,
 	rowSelection,
 }: DsTableBodyVirtualizedProps<TData>) => {
-	const rowsMapRef = useRef<Map<string, HTMLTableRowElement>>(new Map());
-	const rowHeightsMapRef = useRef<Map<string, number>>(new Map());
+	const rowsMapRef = useRef(new Map<string, HTMLTableRowElement>());
+	const rowHeightsMapRef = useRef(new Map<string, number>());
 
 	const { rows } = table.getRowModel();
 
@@ -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-table/components/ds-table-bulk-actions/ds-table-bulk-actions.module.scss

@@ -58,18 +58,15 @@
 	gap: 8px;
 
 	> .actionButton {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: var(--spacing-3xs);
 		border-right: 1px solid var(--neutral-6);
 		width: 68px;
 		height: 48px;
 		border-radius: 0;
-
-		> .actionButtonContent {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			gap: 4px;
-		}
 	}
 
 	> .actionButton:first-child {

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

@@ -2,6 +2,8 @@
 @use '../../styles/utilities' as utils;
 @use './styles/variables' as vars;
 
+$bulk-actions-height: 60px;
+
 .container {
 	border-radius: vars.$border-radius;
 	border-width: vars.$border-width;
@@ -45,3 +47,7 @@
 	height: vars.$virtualized-height;
 	overflow: auto;
 }
+
+.bulkActionsVisible {
+	padding-bottom: $bulk-actions-height;
+}

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

@@ -204,6 +204,8 @@ const DsTable = <TData extends { id: string }, TValue>({
 		.map(([key]) => rowsById[key]?.original)
 		.filter((v) => !!v);
 
+	const isBulkActionsVisible = selectable && actions.length > 0 && selectedRows.length > 0;
+
 	const contextValue: DsTableContextType<TData, TValue> = {
 		stickyHeader,
 		bordered,
@@ -230,6 +232,7 @@ const DsTable = <TData extends { id: string }, TValue>({
 					styles.container,
 					!virtualized && styles.dataTableContainer,
 					virtualized && styles.virtualizedContainer,
+					isBulkActionsVisible && styles.bulkActionsVisible,
 					className,
 				)}
 			>

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.module.scss

@@ -0,0 +1,11 @@
+.root {
+	&:where(:hover, :focus-within) {
+		.clearTrigger {
+			visibility: visible;
+		}
+	}
+}
+
+.clearTrigger {
+	visibility: hidden;
+}