erp-pro-ui 0.1.7 → 0.1.8

package/dist/chunks/{data-table-B2r5OUFX.mjs → data-table-Biom5rvs.mjs}

@@ -1,15 +1,16 @@
 import { n as mergeClassNames } from "./utils-ati1KkDb.mjs";
 import { H as SearchIcon, L as ArrowDownIcon, M as ChevronLeftIcon, O as ChevronsRightIcon, R as TrashIcon, T as EllipsisVerticalIcon, a as RefreshIcon, d as FilterXIcon, f as FilterProfileIcon, j as ChevronRightIcon, k as ChevronsLeftIcon, l as LoaderIcon, m as ColumnsIcon, p as FilterIcon, r as SelectionIcon } from "./icons-bx3nrxNv.mjs";
 import { t as Button } from "./button-DddUhuR-.mjs";
-import { t as Select } from "./select-1rSJeUBQ.mjs";
-import { t as Checkbox } from "./checkbox-DjGpvMyo.mjs";
-import { r as Chip } from "./chip-CbO8-1lK.mjs";
-import { t as Combobox } from "./combobox-D6WnThIQ.mjs";
-import { t as Input } from "./input-CpARxvFi.mjs";
-import { t as Tooltip } from "./tooltip-CASvQiFQ.mjs";
-import { t as MultiSelectCombobox } from "./multi-select-combobox-CMhAXEGZ.mjs";
-import { t as Switch } from "./switch-hd7zTBD_.mjs";
-import { t as DatePicker } from "./date-picker-Bh6_p4bD.mjs";
+import { t as DropdownMenu } from "./DropdownMenu-C17Zqu_E.mjs";
+import { t as Select } from "./select-D0GOBB-b.mjs";
+import { t as Checkbox } from "./checkbox-3aB7XC9_.mjs";
+import { r as Chip } from "./chip-BFg3DJx6.mjs";
+import { t as Combobox } from "./combobox-Bcwi33Qx.mjs";
+import { t as Input } from "./input-Dox16Ozo.mjs";
+import { t as Tooltip } from "./tooltip-CmB8xKOF.mjs";
+import { t as MultiSelectCombobox } from "./multi-select-combobox-BrFtvCrS.mjs";
+import { t as Switch } from "./switch-C1gKE0m0.mjs";
+import { t as DatePicker } from "./date-picker-CXGwnrLr.mjs";
 import React from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
@@ -119,7 +120,7 @@ function EmptyTableState({ colSpan, rowClassName, cellClassName, children }) {
 		})
 	});
 }
