@firecms/core 3.0.0-alpha.84 → 3.0.0-beta.10

package/src/components/ReferenceWidget.tsx

@@ -4,18 +4,18 @@ import { Entity, EntityCollection, EntityReference, FilterValues } from "../type
 import { getReferenceFrom } from "../util";
 import { PreviewSize, ReferencePreview } from "../preview";
 import { useNavigationController, useReferenceDialog } from "../hooks";
-import { Button, cn } from "@firecms/ui";
+import { Button, cls } from "@firecms/ui";
 
 export type ReferenceWidgetProps<M extends Record<string, any>> = {
     name?: string,
     multiselect?: boolean,
-    value: EntityReference<M> | EntityReference<M>[] | null,
+    value: EntityReference | EntityReference[] | null,
     onReferenceSelected?: (params: {
-        reference: EntityReference<M> | null,
+        reference: EntityReference | null,
         entity: Entity<M> | null
     }) => void,
     onMultipleReferenceSelected?: (params: {
-        references: EntityReference<M>[] | null,
+        references: EntityReference[] | null,
         entities: Entity<M>[] | null
     }) => void,
     path: string,
@@ -27,6 +27,8 @@ export type ReferenceWidgetProps<M extends Record<string, any>> = {
     forceFilter?: FilterValues<string>;
     size: PreviewSize;
     className?: string;
+    includeId?: boolean;
+    includeEntityLink?: boolean;
 };
 
 /**
@@ -43,25 +45,26 @@ export function ReferenceWidget<M extends Record<string, any>>({
                                                                    previewProperties,
                                                                    forceFilter,
                                                                    size,
-                                                                   className
+                                                                   className,
+                                                                   includeId,
+                                                                   includeEntityLink
                                                                }: ReferenceWidgetProps<M>) {
 
     const navigationController = useNavigationController();
 
     const collection: EntityCollection | undefined = useMemo(() => {
         return navigationController.getCollection(path);
-    }, [path, navigationController]);
-
-    if (!collection) {
-        throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
-    }
+    }, [path, navigationController.getCollection]);
 
     const onSingleEntitySelected = useCallback((entity: Entity<M> | null) => {
         if (disabled)
             return;
         if (onReferenceSelected) {
             const reference = entity ? getReferenceFrom(entity) : null;
-            onReferenceSelected?.({ reference, entity });
+            onReferenceSelected?.({
+                reference,
+                entity
+            });
         }
     }, [disabled, onReferenceSelected]);
 
@@ -70,7 +73,10 @@ export function ReferenceWidget<M extends Record<string, any>>({
             return;
         if (onMultipleReferenceSelected) {
             const references = entities ? entities.map(e => getReferenceFrom(e)) : null;
-            onMultipleReferenceSelected({ references, entities });
+            onMultipleReferenceSelected({
+                references,
+                entities
+            });
         }
     }, [disabled, onReferenceSelected]);
 
@@ -110,19 +116,23 @@ export function ReferenceWidget<M extends Record<string, any>>({
                     reference={ref}
                     disabled={disabled}
                     previewProperties={previewProperties}
-                    size={size}/>
+                    size={size}
+                    includeId={includeId}
+                    includeEntityLink={includeEntityLink}/>
             })}
         </div>
-    } else if (value instanceof EntityReference) {
+    } else if (value?.isEntityReference && value?.isEntityReference()) {
         child = <ReferencePreview
             reference={value}
             onClick={onEntryClick}
             disabled={disabled}
             previewProperties={previewProperties}
-            size={size}/>
+            size={size}
+            includeId={includeId}
+            includeEntityLink={includeEntityLink}/>
 
     }
-    return <div className={cn("text-sm font-medium text-gray-500",
+    return <div className={cls("text-sm font-medium",
         "min-w-80 flex flex-col gap-4",
         "relative transition-colors duration-200 ease-in rounded font-medium",
         disabled ? "bg-opacity-50" : "hover:bg-opacity-75",

package/src/components/SearchIconsView.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 
 import { coolIconKeys, debounce, Icon, IconButton, iconKeys, SearchBar, Tooltip } from "@firecms/ui";
-import { icon_synonyms, iconsSearch } from "../util";
+import { iconSynonyms, iconsSearch } from "../util";
 
 const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
 
-if (process.env.NODE_ENV !== "production") {
-    Object.keys(icon_synonyms).forEach((icon: string) => {
+if (iconSynonyms && process.env.NODE_ENV !== "production") {
+    Object.keys(iconSynonyms).forEach((icon: string) => {
         if (!iconKeys.includes(icon)) {
-            console.warn(`The icon ${icon} no longer exists. Remove it from \`icon_synonyms\``);
+            console.warn(`The icon ${icon} no longer exists. Remove it from \`iconSynonyms\``);
         }
     });
 }
@@ -31,7 +31,9 @@ export function SearchIconsView({
                 setKeys(null);
             } else {
                 const searchResult = iconsSearch.search(value);
-                setKeys(searchResult.map((e: any) => e.key));
+                const limit = 50;
+                const limited = searchResult.slice(0, limit);
+                setKeys(limited.map((e) => e.item.key));
             }
         }, UPDATE_SEARCH_INDEX_WAIT_MS), []
     );
@@ -48,7 +50,7 @@ export function SearchIconsView({
     return (
         <>
             <SearchBar
-                autoFocus
+                autoFocus={false}
                 innerClassName={"w-full sticky top-0 z-10"}
                 onTextSearch={(value?: string) => setQuery(value ?? "")}
                 placeholder="Search for more icons…"
@@ -57,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/{EntityCollectionTable/SimpleEntityCollectionTable.tsx → SelectableTable/SelectableTable.tsx}

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import equal from "react-fast-compare";
 import {
     CollectionSize,
@@ -6,33 +6,21 @@ import {
     EntityTableController,
     FilterValues,
     ResolvedProperty,
-    SelectedCellProps,
-    User
+    SelectedCellProps
 } from "../../types";
-import { useLargeLayout } from "../../hooks";
 import { CellRendererParams, VirtualTable, VirtualTableColumn } from "../VirtualTable";
 import { enumToObjectEntries } from "../../util";
-import { OnCellValueChange } from "./types";
-import { CollectionTableToolbar } from "./internal/CollectionTableToolbar";
-import { EntityCollectionTableProps, OnColumnResizeParams } from "./EntityCollectionTableProps";
+import { OnCellValueChange, OnColumnResizeParams } from "../common";
 import { FilterFormFieldProps } from "../VirtualTable/VirtualTableHeader";
 import { ReferenceFilterField } from "./filters/ReferenceFilterField";
 import { StringNumberFilterField } from "./filters/StringNumberFilterField";
 import { BooleanFilterField } from "./filters/BooleanFilterField";
 import { DateTimeFilterField } from "./filters/DateTimeFilterField";
-import { EntityCollectionTableContext } from "./EntityCollectionTable";
+import { useOutsideAlerter } from "@firecms/ui";
+import { SelectableTableContext } from "./SelectableTableContext";
+import { getRowHeight } from "../common/table_height";
 
-export type SimpleEntityCollectionTableProps<M extends Record<string, any>> = {
-
-    /**
-     * List of entities that will be displayed as selected;
-     */
-    highlightedEntities?: Entity<M>[];
-
-    /**
-     * Override the title in the toolbar
-     */
-    title?: React.ReactNode;
+export type SelectableTableProps<M extends Record<string, any>> = {
 
     /**
      * Callback when a cell value changes.
@@ -65,28 +53,11 @@ export type SimpleEntityCollectionTableProps<M extends Record<string, any>> = {
      */
     onColumnResize?(params: OnColumnResizeParams): void;
 
-    /**
-     * Callback when the selected size of the table is changed
-     */
-    onSizeChanged?(size: CollectionSize): void;
-
     /**
      * Should apply a different style to a row when hovering
      */
     hoverRow?: boolean;
 
-    /**
-     * Additional component that renders actions such as buttons in the
-     * collection toolbar, displayed on the left side
-     */
-    actionsStart?: React.ReactNode;
-
-    /**
-     * Additional component that renders actions such as buttons in the
-     * collection toolbar, displayed on the right side
-     */
-    actions?: React.ReactNode;
-
     /**
      * Controller holding the logic for the table
      * {@link useDataSourceEntityCollectionTableController}
@@ -100,14 +71,18 @@ export type SimpleEntityCollectionTableProps<M extends Record<string, any>> = {
 
     inlineEditing?: boolean;
 
-    textSearchEnabled?: boolean;
+    forceFilter?: FilterValues<keyof M extends string ? keyof M : never>;
 
-    emptyComponent?: React.ReactNode;
+    highlightedRow?: (data: Entity<M>) => boolean;
 
-    forceFilter?: FilterValues<keyof M extends string ? keyof M : never>;
-}
+    size?: CollectionSize;
 
+    emptyComponent?: React.ReactNode;
+
+    endAdornment?: React.ReactNode;
 
+    AddColumnComponent?: React.ComponentType;
+}
 
 /**
  * This component is in charge of rendering a collection table with a high
@@ -133,19 +108,15 @@ export type SimpleEntityCollectionTableProps<M extends Record<string, any>> = {
  * @see VirtualTable
  * @group Components
  */
-export const SimpleEntityCollectionTable = React.memo<SimpleEntityCollectionTableProps<any>>(
-    function SimpleEntityCollectionTable<M extends Record<string, any>, UserType extends User>
+export const SelectableTable = React.memo<SelectableTableProps<any>>(
+    function SelectableTable<M extends Record<string, any>>
     ({
-         actionsStart,
-         actions,
-         title,
          onValueChange,
          cellRenderer,
-         highlightedEntities,
          onEntityClick,
          onColumnResize,
-         onSizeChanged,
          hoverRow = true,
+         size = "m",
          inlineEditing = false,
          tableController:
              {
@@ -157,8 +128,6 @@ export const SimpleEntityCollectionTable = React.memo<SimpleEntityCollectionTabl
                  setFilterValues,
                  sortBy,
                  setSortBy,
-                 setSearchString,
-                 clearFilter,
                  itemCount,
                  setItemCount,
                  pageSize = 50,
@@ -167,21 +136,18 @@ export const SimpleEntityCollectionTable = React.memo<SimpleEntityCollectionTabl
                  setPopupCell
              },
          filterable = true,
-         sortable = true,
          emptyComponent,
-         textSearchEnabled,
          columns,
-         forceFilter
-     }: SimpleEntityCollectionTableProps<M>) {
-
-        const largeLayout = useLargeLayout();
+         forceFilter,
+         highlightedRow,
+         endAdornment,
+         AddColumnComponent
+     }: SelectableTableProps<M>) {
 
-        const [size, setSize] = React.useState<CollectionSize>("m");
+        const ref = useRef<HTMLDivElement>(null);
 
         const [selectedCell, setSelectedCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
 
-        const filterIsSet = !!filterValues && Object.keys(filterValues).length > 0;
-
         const loadNextPage = () => {
             if (!paginationEnabled || dataLoading || noMoreToLoad)
                 return;
@@ -201,13 +167,13 @@ export const SimpleEntityCollectionTable = React.memo<SimpleEntityCollectionTabl
             return onEntityClick && onEntityClick(rowData);
         }, [onEntityClick, inlineEditing]);
 
-        const updateSize = useCallback((size: CollectionSize) => {
-            if (onSizeChanged)
-                onSizeChanged(size);
-            setSize(size);
-        }, []);
-
-        const onTextSearch = useCallback((newSearchString?: string) => setSearchString?.(newSearchString), []);
+        useOutsideAlerter(ref,
+            () => {
+                if (selectedCell) {
+                    unselect();
+                }
+            },
+            Boolean(selectedCell));
 
         // on ESC key press
         useEffect(() => {
@@ -235,27 +201,17 @@ export const SimpleEntityCollectionTable = React.memo<SimpleEntityCollectionTabl
         }, [forceFilter]);
 
         return (
-            <EntityCollectionTableContext.Provider
+            <SelectableTableContext.Provider
                 value={{
                     setPopupCell: setPopupCell as ((cell?: SelectedCellProps<M>) => void),
                     select,
                     onValueChange,
-                    size,
+                    size: size ?? "m",
                     selectedCell,
                 }}
             >
-                <div className="h-full w-full flex flex-col bg-white dark:bg-gray-950">
-
-                    <CollectionTableToolbar
-                        filterIsSet={filterIsSet}
-                        onTextSearch={textSearchEnabled ? onTextSearch : undefined}
-                        clearFilter={clearFilter}
-                        size={size}
-                        onSizeChanged={updateSize}
-                        title={title}
-                        actionsStart={actionsStart}
-                        actions={actions}
-                        loading={dataLoading}/>
+                <div className="h-full w-full flex flex-col bg-white dark:bg-gray-950"
+                     ref={ref}>
 
                     <VirtualTable
                         data={data}
@@ -265,27 +221,32 @@ export const SimpleEntityCollectionTable = React.memo<SimpleEntityCollectionTabl
                         onEndReached={loadNextPage}
                         onResetPagination={resetPagination}
                         error={dataLoadingError}
-                        paginationEnabled={paginationEnabled}
                         onColumnResize={onColumnResize}
-                        size={size}
+                        rowHeight={getRowHeight(size)}
                         loading={dataLoading}
                         filter={filterValues}
                         onFilterUpdate={setFilterValues ? onFilterUpdate : undefined}
                         sortBy={sortBy}
                         onSortByUpdate={setSortBy as ((sortBy?: [string, "asc" | "desc"]) => void)}
                         hoverRow={hoverRow}
-                        emptyComponent={emptyComponent}
                         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>
-            </EntityCollectionTableContext.Provider>
+            </SelectableTableContext.Provider>
         );
 
     },
-    equal
+    () => false,
+    // equal
 );
 
 function createFilterField({
@@ -318,6 +279,7 @@ function createFilterField({
                                      isArray={isArray}
                                      path={baseProperty.path}
                                      title={resolvedProperty?.name}
+                                     includeId={baseProperty.includeId}
                                      previewProperties={baseProperty?.previewProperties}
                                      hidden={hidden}
                                      setHidden={setHidden}/>;

package/src/components/SelectableTable/SelectableTableContext.tsx

@@ -0,0 +1,6 @@
+import React, { useContext } from "react";
+import { EntityCollectionTableController } from "../common/types";
+
+export const SelectableTableContext = React.createContext<EntityCollectionTableController<any>>({} as any);
+
+export const useSelectableTableController = () => useContext<EntityCollectionTableController<any>>(SelectableTableContext);

package/src/components/{EntityCollectionTable → SelectableTable}/filters/BooleanFilterField.tsx

@@ -32,7 +32,7 @@ export function BooleanFilterField({
     const valueSet = !!value;
 
     return (
-        <div className="w-[200px]">
+        <div className="w-[300px]">
             <BooleanSwitchWithLabel
                 value={valueSetToTrue}
                 allowIndeterminate={true}
@@ -44,6 +44,5 @@ export function BooleanFilterField({
                         : `${title} is false`}
             />
         </div>
-    )
-        ;
+    );
 }

package/src/components/{EntityCollectionTable → SelectableTable}/filters/DateTimeFilterField.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { VirtualTableWhereFilterOp } from "../../VirtualTable";
-import { DateTimeField, Select, SelectItem } from "@firecms/ui";
+import { Checkbox, DateTimeField, Label, Select, SelectItem } from "@firecms/ui";
 import { useCustomizationController } from "../../../hooks";
 
 interface DateTimeFilterFieldProps {
@@ -43,10 +43,10 @@ export function DateTimeFilterField({
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
-    const [internalValue, setInternalValue] = useState<Date | undefined>(fieldValue);
+    const [internalValue, setInternalValue] = useState<Date | null | undefined>(fieldValue);
 
-    function updateFilter(op: VirtualTableWhereFilterOp, val: Date | undefined) {
-        let newValue: Date | undefined = val;
+    function updateFilter(op: VirtualTableWhereFilterOp, val: Date | undefined | null) {
+        let newValue: Date | null | undefined = val;
         const prevOpIsArray = multipleSelectOperations.includes(operation);
         const newOpIsArray = multipleSelectOperations.includes(op);
         if (prevOpIsArray !== newOpIsArray) {
@@ -73,7 +73,7 @@ export function DateTimeFilterField({
 
     return (
 
-        <div className="flex w-[440px] items-center">
+        <div className="flex w-[440px]">
             <div className="w-[80px]">
                 <Select value={operation}
                         onValueChange={(value) => {
@@ -88,19 +88,34 @@ export function DateTimeFilterField({
                 </Select>
             </div>
 
-            <div className="flex-grow ml-2">
+            <div className="flex-grow ml-2 flex flex-col gap-2">
 
                 <DateTimeField
                     mode={mode}
                     size={"medium"}
                     locale={locale}
-                    value={internalValue}
+                    value={internalValue ?? undefined}
                     onChange={(dateValue: Date | null) => {
                         updateFilter(operation, dateValue === null ? undefined : dateValue);
                     }}
                     clearable={true}
                 />
 
+                <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"
+                    htmlFor="null-filter"
+                >
+                    <Checkbox id="null-filter"
+                              checked={internalValue === null}
+                              size={"small"}
+                              onCheckedChange={(checked) => {
+                                  if (internalValue !== null)
+                                      updateFilter(operation, null);
+                                  else updateFilter(operation, undefined);
+                              }}/>
+                    Filter for null values
+                </Label>
+
             </div>
 
         </div>

package/src/components/{EntityCollectionTable → SelectableTable}/filters/ReferenceFilterField.tsx

@@ -4,7 +4,7 @@ import { Entity, EntityCollection, EntityReference } from "../../../types";
 import { ReferencePreview } from "../../../preview";
 import { getReferenceFrom } from "../../../util";
 import { useNavigationController, useReferenceDialog } from "../../../hooks";
-import { Button, Select, SelectItem } from "@firecms/ui";
+import { Button, Checkbox, Label, Select, SelectItem } from "@firecms/ui";
 
 interface ReferenceFilterFieldProps {
     name: string,
@@ -13,6 +13,7 @@ interface ReferenceFilterFieldProps {
     isArray?: boolean;
     path?: string;
     title?: string;
+    includeId?: boolean;
     previewProperties?: string[];
     hidden: boolean;
     setHidden: (hidden: boolean) => void;
@@ -40,6 +41,7 @@ export function ReferenceFilterField({
                                          isArray,
                                          path,
                                          title,
+                                         includeId = true,
                                          previewProperties,
                                          setHidden
                                      }: ReferenceFilterFieldProps) {
@@ -48,33 +50,31 @@ export function ReferenceFilterField({
         ? ["array-contains"]
         : ["==", "!=", ">", "<", ">=", "<="];
 
-    const [onHover, setOnHover] = React.useState(false);
-
     isArray
         ? possibleOperations.push("array-contains-any")
         : possibleOperations.push("in", "not-in");
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
-    const [internalValue, setInternalValue] = useState<EntityReference | EntityReference[] | undefined>(fieldValue);
+    const [internalValue, setInternalValue] = useState<EntityReference | EntityReference[] | undefined | null>(fieldValue);
 
     const selectedEntityIds = internalValue
         ? (Array.isArray(internalValue) ? internalValue.map((ref) => {
-            if (!(ref instanceof EntityReference)) {
+            if (!(ref?.isEntityReference && ref?.isEntityReference())) {
                 return null;
             }
             return ref.id;
         }).filter(Boolean) as string[] : [internalValue.id])
         : [];
 
-    function updateFilter(op: VirtualTableWhereFilterOp, val?: EntityReference | EntityReference[]) {
+    function updateFilter(op: VirtualTableWhereFilterOp, val?: EntityReference | EntityReference[] | null) {
 
         const prevOpIsArray = multipleSelectOperations.includes(operation);
         const newOpIsArray = multipleSelectOperations.includes(op);
         let newValue = val;
         if (prevOpIsArray !== newOpIsArray) {
             // @ts-ignore
-            newValue = newOpIsArray ? (newValue instanceof EntityReference ? [newValue] : []) : undefined
+            newValue = newOpIsArray ? (newValue?.isEntityReference && newValue?.isEntityReference() ? [newValue] : []) : undefined
         }
 
         setOperation(op);
@@ -129,28 +129,23 @@ export function ReferenceFilterField({
 
     const buildEntry = (reference: EntityReference) => {
         return (
-            <div
-                className="mb-0.5"
-                onMouseEnter={() => setOnHover(true)}
-                onMouseMove={() => setOnHover(true)}
-                onMouseLeave={() => setOnHover(false)}>
-                <ReferencePreview
-                    disabled={!path}
-                    previewProperties={previewProperties}
-                    size={"medium"}
-                    onClick={doOpenDialog}
-                    reference={reference}
-                    onHover={onHover}
-                    allowEntityNavigation={false}
-                />
-            </div>
+            <ReferencePreview
+                disabled={!path}
+                previewProperties={previewProperties}
+                size={"medium"}
+                onClick={doOpenDialog}
+                reference={reference}
+                hover={true}
+                includeId={includeId}
+                includeEntityLink={false}
+            />
         );
     };
 
     return (
 
         <div className="flex w-[440px] flex-row">
-            <div className="w-[120px]">
+            <div className="w-[140px]">
                 <Select value={operation}
                         onValueChange={(value) => {
                             updateFilter(value as VirtualTableWhereFilterOp, internalValue);
@@ -164,21 +159,40 @@ export function ReferenceFilterField({
                 </Select>
             </div>
 
-            <div className="flex-grow ml-2 h-full">
+            <div className="flex-grow ml-2 h-full gap-2 flex flex-col">
 
                 {internalValue && Array.isArray(internalValue) && <div>
                     {internalValue.map((ref, index) => buildEntry(ref))}
                 </div>}
+
                 {internalValue && !Array.isArray(internalValue) && <div>
                     {buildEntry(internalValue)}
                 </div>}
+
                 {(!internalValue || (Array.isArray(internalValue) && internalValue.length === 0)) &&
                     <Button onClick={doOpenDialog}
                             variant={"outlined"}
+                            size={"large"}
                             className="h-full w-full">
                         {multiple ? "Select references" : "Select reference"}
                     </Button>
                 }
+
+                {!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"
+                    htmlFor="null-filter"
+                >
+                    <Checkbox id="null-filter"
+                              checked={internalValue === null}
+                              size={"small"}
+                              onCheckedChange={(checked) => {
+                                  if (internalValue !== null)
+                                      updateFilter(operation, null);
+                                  else updateFilter(operation, undefined);
+                              }}/>
+                    Filter for null values
+                </Label>}
+
             </div>
 
         </div>