@drivenets/design-system 0.12.1 → 0.13.0

package/src/components/ds-table/filters/types/filter-adapter.types.ts

@@ -1,117 +1,84 @@
 import type { ReactNode } from 'react';
 import type { Row } from '@tanstack/react-table';
-import type { ChipItem } from '../../../ds-chip-group';
+import type { TagFilterItem } from '../../../ds-tag-filter';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AnyAdapter = FilterAdapter<any, any, any>;
 
 /**
- * Base filter adapter interface that all filters must implement
- * This provides a consistent contract for filter behavior
- *
- * @template TData - The row data type
- * @template TFilterValue - The filter state value type
- * @template TCellValue - The actual cell value type from the table (defaults to unknown)
+ * Contract every filter implements. `TData` is the row type, `TFilterValue`
+ * the adapter's state, `TCellValue` the cell value returned by the column.
  */
 export interface FilterAdapter<TData, TFilterValue, TCellValue = unknown> {
-	/**
-	 * Unique identifier for the filter (should match column accessorKey)
-	 */
+	/** Unique id, should match the column `accessorKey`. */
 	id: string;
-
-	/**
-	 * Display label for the filter in the navigation
-	 */
+	/** Display label used in the filter navigation. */
 	label: string;
-
-	/**
-	 * Initial/default value for the filter state
-	 */
+	/** Initial / reset value. */
 	initialValue: TFilterValue;
-
-	/**
-	 * TanStack Table filter function
-	 * Determines if a row matches the current filter value
-	 */
+	/** TanStack `filterFn` — returns whether a row matches the current value. */
 	columnFilterFn: (row: Row<TData>, columnId: string, filterValue: TFilterValue) => boolean;
-
-	/**
-	 * Optional custom cell renderer for the table column
-	 * Receives the actual cell value from the table, not the filter value
-	 * If not provided, default rendering will be used
-	 */
+	/** Optional cell renderer; receives the cell value, not the filter value. */
 	cellRenderer?: (value: TCellValue) => ReactNode;
-
-	/**
-	 * Convert filter value to filter chips for display
-	 * Returns empty array if no chips should be shown
-	 */
-	toChips: (value: TFilterValue) => ChipItem[];
-
-	/**
-	 * Remove a chip from the filter value
-	 * Returns updated filter value with the chip's effect removed
-	 */
-	fromChip: (chip: ChipItem, currentValue: TFilterValue) => TFilterValue;
-
 	/**
-	 * Calculate how many active filters are applied
-	 * Used for the count indicator in filter navigation
-	 * Can also be used to check if filter is active (count > 0)
+	 * Convert the filter value into chips for `DsTagFilter`. Each chip's
+	 * `metadata.key` / `metadata.value` must let `fromChip` undo it.
 	 */
+	toChips: (value: TFilterValue) => TagFilterItem[];
+	/** Remove a chip's effect from the current value. */
+	fromChip: (chip: TagFilterItem, currentValue: TFilterValue) => TFilterValue;
+	/** Number of active sub-filters; `0` means the filter is inactive. */
 	getActiveFiltersCount: (value: TFilterValue) => number;
-
-	/**
-	 * Reset filter to initial state
-	 */
+	/** Return the initial value. */
 	reset: () => TFilterValue;
-
-	/**
-	 * Render the filter UI component
-	 * Receives current value and onChange callback
-	 */
+	/** Render the filter UI for a given value + onChange. */
 	renderFilter: (value: TFilterValue, onChange: (value: TFilterValue) => void) => ReactNode;
 }
 
-/**
- * Filter navigation item used to render filter tabs in the UI
- */
 export interface FilterNavItem {
-	/**
-	 * Unique identifier for the filter (matches FilterAdapter.id)
-	 */
+	/** Matches `FilterAdapter.id`. */
 	id: string;
-	/**
-	 * Display label for the filter tab
-	 */
 	label: string;
-	/**
-	 * Optional count badge to display active filters
-	 */
+	/** Active filter count badge. */
 	count?: number;
-	/**
-	 * Whether this filter is disabled
-	 */
 	disabled?: boolean;
 }
 
-/**
- * Filter state managed by useTableFilters hook
- */
+/** Map of filter id → adapter value. */
 export interface FilterState<TValue> {
 	[filterId: string]: TValue;
 }
 
-/**
- * Column filter for TanStack Table
- */
 export interface ColumnFilterState<TValue> {
-	/**
-	 * Column identifier this filter applies to (matches the column `accessorKey`).
-	 */
+	/** Column id (matches the column `accessorKey`). */
 	id: string;
-	/**
-	 * Current filter value, passed to the column's filter function.
-	 */
+	/** Value passed to the column's filter function. */
 	value: TValue;
 }
