@drivenets/design-system 0.12.0 → 0.13.0

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

@@ -1,9 +1,28 @@
+@use '../../../../styles/scrollbars' as scrollbars;
+
 .body {
-	display: grid;
+	display: block;
+	position: relative;
+	overflow-y: auto;
+	flex: 1;
+	min-height: 0;
+	scrollbar-gutter: stable;
+
+	@include scrollbars.scrollbar-on-hover;
+}
+
+// 1px row pinned at `top: <totalSize>` (set inline) so absolutely-positioned
+// rows extend the parent's scrollable overflow area.
+.sentinel {
+	position: absolute;
+	left: 0;
+	width: 1px;
+	height: 1px;
+	pointer-events: none;
+	visibility: hidden;
 }
 
 .emptyState {
 	position: absolute;
 	inset: 0;
-	top: var(--ds-table-header-height);
 }

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

@@ -10,7 +10,6 @@ import { useInfiniteScroll } from './use-infinite-scroll';
 
 export const DsTableBodyVirtualized = <TData,>({
 	table,
-	tableContainerRef,
 	emptyState,
 	estimateSize,
 	overscan,
@@ -20,6 +19,7 @@ export const DsTableBodyVirtualized = <TData,>({
 }: DsTableBodyVirtualizedProps<TData>) => {
 	const rowsMapRef = useRef(new Map<string, HTMLTableRowElement>());
 	const rowHeightsMapRef = useRef(new Map<string, number>());
+	const tbodyRef = useRef<HTMLTableSectionElement>(null);
 
 	const { rows } = table.getRowModel();
 
@@ -32,16 +32,16 @@ export const DsTableBodyVirtualized = <TData,>({
 		return item ? `${item.row.id}${item.isExpandedRowContent ? '-expanded-content' : ''}` : String(index);
 	};
 
-	const { loadDataIfNeeded } = useInfiniteScroll(tableContainerRef, rows.length, infiniteScroll);
+	const { loadDataIfNeeded } = useInfiniteScroll(tbodyRef, rows.length, infiniteScroll);
 
-	const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({
+	const rowVirtualizer = useVirtualizer<HTMLTableSectionElement, HTMLTableRowElement>({
 		count: rowsAndExpandedRowContent.length,
 		estimateSize: (index) => {
 			const cachedHeight = rowHeightsMapRef.current.get(getItemKey(index));
 			return cachedHeight || estimateSize;
 		}, // estimate row height for accurate scrollbar dragging
 		getItemKey,
-		getScrollElement: () => tableContainerRef.current,
+		getScrollElement: () => tbodyRef.current,
 		// measure dynamic row height, except in firefox because it measures table border height incorrectly
 		measureElement:
 			typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1
@@ -86,6 +86,7 @@ export const DsTableBodyVirtualized = <TData,>({
 
 	return (
 		<DsTableBody
+			ref={tbodyRef}
 			rowsMapRef={rowsMapRef}
 			rowHeightsMapRef={rowHeightsMapRef}
 			rowVirtualizer={rowVirtualizer}
@@ -97,7 +98,8 @@ export const DsTableBodyVirtualized = <TData,>({
 };
 
 interface DsTableBodyProps<TData> {
-	rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
+	ref: RefObject<HTMLTableSectionElement | null>;
+	rowVirtualizer: Virtualizer<HTMLTableSectionElement, HTMLTableRowElement>;
 	rowsMapRef: RefObject<Map<string, HTMLTableRowElement>>;
 	rowHeightsMapRef: RefObject<Map<string, number>>;
 	rowsAndExpandedRowContent: {
@@ -109,6 +111,7 @@ interface DsTableBodyProps<TData> {
 }
 
 function DsTableBody<TData>({
+	ref,
 	rowVirtualizer,
 	rowsMapRef,
 	rowHeightsMapRef,
@@ -117,14 +120,10 @@ function DsTableBody<TData>({
 	rowSelection,
 }: DsTableBodyProps<TData>) {
 	const virtualRows = rowVirtualizer.getVirtualItems();
+	const totalSize = rowVirtualizer.getTotalSize();
 
 	return (
-		<TableBody
-			className={styles.body}
-			style={{
-				height: `${rowVirtualizer.getTotalSize().toString()}px`, // tells scrollbar how big the table is
-			}}
-		>
+		<TableBody ref={ref} className={styles.body}>
 			{virtualRows.length > 0 ? (
 				virtualRows.map((virtualRow) => {
 					const row = rowsAndExpandedRowContent[virtualRow.index];
@@ -150,6 +149,10 @@ function DsTableBody<TData>({
 					<TableCell className={styles.emptyState}>{emptyState || EMPTY_TABLE_STATE_TEXT}</TableCell>
 				</TableRow>
 			)}
+
+			<tr aria-hidden className={styles.sentinel} style={{ top: `${totalSize.toString()}px` }}>
+				<td />
+			</tr>
 		</TableBody>
 	);
 }

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

@@ -1,4 +1,4 @@
-import { type RefObject, type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { type RowSelectionState, type Table } from '@tanstack/react-table';
 
 export interface DsTableBodyVirtualizedProps<TData> {
@@ -7,11 +7,6 @@ export interface DsTableBodyVirtualizedProps<TData> {
 	 * and column state.
 	 */
 	table: Table<TData>;
-	/**
-	 * Ref to the scrollable container that hosts the virtualized rows. Required by
-	 * the virtualizer to measure viewport size and listen for scroll events.
-	 */
-	tableContainerRef: RefObject<HTMLDivElement | null>;
 	/**
 	 * Optional content rendered in place of rows when the table has no data.
 	 */

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

@@ -1,14 +1,14 @@
 @use '../../../../styles/typography';
 
 .bulkActionsContainer {
-	position: fixed;
+	position: absolute;
 	bottom: 20px;
 	left: 50%;
 	transform: translateX(-50%);
 	background-color: var(--color-dap-gray-050);
 	border-radius: 8px;
 	box-shadow: 0 4px 12px #0445cc66;
-	z-index: 1000;
+	z-index: 1;
 	display: flex;
 	align-items: center;
 	border-radius: 8px;

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

@@ -1,6 +1,8 @@
 @use '../../../../styles/typography';
 
 .tableCellEllipsis {
+	flex: 1;
+	min-width: 0;
 	display: -webkit-box;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;

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

@@ -2,31 +2,31 @@ import { type Cell, flexRender } from '@tanstack/react-table';
 import classnames from 'classnames';
 import { DsIcon } from '../../../ds-icon';
 import { DsDropdownMenu } from '../../../ds-dropdown-menu';
+import { useDsTableContext } from '../../context/ds-table-context';
+import { DsTableEditableCell } from '../edit/ds-table-editable-cell';
+import { DsTableEditingCell } from '../edit/ds-table-editing-cell';
 import styles from './ds-table-cell.module.scss';
 import type { DsTableCellProps } from './ds-table-cell.types';
 
-const DsDefaultTableCell = <TData, TValue>({ cell }: { cell: Cell<TData, TValue> }) => {
-	return (
-		<div className={styles.tableCellEllipsis}>
-			{flexRender(cell.column.columnDef.cell, cell.getContext())}
-		</div>
-	);
-};
-
 export const DsTableCell = <TData, TValue>({
 	row,
 	cell,
 	primaryRowActions = [],
 	secondaryRowActions = [],
 }: DsTableCellProps<TData, TValue>) => {
+	const { editing } = useDsTableContext<TData, TValue>();
+	const isCellBeingEdited =
+		editing !== null && editing.cell.row.id === row.id && editing.cell.column.id === cell.column.id;
+
 	const visiblePrimary = primaryRowActions.filter((action) => !action.hidden?.(row.original));
 	const visibleSecondary = secondaryRowActions.filter((action) => !action.hidden?.(row.original));
 
-	if (visiblePrimary.length || visibleSecondary.length) {
+	if (!isCellBeingEdited && (visiblePrimary.length || visibleSecondary.length)) {
 		const hasSecondaryRowActions = visibleSecondary.length > 0;
+
 		return (
 			<div className={styles.lastCell}>
-				<DsDefaultTableCell cell={cell} />
+				<CellContent cell={cell} isCellBeingEdited={isCellBeingEdited} />
 				<div className={styles.cellActions}>
 					{visiblePrimary.map((action, i) => {
 						const isDisabled = action.disabled?.(row.original);
@@ -95,5 +95,36 @@ export const DsTableCell = <TData, TValue>({
 			</div>
 		);
 	}
-	return <DsDefaultTableCell cell={cell} />;
+
+	return <CellContent cell={cell} isCellBeingEdited={isCellBeingEdited} />;
+};
+
+interface CellContentProps<TData, TValue> {
+	cell: Cell<TData, TValue>;
+	isCellBeingEdited: boolean;
+}
+
+const CellContent = <TData, TValue>({ cell, isCellBeingEdited }: CellContentProps<TData, TValue>) => {
+	const columnDef = cell.column.columnDef;
+	const isEditable = typeof columnDef.editCell === 'function';
+
+	if (isCellBeingEdited) {
+		return <DsTableEditingCell cell={cell} />;
+	}
+
+	if (isEditable) {
+		return (
+			<DsTableEditableCell cell={cell}>
+				<div className={styles.tableCellEllipsis}>
+					{flexRender(cell.column.columnDef.cell, cell.getContext())}
+				</div>
+			</DsTableEditableCell>
+		);
+	}
+
+	return (
+		<div className={styles.tableCellEllipsis}>
+			{flexRender(cell.column.columnDef.cell, cell.getContext())}
+		</div>
+	);
 };

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

@@ -2,14 +2,11 @@
 @use '../../styles/variables' as vars;
 
 .stickyHeader {
-	position: sticky;
-	top: 0;
-	z-index: 10;
 	background-color: var(--background);
 }
 
 .virtualizedHeader {
-	display: grid;
+	display: block;
 }
 
 .headerRow {
@@ -57,6 +54,7 @@
 
 .selectHeaderCell {
 	padding: 0;
+	justify-content: center;
 }
 
 .headerSortContainer {
@@ -66,3 +64,25 @@
 	gap: vars.$header-sort-gap;
 	height: 100%;
 }
+
+.filterTriggerContainer {
+	display: inline-flex;
+	align-items: center;
+	margin-left: vars.$header-sort-gap;
+}
+
+.filterableHeader {
+	&:hover .filterTriggerContainer > * {
+		opacity: 1;
+	}
+
+	&:focus-within .filterTriggerContainer > * {
+		opacity: 1;
+	}
+}
+
+.filterActive {
+	.filterTriggerContainer > * {
+		opacity: 1;
+	}
+}

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

@@ -9,6 +9,8 @@ import { useDsTableContext } from '../../context/ds-table-context';
 import { getColumnSizeStyle } from '../../utils/column-size';
 import { SELECT_COLUMN_ID } from '../../utils/constants';
 import { DsStack } from '../../../ds-stack';
+import { DsTableColumnFilterPopover } from '../../filters/components/column-filter-popover';
+import type { ResolvedColumnFilter } from '../../filters/types/filter-adapter.types';
 
 const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 	const { stickyHeader, bordered, virtualized } = useDsTableContext<TData, unknown>();
@@ -27,10 +29,15 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 					)}
 				>
 					{headerGroup.headers.map((header) => {
-						const headerStyle = getColumnSizeStyle(header.column.getSize(), virtualized);
+						const headerStyle = getColumnSizeStyle(header.column.getSize());
 						const canSort = header.column.getCanSort();
 						const isSelectColumn = header.column.id === SELECT_COLUMN_ID;
 
+						const metaFilter = header.column.columnDef.meta?.filter;
+						const resolvedFilter: ResolvedColumnFilter | undefined =
+							metaFilter && 'render' in metaFilter ? metaFilter : undefined;
+						const hasActiveColumnFilter = resolvedFilter?.hasActiveFilter ?? false;
+
 						return (
 							<TableHead
 								key={header.id}
@@ -38,6 +45,8 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 									styles.headerCell,
 									canSort && styles.sortableHeader,
 									isSelectColumn && styles.selectHeaderCell,
+									resolvedFilter && styles.filterableHeader,
+									hasActiveColumnFilter && styles.filterActive,
 								)}
 								onClick={header.column.getToggleSortingHandler()}
 								style={headerStyle}
@@ -67,6 +76,18 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 												)}
 											</div>
 										)}
+										{resolvedFilter && (
+											<div className={styles.filterTriggerContainer}>
+												<DsTableColumnFilterPopover
+													hasActiveFilter={resolvedFilter.hasActiveFilter}
+													onApply={resolvedFilter.onApply}
+													onClear={resolvedFilter.onClear}
+													onCancel={resolvedFilter.onCancel}
+												>
+													{resolvedFilter.render()}
+												</DsTableColumnFilterPopover>
+											</div>
+										)}
 									</div>
 								)}
 							</TableHead>

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

@@ -50,6 +50,8 @@
 	background-color: var(--background-secondary);
 
 	& > td {
+		flex: 1;
+		min-width: 0;
 		padding: var(--standard);
 	}
 
@@ -80,4 +82,24 @@
 .selectableCell {
 	padding: 0;
 	text-align: center;
+	justify-content: center;
+}
+
+.tableRow .editableCell {
+	padding: 1px;
+
+	&:hover {
+		border: 1px solid var(--border-secondary-hover);
+	}
+
+	&:focus-within {
+		border: 1px solid var(--border-action-primary);
+	}
+
+	&:hover,
+	&:focus-within {
+		padding: 0;
+		border-bottom-width: 2px;
+		background: var(--background);
+	}
 }

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

@@ -118,6 +118,7 @@ const DsTableRow = <TData,>({ ref, row, isSelected }: DsTableRowProps<TData>) =>
 								styles.tableCell,
 								cell.column.id === EXPANDER_COLUMN_ID && styles.expandableCell,
 								cell.column.id === SELECT_COLUMN_ID && styles.selectableCell,
+								typeof cell.column.columnDef.editCell === 'function' && styles.editableCell,
 							)}
 							style={cellStyle}
 						>

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

@@ -79,3 +79,22 @@
 
 	@include table-mixins.expanded-row-border('bottom');
 }
+
+.row td.editableCell {
+	padding: 1px;
+
+	&:hover {
+		border: 1px solid var(--border-secondary-hover);
+	}
+
+	&:focus-within {
+		border: 1px solid var(--border-action-primary);
+	}
+
+	&:hover,
+	&:focus-within {
+		padding: 0;
+		border-bottom-width: 2px;
+		background: var(--background);
+	}
+}

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

@@ -67,7 +67,7 @@ export const DsTableRowVirtualized = <TData,>({
 				<>
 					{row.getVisibleCells().map((cell, idx) => {
 						const isLastColumn = idx === row.getVisibleCells().length - 1;
-						const cellStyle = getColumnSizeStyle(cell.column.getSize(), true);
+						const cellStyle = getColumnSizeStyle(cell.column.getSize());
 
 						return (
 							<TableCell
@@ -77,6 +77,7 @@ export const DsTableRowVirtualized = <TData,>({
 									styles.cell,
 									cell.column.id === EXPANDER_COLUMN_ID && styles.expandableCell,
 									cell.column.id === SELECT_COLUMN_ID && styles.selectableCell,
+									typeof cell.column.columnDef.editCell === 'function' && styles.editableCell,
 								)}
 							>
 								{isLastColumn ? (

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

@@ -25,7 +25,7 @@ export interface DsTableRowVirtualizedProps<TData> {
 	/**
 	 * TanStack virtualizer driving the scroll window for the table body.
 	 */
-	rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
+	rowVirtualizer: Virtualizer<HTMLTableSectionElement, HTMLTableRowElement>;
 	/**
 	 * Virtual item descriptor for this row (index, start, size) from the virtualizer.
 	 */

package/src/components/ds-table/components/edit/cell-editors/cell-editors.module.scss

@@ -0,0 +1,3 @@
+.fullWidth {
+	width: 100%;
+}

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

@@ -0,0 +1,27 @@
+import type { CellContext, RowData } from '@tanstack/react-table';
+import { DsCheckbox } from '../../../../ds-checkbox';
+import { useCellEditor } from '../../../hooks/use-cell-editor';
+
+export interface DsTableEditCellCheckboxProps<TData extends RowData> {
+	/** TanStack Table cell context from `ColumnDef.editCell`. */
+	cellContext: CellContext<TData, boolean>;
+	disabled?: boolean;
+}
+
+/** Checkbox editor for table cells. Render via `ColumnDef.editCell`. */
+export const DsTableEditCellCheckbox = <TData extends RowData>({
+	cellContext,
+	disabled,
+}: DsTableEditCellCheckboxProps<TData>) => {
+	const { value, setValue } = useCellEditor<TData, boolean>({
+		cellContext,
+	});
+
+	return (
+		<DsCheckbox
+			checked={value}
+			disabled={disabled}
+			onCheckedChange={(checked) => setValue(checked === true)}
+		/>
+	);
+};

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

@@ -0,0 +1,50 @@
+import type { CellContext, RowData } from '@tanstack/react-table';
+import { DsFormControl } from '../../../../ds-form-control';
+import { DsIcon } from '../../../../ds-icon';
+import { useCellEditor } from '../../../hooks/use-cell-editor';
+import styles from './cell-editors.module.scss';
+import { TableEditFormControl } from './table-edit-form-control';
+
+export type DsTableEditCellDateValue = Date | null;
+
+export interface DsTableEditCellDateProps<TData extends RowData> {
+	/** TanStack Table cell context from `ColumnDef.editCell`. */
+	cellContext: CellContext<TData, DsTableEditCellDateValue>;
+	min?: Date;
+	max?: Date;
+	placeholder?: string;
+}
+
+/** Date picker editor for table cells. Render via `ColumnDef.editCell`. */
+export const DsTableEditCellDate = <TData extends RowData>({
+	cellContext,
+	min,
+	max,
+	placeholder,
+}: DsTableEditCellDateProps<TData>) => {
+	const { value, setValue, error } = useCellEditor<TData, DsTableEditCellDateValue>({
+		cellContext,
+	});
+
+	return (
+		<TableEditFormControl cellContext={cellContext} error={error}>
+			<DsFormControl.DatePicker
+				className={styles.fullWidth}
+				value={value}
+				min={min}
+				max={max}
+				placeholder={placeholder}
+				onChange={setValue}
+				slotProps={
+					error
+						? {
+								input: {
+									slots: { endAdornment: <DsIcon icon="error" size="tiny" /> },
+								},
+							}
+						: undefined
+				}
+			/>
+		</TableEditFormControl>
+	);
+};

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

@@ -0,0 +1,51 @@
+import { useEffect, useRef } from 'react';
+import type { CellContext, RowData } from '@tanstack/react-table';
+import { DsFormControl } from '../../../../ds-form-control';
+import { useCellEditor } from '../../../hooks/use-cell-editor';
+import styles from './cell-editors.module.scss';
+import { TableEditFormControl } from './table-edit-form-control';
+
+export interface DsTableEditCellNumberProps<TData extends RowData> {
+	/** TanStack Table cell context from `ColumnDef.editCell`. */
+	cellContext: CellContext<TData, number>;
+	min?: number;
+	max?: number;
+	step?: number;
+}
+
+/** Number input editor for table cells. Render via `ColumnDef.editCell`. */
+export const DsTableEditCellNumber = <TData extends RowData>({
+	cellContext,
+	min,
+	max,
+	step,
+}: DsTableEditCellNumberProps<TData>) => {
+	const { value, setValue, error } = useCellEditor<TData, number>({
+		cellContext,
+	});
+
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	useEffect(() => {
+		const input = inputRef.current;
+		if (!input) {
+			return;
+		}
+		input.focus();
+		input.select();
+	}, []);
+
+	return (
+		<TableEditFormControl cellContext={cellContext} error={error}>
+			<DsFormControl.NumberInput
+				ref={inputRef}
+				className={styles.fullWidth}
+				value={value}
+				min={min}
+				max={max}
+				step={step}
+				onValueChange={setValue}
+			/>
+		</TableEditFormControl>
+	);
+};

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

@@ -0,0 +1,36 @@
+import type { CellContext, RowData } from '@tanstack/react-table';
+import { DsFormControl } from '../../../../ds-form-control';
+import { type DsSelectOption } from '../../../../ds-select';
+import { useCellEditor } from '../../../hooks/use-cell-editor';
+import styles from './cell-editors.module.scss';
+import { TableEditFormControl } from './table-edit-form-control';
+
+export interface DsTableEditCellSelectProps<TData extends RowData> {
+	/** TanStack Table cell context from `ColumnDef.editCell`. */
+	cellContext: CellContext<TData, string>;
+	options: DsSelectOption[];
+	placeholder?: string;
+}
+
+/** Select editor for table cells. Render via `ColumnDef.editCell`. */
+export const DsTableEditCellSelect = <TData extends RowData>({
+	cellContext,
+	options,
+	placeholder,
+}: DsTableEditCellSelectProps<TData>) => {
+	const { value, setValue, error } = useCellEditor<TData, string>({
+		cellContext,
+	});
+
+	return (
+		<TableEditFormControl cellContext={cellContext} error={error}>
+			<DsFormControl.Select
+				className={styles.fullWidth}
+				value={value}
+				options={options}
+				placeholder={placeholder}
+				onValueChange={setValue}
+			/>
+		</TableEditFormControl>
+	);
+};

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

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from 'react';
+import type { CellContext, RowData } from '@tanstack/react-table';
+import { DsFormControl } from '../../../../ds-form-control';
+import { DsIcon } from '../../../../ds-icon';
+import { useCellEditor } from '../../../hooks/use-cell-editor';
+import styles from './cell-editors.module.scss';
+import { TableEditFormControl } from './table-edit-form-control';
+
+export interface DsTableEditCellTextProps<TData extends RowData> {
+	/** TanStack Table cell context from `ColumnDef.editCell`. */
+	cellContext: CellContext<TData, string>;
+	placeholder?: string;
+	maxLength?: number;
+}
+
+/** Text input editor for table cells. Render via `ColumnDef.editCell`. */
+export const DsTableEditCellText = <TData extends RowData>({
+	cellContext,
+	placeholder,
+	maxLength,
+}: DsTableEditCellTextProps<TData>) => {
+	const { value, setValue, error } = useCellEditor<TData, string>({
+		cellContext,
+	});
+
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	useEffect(() => {
+		const input = inputRef.current;
+		if (!input) {
+			return;
+		}
+		input.focus();
+		input.select();
+	}, []);
+
+	return (
+		<TableEditFormControl cellContext={cellContext} error={error}>
+			<DsFormControl.TextInput
+				ref={inputRef}
+				className={styles.fullWidth}
+				value={value}
+				placeholder={placeholder}
+				maxLength={maxLength}
+				onValueChange={setValue}
+				slots={error ? { endAdornment: <DsIcon icon="error" size="tiny" /> } : undefined}
+			/>
+		</TableEditFormControl>
+	);
+};

package/src/components/ds-table/components/edit/cell-editors/index.ts

@@ -0,0 +1,14 @@
+export { DsTableEditCellText } from './ds-table-edit-cell-text';
+export type { DsTableEditCellTextProps } from './ds-table-edit-cell-text';
+
+export { DsTableEditCellNumber } from './ds-table-edit-cell-number';
+export type { DsTableEditCellNumberProps } from './ds-table-edit-cell-number';
+
+export { DsTableEditCellSelect } from './ds-table-edit-cell-select';
+export type { DsTableEditCellSelectProps } from './ds-table-edit-cell-select';
+
+export { DsTableEditCellDate } from './ds-table-edit-cell-date';
+export type { DsTableEditCellDateProps, DsTableEditCellDateValue } from './ds-table-edit-cell-date';
+
+export { DsTableEditCellCheckbox } from './ds-table-edit-cell-checkbox';
+export type { DsTableEditCellCheckboxProps } from './ds-table-edit-cell-checkbox';