erp-pro-ui 0.1.7 → 0.1.8

package/dist/chunks/{data-table-BLt8DTVy.cjs → data-table-D0BD2sFz.cjs}

@@ -2,15 +2,16 @@ const require_chunk = require("./chunk-B_GkZjkl.cjs");
 const require_utils = require("./utils-B4SmmY4J.cjs");
 const require_icons = require("./icons-CRanVZB1.cjs");
 const require_button = require("./button-xqernofO.cjs");
-const require_select = require("./select-SOmIt-BD.cjs");
-const require_checkbox = require("./checkbox-NM_iPd6S.cjs");
-const require_chip = require("./chip-BY83_HK7.cjs");
-const require_combobox = require("./combobox-B7UIcjsI.cjs");
-const require_input = require("./input-DTW_8EwG.cjs");
-const require_tooltip = require("./tooltip-CKF78rni.cjs");
-const require_multi_select_combobox = require("./multi-select-combobox-FEbMAPEg.cjs");
-const require_switch = require("./switch-C9suGEWg.cjs");
-const require_date_picker = require("./date-picker-CfCvp6Tj.cjs");
+const require_DropdownMenu = require("./DropdownMenu-DOvo5pV_.cjs");
+const require_select = require("./select-CORFYTvs.cjs");
+const require_checkbox = require("./checkbox-D8ivRZ1x.cjs");
+const require_chip = require("./chip-CMs73sc5.cjs");
+const require_combobox = require("./combobox-DRiHHhXL.cjs");
+const require_input = require("./input-T4OlFhBc.cjs");
+const require_tooltip = require("./tooltip-PJaQa8_l.cjs");
+const require_multi_select_combobox = require("./multi-select-combobox-BzqYLVpV.cjs");
+const require_switch = require("./switch-DPyzVrNh.cjs");
+const require_date_picker = require("./date-picker-Cw_tZGuk.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -121,7 +122,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__ */ (0, react_jsx_runtime.jsx)(LoadingTableState, {
 		colSpan,
@@ -141,61 +142,62 @@ function DataTableRows({ table, hasRowActions, isLoading, bulkSelectionActive, s
 			children: customEmptyState
 		});
 	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TableRow, {
-		className: require_utils.mergeClassNames("border-b border-ds-border-2 transition-colors hover:bg-ds-surface-2", rowClassName),
-		children: [
-			bulkSelectionActive ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-				className: require_utils.mergeClassNames("w-12 px-4 py-3 align-middle", cellClassName),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_checkbox.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__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-				className: require_utils.mergeClassNames("px-4 py-3 text-sm text-ds-1", cellClassName),
-				children: (0, _tanstack_react_table.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__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { 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__ */ (0, react_jsx_runtime.jsxs)(react.default.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TableRow, {
+			className: require_utils.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__ */ (0, react_jsx_runtime.jsx)(TableCell, {
+					className: require_utils.mergeClassNames("w-12 px-4 py-3 align-middle", cellClassName),
+					onClick: (event) => event.stopPropagation(),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_checkbox.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__ */ (0, react_jsx_runtime.jsx)(TableCell, {
+					className: require_utils.mergeClassNames("px-4 py-3 text-sm text-ds-1", direction === "rtl" ? "text-right" : "text-left", cellClassName),
+					children: (0, _tanstack_react_table.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__ */ (0, react_jsx_runtime.jsx)(TableRow, {
+			className: require_utils.mergeClassNames("bg-ds-surface-2", rowClassName),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
+				colSpan,
+				className: require_utils.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.default.useRef(null);
-	react.default.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "fixed inset-0 z-40",
-		onClick: onClose,
-		"aria-hidden": "true"
-	}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.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__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 	onClick,
@@ -286,6 +288,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"
@@ -336,32 +339,34 @@ function DataTableToolbar({ direction, showRefreshButton = true, showExportButto
 							"aria-hidden": "true"
 						})
 					}) : null,
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarActionButton, {
-						onClick: onToggleColumnMenu,
-						title: labels.columnSettings,
-						label: labels.columnSettings,
-						isActive: columnMenuOpen,
-						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.ColumnsIcon, {
-							className: TABLE_COMPLEX_ICON_CLASS_NAME$1,
-							"aria-hidden": "true"
-						})
-					}),
 					toolbarActions,
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "relative",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterDropdown, {
-							isOpen: columnMenuOpen,
-							onClose: onCloseColumnMenu,
-							direction,
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColumnToggle, {
-								columns,
-								onToggle: (columnId) => {
-									onColumnToggle?.(columnId);
-								},
-								onShowAll: onShowAllColumns,
-								onHideAll: onHideAllColumns,
-								labels
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterDropdown, {
+						direction,
+						open: columnMenuOpen,
+						onOpenChange: (nextOpen) => {
+							if (nextOpen) {
+								if (!columnMenuOpen) onToggleColumnMenu();
+								return;
+							}
+							onCloseColumnMenu();
+						},
+						trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarActionButton, {
+							title: labels.columnSettings,
+							label: labels.columnSettings,
+							isActive: columnMenuOpen,
+							icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.ColumnsIcon, {
+								className: TABLE_COMPLEX_ICON_CLASS_NAME$1,
+								"aria-hidden": "true"
 							})
+						}),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColumnToggle, {
+							columns,
+							onToggle: (columnId) => {
+								onColumnToggle?.(columnId);
+							},
+							onShowAll: onShowAllColumns,
+							onHideAll: onHideAllColumns,
+							labels
 						})
 					})
 				]
@@ -573,9 +578,10 @@ function LoadingFilterField({ label }) {
 		]
 	});
 }
-function NumberRangeFilter({ value, onChange }) {
+function NumberRangeFilter({ value, direction, onChange }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex gap-2",
+		dir: direction,
+		className: `flex gap-2 ${direction === "rtl" ? "flex-row-reverse" : ""}`,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
 			type: "number",
 			placeholder: "Min",
@@ -597,30 +603,38 @@ function NumberRangeFilter({ value, onChange }) {
 		})]
 	});
 }
