@firecms/core 3.0.0-canary.99 → 3.0.0-rc.2

package/src/components/UnsavedChangesDialog.tsx

@@ -0,0 +1,46 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
+
+export interface UnsavedChangesDialogProps {
+    open: boolean;
+    body?: React.ReactNode;
+    title?: string;
+    handleOk: () => void;
+    handleCancel: () => void;
+}
+
+export function UnsavedChangesDialog({
+                                         open,
+                                         handleOk,
+                                         handleCancel,
+                                         body,
+                                         title
+                                     }: UnsavedChangesDialogProps) {
+
+    return (
+        <Dialog
+            onEscapeKeyDown={() => {
+                handleCancel();
+            }}
+            open={open}
+        >
+            <DialogTitle variant={"h6"}>{title}</DialogTitle>
+            <DialogContent>
+
+                {body}
+
+                <Typography>
+                    Are you sure you want to leave this page?
+                </Typography>
+
+            </DialogContent>
+            <DialogActions>
+                <Button variant="text"
+                        color={"primary"}
+                        onClick={handleCancel} autoFocus> Cancel </Button>
+                <Button
+                    color={"primary"}
+                    onClick={handleOk}> Ok </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}

package/src/components/UserDisplay.tsx

@@ -0,0 +1,55 @@
+import { User } from "../types";
+import { AccountCircleIcon, cls, defaultBorderMixin } from "@firecms/ui";
+import { EmptyValue } from "../preview";
+
+/**
+ * Component to render a single user with name and email
+ */
+export function UserDisplay({
+                                user,
+                            }: { user: User | null }) {
+    if (!user) {
+        return <EmptyValue/>;
+    }
+
+    const avatarSizeClass = "w-6 h-6";
+
+    return (
+        <div className={cls(
+            "inline-flex items-center gap-4 px-2 py-1 rounded-xl",
+            "bg-surface-accent-100 dark:bg-surface-accent-800",
+            "border",
+            defaultBorderMixin
+        )}>
+            {user.photoURL ? (
+                <img
+                    src={user.photoURL}
+                    alt={user.displayName || user.email || "User"}
+                    className={cls(
+                        "rounded-full object-cover",
+                        avatarSizeClass
+                    )}
+                />
+            ) : (
+                <AccountCircleIcon
+                    className={cls(
+                        "text-text-secondary dark:text-text-secondary-dark",
+                        avatarSizeClass
+                    )}
+                />
+            )}
+            <div className="flex flex-col min-w-0">
+                <span className={cls("font-regular truncate", "text-sm")}>
+                    {user.displayName || user.email || "-"}
+                </span>
+                {user.displayName && user.email && (
+                    <span className={cls("text-text-secondary dark:text-text-secondary-dark truncate",
+                        "text-xs"
+                    )}>
+                        {user.email}
+                    </span>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/components/VirtualTable/VirtualTable.tsx

@@ -20,6 +20,7 @@ import { VirtualTableHeaderRow } from "./VirtualTableHeaderRow";
 import { VirtualTableRow } from "./VirtualTableRow";
 import { VirtualTableCell } from "./VirtualTableCell";
 import { AssignmentIcon, CenteredView, cls, Typography } from "@firecms/ui";
+import { useDebounceCallback } from "../common/useDebouncedCallback";
 
 const VirtualListContext = createContext<VirtualTableContextProps<any>>({} as any);
 VirtualListContext.displayName = "VirtualListContext";
@@ -63,10 +64,10 @@ const innerElementType = forwardRef<HTMLDivElement, InnerElementProps>(({
 
                             {customView && <div style={{
                                 position: "sticky",
-                                top: "56px",
+                                top: "48px",
                                 flexGrow: 1,
-                                height: "calc(100% - 56px)",
-                                marginTop: "calc(56px - 100vh)",
+                                height: "calc(100% - 48px)",
+                                marginTop: "calc(48px - 100vh)",
                                 left: 0
                             }}>{customView}</div>}
 
@@ -103,6 +104,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              error,
                                                              emptyComponent,
                                                              onSortByUpdate,
+                                                             onScroll: onScrollProp,
                                                              loading,
                                                              cellRenderer,
                                                              hoverRow,
@@ -112,7 +114,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              className,
                                                              endAdornment,
                                                              AddColumnComponent,
-                                                             debug
+                                                             initialScroll = 0,
                                                          }: VirtualTableProps<T>) {
 
         const sortByProperty: string | undefined = sortBy ? sortBy[0] : undefined;
@@ -123,21 +125,59 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         const tableRef = useRef<HTMLDivElement>(null);
         const endReachCallbackThreshold = useRef<number>(0);
 
+        const debouncedScroll = useDebounceCallback(onScrollProp, 200);
+
+        // Set initial scroll position
+        useEffect(() => {
+            if (tableRef.current && initialScroll) {
+                const { scrollLeft } = tableRef.current;
+                tableRef.current.scrollTo(scrollLeft, initialScroll);
+            }
+        }, [tableRef, initialScroll]);
+
         useEffect(() => {
             setColumns(columnsProp);
         }, [columnsProp]);
 
-        const [measureRef, bounds] = useMeasure();
+        const [_, setForceUpdate] = useState(false);
+        useEffect(() => {
+            // Create a ResizeObserver to detect size changes more aggressively
+            if (tableRef.current) {
+                const resizeObserver = new ResizeObserver(() => {
+                    // Force a re-render when size changes
+                    setForceUpdate(prev => !prev);
+                });
+
+                resizeObserver.observe(tableRef.current);
+
+                return () => {
+                    if (tableRef.current) {
+                        resizeObserver.unobserve(tableRef.current);
+                    }
+                    resizeObserver.disconnect();
+                };
+            }
+            return () => {
+            }
+        }, [tableRef]);
+
+        const [measureRef, bounds] = useMeasure({
+            debounce: 50,
+            polyfill: ResizeObserver,
+            scroll: true,
+            // This is important for handling zooming in react-flow
+            offsetSize: true
+        });
 
         const onColumnResizeInternal = useCallback((params: OnVirtualTableColumnResizeParams) => {
-            if (debug)
-                console.log("onColumnResizeInternal", params);
-            setColumns(columns.map((column) => column.key === params.column.key ? params.column : column));
-        }, [columns]);
+            setColumns(prevColumns =>
+                prevColumns.map((column) =>
+                    column.key === params.column.key ? params.column : column
+                )
+            );
+        }, []);
 
         const onColumnResizeEndInternal = useCallback((params: OnVirtualTableColumnResizeParams) => {
-            if (debug)
-                console.log("onColumnResizeEndInternal", params);
             setColumns(columns.map((column) => column.key === params.column.key ? params.column : column));
             if (onColumnResize) {
                 onColumnResize(params);
@@ -148,26 +188,18 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         const filterRef = useRef<VirtualTableFilterValues<any> | undefined>();
 
         useEffect(() => {
-            if (debug)
-                console.log("Filter updated", filterInput);
             filterRef.current = filterInput;
         }, [filterInput]);
 
         const scrollToTop = useCallback(() => {
-            if (debug)
-                console.log("scrollToTop");
             endReachCallbackThreshold.current = 0;
             if (tableRef.current) {
-                // scrollRef.current = [scrollRef.current[0], 0];
                 tableRef.current.scrollTo(tableRef.current?.scrollLeft, 0);
             }
         }, []);
 
         const onColumnSort = useCallback((key: string) => {
 
-            if (debug)
-                console.log("onColumnSort", key);
-
             const isDesc = sortByProperty === key && currentSort === "desc";
             const isAsc = sortByProperty === key && currentSort === "asc";
             const newSort = isAsc ? "desc" : (isDesc ? undefined : "asc");
@@ -195,12 +227,8 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         }, [checkFilterCombination, currentSort, onFilterUpdate, onResetPagination, onSortByUpdate, scrollToTop, sortByProperty]);
 
         const maxScroll = Math.max((data?.length ?? 0) * rowHeight - bounds.height, 0);
-        if (debug)
-            console.log("maxScroll", maxScroll);
 
         const onEndReachedInternal = useCallback((scrollOffset: number) => {
-            if (debug)
-                console.log("onEndReachedInternal", scrollOffset, endReachCallbackThreshold.current + endOffset);
             if (onEndReached && (data?.length ?? 0) > 0 && scrollOffset > endReachCallbackThreshold.current + endOffset) {
                 endReachCallbackThreshold.current = scrollOffset;
                 onEndReached();
@@ -216,19 +244,18 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             scrollOffset: number,
             scrollUpdateWasRequested: boolean;
         }) => {
-            if(debug)
-                console.log("onScroll", {
+            if (onScrollProp) {
+                debouncedScroll({
                     scrollDirection,
                     scrollOffset,
                     scrollUpdateWasRequested
-                });
+                })
+            }
             if (!scrollUpdateWasRequested && (scrollOffset >= maxScroll - endOffset))
                 onEndReachedInternal(scrollOffset);
         }, [maxScroll, onEndReachedInternal]);
 
         const onFilterUpdateInternal = useCallback((column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, any]) => {
-            if(debug)
-                console.log("onFilterUpdateInternal", column, filterForProperty);
 
             endReachCallbackThreshold.current = 0;
             const filter = filterRef.current;
@@ -248,29 +275,27 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             if (onFilterUpdate) onFilterUpdate(newFilterValue);
         }, [checkFilterCombination, currentSort, onFilterUpdate, sortByProperty]);
 
-        const buildEmptyView = useCallback(() => {
-            if (loading)
-                return <CircularProgressCenter/>;
-            return <div
-                className="flex flex-col overflow-auto items-center justify-center p-2 gap-2 h-full">
-                <AssignmentIcon/>
-                {emptyComponent}
-            </div>;
-        }, [emptyComponent, loading]);
-
         const empty = !loading && (data?.length ?? 0) === 0;
         const customView = error
             ? <CenteredView maxWidth={"2xl"}
                             className="flex flex-col gap-2">
 
                 <Typography variant={"h6"}>
-                    {"Error fetching data from the data source"}
+                    {"Error"}
                 </Typography>
 
                 {error?.message && <SafeLinkRenderer text={error.message}/>}
 
             </CenteredView>
-            : (empty ? buildEmptyView() : undefined);
+            : (empty
+                ? (loading
+                    ? <CircularProgressCenter/>
+                    : <div
+                        className="flex flex-col overflow-auto items-center justify-center p-2 gap-2 h-full">
+                        <AssignmentIcon/>
+                        {emptyComponent}
+                    </div>)
+                : undefined);
 
         const virtualListController = {
             data,
@@ -293,10 +318,6 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             AddColumnComponent
         };
 
-        if(debug)
-            console.log("VirtualTable render", virtualListController);
-
-        // useTraceUpdate(virtualListController);
         return (
             <div
                 ref={measureRef}

package/src/components/VirtualTable/VirtualTableCell.tsx

@@ -30,14 +30,6 @@ export const VirtualTableCell = React.memo<VirtualTableCellProps<any>>(
                 width: props.column.width
             } as CellRendererParams<T>
         );
-        // return props.rowData && <props.cellRenderer
-        //     rowData={props.rowData}
-        //     rowIndex={props.rowIndex}
-        //     isScrolling={false}
-        //     column={props.column}
-        //     columns={props.columns}
-        //     columnIndex={props.columnIndex}
-        //     width={props.column.width}/>
     },
     (a, b) => {
         return equal(a.rowData, b.rowData) &&

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -85,9 +85,9 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
         return (
             <ErrorBoundary>
                 <div
-                    className={cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center bg-gray-50 dark:bg-gray-900",
-                        "text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 ",
-                        "hover:bg-gray-100 dark:hover:bg-gray-800 hover:bg-opacity-50 dark:hover:bg-opacity-50",
+                    className={cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center bg-surface-50 dark:bg-surface-900",
+                        "text-text-secondary hover:text-text-primary dark:text-text-secondary-dark dark:hover:text-text-primary-dark",
+                        "hover:bg-surface-100 dark:hover:bg-surface-800 hover:bg-opacity-50 dark:hover:bg-opacity-50",
                         column.frozen ? "sticky left-0 z-10" : "relative z-0"
                     )}
                     style={{
@@ -130,7 +130,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                    invisible={!sort}>
                                 <IconButton
                                     size={"small"}
-                                    className={onHover || openFilter ? "bg-white dark:bg-gray-950" : undefined}
+                                    className={onHover || openFilter ? "bg-white dark:bg-surface-950" : undefined}
                                     onClick={() => {
                                         onColumnSort(column.key as Extract<keyof M, string>);
                                     }}
@@ -157,7 +157,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                 modal={true}
                                 trigger={
                                     <IconButton
-                                        className={onHover || openFilter ? "bg-white dark:bg-gray-950" : undefined}
+                                        className={onHover || openFilter ? "bg-white dark:bg-surface-950" : undefined}
                                         size={"small"}
                                         onClick={handleSettingsClick}>
                                         <FilterListIcon size={"small"}/>
@@ -181,7 +181,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                         ref={resizeHandleRef}
                         className={cls(
                             "absolute h-full w-[6px] top-0 right-0 cursor-col-resize",
-                            hovered && "bg-gray-300 dark:bg-gray-700"
+                            hovered && "bg-surface-300 dark:bg-surface-700"
                         )}
                         onMouseDown={onClickResizeColumn ? () => onClickResizeColumn(columnIndex, column) : undefined}
                     />}
@@ -238,9 +238,9 @@ function FilterForm<M>({
                   e.preventDefault();
                   submit();
               }}
-              className={"text-gray-900 dark:text-white"}>
+              className={"text-surface-900 dark:text-white"}>
             <div
-                className={cls(defaultBorderMixin, "py-4 px-6 text-xs font-semibold uppercase border-b")}>
+                className={cls(defaultBorderMixin, "py-4 px-6 typography-label border-b")}>
                 {column.title ?? id}
             </div>
             {filterField && <div className="m-4">

package/src/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -100,7 +100,7 @@ export const VirtualTableHeaderRow = ({
 
     return (
         <div
-            className={cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 h-12 border-b bg-gray-50 dark:bg-gray-900")}>
+            className={cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 h-12 border-b bg-surface-50 dark:bg-surface-900")}>
             {columns.map((c, columnIndex) => {
                 const column = columns[columnIndex];
 

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -82,6 +82,16 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     onFilterUpdate?: (filter?: VirtualTableFilterValues<any> | undefined) => void;
 
+    /**
+     * Callback when the table is scrolled
+     * @param props
+     */
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward",
+        scrollOffset: number,
+        scrollUpdateWasRequested: boolean
+    }) => void;
+
     /**
      * Default sort applied to this collection
      */
@@ -148,9 +158,9 @@ export interface VirtualTableProps<T extends Record<string, any>> {
     AddColumnComponent?: React.ComponentType;
 
     /**
-     * Debug mode
+     * Initial scroll position
      */
-    debug?: boolean;
+    initialScroll?: number;
 
 }
 

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -29,7 +29,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
         return (
             <div
                 className={cls(
-                    "flex min-w-full text-sm border-b border-gray-200 dark:border-gray-800 border-opacity-40 dark:border-opacity-40",
+                    "flex min-w-full text-sm border-b border-surface-200 dark:border-surface-800 border-opacity-40 dark:border-opacity-40",
                     rowClassName ? rowClassName(rowData) : "",
                     {
                         "hover:bg-opacity-95": hoverRow,

package/src/components/VirtualTable/fields/VirtualTableDateField.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { DateTimeField } from "@firecms/ui";
+import { cls, DateTimeField, focusedDisabled } from "@firecms/ui";
 import { useCustomizationController } from "../../../hooks";
 
 export function VirtualTableDateField(props: {
@@ -26,10 +26,10 @@ export function VirtualTableDateField(props: {
         <DateTimeField
             value={internalValue ?? undefined}
             onChange={(dateValue) => updateValue(dateValue ?? null)}
-            size={"medium"}
+            size={"large"}
             invisible={true}
-            className={"w-full h-full"}
-            inputClassName={"w-full h-full"}
+            inputClassName={cls("w-full h-full", focusedDisabled)}
+            className={cls("w-full h-full", focusedDisabled)}
             mode={mode}
             locale={locale}
         />

package/src/components/VirtualTable/fields/VirtualTableInput.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 
 import { useDebouncedCallback } from "../../../util";
-import { TextareaAutosize } from "@firecms/ui";
+import { focusedDisabled, TextareaAutosize } from "@firecms/ui";
 
 export function VirtualTableInput(props: {
     error: Error | undefined;
@@ -58,6 +58,7 @@ export function VirtualTableInput(props: {
 
     return (
         <TextareaAutosize
+            className={focusedDisabled}
             ref={ref}
             style={{
                 padding: 0,
@@ -65,7 +66,6 @@ export function VirtualTableInput(props: {
                 width: "100%",
                 color: "unset",
                 fontWeight: "unset",
-                lineHeight: "unset",
                 fontSize: "unset",
                 fontFamily: "unset",
                 background: "unset",

package/src/components/VirtualTable/fields/VirtualTableNumberInput.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useDebouncedCallback } from "../../../util";
+import { cls, focusedDisabled } from "@firecms/ui";
 
 export function VirtualTableNumberInput(props: {
     error: Error | undefined;
@@ -65,7 +66,7 @@ export function VirtualTableNumberInput(props: {
     return (
         <input
             ref={ref}
-            className="w-full text-right p-0 m-0 bg-transparent border-none resize-none outline-none font-normal leading-normal text-unset"
+            className={cls("w-full text-right p-0 m-0 bg-transparent border-none resize-none outline-none font-normal leading-normal text-unset", focusedDisabled)}
             style={{
                 textAlign: align
             }}

package/src/components/VirtualTable/fields/VirtualTableSelect.tsx

@@ -1,5 +1,5 @@
 import { EnumValueConfig } from "../../../types";
-import { ArrayEnumPreview, EnumValuesChip } from "../../../preview";
+import { EnumValuesChip } from "../../../preview";
 import React, { useCallback, useEffect } from "react";
 import { MultiSelect, MultiSelectItem, Select, SelectItem } from "@firecms/ui";
 
@@ -18,9 +18,7 @@ export function VirtualTableSelect(props: {
 }) {
 
     const {
-        name,
         enumValues,
-        error,
         internalValue,
         disabled,
         small,
@@ -41,6 +39,7 @@ export function VirtualTableSelect(props: {
     }, [focused, ref]);
 
     const onChange = useCallback((updatedValue: string | string[]) => {
+        console.trace("onChange");
         if (valueType === "number") {
             if (multiple) {
                 const newValue = (updatedValue as string[]).map((v) => parseFloat(v));
@@ -58,37 +57,27 @@ export function VirtualTableSelect(props: {
         }
     }, [multiple, updateValue, valueType]);
 
-    const renderValue = (enumKey: string | number, index: number) => {
-        if (multiple && Array.isArray(enumKey)) {
-            return <ArrayEnumPreview
-                key={`${enumKey}-${index}`}
-                value={enumKey}
-                name={name}
-                enumValues={enumValues}
-                size={small ? "small" : "medium"}/>;
-        } else {
-            return <EnumValuesChip
-                key={`${enumKey}-${index}`}
-                enumKey={enumKey}
-                enumValues={enumValues}
-                size={small ? "small" : "medium"}/>;
-        }
+    const renderValue = (enumKey?: string | number) => {
+        return <EnumValuesChip
+            key={`${enumKey}`}
+            enumKey={String(enumKey)}
+            enumValues={enumValues}
+            size={small ? "small" : "medium"}/>;
     };
+
     return (
         multiple
             ? <MultiSelect
                 inputRef={ref}
-                containerClassName="w-full h-full"
                 className="w-full h-full p-0 bg-transparent"
                 position={"item-aligned"}
                 disabled={disabled}
-                padding={false}
-                includeFocusOutline={false}
+                includeClear={false}
+                useChips={false}
                 value={validValue
                     ? ((internalValue as any[]).map(v => v.toString()))
                     : ([])}
-                onMultiValueChange={onChange}
-                renderValue={renderValue}>
+                onValueChange={onChange}>
                 {enumValues?.map((enumConfig) => (
                     <MultiSelectItem
                         key={enumConfig.id}
@@ -102,17 +91,16 @@ export function VirtualTableSelect(props: {
             </MultiSelect>
             : <Select
                 inputRef={ref}
+                size={"large"}
+                fullWidth={true}
                 className="w-full h-full p-0 bg-transparent"
                 position={"item-aligned"}
                 disabled={disabled}
-                multiple={multiple}
                 padding={false}
-                includeFocusOutline={false}
                 value={validValue
-                    ? (multiple ? (internalValue as any[]).map(v => v.toString()) : internalValue?.toString())
-                    : (multiple ? [] : "")}
+                    ? internalValue?.toString()
+                    : ""}
                 onValueChange={onChange}
-                onMultiValueChange={onChange}
                 renderValue={renderValue}>
                 {enumValues?.map((enumConfig) => (
                     <SelectItem