@drivenets/design-system 0.16.0 → 0.18.0

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

@@ -0,0 +1,208 @@
+import { createContext, useContext, useMemo, type ReactNode, type RefObject } from 'react';
+import type { DsDataTableProps, DsTableRowSize } from '../ds-table.types';
+import type { DsTablePropsWithDefaults } from '../ds-table-defaults';
+import type { DsTableResizeContextSlice } from '../hooks/use-column-resize';
+import { useEditingState, type UseEditingStateResult } from '../hooks/use-editing-state';
+
+/** Visual phase of the full-height column-resize divider. */
+export type DsTableResizePhase = 'hover' | 'dragging';
+
+export interface DsTableContextType<TData, TValue>
+	extends Partial<DsDataTableProps<TData, TValue>>, UseEditingStateResult<TData, TValue> {
+	/**
+	 * Whether the table is virtualized
+	 * @default false
+	 */
+	virtualized?: boolean;
+	/**
+	 * Row size variant
+	 * @default 'medium'
+	 */
+	rowSize: DsTableRowSize;
+	/**
+	 * ID of the currently active row
+	 */
+	activeRowId?: string | null;
+	/**
+	 * Toggles the collapsed state of a column group by its id.
+	 */
+	onToggleColumnGroup?: (groupId: string) => void;
+	/**
+	 * Ref to the scroll container, used to anchor the full-height resize drag
+	 * indicator and to measure boundary offsets while resizing.
+	 */
+	resizeContainerRef?: RefObject<HTMLDivElement | null>;
+	/**
+	 * True once every visible leaf has a `columnSizing` entry (snapshotted or
+	 * user-resized), so cells should read widths from CSS variables.
+	 */
+	resizeSizingReady?: boolean;
+	/**
+	 * Reports hover on a resize handle. Pass the column id and boundary x-offset
+	 * (relative to the scroll container), or `null` to clear.
+	 */
+	onResizeHover?: (columnId: string | null, offset: number | null) => void;
+	/**
+	 * Captures the cell right-edge offset at pointer-down so the overlay can
+	 * follow `columnSizingInfo.deltaOffset` without extra context updates.
+	 */
+	onResizeDragStart?: (offset: number) => void;
+	/**
+	 * Restores snapshotted (or `columnDef.size`) widths for the given leaf ids.
+	 */
+	onResizeReset?: (columnIds: string[]) => void;
+	/**
+	 * Keyboard resize for a focused handle: signed px `delta` applied to the
+	 * boundary header's column (leaf or group). Clamps and fires persist.
+	 */
+	onResizeKeyboardNudge?: (columnId: string, delta: number) => void;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const DsTableContext = createContext<DsTableContextType<any, any> | null>(null);
+
+export const useDsTableContext = <TData, TValue>(): DsTableContextType<TData, TValue> => {
+	const context = useContext(DsTableContext);
+	if (!context) {
+		throw new Error('useDsTableContext must be used within DsTable');
+	}
+	return context as DsTableContextType<TData, TValue>;
+};
+
+interface DsTableContextProviderDerived {
+	grouping: {
+		collapsedColumnGroups: string[];
+		onToggleColumnGroup: (groupId: string) => void;
+	};
+	resize: DsTableResizeContextSlice;
+}
+
+export interface DsTableContextProviderProps<TData, TValue> {
+	tableProps: DsTablePropsWithDefaults<TData, TValue>;
+	derived: DsTableContextProviderDerived;
+	children: ReactNode;
+}
+
+/**
+ * Assembles {@link DsTableContext} from public table props plus derived grouping
+ * and resize slices. Owns inline-edit state. Picks context fields from
+ * `tableProps` and ignores the rest (`columns`, `data`, etc.).
+ */
+export const DsTableContextProvider = <TData, TValue>({
+	tableProps,
+	derived,
+	children,
+}: DsTableContextProviderProps<TData, TValue>) => {
+	const {
+		stickyHeader,
+		bordered,
+		fullWidth,
+		rowSize,
+		expandable,
+		selectable,
+		reorderable,
+		showSelectAllCheckbox,
+		loading,
+		onRowClick,
+		onRowDoubleClick,
+		primaryRowActions,
+		secondaryRowActions,
+		renderExpandedRow,
+		virtualized,
+		activeRowId,
+		locale,
+		onCellEdit,
+		onCellValidate,
+	} = tableProps;
+
+	const { collapsedColumnGroups, onToggleColumnGroup } = derived.grouping;
+	const {
+		resizableColumns,
+		resizeSizingReady,
+		resizeContainerRef,
+		onResizeHover,
+		onResizeDragStart,
+		onResizeReset,
+		onResizeKeyboardNudge,
+	} = derived.resize;
+
+	const { editing, beginEdit, setDraft, commit, cancel } = useEditingState<TData, TValue>(
+		onCellEdit,
+		onCellValidate,
+	);
+
+	const contextValue: DsTableContextType<TData, TValue> = useMemo(
+		() => ({
+			stickyHeader,
+			bordered,
+			fullWidth,
+			rowSize,
+			expandable,
+			selectable,
+			reorderable,
+			showSelectAllCheckbox,
+			loading,
+			onRowClick: loading ? undefined : onRowClick,
+			onRowDoubleClick: loading ? undefined : onRowDoubleClick,
+			primaryRowActions,
+			secondaryRowActions,
+			renderExpandedRow,
+			virtualized,
+			activeRowId,
+			collapsedColumnGroups,
+			onToggleColumnGroup,
+			locale,
+			onCellEdit,
+			resizableColumns,
+			resizeSizingReady,
+			resizeContainerRef,
+			onResizeHover,
+			onResizeDragStart,
+			onResizeReset,
+			onResizeKeyboardNudge,
+			editing,
+			beginEdit,
+			setDraft,
+			commit,
+			cancel,
+		}),
+		[
+			stickyHeader,
+			bordered,
+			fullWidth,
+			rowSize,
+			expandable,
+			selectable,
+			reorderable,
+			showSelectAllCheckbox,
+			loading,
+			onRowClick,
+			onRowDoubleClick,
+			primaryRowActions,
+			secondaryRowActions,
+			renderExpandedRow,
+			virtualized,
+			activeRowId,
+			collapsedColumnGroups,
+			onToggleColumnGroup,
+			locale,
+			onCellEdit,
+			resizableColumns,
+			resizeSizingReady,
+			resizeContainerRef,
+			onResizeHover,
+			onResizeDragStart,
+			onResizeReset,
+			onResizeKeyboardNudge,
+			editing,
+			beginEdit,
+			setDraft,
+			commit,
+			cancel,
+		],
+	);
+
+	return <DsTableContext.Provider value={contextValue}>{children}</DsTableContext.Provider>;
+};
+
+DsTableContextProvider.displayName = 'DsTableContextProvider';

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

@@ -0,0 +1,42 @@
+import type { DsDataTableProps } from './ds-table.types';
+
+type DefaultedDsTableProp =
+	| 'virtualized'
+	| 'stickyHeader'
+	| 'bordered'
+	| 'fullWidth'
+	| 'rowSize'
+	| 'loading'
+	| 'expandable'
+	| 'selectable'
+	| 'showSelectAllCheckbox'
+	| 'primaryRowActions'
+	| 'actions'
+	| 'reorderable'
+	| 'resizableColumns';
+
+export type DsTablePropsWithDefaults<TData, TValue> = DsDataTableProps<TData, TValue> &
+	Required<Pick<DsDataTableProps<TData, TValue>, DefaultedDsTableProp>>;
+
+/**
+ * Applies the documented `DsTable` prop defaults. Call once at the table
+ * boundary so orchestration and context see the same resolved values.
+ */
+export const applyDsTableDefaults = <TData, TValue>(
+	props: DsDataTableProps<TData, TValue>,
+): DsTablePropsWithDefaults<TData, TValue> => ({
+	...props,
+	virtualized: props.virtualized ?? false,
+	stickyHeader: props.stickyHeader ?? true,
+	bordered: props.bordered ?? true,
+	fullWidth: props.fullWidth ?? true,
+	rowSize: props.rowSize ?? 'medium',
+	loading: props.loading ?? false,
+	expandable: props.expandable ?? false,
+	selectable: props.selectable ?? false,
+	showSelectAllCheckbox: props.showSelectAllCheckbox ?? true,
+	primaryRowActions: props.primaryRowActions ?? [],
+	actions: props.actions ?? [],
+	reorderable: props.reorderable ?? false,
+	resizableColumns: props.resizableColumns ?? false,
+});

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

@@ -18,9 +18,26 @@ $bulk-actions-reserved-space: 80px;
 	border-style: solid;
 	border-color: var(--color-dap-gray-400);
 	background: var(--background);
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	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 {
+	position: relative;
+	flex: 1;
+	min-height: 0;
 	max-height: 100%;
 	overflow-x: auto;
 	overflow-y: hidden;
@@ -50,6 +67,7 @@ $bulk-actions-reserved-space: 80px;
 	tbody {
 		display: block;
 		overflow-y: auto;
+		overflow-x: hidden;
 		flex: 1;
 		min-height: 0;
 		scrollbar-gutter: stable;
@@ -107,11 +125,11 @@ $bulk-actions-reserved-space: 80px;
 
 .virtualizedContainer {
 	position: relative;
-	height: vars.$virtualized-height;
 	overflow-x: auto;
 	overflow-y: hidden;
 	display: flex;
 	flex-direction: column;
+	flex: 1;
 
 	@include scrollbars.scrollbar-on-hover;