-function DataTableRows({ table, hasRowActions, isLoading, bulkSelectionActive, selectedRowIds, onToggleRowSelection, rowMenuOpen, onToggleRowMenu, onCloseRowMenu, onRowAction, rowClassName, cellClassName, hasActiveFilters, searchQuery, renderEmptyState, renderRowActionsCell }) {
+function DataTableRows({ table, direction, hasRowActions, isLoading, bulkSelectionActive, selectedRowIds, onToggleRowSelection, rowMenuOpen, onToggleRowMenu, onCloseRowMenu, onRowAction, rowClassName, cellClassName, onRowClick, expandedRowId, onToggleExpandedRow, renderRowDetails, hasActiveFilters, searchQuery, renderEmptyState, renderRowActionsCell }) {
 	const colSpan = table.getVisibleLeafColumns().length + (bulkSelectionActive ? 1 : 0) + (hasRowActions ? 1 : 0);
 	if (isLoading) return /* @__PURE__ */ jsx(LoadingTableState, {
 		colSpan,
@@ -139,61 +140,62 @@ function DataTableRows({ table, hasRowActions, isLoading, bulkSelectionActive, s
 			children: customEmptyState
 		});
 	}
-	return /* @__PURE__ */ jsx(Fragment$1, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs(TableRow, {
-		className: mergeClassNames("border-b border-ds-border-2 transition-colors hover:bg-ds-surface-2", rowClassName),
-		children: [
-			bulkSelectionActive ? /* @__PURE__ */ jsx(TableCell, {
-				className: mergeClassNames("w-12 px-4 py-3 align-middle", cellClassName),
-				children: /* @__PURE__ */ jsx(Checkbox, {
-					"aria-label": `Select row ${row.id}`,
-					checked: Boolean(selectedRowIds[row.id]),
-					onChange: (event) => onToggleRowSelection(row.id, event.target.checked)
-				})
-			}) : null,
-			row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
-				className: mergeClassNames("px-4 py-3 text-sm text-ds-1", cellClassName),
-				children: flexRender(cell.column.columnDef.cell, cell.getContext())
-			}, cell.id)),
-			hasRowActions ? renderRowActionsCell({
-				rowIndex: row.index,
-				row: row.original,
-				isOpen: rowMenuOpen === row.index,
-				openDirection: row.index >= table.getRowModel().rows.length - 2 ? "up" : "down",
-				onToggle: onToggleRowMenu,
-				onClose: onCloseRowMenu,
-				onRowAction
-			}) : null
-		]
-	}, row.id)) });
+	return /* @__PURE__ */ jsx(Fragment$1, { children: table.getRowModel().rows.map((row) => {
+		const isExpandable = typeof renderRowDetails === "function";
+		const isExpanded = expandedRowId === row.id;
+		const handleRowToggle = () => {
+			onRowClick?.(row.original, row.index);
+			if (isExpandable) onToggleExpandedRow(row.id);
+		};
+		return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsxs(TableRow, {
+			className: mergeClassNames("border-b border-ds-border-2 transition-colors hover:bg-ds-surface-2", (isExpandable || onRowClick) && "cursor-pointer", rowClassName),
+			onClick: isExpandable || onRowClick ? handleRowToggle : void 0,
+			children: [
+				bulkSelectionActive ? /* @__PURE__ */ jsx(TableCell, {
+					className: mergeClassNames("w-12 px-4 py-3 align-middle", cellClassName),
+					onClick: (event) => event.stopPropagation(),
+					children: /* @__PURE__ */ jsx(Checkbox, {
+						"aria-label": `Select row ${row.id}`,
+						checked: Boolean(selectedRowIds[row.id]),
+						onChange: (event) => onToggleRowSelection(row.id, event.target.checked)
+					})
+				}) : null,
+				row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
+					className: mergeClassNames("px-4 py-3 text-sm text-ds-1", direction === "rtl" ? "text-right" : "text-left", cellClassName),
+					children: flexRender(cell.column.columnDef.cell, cell.getContext())
+				}, cell.id)),
+				hasRowActions ? renderRowActionsCell({
+					rowIndex: row.index,
+					row: row.original,
+					isOpen: rowMenuOpen === row.index,
+					openDirection: row.index >= table.getRowModel().rows.length - 2 ? "up" : "down",
+					onToggle: onToggleRowMenu,
+					onClose: onCloseRowMenu,
+					onRowAction
+				}) : null
+			]
+		}), isExpandable && isExpanded ? /* @__PURE__ */ jsx(TableRow, {
+			className: mergeClassNames("bg-ds-surface-2", rowClassName),
+			children: /* @__PURE__ */ jsx(TableCell, {
+				colSpan,
+				className: mergeClassNames("px-4 py-4 text-ds-1", direction === "rtl" ? "text-right" : "text-left", cellClassName),
+				children: renderRowDetails?.(row.original, row.index)
+			})
+		}) : null] }, row.id);
+	}) });
 }
 //#endregion
 //#region src/components/data-display/data-table/DataTableControls.tsx
