@firecms/core 3.3.0 → 3.4.0-canary.f6a889a

package/src/components/EntityPreview.tsx

@@ -200,43 +200,44 @@ export type EntityPreviewContainerProps = {
     onClick?: (e: React.SyntheticEvent) => void;
 };
 
-export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPreviewContainerProps>(({
-                                                                                                         children,
-                                                                                                         hover,
-                                                                                                         onClick,
-                                                                                                         size = "medium",
-                                                                                                         style,
-                                                                                                         className,
-                                                                                                         fullwidth = true,
-                                                                                                         ...props
-                                                                                                     }, ref) => {
-    return <div
-        ref={ref}
-        style={{
-            ...style,
-            // @ts-ignore
-            tabindex: 0
-        }}
-        className={cls(
-            "bg-white dark:bg-surface-900",
-            "min-h-[44px]",
-            fullwidth ? "w-full" : "",
-            "items-center",
-            hover ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800" : "",
-            size === "small" ? "p-1" : "px-2 py-1",
-            "flex border rounded-lg",
-            onClick ? "cursor-pointer" : "",
-            defaultBorderMixin,
-            className)}
-        onClick={(event) => {
-            if (onClick) {
-                event.preventDefault();
-                onClick(event);
-            }
-        }}
-        {...props}>
-        {children}
-    </div>;
-});
-
-EntityPreviewContainer.displayName = "EntityPreviewContainer";
+export function EntityPreviewContainer({
+                                            children,
+                                            hover,
+                                            onClick,
+                                            size = "medium",
+                                            style,
+                                            className,
+                                            fullwidth = true,
+                                            ref
+                                        }: EntityPreviewContainerProps & { ref?: React.Ref<HTMLDivElement> }) {
+    const divClassName = cls(
+        "bg-white dark:bg-surface-900",
+        "min-h-[44px]",
+        fullwidth ? "w-full" : "",
+        "items-center",
+        hover ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800" : "",
+        size === "small" ? "p-1" : "px-2 py-1",
+        "flex border rounded-lg",
+        onClick ? "cursor-pointer" : "",
+        defaultBorderMixin,
+        className
+    );
+
+    const handleClick = onClick
+        ? (event: React.MouseEvent<HTMLDivElement>) => {
+            event.preventDefault();
+            onClick(event);
+        }
+        : undefined;
+
+    const divProps: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> } = {
+        ref,
+        tabIndex: 0,
+        style,
+        className: divClassName,
+        onClick: handleClick,
+    };
+
+    return <div {...divProps}>{children}</div>;
+}
+

package/src/components/ReferenceWidget.tsx

