@drivenets/design-system 0.15.0 → 0.17.0

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

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

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

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

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

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

package/src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.tsx

@@ -56,3 +56,4 @@ export const DsTableEditableCell = <TData, TValue>({
 		</div>
 	);
 };
+DsTableEditableCell.displayName = 'DsTableEditableCell';

package/src/components/ds-table/components/edit/ds-table-editing-cell/ds-table-editing-cell.tsx

@@ -74,3 +74,4 @@ export const DsTableEditingCell = <TData, TValue>({ cell }: DsTableEditingCellPr
 		</div>
 	);
 };
+DsTableEditingCell.displayName = 'DsTableEditingCell';

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

@@ -18,9 +18,24 @@ $bulk-actions-reserved-space: 80px;
 	border-style: solid;
 	border-color: var(--color-dap-gray-400);
 	background: var(--background);
+	display: flex;
+	flex-direction: column;
+	max-height: 100%;
+	overflow: hidden;
+}
+
+.controls {
+	background: var(--background);
+	border-bottom: 1px solid var(--border);
+	padding: var(--xs) var(--standard);
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
 }
 
 .dataTableContainer {
+	flex: 1;
+	min-height: 0;
 	max-height: 100%;
 	overflow-x: auto;
 	overflow-y: hidden;

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

@@ -52,6 +52,7 @@ const DsTable = <TData extends { id: string }, TValue>({
 	ref,
 	columns: columnsProp,
 	data: tableData,
+	controls,
 	virtualized = false,
 	virtualizedOptions,
 	className,
@@ -336,41 +337,43 @@ const DsTable = <TData extends { id: string }, TValue>({
 	return (
 		<DsTableContext.Provider value={contextValue}>
 			<div
-				ref={tableContainerRef}
-				className={classnames(
-					styles.container,
-					!virtualized && styles.dataTableContainer,
-					virtualized && styles.virtualizedContainer,
-					isBulkActionsVisible && styles.bulkActionsVisible,
-					className,
-				)}
+				className={classnames(styles.container, isBulkActionsVisible && styles.bulkActionsVisible, className)}
 			>
-				<DragWrapper>
-					<Table className={classnames(fullWidth && styles.fullWidth, !bordered && styles.tableNoBorder)}>
-						<DsTableHeader table={table} />
-						{virtualized ? (
-							<DsTableBodyVirtualized
-								table={table}
-								emptyState={emptyState}
-								estimateSize={virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize]}
-								overscan={virtualizedOptions?.overscan}
-								onScroll={onScroll}
-								rowSelection={rowSelection}
-								infiniteScroll={infiniteScroll}
-							/>
-						) : (
-							<TableBody>
-								<SortableWrapper>
-									{rows.length
-										? rows.map((row) => (
-												<DsTableRow key={row.id} row={row} isSelected={!!rowSelection[row.id]} />
-											))
-										: renderEmptyState()}
-								</SortableWrapper>
-							</TableBody>
-						)}
-					</Table>
-				</DragWrapper>
+				{controls && <div className={styles.controls}>{controls}</div>}
+				<div
+					ref={tableContainerRef}
+					className={classnames(
+						!virtualized && styles.dataTableContainer,
+						virtualized && styles.virtualizedContainer,
+					)}
+				>
+					<DragWrapper>
+						<Table className={classnames(fullWidth && styles.fullWidth, !bordered && styles.tableNoBorder)}>
+							<DsTableHeader table={table} />
+							{virtualized ? (
+								<DsTableBodyVirtualized
+									table={table}
+									emptyState={emptyState}
+									estimateSize={virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize]}
+									overscan={virtualizedOptions?.overscan}
+									onScroll={onScroll}
+									rowSelection={rowSelection}
+									infiniteScroll={infiniteScroll}
+								/>
+							) : (
+								<TableBody>
+									<SortableWrapper>
+										{rows.length
+											? rows.map((row) => (
+													<DsTableRow key={row.id} row={row} isSelected={!!rowSelection[row.id]} />
+												))
+											: renderEmptyState()}
+									</SortableWrapper>
+								</TableBody>
+							)}
+						</Table>
+					</DragWrapper>
+				</div>
 				{selectable && actions.length > 0 && (
 					<DsTableBulkActions
 						numSelectedRows={selectedRows.length}
@@ -386,4 +389,6 @@ const DsTable = <TData extends { id: string }, TValue>({
 	);
 };
 
+DsTable.displayName = 'DsTable';
+
 export default DsTable;

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

@@ -228,6 +228,12 @@ export interface DsDataTableProps<TData, TValue> {
 	 */
 	data: TData[];
 
+	/**
+	 * Optional content rendered in a pinned controls bar above the table header
+	 * (e.g. filters, action buttons). Layout is owned by the consumer.
+	 */
+	controls?: React.ReactNode;
+
 	/**
 	 * Whether the table is virtualized
 	 * @default false

package/src/components/ds-table/figma/ds-table-expandable.figma.ts

@@ -11,7 +11,7 @@ import figma from 'figma';
 
 export default {
 	example: figma.code`<DsTable columns={columns} data={data} expandable renderExpandedRow={(row) => null} />`,
-	imports: ["import { DsTable } from '@drivenets/design-system'"],
+	imports: ["import { DsTable } from '@drivenets/design-system';"],
 	id: 'ds-table-expandable',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

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

@@ -10,7 +10,7 @@ import figma from 'figma';
 
 export default {
 	example: figma.code`<DsTable columns={columns} data={data} />`,
-	imports: ["import { DsTable } from '@drivenets/design-system'"],
+	imports: ["import { DsTable } from '@drivenets/design-system';"],
 	id: 'ds-table',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-table/index.ts

@@ -10,6 +10,9 @@ export type { DsTableEditDisabledResult } from './ds-table-column.types';
 export { default as DsTable } from './ds-table';
 export * from './ds-table.types';
 
+export { createColumnHelper } from '@tanstack/react-table';
+export type { ColumnDef } from '@tanstack/react-table';
+
 export { useCellEditor } from './hooks/use-cell-editor';
 export type {
 	UseCellEditorOptions,

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

@@ -10,3 +10,5 @@ export const DsTabsContent = ({ value, className, style, children }: DsTabsConte
 		</Tabs.Content>
 	);
 };
+
+DsTabsContent.displayName = 'DsTabs.Content';

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

@@ -12,3 +12,5 @@ export const DsTabsList = ({ className, style, children }: DsTabsListProps) => {
 		</Tabs.List>
 	);
 };
+
+DsTabsList.displayName = 'DsTabs.List';

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

@@ -127,3 +127,5 @@ export const DsTabsTab = ({
 		</>
 	);
 };
+
+DsTabsTab.displayName = 'DsTabs.Tab';

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

@@ -38,6 +38,8 @@ const DsTabsRoot = ({
 	);
 };
 
+DsTabsRoot.displayName = 'DsTabs.Root';
+
 export const DsTabs = {
 	Root: DsTabsRoot,
 	List: DsTabsList,

package/src/components/ds-tabs/figma/ds-tabs-tab-vertical.figma.ts

@@ -72,7 +72,7 @@ const attrs = [`value="${value}"`, `label="${label}"`, icon ? `icon="${icon}"` :
 
 export default {
 	example: figma.code`<DsTabs.Tab ${attrs} />`,
-	imports: ["import { DsTabs } from '@drivenets/design-system'"],
+	imports: ["import { DsTabs } from '@drivenets/design-system';"],
 	id: 'ds-tabs-tab-vertical',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-tabs/figma/ds-tabs-tab.figma.ts

@@ -83,7 +83,7 @@ const attrs = [
 
 export default {
 	example: figma.code`<DsTabs.Tab ${attrs} />`,
-	imports: ["import { DsTabs } from '@drivenets/design-system'"],
+	imports: ["import { DsTabs } from '@drivenets/design-system';"],
 	id: 'ds-tabs-tab',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-tabs/figma/ds-tabs-vertical.figma.ts

@@ -25,7 +25,7 @@ export default {
 	<DsTabs.List>${tabs}</DsTabs.List>
 	{/* Add a <DsTabs.Content value="..."> panel for each tab */}
 </DsTabs.Root>`,
-	imports: ["import { DsTabs } from '@drivenets/design-system'"],
+	imports: ["import { DsTabs } from '@drivenets/design-system';"],
 	id: 'ds-tabs-vertical',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

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

@@ -23,7 +23,7 @@ export default {
 	<DsTabs.List>${tabs}</DsTabs.List>
 	{/* Add a <DsTabs.Content value="..."> panel for each tab */}
 </DsTabs.Root>`,
-	imports: ["import { DsTabs } from '@drivenets/design-system'"],
+	imports: ["import { DsTabs } from '@drivenets/design-system';"],
 	id: 'ds-tabs',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

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

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

package/src/components/ds-tag-filter/ds-tag-filter.tsx

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

package/src/components/ds-text-input/ds-input-field-v02.figma.ts

@@ -0,0 +1,87 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=39475-58722
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-text-input
+// component=DsTextInput
+import figma from 'figma';
+
+interface FieldInfo {
+	component: string;
+	fcMember?: string;
+	size?: boolean;
+	readOnly?: boolean;
+	invalid?: boolean;
+	data?: string;
+}
+
+const textInfo: FieldInfo = { component: 'DsTextInput', fcMember: 'TextInput', size: true, readOnly: true };
+
+const registry: Record<string, FieldInfo> = {
+	text: textInfo,
+	textArea: { component: 'DsTextarea', fcMember: 'Textarea' },
+	number: { component: 'DsNumberInput', fcMember: 'NumberInput', size: true, readOnly: true },
+	password: { component: 'DsPasswordInput', fcMember: 'PasswordInput', size: true, readOnly: true },
+	select: { component: 'DsSelect', fcMember: 'Select', invalid: true, data: 'options={[]} value=""' },
+	date: { component: 'DsDateInput', fcMember: 'DateInput' },
+	time: { component: 'DsTimePicker', fcMember: 'TimePicker' },
+	autocompleteSearch: {
+		component: 'DsAutocomplete',
+		invalid: true,
+		data: 'options={[]} showTrigger={false}',
+	},
+	autocompleteCombobox: { component: 'DsAutocomplete', invalid: true, data: 'options={[]}' },
+};
+
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum('size', {
+	small: 'small',
+	medium: 'medium',
+	large: 'large',
+});
+
+const state = instance.getEnum('state', {
+	default: 'default',
+	hover: 'hover',
+	focus: 'focus',
+	disabled: 'disabled',
+	'read-only': 'readOnly',
+	error: 'error',
+});
+
+const part = instance.findInstance('DAP-part_InputType_v01', { traverseInstances: true });
+const inputType =
+	(part.type === 'INSTANCE'
+		? part.getEnum('inputType', {
+				text: 'text',
+				'text-area': 'textArea',
+				select: 'select',
+				password: 'password',
+				number: 'number',
+				date: 'date',
+				time: 'time',
+				'autocomplete-search': 'autocompleteSearch',
+				'autocomplete-combobox': 'autocompleteCombobox',
+			})
+		: 'text') ?? 'text';
+
+const info = registry[inputType] ?? textInfo;
+
+const disabled = state === 'disabled';
+const readOnly = state === 'readOnly';
+const error = state === 'error';
+
+const attrs = [
+	info.size && size === 'small' ? 'size="small"' : '',
+	info.data ?? '',
+	disabled ? 'disabled' : '',
+	info.readOnly && readOnly ? 'readOnly' : '',
+	info.invalid && error ? 'invalid' : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<${info.component} ${attrs} />`,
+	imports: [`import { ${info.component} } from '@drivenets/design-system';`],
+	id: 'ds-input-field-v02',
+	metadata: { nestable: true, props: { fcMember: info.fcMember, fcProps: attrs } },
+} satisfies figma.Template;

package/src/components/ds-text-input/ds-text-input.figma.ts

@@ -54,7 +54,7 @@ export default {
 			: type === 'password'
 				? figma.code`<DsPasswordInput ${sizeAttr} ${disabled ? 'disabled' : ''} />`
 				: figma.code`<DsTextInput ${sizeAttr} ${disabled ? 'disabled' : ''} ${readOnly ? 'readOnly' : ''} />`,
-	imports: [`import { ${componentName} } from '@drivenets/design-system'`],
+	imports: [`import { ${componentName} } from '@drivenets/design-system';`],
 	id: 'ds-text-input',
 	metadata: { nestable: true, props: { fcMember, fcProps } },
-};
+} satisfies figma.Template;

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

@@ -76,4 +76,6 @@ const DsTextInput: FC<DsTextInputProps> = ({
 	);
 };
 
+DsTextInput.displayName = 'DsTextInput';
+
 export default DsTextInput;

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

@@ -46,4 +46,6 @@ const DsTextarea: React.FC<DsTextareaProps> = ({
 	);
 };
 
+DsTextarea.displayName = 'DsTextarea';
+
 export default DsTextarea;

package/src/components/ds-time-picker/ds-time-picker.figma.ts

@@ -12,7 +12,7 @@ export default {
 	example: figma.code`const [value, setValue] = useState<Date | null>(null);
 
 <DsTimePicker value={value} onChange={setValue} placeholder="hh:mm AM/PM" />`,
-	imports: ["import { useState } from 'react'", "import { DsTimePicker } from '@drivenets/design-system'"],
+	imports: ["import { DsTimePicker } from '@drivenets/design-system';", "import { useState } from 'react';"],
 	id: 'ds-time-picker',
 	metadata: { nestable: true, props: { fcMember: 'TimePicker', fcProps: '' } },
-};
+} satisfies figma.Template;

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

@@ -182,4 +182,6 @@ const DsTimePicker = (props: DsTimePickerProps) => {
 	);
 };
 
+DsTimePicker.displayName = 'DsTimePicker';
+
 export default DsTimePicker;

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

@@ -77,3 +77,4 @@ export const useToaster = (): DsToastContextType => {
 	}
 	return context;
 };
+DsToastProvider.displayName = 'DsToastProvider';

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

@@ -0,0 +1,34 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15100-3016
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-toast
+// component=DsToast
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const variant = instance.getEnum('Type', {
+	info: 'info',
+	success: 'success',
+	warning: 'warning',
+	error: 'error',
+});
+
+const extended = instance.getEnum('Extended', { True: true, False: false });
+const cta = instance.getEnum('CTA', { True: true, False: false });
+
+const titleLine = extended ? `\n\ttitle: 'Title',` : '';
+const actionsLine = cta ? `\n\tactions: <DsButtonV3 variant="secondary">Action</DsButtonV3>,` : '';
+
+export default {
+	example: figma.code`const { createToast } = useToaster();
+
+createToast({
+	variant: '${variant}',${titleLine}
+	description: 'Description',${actionsLine}
+});`,
+	imports: [
+		"import { useToaster } from '@drivenets/design-system';",
+		"import { DsButtonV3 } from '@drivenets/design-system';",
+	],
+	id: 'ds-toast',
+	metadata: { nestable: false },
+} satisfies figma.Template;

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

@@ -51,4 +51,7 @@ const DsToastGroup: React.FC<{ toaster: CreateToasterReturn }> = ({ toaster }) =
 	return <Toaster toaster={toaster}>{(toast: DsToastProps) => <DsToast {...toast} />}</Toaster>;
 };
 
+DsToast.displayName = 'DsToast';
+DsToastGroup.displayName = 'DsToastGroup';
+
 export { DsToast, DsToastGroup };

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

@@ -0,0 +1,39 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15035-29699
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-toggle
+// component=DsToggle
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const on = instance.getEnum('On', {
+	Yes: 'yes',
+	No: 'no',
+});
+
+const size = instance.getEnum('Size', {
+	Default: 'default',
+	Small: 'small',
+});
+
+const state = instance.getEnum('State', {
+	Default: 'default',
+	Hover: 'hover',
+	Focus: 'focus',
+	Disabled: 'disabled',
+});
+
+const attrs = [
+	'label="Label"',
+	size === 'small' ? 'size="small"' : '',
+	on === 'yes' ? 'checked' : '',
+	state === 'disabled' ? 'disabled' : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsToggle ${attrs} />`,
+	imports: ["import { DsToggle } from '@drivenets/design-system';"],
+	id: 'ds-toggle',
+	metadata: { nestable: true },
+} satisfies figma.Template;

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

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

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

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14845-9203
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-tooltip
+// component=DsTooltip
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const labelNode = instance.findText('Tooltip', { traverseInstances: true });
+const content = labelNode.type === 'TEXT' ? labelNode.textContent : 'Tooltip text';
+
+export default {
+	example: figma.code`<DsTooltip content="${content}">{/* trigger element */}</DsTooltip>`,
+	imports: ["import { DsTooltip } from '@drivenets/design-system';"],
+	id: 'ds-tooltip',
+	metadata: { nestable: false },
+} satisfies figma.Template;

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

@@ -1,4 +1,7 @@
+@use '../../styles/typography';
+
 .tooltip {
+	--arrow-size: 7px;
 	color: var(--font-on-action);
 	background-color: var(--background-brand);
 	padding: var(--xs) var(--sm);
@@ -8,6 +11,10 @@
 	z-index: 9999;
 }
 
+.text {
+	@include typography.body-xs-reg;
+}
+
 .arrow {
-	fill: var(--color-dap-gray-700);
+	--arrow-background: var(--color-dap-gray-700);
 }

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

@@ -1,33 +1,53 @@
 import { type FC, isValidElement } from 'react';
-import * as Tooltip from '@radix-ui/react-tooltip';
+import { Tooltip } from '@ark-ui/react/tooltip';
+import { Portal } from '@ark-ui/react/portal';
 import classNames from 'classnames';
 import styles from './ds-tooltip.module.scss';
 import type { DsTooltipProps } from './ds-tooltip.types';
-import { DsTypography } from '../ds-typography';
 
-const DsTooltip: FC<DsTooltipProps> = ({ content, children, slotProps }) => {
+const OPEN_DELAY_MS = 200;
+const CLOSE_DELAY_MS = 0;
+const TOOLTIP_GUTTER_PX = 0;
+
+const DsTooltip: FC<DsTooltipProps> = ({
+	content,
+	children,
+	placement = 'top',
+	disabled = false,
+	getAnchorRect,
+	slotProps,
+}) => {
 	if (content === undefined) {
 		return children;
 	}
+
 	return (
-		<Tooltip.Provider delayDuration={200}>
-			<Tooltip.Root>
-				<Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
-				<Tooltip.Portal>
+		<Tooltip.Root
+			openDelay={OPEN_DELAY_MS}
+			closeDelay={CLOSE_DELAY_MS}
+			disabled={disabled}
+			positioning={{ placement, gutter: TOOLTIP_GUTTER_PX, getAnchorRect: getAnchorRect ?? undefined }}
+			lazyMount
+			unmountOnExit
+		>
+			<Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
+			<Portal>
+				<Tooltip.Positioner>
 					<Tooltip.Content
 						className={classNames(styles.tooltip, slotProps?.content?.className)}
 						style={slotProps?.content?.style}
-						side="top"
-						align="center"
-						sideOffset={4}
 					>
-						{isValidElement(content) ? content : <DsTypography variant="body-xs-reg">{content}</DsTypography>}
-						<Tooltip.Arrow className={styles.arrow} />
+						{isValidElement(content) ? content : <span className={styles.text}>{content}</span>}
+						<Tooltip.Arrow className={styles.arrow}>
+							<Tooltip.ArrowTip />
+						</Tooltip.Arrow>
 					</Tooltip.Content>
-				</Tooltip.Portal>
-			</Tooltip.Root>
-		</Tooltip.Provider>
+				</Tooltip.Positioner>
+			</Portal>
+		</Tooltip.Root>
 	);
 };
 
+DsTooltip.displayName = 'DsTooltip';
+
 export default DsTooltip;