@drivenets/design-system 0.8.0 → 0.9.0

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

@@ -0,0 +1,2 @@
+export { default as DsButtonV3 } from './ds-button-v3';
+export * from './ds-button-v3.types';

package/src/components/ds-comments-drawer/components/comments-filter-modal/comments-filter-modal.tsx

@@ -19,7 +19,7 @@ export const CommentsFilterModal = ({
 	availableAuthors,
 	availableLabels,
 }: CommentsFilterModalProps) => {
-	const [selectedTab, setSelectedTab] = useState<string>('statuses');
+	const [selectedTab, setSelectedTab] = useState('statuses');
 
 	const handleStatusToggle = (status: 'unresolved' | 'resolved' | 'action-required', checked: boolean) => {
 		onFiltersChange({

package/src/components/ds-comments-drawer/ds-comments-drawer.tsx

@@ -7,13 +7,7 @@ import { DsButton } from '../ds-button';
 import { DsIcon } from '../ds-icon';
 import { DsTextInput } from '../ds-text-input';
 import { DsTagFilter, type TagFilterItem } from '../ds-tag-filter';
-import {
-	type CommentsFilterState,
-	initialFilterState,
-	applyFilters,
-	filtersToTags,
-	removeTag,
-} from './comments-filters';
+import { initialFilterState, applyFilters, filtersToTags, removeTag } from './comments-filters';
 import { CommentsFilterModal } from './components/comments-filter-modal';
 
 export const DsCommentsDrawer = ({
@@ -36,8 +30,8 @@ export const DsCommentsDrawer = ({
 	style,
 }: DsCommentsDrawerProps) => {
 	const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
-	const [pendingFilters, setPendingFilters] = useState<CommentsFilterState>(initialFilterState);
-	const [appliedFilters, setAppliedFilters] = useState<CommentsFilterState>(initialFilterState);
+	const [pendingFilters, setPendingFilters] = useState(initialFilterState);
+	const [appliedFilters, setAppliedFilters] = useState(initialFilterState);
 
 	const authorsMap = new Map<string, string>();
 	const labelsSet = new Set<string>();

package/src/components/ds-date-picker/ds-date-picker.module.scss

@@ -2,6 +2,16 @@
 
 .control {
 	display: flex;
+
+	&:not([data-disabled]):where(:hover, :focus-within) {
+		.clearTrigger {
+			visibility: visible;
+		}
+	}
+}
+
+.clearTrigger {
+	visibility: hidden;
 }
 
 .positioner {

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

@@ -1,5 +1,5 @@
 import { type ChangeEvent, Fragment, useEffect, useRef, useState } from 'react';
-import { DatePicker, type DateValue } from '@ark-ui/react/date-picker';
+import { DatePicker } from '@ark-ui/react/date-picker';
 import { Portal } from '@ark-ui/react/portal';
 import type { DsDatePickerProps } from './ds-date-picker.types';
 import {
@@ -42,7 +42,7 @@ const DsDatePicker = ({
 }: DsDatePickerProps) => {
 	const defaultValue = toIntlDate(_defaultValue);
 
-	const [value, setValue] = useControlled<DateValue | null>(
+	const [value, setValue] = useControlled(
 		toIntlDate(_value),
 		onChange ? (v) => onChange(fromIntlDate(v)) : undefined,
 		defaultValue ?? null,
@@ -145,6 +145,7 @@ const DsDatePicker = ({
 								{showClearButton && (
 									<DatePicker.ClearTrigger asChild onClick={() => setValue(null)}>
 										<DsButton
+											className={styles.clearTrigger}
 											design="v1.2"
 											size="tiny"
 											buttonType="tertiary"
@@ -184,6 +185,7 @@ const DsDatePicker = ({
 									}}
 									min={isSameDay(value, min) ? _min : undefined}
 									max={isSameDay(value, max) ? _max : undefined}
+									hideClearButton={true}
 									disabled={disabled || !value}
 									readOnly={readOnly}
 									{...slotProps?.timePicker}

package/src/components/ds-date-range-picker/ds-date-range-picker.tsx

@@ -3,7 +3,7 @@ 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 type { 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';
 
@@ -24,7 +24,7 @@ const DsDateRangePicker = ({
 	locale,
 	slotProps,
 }: DsDateRangePickerProps) => {
-	const [value, setValue] = useControlled<DateRangeValue>(valueProp, onChange, defaultValue);
+	const [value, setValue] = useControlled(valueProp, onChange, defaultValue);
 
 	const [startDate, endDate] = value;
 

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

@@ -6,12 +6,8 @@ import type { DsDrawerProps } from './ds-drawer.types';
 import styles from './ds-drawer.module.scss';
 import { DsIcon } from '../ds-icon';
 import { DsTypography } from '../ds-typography';
+import { useResponsiveValue } from '../../utils/responsive';
 
-/**
- * Composable drawer component.
- * Supports grid-based sizing, flexible positioning, and compound components.
- * Use columns prop to control drawer width (1-12 grid columns).
- */
 const DsDrawer = ({
 	open,
 	onOpenChange,
@@ -25,9 +21,12 @@ const DsDrawer = ({
 	className,
 	children,
 }: DsDrawerProps) => {
+	const resolvedColumns = useResponsiveValue(columns);
+
 	const handleOpenChange = (details: { open: boolean }) => {
 		onOpenChange(details.open);
 	};
+
 	const Wrapper = portal ? Portal : Fragment;
 
 	return (
@@ -48,10 +47,8 @@ const DsDrawer = ({
 							styles.drawer,
 							styles[`position-${position}`],
 							className,
-
-							// @ts-expect-error: these classnames are generated dynamically in scss
-							// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-							styles[`cols-${String(columns)}`],
+							// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+							styles[`cols-${resolvedColumns}`],
 						)}
 					>
 						<div className={styles.content}>{children}</div>

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

@@ -1,5 +1,6 @@
 import type { CSSProperties, ReactNode } from 'react';
 import type { UseDialogProps as DialogProps } from '@ark-ui/react/dialog';
+import type { ResponsiveValue } from '../../utils/responsive';
 
 /**
  * Available positions for the drawer
@@ -20,10 +21,11 @@ export interface DsDrawerProps extends Pick<DialogProps, 'closeOnEscape' | 'clos
 	 */
 	onOpenChange: (open: boolean) => void;
 	/**
-	 * Number of grid columns the drawer should span (1-12)
+	 * Number of grid columns the drawer should span (1-12).
+	 * Accepts a responsive value, e.g. `{ lg: 4, md: 6 }`.
 	 * @default 4
 	 */
-	columns?: DsDrawerColumns;
+	columns?: ResponsiveValue<DsDrawerColumns>;
 	/**
 	 * Position of the drawer
 	 * @default 'end'

package/src/components/ds-form-control/ds-form-control.tsx

@@ -63,9 +63,8 @@ const DsFormControl = ({
 					styles.container,
 					className,
 
-					// @ts-expect-error: `info` doesn't have its own classname
-					// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-					status && message && styles[status],
+					// Casting because `info` doesn't have its own classname
+					status && message && styles[status as keyof typeof styles],
 				)}
 				style={style}
 			>

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

@@ -2,7 +2,10 @@
 	position: relative;
 	background: var(--white);
 	padding: var(--spacing-6);
-	width: 340px;
+	width: 20vw;
+	min-width: 240px;
+	max-width: 480px;
+	height: 100vh;
 	border-inline-end: 1px solid transparent;
 
 	&[data-state='open']:hover,

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

@@ -3,7 +3,7 @@ import * as Collapsible from '@radix-ui/react-collapsible';
 import classnames from 'classnames';
 import styles from './ds-panel.module.scss';
 import { DsIcon } from '../ds-icon';
-import type { DsPanelCollapseButtonProps, DsPanelProps } from './ds-panel.types';
+import type { DsPanelBaseProps, DsPanelCollapseButtonProps } from './ds-panel.types';
 
 function useDraggable(enabled: boolean) {
 	const rootRef = useRef<HTMLDivElement>(null);
@@ -84,20 +84,24 @@ function useDraggable(enabled: boolean) {
 	return rootRef;
 }
 
-export function DsPanel({
+export function DsPanelBase({
 	open,
 	onOpenChange,
 	children,
 	className,
+	style,
 	slotProps,
 	variant = 'docked',
+	width,
 	draggable = false,
 	disablePadding = false,
 	...props
-}: DsPanelProps) {
+}: DsPanelBaseProps) {
 	const isDraggable = variant === 'floating' && draggable;
 	const rootRef = useDraggable(isDraggable);
 
+	const rootStyle = width ? { ...style, width } : style;
+
 	return (
 		<Collapsible.Root
 			ref={rootRef}
@@ -108,6 +112,7 @@ export function DsPanel({
 				[styles.variantFloating]: variant === 'floating',
 				[styles.disablePadding]: disablePadding,
 			})}
+			style={rootStyle}
 			{...props}
 		>
 			<DsPanelCollapseButton {...slotProps?.collapseButton} />

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-table/components/ds-table-body-virtualized/ds-table-body-virtualized.tsx

@@ -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();
 

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/ds-time-picker.module.scss

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