@drivenets/design-system 0.7.1 → 0.7.2

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

@@ -9,11 +9,11 @@ import { type DsCheckboxProps, DsCheckbox } from '../ds-checkbox';
 import { SelectItemsChips } from './select-items-chips';
 import { DsTypography } from '../ds-typography';
 import { DsTextInput } from '../ds-text-input';
+import { SELECT_ALL_VALUE, getUserSelectedItems } from './utils';
 
 const SEARCH_THRESHOLD = 13;
-const SELECT_ALL_VALUE = '__INTERNAL_SELECT_ALL_VALUE__';
 
-const SELECT_ALL: DsSelectOption = {
+const SELECT_ALL_OPTION: DsSelectOption = {
 	label: 'All',
 	value: SELECT_ALL_VALUE,
 };
@@ -36,7 +36,7 @@ const DsSelect = ({
 	const [searchTerm, setSearchTerm] = useState('');
 	const [showAllItems, setShowAllItems] = useState(false);
 
-	const internalOptions = multiselectProps.multiple ? [SELECT_ALL, ...userOptions] : userOptions;
+	const internalOptions = multiselectProps.multiple ? [SELECT_ALL_OPTION, ...userOptions] : userOptions;
 
 	const collection = createListCollection({
 		items: internalOptions,
@@ -91,6 +91,40 @@ const DsSelect = ({
 		},
 	});
 
+	const renderTriggerValue = () => {
+		const defaultTrigger = (
+			<DsTypography className={styles.valueText} variant="body-sm-reg" asChild>
+				<Select.ValueText placeholder={placeholder} />
+			</DsTypography>
+		);
+
+		if (!multiselectProps.renderValue || !select.hasSelectedItems) {
+			return defaultTrigger;
+		}
+
+		const userItems = getUserSelectedItems(select.selectedItems);
+
+		if (multiselectProps.multiple) {
+			return (
+				<DsTypography className={styles.valueText} variant="body-sm-reg">
+					{multiselectProps.renderValue(userItems)}
+				</DsTypography>
+			);
+		}
+
+		const firstItem = userItems[0];
+
+		if (!firstItem) {
+			return defaultTrigger;
+		}
+
+		return (
+			<DsTypography className={styles.valueText} variant="body-sm-reg">
+				{multiselectProps.renderValue(firstItem)}
+			</DsTypography>
+		);
+	};
+
 	return (
 		<Select.RootProvider
 			value={select}
@@ -132,9 +166,7 @@ const DsSelect = ({
 					// automatic labelling here.
 					aria-labelledby={null as never}
 				>
-					<DsTypography className={styles.valueText} variant="body-sm-reg" asChild>
-						<Select.ValueText placeholder={placeholder} />
-					</DsTypography>
+					{renderTriggerValue()}
 
 					<Select.Indicator className={styles.triggerIcon}>
 						<DsIcon icon="keyboard_arrow_down" size={size === 'small' ? 'small' : 'medium'} />
@@ -192,7 +224,9 @@ const DsSelect = ({
 									<Select.Item item={item}>
 										{multiselectProps.multiple && <DsCheckbox checked={checked} />}
 										{item.icon && <DsIcon className={styles.itemIcon} icon={item.icon} aria-hidden="true" />}
-										<Select.ItemText>{renderOption ? renderOption(item) : item.label}</Select.ItemText>
+										<Select.ItemText>
+											{renderOption && item.value !== SELECT_ALL_VALUE ? renderOption(item) : item.label}
+										</Select.ItemText>
 									</Select.Item>
 								</DsTypography>
 							);

package/src/components/ds-select/{ds-select.types.tsx → ds-select.types.ts}

@@ -78,10 +78,22 @@ export type DsSelectProps = {
 				multiple?: undefined | false;
 				value: SelectOptionValue;
 				onValueChange?: (value: SelectOptionValue) => void;
+				/**
+				 * Custom render function for the selected value in the trigger.
+				 * When provided, replaces the default label text inside the trigger button.
+				 * Only called when there is a selection; otherwise the placeholder is shown.
+				 */
+				renderValue?: (selectedOption: DsSelectOption) => ReactNode;
 		  }
 		| {
 				multiple: true;
 				value: SelectOptionValue[];
 				onValueChange?: (value: SelectOptionValue[]) => void;
+				/**
+				 * Custom render function for the selected value in the trigger.
+				 * When provided, replaces the default label text inside the trigger button.
+				 * Only called when there is a selection; otherwise the placeholder is shown.
+				 */
+				renderValue?: (selectedOptions: DsSelectOption[]) => ReactNode;
 		  }
 	);

package/src/components/ds-select/select-items-chips.tsx

@@ -1,7 +1,8 @@
 import { useSelectContext, type UseSelectContext } from '@ark-ui/react/select';
 import styles from './ds-select.module.scss';
-import DsButton from '../ds-button/ds-button';
-import DsChip from '../ds-chip/ds-chip';
+import { DsButton } from '../ds-button';
+// TODO: Use DsTag instead.
+import { DsChip } from '../ds-chip';
 import type { DsSelectOption, SelectOptionValue } from './ds-select.types';
 
 type SelectItemsChipsProps = {

package/src/components/ds-select/utils.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest';
+import type { DsSelectOption } from './ds-select.types';
+import { SELECT_ALL_VALUE, getUserSelectedItems } from './utils';
+
+describe('getUserSelectedItems', () => {
+	it('should return all items when none is the internal select-all', () => {
+		const items: DsSelectOption[] = [
+			{ value: 'a', label: 'A' },
+			{ value: 'b', label: 'B' },
+		];
+
+		expect(getUserSelectedItems(items)).toEqual(items);
+	});
+
+	it('should filter out the internal select-all item', () => {
+		const items: DsSelectOption[] = [
+			{ value: SELECT_ALL_VALUE, label: 'All' },
+			{ value: 'a', label: 'A' },
+			{ value: 'b', label: 'B' },
+		];
+
+		expect(getUserSelectedItems(items)).toEqual([
+			{ value: 'a', label: 'A' },
+			{ value: 'b', label: 'B' },
+		]);
+	});
+
+	it('should return an empty array when only the select-all item is present', () => {
+		const items: DsSelectOption[] = [{ value: SELECT_ALL_VALUE, label: 'All' }];
+
+		expect(getUserSelectedItems(items)).toEqual([]);
+	});
+
+	it('should return an empty array for empty input', () => {
+		expect(getUserSelectedItems([])).toEqual([]);
+	});
+});

package/src/components/ds-select/utils.ts

@@ -0,0 +1,7 @@
+import type { DsSelectOption } from './ds-select.types';
+
+export const SELECT_ALL_VALUE = '__INTERNAL_SELECT_ALL_VALUE__';
+
+export function getUserSelectedItems(selectedItems: DsSelectOption[]): DsSelectOption[] {
+	return selectedItems.filter((item) => item.value !== SELECT_ALL_VALUE);
+}

package/src/components/ds-smart-tabs/{ds-smart-tabs.types.tsx → ds-smart-tabs.types.ts}

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type React from 'react';
-import type { IconType } from '../ds-icon/ds-icon.types';
+import { type IconType } from '../ds-icon';
 
 export const colors = [
 	'dark-blue',

package/src/components/ds-stepper/components/ds-step-next-button.tsx

@@ -1,9 +1,13 @@
 import { useStepper } from '../hooks/use-stepper';
-import DsButton from '../../ds-button/ds-button';
-import type { DsButtonProps } from '../../ds-button/versions/ds-button-legacy';
+import { DsButton, type DsButtonUnifiedProps } from '../../ds-button';
+
+// TODO: Use the new button props once we deprecate the legacy button.
+type DsLegacyButtonProps = Extract<DsButtonUnifiedProps, { design?: undefined | 'legacy' }> & {
+	design?: undefined | 'legacy';
+};
 
 export type DsNextStepButtonProps = Pick<
-	DsButtonProps,
+	DsLegacyButtonProps,
 	'variant' | 'size' | 'className' | 'style' | 'children'
 >;
 

package/src/components/ds-stepper/components/ds-step.tsx

@@ -2,7 +2,7 @@ import type { MouseEvent, PropsWithChildren, ReactNode } from 'react';
 import { useStepper } from '../hooks/use-stepper';
 import classnames from 'classnames';
 import styles from '../ds-stepper.module.scss';
-import DsIcon from '../../ds-icon/ds-icon';
+import { DsIcon } from '../../ds-icon';
 import { DsStepSeparator } from './ds-step-separator';
 
 export type DsStepProps = PropsWithChildren<{

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

@@ -59,9 +59,12 @@ export const DsTableBodyVirtualized = <TData,>({
 				const scrollOffset = instance.scrollOffset || 0;
 				const totalContentHeight = instance.getTotalSize();
 				const viewportHeight = instance.scrollElement?.clientHeight;
+				const scrollDirection = instance.scrollDirection;
 
 				if (viewportHeight) {
-					onScroll({ scrollOffset, totalContentHeight, viewportHeight });
+					const bottomOffset = totalContentHeight - (scrollOffset + viewportHeight);
+
+					onScroll({ scrollOffset, totalContentHeight, viewportHeight, bottomOffset, scrollDirection });
 				}
 			}
 		},

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

@@ -19,4 +19,8 @@ export interface ScrollParams {
 	totalContentHeight: number;
 	/** The visible height of the table container (in pixels) */
 	viewportHeight: number;
+	/** The distance from the current scroll position to the bottom of the content (in pixels) */
+	bottomOffset: number;
+	/** The direction of the scroll movement */
+	scrollDirection: 'forward' | 'backward' | null;
 }

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

@@ -10,7 +10,7 @@ import { DsTableRowExpandableCell } from '../ds-table-row-expandable-cell';
 import type { DsTableRowProps } from './ds-table-row.types';
 import styles from './ds-table-row.module.scss';
 import { useDsTableContext } from '../../context/ds-table-context';
-import { mergeRefs } from '../../utils/merge-refs';
+import { mergeRefs } from '../../../../utils/merge-refs';
 import { getColumnSizeStyle } from '../../utils/column-size';
 
 interface DsRowDragHandleProps {

package/src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.tsx

@@ -1,8 +1,7 @@
 import { useRef, useState } from 'react';
 import { Tabs } from '@ark-ui/react/tabs';
 import classNames from 'classnames';
-import DsIcon from '../../../ds-icon/ds-icon';
-import type { IconType } from '../../../ds-icon';
+import { DsIcon, type IconType } from '../../../ds-icon';
 import { DsTooltip } from '../../../ds-tooltip';
 import { DsDropdownMenu } from '../../../ds-dropdown-menu';
 import type { DsTabsTabProps } from '../../ds-tabs.types';

package/src/components/ds-tag-filter/{utils.test.ts → utils.browser.test.ts}

@@ -100,29 +100,17 @@ describe('Tag Filter Utils', () => {
 
 		beforeEach(() => {
 			mockContainer = document.createElement('div');
+			document.body.appendChild(mockContainer);
 		});
 
 		afterEach(() => {
 			vi.restoreAllMocks();
+			document.body.removeChild(mockContainer);
 		});
 
 		it('should calculate available width without padding', () => {
-			vi.spyOn(mockContainer, 'getBoundingClientRect').mockReturnValue({
-				width: 500,
-				height: 100,
-				top: 0,
-				left: 0,
-				bottom: 100,
-				right: 500,
-				x: 0,
-				y: 0,
-				toJSON: () => ({}),
-			});
-
-			vi.spyOn(window, 'getComputedStyle').mockReturnValue({
-				paddingLeft: '0px',
-				paddingRight: '0px',
-			} as CSSStyleDeclaration);
+			mockContainer.style.padding = '0px';
+			mockContainer.style.width = '500px';
 
 			const result = getContainerAvailableWidth(mockContainer);
 
@@ -130,22 +118,9 @@ describe('Tag Filter Utils', () => {
 		});
 
 		it('should subtract padding from container width', () => {
-			vi.spyOn(mockContainer, 'getBoundingClientRect').mockReturnValue({
-				width: 500,
-				height: 100,
-				top: 0,
-				left: 0,
-				bottom: 100,
-				right: 500,
-				x: 0,
-				y: 0,
-				toJSON: () => ({}),
-			});
-
-			vi.spyOn(window, 'getComputedStyle').mockReturnValue({
-				paddingLeft: '20px',
-				paddingRight: '30px',
-			} as CSSStyleDeclaration);
+			mockContainer.style.paddingLeft = '20px';
+			mockContainer.style.paddingRight = '30px';
+			mockContainer.style.width = '500px';
 
 			const result = getContainerAvailableWidth(mockContainer);
 
@@ -153,22 +128,9 @@ describe('Tag Filter Utils', () => {
 		});
 
 		it('should handle string padding values with decimals', () => {
-			vi.spyOn(mockContainer, 'getBoundingClientRect').mockReturnValue({
-				width: 500,
-				height: 100,
-				top: 0,
-				left: 0,
-				bottom: 100,
-				right: 500,
-				x: 0,
-				y: 0,
-				toJSON: () => ({}),
-			});
-
-			vi.spyOn(window, 'getComputedStyle').mockReturnValue({
-				paddingLeft: '15.5px',
-				paddingRight: '24.5px',
-			} as CSSStyleDeclaration);
+			mockContainer.style.paddingLeft = '15.5px';
+			mockContainer.style.paddingRight = '24.5px';
+			mockContainer.style.width = '500px';
 
 			const result = getContainerAvailableWidth(mockContainer);
 
@@ -176,22 +138,9 @@ describe('Tag Filter Utils', () => {
 		});
 
 		it('should default to 0 for invalid padding values', () => {
-			vi.spyOn(mockContainer, 'getBoundingClientRect').mockReturnValue({
-				width: 500,
-				height: 100,
-				top: 0,
-				left: 0,
-				bottom: 100,
-				right: 500,
-				x: 0,
-				y: 0,
-				toJSON: () => ({}),
-			});
-
-			vi.spyOn(window, 'getComputedStyle').mockReturnValue({
-				paddingLeft: '',
-				paddingRight: '',
-			} as CSSStyleDeclaration);
+			mockContainer.style.paddingLeft = 'invalid';
+			mockContainer.style.paddingRight = 'invalid';
+			mockContainer.style.width = '500px';
 
 			const result = getContainerAvailableWidth(mockContainer);
 
@@ -214,41 +163,17 @@ describe('Tag Filter Utils', () => {
 
 		it('should measure tag widths and gap', () => {
 			const tag1 = document.createElement('div');
-			tag1.setAttribute('data-measure-tag', '');
 			const tag2 = document.createElement('div');
+
+			tag1.setAttribute('data-measure-tag', '');
 			tag2.setAttribute('data-measure-tag', '');
 
+			tag1.style.width = '80px';
+			tag2.style.width = '90px';
+
 			mockContainer.appendChild(tag1);
 			mockContainer.appendChild(tag2);
 
-			vi.spyOn(tag1, 'getBoundingClientRect').mockReturnValue({
-				width: 80,
-				height: 30,
-				top: 0,
-				left: 0,
-				bottom: 30,
-				right: 80,
-				x: 0,
-				y: 0,
-				toJSON: () => ({}),
-			});
-
-			vi.spyOn(tag2, 'getBoundingClientRect').mockReturnValue({
-				width: 90,
-				height: 30,
-				top: 0,
-				left: 0,
-				bottom: 30,
-				right: 90,
-				x: 0,
-				y: 0,
-				toJSON: () => ({}),
-			});
-
-			vi.spyOn(window, 'getComputedStyle').mockReturnValue({
-				gap: '8px',
-			} as CSSStyleDeclaration);
-
 			const result = getElementMeasurements(mockContainer);
 
 			expect(result.tagWidths).toEqual([80, 90]);
@@ -259,22 +184,7 @@ describe('Tag Filter Utils', () => {
 			const tag1 = document.createElement('div');
 			tag1.setAttribute('data-measure-tag', '');
 			mockContainer.appendChild(tag1);
-
-			vi.spyOn(tag1, 'getBoundingClientRect').mockReturnValue({
-				width: 80,
-				height: 30,
-				top: 0,
-				left: 0,
-				bottom: 30,
-				right: 80,
-				x: 0,
-				y: 0,
-				toJSON: () => ({}),
-			});
-
-			vi.spyOn(window, 'getComputedStyle').mockReturnValue({
-				gap: '',
-			} as CSSStyleDeclaration);
+			mockContainer.style.gap = 'invalid';
 
 			const result = getElementMeasurements(mockContainer);
 
@@ -282,10 +192,7 @@ describe('Tag Filter Utils', () => {
 		});
 
 		it('should handle no tags present', () => {
-			vi.spyOn(window, 'getComputedStyle').mockReturnValue({
-				gap: '10px',
-			} as CSSStyleDeclaration);
-
+			mockContainer.style.gap = '10px';
 			const result = getElementMeasurements(mockContainer);
 
 			expect(result.tagWidths).toEqual([]);

package/src/components/ds-text-input/ds-text-input.tsx

@@ -9,6 +9,7 @@ const DsTextInput: FC<DsTextInputProps> = ({
 	name,
 	size = 'default',
 	type = 'text',
+	onFocus,
 	onBlur,
 	onKeyDown,
 	onChange,
@@ -23,6 +24,7 @@ const DsTextInput: FC<DsTextInputProps> = ({
 	maxLength,
 	placeholder,
 	disabled = false,
+	readOnly = false,
 	tabIndex,
 	slots,
 }) => {
@@ -60,7 +62,9 @@ const DsTextInput: FC<DsTextInputProps> = ({
 					minLength={minLength}
 					maxLength={maxLength}
 					placeholder={placeholder}
+					readOnly={readOnly}
 					disabled={disabled}
+					onFocus={onFocus}
 					onBlur={onBlur}
 					onKeyDown={onKeyDown}
 					onChange={handleChange}

package/src/components/ds-text-input/{ds-text-input.types.tsx → ds-text-input.types.ts}

@@ -27,6 +27,10 @@ export interface DsTextInputProps {
 	 * @default text
 	 */
 	type?: string;
+	/**
+	 * Event handler called when the input field receives focus
+	 */
+	onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
 	/**
 	 * Event handler called when the input field loses focus
 	 *
@@ -86,7 +90,10 @@ export interface DsTextInputProps {
 	 * Whether the input is disabled
 	 */
 	disabled?: boolean;
-
+	/**
+	 * Whether the input is read only
+	 */
+	readOnly?: boolean;
 	/**
 	 * The tabIndex of the input
 	 */