@drivenets/design-system 0.18.1 → 0.20.0

package/src/components/ds-segment-group/figma/ds-segment-group-v2-item.figma.ts

@@ -0,0 +1,109 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=42657-2125
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-segment-group
+// component=DsSegmentGroup.Item
+//
+// Figma `Part_SegmentItemV2` maps onto `DsSegmentGroup.Item` (see
+// ds-segment-group-item.figma.ts for the V1 part). Hover / pressed / focus are
+// visual-only and have no matching props.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state = instance.getEnum('state', {
+	default: 'default',
+	hover: 'hover',
+	pressed: 'pressed',
+	focus: 'focus',
+	disabled: 'disabled',
+});
+
+const structure = instance.findInstance('Structure_SegmentItemV2', { traverseInstances: true });
+
+const iconOnly =
+	structure.type === 'INSTANCE' ? structure.getEnum('icon-only', { true: true, false: false }) : false;
+const withIcon = structure.type === 'INSTANCE' ? structure.getBoolean('withIcon') : false;
+
+const mediumLabel = structure.type === 'INSTANCE' ? structure.findText('SegBtn') : undefined;
+const smallLabel = structure.type === 'INSTANCE' ? structure.findText('Button') : undefined;
+const label =
+	mediumLabel?.type === 'TEXT'
+		? mediumLabel.textContent
+		: smallLabel?.type === 'TEXT'
+			? smallLabel.textContent
+			: 'Option';
+
+const toIconName = (name: string): string =>
+	name
+		.replace(/^DAP_DAP_/, 'DAP_')
+		.replace(/^DAP_GM_[OS]_/, '')
+		.replace(/^DAP_outline_icon\//, '')
+		.replace(/^DAP_/, '')
+		.replace(/^\/+/, '')
+		.replace(/[\s/]+/g, '_')
+		.toLowerCase();
+
+const iconNameFromCodeConnectId = (id: string | null): string | undefined => {
+	if (!id) {
+		return undefined;
+	}
+	if (id.startsWith('ds-icon-o-')) {
+		return id.slice('ds-icon-o-'.length);
+	}
+	if (id.startsWith('ds-icon-s-')) {
+		return id.slice('ds-icon-s-'.length);
+	}
+	return undefined;
+};
+
+const resolveIcon = (iconInstance: figma.InstanceHandle): string | undefined => {
+	const fromCcId = iconNameFromCodeConnectId(iconInstance.codeConnectId());
+	if (fromCcId) {
+		return fromCcId;
+	}
+
+	const iconFromMetadata = iconInstance.executeTemplate().metadata?.props?.icon;
+	if (typeof iconFromMetadata === 'string') {
+		return iconFromMetadata;
+	}
+
+	return toIconName(iconInstance.name);
+};
+
+const iconNode =
+	structure.type === 'INSTANCE'
+		? structure
+				.findConnectedInstances((node) => node.codeConnectId()?.startsWith('ds-icon-') ?? false, {
+					traverseInstances: true,
+				})
+				.find((node): node is figma.InstanceHandle => node.type === 'INSTANCE')
+		: undefined;
+const icon = iconNode ? resolveIcon(iconNode) : undefined;
+
+const slug = label
+	.toLowerCase()
+	.replace(/[^a-z0-9]+/g, '-')
+	.replace(/^-+|-+$/g, '');
+const value = slug || 'option';
+
+const disabledAttr = state === 'disabled' ? ' disabled' : '';
+const showIcon = Boolean(icon && (iconOnly || withIcon));
+
+export default {
+	example:
+		iconOnly && icon
+			? figma.code`<DsSegmentGroup.Item value="${value}" aria-label="${label}"${disabledAttr}>
+	<DsIcon icon="${icon}" size="tiny" color="main" />
+</DsSegmentGroup.Item>`
+			: showIcon && icon
+				? figma.code`<DsSegmentGroup.Item value="${value}"${disabledAttr}>
+	<DsIcon icon="${icon}" size="tiny" color="main" />
+	<DsSegmentGroup.ItemText>${label}</DsSegmentGroup.ItemText>
+</DsSegmentGroup.Item>`
+				: figma.code`<DsSegmentGroup.Item value="${value}" label="${label}"${disabledAttr} />`,
+	imports:
+		showIcon || iconOnly
+			? ["import { DsIcon, DsSegmentGroup } from '@drivenets/design-system';"]
+			: ["import { DsSegmentGroup } from '@drivenets/design-system';"],
+	id: 'ds-segment-group-v2-item',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-segment-group/figma/ds-segment-group-v2.figma.ts

@@ -0,0 +1,31 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=42663-2224
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-segment-group
+// component=DsSegmentGroup.Root
+//
+// Figma ships `DsSegmentGroupV2` alongside `DsSegmentGroupV1`. Both map onto the
+// same code component (see ds-segment-group.figma.ts for the older set).
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum('Size', {
+	medium: 'medium',
+	small: 'small',
+});
+
+const sizeAttr = size === 'small' ? ' size="small"' : '';
+
+// `Slot` is homogeneous `Part_SegmentItemV2` instances. Interpolating the slot
+// object itself renders a clickable "Slot" label; execute each child's template
+// so the parent snippet inline `DsSegmentGroup.Item`.
+const slot = instance.getSlot('Slot');
+const items = (slot?.connectedInstances ?? []).map((item) => item.executeTemplate().example);
+
+export default {
+	example: figma.code`<DsSegmentGroup.Root${sizeAttr}>
+	${items}
+</DsSegmentGroup.Root>`,
+	imports: ["import { DsSegmentGroup } from '@drivenets/design-system';"],
+	id: 'ds-segment-group-v2',
+	metadata: { nestable: false },
+} satisfies figma.Template;

package/src/components/ds-site-node/ds-site-node.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { DsSiteNodeProps } from './ds-site-node.types';
-import { useIsOverflowing } from './hooks/use-is-overflowing';
+import { useIsHorizontallyOverflowing } from '../../utils/use-is-horizontally-overflowing';
 import { DsStack } from '../ds-stack';
 import { DsTooltip } from '../ds-tooltip';
 import { DsTypography } from '../ds-typography';
@@ -21,7 +21,7 @@ const DsSiteNode = ({
 	const isSelected = state === 'selected';
 	const isMuted = state === 'muted';
 
-	const { ref: siteCodeRef, isOverflowing } = useIsOverflowing<HTMLSpanElement>(siteCode);
+	const { ref: siteCodeRef, isOverflowing } = useIsHorizontallyOverflowing<HTMLSpanElement>(siteCode);
 
 	return (
 		<button

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

@@ -4,9 +4,10 @@
 	display: block;
 	position: relative;
 	overflow-y: auto;
+	overflow-x: hidden;
 	flex: 1;
 	min-height: 0;
-	scrollbar-gutter: stable;
+	scrollbar-gutter: auto;
 
 	@include scrollbars.scrollbar-on-hover;
 }
@@ -22,7 +23,16 @@
 	visibility: hidden;
 }
 
-.emptyState {
+.emptyStateRow {
 	position: absolute;
 	inset: 0;
 }
+
+.emptyState {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	text-align: center;
+}

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

@@ -5,7 +5,6 @@ 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, TableRow, TableCell } from '../core-table';
-import { EMPTY_TABLE_STATE_TEXT } from '../../utils/constants';
 import { useInfiniteScroll } from './use-infinite-scroll';
 
 export const DsTableBodyVirtualized = <TData,>({
@@ -150,8 +149,8 @@ export function DsTableBody<TData>({
 					);
 				})
 			) : hasNoData ? (
-				<TableRow>
-					<TableCell className={styles.emptyState}>{emptyState || EMPTY_TABLE_STATE_TEXT}</TableCell>
+				<TableRow className={styles.emptyStateRow}>
+					<TableCell className={styles.emptyState}>{emptyState}</TableCell>
 				</TableRow>
 			) : null}
 

package/src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.module.scss

@@ -20,16 +20,11 @@
 	justify-content: space-between;
 	gap: vars.$header-sort-gap;
 	width: 100%;
+	min-width: 0;
 	height: 100%;
 	padding: 0 var(--standard);
 }
 
-.groupLabel {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
 .collapseToggle {
 	flex-shrink: 0;
 }

package/src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.tsx

@@ -5,6 +5,7 @@ import { useDsTableContext } from '../../context/ds-table-context';
 import { getGroupColumnSizeStyle } from '../../grouping';
 import { getResizableHeaderStyle } from '../../utils/column-size';
 import { defaultDsTableLocale } from '../../ds-table.types';
+import { DsTableHeaderLabel } from '../ds-table-header-label';
 import { DsTableResizeHandle } from '../ds-table-resize-handle';
 import type { DsTableGroupHeaderCellProps } from './ds-table-group-header-cell.types';
 import styles from './ds-table-group-header-cell.module.scss';
@@ -29,6 +30,8 @@ export const DsTableGroupHeaderCell = <TData, TValue>({
 	const toggleLabel = isCollapsed ? mergedLocale.expandColumnGroup : mergedLocale.collapseColumnGroup;
 
 	const handleToggle = () => onToggleColumnGroup?.(groupId);
+	const headerDef = header.column.columnDef.header;
+	const tooltipText = typeof headerDef === 'string' ? headerDef : undefined;
 
 	return (
 		<TableHead
@@ -38,9 +41,9 @@ export const DsTableGroupHeaderCell = <TData, TValue>({
 			colSpan={header.colSpan}
 		>
 			<div className={styles.groupHeaderContent}>
-				<span className={styles.groupLabel}>
-					{flexRender(header.column.columnDef.header, header.getContext())}
-				</span>
+				<DsTableHeaderLabel tooltipText={tooltipText}>
+					{flexRender(headerDef, header.getContext())}
+				</DsTableHeaderLabel>
 				{isCollapsible && (
 					<DsButtonV3
 						variant="secondary"

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

@@ -15,6 +15,10 @@
 		border-bottom: 1px solid var(--color-dap-gray-400);
 	}
 
+	.scrollbarSpacer:not(.scrollbarSpacerOccupied) {
+		border-bottom: none;
+	}
+
 	&.headerRowNoBorder {
 		.headerCell {
 			border-bottom: none;
@@ -42,6 +46,7 @@
 
 	.pageButtonIconContainer {
 		display: flex;
+		flex-shrink: 0;
 		align-items: center;
 		justify-content: center;
 		width: 24px;
@@ -54,9 +59,18 @@
 	}
 }
 
+.scrollbarSpacer {
+	flex-shrink: 0;
+	padding: 0;
+	overflow: hidden;
+	border-left: none;
+	pointer-events: none;
+}
+
 .selectHeaderCell {
 	padding: 0;
 	justify-content: center;
+	text-align: center;
 }
 
 .groupStart:not(:first-child) {
@@ -68,7 +82,10 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: vars.$header-sort-gap;
+	width: 100%;
+	min-width: 0;
 	height: 100%;
+	overflow: hidden;
 }
 
 .headerLabelStack {
@@ -76,15 +93,9 @@
 	overflow: hidden;
 }
 
-.headerLabel {
-	display: block;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
 .filterTriggerContainer {
 	display: inline-flex;
+	flex-shrink: 0;
 	align-items: center;
 	margin-left: vars.$header-sort-gap;
 }

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

@@ -12,11 +12,13 @@ import { DsStack } from '../../../ds-stack';
 import { DsTableColumnFilterPopover } from '../../filters/components/column-filter-popover';
 import type { ResolvedColumnFilter } from '../../filters/types/filter-adapter.types';
 import { DsTableGroupHeaderCell } from '../ds-table-group-header-cell';
+import { DsTableHeaderLabel } from '../ds-table-header-label';
 import { DsTableResizeHandle } from '../ds-table-resize-handle';
 import { isFirstLeafColumnOfGroup } from '../../grouping';
 
 const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
-	const { bordered, virtualized, resizableColumns, resizeSizingReady } = useDsTableContext<TData, unknown>();
+	const { bordered, virtualized, resizableColumns, resizeSizingReady, scrollbarSpacerWidth } =
+		useDsTableContext<TData, unknown>();
 
 	return (
 		<TableHeader className={classnames(styles.header, virtualized && styles.virtualizedHeader)}>
@@ -58,6 +60,7 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 							!!resizeSizingReady,
 						);
 						const canSort = header.column.getCanSort();
+						const sortDirection = header.column.getIsSorted();
 						const canResize = resizableColumns && header.column.getCanResize();
 						const isSelectColumn = header.column.id === SELECT_COLUMN_ID;
 						const isGroupStart = isFirstLeafColumnOfGroup(header.column);
@@ -66,6 +69,8 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 						const resolvedFilter: ResolvedColumnFilter | undefined =
 							metaFilter && 'render' in metaFilter ? metaFilter : undefined;
 						const hasActiveColumnFilter = resolvedFilter?.hasActiveFilter ?? false;
+						const headerDef = header.column.columnDef.header;
+						const tooltipText = typeof headerDef === 'string' ? headerDef : undefined;
 
 						return (
 							<TableHead
@@ -89,28 +94,16 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 										width="100%"
 										className={styles.headerLabelStack}
 									>
-										<span className={styles.headerLabel}>
-											{flexRender(header.column.columnDef.header, header.getContext())}
-										</span>
+										<DsTableHeaderLabel tooltipText={tooltipText}>
+											{flexRender(headerDef, header.getContext())}
+										</DsTableHeaderLabel>
 									</DsStack>
-									{canSort && (
+									{canSort && sortDirection && (
 										<div className={styles.pageButtonIconContainer}>
-											{{
-												asc: (
-													<DsIcon
-														icon="arrow_drop_up"
-														className={classnames(styles.pageButtonIcon, stylesShared.pageButtonIcon)}
-													/>
-												),
-												desc: (
-													<DsIcon
-														icon="arrow_drop_down"
-														className={classnames(styles.pageButtonIcon, stylesShared.pageButtonIcon)}
-													/>
-												),
-											}[header.column.getIsSorted() as string] ?? (
-												<div className={classnames(styles.pageButtonIcon, stylesShared.pageButtonIcon)} />
-											)}
+											<DsIcon
+												icon={sortDirection === 'asc' ? 'arrow_drop_up' : 'arrow_drop_down'}
+												className={classnames(styles.pageButtonIcon, stylesShared.pageButtonIcon)}
+											/>
 										</div>
 									)}
 									{resolvedFilter && (
@@ -130,6 +123,19 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 							</TableHead>
 						);
 					})}
+					<TableHead
+						aria-hidden
+						className={classnames(
+							styles.headerCell,
+							styles.scrollbarSpacer,
+							scrollbarSpacerWidth > 0 && styles.scrollbarSpacerOccupied,
+						)}
+						style={{
+							width: scrollbarSpacerWidth,
+							minWidth: scrollbarSpacerWidth,
+							flexShrink: 0,
+						}}
+					/>
 				</TableRow>
 			))}
 		</TableHeader>

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

@@ -0,0 +1,12 @@
+@use '../../../styles/typography';
+
+.headerLabel {
+	display: block;
+	min-width: 0;
+}
+
+.headerLabelInner {
+	display: block;
+	min-width: 0;
+	@include typography.ellipsis;
+}

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import classnames from 'classnames';
+import { DsTooltip } from '../../ds-tooltip';
+import { useIsHorizontallyOverflowing } from '../../../utils/use-is-horizontally-overflowing';
+import styles from './ds-table-header-label.module.scss';
+
+type DsTableHeaderLabelProps = {
+	children: ReactNode;
+	tooltipText?: string;
+	className?: string;
+};
+
+export const DsTableHeaderLabel = ({ className, children, tooltipText }: DsTableHeaderLabelProps) => {
+	const { ref, isOverflowing } = useIsHorizontallyOverflowing<HTMLSpanElement>(tooltipText);
+	const title = isOverflowing ? tooltipText : undefined;
+
+	return (
+		<span className={classnames(styles.headerLabel, className)}>
+			<DsTooltip content={title} placement="top">
+				<span ref={ref} className={styles.headerLabelInner}>
+					{children}
+				</span>
+			</DsTooltip>
+		</span>
+	);
+};
+
+DsTableHeaderLabel.displayName = 'DsTableHeaderLabel';

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

@@ -59,7 +59,6 @@
 }
 
 .cellReorder {
-	width: vars.$reorder-column-width;
 	text-align: center;
 
 	&.isDragging {

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

@@ -2,6 +2,7 @@ import { createContext, useContext, useMemo, type ReactNode, type RefObject } fr
 import type { DsDataTableProps, DsTableRowSize } from '../ds-table.types';
 import type { DsTablePropsWithDefaults } from '../ds-table-defaults';
 import type { DsTableResizeContextSlice } from '../hooks/use-column-resize';
+import type { ScrollbarSpacerWidth } from '../hooks/use-scrollbar-spacer';
 import { useEditingState, type UseEditingStateResult } from '../hooks/use-editing-state';
 
 /** Visual phase of the full-height column-resize divider. */
@@ -56,6 +57,10 @@ export interface DsTableContextType<TData, TValue>
 	 * boundary header's column (leaf or group). Clamps and fires persist.
 	 */
 	onResizeKeyboardNudge?: (columnId: string, delta: number) => void;
+	/**
+	 * Overflow-only **Scrollbar spacer** width (0 or rest scrollbar size).
+	 */
+	scrollbarSpacerWidth: ScrollbarSpacerWidth;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -124,6 +129,7 @@ export const DsTableContextProvider = <TData, TValue>({
 		onResizeDragStart,
 		onResizeReset,
 		onResizeKeyboardNudge,
+		scrollbarSpacerWidth,
 	} = derived.resize;
 
 	const { editing, beginEdit, setDraft, commit, cancel } = useEditingState<TData, TValue>(
@@ -160,6 +166,7 @@ export const DsTableContextProvider = <TData, TValue>({
 			onResizeDragStart,
 			onResizeReset,
 			onResizeKeyboardNudge,
+			scrollbarSpacerWidth,
 			editing,
 			beginEdit,
 			setDraft,
@@ -194,6 +201,7 @@ export const DsTableContextProvider = <TData, TValue>({
 			onResizeDragStart,
 			onResizeReset,
 			onResizeKeyboardNudge,
+			scrollbarSpacerWidth,
 			editing,
 			beginEdit,
 			setDraft,

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

@@ -58,10 +58,7 @@ $bulk-actions-reserved-space: 80px;
 	thead {
 		display: block;
 		flex-shrink: 0;
-		overflow-y: scroll;
-		scrollbar-gutter: stable;
-
-		@include scrollbars.scrollbar-on-hover;
+		overflow-y: hidden;
 	}
 
 	tbody {
@@ -70,14 +67,24 @@ $bulk-actions-reserved-space: 80px;
 		overflow-x: hidden;
 		flex: 1;
 		min-height: 0;
-		scrollbar-gutter: stable;
+		scrollbar-gutter: auto;
 
 		@include scrollbars.scrollbar-on-hover;
+
+		&:has(.emptyState) {
+			display: flex;
+			flex-direction: column;
+		}
 	}
 
 	thead tr,
 	tbody tr {
 		display: flex;
+		width: 100%;
+	}
+
+	tbody tr {
+		padding-inline-end: var(--ds-table-body-scrollbar-compensation, 0px);
 	}
 
 	thead th,
@@ -109,18 +116,19 @@ $bulk-actions-reserved-space: 80px;
 	}
 }
 
+.emptyStateRow {
+	flex: 1;
+	align-items: center;
+}
+
 .emptyState {
 	// colSpan in markup isn't honored by flex row layout, so the cell stretches
-	// across the row; stretch the inner content so it occupies full table width
+	// across the row; center the Empty state in the remaining body
 	flex: 1;
 	min-width: 0;
-	height: vars.$empty-state-height;
 	justify-content: center;
+	align-items: center;
 	text-align: center;
-
-	> * {
-		flex: 1;
-	}
 }
 
 .virtualizedContainer {
@@ -145,20 +153,22 @@ $bulk-actions-reserved-space: 80px;
 	thead {
 		display: block;
 		flex-shrink: 0;
-		overflow-y: scroll;
-		scrollbar-gutter: stable;
-
-		@include scrollbars.scrollbar-on-hover;
+		overflow-y: hidden;
 	}
 
 	tbody {
 		flex: 1;
 		min-height: 0;
-		scrollbar-gutter: stable;
+		scrollbar-gutter: auto;
 	}
 
 	thead tr {
 		display: flex;
+		width: 100%;
+	}
+
+	tbody tr {
+		padding-inline-end: var(--ds-table-body-scrollbar-compensation, 0px);
 	}
 
 	thead th {