+
+/**
+ * Set by the consumer on `column.meta.filter` to opt a column into the
+ * per-column filter popover. Provide an `adapter` inline or just `adapterId`
+ * to resolve against `useTableFilters({ filterAdapters })`.
+ */
+export interface ColumnFilterMeta {
+	/** Mutually exclusive with `adapterId`. */
+	adapter?: AnyAdapter;
+	/** Mutually exclusive with `adapter`. */
+	adapterId?: string;
+}
+
+/**
+ * What `useTableFilters` injects onto `column.meta.filter` of each enhanced
+ * column. Consumers don't build this — they set `ColumnFilterMeta` and the
+ * hook swaps it for this resolved shape on `enhancedColumns`.
+ */
+export interface ResolvedColumnFilter {
+	filterId: string;
+	hasActiveFilter: boolean;
+	/** Renders the adapter's filter UI for this column. */
+	render: () => ReactNode;
+	onApply: () => void;
+	onClear: () => void;
+	onCancel: () => void;
+}

package/src/components/ds-table/hooks/use-cell-editor.ts

@@ -0,0 +1,81 @@
+import { type KeyboardEventHandler, type MouseEvent, type MouseEventHandler } from 'react';
+import type { CellContext, RowData } from '@tanstack/react-table';
+import { useDsTableContext } from '../context/ds-table-context';
+
+export interface UseCellEditorOptions<TData extends RowData, TValue> {
+	/**
+	 * The TanStack Table CellContext for this cell. Pass through
+	 * the argument received in `ColumnDef.editCell`.
+	 */
+	cellContext: CellContext<TData, TValue>;
+}
+
+export interface UseCellEditorContainerProps {
+	onKeyDown: KeyboardEventHandler<HTMLElement>;
+	onClick: MouseEventHandler;
+	onDoubleClick: MouseEventHandler;
+}
+
+export interface UseCellEditorResult<TValue> {
+	/** The in-progress draft value for the active editor. */
+	value: TValue;
+	/** Validation error from the most recent commit attempt, if any. */
+	error: string | null;
+	/** Update the in-progress draft value. */
+	setValue: (value: TValue) => void;
+	/** Validate and commit the draft. */
+	commit: (overrideValue?: TValue) => void;
+	/** Discard the draft and exit edit mode. */
+	cancel: () => void;
+	/** Stop mouse events from triggering row-level handlers. */
+	stopPropagation: (event: MouseEvent) => void;
+	/** Spread on the custom `editCell` root for pointer isolation from row handlers. */
+	editorContainerProps: UseCellEditorContainerProps;
+}
+
+/**
+ * Wires a TanStack Table `editCell` renderer into DsTable's hoisted editing state.
+ * Only mount this hook inside `ColumnDef.editCell` — the table cell layer handles
+ * entering edit mode on double-click.
+ */
+export const useCellEditor = <TData extends RowData, TValue>({
+	cellContext,
+}: UseCellEditorOptions<TData, TValue>): UseCellEditorResult<TValue> => {
+	const ctx = useDsTableContext<TData, TValue>();
+	const { row, column, getValue } = cellContext;
+
+	const isActiveCell =
+		ctx.editing !== null && ctx.editing.cell.row.id === row.id && ctx.editing.cell.column.id === column.id;
+	const value = isActiveCell && ctx.editing ? ctx.editing.draftValue : getValue();
+	const error = isActiveCell && ctx.editing ? ctx.editing.error : null;
+
+	const setValue = (next: TValue) => {
+		ctx.setDraft(next);
+	};
+
+	const commit = (overrideValue?: TValue) => {
+		ctx.commit(overrideValue);
+	};
+
+	const cancel = () => {
+		ctx.cancel();
+	};
+
+	const stopPropagation = (event: MouseEvent) => {
+		event.stopPropagation();
+	};
+
+	return {
+		value,
+		error,
+		setValue,
+		commit,
+		cancel,
+		stopPropagation,
+		editorContainerProps: {
+			onKeyDown: () => {},
+			onClick: stopPropagation,
+			onDoubleClick: stopPropagation,
+		},
+	};
+};

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

@@ -5,3 +5,32 @@ export * from './filters';
 
 export { default as DsTable } from './ds-table';
 export * from './ds-table.types';