-function FilterFieldControl({ filter, value, isActive, onChange }) {
+function FilterFieldControl({ filter, value, isActive, direction, onChange }) {
 	if (filter.isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingFilterField, { label: filter.label });
 	switch (filter.type) {
 		case "text": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
+			dir: direction,
 			value: getStringFilterValue(value),
 			onChange: (event) => onChange(event.target.value),
 			placeholder: filter.placeholder || filter.label
 		});
 		case "select": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_select.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__ */ (0, react_jsx_runtime.jsx)(require_multi_select_combobox.MultiSelectCombobox, {
-			value: getMultiStringFilterValue(value),
-			onChange: (values) => onChange(values),
-			placeholder: filter.placeholder || filter.label,
-			options: toSelectOptions(filter.options)
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_combobox.Combobox, {
-			value: getStringFilterValue(value),
-			onChange: (nextValue) => onChange(nextValue),
-			placeholder: filter.placeholder || filter.label,
-			options: toSelectOptions(filter.options)
+		case "combobox": return filter.multiple ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			dir: direction,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_multi_select_combobox.MultiSelectCombobox, {
+				value: getMultiStringFilterValue(value),
+				onChange: (values) => onChange(values),
+				placeholder: filter.placeholder || filter.label,
+				options: toSelectOptions(filter.options)
+			})
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			dir: direction,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_combobox.Combobox, {
+				value: getStringFilterValue(value),
+				onChange: (nextValue) => onChange(nextValue),
+				placeholder: filter.placeholder || filter.label,
+				options: toSelectOptions(filter.options)
+			})
 		});
 		case "checkbox": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex h-10 items-center px-2",
@@ -633,6 +647,7 @@ function FilterFieldControl({ filter, value, isActive, onChange }) {
 		case "switch": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex h-10 items-center px-2",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_switch.Switch, {
+				dir: direction,
 				checked: Boolean(value),
 				onChange: (event) => onChange(event.target.checked)
 			})
