@drivenets/design-system 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @drivenets/design-system
 
+## 0.11.0
+
+### Minor Changes
+
+- 8723a60: Migrate DS codebase to new tokens
+
+### Patch Changes
+
+- c4d5afd: Add `variant` prop to `DsDropdownMenuItem`
+- a3d191b: Fix `DsTable` row selection
+
 ## 0.10.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -3856,6 +3856,7 @@ var ds_dropdown_menu_module_default = {
 	"separator": "AkHUyG_separator",
 	"triggerItem": "AkHUyG_triggerItem",
 	"triggerItemIcon": "AkHUyG_triggerItemIcon",
+	"variant-error": "AkHUyG_variant-error",
 	"viewportLegacy": "AkHUyG_viewportLegacy"
 };
 //#endregion
@@ -4116,20 +4117,22 @@ const Content$1 = (t0) => {
 * Item component - renders a menu item
 */
 const Item$2 = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(12);
-	const { disabled, selected, value, asChild, onClick, onSelect, children, className, style } = t0;
-	let t1;
-	if ($[0] !== className || $[1] !== selected) {
-		t1 = (0, classnames.default)(ds_dropdown_menu_module_default.item, { [ds_dropdown_menu_module_default.selected]: selected }, className);
+	const $ = (0, react_compiler_runtime.c)(13);
+	const { disabled, selected, variant: t1, value, asChild, onClick, onSelect, children, className, style } = t0;
+	const variant = t1 === void 0 ? "default" : t1;
+	let t2;
+	if ($[0] !== className || $[1] !== selected || $[2] !== variant) {
+		t2 = (0, classnames.default)(ds_dropdown_menu_module_default.item, { [ds_dropdown_menu_module_default.selected]: selected }, variant === "error" && ds_dropdown_menu_module_default["variant-error"], className);
 		$[0] = className;
 		$[1] = selected;
-		$[2] = t1;
-	} else t1 = $[2];
-	let t2;
-	if ($[3] !== asChild || $[4] !== children || $[5] !== disabled || $[6] !== onClick || $[7] !== onSelect || $[8] !== style || $[9] !== t1 || $[10] !== value) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_menu.Menu.Item, {
+		$[2] = variant;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== asChild || $[5] !== children || $[6] !== disabled || $[7] !== onClick || $[8] !== onSelect || $[9] !== style || $[10] !== t2 || $[11] !== value) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_menu.Menu.Item, {
 			disabled,
-			className: t1,
+			className: t2,
 			style,
 			value,
 			asChild,
@@ -4137,17 +4140,17 @@ const Item$2 = (t0) => {
 			onSelect,
 			children
 		});
-		$[3] = asChild;
-		$[4] = children;
-		$[5] = disabled;
-		$[6] = onClick;
-		$[7] = onSelect;
-		$[8] = style;
-		$[9] = t1;
-		$[10] = value;
-		$[11] = t2;
-	} else t2 = $[11];
-	return t2;
+		$[4] = asChild;
+		$[5] = children;
+		$[6] = disabled;
+		$[7] = onClick;
+		$[8] = onSelect;
+		$[9] = style;
+		$[10] = t2;
+		$[11] = value;
+		$[12] = t3;
+	} else t3 = $[12];
+	return t3;
 };
 /**
 * ItemIndicator component - renders a selection indicator (check icon by default)
@@ -4678,6 +4681,9 @@ function _temp2$7(e) {
 	return e.stopPropagation();
 }
 //#endregion
+//#region src/components/ds-dropdown-menu/ds-dropdown-menu.types.ts
+const dropdownMenuItemVariants = ["default", "error"];
+//#endregion
 //#region src/components/ds-breadcrumb/ds-breadcrumb.tsx
 /**
 * Design system Breadcrumb component
@@ -16449,15 +16455,15 @@ var ds_smart_tabs_module_default = {
 //#endregion
 //#region src/components/ds-smart-tabs/ds-smart-tabs.tsx
 const colorMap = {
-	"dark-blue": "var(--color-background-info-strong)",
-	"light-blue": "var(--color-background-active-moderate)",
-	"dark-gray": "var(--color-background-brand)",
-	green: "var(--color-background-success-strong)",
-	fuchsia: "var(--color-data-fuchsia)",
-	blue: "var(--color-icon-information-secondary)",
-	gray: "var(--color-icon-information-main)",
-	red: "var(--color-icon-warning)",
-	amber: "var(--color-data-amber)"
+	"dark-blue": "var(--background-info-strong)",
+	"light-blue": "var(--background-active-moderate)",
+	"dark-gray": "var(--background-brand)",
+	green: "var(--background-success-strong)",
+	fuchsia: "var(--color-dap-data-fuchsia)",
+	blue: "var(--icon-information-secondary)",
+	gray: "var(--icon-information-main)",
+	red: "var(--icon-warning)",
+	amber: "var(--color-dap-data-amber)"
 };
 const SmartTabsContext = (0, react.createContext)(null);
 const useSmartTabsContext = () => {
@@ -18119,7 +18125,6 @@ const DsTableBulkActions = ({ numSelectedRows, actions, onClearSelection }) => {
 //#endregion
 //#region src/components/ds-table/components/ds-table-header/ds-table-header.module.scss
 var ds_table_header_module_default = {
-	"expandColumn": "-2rCNG_expandColumn",
 	"headerCell": "-2rCNG_headerCell",
 	"headerRow": "-2rCNG_headerRow",
 	"headerRowNoBorder": "-2rCNG_headerRowNoBorder",
@@ -18171,7 +18176,7 @@ const getColumnSizeStyle = (columnSize, virtualized) => {
 //#endregion
 //#region src/components/ds-table/components/ds-table-header/ds-table-header.tsx
 const DsTableHeader = ({ table }) => {
-	const { stickyHeader, bordered, expandable, selectable, reorderable, showSelectAllCheckbox, virtualized } = useDsTableContext();
+	const { stickyHeader, bordered, selectable, reorderable, showSelectAllCheckbox, virtualized } = useDsTableContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHeader, {
 		className: (0, classnames.default)(stickyHeader && ds_table_header_module_default.stickyHeader, virtualized && ds_table_header_module_default.virtualizedHeader),
 		children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TableRow, {
@@ -18182,26 +18187,24 @@ const DsTableHeader = ({ table }) => {
 					children: showSelectAllCheckbox && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsCheckbox, {
 						className: ds_table_shared_module_default.checkboxContainer,
 						checked: table.getIsAllRowsSelected() ? true : table.getIsSomeRowsSelected() ? "indeterminate" : false,
-						onClick: (e) => {
-							e.stopPropagation();
-							table.getToggleAllRowsSelectedHandler()(e);
-						}
+						onCheckedChange: (checked) => table.toggleAllRowsSelected(!!checked),
+						onClick: (e) => e.stopPropagation()
 					})
 				}),
-				expandable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHead, { className: (0, classnames.default)(ds_table_header_module_default.headerCell, ds_table_header_module_default.expandColumn) }),
 				reorderable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHead, {
 					className: (0, classnames.default)(ds_table_header_module_default.headerCell, ds_table_header_module_default.reorderColumn),
 					children: "Order"
 				}),
 				headerGroup.headers.map((header) => {
 					const headerStyle = getColumnSizeStyle(header.column.getSize(), virtualized);
+					const canSort = header.column.getCanSort();
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHead, {
-						className: (0, classnames.default)(ds_table_header_module_default.headerCell, header.column.getCanSort() && ds_table_header_module_default.sortableHeader),
+						className: (0, classnames.default)(ds_table_header_module_default.headerCell, canSort && ds_table_header_module_default.sortableHeader),
 						onClick: header.column.getToggleSortingHandler(),
 						style: headerStyle,
 						children: header.isPlaceholder ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: ds_table_header_module_default.headerSortContainer,
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext()) }), header.column.getCanSort() && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext()) }), canSort && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: ds_table_header_module_default.pageButtonIconContainer,
 								children: {
 									asc: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
@@ -18332,47 +18335,9 @@ const DsTableRowSelectableCell = ({ row, isSelected, className }) => {
 			className: ds_table_shared_module_default.checkboxContainer,
 			checked: isSelected,
 			disabled: !row.getCanSelect(),
-			onClick: (e) => {
-				e.stopPropagation();
-				row.getToggleSelectedHandler()(e);
-			},
-			onDoubleClick: (e) => {
-				e.stopPropagation();
-			}
-		})
-	});
-};
-//#endregion
-//#region src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.module.scss
-var ds_table_row_expandable_cell_module_default = {
-	"button": "enUIjW_button",
-	"cell": "enUIjW_cell"
-};
-//#endregion
-//#region src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.tsx
-const DsTableRowExpandableCell = ({ row, className, buttonClassName }) => {
-	const { expandable } = useDsTableContext();
-	const isExpanded = row.getIsExpanded();
-	const isExpandable = typeof expandable === "function" ? expandable(row.original) : expandable;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-		className: (0, classnames.default)(ds_table_row_expandable_cell_module_default.cell, className),
-		children: isExpandable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButton, {
-			design: "v1.2",
-			buttonType: "tertiary",
-			size: "small",
-			className: (0, classnames.default)(ds_table_row_expandable_cell_module_default.button, buttonClassName),
-			onClick: (e) => {
-				e.stopPropagation();
-				row.toggleExpanded();
-			},
-			onDoubleClick: (e) => {
-				e.stopPropagation();
-			},
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
-				icon: "chevron_right",
-				size: "small",
-				className: (0, classnames.default)(ds_table_shared_module_default.pageButtonIcon, isExpanded && "rotate-90")
-			})
+			onCheckedChange: (checked) => row.toggleSelected(!!checked),
+			onClick: (e) => e.stopPropagation(),
+			onDoubleClick: (e) => e.stopPropagation()
 		})
 	});
 };
@@ -18384,7 +18349,6 @@ var ds_table_row_module_default = {
 	"expandableCell": "t8OZCq_expandableCell",
 	"expanded": "t8OZCq_expanded",
 	"expandedRow": "t8OZCq_expandedRow",
-	"expandToggleButton": "t8OZCq_expandToggleButton",
 	"isDragging": "t8OZCq_isDragging",
 	"rowDragHandle": "t8OZCq_rowDragHandle",
 	"rowNoBorder": "t8OZCq_rowNoBorder",
@@ -18395,6 +18359,10 @@ var ds_table_row_module_default = {
 	"tableCell": "t8OZCq_tableCell",
 	"tableRow": "t8OZCq_tableRow"
 };
+/**
+* Column id used for the synthetic expander column injected when `expandable` is set.
+*/
+const EXPANDER_COLUMN_ID = "expander";
 //#endregion
 //#region src/components/ds-table/components/ds-table-row/ds-table-row.tsx
 const DsRowDragHandle = ({ isDragging, attributes, listeners }) => {
@@ -18411,9 +18379,8 @@ const DsRowDragHandle = ({ isDragging, attributes, listeners }) => {
 	});
 };
 const DsTableRow = ({ ref, row, isSelected }) => {
-	const { expandable, selectable, reorderable, onRowClick, onRowDoubleClick, renderExpandedRow, bordered, rowSize, primaryRowActions, secondaryRowActions, activeRowId } = useDsTableContext();
+	const { selectable, reorderable, onRowClick, onRowDoubleClick, renderExpandedRow, bordered, rowSize, primaryRowActions, secondaryRowActions, activeRowId } = useDsTableContext();
 	const isExpanded = row.getIsExpanded();
-	const isExpandable = typeof expandable === "function" ? expandable(row.original) : expandable;
 	const isActive = activeRowId === row.id;
 	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, _dnd_kit_sortable.useSortable)({
 		id: row.id,
@@ -18423,7 +18390,7 @@ const DsTableRow = ({ ref, row, isSelected }) => {
 		transform: _dnd_kit_utilities.CSS.Transform.toString(transform),
 		transition,
 		...isDragging ? {
-			background: "var(--action-active-light)",
+			background: "var(--color-dap-purple-200)",
 			boxShadow: "0 0 12px 0 rgba(0, 102, 250, 0.60)",
 			zIndex: 1
 		} : {},
@@ -18446,11 +18413,6 @@ const DsTableRow = ({ ref, row, isSelected }) => {
 				isSelected,
 				className: ds_table_row_module_default.selectableCell
 			}),
-			expandable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableRowExpandableCell, {
-				row,
-				className: ds_table_row_module_default.expandableCell,
-				buttonClassName: ds_table_row_module_default.expandToggleButton
-			}),
 			reorderable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsRowDragHandle, {
 				isDragging,
 				attributes,
@@ -18460,7 +18422,7 @@ const DsTableRow = ({ ref, row, isSelected }) => {
 				const isLastColumn = idx === row.getVisibleCells().length - 1;
 				const cellStyle = getColumnSizeStyle(cell.column.getSize());
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-					className: ds_table_row_module_default.tableCell,
+					className: (0, classnames.default)(ds_table_row_module_default.tableCell, cell.column.id === "expander" && ds_table_row_module_default.expandableCell),
 					style: cellStyle,
 					children: isLastColumn ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableCell, {
 						row,
@@ -18477,13 +18439,39 @@ const DsTableRow = ({ ref, row, isSelected }) => {
 	}), isExpanded && renderExpandedRow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, {
 		className: ds_table_row_module_default.expandedRow,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-			colSpan: row.getVisibleCells().length + (selectable ? 1 : 0) + (isExpandable ? 1 : 0) + (reorderable ? 1 : 0),
+			colSpan: row.getVisibleCells().length + (selectable ? 1 : 0) + (reorderable ? 1 : 0),
 			className: ds_table_row_module_default.tableCell,
 			children: renderExpandedRow(row.original)
 		})
 	})] });
 };
 //#endregion
