@postxl/ui-components 1.2.1 → 1.2.3

package/dist/index.js

@@ -1478,12 +1478,12 @@ function DropdownMenuSubContent({ className,...props }) {
 const TooltipProvider = TooltipPrimitive.Provider;
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React$34.forwardRef(({ className, sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
+const TooltipContent = React$34.forwardRef(({ className, sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
 	ref,
 	sideOffset,
 	className: cn("z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
 	...props
-}));
+}) }));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 //#endregion
@@ -2491,10 +2491,7 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
 					...getCommonPinningStyles({ column: cell.column }),
 					width: `calc(var(--col-${cell.column.id}-size) * 1px)`
 				},
-				children: typeof cell.column.columnDef.header === "function" ? /* @__PURE__ */ jsx("div", {
-					className: cn("size-full px-3 py-1.5", { "bg-accent-foreground/10": isRowSelected }),
-					children: flexRender(cell.column.columnDef.cell, cell.getContext())
-				}) : flexRender(cell.column.columnDef.cell, cell.getContext())
+				children: flexRender(cell.column.columnDef.cell, cell.getContext())
 			}, cell.id);
 		})
 	}, row.id);
@@ -2760,7 +2757,7 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
 										width: `calc(var(--header-${header.id}-size) * 1px)`
 									},
 									children: header.isPlaceholder ? null : typeof header.column.columnDef.header === "function" ? /* @__PURE__ */ jsx("div", {
-										className: "size-full px-3 py-1.5 bg-secondary/80 hover:bg-secondary/40",
+										className: "size-full px-3 py-1.5 bg-sidebar-accent/80 hover:bg-secondary/40",
 										children: flexRender(header.column.columnDef.header, header.getContext())
 									}) : /* @__PURE__ */ jsx(DataGridColumnHeader, {
 										header,
@@ -2842,7 +2839,7 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
 
 //#endregion
 //#region src/data-grid/data-grid-cell-wrapper.tsx
-function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFocused, isSelected, className, onClick: onClickProp, onKeyDown: onKeyDownProp,...props }) {
+function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFocused, isSelected, className, onClick: onClickProp, onKeyDown: onKeyDownProp, children,...props }) {
 	const meta = table.options.meta;
 	const rowOriginal = cell?.row?.original ?? {};
 	const colCellMeta = cell?.column?.columnDef?.meta;
@@ -2949,7 +2946,9 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		isEditable
 	]);
 	const rowHeight = meta?.rowHeight ?? "short";
-	return /* @__PURE__ */ jsx("div", {
+	const cellOverlay = colCellMeta?.cellOverlay;
+	const overlayContent = cellOverlay ? cellOverlay(rowOriginal, cell.getValue(), rowIndex, columnId) : null;
+	return /* @__PURE__ */ jsxs("div", {
 		role: "button",
 		"data-slot": "grid-cell-wrapper",
 		"data-editing": isEditing ? "" : void 0,
@@ -2969,7 +2968,8 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 			"**:data-[slot=grid-cell-content]:line-clamp-1": !isEditing && rowHeight === "short",
 			"**:data-[slot=grid-cell-content]:line-clamp-2": !isEditing && rowHeight === "medium",
 			"**:data-[slot=grid-cell-content]:line-clamp-3": !isEditing && rowHeight === "tall",
-			"**:data-[slot=grid-cell-content]:line-clamp-4": !isEditing && rowHeight === "extra-tall"
+			"**:data-[slot=grid-cell-content]:line-clamp-4": !isEditing && rowHeight === "extra-tall",
+			"relative overflow-visible": !!overlayContent
 		}, colCellClassName, className),
 		onClick,
 		onContextMenu,
@@ -2978,7 +2978,8 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		onMouseEnter,
 		onMouseUp,
 		onKeyDown,
-		...props
+		...props,
+		children: [children, overlayContent]
 	});
 }
 
@@ -3717,7 +3718,23 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		return typeof v === "function" ? v : () => Boolean(v);
 	}, [colMeta?.editable]);
 	const isEditable = editableResolver(cell.row.original);