+
+export { useCellEditor } from './hooks/use-cell-editor';
+export type {
+	UseCellEditorOptions,
+	UseCellEditorResult,
+	UseCellEditorContainerProps,
+} from './hooks/use-cell-editor';
+
+export { DsTableEditableCell } from './components/edit/ds-table-editable-cell';
+export type { DsTableEditableCellProps } from './components/edit/ds-table-editable-cell';
+
+export { DsTableEditingCell } from './components/edit/ds-table-editing-cell';
+export type { DsTableEditingCellProps } from './components/edit/ds-table-editing-cell';
+
+export {
+	DsTableEditCellText,
+	DsTableEditCellNumber,
+	DsTableEditCellSelect,
+	DsTableEditCellDate,
+	DsTableEditCellCheckbox,
+} from './components/edit/cell-editors';
+export type {
+	DsTableEditCellTextProps,
+	DsTableEditCellNumberProps,
+	DsTableEditCellSelectProps,
+	DsTableEditCellDateProps,
+	DsTableEditCellDateValue,
+	DsTableEditCellCheckboxProps,
+} from './components/edit/cell-editors';

package/src/components/ds-table/utils/column-size.ts

@@ -2,19 +2,20 @@ import type { CSSProperties } from 'react';
 import { defaultColumnSizing } from '@tanstack/react-table';
 
 /**
- * Generates the appropriate style object for a table column/cell based on its size and virtualization state
+ * Generates the appropriate style object for a table column/cell based on its size
+ *
+ * Custom-sized columns get a fixed `width` plus `minWidth` and `flexShrink: 0` so
+ * they enforce horizontal overflow on the table container. Default-sized columns
+ * grow to fill the row evenly via `flex: 1`.
  *
  * @param columnSize - The size of the column
- * @param virtualized - Whether the table is virtualized
- * @returns Style object or undefined if no custom styling is needed
+ * @returns Style object for the column/cell
  */