-var FilterDropdown = ({ isOpen, onClose, children, direction = "ltr" }) => {
-	const panelRef = React.useRef(null);
-	React.useLayoutEffect(() => {
-		if (!isOpen || !panelRef.current) return;
-		panelRef.current.animate([{
-			opacity: 0,
-			transform: "translateY(-8px) scale(0.98)"
-		}, {
-			opacity: 1,
-			transform: "translateY(0) scale(1)"
-		}], {
-			duration: 220,
-			easing: "cubic-bezier(0.22, 1, 0.36, 1)"
-		});
-	}, [isOpen]);
-	if (!isOpen) return null;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-		className: "fixed inset-0 z-40",
-		onClick: onClose,
-		"aria-hidden": "true"
-	}), /* @__PURE__ */ jsx("div", {
-		ref: panelRef,
-		className: "absolute top-full z-50 mt-2 min-w-64 overflow-hidden rounded-[4px] border border-ds-border-2 bg-ds-surface-1 shadow-[0_18px_40px_rgba(15,23,42,0.18)] ring-1 ring-inset ring-ds-border-3/35 backdrop-blur-2xl",
-		style: direction === "rtl" ? { left: 0 } : { right: 0 },
+var FilterDropdown = ({ trigger, open, onOpenChange, children, direction = "ltr" }) => {
+	return /* @__PURE__ */ jsx(DropdownMenu, {
+		trigger,
+		open,
+		onOpenChange,
+		className: "relative",
+		animationClassName: `${direction === "rtl" ? "origin-top-left" : "origin-top-right"} transition-all duration-200 ease-[cubic-bezier(0.22,1,0.36,1)]`,
+		panelClassName: `top-full z-50 mt-2 min-w-64 overflow-hidden rounded-[4px] border border-ds-border-2 bg-ds-surface-1 shadow-[0_18px_40px_rgba(15,23,42,0.18)] ring-1 ring-inset ring-ds-border-3/35 backdrop-blur-2xl ${direction === "rtl" ? "left-0" : "right-0"}`,
 		children
-	})] });
+	});
 };
 var FilterButton = ({ icon, label, onClick, hasActive }) => /* @__PURE__ */ jsx(Button, {
 	onClick,
@@ -284,6 +286,7 @@ function SearchField({ value, onChange, placeholder, direction }) {
 			value,
 			onChange: (event) => onChange(event.target.value),
 			placeholder,
+			className: "placeholder:!text-ds-3",
 			style: {
 				paddingInlineStart: "2.75rem",
 				textAlign: direction === "rtl" ? "right" : "left"
@@ -334,32 +337,34 @@ function DataTableToolbar({ direction, showRefreshButton = true, showExportButto
 							"aria-hidden": "true"
 						})
 					}) : null,
-					/* @__PURE__ */ jsx(ToolbarActionButton, {
-						onClick: onToggleColumnMenu,
-						title: labels.columnSettings,
-						label: labels.columnSettings,
-						isActive: columnMenuOpen,
-						icon: /* @__PURE__ */ jsx(ColumnsIcon, {
-							className: TABLE_COMPLEX_ICON_CLASS_NAME$1,
-							"aria-hidden": "true"
-						})
-					}),
 					toolbarActions,
-					/* @__PURE__ */ jsx("div", {
-						className: "relative",
-						children: /* @__PURE__ */ jsx(FilterDropdown, {
-							isOpen: columnMenuOpen,
-							onClose: onCloseColumnMenu,
-							direction,
-							children: /* @__PURE__ */ jsx(ColumnToggle, {
-								columns,
-								onToggle: (columnId) => {
-									onColumnToggle?.(columnId);
-								},
-								onShowAll: onShowAllColumns,
-								onHideAll: onHideAllColumns,
-								labels
+					/* @__PURE__ */ jsx(FilterDropdown, {
+						direction,
+						open: columnMenuOpen,
+						onOpenChange: (nextOpen) => {
+							if (nextOpen) {
+								if (!columnMenuOpen) onToggleColumnMenu();
+								return;
+							}
+							onCloseColumnMenu();
+						},
+						trigger: /* @__PURE__ */ jsx(ToolbarActionButton, {
+							title: labels.columnSettings,
+							label: labels.columnSettings,
+							isActive: columnMenuOpen,
+							icon: /* @__PURE__ */ jsx(ColumnsIcon, {
+								className: TABLE_COMPLEX_ICON_CLASS_NAME$1,
+								"aria-hidden": "true"
 							})
+						}),
+						children: /* @__PURE__ */ jsx(ColumnToggle, {
+							columns,
+							onToggle: (columnId) => {
+								onColumnToggle?.(columnId);
+							},
+							onShowAll: onShowAllColumns,
+							onHideAll: onHideAllColumns,
+							labels
 						})
 					})
 				]
@@ -571,9 +576,10 @@ function LoadingFilterField({ label }) {
 		]
 	});
 }
-function NumberRangeFilter({ value, onChange }) {
+function NumberRangeFilter({ value, direction, onChange }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex gap-2",
+		dir: direction,
+		className: `flex gap-2 ${direction === "rtl" ? "flex-row-reverse" : ""}`,
 		children: [/* @__PURE__ */ jsx(Input, {
 			type: "number",
 			placeholder: "Min",
@@ -595,30 +601,38 @@ function NumberRangeFilter({ value, onChange }) {
 		})]
 	});
 }
-function FilterFieldControl({ filter, value, isActive, onChange }) {
+function FilterFieldControl({ filter, value, isActive, direction, onChange }) {
 	if (filter.isLoading) return /* @__PURE__ */ jsx(LoadingFilterField, { label: filter.label });
 	switch (filter.type) {
 		case "text": return /* @__PURE__ */ jsx(Input, {
+			dir: direction,
 			value: getStringFilterValue(value),
 			onChange: (event) => onChange(event.target.value),
 			placeholder: filter.placeholder || filter.label
 		});
 		case "select": return /* @__PURE__ */ jsx(Select, {
+			dir: direction,
 			value: getStringFilterValue(value),
 			onChange: (event) => onChange(event.target.value),
 			options: toSelectOptions(filter.options),
 			placeholder: filter.placeholder || filter.label
 		});
-		case "combobox": return filter.multiple ? /* @__PURE__ */ jsx(MultiSelectCombobox, {
-			value: getMultiStringFilterValue(value),
-			onChange: (values) => onChange(values),
-			placeholder: filter.placeholder || filter.label,
-			options: toSelectOptions(filter.options)
-		}) : /* @__PURE__ */ jsx(Combobox, {
-			value: getStringFilterValue(value),
-			onChange: (nextValue) => onChange(nextValue),
-			placeholder: filter.placeholder || filter.label,
-			options: toSelectOptions(filter.options)
+		case "combobox": return filter.multiple ? /* @__PURE__ */ jsx("div", {
+			dir: direction,
+			children: /* @__PURE__ */ jsx(MultiSelectCombobox, {
+				value: getMultiStringFilterValue(value),
+				onChange: (values) => onChange(values),
+				placeholder: filter.placeholder || filter.label,
+				options: toSelectOptions(filter.options)
+			})
+		}) : /* @__PURE__ */ jsx("div", {
+			dir: direction,
+			children: /* @__PURE__ */ jsx(Combobox, {
+				value: getStringFilterValue(value),
+				onChange: (nextValue) => onChange(nextValue),
+				placeholder: filter.placeholder || filter.label,
+				options: toSelectOptions(filter.options)
+			})
 		});
 		case "checkbox": return /* @__PURE__ */ jsx("div", {
 			className: "flex h-10 items-center px-2",
@@ -631,6 +645,7 @@ function FilterFieldControl({ filter, value, isActive, onChange }) {
 		case "switch": return /* @__PURE__ */ jsx("div", {
 			className: "flex h-10 items-center px-2",
 			children: /* @__PURE__ */ jsx(Switch, {
+				dir: direction,
 				checked: Boolean(value),
 				onChange: (event) => onChange(event.target.checked)
 			})
@@ -649,18 +664,25 @@ function FilterFieldControl({ filter, value, isActive, onChange }) {
 		});
 		case "number-range": return /* @__PURE__ */ jsx(NumberRangeFilter, {
 			value: getNumberRangeFilterValue(value),
+			direction,
 			onChange
 		});
-		default: return filter.multiple ? /* @__PURE__ */ jsx(MultiSelectCombobox, {
-			value: getMultiStringFilterValue(value),
-			onChange: (values) => onChange(values),
-			placeholder: filter.placeholder || filter.label,
-			options: toSelectOptions(filter.options)
-		}) : /* @__PURE__ */ jsx(Combobox, {
-			value: getStringFilterValue(value),
-			onChange: (nextValue) => onChange(nextValue),
-			placeholder: filter.placeholder || filter.label,
-			options: toSelectOptions(filter.options)
+		default: return filter.multiple ? /* @__PURE__ */ jsx("div", {
+			dir: direction,
+			children: /* @__PURE__ */ jsx(MultiSelectCombobox, {
+				value: getMultiStringFilterValue(value),
+				onChange: (values) => onChange(values),
+				placeholder: filter.placeholder || filter.label,
+				options: toSelectOptions(filter.options)
+			})
+		}) : /* @__PURE__ */ jsx("div", {
+			dir: direction,
+			children: /* @__PURE__ */ jsx(Combobox, {
+				value: getStringFilterValue(value),
+				onChange: (nextValue) => onChange(nextValue),
+				placeholder: filter.placeholder || filter.label,
+				options: toSelectOptions(filter.options)
+			})
 		});
 	}
 }
@@ -836,7 +858,8 @@ function RowActionsCell({ rowIndex, row, isOpen, openDirection, tableContainerRe
 		onClick: onClose
 	}), /* @__PURE__ */ jsx("div", {
 		ref: menuRef,
-		className: "fixed z-[230] min-w-[140px] max-w-[200px] overflow-hidden rounded-lg border border-ds-border-3 bg-ds-surface-2  shadow-xl",
+		dir: direction,
+		className: mergeClassNames("fixed z-[230] min-w-[140px] max-w-[200px] overflow-hidden rounded-lg border border-ds-border-3 bg-ds-surface-2 shadow-xl", direction === "rtl" ? "text-right" : "text-left"),
 		style: {
 			top: menuPosition?.top,
 			right: menuPosition?.right,
@@ -851,12 +874,12 @@ function RowActionsCell({ rowIndex, row, isOpen, openDirection, tableContainerRe
 				onRowAction?.(action.id, row);
 				onClose();
 			},
-			className: mergeClassNames("w-full justify-start rounded-none border-none bg-ds-surface-2 px-4 py-2 text-sm font-normal shadow-none hover:bg-ds-surface-3 hover:opacity-100", action.variant === "destructive" ? "text-error hover:text-error" : "text-ds-2 hover:text-ds-1"),
+			className: mergeClassNames("w-full rounded-none border-none bg-ds-surface-2 px-4 py-2 text-sm font-normal shadow-none hover:bg-ds-surface-3 hover:opacity-100", direction === "rtl" ? "justify-end text-right" : "justify-start text-left", action.variant === "destructive" ? "text-error hover:text-error" : "text-ds-2 hover:text-ds-1"),
 			children: action.label
 		}, action.id))
 	})] }), document.body) : null;
 	return /* @__PURE__ */ jsxs("td", {
-		className: mergeClassNames("relative h-full overflow-hidden border-x border-ds-border-2 bg-ds-surface-1 p-0 align-middle", direction === "rtl" ? "sticky left-0 text-left shadow-[8px_0_12px_-10px_rgba(15,23,42,0.35)]" : "sticky right-0 text-right shadow-[-8px_0_12px_-10px_rgba(15,23,42,0.35)]", ROW_ACTIONS_CELL_WIDTH_CLASS_NAME, isOpen ? "z-20" : "z-10"),
+		className: mergeClassNames("relative h-full overflow-hidden border-x border-ds-border-2 bg-ds-surface-1 p-0 align-middle", direction === "rtl" ? "sticky left-0 text-right shadow-[8px_0_12px_-10px_rgba(15,23,42,0.35)]" : "sticky right-0 text-right shadow-[-8px_0_12px_-10px_rgba(15,23,42,0.35)]", ROW_ACTIONS_CELL_WIDTH_CLASS_NAME, isOpen ? "z-20" : "z-10"),
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				"aria-hidden": "true",
@@ -870,7 +893,10 @@ function RowActionsCell({ rowIndex, row, isOpen, openDirection, tableContainerRe
 				ref: toggleAnchorRef,
 				className: mergeClassNames("absolute -inset-y-px z-10 flex items-stretch bg-ds-surface-2", direction === "rtl" ? "left-0 justify-start" : "right-0 justify-end"),
 				children: /* @__PURE__ */ jsx(Button, {
-					onClick: () => onToggle(rowIndex),
+					onClick: (event) => {
+						event.stopPropagation();
+						onToggle(rowIndex);
+					},
 					"aria-label": "Open row actions",
 					className: mergeClassNames("h-full w-12 rounded-none border-none px-0 py-0 shadow-none hover:opacity-100 ", isOpen ? "bg-ds-surface-2 text-ds-1" : "bg-ds-surface-2 text-ds-2 hover:bg-ds-surface-3 hover:text-ds-1"),
 					children: /* @__PURE__ */ jsx(EllipsisVerticalIcon, {
@@ -986,9 +1012,10 @@ function DataTablePagination({ table, totalCount, filteredCount, direction }) {
 		})]
 	});
 }
-function FilterSelectorMenu({ filterOptions, visibleFilters, onToggleFilter, onShowAll, onHideAll, labels, footerActions }) {
+function FilterSelectorMenu({ direction, filterOptions, visibleFilters, onToggleFilter, onShowAll, onHideAll, labels, footerActions }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "p-4 min-h-58 min-w-48 space-y-3",
+		dir: direction,
+		className: mergeClassNames("p-4 min-h-58 min-w-48 space-y-3", direction === "rtl" ? "text-right" : "text-left"),
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: "mb-3 flex items-center justify-between",
@@ -1006,7 +1033,7 @@ function FilterSelectorMenu({ filterOptions, visibleFilters, onToggleFilter, onS
 				})
 			}, filter.id)),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex gap-2 border-t border-ds-border-2 pt-2",
+				className: mergeClassNames("flex gap-2 border-t border-ds-border-2 pt-2", direction === "rtl" && "flex-row-reverse"),
 				children: [
 					/* @__PURE__ */ jsx(Button, {
 						onClick: onShowAll,
@@ -1027,12 +1054,16 @@ function FilterSelectorMenu({ filterOptions, visibleFilters, onToggleFilter, onS
 	});
 }
 var usesManualPagination = (totalCount, onPaginationChange) => totalCount !== void 0 || typeof onPaginationChange === "function";
-function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize = 10, maxHeight = "500px", onSearch, onRefresh, onExport, showRefreshButton = true, showExportButton = true, onRowAction, rowActions, onBulkDelete, renderBulkActions, renderBulkActionCard, onFilterChange, onFiltersApply, serverSideFiltering = false, filterOptions: externalFilterOptions, searchPlaceholder = "Search ...", totalCount, onPaginationChange, renderEmptyState, labels: labelsProp, renderFilterSelectorFooterActions, renderFilterRowActions, renderToolbarActions, className, tableContainerClassName, tableClassName, caption, captionClassName, headerClassName, headerRowClassName, headClassName, bodyClassName, rowClassName, cellClassName, footerClassName }) {
+function DataTable({ columns, data, direction = "auto", isLoading = false, onColumnToggle, pageSize = 10, maxHeight = "500px", onSearch, onRefresh, onExport, showRefreshButton = true, showExportButton = true, onRowAction, onRowClick, renderRowDetails, rowActions, onBulkDelete, renderBulkActions, renderBulkActionCard, onFilterChange, onFiltersApply, serverSideFiltering = false, filterOptions: externalFilterOptions, searchPlaceholder = "Search ...", totalCount, onPaginationChange, renderEmptyState, labels: labelsProp, renderFilterSelectorFooterActions, renderFilterRowActions, renderToolbarActions, className, tableContainerClassName, tableClassName, caption, captionClassName, headerClassName, headerRowClassName, headClassName, bodyClassName, rowClassName, cellClassName, footerClassName }) {
 	const tableRootRef = React.useRef(null);
 	const [tableDirection, setTableDirection] = React.useState("ltr");
 	React.useLayoutEffect(() => {
+		if (direction === "rtl" || direction === "ltr") {
+			setTableDirection(direction);
+			return;
+		}
 		setTableDirection(resolveTableDirection(tableRootRef.current));
-	}, []);
+	}, [direction]);
 	const isRtl = tableDirection === "rtl";
 	const resolvedRowActions = React.useMemo(() => rowActions ?? [], [rowActions]);
 	const hasRowActions = resolvedRowActions.length > 0;
@@ -1053,6 +1084,7 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 	const [bulkSelectionActive, setBulkSelectionActive] = React.useState(false);
 	const [selectedRowIds, setSelectedRowIds] = React.useState({});
 	const [rowMenuOpen, setRowMenuOpen] = React.useState(null);
+	const [expandedRowId, setExpandedRowId] = React.useState(null);
 	const [searchQuery, setSearchQuery] = React.useState("");
 	const [columnVisibility, setColumnVisibility] = React.useState(() => Object.fromEntries(columns.map((column) => [column.id, column.visible !== false])));
 	const columnsVisibilitySignature = React.useMemo(() => columns.map((column) => `${column.id}:${column.visible !== false}`).join("|"), [columns]);
@@ -1187,13 +1219,10 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 	const handleCloseRowMenu = React.useCallback(() => {
 		setRowMenuOpen(null);
 	}, []);
-	const tableContainerRef = React.useRef(null);
-	const handleToggleFilterSelector = React.useCallback(() => {
-		setFilterSelectorOpen((previous) => !previous);
-	}, []);
-	const handleToggleProfileMenu = React.useCallback(() => {
-		setProfileMenuOpen((previous) => !previous);
+	const handleToggleExpandedRow = React.useCallback((rowId) => {
+		setExpandedRowId((previous) => previous === rowId ? null : rowId);
 	}, []);
+	const tableContainerRef = React.useRef(null);
 	const handleToggleColumnMenu = React.useCallback(() => {
 		setColumnMenuOpen((previous) => !previous);
 	}, []);
@@ -1286,39 +1315,38 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 								filter,
 								value: activeFilters[filter.id],
 								isActive,
+								direction: tableDirection,
 								onChange: (value) => handleFilterChange(filter.id, value)
 							})
 						}, filter.id);
 					})
 				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-1 ml-auto",
+					className: "ms-auto flex items-center gap-1",
 					children: [
-						/* @__PURE__ */ jsxs("div", {
-							className: "relative",
-							children: [/* @__PURE__ */ jsx(ToolbarIconButton, {
-								onClick: handleToggleFilterSelector,
+						/* @__PURE__ */ jsx(FilterDropdown, {
+							direction: tableDirection,
+							open: filterSelectorOpen,
+							onOpenChange: setFilterSelectorOpen,
+							trigger: /* @__PURE__ */ jsx(ToolbarIconButton, {
 								title: labels.addFilter,
 								children: /* @__PURE__ */ jsx(FilterIcon, {
 									className: TABLE_COMPLEX_ICON_CLASS_NAME,
 									"aria-hidden": "true"
 								})
-							}), /* @__PURE__ */ jsx(FilterDropdown, {
-								isOpen: filterSelectorOpen,
-								onClose: () => setFilterSelectorOpen(false),
+							}),
+							children: /* @__PURE__ */ jsx(FilterSelectorMenu, {
 								direction: tableDirection,
-								children: /* @__PURE__ */ jsx(FilterSelectorMenu, {
-									filterOptions,
-									visibleFilters,
-									onToggleFilter: handleToggleFilterVisibility,
+								filterOptions,
+								visibleFilters,
+								onToggleFilter: handleToggleFilterVisibility,
+								onShowAll: handleShowAllFilters,
+								onHideAll: handleHideAllFilters,
+								labels,
+								footerActions: renderFilterSelectorFooterActions?.({
 									onShowAll: handleShowAllFilters,
-									onHideAll: handleHideAllFilters,
-									labels,
-									footerActions: renderFilterSelectorFooterActions?.({
-										onShowAll: handleShowAllFilters,
-										onHideAll: handleHideAllFilters
-									})
+									onHideAll: handleHideAllFilters
 								})
-							})]
+							})
 						}),
 						/* @__PURE__ */ jsx(ToolbarIconButton, {
 							onClick: handleResetFilters,
@@ -1329,28 +1357,25 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 								"aria-hidden": "true"
 							})
 						}),
-						/* @__PURE__ */ jsxs("div", {
-							className: "relative",
-							children: [/* @__PURE__ */ jsx(ToolbarIconButton, {
-								onClick: handleToggleProfileMenu,
+						/* @__PURE__ */ jsx(FilterDropdown, {
+							direction: tableDirection,
+							open: profileMenuOpen,
+							onOpenChange: setProfileMenuOpen,
+							trigger: /* @__PURE__ */ jsx(ToolbarIconButton, {
 								title: labels.filterProfiles,
 								children: /* @__PURE__ */ jsx(FilterProfileIcon, {
 									className: TABLE_COMPLEX_ICON_CLASS_NAME,
 									"aria-hidden": "true"
 								})
-							}), /* @__PURE__ */ jsx(FilterDropdown, {
-								isOpen: profileMenuOpen,
-								onClose: () => setProfileMenuOpen(false),
-								direction: tableDirection,
-								children: /* @__PURE__ */ jsx("div", {
-									className: "p-2 min-w-48",
-									children: /* @__PURE__ */ jsx(Button, {
-										onClick: handleOpenProfile,
-										className: "w-full justify-start border-2 border-dashed border-ds-border-accent/40 bg-transparent px-4 py-3 text-start text-sm font-medium text-ds-1 shadow-none hover:bg-ds-accent-subtle hover:opacity-100",
-										children: labels.saveNewFilterProfile
-									})
+							}),
+							children: /* @__PURE__ */ jsx("div", {
+								className: "p-2 min-w-48",
+								children: /* @__PURE__ */ jsx(Button, {
+									onClick: handleOpenProfile,
+									className: mergeClassNames("w-full border-2 border-dashed border-ds-border-accent/40 bg-transparent px-4 py-3 text-sm font-medium text-ds-1 shadow-none hover:bg-ds-accent-subtle hover:opacity-100", tableDirection === "rtl" ? "justify-end text-right" : "justify-start text-left"),
+									children: labels.saveNewFilterProfile
 								})
-							})]
+							})
 						}),
 						renderFilterRowActions
 					]
@@ -1437,6 +1462,7 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 									className: bodyClassName,
 									children: /* @__PURE__ */ jsx(DataTableRows, {
 										table,
+										direction: tableDirection,
 										hasRowActions,
 										isLoading,
 										bulkSelectionActive,
@@ -1446,6 +1472,10 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 										onToggleRowMenu: handleToggleRowMenu,
 										onCloseRowMenu: handleCloseRowMenu,
 										onRowAction,
+										onRowClick,
+										expandedRowId,
+										onToggleExpandedRow: handleToggleExpandedRow,
+										renderRowDetails,
 										rowClassName,
 										cellClassName,
 										hasActiveFilters,
@@ -1494,4 +1524,4 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 //#endregion
 export { FilterButton as a, TableBody as c, TableContainer as d, TableFooter as f, TableRow as h, ColumnToggle as i, TableCaption as l, TableHeader as m, FilterProfile as n, FilterDropdown as o, TableHead as p, ToolbarIconButton as r, Table as s, DataTable as t, TableCell as u };
 
-//# sourceMappingURL=data-table-B2r5OUFX.mjs.map
+//# sourceMappingURL=data-table-Biom5rvs.mjs.map