@drivenets/design-system 0.18.0 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -36,19 +36,19 @@
     "directory": "/packages/design-system"
   },
   "dependencies": {
-    "@ark-ui/react": "^5.37.2",
+    "@ark-ui/react": "^5.38.2",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@radix-ui/react-collapsible": "^1.1.17",
-    "@radix-ui/react-dialog": "^1.1.20",
-    "@radix-ui/react-dropdown-menu": "^2.1.21",
-    "@radix-ui/react-visually-hidden": "^1.2.8",
+    "@radix-ui/react-collapsible": "^1.1.20",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-visually-hidden": "^1.2.11",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.14.6",
-    "@zag-js/react": "^1.42.0",
-    "@zag-js/steps": "^1.42.0",
+    "@tanstack/react-virtual": "^3.14.10",
+    "@zag-js/react": "^1.43.3",
+    "@zag-js/steps": "^1.43.3",
     "classnames": "^2.5.1",
     "csstype": "^3.2.3"
   },
@@ -59,8 +59,8 @@
     "react-dom": "^19"
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "^0.18.2",
-    "@eslint/compat": "^2.1.0",
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@eslint/compat": "^2.1.1",
     "@faker-js/faker": "^10.5.0",
     "@figma/code-connect": "^1.4.9",
     "@github-ui/storybook-addon-performance-panel": "^1.1.4",
@@ -87,10 +87,10 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-storybook": "^10.5.0",
+    "eslint-plugin-storybook": "^10.6.0",
     "mockdate": "^3.0.5",
     "playwright": "^1.62.0",
-    "publint": "^0.3.22",
+    "publint": "^0.3.24",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-hook-form": "^7.83.0",

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

@@ -0,0 +1,38 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=40935-37071
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-bot-button
+// component=DsBotButton
+//
+// Figma models the six looks as one `state` enum; the code API is the three booleans it implies,
+// since hover and focus belong to the browser. The label is read off the instance and emitted
+// through `locale` only when it has drifted from the fixed bot name.
+//
+// The nested `Part_ButtonStructureV2` props Dev Mode lists are deliberately not mapped: `size`,
+// `icon-only` and `high-emphasis` are constants handed to `DsButtonV3`, and the icon/dropdown
+// slots are internals of a part whose own description calls it "not for standalone use".
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state = instance.getEnum('state', {
+	default: 'default',
+	hover: 'default',
+	focus: 'default',
+	selected: 'selected',
+	disabled: 'disabled',
+	isLoading: 'isLoading',
+});
+
+const selectedProp = state === 'selected' ? ' selected' : '';
+const disabledProp = state === 'disabled' ? ' disabled' : '';
+const loadingProp = state === 'isLoading' ? ' loading' : '';
+
+const labelNode = instance.findText('NetGen', { traverseInstances: true });
+const label = labelNode.type === 'TEXT' ? labelNode.textContent : 'NetGen';
+const localeProp = label === 'NetGen' ? '' : ` locale={{ label: '${label}' }}`;
+
+export default {
+	example: figma.code`<DsBotButton${selectedProp}${disabledProp}${loadingProp}${localeProp} />`,
+	imports: ["import { DsBotButton } from '@drivenets/design-system';"],
+	id: 'ds-bot-button',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-bot-button/ds-bot-button.module.scss

@@ -0,0 +1,41 @@
+// Overrides have to match `DsButtonV3`'s own `[data-color][data-variant]` selectors to outweigh them.
+
+.root {
+	--ds-bot-button-mark-size: 16px;
+}
+
+// Figma binds the border to the `--blue-grad-2` gradient stop; no semantic border token carries
+// that hue. Focus-visible and disabled keep `DsButtonV3`'s borders.
+.root[data-variant='primary-subtle']:not(:focus-visible):not(:disabled),
+.root[data-variant='primary-subtle']:not(:focus-visible)[data-loading] {
+	border-color: var(--blue-grad-2);
+}
+
+// `DsSpinner` sizes itself to `1em`, so the root font size is what keeps the loading spinner the
+// same size as the mark it replaces.
+.root[data-variant='primary-subtle'][data-size='small'] {
+	font-size: var(--ds-bot-button-mark-size);
+}
+
+.mark {
+	display: flex;
+	flex-shrink: 0;
+	width: var(--ds-bot-button-mark-size);
+	height: var(--ds-bot-button-mark-size);
+}
+
+.label {
+	font-family: var(--font-family-heading);
+	font-size: var(--body-font-size-xs);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--body-line-height-xs);
+	white-space: nowrap;
+
+	// `DsButtonV3` tints `primary-subtle` text with `--font-action`; the bot's name is body text.
+	color: var(--font-main);
+}
+
+// Mirrors `DsButtonV3`'s own `:disabled:not([data-loading])` condition.
+.root:disabled:not([data-loading]) .label {
+	color: var(--font-disabled);
+}

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