-export const getColumnSizeStyle = (columnSize: number, virtualized?: boolean): CSSProperties | undefined => {
+export const getColumnSizeStyle = (columnSize: number): CSSProperties => {
 	const hasCustomSize = columnSize !== defaultColumnSizing.size;
 	if (hasCustomSize) {
-		return { width: columnSize };
+		return { width: columnSize, minWidth: columnSize, flexShrink: 0 };
 	}
 
-	if (virtualized) {
-		return { flex: 1 };
-	}
+	return { flex: 1, minWidth: 0 };
 };

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

@@ -43,7 +43,7 @@ const DsTag = ({
 	const handleKeyDownTag = (event: KeyboardEvent<HTMLElement>) => {
 		if (onClick && (event.key === 'Enter' || event.key === ' ')) {
 			event.preventDefault();
-			onClick(event as KeyboardEvent<HTMLDivElement>);
+			onClick(event);
 
 			return;
 		}
@@ -66,7 +66,7 @@ const DsTag = ({
 	const handleClick = (event: MouseEvent<HTMLElement>) => {
 		if (onClick) {
 			event.preventDefault();
-			onClick(event as MouseEvent<HTMLDivElement>);
+			onClick(event);
 		}
 	};
 

package/src/components/ds-workspace-layout/ds-workspace-layout.context.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+
+export interface DsWorkspaceLayoutContextValue {
+	hasLeftSidePanel: boolean;
+	registerLeftSidePanel: () => void;
+	unregisterLeftSidePanel: () => void;
+}
+
+export const DsWorkspaceLayoutContext = createContext<DsWorkspaceLayoutContextValue | null>(null);
+
+export const useDsWorkspaceLayoutContext = () => {
+	const context = useContext(DsWorkspaceLayoutContext);
+
+	if (!context) {
+		throw new Error('DsWorkspaceLayout compound components must be used within DsWorkspaceLayout');
+	}
+
+	return context;
+};

package/src/components/ds-workspace-layout/ds-workspace-layout.module.scss

@@ -0,0 +1,166 @@
+.root {
+	--ds-workspace-layout-header-height: 54px;
+	--ds-workspace-layout-header-gradient: radial-gradient(
+		ellipse at left bottom,
+		rgba(1, 75, 253, 1) 0%,
+		rgba(10, 60, 194, 1) 78%,
+		rgba(16, 51, 160, 1) 89%,
+		rgba(21, 42, 126, 1) 100%
+	);
+	--ds-workspace-layout-side-menu-collapsed-width: 60px;
+	--ds-workspace-layout-side-menu-expanded-width: 256px;
+	--ds-workspace-layout-side-menu-padding-top: 28px;
+	--ds-workspace-layout-side-menu-padding-x: 10px;
+	--ds-workspace-layout-content-margin-y: var(--lg);
+	--ds-workspace-layout-content-gap: var(--standard);
+	--ds-workspace-layout-content-margin-x: 40px;
+	--ds-workspace-layout-content-margin-x-with-left-panel: var(--lg);
+
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+	overflow: hidden;
+	background: var(--background);
+}
+
+.fillParent {
+	height: 100%;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	height: var(--ds-workspace-layout-header-height);
+	padding: 0 var(--sm) 0 var(--lg);
+	background: var(--ds-workspace-layout-header-gradient);
+	color: var(--font-on-action);
+	overflow: clip;
+}
+
+.subHeader {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	padding: var(--xs) var(--standard);
+	border-bottom: 1px solid var(--border);
+	background: var(--background);
+}
+
+.content {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	gap: var(--ds-workspace-layout-content-gap);
+	min-width: 0;
+	min-height: 0;
+	position: relative;
+	padding: var(--ds-workspace-layout-content-margin-y) var(--ds-workspace-layout-content-margin-x);
+	overflow: auto;
+}
+
+.contentWithLeftPanel {
+	padding-inline: var(--ds-workspace-layout-content-margin-x-with-left-panel);
+}
+
+.footer {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	padding: var(--xs) var(--standard);
+	border-top: 1px solid var(--border);
+	background: var(--background);
+}
+
+.body {
+	display: flex;
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+}
+
+.sideMenu {
+	position: relative;
+	flex-shrink: 0;
+	min-width: 0;
+	height: 100%;
+	width: var(--ds-workspace-layout-side-menu-collapsed-width);
+	z-index: 100;
+
+	&[data-pinned] {
+		width: var(--ds-workspace-layout-side-menu-expanded-width);
+	}
+}
+
+.sideMenuPanel {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	gap: var(--xs);
+	height: 100%;
+	width: var(--ds-workspace-layout-side-menu-collapsed-width);
+	padding: var(--ds-workspace-layout-side-menu-padding-top) var(--ds-workspace-layout-side-menu-padding-x) 0;
+	overflow: hidden;
+	border-inline-end: 1px solid var(--border);
+	background: var(--background);
+	transition: width 0.2s;
+}
+
+.sideMenu[data-expanded] .sideMenuPanel {
+	width: var(--ds-workspace-layout-side-menu-expanded-width);
+}
+
+.sideMenu[data-expanded]:not([data-pinned]) .sideMenuPanel {
+	box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
+}
+
+.sideMenuPinButton {
+	position: absolute;
+	top: var(--xs);
+	inset-inline-end: var(--xs);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+	padding: 0;
+	border: none;
+	border-radius: var(--3xs);
+	background: transparent;
+	cursor: pointer;
+	color: var(--font-secondary);
+	opacity: 0;
+	visibility: hidden;
+	transition:
+		opacity 0.2s,
+		visibility 0.2s,
+		background-color 0.2s,
+		color 0.2s;
+
+	&:hover {
+		background: var(--background-action-tertiary-hover);
+		color: var(--font-action);
+	}
+
+	&[aria-pressed='true'] {
+		color: var(--font-action);
+	}
+
+	&:focus-visible {
+		outline: 2px solid var(--background-action);
+		outline-offset: 2px;
+	}
+}
+
+.sideMenu[data-expanded] .sideMenuPinButton {
+	opacity: 1;
+	visibility: visible;
+}
+
+.leftPanel {
+	display: flex;
+	flex-shrink: 0;
+	flex-direction: column;
+	min-height: 0;
+	height: 100%;
+}

package/src/components/ds-workspace-layout/ds-workspace-layout.tsx

@@ -0,0 +1,135 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import styles from './ds-workspace-layout.module.scss';
+import { DsWorkspaceLayoutContext, useDsWorkspaceLayoutContext } from './ds-workspace-layout.context';
+import { DsIcon } from '../ds-icon';
+import type {
+	DsWorkspaceLayoutProps,
+	DsWorkspaceLayoutHeaderProps,
+	DsWorkspaceLayoutSubHeaderProps,
+	DsWorkspaceLayoutContentProps,
+	DsWorkspaceLayoutFooterProps,
+	DsWorkspaceLayoutBodyProps,
+	DsWorkspaceLayoutSideMenuProps,
+	DsWorkspaceLayoutLeftPanelProps,
+} from './ds-workspace-layout.types';
+
+const DEFAULT_LOCALE = Object.freeze({
+	pinButtonLabel: 'Pin side menu',
+	unpinButtonLabel: 'Unpin side menu',
+});
+
+const DsWorkspaceLayout = ({ className, fillParent = false, ...rest }: DsWorkspaceLayoutProps) => {
+	const [hasLeftSidePanel, setHasLeftSidePanel] = useState(false);
+
+	const registerLeftSidePanel = useCallback(() => setHasLeftSidePanel(true), []);
+	const unregisterLeftSidePanel = useCallback(() => setHasLeftSidePanel(false), []);
+
+	const contextValue = useMemo(
+		() => ({ hasLeftSidePanel, registerLeftSidePanel, unregisterLeftSidePanel }),
+		[hasLeftSidePanel, registerLeftSidePanel, unregisterLeftSidePanel],
+	);
+
+	return (
+		<DsWorkspaceLayoutContext.Provider value={contextValue}>
+			<div {...rest} className={classNames(styles.root, { [styles.fillParent]: fillParent }, className)} />
+		</DsWorkspaceLayoutContext.Provider>
+	);
+};
+
+const Header = ({ className, ...rest }: DsWorkspaceLayoutHeaderProps) => (
+	<header {...rest} className={classNames(styles.header, className)} />
+);
+
+const SubHeader = ({ className, ...rest }: DsWorkspaceLayoutSubHeaderProps) => (
+	<div {...rest} className={classNames(styles.subHeader, className)} />
+);
+
+/** Content area: column layout, 24px vertical margins, 16px gap, 40px horizontal margins (24px when LeftPanel is mounted). */
+const Content = ({ className, ...rest }: DsWorkspaceLayoutContentProps) => {
+	const { hasLeftSidePanel } = useDsWorkspaceLayoutContext();
+
+	return (
+		<div
+			{...rest}
+			className={classNames(styles.content, { [styles.contentWithLeftPanel]: hasLeftSidePanel }, className)}
+		/>
+	);
+};
+
+const Footer = ({ className, ...rest }: DsWorkspaceLayoutFooterProps) => (
+	<footer {...rest} className={classNames(styles.footer, className)} />
+);
+
+const Body = ({ className, ...rest }: DsWorkspaceLayoutBodyProps) => {
+	useDsWorkspaceLayoutContext();
+
+	return <div {...rest} className={classNames(styles.body, className)} />;
+};
+
+const SideMenu = ({
+	className,
+	pinned = false,
+	onPinnedChange,
+	locale,
+	children,
+	...rest
+}: DsWorkspaceLayoutSideMenuProps) => {
+	useDsWorkspaceLayoutContext();
+	const [isHovering, setIsHovering] = useState(false);
+
+	const isExpanded = pinned || isHovering;
+	const ariaLabel = pinned
+		? (locale?.unpinButtonLabel ?? DEFAULT_LOCALE.unpinButtonLabel)
+		: (locale?.pinButtonLabel ?? DEFAULT_LOCALE.pinButtonLabel);
+
+	return (
+		<aside
+			{...rest}
+			className={classNames(styles.sideMenu, className)}
+			{...(pinned ? { 'data-pinned': '' } : {})}
+			{...(isExpanded ? { 'data-expanded': '' } : {})}
+		>
+			<div
+				className={styles.sideMenuPanel}
+				onMouseEnter={() => setIsHovering(true)}
+				onMouseLeave={() => setIsHovering(false)}
+			>
+				{onPinnedChange ? (
+					<button
+						type="button"
+						className={styles.sideMenuPinButton}
+						onClick={() => onPinnedChange(!pinned)}
+						aria-label={ariaLabel}
+						aria-pressed={pinned}
+					>
+						<DsIcon icon="keep" size="small" filled={pinned} />
+					</button>
+				) : null}
+				{children}
+			</div>
+		</aside>
+	);
+};
+
+const LeftPanel = ({ className, ...rest }: DsWorkspaceLayoutLeftPanelProps) => {
+	const { registerLeftSidePanel, unregisterLeftSidePanel } = useDsWorkspaceLayoutContext();
+
+	useEffect(() => {
+		registerLeftSidePanel();
+
+		return unregisterLeftSidePanel;
+	}, [registerLeftSidePanel, unregisterLeftSidePanel]);
+
+	return <aside {...rest} className={classNames(styles.leftPanel, className)} />;
+};
+
+DsWorkspaceLayout.Header = Header;
+DsWorkspaceLayout.SubHeader = SubHeader;
+DsWorkspaceLayout.Content = Content;
+DsWorkspaceLayout.Footer = Footer;
+DsWorkspaceLayout.Body = Body;
+DsWorkspaceLayout.SideMenu = SideMenu;
+DsWorkspaceLayout.LeftPanel = LeftPanel;
+
+export default DsWorkspaceLayout;