@drivenets/design-system 0.15.0 → 0.17.0

package/src/components/ds-progress-linear/ds-progress-linear.tsx

@@ -104,4 +104,6 @@ const DsProgressLinear = ({
 	);
 };
 
+DsProgressLinear.displayName = 'DsProgressLinear';
+
 export default DsProgressLinear;

package/src/components/ds-progress-task-bar/ds-progress-task-bar.figma.ts

@@ -23,7 +23,7 @@ const attrs = [
 
 export default {
 	example: zero ? figma.code`<DsProgressTaskBar total={999} />` : figma.code`<DsProgressTaskBar ${attrs} />`,
-	imports: ["import { DsProgressTaskBar } from '@drivenets/design-system'"],
+	imports: ["import { DsProgressTaskBar } from '@drivenets/design-system';"],
 	id: 'ds-progress-task-bar',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-progress-task-bar/ds-progress-task-bar.tsx

@@ -119,4 +119,6 @@ const DsProgressTaskBar = ({
 	);
 };
 
+DsProgressTaskBar.displayName = 'DsProgressTaskBar';
+
 export default DsProgressTaskBar;

package/src/components/ds-radio-group/ds-radio-group.tsx

@@ -122,3 +122,6 @@ export const DsRadioGroup = {
 	Root,
 	Item,
 };
+DsRadioGroup.Root.displayName = 'DsRadioGroup.Root';
+DsRadioGroup.Item.displayName = 'DsRadioGroup.Item';
+DsRadioGroupLegacy.displayName = 'DsRadioGroupLegacy';

package/src/components/ds-radio-group/figma/ds-radio-group-item.figma.ts

@@ -0,0 +1,24 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=32934-446
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-radio-group
+// component=DsRadioGroup.Item
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state = instance.getEnum('state', {
+	default: 'default',
+	hover: 'hover',
+	focus: 'focus',
+	disabled: 'disabled',
+});
+
+const attrs = ['value="option"', 'label="Option"', state === 'disabled' ? 'disabled' : '']
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsRadioGroup.Item ${attrs} />`,
+	imports: ["import { DsRadioGroup } from '@drivenets/design-system';"],
+	id: 'ds-radio-group-item',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-radio-group/figma/ds-radio-group.figma.ts

@@ -0,0 +1,14 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=34864-124515
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-radio-group
+// component=DsRadioGroup.Root
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsRadioGroup.Root>
+	<DsRadioGroup.Item value="option-1" label="Option 1" />
+	<DsRadioGroup.Item value="option-2" label="Option 2" />
+</DsRadioGroup.Root>`,
+	imports: ["import { DsRadioGroup } from '@drivenets/design-system';"],
+	id: 'ds-radio-group',
+	metadata: { nestable: false },
+} satisfies figma.Template;

package/src/components/ds-segment-group/ds-segment-group.tsx

@@ -74,3 +74,6 @@ export const DsSegmentGroup = {
 	Item,
 	ItemText,
 };
+DsSegmentGroup.Root.displayName = 'DsSegmentGroup.Root';
+DsSegmentGroup.Item.displayName = 'DsSegmentGroup.Item';
+DsSegmentGroup.ItemText.displayName = 'DsSegmentGroup.ItemText';

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

@@ -0,0 +1,25 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15094-6249
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-segment-group
+// component=DsSegmentGroup.Item
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state = instance.getEnum('State', {
+	Default: 'default',
+	Hover: 'hover',
+	Pressed: 'pressed',
+	Focus: 'focus',
+	Disabled: 'disabled',
+});
+
+const attrs = ['value="option"', 'label="Option"', state === 'disabled' ? 'disabled' : '']
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsSegmentGroup.Item ${attrs} />`,
+	imports: ["import { DsSegmentGroup } from '@drivenets/design-system';"],
+	id: 'ds-segment-group-item',
+	metadata: { nestable: true },
+} satisfies figma.Template;

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

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15094-8569
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-segment-group
+// component=DsSegmentGroup.Root
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum('Size', {
+	medium: 'medium',
+	small: 'small',
+});
+
+const sizeAttr = size === 'small' ? ' size="small"' : '';
+
+export default {
+	example: figma.code`<DsSegmentGroup.Root${sizeAttr}>
+	<DsSegmentGroup.Item value="option-1" label="Option 1" />
+	<DsSegmentGroup.Item value="option-2" label="Option 2" />
+</DsSegmentGroup.Root>`,
+	imports: ["import { DsSegmentGroup } from '@drivenets/design-system';"],
+	id: 'ds-segment-group',
+	metadata: { nestable: false },
+} satisfies figma.Template;

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

@@ -47,7 +47,7 @@ const attrs = [
 
 export default {
 	example: figma.code`<DsSelect ${attrs} />`,
-	imports: ["import { DsSelect } from '@drivenets/design-system'"],
+	imports: ["import { DsSelect } from '@drivenets/design-system';"],
 	id: 'ds-select',
 	metadata: { nestable: true, props: { fcMember: 'Select', fcProps: attrs } },
-};
+} satisfies figma.Template;

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

@@ -271,4 +271,6 @@ function getItemCheckedState({
 	return someSelected ? 'indeterminate' : false;
 }
 
+DsSelect.displayName = 'DsSelect';
+
 export default DsSelect;

package/src/components/ds-site-node/ds-site-node.figma.ts

@@ -0,0 +1,27 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=39525-181
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-site-node
+// component=DsSiteNode
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state = instance.getEnum('State', {
+	Default: 'default',
+	Selected: 'selected',
+	Muted: 'muted',
+	Overflow: 'overflow',
+});
+
+const tier = instance.getString('Tier');
+const siteCode = instance.getString('Site code');
+const overflowLabel = instance.getString('Overflow label');
+
+export default {
+	example:
+		state === 'overflow'
+			? figma.code`<DsSiteNode state="${state}" overflowLabel="${overflowLabel}" />`
+			: figma.code`<DsSiteNode state="${state}" tier="${tier}" siteCode="${siteCode}" />`,
+	imports: ["import { DsSiteNode } from '@drivenets/design-system';"],
+	id: 'ds-site-node',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-site-node/ds-site-node.module.scss

@@ -0,0 +1,59 @@
+$node-width: 140px;
+$node-radius: 8px;
+$overflow-height: 70px;
+
+.node {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	width: $node-width;
+	padding: var(--sm);
+	gap: var(--2xs);
+	overflow: clip;
+	border: 1px solid var(--border-secondary);
+	border-radius: $node-radius;
+	background: var(--background);
+	font-family: var(--font-family-base);
+	cursor: pointer;
+	appearance: none;
+
+	&:focus-visible {
+		outline: 2px solid var(--outline-moderate);
+		outline-offset: 2px;
+	}
+}
+
+.selected {
+	border-color: var(--outline-moderate);
+	background: var(--background-info);
+	box-shadow: inset 0 0 0 1px var(--outline-moderate);
+}
+
+.overflow {
+	min-height: $overflow-height;
+	gap: 0;
+	border: 1px dashed var(--border-disabled);
+	background: var(--background-secondary-selected-weak);
+}
+
+.pill {
+	padding: var(--4xs) var(--xs);
+	overflow: clip;
+	border-radius: 9999px;
+	background: var(--background-primary);
+}
+
+.pillMuted {
+	background: var(--background-tertiary-selected-weak);
+}
+
+.siteCode {
+	display: block;
+	align-self: stretch;
+	overflow: hidden;
+	text-align: center;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

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

@@ -0,0 +1,73 @@
+import classNames from 'classnames';
+import type { DsSiteNodeProps } from './ds-site-node.types';
+import { useIsOverflowing } from './hooks/use-is-overflowing';
+import { DsStack } from '../ds-stack';
+import { DsTooltip } from '../ds-tooltip';
+import { DsTypography } from '../ds-typography';
+import styles from './ds-site-node.module.scss';
+
+const DsSiteNode = ({
+	ref,
+	state = 'default',
+	tier,
+	siteCode,
+	overflowLabel,
+	className,
+	style,
+	'aria-label': ariaLabel,
+	onClick,
+}: DsSiteNodeProps) => {
+	const isOverflow = state === 'overflow';
+	const isSelected = state === 'selected';
+	const isMuted = state === 'muted';
+
+	const { ref: siteCodeRef, isOverflowing } = useIsOverflowing<HTMLSpanElement>(siteCode);
+
+	return (
+		<button
+			ref={ref}
+			type="button"
+			className={classNames(
+				styles.node,
+				{
+					[styles.selected]: isSelected,
+					[styles.overflow]: isOverflow,
+				},
+				className,
+			)}
+			style={style}
+			aria-label={ariaLabel}
+			aria-current={isSelected ? true : undefined}
+			onClick={onClick}
+		>
+			{isOverflow ? (
+				<DsTypography variant="body-sm-reg" color="secondary">
+					{overflowLabel}
+				</DsTypography>
+			) : (
+				<>
+					<DsStack
+						direction="row"
+						alignItems="center"
+						justifyContent="center"
+						className={classNames(styles.pill, { [styles.pillMuted]: isMuted })}
+					>
+						<DsTypography variant="body-xs-md" color={isMuted ? 'on-disabled' : 'on-action'}>
+							{tier}
+						</DsTypography>
+					</DsStack>
+
+					<span ref={siteCodeRef} className={styles.siteCode}>
+						<DsTooltip content={isOverflowing ? siteCode : undefined}>
+							<DsTypography variant="body-sm-bold" color={isSelected ? 'main' : 'secondary'}>
+								{siteCode}
+							</DsTypography>
+						</DsTooltip>
+					</span>
+				</>
+			)}
+		</button>
+	);
+};
+
+export default DsSiteNode;

package/src/components/ds-site-node/ds-site-node.types.ts

@@ -0,0 +1,36 @@
+import type { CSSProperties, MouseEvent, Ref } from 'react';
+
+export const siteNodeStates = ['default', 'selected', 'muted', 'overflow'] as const;
+export type SiteNodeState = (typeof siteNodeStates)[number];
+
+export interface DsSiteNodeProps {
+	ref?: Ref<HTMLButtonElement>;
+	/**
+	 * Scope/selection state within the site hierarchy path.
+	 * `overflow` renders a collapsed summary node (no tier/site code).
+	 */
+	state?: SiteNodeState;
+	/**
+	 * Short tier label shown in the pill, e.g. `"T1"`. Ignored when `state="overflow"`.
+	 */
+	tier?: string;
+	/**
+	 * Site identifier. Truncates with an ellipsis and reveals the full value in a
+	 * tooltip when it overflows. Ignored when `state="overflow"`.
+	 */
+	siteCode?: string;
+	/**
+	 * Summary label for the collapsed branch, e.g. `"+2 more"`. Only used when
+	 * `state="overflow"`.
+	 */
+	overflowLabel?: string;
+	className?: string;
+	style?: CSSProperties;
+	/**
+	 * Overrides the accessible name. By default the node is named by its visible
+	 * content (tier + site code, or the overflow label); set this to give the
+	 * overflow node a more descriptive name, e.g. `"Show 2 more sites"`.
+	 */
+	'aria-label'?: string;
+	onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}

package/src/components/ds-site-node/hooks/use-is-overflowing.ts

@@ -0,0 +1,31 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+
+export const useIsOverflowing = <T extends HTMLElement = HTMLElement>(text: string | undefined) => {
+	const ref = useRef<T>(null);
+	const [isOverflowing, setIsOverflowing] = useState(false);
+
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) {
+			return;
+		}
+
+		const measure = () => setIsOverflowing(element.scrollWidth > element.clientWidth);
+		measure();
+
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+
+		const frame = requestAnimationFrame(measure);
+		document.fonts.ready.then(measure).catch(() => undefined);
+		document.fonts.addEventListener('loadingdone', measure);
+
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+			document.fonts.removeEventListener('loadingdone', measure);
+		};
+	}, [text]);
+
+	return { ref, isOverflowing };
+};

package/src/components/ds-site-node/index.ts

@@ -0,0 +1,3 @@
+export { default as DsSiteNode } from './ds-site-node';
+export { siteNodeStates } from './ds-site-node.types';
+export type { DsSiteNodeProps, SiteNodeState } from './ds-site-node.types';

package/src/components/ds-skeleton/ds-skeleton-circle.tsx

@@ -26,4 +26,6 @@ const DsSkeletonCircle = ({ size = 'regular', color = 'gray', className, style }
 	);
 };
 
+DsSkeletonCircle.displayName = 'DsSkeletonCircle';
+
 export default DsSkeletonCircle;

package/src/components/ds-skeleton/ds-skeleton-rect.tsx

@@ -33,4 +33,6 @@ const DsSkeletonRect = ({
 	);
 };
 
+DsSkeletonRect.displayName = 'DsSkeletonRect';
+
 export default DsSkeletonRect;

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

@@ -46,4 +46,6 @@ const DsSkeletonText = ({
 	);
 };
 
+DsSkeletonText.displayName = 'DsSkeletonText';
+
 export default DsSkeletonText;

package/src/components/ds-skeleton/ds-skeleton.ts

@@ -2,8 +2,14 @@ import DsSkeletonText from './ds-skeleton-text';
 import DsSkeletonCircle from './ds-skeleton-circle';
 import DsSkeletonRect from './ds-skeleton-rect';
 
-export default {
+const DsSkeleton = {
 	Text: DsSkeletonText,
 	Circle: DsSkeletonCircle,
 	Rect: DsSkeletonRect,
 };
+
+DsSkeleton.Text.displayName = 'DsSkeleton.Text';
+DsSkeleton.Circle.displayName = 'DsSkeleton.Circle';
+DsSkeleton.Rect.displayName = 'DsSkeleton.Rect';
+
+export default DsSkeleton;

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

@@ -86,7 +86,7 @@ const DsSmartTab: React.FC<DsSmartTabProps> = ({
 /**
  * Design system SmartTabs component
  */
-const DsSmartTabs = ({
+const DsSmartTabsRoot = ({
 	activeTab,
 	onTabClick,
 	className,
@@ -108,6 +108,11 @@ const DsSmartTabs = ({
 	);
 };
 
-DsSmartTabs.Tab = DsSmartTab;
+DsSmartTab.displayName = 'DsSmartTabs.Tab';
+
+const DsSmartTabs = Object.assign(DsSmartTabsRoot, {
+	displayName: 'DsSmartTabs',
+	Tab: DsSmartTab,
+});
 
 export default DsSmartTabs;

package/src/components/ds-spinner/ds-spinner.figma.ts

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15119-13518
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-spinner
+// component=DsSpinner
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum('Size', {
+	SM: 'small',
+	Default: 'medium',
+	LG: 'large',
+});
+
+export default {
+	example: figma.code`<DsSpinner size="${size}" />`,
+	imports: ["import { DsSpinner } from '@drivenets/design-system';"],
+	id: 'ds-spinner',
+	metadata: { nestable: true },
+} satisfies figma.Template;

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

@@ -48,4 +48,6 @@ const DsSpinner: React.FC<DsSpinnerProps> = ({ size = 'medium', className, style
 	);
 };
 
+DsSpinner.displayName = 'DsSpinner';
+
 export default DsSpinner;

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

@@ -89,7 +89,7 @@ const buttonProps = [
 
 export default {
 	example: figma.code`<DsSplitButton size="${size}"${disabled ? ' disabled' : ''} slotProps={{ button: { ${buttonProps} }, select: { options: [], value: '' } }} />`,
-	imports: ["import { DsSplitButton } from '@drivenets/design-system'"],
+	imports: ["import { DsSplitButton } from '@drivenets/design-system';"],
 	id: 'ds-split-button',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

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

@@ -4,6 +4,12 @@ import styles from './ds-split-button.module.scss';
 import type { DsSplitButtonProps, SplitButtonSize } from './ds-split-button.types';
 import { DsButtonV3 } from '../ds-button-v3';
 
+/**
+ * Secondary action button paired with a dropdown select for choosing a related option.
+ * Both slots share a size and disabled state controlled by the split button.
+ *
+ * @summary split action button with a primary action and an option select
+ */
 const DsSplitButton = ({
 	ref,
 	className,

package/src/components/ds-status-badge/ds-status-badge.tsx

@@ -39,4 +39,6 @@ const DsStatusBadge: React.FC<DsStatusBadgeProps> = ({
 	);
 };
 
+DsStatusBadge.displayName = 'DsStatusBadge';
+
 export default DsStatusBadge;

package/src/components/ds-status-badge-v2/ds-status-badge-v2.figma.ts

@@ -35,7 +35,7 @@ export default {
 			: structure === 'text-only'
 				? figma.code`<DsStatusBadgeV2 phase="${phase}" label="${label}" variant="${variant}" size="${size}" icon={null} />`
 				: figma.code`<DsStatusBadgeV2 phase="${phase}" label="${label}" variant="${variant}" size="${size}" />`,
-	imports: ["import { DsStatusBadgeV2 } from '@drivenets/design-system'"],
+	imports: ["import { DsStatusBadgeV2 } from '@drivenets/design-system';"],
 	id: 'ds-status-badge-v2',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-status-badge-v2/index.ts

@@ -11,3 +11,5 @@ export type {
 	DsStatusBadgeV2Props,
 } from './ds-status-badge-v2.types';
 export { statusBadgeV2Phases, statusBadgeV2Variants, statusBadgeV2Sizes } from './ds-status-badge-v2.types';
+
+DsStatusBadgeV2.displayName = 'DsStatusBadgeV2';

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

@@ -48,3 +48,5 @@ export function DsStepContent({ index, label, description, actions }: DsStepCont
 		</div>
 	);
 }
+
+DsStepContent.displayName = 'DsStepContent';

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

@@ -20,3 +20,5 @@ export function DsNextStepButton({ children, size = 'small', ...rest }: DsNextSt
 		</DsButton>
 	);
 }
+
+DsNextStepButton.displayName = 'DsNextStepButton';

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

@@ -116,3 +116,5 @@ export function DsStep({
 		</Wrapper>
 	);
 }
+
+DsStep.displayName = 'DsStep';

package/src/components/ds-stepper/ds-stepper.figma.ts

@@ -0,0 +1,38 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=29164-187694
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-stepper
+// component=DsStepper
+//
+// `direction` maps to `orientation`. Figma's `type` (detailed|compact) is not a code prop:
+// detailed steps carry a `description` on each `DsStepContent`, compact steps omit it. The
+// steps are composed in code (`DsStep` > `DsStepContent` > `DsNextStepButton`), not derivable
+// from Figma's step atoms, and `count` is data — so a representative two-step composition is
+// emitted for the developer to extend (one `DsStep` per step). The panel-docked wrappers
+// (`DAP_stepper-panel-*_v01`) are a `DsPanel` composition and are intentionally not connected;
+// the stepper still resolves when nested inside them.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const orientation =
+	instance.getEnum('direction', {
+		vertical: 'vertical',
+		horizontal: 'horizontal',
+	}) ?? 'vertical';
+
+const detailed = instance.getEnum('type', { detailed: true, compact: false }) ?? true;
+const description = detailed ? ' description="Step description"' : '';
+
+export default {
+	example: figma.code`<DsStepper count={2} orientation="${orientation}">
+	<DsStep index={0}>
+		<DsStepContent index={0} label="Step title"${description} actions={<DsNextStepButton>Next</DsNextStepButton>} />
+	</DsStep>
+	<DsStep index={1}>
+		<DsStepContent index={1} label="Step title"${description} actions={<DsNextStepButton>Finish</DsNextStepButton>} />
+	</DsStep>
+	{/* Add a <DsStep> per step */}
+</DsStepper>`,
+	imports: ["import { DsStepper, DsStep, DsStepContent, DsNextStepButton } from '@drivenets/design-system';"],
+	id: 'ds-stepper',
+	metadata: { nestable: true },
+} satisfies figma.Template;

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

@@ -58,3 +58,4 @@ export function DsStepper({
 		</StepperContext.Provider>
 	);
 }
+DsStepper.displayName = 'DsStepper';

package/src/components/ds-system-status/ds-system-status.tsx

@@ -30,4 +30,6 @@ const DsSystemStatus: React.FC<DsSystemStatusProps> = ({ status, label, classNam
 	);
 };
 
+DsSystemStatus.displayName = 'DsSystemStatus';
+
 export default DsSystemStatus;

package/src/components/ds-table/components/ds-table-group-header-cell/index.ts

@@ -1,2 +1 @@
 export { DsTableGroupHeaderCell } from './ds-table-group-header-cell';
-export type { DsTableGroupHeaderCellProps } from './ds-table-group-header-cell.types';

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

@@ -1,8 +1,8 @@
 @use '../../../../styles/typography';
 @use '../../styles/variables' as vars;
 
-.stickyHeader {
-	background-color: var(--background);
+.header {
+	background-color: var(--background-secondary);
 }
 
 .virtualizedHeader {

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

@@ -15,12 +15,10 @@ import { DsTableGroupHeaderCell } from '../ds-table-group-header-cell';
 import { isFirstLeafColumnOfGroup } from '../../grouping';
 
 const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
-	const { stickyHeader, bordered, virtualized } = useDsTableContext<TData, unknown>();
+	const { bordered, virtualized } = useDsTableContext<TData, unknown>();
 
 	return (
-		<TableHeader
-			className={classnames(stickyHeader && styles.stickyHeader, virtualized && styles.virtualizedHeader)}
-		>
+		<TableHeader className={classnames(styles.header, virtualized && styles.virtualizedHeader)}>
 			{table.getHeaderGroups().map((headerGroup) => (
 				<TableRow
 					key={headerGroup.id}

package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-checkbox.tsx

@@ -25,3 +25,4 @@ export const DsTableEditCellCheckbox = <TData extends RowData>({
 		/>
 	);
 };
+DsTableEditCellCheckbox.displayName = 'DsTableEditCellCheckbox';

package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-date.tsx

@@ -48,3 +48,4 @@ export const DsTableEditCellDate = <TData extends RowData>({
 		</TableEditFormControl>
 	);
 };
+DsTableEditCellDate.displayName = 'DsTableEditCellDate';