@firecms/core 3.0.0-beta.10 → 3.0.0-beta.12

package/src/components/SelectableTable/filters/StringNumberFilterField.tsx

@@ -3,7 +3,7 @@ import { EnumValuesChip } from "../../../preview";
 import { VirtualTableWhereFilterOp } from "../../VirtualTable";
 import {
     Checkbox,
-    ClearIcon,
+    CloseIcon,
     IconButton,
     Label,
     MultiSelect,
@@ -98,6 +98,7 @@ export function StringNumberFilterField({
         <div className="flex w-[440px]">
             <div className={"w-[80px]"}>
                 <Select value={operation}
+                        fullWidth={true}
                         position={"item-aligned"}
                         onValueChange={(value) => {
                             updateFilter(value as VirtualTableWhereFilterOp, internalValue);
@@ -124,13 +125,14 @@ export function StringNumberFilterField({
                     }}
                     endAdornment={internalValue && <IconButton
                         onClick={(e) => updateFilter(operation, undefined)}>
-                        <ClearIcon/>
+                        <CloseIcon/>
                     </IconButton>}
                 />}
 
                 {enumValues && !multiple &&
                     <Select
                         position={"item-aligned"}
+                        fullWidth={true}
                         value={typeof internalValue === "string" ? internalValue : ""}
                         onValueChange={(value) => {
                             if (value !== "")
@@ -139,7 +141,7 @@ export function StringNumberFilterField({
                         endAdornment={internalValue && <IconButton
                             className="absolute right-2 top-3"
                             onClick={(e) => updateFilter(operation, undefined)}>
-                            <ClearIcon/>
+                            <CloseIcon/>
                         </IconButton>}
                         renderValue={(enumKey) => {
                             if (enumKey === null)
@@ -176,7 +178,7 @@ export function StringNumberFilterField({
                         endAdornment={internalValue && <IconButton
                             className="absolute right-2 top-3"
                             onClick={(e) => updateFilter(operation, undefined)}>
-                            <ClearIcon/>
+                            <CloseIcon/>
                         </IconButton>}
                         // renderValues={(enumKeys) => {
                         //     console.log("renderValues", enumKeys);
@@ -203,7 +205,7 @@ export function StringNumberFilterField({
                 }
 
                 {!isArray && <Label
-                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
+                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-surface-100 dark:[&:has(:checked)]:bg-surface-800"
                     htmlFor="null-filter"
                 >
                     <Checkbox id="null-filter"

package/src/components/UnsavedChangesDialog.tsx

@@ -0,0 +1,42 @@
+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" onClick={handleCancel} autoFocus> Cancel </Button>
+                <Button onClick={handleOk}> Ok </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}

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";
@@ -103,6 +104,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              error,
                                                              emptyComponent,
                                                              onSortByUpdate,
+                                                             onScroll: onScrollProp,
                                                              loading,
                                                              cellRenderer,
                                                              hoverRow,
@@ -112,6 +114,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              className,
                                                              endAdornment,
                                                              AddColumnComponent,
+                                                             initialScroll = 0,
                                                              debug
                                                          }: VirtualTableProps<T>) {
 
@@ -123,6 +126,15 @@ 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) {
+                tableRef.current.scrollTo(0, initialScroll);
+            }
+        }, [tableRef, initialScroll]);
+
         useEffect(() => {
             setColumns(columnsProp);
         }, [columnsProp]);
@@ -158,7 +170,6 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                 console.log("scrollToTop");
             endReachCallbackThreshold.current = 0;
             if (tableRef.current) {
-                // scrollRef.current = [scrollRef.current[0], 0];
                 tableRef.current.scrollTo(tableRef.current?.scrollLeft, 0);
             }
         }, []);
@@ -222,6 +233,13 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                     scrollOffset,
                     scrollUpdateWasRequested
                 });
+            if (onScrollProp) {
+                debouncedScroll({
+                    scrollDirection,
+                    scrollOffset,
+                    scrollUpdateWasRequested
+                })
+            }
             if (!scrollUpdateWasRequested && (scrollOffset >= maxScroll - endOffset))
                 onEndReachedInternal(scrollOffset);
         }, [maxScroll, onEndReachedInternal]);
@@ -294,7 +312,6 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         if (debug)
             console.log("VirtualTable render", virtualListController);
 
-        // useTraceUpdate(virtualListController);
         return (
             <div
                 ref={measureRef}

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
      */
@@ -147,6 +157,11 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     AddColumnComponent?: React.ComponentType;
 
+    /**
+     * Initial scroll position
+     */
+    initialScroll?: number;
+
     /**
      * Debug mode
      */

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

@@ -26,7 +26,7 @@ export function VirtualTableDateField(props: {
         <DateTimeField
             value={internalValue ?? undefined}
             onChange={(dateValue) => updateValue(dateValue ?? null)}
-            size={"medium"}
+            size={"large"}
             invisible={true}
             inputClassName={cls("w-full h-full", focusedDisabled)}
             className={cls("w-full h-full", focusedDisabled)}

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

@@ -66,7 +66,7 @@ export function VirtualTableInput(props: {
                 width: "100%",
                 color: "unset",
                 fontWeight: "unset",
-                lineHeight: "unset",
+                lineHeight: 1.7142857,
                 fontSize: "unset",
                 fontFamily: "unset",
                 background: "unset",

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

@@ -91,6 +91,8 @@ 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}

package/src/components/common/default_entity_actions.tsx

@@ -1,10 +1,12 @@
-import { ArchiveIcon, DeleteIcon, EditIcon, FileCopyIcon, OpenInNewIcon } from "@firecms/ui";
+import { DeleteIcon, EditIcon, FileCopyIcon } from "@firecms/ui";
 import { EntityAction } from "../../types";
 import { DeleteEntityDialog } from "../DeleteEntityDialog";
 import { addRecentId } from "../EntityCollectionView/utils";
+import { navigateToEntity } from "../../util";
 
 export const editEntityAction: EntityAction = {
     icon: <EditIcon/>,
+    key: "edit",
     name: "Edit",
     collapsed: false,
     onClick({
@@ -14,23 +16,31 @@ export const editEntityAction: EntityAction = {
                 context,
                 highlightEntity,
                 unhighlightEntity,
+                openEntityMode
             }): Promise<void> {
+
         highlightEntity?.(entity);
+
         context.analyticsController?.onAnalyticsEvent?.("entity_click", {
             path: entity.path,
             entityId: entity.id
         });
+
         if (collection) {
             addRecentId(collection.id, entity.id);
         }
-        const path = collection?.collectionGroup ? entity.path : (fullPath ?? entity.path);
-        context.sideEntityController.open({
+
+        const path = collection?.collectionGroup ? entity.path : (fullPath ?? entity.path)
+        navigateToEntity({
+            openEntityMode,
+            collection,
             entityId: entity.id,
             path,
-            collection,
-            updateUrl: true,
+            sideEntityController: context.sideEntityController,
             onClose: () => unhighlightEntity?.(entity),
+            navigation: context.navigation
         });
+
         return Promise.resolve(undefined);
     }
 }
@@ -38,55 +48,33 @@ export const editEntityAction: EntityAction = {
 export const copyEntityAction: EntityAction = {
     icon: <FileCopyIcon/>,
     name: "Copy",
+    key: "copy",
     onClick({
                 entity,
                 collection,
                 context,
+                fullPath,
                 highlightEntity,
                 unhighlightEntity,
+                openEntityMode
             }): Promise<void> {
         highlightEntity?.(entity);
         context.analyticsController?.onAnalyticsEvent?.("copy_entity_click", {
             path: entity.path,
             entityId: entity.id
         });
-        context.sideEntityController.open({
+        const path = collection?.collectionGroup ? entity.path : (fullPath ?? entity.path)
+        navigateToEntity({
+            openEntityMode,
+            collection,
             entityId: entity.id,
-            path: entity.path,
+            path,
             copy: true,
-            collection,
-            updateUrl: true,
+            sideEntityController: context.sideEntityController,
             onClose: () => unhighlightEntity?.(entity),
+            navigation: context.navigation
         });
-        return Promise.resolve(undefined);
-    }
-}
-
-export const archiveEntityAction: EntityAction = {
-    icon: <ArchiveIcon/>,
-    name: "Archive",
-    onClick({
-                entity,
-                collection,
-                context: {
-                    dataSource,
-                }
-            }): Promise<void> {
-        // Add your code here
-        return Promise.resolve(undefined);
-    }
-}
 
-export const openWebsiteAction: EntityAction = {
-    icon: <OpenInNewIcon/>,
-    name: "See in website",
-    onClick({
-                entity,
-                collection,
-                context,
-            }): Promise<void> {
-        // open a new tab
-        window.open(`https://example.com/${entity.id}`, "_blank");
         return Promise.resolve(undefined);
     }
 }
@@ -94,6 +82,7 @@ export const openWebsiteAction: EntityAction = {
 export const deleteEntityAction: EntityAction = {
     icon: <DeleteIcon/>,
     name: "Delete",
+    key: "delete",
     onClick({
                 entity,
                 fullPath,

package/src/components/common/index.ts

@@ -1,6 +1,6 @@
 export * from "./types";
 export * from "./useDebouncedData";
 export * from "./useColumnsIds";
-export * from "./useDataSourceEntityCollectionTableController";
+export * from "./useDataSourceTableController";
 export * from "./useTableSearchHelper";
 export * from "./default_entity_actions";

package/src/components/common/useColumnsIds.tsx

@@ -3,7 +3,7 @@ import { EntityCollection, ResolvedEntityCollection, ResolvedProperty } from "..
 import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
 import { PropertyColumnConfig } from "../EntityCollectionTable/EntityCollectionTableProps";
 
-const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
+export const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
 
 export function useColumnIds<M extends Record<string, any>>(collection: ResolvedEntityCollection<M>, includeSubcollections: boolean): PropertyColumnConfig[] {
     return useMemo(() => {