@drivenets/design-system 0.8.0 → 0.9.0

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

@@ -1,6 +1,7 @@
 import { type ChangeEvent, Fragment, useEffect, useRef, useState } from 'react';
 import { Popover } from '@ark-ui/react/popover';
 import { Portal } from '@ark-ui/react/portal';
+import classNames from 'classnames';
 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';
@@ -8,6 +9,7 @@ import { DsIcon } from '../ds-icon';
 import { DsButton } from '../ds-button';
 import { DsTextInput } from '../ds-text-input';
 import { useControlled } from '../../utils/use-controlled';
+import styles from './ds-time-picker.module.scss';
 
 const DsTimePicker = (props: DsTimePickerProps) => {
 	const {
@@ -19,6 +21,7 @@ const DsTimePicker = (props: DsTimePickerProps) => {
 		max,
 		disabled,
 		readOnly,
+		hideClearButton = false,
 		disablePortal = false,
 		locale,
 		slotProps,
@@ -103,6 +106,8 @@ const DsTimePicker = (props: DsTimePickerProps) => {
 		setIsOpen(details.open);
 	};
 
+	const showClearButton = !hideClearButton && !disabled && !readOnly && !!value;
+
 	const Wrapper = disablePortal ? Fragment : Portal;
 
 	return (
@@ -112,7 +117,7 @@ const DsTimePicker = (props: DsTimePickerProps) => {
 			positioning={{ placement: 'bottom-start', gutter: 4 }}
 		>
 			<Popover.Anchor asChild>
-				<div ref={ref} className={className}>
+				<div ref={ref} className={classNames(styles.root, className)}>
 					<DsTextInput
 						ref={inputRef}
 						id={id}
@@ -126,17 +131,32 @@ const DsTimePicker = (props: DsTimePickerProps) => {
 						{...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>
+								<>
+									{showClearButton && (
+										<DsButton
+											className={styles.clearTrigger}
+											design="v1.2"
+											size="tiny"
+											buttonType="tertiary"
+											disabled={disabled}
+											aria-label={locale?.clearLabel ?? 'Clear time'}
+											onClick={() => setValue(null)}
+										>
+											<DsIcon icon="close" size="tiny" />
+										</DsButton>
+									)}
+									<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,
 						}}

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

@@ -21,6 +21,12 @@ export interface DsTimePickerProps {
 	disabled?: boolean;
 	readOnly?: boolean;
 
+	/**
+	 * Whether to hide the clear button
+	 * @default false
+	 */
+	hideClearButton?: boolean;
+
 	/**
 	 * Whether to disable the portal for the popover content
 	 * @default false

package/src/index.ts

@@ -4,6 +4,7 @@ export * from './components/ds-avatar';
 export * from './components/ds-avatar-group';
 export * from './components/ds-breadcrumb';
 export * from './components/ds-button';
+export * from './components/ds-button-v3';
 export * from './components/ds-card';
 export * from './components/ds-checkbox';
 export * from './components/ds-chip';
@@ -42,6 +43,8 @@ export * from './components/ds-select';
 export * from './components/ds-skeleton';
 export * from './components/ds-smart-tabs';
 export * from './components/ds-spinner';
+export * from './components/ds-split-button';
+export * from './components/ds-stack';
 export * from './components/ds-status-badge';
 export * from './components/ds-stepper';
 export * from './components/ds-system-status';
@@ -58,3 +61,4 @@ export * from './components/ds-tooltip';
 export * from './components/ds-tree';
 export * from './components/ds-typography';
 export * from './components/ds-vertical-tabs';
+export * from './utils/responsive';

package/src/styles/_breakpoints.module.scss

@@ -0,0 +1,5 @@
+@use 'variables' as var;
+
+:export {
+	breakpointLg: #{var.$breakpoint-lg};
+}

package/src/styles/_responsive.scss

@@ -0,0 +1,13 @@
+@use 'variables' as var;
+
+@mixin lg {
+	@media (min-width: #{var.$breakpoint-lg}) {
+		@content;
+	}
+}
+
+@mixin md {
+	@media (max-width: #{var.$breakpoint-lg - 1}) {
+		@content;
+	}
+}

package/src/styles/_variables.scss

@@ -42,3 +42,5 @@ $line-height-action-small: 20px;
 $sidebar-spacing: 10px;
 $sidebar-width: 64px;
 $sidebar-width-expanded: 256px;
+
+$breakpoint-lg: 1440px;

package/src/styles/shared/_button.scss

@@ -0,0 +1,2 @@
+$transition-duration-default: 0.3s; // it looks a bit better with 0.3 than 0.2
+$transition-duration-quick: 0.15s;

package/src/styles/shared/_input.scss

@@ -57,8 +57,7 @@ $textarea-height-default: 120px;
 
 	&:has(.input:disabled) {
 		color: var(--color-background-deselected);
-		background: var(--color-background-secondary);
-		border-color: var(--color-border-disabled);
+		border-color: var(--border-border-disabled);
 		cursor: not-allowed;
 
 		.input {
@@ -82,26 +81,7 @@ $textarea-height-default: 120px;
 
 	&:disabled {
 		color: var(--color-background-deselected);
-		background: var(--color-background-secondary);
-		border-color: var(--color-border-disabled);
-		cursor: not-allowed;
-	}
-}
-
-@mixin form-control-states {
-	&:hover:not(:disabled) {
-		border-color: var(--form-control-border-color, var(--color-background-action-hover));
-	}
-
-	&:focus {
-		border-color: var(--form-control-border-color, var(--color-border-action-primary));
-		outline: none;
-	}
-
-	&:disabled {
-		color: var(--color-background-deselected);
-		background: var(--color-background-secondary);
-		border-color: var(--color-border-disabled);
+		border-color: var(--border-border-disabled);
 		cursor: not-allowed;
 	}
 }
@@ -129,8 +109,7 @@ $textarea-height-default: 120px;
 
 	&[data-disabled] {
 		color: var(--color-background-deselected);
-		background: var(--color-background-secondary);
-		border-color: var(--color-border-disabled);
+		border-color: var(--border-border-disabled);
 
 		&,
 		& * {
@@ -245,22 +224,6 @@ $textarea-height-default: 120px;
 	}
 }
 
-// Form control base styles
-@mixin formControl {
-	@include base-input-container;
-	@include form-control-states;
-	cursor: pointer;
-	justify-content: space-between;
-}
-
-@mixin formControlSmall {
-	max-height: $input-text-height-small;
-}
-
-@mixin formControlDefault {
-	max-height: $input-text-height-default;
-}
-
 // Select trigger styles
 @mixin selectControl {
 	display: grid;

package/src/utils/responsive.browser.test.ts

@@ -0,0 +1,94 @@
+import { createElement } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { page } from 'vitest/browser';
+import { renderHook } from 'vitest-browser-react';
+
+import { useBreakpoint, useResponsiveValue, withResponsiveProps } from './responsive';
+
+const mockMatchMedia = (matches: boolean) => {
+	const listeners: Array<() => void> = [];
+
+	Object.defineProperty(window, 'matchMedia', {
+		writable: true,
+		value: vi.fn().mockReturnValue({
+			matches,
+			addEventListener: (_: string, cb: () => void) => listeners.push(cb),
+			removeEventListener: (_: string, cb: () => void) => {
+				const idx = listeners.indexOf(cb);
+
+				if (idx >= 0) {
+					listeners.splice(idx, 1);
+				}
+			},
+		}),
+	});
+
+	return {
+		triggerChange: () => listeners.forEach((cb) => cb()),
+	};
+};
+
+describe('useBreakpoint', () => {
+	it('should return lg when viewport >= 1440px', async () => {
+		mockMatchMedia(true);
+		const { result } = await renderHook(() => useBreakpoint());
+
+		expect(result.current).toBe('lg');
+	});
+
+	it('should return md when viewport < 1440px', async () => {
+		mockMatchMedia(false);
+		const { result } = await renderHook(() => useBreakpoint());
+
+		expect(result.current).toBe('md');
+	});
+});
+
+describe('useResponsiveValue', () => {
+	it('should return a static value unchanged', async () => {
+		mockMatchMedia(true);
+		const { result } = await renderHook(() => useResponsiveValue('large'));
+
+		expect(result.current).toBe('large');
+	});
+
+	it('should resolve lg value on large screens', async () => {
+		mockMatchMedia(true);
+		const { result } = await renderHook(() => useResponsiveValue({ lg: 'large', md: 'small' }));
+
+		expect(result.current).toBe('large');
+	});
+
+	it('should resolve md value on small screens', async () => {
+		mockMatchMedia(false);
+		const { result } = await renderHook(() => useResponsiveValue({ lg: 'large', md: 'small' }));
+
+		expect(result.current).toBe('small');
+	});
+});
+
+describe('withResponsiveProps', () => {
+	const Base = ({ value }: { value?: string }) => createElement('span', null, value);
+	const Enhanced = withResponsiveProps(Base, ['value']);
+
+	it('should resolve responsive prop to lg value on large screens', async () => {
+		mockMatchMedia(true);
+		await page.render(createElement(Enhanced, { value: { lg: 'desktop', md: 'mobile' } }));
+
+		await expect.element(page.getByText('desktop')).toBeInTheDocument();
+	});
+
+	it('should resolve responsive prop to md value on small screens', async () => {
+		mockMatchMedia(false);
+		await page.render(createElement(Enhanced, { value: { lg: 'desktop', md: 'mobile' } }));
+
+		await expect.element(page.getByText('mobile')).toBeInTheDocument();
+	});
+
+	it('should pass through static values unchanged', async () => {
+		mockMatchMedia(true);
+		await page.render(createElement(Enhanced, { value: 'static' }));
+
+		await expect.element(page.getByText('static')).toBeInTheDocument();
+	});
+});

package/src/utils/responsive.ts

@@ -0,0 +1,79 @@
+import { createElement, useSyncExternalStore, type FunctionComponent } from 'react';
+
+import breakpointTokens from '../styles/_breakpoints.module.scss';
+
+export const BREAKPOINT_LG = parseInt(breakpointTokens.breakpointLg, 10);
+
+export const breakpoints = ['lg', 'md'] as const;
+export type Breakpoint = (typeof breakpoints)[number];
+
+export type Responsive<T> = Partial<Record<Breakpoint, T>>;
+
+export type ResponsiveValue<T> = T | Responsive<T>;
+
+export const isResponsiveValue = <T>(value: ResponsiveValue<T>): value is Responsive<T> =>
+	value !== null && typeof value === 'object' && breakpoints.some((bp) => bp in value);
+
+export const resolveResponsiveValue = <T>(value: ResponsiveValue<T>, breakpoint: Breakpoint): T => {
+	if (!isResponsiveValue(value)) {
+		return value;
+	}
+
+	return (value[breakpoint] ?? value.lg ?? value.md) as T;
+};
+
+const MEDIA_QUERY = `(min-width: ${String(BREAKPOINT_LG)}px)`;
+
+const subscribe = (callback: () => void) => {
+	const mql = window.matchMedia(MEDIA_QUERY);
+	mql.addEventListener('change', callback);
+	return () => mql.removeEventListener('change', callback);
+};
+
+const getSnapshot = (): Breakpoint => (window.matchMedia(MEDIA_QUERY).matches ? 'lg' : 'md');
+
+const getServerSnapshot = (): Breakpoint => 'lg';
+
+export const useBreakpoint = (): Breakpoint =>
+	useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+
+/**
+ * Resolves a `ResponsiveValue<T>` to `T` using the current breakpoint.
+ * Use for conditional rendering or JS logic that depends on the breakpoint.
+ */
+export const useResponsiveValue = <T>(value: ResponsiveValue<T>): T =>
+	resolveResponsiveValue(value, useBreakpoint());
+
+/**
+ * Wraps a component so that the specified props accept `ResponsiveValue<T>`.
+ * The wrapper resolves each responsive prop to a plain value before rendering,
+ * so the wrapped component stays completely unaware of breakpoints.
+ */
+export function withResponsiveProps<Props, const Keys extends readonly (keyof Props)[]>(
+	Component: FunctionComponent<Props>,
+	responsiveKeys: Keys,
+) {
+	type EnhancedProps = {
+		[P in keyof Props]: P extends Keys[number] ? ResponsiveValue<NonNullable<Props[P]>> : Props[P];
+	};
+
+	const Wrapper = (props: EnhancedProps) => {
+		const breakpoint = useBreakpoint();
+		const resolved = { ...props } as Record<string, unknown>;
+
+		for (const key of responsiveKeys) {
+			const k = String(key);
+			const value = resolved[k];
+
+			if (value !== undefined) {
+				resolved[k] = resolveResponsiveValue(value, breakpoint);
+			}
+		}
+
+		return createElement(Component as FunctionComponent<Record<string, unknown>>, resolved);
+	};
+
+	Wrapper.displayName = `withResponsiveProps(${Component.displayName ?? Component.name})`;
+
+	return Wrapper;
+}

package/src/utils/responsive.unit.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest';
+
+import { BREAKPOINT_LG, isResponsiveValue, resolveResponsiveValue } from './responsive';
+
+describe('BREAKPOINT_LG', () => {
+	it('should be sourced from the SCSS variable and equal 1440', () => {
+		expect(BREAKPOINT_LG).toBe(1440);
+	});
+});
+
+describe('isResponsiveValue', () => {
+	it('should return true for a responsive object', () => {
+		expect(isResponsiveValue({ lg: 'large', md: 'small' })).toBe(true);
+	});
+
+	it('should return false for a string', () => {
+		expect(isResponsiveValue('large')).toBe(false);
+	});
+
+	it('should return false for null', () => {
+		expect(isResponsiveValue(null as unknown as string)).toBe(false);
+	});
+
+	it('should return true for an object with only lg', () => {
+		expect(isResponsiveValue({ lg: 'large' })).toBe(true);
+	});
+
+	it('should return true for an object with only md', () => {
+		expect(isResponsiveValue({ md: 'small' })).toBe(true);
+	});
+});
+
+describe('resolveResponsiveValue', () => {
+	it('should return static value unchanged for both breakpoints', () => {
+		expect(resolveResponsiveValue('large', 'lg')).toBe('large');
+		expect(resolveResponsiveValue('large', 'md')).toBe('large');
+	});
+
+	it('should resolve lg value from responsive object', () => {
+		expect(resolveResponsiveValue({ lg: 'large', md: 'small' }, 'lg')).toBe('large');
+	});
+
+	it('should resolve md value from responsive object', () => {
+		expect(resolveResponsiveValue({ lg: 'large', md: 'small' }, 'md')).toBe('small');
+	});
+
+	it('should fall back to lg when md is not specified', () => {
+		expect(resolveResponsiveValue({ lg: 'large' }, 'md')).toBe('large');
+	});
+
+	it('should fall back to md when lg is not specified', () => {
+		expect(resolveResponsiveValue({ md: 'small' }, 'lg')).toBe('small');
+	});
+});

package/src/utils/type-utils.ts

@@ -0,0 +1 @@
+export type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;

package/src/utils/use-controlled.browser.test.ts

@@ -13,8 +13,8 @@ describe('useControlled', () => {
 		});
 
 		it('should call the provided setValue', async () => {
-			const setValue = vi.fn();
-			const { result, act } = await renderHook(() => useControlled<string>('hello', setValue, ''));
+			const setValue = vi.fn(() => {});
+			const { result, act } = await renderHook(() => useControlled('hello', setValue, ''));
 
 			await act(() => {
 				result.current[1]('world');
@@ -33,13 +33,13 @@ describe('useControlled', () => {
 
 	describe('uncontrolled mode', () => {
 		it('should use defaultValue as the initial value', async () => {
-			const { result } = await renderHook(() => useControlled<string>(undefined, undefined, 'fallback'));
+			const { result } = await renderHook(() => useControlled(undefined, undefined, 'fallback'));
 
 			expect(result.current[0]).toBe('fallback');
 		});
 
 		it('should update internal state via the setter', async () => {
-			const { result, act } = await renderHook(() => useControlled<string>(undefined, undefined, 'fallback'));
+			const { result, act } = await renderHook(() => useControlled(undefined, undefined, 'fallback'));
 
 			expect(result.current[0]).toBe('fallback');
 
@@ -63,8 +63,8 @@ describe('useControlled', () => {
 		});
 
 		it('should treat setValue-only (no value) as uncontrolled', async () => {
-			const setValue = vi.fn();
-			const { result, act } = await renderHook(() => useControlled<string>(undefined, setValue, 'default'));
+			const setValue = vi.fn(() => {});
+			const { result, act } = await renderHook(() => useControlled(undefined, setValue, 'default'));
 
 			expect(result.current[0]).toBe('default');
 

package/src/utils/use-controlled.ts

@@ -10,7 +10,7 @@ export const useControlled = <T>(
 	defaultValue: T,
 ) => {
 	const isControlled = value !== undefined && setValue !== undefined;
-	const [internalValue, setInternalValue] = useState<T>(value ?? defaultValue);
+	const [internalValue, setInternalValue] = useState(value ?? defaultValue);
 	const resolvedValue = isControlled ? value : internalValue;
 	const resolvedSetValue = isControlled ? setValue : setInternalValue;