@@ -0,0 +1,48 @@
+import classNames from 'classnames';
+import styles from './ds-bot-button.module.scss';
+import type { DsBotButtonProps } from './ds-bot-button.types';
+import { NetGenLogo } from './net-gen-logo';
+import { DsButtonV3 } from '../ds-button-v3';
+
+const DEFAULT_LOCALE = Object.freeze({ label: 'NetGen' });
+
+/**
+ * Launcher for the NetGen AI companion
+ */
+const DsBotButton = ({
+	ref,
+	className,
+	selected = false,
+	loading = false,
+	disabled = false,
+	locale,
+	...rest
+}: DsBotButtonProps) => {
+	const label = locale?.label ?? DEFAULT_LOCALE.label;
+
+	return (
+		<DsButtonV3
+			ref={ref}
+			variant="primary-subtle"
+			size="small"
+			highEmphasis
+			selected={selected}
+			loading={loading}
+			disabled={disabled}
+			className={classNames(styles.root, className)}
+			{...rest}
+		>
+			{/* `DsButtonV3` renders its own spinner in the leading slot while loading. */}
+			{!loading && (
+				<span className={styles.mark}>
+					<NetGenLogo tone={disabled ? 'greyscale' : 'color'} />
+				</span>
+			)}
+			<span className={styles.label}>{label}</span>
+		</DsButtonV3>
+	);
+};
+
+DsBotButton.displayName = 'DsBotButton';
+
+export default DsBotButton;

package/src/components/ds-bot-button/ds-bot-button.types.ts

@@ -0,0 +1,33 @@
+import type { ButtonHTMLAttributes, Ref } from 'react';
+
+/** `color` is dropped with `children`: content is fixed branding and the palette is the preset's. */
+export interface DsBotButtonProps extends Omit<
+	ButtonHTMLAttributes<HTMLButtonElement>,
+	'children' | 'color'
+> {
+	ref?: Ref<HTMLButtonElement>;
+
+	/**
+	 * Pressed look for while the bot panel is open. Report the panel's open state here so the
+	 * button and the panel cannot disagree.
+	 * @default false
+	 */
+	selected?: boolean;
+
+	/**
+	 * Swaps the logo for a spinner and blocks interaction while the bot starts up or answers.
+	 * Composes with `selected`: a panel that is open while the bot answers keeps the pressed look
+	 * under the spinner. `disabled` overrides both.
+	 * @default false
+	 */
+	loading?: boolean;
+
+	locale?: {
+		/**
+		 * Visible label and the button's accessible name. The bot's name is fixed branding —
+		 * override it only to translate it, never to repurpose the button.
+		 * @default 'NetGen'
+		 */
+		label?: string;
+	};
+}

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

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

package/src/components/ds-bot-button/net-gen-logo.tsx

@@ -0,0 +1,46 @@
+import type { FC, SVGProps } from 'react';
+
+type NetGenLogoTone = 'color' | 'greyscale';
+
+interface NetGenLogoProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+	tone?: NetGenLogoTone;
+}
+
+/**
+ * NetGen brand mark from Figma `DapNetGenLogoV1`. Both stops are fixed brand tokens — the mark is
+ * never recolored, so it takes a `tone` rather than `currentColor`.
+ *
+ * Private to `DsBotButton`; promote it to its own `ds-*` component once another NetGen surface
+ * (panel header, onboarding, empty state) needs it.
+ *
+ * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=31155-54754
+ */
+export const NetGenLogo: FC<NetGenLogoProps> = ({ tone = 'color', ...props }) => {
+	const light = tone === 'color' ? 'var(--net-gen-logo-dodger-blue)' : 'var(--net-gen-logo-light-grey)';
+	const dark = tone === 'color' ? 'var(--net-gen-logo-ultramarine-blue)' : 'var(--net-gen-logo-dark-grey)';
+
+	return (
+		<svg
+			viewBox="0 0 48 48"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-hidden
+			focusable="false"
+			{...props}
+		>
+			{/* Figma centers the 38x42 mark in a 48x48 box; the translate keeps that padding. */}
+			<g transform="translate(5 3)">
+				<path
+					d="M25.9488 0C32.6087 0.000155233 38 5.42946 38 12.1166C37.9999 14.9274 37.0454 17.5138 35.4473 19.5689C32.6256 17.7276 29.2073 18.1106 20.6082 20.8684L29.9215 4.38066H28.9932C27.8806 5.59416 7.31397 28.1298 0.695319 18.4532C0.248329 17.3609 3.11481e-05 16.1654 0 14.9119C0.000131791 9.76874 4.14676 5.5914 9.27141 5.59122L9.50735 5.59489C11.4997 5.64494 13.3363 6.32745 14.8251 7.44859C16.6422 3.07692 20.9356 0.000118632 25.9488 0Z"
+					fill={light}
+				/>
+				<path
+					d="M7.85784 37.3463C11.933 32.4313 32.3987 15.5201 36.9093 22.5582C37.6042 23.8656 38 25.3583 38 26.9432C37.9998 32.0863 33.8527 36.2629 28.728 36.263L28.4928 36.26C26.5005 36.21 24.6639 35.5275 23.1751 34.4064C21.3581 38.778 17.0642 41.8548 12.051 41.8548C5.39126 41.8546 2.87107e-06 36.4254 0 29.7384C2.89199e-05 26.649 1.15215 23.8298 3.04582 21.6902C7.17136 24.1138 11.4572 23.3273 16.494 21.6483L6.92586 37.3463H7.85784Z"
+					fill={dark}
+				/>
+			</g>
+		</svg>
+	);
+};
+
+NetGenLogo.displayName = 'NetGenLogo';