-	const { min, max, step, prefix = "", suffix = "", fallbackValue = "" } = cellOptions?.variant === "number" ? cellOptions : {};
+	const { min, max, step, prefix, suffix, fallbackValue = "" } = cellOptions?.variant === "number" ? cellOptions : {};
+	const resolvedPrefix = React$19.useMemo(() => {
+		if (typeof prefix === "function") return prefix(cell.row.original, initialValue);
+		return prefix ?? null;
+	}, [
+		prefix,
+		cell.row.original,
+		initialValue
+	]);
+	const resolvedSuffix = React$19.useMemo(() => {
+		if (typeof suffix === "function") return suffix(cell.row.original, initialValue);
+		return suffix ?? null;
+	}, [
+		suffix,
+		cell.row.original,
+		initialValue
+	]);
 	const [editValue, setEditValue] = React$19.useState(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
 	const hasSubmittedRef = React$19.useRef(false);
 	React$19.useEffect(() => {
@@ -3748,7 +3765,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 	const saveAndStop = React$19.useCallback((options) => {
 		hasSubmittedRef.current = true;
 		const numValue = parseNumValue();
-		if (numValue !== initialValue) meta?.onDataUpdate?.({
+		meta?.onDataUpdate?.({
 			rowIndex,
 			columnId,
 			value: numValue
@@ -3756,7 +3773,6 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		meta?.onCellEditingStop?.(options);
 	}, [
 		parseNumValue,
-		initialValue,
 		meta,
 		rowIndex,
 		columnId
@@ -3832,10 +3848,10 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 		}) : /* @__PURE__ */ jsx("span", {
 			"data-slot": "grid-cell-content",
 			className: cn("tabular-nums", colMeta?.align ?? "text-right"),
-			children: initialValue === null || initialValue === void 0 || editValue === "" ? fallbackValue : /* @__PURE__ */ jsxs(Fragment, { children: [
-				prefix,
+			children: initialValue === null || initialValue === void 0 ? fallbackValue : /* @__PURE__ */ jsxs(Fragment, { children: [
+				resolvedPrefix,
 				initialValue.toLocaleString(),
-				suffix
+				resolvedSuffix
 			] })
 		})
 	});
@@ -3843,16 +3859,26 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 
 //#endregion
 //#region src/data-grid/cell-variants/react-node-cell.tsx
-function ReactNodeCell({ cell, table, rowIndex, columnId, isFocused, isSelected }) {
-	const children = cell.getValue();
+function ReactNodeCell({ cell, table, rowIndex, columnId, isFocused, isSelected, isEditing }) {
 	const containerRef = React$18.useRef(null);
+	const cellOpts = cell.column.columnDef.meta?.cell;
+	const renderFn = cellOpts?.variant === "react-node" ? cellOpts.render : void 0;
+	const children = renderFn ? renderFn({
+		cell,
+		table,
+		rowIndex,
+		columnId,
+		isFocused,
+		isSelected,
+		isEditing
+	}) : cell.getValue();
 	return /* @__PURE__ */ jsx(DataGridCellWrapper, {
 		ref: containerRef,
 		cell,
 		table,
 		rowIndex,
 		columnId,
-		isEditing: false,
+		isEditing,
 		isFocused,
 		isSelected,
 		className: "flex size-full justify-center p-0",
@@ -4042,7 +4068,8 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
 	const onBlur = React$16.useCallback(() => {
 		if (hasSubmittedRef.current) return;
 		const currentValue = inputRef.current?.value ?? "";
-		if (currentValue !== initialValue) meta?.onDataUpdate?.({
+		const normalizedInitial = initialValue ?? "";
+		if (currentValue !== normalizedInitial) meta?.onDataUpdate?.({
 			rowIndex,
 			columnId,
 			value: currentValue
@@ -4062,7 +4089,7 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
 			event.preventDefault();
 			hasSubmittedRef.current = true;
 			const currentValue = inputRef.current?.value ?? "";
-			if (currentValue !== initialValue) meta?.onDataUpdate?.({
+			meta?.onDataUpdate?.({
 				rowIndex,
 				columnId,
 				value: currentValue
@@ -4072,7 +4099,7 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
 			event.preventDefault();
 			hasSubmittedRef.current = true;
 			const currentValue = inputRef.current?.value ?? "";
-			if (currentValue !== initialValue) meta?.onDataUpdate?.({
+			meta?.onDataUpdate?.({
 				rowIndex,
 				columnId,
 				value: currentValue
@@ -7105,7 +7132,7 @@ function TabsContent({ className,...props }) {
 
 //#endregion
 //#region src/toggle/toggle.tsx
-const toggleVariants = cva("inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground", {
+const toggleVariants = cva("inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground cursor-pointer", {
 	variants: {
 		variant: {
 			default: "bg-transparent",