@@ -651,18 +666,25 @@ function FilterFieldControl({ filter, value, isActive, onChange }) {
 		});
 		case "number-range": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberRangeFilter, {
 			value: getNumberRangeFilterValue(value),
+			direction,
 			onChange
 		});
-		default: return filter.multiple ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_multi_select_combobox.MultiSelectCombobox, {
-			value: getMultiStringFilterValue(value),
-			onChange: (values) => onChange(values),
-			placeholder: filter.placeholder || filter.label,
-			options: toSelectOptions(filter.options)
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_combobox.Combobox, {
-			value: getStringFilterValue(value),
-			onChange: (nextValue) => onChange(nextValue),
-			placeholder: filter.placeholder || filter.label,
-			options: toSelectOptions(filter.options)
+		default: return filter.multiple ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			dir: direction,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_multi_select_combobox.MultiSelectCombobox, {
+				value: getMultiStringFilterValue(value),
+				onChange: (values) => onChange(values),
+				placeholder: filter.placeholder || filter.label,
+				options: toSelectOptions(filter.options)
+			})
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			dir: direction,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_combobox.Combobox, {
+				value: getStringFilterValue(value),
+				onChange: (nextValue) => onChange(nextValue),
+				placeholder: filter.placeholder || filter.label,
+				options: toSelectOptions(filter.options)
+			})
 		});
 	}
 }