package/src/components/ds-bulk-actions/components/action-button.tsx

@@ -0,0 +1,42 @@
+import type { ButtonHTMLAttributes, Ref } from 'react';
+import classnames from 'classnames';
+import styles from '../ds-bulk-actions.module.scss';
+import type { ItemWidthLayout } from '../ds-bulk-actions.utils';
+import { DsIcon, type IconType } from '../../ds-icon';
+import { DsTypography } from '../../ds-typography';
+
+export interface ActionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+	icon: IconType;
+	label: string;
+	itemWidth?: ItemWidthLayout['mode'];
+	ref?: Ref<HTMLButtonElement>;
+}
+
+export const ActionButton = ({
+	icon,
+	label,
+	onClick,
+	disabled,
+	className,
+	style,
+	itemWidth = 'fixed',
+	ref,
+	...rest
+}: ActionButtonProps) => (
+	<button
+		className={classnames(styles.actionButton, className)}
+		style={style}
+		onClick={onClick}
+		disabled={disabled}
+		aria-label={label}
+		data-item-width={itemWidth}
+		{...rest}
+		type="button"
+		ref={ref}
+	>
+		<DsIcon icon={icon} size="small" />
+		<DsTypography variant="body-xs-md" className={styles.actionLabel}>
+			{label}
+		</DsTypography>
+	</button>
+);

package/src/components/ds-bulk-actions/components/menu-entries.tsx

@@ -0,0 +1,76 @@
+import type { CSSProperties } from 'react';
+import styles from '../ds-bulk-actions.module.scss';
+import type { DsBulkActionsMenuEntry } from '../ds-bulk-actions.types';
+import { isSubmenuEntry, type ItemWidthLayout } from '../ds-bulk-actions.utils';
+import { ActionButton } from './action-button';
+import { DsDropdownMenu } from '../../ds-dropdown-menu';
+import { DsIcon, type IconType } from '../../ds-icon';
+import { DsTooltip } from '../../ds-tooltip';
+
+const SUBMENU_PLACEMENT = 'right-start' as const;
+
+const MenuEntryLabel = ({ icon, label }: { icon?: IconType; label: string }) => (
+	<>
+		{icon ? <DsIcon icon={icon} /> : null}
+		<span>{label}</span>
+	</>
+);
+
+export const MenuEntries = ({ entries }: { entries: DsBulkActionsMenuEntry[] }) => (
+	<>
+		{entries.map((entry) => {
+			if (isSubmenuEntry(entry) && entry.menu.length > 0 && !entry.disabled) {
+				return (
+					<DsDropdownMenu.Root key={entry.value} positioning={{ placement: SUBMENU_PLACEMENT }}>
+						<DsDropdownMenu.TriggerItem>
+							<MenuEntryLabel icon={entry.icon} label={entry.label} />
+						</DsDropdownMenu.TriggerItem>
+						<DsDropdownMenu.Content>
+							<MenuEntries entries={entry.menu} />
+						</DsDropdownMenu.Content>
+					</DsDropdownMenu.Root>
+				);
+			}
+
+			return (
+				<DsDropdownMenu.Item
+					key={entry.value}
+					value={entry.value}
+					disabled={entry.disabled}
+					variant={entry.variant}
+					onSelect={'onSelect' in entry ? entry.onSelect : undefined}
+				>
+					<MenuEntryLabel icon={entry.icon} label={entry.label} />
+				</DsDropdownMenu.Item>
+			);
+		})}
+	</>
+);
+
+export const TooltipMenuTrigger = ({
+	icon,
+	label,
+	disabled,
+	itemWidth,
+	buttonStyle,
+}: {
+	icon: IconType;
+	label: string;
+	disabled?: boolean;
+	itemWidth: ItemWidthLayout['mode'];
+	buttonStyle?: CSSProperties;
+}) => (
+	<DsTooltip content={label}>
+		<span className={styles.menuTriggerAnchor}>
+			<DsDropdownMenu.Trigger asChild>
+				<ActionButton
+					icon={icon}
+					label={label}
+					disabled={disabled}
+					itemWidth={itemWidth}
+					style={buttonStyle}
+				/>
+			</DsDropdownMenu.Trigger>
+		</span>
+	</DsTooltip>
+);

