@postxl/ui-components 1.5.1 → 1.5.3

package/dist/index.js

@@ -2488,6 +2488,12 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		return typeof v === "function" ? v : () => v;
 	}, [colCellMeta?.className]);
 	const colCellClassName = classNameResolver(rowOriginal);
+	const rowClassNameMeta = meta?.rowClassName;
+	const rowCellClassName = React$44.useMemo(() => {
+		if (!rowClassNameMeta) return void 0;
+		if (typeof rowClassNameMeta === "function") return rowClassNameMeta(cell.row);
+		return rowClassNameMeta;
+	}, [rowClassNameMeta, cell.row]);
 	const isSearchMatch = meta?.getIsSearchMatch?.(rowIndex, columnId) ?? false;
 	const isActiveSearchMatch = meta?.getIsActiveSearchMatch?.(rowIndex, columnId) ?? false;
 	const onClick = React$44.useCallback((event) => {
@@ -2588,7 +2594,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 			"text-left": align === "left",
 			"text-right": align === "right",
 			"text-center": align === "center"
-		}, {
+		}, rowCellClassName, colCellClassName, {
 			"ring-1 ring-foreground ring-inset dark:ring-secondary-foreground": isFocused,
 			"bg-yellow-100 dark:bg-yellow-900/30": isSearchMatch && !isActiveSearchMatch,
 			"bg-orange-200 dark:bg-orange-900/50": isActiveSearchMatch,
@@ -2599,7 +2605,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 			"**:data-[slot=grid-cell-content]:line-clamp-3": !isEditing && rowHeight === "tall",
 			"**:data-[slot=grid-cell-content]:line-clamp-4": !isEditing && rowHeight === "extra-tall",
 			"relative overflow-visible": !!overlayContent
-		}, colCellClassName, className),
+		}, className),
 		onClick,
 		onContextMenu,
 		onDoubleClick,
@@ -6285,7 +6291,7 @@ function useStore$1(store, selector) {
 	const getSnapshot = React$22.useCallback(() => selector(store.getState()), [store, selector]);
 	return React$22.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
 }