+//#region src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.module.scss
+var ds_table_row_expandable_cell_module_default = { "button": "enUIjW_button" };
+//#endregion
+//#region src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.tsx
+const DsTableRowExpandableCell = ({ row, buttonClassName }) => {
+	const isExpanded = row.getIsExpanded();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButton, {
+		design: "v1.2",
+		buttonType: "tertiary",
+		size: "small",
+		className: (0, classnames.default)(ds_table_row_expandable_cell_module_default.button, buttonClassName),
+		onClick: (e) => {
+			e.stopPropagation();
+			row.toggleExpanded();
+		},
+		onDoubleClick: (e) => {
+			e.stopPropagation();
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+			icon: "chevron_right",
+			size: "small",
+			className: (0, classnames.default)(ds_table_shared_module_default.pageButtonIcon, isExpanded && "rotate-90")
+		})
+	});
+};
+//#endregion
 //#region src/components/ds-table/hooks/use-drag-and-drop.tsx
 const DragWrapper = ({ children, onDragEnd, sensors }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_core.DndContext, {
 	collisionDetection: _dnd_kit_core.closestCenter,
@@ -18552,7 +18540,7 @@ var ds_table_row_virtualized_module_default = {
 //#endregion
 //#region src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.tsx
 const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef, rowVirtualizer, virtualRow, isExpandedRowContent }) => {
-	const { selectable, expandable, bordered, rowSize, activeRowId, primaryRowActions, secondaryRowActions, renderExpandedRow, onRowClick, onRowDoubleClick } = useDsTableContext();
+	const { selectable, bordered, rowSize, activeRowId, primaryRowActions, secondaryRowActions, renderExpandedRow, onRowClick, onRowDoubleClick } = useDsTableContext();
 	const isExpanded = row.getIsExpanded();
 	const isActive = activeRowId === row.id;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, {
@@ -18574,33 +18562,26 @@ const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef,
 		}, isExpandedRowContent && ds_table_row_virtualized_module_default.expandedRowContent, onRowClick && ds_table_row_virtualized_module_default.clickableRow, !bordered && ds_table_row_virtualized_module_default.rowNoBorder, isExpanded && ds_table_row_virtualized_module_default.expanded),
 		onClick: isExpandedRowContent ? void 0 : () => onRowClick?.(row.original),
 		onDoubleClick: isExpandedRowContent ? void 0 : () => onRowDoubleClick?.(row.original),
-		children: isExpandedRowContent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, { children: renderExpandedRow?.(row.original) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-			selectable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableRowSelectableCell, {
-				row,
-				isSelected,
-				className: ds_table_row_virtualized_module_default.selectableCell
-			}),
-			expandable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableRowExpandableCell, {
-				row,
-				className: ds_table_row_virtualized_module_default.expandableCell
-			}),
-			row.getVisibleCells().map((cell, idx) => {
-				const isLastColumn = idx === row.getVisibleCells().length - 1;
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-					style: getColumnSizeStyle(cell.column.getSize(), true),
-					className: ds_table_row_virtualized_module_default.cell,
-					children: isLastColumn ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableCell, {
-						row,
-						cell,
-						primaryRowActions,
-						secondaryRowActions
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableCell, {
-						row,
-						cell
-					})
-				}, cell.id);
-			})
-		] })
+		children: isExpandedRowContent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, { children: renderExpandedRow?.(row.original) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [selectable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableRowSelectableCell, {
+			row,
+			isSelected,
+			className: ds_table_row_virtualized_module_default.selectableCell
+		}), row.getVisibleCells().map((cell, idx) => {
+			const isLastColumn = idx === row.getVisibleCells().length - 1;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
+				style: getColumnSizeStyle(cell.column.getSize(), true),
+				className: (0, classnames.default)(ds_table_row_virtualized_module_default.cell, cell.column.id === "expander" && ds_table_row_virtualized_module_default.expandableCell),
+				children: isLastColumn ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableCell, {
+					row,
+					cell,
+					primaryRowActions,
+					secondaryRowActions
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableCell, {
+					row,
+					cell
+				})
+			}, cell.id);
+		})] })
 	});
 };
 //#endregion
