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

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -4,7 +4,7 @@ import { CollectionSize, Entity, EntityCollection, FilterValues } from "../../ty
 import {
     EntityCollectionRowActions,
     EntityCollectionTable,
-    useDataSourceEntityCollectionTableController
+    useDataSourceTableController
 } from "../EntityCollectionTable";
 import {
     useAuthController,
@@ -16,7 +16,7 @@ import {
 } from "../../hooks";
 import { ErrorView } from "../ErrorView";
 import { AddIcon, Button, DialogActions, Typography } from "@firecms/ui";
-import { canCreateEntity, fullPathToCollectionSegments, resolveCollection } from "../../util";
+import { canCreateEntity, IconForView, resolveCollection } from "../../util";
 import { useSelectionController } from "../EntityCollectionView/useSelectionController";
 import { useColumnIds, useTableSearchHelper } from "../common";
 import { useSideDialogContext } from "../../core";
@@ -101,13 +101,14 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         maxSelection,
     }: ReferenceSelectionInnerProps<M>) {
 
+    const authController = useAuthController();
     const sideDialogContext = useSideDialogContext();
     const sideEntityController = useSideEntityController();
     const navigation = useNavigationController();
     const analyticsController = useAnalyticsController();
     const customizationController = useCustomizationController();
 
-    const fullPath = navigation.resolveAliasesFrom(pathInput);
+    const fullPath = navigation.resolveIdsFrom(pathInput);
 
     const dataSource = useDataSource(collection);
 
@@ -233,7 +234,9 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
             selectionEnabled={multiselect}
             hideId={collection?.hideIdFromCollection}
             fullPath={fullPath}
-            selectionController={selectionController}/>;
+            selectionController={selectionController}
+            openEntityMode={"side_panel"}
+        />;
 
     };
 