-function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRowsDelete: onRowsDeleteProp, onCellFocus: onCellFocusProp, onRowClick: onRowClickProp, highlightedRowIndex, rowHeight: rowHeightProp = DEFAULT_ROW_HEIGHT, overscan = OVERSCAN, initialState, autoFocus = false, enableColumnSelection = false, enableSearch = false, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, onLoadMore, loadMoreThreshold = 25, totalRowCount, persistColumnState = false,...dataGridProps }) {
+function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRowsDelete: onRowsDeleteProp, onCellFocus: onCellFocusProp, onRowClick: onRowClickProp, highlightedRowIndex, rowClassName, rowHeight: rowHeightProp = DEFAULT_ROW_HEIGHT, overscan = OVERSCAN, initialState, autoFocus = false, enableColumnSelection = false, enableSearch = false, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, onLoadMore, loadMoreThreshold = 25, totalRowCount, persistColumnState = false,...dataGridProps }) {
 	const dataGridRef = React$22.useRef(null);
 	const tableRef = React$22.useRef(null);
 	const rowVirtualizerRef = React$22.useRef(null);
@@ -6421,7 +6427,11 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 	}, [initialState, persistedState]);
 	const getNavigableColumnIds = React$22.useCallback(() => {
 		const t = tableRef.current;
-		if (t) return t.getVisibleLeafColumns().map((c) => c.id).filter((c) => !NON_NAVIGABLE_COLUMN_IDS.includes(c));
+		if (t) return [
+			...t.getLeftVisibleLeafColumns(),
+			...t.getCenterVisibleLeafColumns(),
+			...t.getRightVisibleLeafColumns()
+		].map((c) => c.id).filter((c) => !NON_NAVIGABLE_COLUMN_IDS.includes(c));
 		return columnIds.filter((c) => !NON_NAVIGABLE_COLUMN_IDS.includes(c));
 	}, [columnIds]);
 	const onDataUpdate = React$22.useCallback((updates) => {
@@ -7300,6 +7310,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			rowHeight,
 			isScrolling,
 			highlightedRowIndex,
+			rowClassName,
 			columnDefsVersion,
 			onRowClick: onRowClickProp,
 			getIsCellSelected,
@@ -7338,6 +7349,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		searchOpen,
 		isScrolling,
 		highlightedRowIndex,
+		rowClassName,
 		columnDefsVersion,
 		onRowClickProp,
 		getIsCellSelected,
@@ -9821,7 +9833,7 @@ function useSidebarTabs(side) {
 
 //#endregion
 //#region src/sidebar/sidebar-tab.tsx
-function SidebarTab({ side, id, icon, label, render, order }) {
+function SidebarTab({ side, id, icon, label, render, order, badge }) {
 	const ctx = React$10.useContext(SidebarTabsContext);
 	if (!ctx) throw new Error("SidebarTab must be used within a SidebarTabsProvider.");
 	const { register, unregister } = ctx;
@@ -9836,7 +9848,8 @@ function SidebarTab({ side, id, icon, label, render, order }) {
 			icon: iconRef.current,
 			label,
 			render: stableRender,
-			order
+			order,
+			badge
 		});
 		return () => unregister(side, id);
 	}, [
@@ -9844,6 +9857,7 @@ function SidebarTab({ side, id, icon, label, render, order }) {
 		id,
 		label,
 		order,
+		badge,
 		register,
 		unregister,
 		stableRender
@@ -9939,14 +9953,20 @@ function HorizontalTabBar({ side, tabs, activeTabId }) {
 		children: tabs.map((tab) => {
 			const Icon = tab.icon;
 			const isActive = tab.id === activeTabId;
+			const badge = tab.badge;
 			return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 				asChild: true,
-				children: /* @__PURE__ */ jsx("button", {
+				children: /* @__PURE__ */ jsxs("button", {
 					role: "tab",
 					"aria-selected": isActive,
-					className: cn("flex flex-1 items-center justify-center rounded-sm p-1.5 transition-colors", isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+					className: cn("flex flex-1 items-center justify-center rounded-sm p-1.5 transition-colors cursor-pointer group/button", isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground", badge && "pt-1"),
 					onClick: () => handleTabClick(tab.id),
-					children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+					children: [/* @__PURE__ */ jsx(Icon, { className: "size-4" }), badge && /* @__PURE__ */ jsx(Badge, {
+						size: "xs",
+						variant: badge.variant,
+						className: cn("ml-0.5 h-3.25 mb-1.25 px-1.5 group-hover/button:opacity-100 opacity-70 transition-opacity", isActive && "opacity-100", badge.className),
+						children: badge.label
+					})]
 				})
 			}), /* @__PURE__ */ jsx(TooltipContent, {
 				side: "bottom",
@@ -9973,14 +9993,20 @@ function VerticalTabBar({ side, tabs, activeTabId }) {
 		children: tabs.map((tab) => {
 			const Icon = tab.icon;
 			const isActive = tab.id === activeTabId;
+			const badge = tab.badge;
 			return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 				asChild: true,
-				children: /* @__PURE__ */ jsx("button", {
+				children: /* @__PURE__ */ jsxs("button", {
 					role: "tab",
 					"aria-selected": isActive,
-					className: cn("size-9 flex items-center justify-center rounded-md transition-colors", isActive ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50"),
+					className: cn("size-9 flex items-center justify-center rounded-md transition-colors cursor-pointer group/button", isActive ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50"),
 					onClick: () => handleTabClick(tab.id),
-					children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+					children: [/* @__PURE__ */ jsx(Icon, { className: "size-4" }), badge && /* @__PURE__ */ jsx(Badge, {
+						size: "xs",
+						variant: badge.variant,
+						className: cn("ml-0.5 h-3.25 mb-1.25 px-1.5 group-hover/button:opacity-100 opacity-70 transition-opacity", isActive && "opacity-100", badge.className),
+						children: badge.label
+					})]
 				})
 			}), /* @__PURE__ */ jsx(TooltipContent, {
 				side: side === "left" ? "right" : "left",
@@ -11265,7 +11291,7 @@ const TreeBranch = ({ node, level, onNodeSelect, onGroupSelect, onToggleGroup, i
 	const hasChildren = node.children && node.children.length > 0;
 	if (!isGroup) return /* @__PURE__ */ jsxs("div", {
 		"data-test-id": `tree-node-${node.id}`,
-		className: cn("relative flex items-center gap-2 py-1.5 px-2 rounded-md cursor-pointer hover:bg-accent hover:text-accent-foreground transition-colors border border-transparent hover:border hover:border-(--discreet-border)", { "bg-primary text-primary-foreground hover:border hover:border-(--discreet-border)": selectedId === node.id }),
+		className: cn("relative flex items-center gap-2 py-1.5 px-2 rounded-md cursor-pointer hover:bg-accent hover:text-accent-foreground transition-colors border border-transparent hover:border hover:border-(--discreet-border)", node.className, { "bg-primary text-primary-foreground hover:border hover:border-(--discreet-border)": selectedId === node.id }),
 		style: { marginLeft: `${level * 24}px` },
 		onClick: () => onNodeSelect?.(node),
 		children: [
@@ -11283,7 +11309,7 @@ const TreeBranch = ({ node, level, onNodeSelect, onGroupSelect, onToggleGroup, i
 		"data-test-id": `tree-group-${node.id}`,
 		children: [/* @__PURE__ */ jsxs(AccordionTrigger, {
 			style: { "--margin-left": `calc(${level * 24 + 16}px - 16px)` },
-			className: cn("flex flex-1 overflow-hidden items-center gap-2 py-1.5 px-2 rounded-md ml-(--margin-left) hover:bg-accent hover:text-accent-foreground hover:no-underline transition-colors border border-transparent hover:border hover:border-(--discreet-border)", "[&>svg:last-child]:hidden", { "bg-primary text-primary-foreground": selectedId === node.id }),
+			className: cn("flex flex-1 overflow-hidden items-center gap-2 py-1.5 px-2 rounded-md ml-(--margin-left) hover:bg-accent hover:text-accent-foreground hover:no-underline transition-colors border border-transparent hover:border hover:border-(--discreet-border)", "[&>svg:last-child]:hidden", node.className, { "bg-primary text-primary-foreground": selectedId === node.id }),
 			children: [
 				/* @__PURE__ */ jsx(PlusIcon, {
 					"data-test-id": `tree-expand-${node.id}`,