package/src/components/ds-bulk-actions/components/overflow.tsx

@@ -0,0 +1,75 @@
+import type { ReactElement, RefObject } from 'react';
+import styles from '../ds-bulk-actions.module.scss';
+import type {
+	BulkActionsMenuPlacement,
+	DsBulkActionsItemProps,
+	DsBulkActionsMenuEntry,
+} from '../ds-bulk-actions.types';
+import { resolveItemWidth } from '../ds-bulk-actions.utils';
+import { ActionButton } from './action-button';
+import { MenuEntries, TooltipMenuTrigger } from './menu-entries';
+import { DsDropdownMenu } from '../../ds-dropdown-menu';
+import { DsTypography } from '../../ds-typography';
+
+export const OverflowMore = ({
+	label,
+	menuPlacement,
+	entries,
+}: {
+	label: string;
+	menuPlacement: BulkActionsMenuPlacement;
+	entries: DsBulkActionsMenuEntry[];
+}) => (
+	<div className={styles.actionItem}>
+		<DsDropdownMenu.Root positioning={{ placement: menuPlacement }}>
+			<TooltipMenuTrigger icon="more_horiz" label={label} itemWidth="fixed" />
+			<DsDropdownMenu.Content>
+				<MenuEntries entries={entries} />
+			</DsDropdownMenu.Content>
+		</DsDropdownMenu.Root>
+	</div>
+);
+
+export const OverflowMeasure = ({
+	items,
+	moreActionsLabel,
+	itemsSelectedLabel,
+	measureRef,
+}: {
+	items: ReactElement<DsBulkActionsItemProps>[];
+	moreActionsLabel: string;
+	itemsSelectedLabel: string;
+	measureRef: RefObject<HTMLDivElement | null>;
+}) => (
+	<div ref={measureRef} className={styles.measurementContainer} aria-hidden="true">
+		{items.map((item, index) => {
+			const { mode, buttonStyle } = resolveItemWidth(item.props.width);
+
+			return (
+				<div
+					key={item.key ?? `measure-${String(index)}`}
+					data-overflow-measure="item"
+					data-item-width={mode}
+					className={styles.actionItem}
+					style={item.props.style}
+				>
+					<ActionButton
+						icon={item.props.icon}
+						label={item.props.label}
+						tabIndex={-1}
+						itemWidth={mode}
+						style={buttonStyle}
+					/>
+				</div>
+			);
+		})}
+		<div data-overflow-measure="more" className={styles.actionItem}>
+			<ActionButton icon="more_horiz" label={moreActionsLabel} tabIndex={-1} />
+		</div>
+		<div data-overflow-measure="label">
+			<DsTypography variant="body-md-semi-bold" className={styles.bulkActionsInfo}>
+				{itemsSelectedLabel}
+			</DsTypography>
+		</div>
+	</div>
+);

package/src/components/ds-bulk-actions/ds-bulk-actions.figma.ts

@@ -0,0 +1,28 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=34851-93874
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-bulk-actions
+// component=DsBulkActions
+//
+// `DsBulkActionsV2` is the floating toolbar shown when one or more table/tree rows are
+// multi-selected. The Figma component exposes no properties, and each action in the
+// "Action buttons slot" is a placeholder `Part_ActionBtnItemV2` with no click/menu
+// semantics — so this is a representative usage of the compound `Item` API rather than
+// a slot mapping.
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsBulkActions
+	selectedCount={3}
+	onClearSelection={() => {}}
+>
+	<DsBulkActions.Item icon="alarm" label="Notify" onClick={() => {}} />
+	<DsBulkActions.Item
+		icon="share"
+		label="Share"
+		menu={[{ value: 'email', label: 'Email', onSelect: () => {} }]}
+	/>
+	<DsBulkActions.Item icon="delete_outline" label="Delete" onClick={() => {}} />
+</DsBulkActions>`,
+	imports: ["import { DsBulkActions } from '@drivenets/design-system';"],
+	id: 'ds-bulk-actions',
+	metadata: { nestable: false },
+} satisfies figma.Template;