@@ -18694,7 +18675,7 @@ const ROW_SIZE_HEIGHT_MAP = {
 /**
 * Design system Table component
 */
-const DsTable = ({ ref, columns, data: tableData, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, activeRowId }) => {
+const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, activeRowId }) => {
 	const [data, setData] = react.useState(tableData);
 	const [sorting, setSorting] = react.useState([]);
 	const [internalColumnFilters, setInternalColumnFilters] = react.useState([]);
@@ -18731,6 +18712,17 @@ const DsTable = ({ ref, columns, data: tableData, virtualized = false, virtualiz
 		setRowSelection(newRowSelection);
 		onSelectionChange?.(newRowSelection);
 	};
+	const columns = (0, react.useMemo)(() => {
+		if (!expandable) return columnsProp;
+		return [{
+			id: EXPANDER_COLUMN_ID,
+			size: 36,
+			enableSorting: false,
+			enableResizing: false,
+			header: () => null,
+			cell: ({ row }) => row.getCanExpand() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableRowExpandableCell, { row }) : null
+		}, ...columnsProp];
+	}, [columnsProp, expandable]);
 	const table = (0, _tanstack_react_table.useReactTable)({
 		data: reorderable ? data : tableData,
 		columns,
@@ -18742,6 +18734,8 @@ const DsTable = ({ ref, columns, data: tableData, virtualized = false, virtualiz
 		onColumnVisibilityChange: handleColumnVisibilityChange,
 		onRowSelectionChange: handleRowSelectionChange,
 		getRowId: (row) => row.id,
+		getExpandedRowModel: (0, _tanstack_react_table.getExpandedRowModel)(),
+		getRowCanExpand: typeof expandable === "function" ? (row) => expandable(row.original) : () => expandable,
 		state: {
 			sorting,
 			columnFilters,
@@ -18791,7 +18785,7 @@ const DsTable = ({ ref, columns, data: tableData, virtualized = false, virtualiz
 	}), [table]);
 	const { rows, rowsById } = table.getRowModel();
 	const renderEmptyState = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-		colSpan: columns.length + (expandable ? 1 : 0) + (selectable ? 1 : 0),
+		colSpan: columns.length + (selectable ? 1 : 0) + (reorderable ? 1 : 0),
 		className: ds_table_module_default.emptyState,
 		children: emptyState || "No results."
 	}) });
@@ -20076,6 +20070,7 @@ exports.createDsTreeCollection = createDsTreeCollection;
 exports.createDualRangeFilterAdapter = createDualRangeFilterAdapter;
 exports.createFilterAdapter = createFilterAdapter;
 exports.customIcons = customIcons;
+exports.dropdownMenuItemVariants = dropdownMenuItemVariants;
 exports.dsKeyValuePairOrientations = dsKeyValuePairOrientations;
 exports.filterStatuses = filterStatuses;
 exports.formatTime = formatTime;

package/dist/index.d.cts

@@ -9505,6 +9505,8 @@ declare namespace DsDrawer {
 }
 //#endregion
 //#region src/components/ds-dropdown-menu/ds-dropdown-menu.types.d.ts
+declare const dropdownMenuItemVariants: readonly ['default', 'error'];
+type DropdownMenuItemVariant = (typeof dropdownMenuItemVariants)[number];
 /**
  * Base positioning type
  */
@@ -9677,6 +9679,12 @@ interface DsDropdownMenuItemProps extends Pick<Menu.ItemProps, 'disabled' | 'asC
    * Whether the item is selected (applies selected styling)
    */
   selected?: boolean;
+  /**
+   * Status variant that applies colored text to convey item state.
+   * `error` renders text in danger color.
+   * @default 'default'
+   */
+  variant?: DropdownMenuItemVariant;
 }
 /**
  * Props for the DsDropdownMenu ItemIndicator component
@@ -12696,7 +12704,7 @@ declare const DsTable: <TData extends {
   id: string;
 }, TValue>({
   ref,
-  columns,
+  columns: columnsProp,
   data: tableData,
   virtualized,
   virtualizedOptions,
@@ -13593,5 +13601,5 @@ declare namespace DsWorkspace {
   }: DsWorkspaceFooterProps) => _$react_jsx_runtime0.JSX.Element;
 }
 //#endregion
-export { type AcceptedFileType, Action, AlertBannerVariant, AnyAdapter, BREAKPOINT_LG, Breakpoint, ButtonV3Color, ButtonV3Size, ButtonV3Variant, type CheckboxFilterAdapterConfig, type CheckboxFilterItem, type CheckboxFilterProps, CheckboxVariant, CheckedState, type ChipItem, type ChipSize, Color, ColumnFilterState, CommentAuthor, CommentData, CommentIndicatorType, CommentMessage, CommentsFilterState, ControlStatus, type CustomIconComponent, type CustomIconName, type DateRangeFormControlSlotProps, type DateRangePickerOrientation, type DateRangeValue, DsAlertBanner, DsAlertBannerProps, DsAutocomplete, DsAutocompleteOption, DsAutocompleteProps, DsAvatar, DsAvatarGroup, DsAvatarGroupProps, DsAvatarProps, DsAvatarSize, DsAvatarType, DsBreadcrumb, DsBreadcrumbItem, DsBreadcrumbProps, DsButton, DsButtonUnifiedProps, DsButtonV3, DsButtonV3BaseProps, DsButtonV3Props, DsCard, type DsCardBodyProps, type DsCardFooterProps, type DsCardHeaderProps, type DsCardRootProps, type DsCardSize, DsCheckbox, DsCheckboxGroup, DsCheckboxGroupOrientation, DsCheckboxGroupProps, DsCheckboxProps, DsChip, DsChipGroup, type DsChipGroupProps, type DsChipProps, DsCommentBubble, DsCommentBubbleProps, DsCommentCard, DsCommentCardProps, DsCommentIndicator, DsCommentIndicatorProps, DsCommentThread, DsCommentThreadProps, DsCommentsDrawer, DsCommentsDrawerProps, DsConfirmation, type DsConfirmationProps, DsDataTableProps, DsDateInput, type DsDateInputProps, DsDatePicker, type DsDatePickerLocale, type DsDatePickerProps, type DsDatePickerSlotProps, DsDateRangePicker, type DsDateRangePickerLocale, type DsDateRangePickerProps, type DsDateRangePickerSlotProps, DsDialog, DsDialogProps, DsDivider, DsDividerProps, DsDrawer, type DsDrawerColumns, type DsDrawerPosition, type DsDrawerProps, DsDropdownMenu, DsDropdownMenuActionsProps, DsDropdownMenuContentProps, DsDropdownMenuHeaderProps, DsDropdownMenuItemGroupContentProps, DsDropdownMenuItemGroupLabelProps, DsDropdownMenuItemGroupProps, DsDropdownMenuItemIndicatorProps, DsDropdownMenuItemProps, DsDropdownMenuLegacy, DsDropdownMenuLegacyProps, DsDropdownMenuOptionLegacy, DsDropdownMenuPositioning, DsDropdownMenuRootProps, DsDropdownMenuSeparatorProps, DsDropdownMenuTriggerItemProps, DsDropdownMenuTriggerProps, DsExpandableTextInput, type DsExpandableTextInputProps, DsFileUpload, DsFileUploadProps, DsFilterStatusIcon, type DsFilterStatusIconProps, DsFormControl, DsFormControlDescriptionProps, DsFormControlProps, DsGrid, DsGridItem, DsGridItemProps, DsGridProps, DsIcon, DsIconProps, DsKeyValuePair, type DsKeyValuePairOrientation, type DsKeyValuePairProps, DsLoader, DsLoaderProps, DsModal, DsModalColumns, DsModalProps, DsNextStepButton, type DsNextStepButtonProps, DsNumberInput, DsNumberInputProps, DsPanel, type DsPanelCollapseButtonProps, type DsPanelProps, type DsPanelVariant, DsPasswordInput, DsPasswordInputProps, DsPopover, DsPopoverProps, DsProgressArc, DsProgressArcProps, DsProgressDonut, DsProgressDonutProps, DsProgressLinear, DsProgressLinearProps, DsRadioGroup, DsRadioGroupItemProps, DsRadioGroupLegacy, DsRadioGroupLegacyProps, DsRadioGroupRootProps, DsRadioOptionLegacy, DsSegmentGroup, DsSegmentGroupItemProps, DsSegmentGroupItemTextProps, DsSegmentGroupRootProps, DsSegmentGroupSize, DsSelect, type DsSelectOption, type DsSelectProps, _default as DsSkeleton, DsSkeletonBaseProps, DsSkeletonCircle, DsSkeletonCircleProps, DsSkeletonRect, DsSkeletonRectProps, DsSkeletonText, DsSkeletonTextProps, DsSmartTabProps, DsSmartTabs, DsSmartTabsProps, DsSpinner, DsSpinnerProps, DsSplitButton, DsSplitButtonProps, type DsSplitButtonSlotProps, DsStack, DsStackProps, type DsStatus, DsStatusBadge, type DsStatusBadgeProps, DsStep, DsStepContent, type DsStepContentProps, type DsStepProps, DsStepper, type DsStepperOrientation, type DsStepperProps, type DsStepperVariant, DsSystemStatus, DsSystemStatusProps, DsTable, DsTableApi, DsTableRowSize, DsTabs, DsTabsContentProps, DsTabsListProps, DsTabsMenuActionItem, DsTabsOrientation, DsTabsProps, DsTabsSize, DsTabsTabProps, DsTag, DsTagFilter, type DsTagFilterProps, type DsTagProps, DsTextInput, type DsTextInputProps, DsTextarea, DsTextareaProps, DsThreadItem, DsThreadItemProps, DsTimePicker, type DsTimePickerLocale, type DsTimePickerProps, type DsTimePickerSlotProps, type DsToastContextType, type DsToastProps, DsToastProvider, type DsToastProviderProps, DsToggle, type DsToggleProps, DsTooltip, DsTooltipProps, DsTree, DsTreeBaseProps, DsTreeBasePropsWithChildren, DsTreeBranchContentProps, DsTreeBranchControlProps, DsTreeBranchIndentGuideProps, DsTreeBranchIndicatorProps, DsTreeBranchProps, DsTreeBranchTextProps, DsTreeItemActionProps, DsTreeItemIndicatorProps, DsTreeItemProps, DsTreeItemTextProps, DsTreeNode, DsTreeNodeCheckboxProps, DsTreeRootProps, DsTreeSize, DsTreeTreeProps, DsTypography, DsTypographyProps, DsVerticalTabs, type DsVerticalTabsContentProps, type DsVerticalTabsListProps, type DsVerticalTabsRootProps, type DsVerticalTabsTabProps, DsWorkspace, type DsWorkspaceContentProps, type DsWorkspaceFooterProps, type DsWorkspaceHeaderProps, type DsWorkspaceProps, type DsWorkspaceSubHeaderProps, type DualRangeFilterAdapterConfig, type DualRangeFilterValue, FatalFileUploadError, type FileExtension, FileUpload, type FileUploadAdapter, FileUploadError, type FileUploadOptions, type FileUploadResult, FilterAdapter, type FilterAdapterConfig, FilterNavItem, FilterState, type FilterStatus, FilterTag, IconColor, IconName, IconSize, IconType, IconVariant, LoaderVariant, MaterialIconName, ProgressArcSize, ProgressArcVariant, ProgressDonutSize, ProgressDonutVariant, ProgressLinearSize, ProgressLinearVariant, type RangeFilterProps, type RangeFilterValue, type RangeValue, Responsive, ResponsiveValue, RetryableFileUploadError, type RowAction, type ScrollParams, type SecondaryRowAction, type SelectSize, SemanticVariant, SkeletonColorVariant, SkeletonRadiusVariant, SpinnerSize, type StatusBadgeSize, SystemStatus, type TagFilterItem, type TagSize, type TagVariant, type TextInputSize, type ToastVariant, type ToggleSize, TypographyColor, type UploadedFile, UseCheckboxSelectAllOptions, UseCheckboxSelectAllResult, type UseFileUploadReturn, type UseTableFiltersOptions, type UseTableFiltersResult, alertBannerVariants, breakpoints, buttonV3Colors, buttonV3Sizes, buttonV3Variants, cardSizes, checkboxVariants, colors, controlStatuses, createCheckboxFilterAdapter, createDsTreeCollection, createDualRangeFilterAdapter, createFilterAdapter, customIcons, dsKeyValuePairOrientations, dsTreeSizes, filterStatuses, formatTime, iconColors, iconSizes, iconVariants, isCustomIcon, isResponsiveValue, loaderVariants, progressArcSizes, progressArcVariants, progressDonutSizes, progressDonutVariants, progressLinearSizes, progressLinearVariants, resolveResponsiveValue, skeletonColorVariants, skeletonRadiusVariants, spinnerSizes, splitButtonSizes, systemStatuses, tagSizes, tagVariants, textInputSizes, useBreakpoint, useCheckboxSelectAll, useFileUpload, useResponsiveValue, useTableFilters, useToaster, withResponsiveProps };
+export { type AcceptedFileType, Action, AlertBannerVariant, AnyAdapter, BREAKPOINT_LG, Breakpoint, ButtonV3Color, ButtonV3Size, ButtonV3Variant, type CheckboxFilterAdapterConfig, type CheckboxFilterItem, type CheckboxFilterProps, CheckboxVariant, CheckedState, type ChipItem, type ChipSize, Color, ColumnFilterState, CommentAuthor, CommentData, CommentIndicatorType, CommentMessage, CommentsFilterState, ControlStatus, type CustomIconComponent, type CustomIconName, type DateRangeFormControlSlotProps, type DateRangePickerOrientation, type DateRangeValue, DropdownMenuItemVariant, DsAlertBanner, DsAlertBannerProps, DsAutocomplete, DsAutocompleteOption, DsAutocompleteProps, DsAvatar, DsAvatarGroup, DsAvatarGroupProps, DsAvatarProps, DsAvatarSize, DsAvatarType, DsBreadcrumb, DsBreadcrumbItem, DsBreadcrumbProps, DsButton, DsButtonUnifiedProps, DsButtonV3, DsButtonV3BaseProps, DsButtonV3Props, DsCard, type DsCardBodyProps, type DsCardFooterProps, type DsCardHeaderProps, type DsCardRootProps, type DsCardSize, DsCheckbox, DsCheckboxGroup, DsCheckboxGroupOrientation, DsCheckboxGroupProps, DsCheckboxProps, DsChip, DsChipGroup, type DsChipGroupProps, type DsChipProps, DsCommentBubble, DsCommentBubbleProps, DsCommentCard, DsCommentCardProps, DsCommentIndicator, DsCommentIndicatorProps, DsCommentThread, DsCommentThreadProps, DsCommentsDrawer, DsCommentsDrawerProps, DsConfirmation, type DsConfirmationProps, DsDataTableProps, DsDateInput, type DsDateInputProps, DsDatePicker, type DsDatePickerLocale, type DsDatePickerProps, type DsDatePickerSlotProps, DsDateRangePicker, type DsDateRangePickerLocale, type DsDateRangePickerProps, type DsDateRangePickerSlotProps, DsDialog, DsDialogProps, DsDivider, DsDividerProps, DsDrawer, type DsDrawerColumns, type DsDrawerPosition, type DsDrawerProps, DsDropdownMenu, DsDropdownMenuActionsProps, DsDropdownMenuContentProps, DsDropdownMenuHeaderProps, DsDropdownMenuItemGroupContentProps, DsDropdownMenuItemGroupLabelProps, DsDropdownMenuItemGroupProps, DsDropdownMenuItemIndicatorProps, DsDropdownMenuItemProps, DsDropdownMenuLegacy, DsDropdownMenuLegacyProps, DsDropdownMenuOptionLegacy, DsDropdownMenuPositioning, DsDropdownMenuRootProps, DsDropdownMenuSeparatorProps, DsDropdownMenuTriggerItemProps, DsDropdownMenuTriggerProps, DsExpandableTextInput, type DsExpandableTextInputProps, DsFileUpload, DsFileUploadProps, DsFilterStatusIcon, type DsFilterStatusIconProps, DsFormControl, DsFormControlDescriptionProps, DsFormControlProps, DsGrid, DsGridItem, DsGridItemProps, DsGridProps, DsIcon, DsIconProps, DsKeyValuePair, type DsKeyValuePairOrientation, type DsKeyValuePairProps, DsLoader, DsLoaderProps, DsModal, DsModalColumns, DsModalProps, DsNextStepButton, type DsNextStepButtonProps, DsNumberInput, DsNumberInputProps, DsPanel, type DsPanelCollapseButtonProps, type DsPanelProps, type DsPanelVariant, DsPasswordInput, DsPasswordInputProps, DsPopover, DsPopoverProps, DsProgressArc, DsProgressArcProps, DsProgressDonut, DsProgressDonutProps, DsProgressLinear, DsProgressLinearProps, DsRadioGroup, DsRadioGroupItemProps, DsRadioGroupLegacy, DsRadioGroupLegacyProps, DsRadioGroupRootProps, DsRadioOptionLegacy, DsSegmentGroup, DsSegmentGroupItemProps, DsSegmentGroupItemTextProps, DsSegmentGroupRootProps, DsSegmentGroupSize, DsSelect, type DsSelectOption, type DsSelectProps, _default as DsSkeleton, DsSkeletonBaseProps, DsSkeletonCircle, DsSkeletonCircleProps, DsSkeletonRect, DsSkeletonRectProps, DsSkeletonText, DsSkeletonTextProps, DsSmartTabProps, DsSmartTabs, DsSmartTabsProps, DsSpinner, DsSpinnerProps, DsSplitButton, DsSplitButtonProps, type DsSplitButtonSlotProps, DsStack, DsStackProps, type DsStatus, DsStatusBadge, type DsStatusBadgeProps, DsStep, DsStepContent, type DsStepContentProps, type DsStepProps, DsStepper, type DsStepperOrientation, type DsStepperProps, type DsStepperVariant, DsSystemStatus, DsSystemStatusProps, DsTable, DsTableApi, DsTableRowSize, DsTabs, DsTabsContentProps, DsTabsListProps, DsTabsMenuActionItem, DsTabsOrientation, DsTabsProps, DsTabsSize, DsTabsTabProps, DsTag, DsTagFilter, type DsTagFilterProps, type DsTagProps, DsTextInput, type DsTextInputProps, DsTextarea, DsTextareaProps, DsThreadItem, DsThreadItemProps, DsTimePicker, type DsTimePickerLocale, type DsTimePickerProps, type DsTimePickerSlotProps, type DsToastContextType, type DsToastProps, DsToastProvider, type DsToastProviderProps, DsToggle, type DsToggleProps, DsTooltip, DsTooltipProps, DsTree, DsTreeBaseProps, DsTreeBasePropsWithChildren, DsTreeBranchContentProps, DsTreeBranchControlProps, DsTreeBranchIndentGuideProps, DsTreeBranchIndicatorProps, DsTreeBranchProps, DsTreeBranchTextProps, DsTreeItemActionProps, DsTreeItemIndicatorProps, DsTreeItemProps, DsTreeItemTextProps, DsTreeNode, DsTreeNodeCheckboxProps, DsTreeRootProps, DsTreeSize, DsTreeTreeProps, DsTypography, DsTypographyProps, DsVerticalTabs, type DsVerticalTabsContentProps, type DsVerticalTabsListProps, type DsVerticalTabsRootProps, type DsVerticalTabsTabProps, DsWorkspace, type DsWorkspaceContentProps, type DsWorkspaceFooterProps, type DsWorkspaceHeaderProps, type DsWorkspaceProps, type DsWorkspaceSubHeaderProps, type DualRangeFilterAdapterConfig, type DualRangeFilterValue, FatalFileUploadError, type FileExtension, FileUpload, type FileUploadAdapter, FileUploadError, type FileUploadOptions, type FileUploadResult, FilterAdapter, type FilterAdapterConfig, FilterNavItem, FilterState, type FilterStatus, FilterTag, IconColor, IconName, IconSize, IconType, IconVariant, LoaderVariant, MaterialIconName, ProgressArcSize, ProgressArcVariant, ProgressDonutSize, ProgressDonutVariant, ProgressLinearSize, ProgressLinearVariant, type RangeFilterProps, type RangeFilterValue, type RangeValue, Responsive, ResponsiveValue, RetryableFileUploadError, type RowAction, type ScrollParams, type SecondaryRowAction, type SelectSize, SemanticVariant, SkeletonColorVariant, SkeletonRadiusVariant, SpinnerSize, type StatusBadgeSize, SystemStatus, type TagFilterItem, type TagSize, type TagVariant, type TextInputSize, type ToastVariant, type ToggleSize, TypographyColor, type UploadedFile, UseCheckboxSelectAllOptions, UseCheckboxSelectAllResult, type UseFileUploadReturn, type UseTableFiltersOptions, type UseTableFiltersResult, alertBannerVariants, breakpoints, buttonV3Colors, buttonV3Sizes, buttonV3Variants, cardSizes, checkboxVariants, colors, controlStatuses, createCheckboxFilterAdapter, createDsTreeCollection, createDualRangeFilterAdapter, createFilterAdapter, customIcons, dropdownMenuItemVariants, dsKeyValuePairOrientations, dsTreeSizes, filterStatuses, formatTime, iconColors, iconSizes, iconVariants, isCustomIcon, isResponsiveValue, loaderVariants, progressArcSizes, progressArcVariants, progressDonutSizes, progressDonutVariants, progressLinearSizes, progressLinearVariants, resolveResponsiveValue, skeletonColorVariants, skeletonRadiusVariants, spinnerSizes, splitButtonSizes, systemStatuses, tagSizes, tagVariants, textInputSizes, useBreakpoint, useCheckboxSelectAll, useFileUpload, useResponsiveValue, useTableFilters, useToaster, withResponsiveProps };
 //# sourceMappingURL=index.d.cts.map