@@ -73,7 +73,7 @@ export function ReferenceWidget<M extends Record<string, any>>({
         if (disabled)
             return;
         if (onMultipleReferenceSelected) {
-            const references = entities ? entities.map(e => getReferenceFrom(e)) : null;
+            const references = entities ? entities.filter(Boolean).map(e => getReferenceFrom(e)) : null;
             onMultipleReferenceSelected({
                 references,
                 entities

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

@@ -113,11 +113,11 @@ export function ReferenceFilterField({
     }, [path]);
 
     const onSingleEntitySelected = (entity: Entity<any>) => {
-        updateFilter(operation, getReferenceFrom(entity));
+        if (entity) updateFilter(operation, getReferenceFrom(entity));
     };
 
     const onMultipleEntitiesSelected = (entities: Entity<any>[]) => {
-        updateFilter(operation, entities.map(e => getReferenceFrom(e)));
+        updateFilter(operation, entities.filter(Boolean).map(e => getReferenceFrom(e)));
     };
 
     const multiple = multipleSelectOperations.includes(operation);

package/src/components/VirtualTable/VirtualTable.tsx

@@ -135,7 +135,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         const [columns, setColumns] = useState(columnsProp);
 
         const tableRef = useRef<HTMLDivElement>(null);
-        const endReachCallbackThreshold = useRef<number>(0);
+        const lastEndReachedDataLength = useRef<number | undefined>(undefined);
 
         const debouncedScroll = useDebounceCallback(onScrollProp, 200);
 
@@ -242,7 +242,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         }, [filterInput]);
 
         const scrollToTop = useCallback(() => {
-            endReachCallbackThreshold.current = 0;
+            lastEndReachedDataLength.current = undefined;
             if (tableRef.current) {
                 tableRef.current.scrollTo(tableRef.current?.scrollLeft, 0);
             }
@@ -278,13 +278,24 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
 
         const maxScroll = Math.max((data?.length ?? 0) * rowHeight - bounds.height, 0);
 
-        const onEndReachedInternal = useCallback((scrollOffset: number) => {
-            if (onEndReached && (data?.length ?? 0) > 0 && scrollOffset > endReachCallbackThreshold.current + endOffset) {
-                endReachCallbackThreshold.current = scrollOffset;
+        const onEndReachedInternal = useCallback(() => {
+            const dataLength = data?.length ?? 0;
+
+            if (onEndReached && dataLength > 0 && lastEndReachedDataLength.current !== dataLength) {
+                lastEndReachedDataLength.current = dataLength;
                 onEndReached();
             }
         }, [data?.length, onEndReached]);
 
+        useEffect(() => {
+            if (!onEndReached || loading || !data?.length || !bounds.height || !tableRef.current) {
+                return;
+            }
+            if (tableRef.current.scrollHeight <= tableRef.current.clientHeight) {
+                onEndReachedInternal();
+            }
+        }, [bounds.height, data?.length, loading, onEndReached, onEndReachedInternal]);
+
         const onScroll = useCallback(({
             scrollDirection,
             scrollOffset,
@@ -302,12 +313,12 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                 })
             }
             if (!scrollUpdateWasRequested && (scrollOffset >= maxScroll - endOffset))
-                onEndReachedInternal(scrollOffset);
-        }, [maxScroll, onEndReachedInternal]);
+                onEndReachedInternal();
+        }, [endOffset, maxScroll, onEndReachedInternal]);
 
         const onFilterUpdateInternal = useCallback((column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, any]) => {
 
-            endReachCallbackThreshold.current = 0;
+            lastEndReachedDataLength.current = undefined;
             const filter = filterRef.current;
             let newFilterValue: VirtualTableFilterValues<any> = filter ? { ...filter } : {};
 

package/src/components/common/useDataSourceTableController.tsx

@@ -4,6 +4,7 @@ import { useLocation } from "react-router-dom";
 import { useDataSource, useFireCMSContext, useNavigationController } from "../../hooks";
 import { useDataOrder } from "../../hooks/data/useDataOrder";
 import {
+    DataType,
     Entity,
     EntityCollection,
     EntityReference,
@@ -16,6 +17,8 @@ import {
 } from "../../types";
 import { useDebouncedData } from "./useDebouncedData";
 import { ScrollRestorationController } from "./useScrollRestoration";
+import { isDataTypeFilterable } from "../../util";
+import { decodeEntityId, encodeEntityId } from "../../util/navigation_utils";
 
 const DEFAULT_PAGE_SIZE = 50;
 
@@ -135,8 +138,41 @@ export function useDataSourceTableController<M extends Record<string, any> = any
         filterValues: initialFilterUrl,
         sortBy: initialSortUrl,
     } = parseFilterAndSort(location.search);
+    
+    const availableFilterKeys = collection.allowedFilters ?? Object.keys(collection.properties);
+    const forcedFilterKeys = collection.forceFilter ? Object.keys(collection.forceFilter) : [];
 
-    const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? (updateUrl ? initialFilterUrl : undefined) ?? initialFilter ?? undefined);
+    const allowedFilterKeys = useMemo(() => {
+        const availableKeys = availableFilterKeys.filter((key) => {
+            const property = collection.properties[key];
+
+            if (!property) return false;
+
+            if (typeof property === "function") return false;
+
+            const dataType = property.dataType;
+            const filterable = dataType === "array"
+                ? isDataTypeFilterable((property as { of?: { dataType: DataType } }).of?.dataType as DataType, true)
+                : isDataTypeFilterable(dataType);
+
+            return filterable;
+        });
+
+        const forcedKeys = forcedFilterKeys.filter((key) => !availableKeys.includes(key));
+
+        return [...availableKeys, ...forcedKeys];
+
+    }, [collection.properties, availableFilterKeys, forcedFilterKeys]);
+
+    const removeUnallowedFilters = useCallback((filters?: FilterValues<Extract<keyof M, string>>) => {
+        if (!filters) return;
+
+        return Object.fromEntries(Object.entries(filters).filter(([key]) => allowedFilterKeys.includes(key as keyof M)))  as FilterValues<Extract<keyof M, string>>;
+    }, [allowedFilterKeys]);
+
+    const initFilters = forceFilter ?? (updateUrl ? initialFilterUrl : undefined) ?? initialFilter ?? undefined
+
+    const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(removeUnallowedFilters(initFilters));
     const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string>, "asc" | "desc"] | undefined>((updateUrl ? initialSortUrl : undefined) ?? initialSortInternal);
 
     useUpdateUrl(filterValues, sortBy, searchString, updateUrl);
@@ -168,7 +204,7 @@ export function useDataSourceTableController<M extends Record<string, any> = any
     const [dataLoadingError, setDataLoadingError] = useState<Error | undefined>();
     const [noMoreToLoad, setNoMoreToLoad] = useState<boolean>(false);
 
-    const clearFilter = useCallback(() => setFilterValues(forceFilter ?? undefined), [forceFilter]);
+    const clearFilter = useCallback(() => setFilterValues(removeUnallowedFilters(forceFilter)), [forceFilter, removeUnallowedFilters]);
 
     const updateFilterValues = useCallback((updatedFilter: FilterValues<Extract<keyof M, string>> | undefined) => {
         if (forceFilter) {
@@ -178,9 +214,9 @@ export function useDataSourceTableController<M extends Record<string, any> = any
         if (updatedFilter && Object.keys(updatedFilter).length === 0) {
             setFilterValues(undefined);
         } else {
-            setFilterValues(updatedFilter);
+            setFilterValues(removeUnallowedFilters(updatedFilter));
         }
-    }, [forceFilter]);
+    }, [forceFilter, removeUnallowedFilters]);
 
     useEffect(() => {
 
@@ -268,6 +304,8 @@ export function useDataSourceTableController<M extends Record<string, any> = any
         dataLoadingError,
         filterValues,
         setFilterValues: updateFilterValues,
+        allowedFilters: allowedFilterKeys,
+        forcedFilters: forcedFilterKeys,
         sortBy,
         setSortBy,
         searchString,
@@ -342,7 +380,13 @@ function encodeFilterAndSort(filterValues?: FilterValues<string>, sortBy?: [stri
                 }
                 if (encodedValue !== undefined) {
                     entries[encodeURIComponent(`${key}_op`)] = encodeURIComponent(op);
-                    entries[encodeURIComponent(`${key}_value`)] = encodedValue ? encodeURIComponent(encodedValue.toString()) : "null";
+                    // Note: check for null/undefined explicitly instead of truthiness,
+                    // otherwise falsy-but-valid values (boolean `false`, number `0`)
+                    // would be serialized as "null" and round-trip back as `null`,
+                    // breaking filters like `archived == false`.
+                    entries[encodeURIComponent(`${key}_value`)] = encodedValue !== null && encodedValue !== undefined
+                        ? encodeURIComponent(encodedValue.toString())
+                        : "null";
                 }
             }
         });
@@ -394,7 +438,21 @@ function isDate(dateString: string): boolean {
 }
 
 function encodeRef(val: EntityReference) {
-    return `ref::${val.path}/${val.id}`;
+    return `ref::${val.path}/${encodeEntityId(val.id)}`;
+}
+
+/**
+ * Split a "path/id" reference on its LAST separator: the path may itself be a
+ * subcollection path with several segments, and the id is escaped so it is always exactly
+ * one segment.
+ */
+function decodeRef(encoded: string): EntityReference {
+    const separatorIndex = encoded.lastIndexOf("/");
+    if (separatorIndex < 0) return new EntityReference(encoded, "");
+    return new EntityReference(
+        decodeEntityId(encoded.substring(separatorIndex + 1)),
+        encoded.substring(0, separatorIndex)
+    );
 }
 
 function decodeString(val: string): EntityReference | Date | string {
@@ -410,8 +468,7 @@ function decodeString(val: string): EntityReference | Date | string {
         try {
             parsedFilterVal = JSON.parse(parsedFilterVal, (key, value) => {
                 if (typeof value === "string" && value.startsWith("ref::")) {
-                    const [path, id] = value.substring(5).split("/");
-                    return new EntityReference(id, path);
+                    return decodeRef(value.substring(5));
                 }
                 return value;
             });
@@ -421,8 +478,7 @@ function decodeString(val: string): EntityReference | Date | string {
     }
 
     if (typeof parsedFilterVal === "string" && parsedFilterVal.startsWith("ref::")) {
-        const [path, id] = parsedFilterVal.substring(5).split("/");
-        return new EntityReference(id, path);
+        return decodeRef(parsedFilterVal.substring(5));
     }
     return parsedFilterVal;
 }

package/src/core/DefaultDrawer.tsx

@@ -10,7 +10,16 @@ import {
 import { Link, useNavigate } from "react-router-dom";
 import { CMSAnalyticsEvent, NavigationEntry, NavigationResult } from "../types";
 import { IconForView } from "../util";
-import { cls, IconButton, Menu, MenuItem, MoreVertIcon, Tooltip } from "@firecms/ui";
+import {
+    cls,
+    KeyboardDoubleArrowLeftIcon,
+    KeyboardDoubleArrowRightIcon,
+    Menu,
+    MenuItem,
+    MoreVertIcon,
+    Tooltip,
+    Typography
+} from "@firecms/ui";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 import { DrawerNavigationGroup } from "./DrawerNavigationGroup";
 import { FireCMSLogo } from "../components";
@@ -37,6 +46,14 @@ export function DefaultDrawer({
 
     const [adminMenuOpen, setAdminMenuOpen] = React.useState(false);
 
+    const scrollRef = React.useRef<HTMLDivElement>(null);
+    const [scrolled, setScrolled] = React.useState(false);
+    const handleScroll = () => {
+        if (scrollRef.current) {
+            setScrolled(scrollRef.current.scrollTop > 0);
+        }
+    };
+
     const analyticsController = useAnalyticsController();
     const navigation = useNavigationController();
     const { t } = useTranslation();
@@ -59,6 +76,8 @@ export function DefaultDrawer({
     // Collapsible groups state - using "drawer" namespace for independent state from home page
     const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupsWithoutAdmin, "drawer");
 
+    const drawerVisuallyOpen = drawerOpen || drawerHovered;
+
     const onItemClick = (view: NavigationEntry) => {
         const eventName: CMSAnalyticsEvent = view.type === "collection"
             ? "drawer_navigate_to_collection"
@@ -69,56 +88,66 @@ export function DefaultDrawer({
     };
 
     return (
-        <>
-            <div className={cls("flex flex-col h-full relative flex-grow w-full", className)} style={style}>
-
-                <DrawerLogo logo={logo} />
-
-                <div className={"mt-4 flex-grow overflow-scroll no-scrollbar"}
-                    style={{
-                        maskImage: "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)",
-                    }}>
-
-                    {groupsWithoutAdmin.map((group) => {
-                        const entriesInGroup = Object.values(navigationEntries).filter(e => e.group === group);
-                        return (
-                            <DrawerNavigationGroup
-                                key={`drawer_group_${group}`}
-                                group={group}
-                                entries={entriesInGroup}
-                                collapsed={isGroupCollapsed(group)}
-                                onToggleCollapsed={() => toggleGroupCollapsed(group)}
-                                drawerOpen={drawerOpen}
-                                tooltipsOpen={tooltipsOpen}
-                                adminMenuOpen={adminMenuOpen}
-                                onItemClick={onItemClick}
-                            />
-                        );
-                    })}
+        <div role="navigation" aria-label="Main navigation"
+             className={cls("flex flex-col h-full relative grow w-full", className)} style={style}>
 
-                </div>
+            <DrawerLogo logo={logo} />
+
+            <div
+                ref={scrollRef}
+                onScroll={handleScroll}
+                className={"flex-grow min-h-0 overflow-y-auto overflow-x-hidden no-scrollbar px-2"}
+                style={{
+                    maskImage: scrolled
+                        ? "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)"
+                        : "linear-gradient(to bottom, black 0, black calc(100% - 20px), transparent 100%)"
+                }}>
+
+                {groupsWithoutAdmin.map((group) => {
+                    const entriesInGroup = Object.values(navigationEntries).filter(e => e.group === group);
+                    return (
+                        <DrawerNavigationGroup
+                            key={`drawer_group_${group}`}
+                            group={group}
+                            entries={entriesInGroup}
+                            collapsed={isGroupCollapsed(group)}
+                            onToggleCollapsed={() => toggleGroupCollapsed(group)}
+                            drawerOpen={drawerVisuallyOpen}
+                            tooltipsOpen={tooltipsOpen}
+                            adminMenuOpen={adminMenuOpen}
+                            onItemClick={onItemClick}
+                        />
+                    );
+                })}
 
-                {adminViews.length > 0 && <Menu
+            </div>
+
+            {adminViews.length > 0 && <div className={"shrink-0 px-4"}>
+                <Menu
                     side={"right"}
                     open={adminMenuOpen}
                     onOpenChange={setAdminMenuOpen}
                     trigger={
-                        <IconButton
-                            shape={"square"}
-                            className={"m-4 text-surface-900 dark:text-white w-fit"}>
-                            <Tooltip title={"Admin"}
-                                open={tooltipsOpen}
-                                side={"right"} sideOffset={28}>
-                                <MoreVertIcon />
-                            </Tooltip>
-                            {drawerOpen && <div
+                        <div
+                            className={cls(
+                                "flex flex-row items-center rounded-lg cursor-pointer w-full",
+                                "hover:bg-surface-accent-100 dark:hover:bg-surface-800 transition-colors duration-150 h-[30px]"
+                            )}>
+                            <div
+                                className={"shrink-0 flex items-center justify-center w-[44px] h-[30px] text-surface-500 dark:text-surface-400"}>
+                                <Tooltip title={"Admin"}
+                                         open={drawerVisuallyOpen || adminMenuOpen ? false : tooltipsOpen}
+                                         side={"right"} sideOffset={28}>
+                                    <MoreVertIcon size={"small"} />
+                                </Tooltip>
+                            </div>
+                            {drawerVisuallyOpen && <div
                                 className={cls(
-                                    drawerOpen ? "opacity-100" : "opacity-0 hidden",
-                                    "mx-4 font-inherit text-inherit"
+                                    "font-semibold text-[11px] uppercase tracking-wider text-surface-400"
                                 )}>
-                                ADMIN
+                                {t("admin")}
                             </div>}
-                        </IconButton>}
+                        </div>}
                 >
                     {adminViews.map((entry) =>
                         <MenuItem
@@ -131,46 +160,103 @@ export function DefaultDrawer({
                             {t(entry.name)}
                         </MenuItem>)}
 
-                </Menu>}
-            </div>
+                </Menu>
+            </div>}
 
-        </>
+            <DrawerToggle />
+        </div>
     );
 }
 
 /**
- * This is the logo displayed in the drawer
- * It expands when the drawer is open.
+ * Collapse/expand toggle rendered at the bottom of the drawer.
+ * Uses double-chevron icons to indicate direction. Reads the drawer state
+ * from {@link useApp} so it can be dropped into any drawer.
  *
- * @param logo
+ * @group Core
+ */
+export function DrawerToggle() {
+    const {
+        drawerOpen,
+        drawerHovered,
+        openDrawer,
+        closeDrawer
+    } = useApp();
+    const isExpanded = drawerOpen;
+    const isHovered = drawerHovered && !drawerOpen;
+    const showFullContent = isExpanded || isHovered;
+
+    return (
+        <div className="shrink-0 mt-auto px-4 pt-0.5 pb-2">
+            <Tooltip
+                title={isExpanded ? "Collapse" : "Expand"}
+                side="right"
+                sideOffset={12}
+                open={isHovered ? false : undefined}
+            >
+                <div
+                    className={cls(
+                        "flex flex-row items-center rounded-lg cursor-pointer",
+                        "hover:bg-surface-accent-100 dark:hover:bg-surface-800",
+                        "transition-colors duration-150 h-[30px]"
+                    )}
+                    role="button"
+                    tabIndex={0}
+                    aria-expanded={isExpanded}
+                    aria-label={isExpanded ? "Collapse" : "Expand"}
+                    onClick={() => isExpanded ? closeDrawer() : openDrawer()}
+                    onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            isExpanded ? closeDrawer() : openDrawer();
+                        }
+                    }}
+                >
+                    <div className="shrink-0 flex items-center justify-center w-[44px] h-[30px] text-surface-500 dark:text-surface-400">
+                        {isExpanded
+                            ? <KeyboardDoubleArrowLeftIcon size={"small"} />
+                            : <KeyboardDoubleArrowRightIcon size={"small"} />}
+                    </div>
+                    <div className={cls(
+                        "overflow-hidden transition-all duration-200 ease-in-out",
+                        showFullContent ? "opacity-100 w-auto" : "opacity-0 w-0"
+                    )}>
+                        <Typography
+                            variant="body2"
+                            className="text-surface-500 dark:text-surface-400 select-none whitespace-nowrap"
+                        >
+                            {isExpanded ? "Collapse" : "Expand"}
+                        </Typography>
+                    </div>
+                </div>
+            </Tooltip>
+        </div>
+    );
+}
 
+/**
+ * This is the logo displayed in the drawer.
+ * A compact logo aligned to the left of the drawer header.
+ *
+ * @param logo
  */
 export function DrawerLogo({ logo }: {
     logo?: string;
 }) {
 
     const navigation = useNavigationController();
-    const { drawerOpen } = useApp();
-    return <div
-        style={{
-            transition: "padding 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
-            padding: drawerOpen ? "32px 144px 0px 24px" : "72px 12px 0px 12px"
-        }}
-        className={cls("cursor-pointer rounded ml-3 mr-1")}>
-
+    return <div className="flex flex-row items-center shrink-0 pt-4 pb-0 px-2">
         <Tooltip title={"Home"}
-            sideOffset={20}
-            side="right">
+                 sideOffset={20}
+                 side="right">
             <Link
-                className={"block"}
+                className={"shrink-0 flex items-center justify-center w-[56px] h-[40px]"}
                 to={navigation.basePath}>
                 {logo
                     ? <img src={logo}
-                        alt="Logo"
-                        className={cls("max-w-full max-h-full transition-all object-contain",
-                            drawerOpen ? "w-[96px] h-[96px]" : "w-[32px] h-[32px]")} />
-                    : <FireCMSLogo />}
-
+                           alt="Logo"
+                           className={"w-[28px] h-[28px] object-contain"} />
+                    : <FireCMSLogo width={"28px"} height={"28px"} />}
             </Link>
         </Tooltip>
     </div>;