@@ -838,7 +860,8 @@ function RowActionsCell({ rowIndex, row, isOpen, openDirection, tableContainerRe
 		onClick: onClose
 	}), /* @__PURE__ */ (0, react_jsx_runtime.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: require_utils.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,
@@ -853,12 +876,12 @@ function RowActionsCell({ rowIndex, row, isOpen, openDirection, tableContainerRe
 				onRowAction?.(action.id, row);
 				onClose();
 			},
-			className: require_utils.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: require_utils.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__ */ (0, react_jsx_runtime.jsxs)("td", {
-		className: require_utils.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: require_utils.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__ */ (0, react_jsx_runtime.jsx)("div", {
 				"aria-hidden": "true",
@@ -872,7 +895,10 @@ function RowActionsCell({ rowIndex, row, isOpen, openDirection, tableContainerRe
 				ref: toggleAnchorRef,
 				className: require_utils.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__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
-					onClick: () => onToggle(rowIndex),
+					onClick: (event) => {
+						event.stopPropagation();
+						onToggle(rowIndex);
+					},
 					"aria-label": "Open row actions",
 					className: require_utils.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__ */ (0, react_jsx_runtime.jsx)(require_icons.EllipsisVerticalIcon, {
@@ -988,9 +1014,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__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "p-4 min-h-58 min-w-48 space-y-3",
+		dir: direction,
+		className: require_utils.mergeClassNames("p-4 min-h-58 min-w-48 space-y-3", direction === "rtl" ? "text-right" : "text-left"),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "mb-3 flex items-center justify-between",
@@ -1008,7 +1035,7 @@ function FilterSelectorMenu({ filterOptions, visibleFilters, onToggleFilter, onS
 				})
 			}, filter.id)),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex gap-2 border-t border-ds-border-2 pt-2",
+				className: require_utils.mergeClassNames("flex gap-2 border-t border-ds-border-2 pt-2", direction === "rtl" && "flex-row-reverse"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 						onClick: onShowAll,
@@ -1029,12 +1056,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.default.useRef(null);
 	const [tableDirection, setTableDirection] = react.default.useState("ltr");
 	react.default.useLayoutEffect(() => {
+		if (direction === "rtl" || direction === "ltr") {
+			setTableDirection(direction);
+			return;
+		}
 		setTableDirection(resolveTableDirection(tableRootRef.current));
-	}, []);
+	}, [direction]);
 	const isRtl = tableDirection === "rtl";
 	const resolvedRowActions = react.default.useMemo(() => rowActions ?? [], [rowActions]);
 	const hasRowActions = resolvedRowActions.length > 0;
@@ -1055,6 +1086,7 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 	const [bulkSelectionActive, setBulkSelectionActive] = react.default.useState(false);
 	const [selectedRowIds, setSelectedRowIds] = react.default.useState({});
 	const [rowMenuOpen, setRowMenuOpen] = react.default.useState(null);
+	const [expandedRowId, setExpandedRowId] = react.default.useState(null);
 	const [searchQuery, setSearchQuery] = react.default.useState("");
 	const [columnVisibility, setColumnVisibility] = react.default.useState(() => Object.fromEntries(columns.map((column) => [column.id, column.visible !== false])));
 	const columnsVisibilitySignature = react.default.useMemo(() => columns.map((column) => `${column.id}:${column.visible !== false}`).join("|"), [columns]);
@@ -1189,13 +1221,10 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 	const handleCloseRowMenu = react.default.useCallback(() => {
 		setRowMenuOpen(null);
 	}, []);
-	const tableContainerRef = react.default.useRef(null);
-	const handleToggleFilterSelector = react.default.useCallback(() => {
-		setFilterSelectorOpen((previous) => !previous);
-	}, []);
-	const handleToggleProfileMenu = react.default.useCallback(() => {
-		setProfileMenuOpen((previous) => !previous);
+	const handleToggleExpandedRow = react.default.useCallback((rowId) => {
+		setExpandedRowId((previous) => previous === rowId ? null : rowId);
 	}, []);
+	const tableContainerRef = react.default.useRef(null);
 	const handleToggleColumnMenu = react.default.useCallback(() => {
 		setColumnMenuOpen((previous) => !previous);
 	}, []);
@@ -1288,39 +1317,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__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-center gap-1 ml-auto",
+					className: "ms-auto flex items-center gap-1",
 					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "relative",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
-								onClick: handleToggleFilterSelector,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterDropdown, {
+							direction: tableDirection,
+							open: filterSelectorOpen,
+							onOpenChange: setFilterSelectorOpen,
+							trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
 								title: labels.addFilter,
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.FilterIcon, {
 									className: TABLE_COMPLEX_ICON_CLASS_NAME,
 									"aria-hidden": "true"
 								})
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterDropdown, {
-								isOpen: filterSelectorOpen,
-								onClose: () => setFilterSelectorOpen(false),
+							}),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterSelectorMenu, {
 								direction: tableDirection,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
 							onClick: handleResetFilters,
@@ -1331,28 +1359,25 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 								"aria-hidden": "true"
 							})
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "relative",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
-								onClick: handleToggleProfileMenu,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterDropdown, {
+							direction: tableDirection,
+							open: profileMenuOpen,
+							onOpenChange: setProfileMenuOpen,
+							trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
 								title: labels.filterProfiles,
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.FilterProfileIcon, {
 									className: TABLE_COMPLEX_ICON_CLASS_NAME,
 									"aria-hidden": "true"
 								})
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterDropdown, {
-								isOpen: profileMenuOpen,
-								onClose: () => setProfileMenuOpen(false),
-								direction: tableDirection,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "p-2 min-w-48",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.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__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "p-2 min-w-48",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+									onClick: handleOpenProfile,
+									className: require_utils.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
 					]
@@ -1439,6 +1464,7 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 									className: bodyClassName,
 									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableRows, {
 										table,
+										direction: tableDirection,
 										hasRowActions,
 										isLoading,
 										bulkSelectionActive,
@@ -1448,6 +1474,10 @@ function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize
 										onToggleRowMenu: handleToggleRowMenu,
 										onCloseRowMenu: handleCloseRowMenu,
 										onRowAction,
+										onRowClick,
+										expandedRowId,
+										onToggleExpandedRow: handleToggleExpandedRow,
+										renderRowDetails,
 										rowClassName,
 										cellClassName,
 										hasActiveFilters,
@@ -1585,4 +1615,4 @@ Object.defineProperty(exports, "ToolbarIconButton", {
 	}
 });
 
-//# sourceMappingURL=data-table-BLt8DTVy.cjs.map
+//# sourceMappingURL=data-table-D0BD2sFz.cjs.map