@@ -247,23 +250,22 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
             error={"Could not find collection with id " + collection}/>
     }
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const resolvedCollection = useMemo(() => resolveCollection({
         collection: collection,
         path: fullPath,
         values: {},
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     }), [collection, customizationController.propertyConfigs, fullPath]);
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const displayedColumnIds = useColumnIds(resolvedCollection, false);
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const tableController = useDataSourceEntityCollectionTableController<M>({
+    const tableController = useDataSourceTableController<M>({
         fullPath,
         collection,
         entitiesDisplayedFirst,
-        forceFilter
+        forceFilter,
+        updateUrl: false,
     });
 
     const {
@@ -272,7 +274,6 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         onTextSearchClick,
         textSearchEnabled
     } =
-        // eslint-disable-next-line react-hooks/rules-of-hooks
         useTableSearchHelper({
             collection,
             fullPath,
@@ -288,13 +289,21 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                         textSearchLoading={textSearchLoading}
                         onTextSearchClick={textSearchInitialised ? undefined : onTextSearchClick}
                         textSearchEnabled={textSearchEnabled}
+                        additionalFields={collection.additionalFields}
                         displayedColumnIds={displayedColumnIds}
                         onEntityClick={onEntityClick}
                         tableController={tableController}
                         enablePopupIcon={false}
                         tableRowActionsBuilder={tableRowActionsBuilder}
-                        title={<Typography variant={"subtitle2"}>
-                            {collection.singularName ? `Select ${collection.singularName}` : `Select from ${collection.name}`}
+                        openEntityMode={"side_panel"}
+                        title={<Typography variant={"subtitle2"} className={"flex flex-row gap-2"}>
+                            <IconForView
+                                size={"small"}
+                                collectionOrView={collection}
+                                className={"text-surface-300 dark:text-surface-600"}/>
+                            {collection.singularName
+                                ? `Select ${collection.singularName}`
+                                : `Select from ${collection.name}`}
                         </Typography>}
                         defaultSize={collection.defaultSize}
                         properties={resolvedCollection.properties}

package/src/components/SearchIconsView.tsx

@@ -46,7 +46,6 @@ export function SearchIconsView({
     }, [query, updateSearchResults]);
 
     const icons = keys === null ? coolIconKeys : keys;
-    console.log("Icons", icons);
 
     return (
         <>
@@ -60,7 +59,8 @@ export function SearchIconsView({
             <div className={"flex max-w-full flex-wrap mt-4"}>
                 {icons.map((icon: string) => {
                     return (
-                        <Tooltip title={icon} key={icon}>
+                        <Tooltip title={icon} key={icon}
+                                 asChild={true}>
                             <IconButton
                                 shape={"square"}
                                 toggled={selectedIcon === icon}

package/src/components/SelectableTable/SelectableTable.tsx

@@ -1,5 +1,4 @@
-import React, { useCallback, useEffect, useRef } from "react";
-import equal from "react-fast-compare";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import {
     CollectionSize,
     Entity,
@@ -60,7 +59,7 @@ export type SelectableTableProps<M extends Record<string, any>> = {
 
     /**
      * Controller holding the logic for the table
-     * {@link useDataSourceEntityCollectionTableController}
+     * {@link useDataSourceTableController}
      * {@link EntityTableController}
      */
     tableController: EntityTableController<M>;
@@ -77,6 +76,18 @@ export type SelectableTableProps<M extends Record<string, any>> = {
 
     size?: CollectionSize;
 
+    initialScroll?: number;
+
+    /**
+     * Callback when the table is scrolled
+     * @param props
+     */
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward",
+        scrollOffset: number,
+        scrollUpdateWasRequested: boolean
+    }) => void;
+
     emptyComponent?: React.ReactNode;
 
     endAdornment?: React.ReactNode;
@@ -101,153 +112,154 @@ export type SelectableTableProps<M extends Record<string, any>> = {
  *
  * The data displayed in the table is managed by a {@link EntityTableController}.
  * You can build the default, bound to a path in the datasource, by using the hook
- * {@link useDataSourceEntityCollectionTableController}
+ * {@link useDataSourceTableController}
  *
  * @see EntityCollectionTableProps
  * @see EntityCollectionView
  * @see VirtualTable
  * @group Components
  */
-export const SelectableTable = React.memo<SelectableTableProps<any>>(
-    function SelectableTable<M extends Record<string, any>>
-    ({
-         onValueChange,
-         cellRenderer,
-         onEntityClick,
-         onColumnResize,
-         hoverRow = true,
-         size = "m",
-         inlineEditing = false,
-         tableController:
-             {
-                 data,
-                 dataLoading,
-                 noMoreToLoad,
-                 dataLoadingError,
-                 filterValues,
-                 setFilterValues,
-                 sortBy,
-                 setSortBy,
-                 itemCount,
-                 setItemCount,
-                 pageSize = 50,
-                 paginationEnabled,
-                 checkFilterCombination,
-                 setPopupCell
-             },
-         filterable = true,
-         emptyComponent,
-         columns,
-         forceFilter,
-         highlightedRow,
-         endAdornment,
-         AddColumnComponent
-     }: SelectableTableProps<M>) {
-
-        const ref = useRef<HTMLDivElement>(null);
-
-        const [selectedCell, setSelectedCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
-
-        const loadNextPage = () => {
-            if (!paginationEnabled || dataLoading || noMoreToLoad)
-                return;
-            if (itemCount !== undefined)
-                setItemCount?.(itemCount + pageSize);
+export const SelectableTable = function SelectableTable<M extends Record<string, any>>
+({
+     onValueChange,
+     cellRenderer,
+     onEntityClick,
+     onColumnResize,
+     hoverRow = true,
+     size = "m",
+     inlineEditing = false,
+     tableController:
+         {
+             data,
+             dataLoading,
+             noMoreToLoad,
+             dataLoadingError,
+             filterValues,
+             setFilterValues,
+             sortBy,
+             setSortBy,
+             itemCount,
+             setItemCount,
+             pageSize = 50,
+             paginationEnabled,
+             checkFilterCombination,
+             setPopupCell
+         },
+     filterable = true,
+     onScroll,
+     initialScroll,
+     emptyComponent,
+     columns,
+     forceFilter,
+     highlightedRow,
+     endAdornment,
+     AddColumnComponent
+ }: SelectableTableProps<M>) {
+
+    const ref = useRef<HTMLDivElement>(null);
+
+    const [selectedCell, setSelectedCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
+
+    const loadNextPage = () => {
+        if (!paginationEnabled || dataLoading || noMoreToLoad)
+            return;
+        if (itemCount !== undefined)
+            setItemCount?.(itemCount + pageSize);
+    };
+
+    const resetPagination = useCallback(() => {
+        setItemCount?.(pageSize);
+    }, [pageSize]);
+
+    const onRowClick = useCallback(({ rowData }: {
+        rowData: Entity<M>
+    }) => {
+        if (inlineEditing)
+            return;
+        return onEntityClick && onEntityClick(rowData);
+    }, [onEntityClick, inlineEditing]);
+
+    useOutsideAlerter(ref,
+        () => {
+            if (selectedCell) {
+                unselect();
+            }
+        },
+        Boolean(selectedCell));
+
+    const select = useCallback((cell?: SelectedCellProps<M>) => {
+        setSelectedCell(cell);
+    }, []);
+
+    const unselect = useCallback(() => {
+        setSelectedCell(undefined);
+    }, []);
+
+    // on ESC key press
+    useEffect(() => {
+        const escFunction = (event: any) => {
+            if (event.keyCode === 27) {
+                unselect();
+            }
+        };
+        document.addEventListener("keydown", escFunction, false);
+        return () => {
+            document.removeEventListener("keydown", escFunction, false);
         };
+    }, [unselect]);
+
+    const onFilterUpdate = useCallback((updatedFilterValues?: FilterValues<any>) => {
+        setFilterValues?.({ ...updatedFilterValues, ...forceFilter } as FilterValues<any>);
+    }, [forceFilter]);
+
+    const contextValue = useMemo(() => ({
+        setPopupCell: setPopupCell as ((cell?: SelectedCellProps<M>) => void),
+        select,
+        onValueChange,
+        size: size ?? "m",
+        selectedCell
+    }), [setPopupCell, select, onValueChange, size, selectedCell]);
+
+    return (
+        <SelectableTableContext.Provider
+            value={contextValue}>
+            <div className="h-full w-full flex flex-col bg-white dark:bg-surface-950"
+                 ref={ref}>
+
+                <VirtualTable
+                    data={data}
+                    columns={columns}
+                    cellRenderer={cellRenderer}
+                    onRowClick={inlineEditing ? undefined : (onEntityClick ? onRowClick : undefined)}
+                    onEndReached={loadNextPage}
+                    onResetPagination={resetPagination}
+                    error={dataLoadingError}
+                    onColumnResize={onColumnResize}
+                    rowHeight={getRowHeight(size)}
+                    loading={dataLoading}
+                    filter={filterValues}
+                    onFilterUpdate={setFilterValues ? onFilterUpdate : undefined}
+                    sortBy={sortBy}
+                    onSortByUpdate={setSortBy as ((sortBy?: [string, "asc" | "desc"]) => void)}
+                    hoverRow={hoverRow}
+                    initialScroll={initialScroll}
+                    onScroll={onScroll}
+                    checkFilterCombination={checkFilterCombination}
+                    createFilterField={filterable ? createFilterField : undefined}
+                    rowClassName={useCallback((entity: Entity<M>) => {
+                        return highlightedRow?.(entity) ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "";
+                    }, [highlightedRow])}
+                    className="flex-grow"
+                    emptyComponent={emptyComponent}
+                    endAdornment={endAdornment}
+                    AddColumnComponent={AddColumnComponent}
+                />
+
+            </div>
+        </SelectableTableContext.Provider>
+    );
 
-        const resetPagination = useCallback(() => {
-            setItemCount?.(pageSize);
-        }, [pageSize]);
-
-        const onRowClick = useCallback(({ rowData }: {
-            rowData: Entity<M>
-        }) => {
-            if (inlineEditing)
-                return;
-            return onEntityClick && onEntityClick(rowData);
-        }, [onEntityClick, inlineEditing]);
-
-        useOutsideAlerter(ref,
-            () => {
-                if (selectedCell) {
-                    unselect();
-                }
-            },
-            Boolean(selectedCell));
-
-        // on ESC key press
-        useEffect(() => {
-            const escFunction = (event: any) => {
-                if (event.keyCode === 27) {
-                    unselect();
-                }
-            };
-            document.addEventListener("keydown", escFunction, false);
-            return () => {
-                document.removeEventListener("keydown", escFunction, false);
-            };
-        });
-
-        const select = useCallback((cell?: SelectedCellProps<M>) => {
-            setSelectedCell(cell);
-        }, []);
-
-        const unselect = useCallback(() => {
-            setSelectedCell(undefined);
-        }, []);
-
-        const onFilterUpdate = useCallback((updatedFilterValues?: FilterValues<any>) => {
-            setFilterValues?.({ ...updatedFilterValues, ...forceFilter } as FilterValues<any>);
-        }, [forceFilter]);
-
-        return (
-            <SelectableTableContext.Provider
-                value={{
-                    setPopupCell: setPopupCell as ((cell?: SelectedCellProps<M>) => void),
-                    select,
-                    onValueChange,
-                    size: size ?? "m",
-                    selectedCell,
-                }}
-            >
-                <div className="h-full w-full flex flex-col bg-white dark:bg-gray-950"
-                     ref={ref}>
-
-                    <VirtualTable
-                        data={data}
-                        columns={columns}
-                        cellRenderer={cellRenderer}
-                        onRowClick={inlineEditing ? undefined : (onEntityClick ? onRowClick : undefined)}
-                        onEndReached={loadNextPage}
-                        onResetPagination={resetPagination}
-                        error={dataLoadingError}
-                        onColumnResize={onColumnResize}
-                        rowHeight={getRowHeight(size)}
-                        loading={dataLoading}
-                        filter={filterValues}
-                        onFilterUpdate={setFilterValues ? onFilterUpdate : undefined}
-                        sortBy={sortBy}
-                        onSortByUpdate={setSortBy as ((sortBy?: [string, "asc" | "desc"]) => void)}
-                        hoverRow={hoverRow}
-                        checkFilterCombination={checkFilterCombination}
-                        createFilterField={filterable ? createFilterField : undefined}
-                        rowClassName={useCallback((entity: Entity<M>) => {
-                            return highlightedRow?.(entity) ? "bg-gray-100 bg-opacity-75 dark:bg-gray-800 dark:bg-opacity-75" : "";
-                        }, [highlightedRow])}
-                        className="flex-grow"
-                        emptyComponent={emptyComponent}
-                        endAdornment={endAdornment}
-                        AddColumnComponent={AddColumnComponent}
-                    />
-
-                </div>
-            </SelectableTableContext.Provider>
-        );
-
-    },
-    () => false,
-    // equal
-);
+};
 
 function createFilterField({
                                id,

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

@@ -76,6 +76,8 @@ export function DateTimeFilterField({
         <div className="flex w-[440px]">
             <div className="w-[80px]">
                 <Select value={operation}
+                        size={"large"}
+                        fullWidth={true}
                         onValueChange={(value) => {
                             updateFilter(value as VirtualTableWhereFilterOp, internalValue);
                         }}
@@ -92,7 +94,7 @@ export function DateTimeFilterField({
 
                 <DateTimeField
                     mode={mode}
-                    size={"medium"}
+                    size={"large"}
                     locale={locale}
                     value={internalValue ?? undefined}
                     onChange={(dateValue: Date | null) => {
@@ -102,7 +104,7 @@ export function DateTimeFilterField({
                 />
 
                 <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/SelectableTable/filters/ReferenceFilterField.tsx

@@ -35,12 +35,10 @@ const operationLabels = {
 const multipleSelectOperations = ["array-contains-any", "in", "not-in"];
 
 export function ReferenceFilterField({
-                                         name,
                                          value,
                                          setValue,
                                          isArray,
                                          path,
-                                         title,
                                          includeId = true,
                                          previewProperties,
                                          setHidden
@@ -50,9 +48,11 @@ export function ReferenceFilterField({
         ? ["array-contains"]
         : ["==", "!=", ">", "<", ">=", "<="];
 
-    isArray
-        ? possibleOperations.push("array-contains-any")
-        : possibleOperations.push("in", "not-in");
+    if (isArray) {
+        possibleOperations.push("array-contains-any");
+    } else {
+        possibleOperations.push("in", "not-in");
+    }
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
@@ -144,9 +144,11 @@ export function ReferenceFilterField({
 
     return (
 
-        <div className="flex w-[440px] flex-row">
+        <div className="flex w-[480px] flex-row">
             <div className="w-[140px]">
                 <Select value={operation}
+                        size={"large"}
+                        fullWidth={true}
                         onValueChange={(value) => {
                             updateFilter(value as VirtualTableWhereFilterOp, internalValue);
                         }}
@@ -159,7 +161,7 @@ export function ReferenceFilterField({
                 </Select>
             </div>
 
-            <div className="flex-grow ml-2 h-full gap-2 flex flex-col">
+            <div className="flex-grow ml-2 h-full gap-2 flex flex-col w-[340px]">
 
                 {internalValue && Array.isArray(internalValue) && <div>
                     {internalValue.map((ref, index) => buildEntry(ref))}
@@ -179,7 +181,7 @@ export function ReferenceFilterField({
                 }
 
                 {!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/SelectableTable/filters/StringNumberFilterField.tsx

@@ -1,7 +1,17 @@
 import React, { useState } from "react";
 import { EnumValuesChip } from "../../../preview";
 import { VirtualTableWhereFilterOp } from "../../VirtualTable";
-import { Checkbox, ClearIcon, IconButton, Label, Select, SelectItem, TextField } from "@firecms/ui";
+import {
+    Checkbox,
+    CloseIcon,
+    IconButton,
+    Label,
+    MultiSelect,
+    MultiSelectItem,
+    Select,
+    SelectItem,
+    TextField
+} from "@firecms/ui";
 import { EnumValueConfig } from "../../../types";
 
 interface StringNumberFilterFieldProps {
@@ -82,11 +92,13 @@ export function StringNumberFilterField({
     }
 
     const multiple = multipleSelectOperations.includes(operation);
+
     return (
 
         <div className="flex w-[440px]">
             <div className={"w-[80px]"}>
                 <Select value={operation}
+                        fullWidth={true}
                         position={"item-aligned"}
                         onValueChange={(value) => {
                             updateFilter(value as VirtualTableWhereFilterOp, internalValue);
@@ -111,31 +123,31 @@ export function StringNumberFilterField({
                             : evt.target.value;
                         updateFilter(operation, val);
                     }}
-                    endAdornment={internalValue && <IconButton
+                    endAdornment={internalValue !== undefined && internalValue != null && <IconButton
                         onClick={(e) => updateFilter(operation, undefined)}>
-                        <ClearIcon/>
+                        <CloseIcon/>
                     </IconButton>}
                 />}
 
-                {enumValues &&
+                {enumValues && !multiple &&
                     <Select
                         position={"item-aligned"}
-                        value={internalValue !== undefined
-                            ? (Array.isArray(internalValue) ? internalValue.map(e => String(e)) : String(internalValue))
-                            : isArray ? [] : ""}
+                        fullWidth={true}
+                        value={typeof internalValue === "string" ? internalValue : ""}
                         onValueChange={(value) => {
                             if (value !== "")
                                 updateFilter(operation, dataType === "number" ? parseInt(value as string) : value as string)
                         }}
-                        multiple={multiple}
                         endAdornment={internalValue && <IconButton
                             className="absolute right-2 top-3"
                             onClick={(e) => updateFilter(operation, undefined)}>
-                            <ClearIcon/>
+                            <CloseIcon/>
                         </IconButton>}
                         renderValue={(enumKey) => {
                             if (enumKey === null)
                                 return "Filter for null values";
+                            if (enumKey === undefined)
+                                return null;
 
                             return <EnumValuesChip
                                 key={`select_value_${name}_${enumKey}`}
@@ -144,7 +156,7 @@ export function StringNumberFilterField({
                                 size={"small"}/>;
                         }}>
                         {enumValues.map((enumConfig) => (
-                            <SelectItem key={`select_value_${name}_${enumConfig.id}`}
+                            <SelectItem key={`select_item_${name}_${enumConfig.id}`}
                                         value={String(enumConfig.id)}>
                                 <EnumValuesChip
                                     enumKey={String(enumConfig.id)}
@@ -155,8 +167,45 @@ export function StringNumberFilterField({
                     </Select>
                 }
 
+                {enumValues && multiple &&
+                    <MultiSelect
+                        position={"item-aligned"}
+                        value={Array.isArray(internalValue) ? internalValue.map(e => String(e)) : []}
+                        onValueChange={(value) => {
+                            updateFilter(operation, dataType === "number" ? value.map(v => parseInt(v)) : value)
+                        }}
+                        multiple={multiple}
+                        endAdornment={internalValue && <IconButton
+                            className="absolute right-2 top-3"
+                            onClick={(e) => updateFilter(operation, undefined)}>
+                            <CloseIcon/>
+                        </IconButton>}
+                        // renderValues={(enumKeys) => {
+                        //     console.log("renderValues", enumKeys);
+                        //     if (enumKeys === null)
+                        //         return "Filter for null values";
+                        //
+                        //     return enumKeys.map(key => <EnumValuesChip
+                        //         key={`select_value_${name}_${enumKeys}`}
+                        //         enumKey={key}
+                        //         enumValues={enumValues}
+                        //         size={"small"}/>);
+                        // }}
+                    >
+                        {enumValues.map((enumConfig) => (
+                            <MultiSelectItem key={`select_value_${name}_${enumConfig.id}`}
+                                             value={String(enumConfig.id)}>
+                                <EnumValuesChip
+                                    enumKey={String(enumConfig.id)}
+                                    enumValues={enumValues}
+                                    size={"small"}/>
+                            </MultiSelectItem>
+                        ))}
+                    </MultiSelect>
+                }
+
                 {!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"