@firecms/core 3.3.0 → 3.4.0-canary.0ef7442

package/src/components/common/table_url_params.ts

@@ -0,0 +1,172 @@
+import { EntityReference, FilterValues, WhereFilterOp } from "../../types";
+import { decodeEntityId, encodeEntityId } from "../../util/navigation_utils";
+
+/**
+ * Internal helpers used by `useDataSourceTableController` to persist the state of a
+ * collection table (filters, sort and text search) in the URL query string.
+ *
+ * These functions are intentionally NOT re-exported by the package barrel files:
+ * they are pure and live in their own module only so that they can be unit tested.
+ * `encodeFilterAndSort` and `parseFilterAndSort` must stay exact inverses of each
+ * other, otherwise state written to the URL is silently dropped on reload.
+ */
+
+/**
+ * Serialise the state of a collection table into a URL query string,
+ * without the leading `?`. Returns an empty string when there is no state to persist.
+ */
+export function encodeFilterAndSort(filterValues?: FilterValues<string>,
+                                    sortBy?: [string, "asc" | "desc"] | undefined,
+                                    searchString?: string) {
+    const entries: Record<string, string> = {};
+    if (sortBy) {
+        entries["__sort"] = encodeURIComponent(sortBy[0]);
+        entries["__sort_order"] = encodeURIComponent(sortBy[1]);
+    }
+    if (filterValues) {
+        Object.entries(filterValues).forEach(([key, value]) => {
+            if (value) {
+                const [op, val] = value;
+                let encodedValue: any = val;
+                try {
+                    if (typeof val === "object") {
+                        if (val instanceof Date) {
+                            encodedValue = val.toISOString();
+                        } else if (Array.isArray(val)) {
+                            encodedValue = JSON.stringify(val, (key, value) => {
+                                if (value instanceof EntityReference) {
+                                    return encodeRef(value);
+                                }
+                                return value;
+                            });
+                        } else if (val instanceof EntityReference) {
+                            encodedValue = encodeRef(val);
+                        }
+                    } else if (typeof val === "string") {
+                        // JSON.stringify wraps the string in quotes (e.g. "4" → '"4"')
+                        // so that decodeString's JSON.parse restores the string type,
+                        // not a number. Without this, "4" round-trips as the number 4.
+                        encodedValue = JSON.stringify(val);
+                    }
+                } catch (e) {
+                    encodedValue = val;
+                }
+                if (encodedValue !== undefined) {
+                    entries[encodeURIComponent(`${key}_op`)] = encodeURIComponent(op);
+                    // 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";
+                }
+            }
+        });
+    }
+    // The text search term is encoded once here; `parseFilterAndSort` reads it back with
+    // `URLSearchParams`, which decodes exactly once. Do NOT decode it a second time or
+    // terms containing a literal `%` (e.g. "50%") would throw a URIError.
+    if (searchString) {
+        entries["search"] = encodeURIComponent(searchString);
+    }
+    if (!Object.keys(entries).length) {
+        return "";
+    }
+    return Object.entries(entries).map(([key, value]) => `${key}=${value}`).join("&");
+}
+
+/**
+ * Restore the state of a collection table from a URL query string.
+ * The inverse of {@link encodeFilterAndSort}.
+ */
+export function parseFilterAndSort<M>(search: string): {
+    filterValues: FilterValues<string> | undefined,
+    sortBy?: [Extract<keyof M, string>, "asc" | "desc"],
+    searchString?: string
+} {
+    const entries = new URLSearchParams(search);
+    const filterValues: FilterValues<string> = {};
+    let sortBy: [string, "asc" | "desc"] | undefined = undefined;
+    entries.forEach((value, key) => {
+        if (key === "__sort") {
+            sortBy = [decodeURIComponent(value), entries.get("__sort_order") as "asc" | "desc"];
+        } else if (key.endsWith("_op")) {
+            const field = key.replace("_op", "");
+            const filterOp = decodeURIComponent(value) as WhereFilterOp;
+            const filterValStr = entries.get(`${field}_value`);
+            if (filterValStr !== null) {
+                filterValues[field] = [filterOp, decodeString(filterValStr)];
+            }
+        }
+    });
+
+    // `URLSearchParams` has already percent-decoded the value, so it is used as is.
+    const searchString = entries.get("search") ?? undefined;
+
+    return {
+        filterValues: Object.keys(filterValues).length ? filterValues : undefined,
+        sortBy,
+        searchString: searchString ? searchString : undefined
+    }
+}
+
+function isDate(dateString: string): boolean {
+    // Define a regex pattern that matches the exact date format: 2025-01-07T23:00:00.000Z
+    const regexPattern = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/;
+
+    // Test the dateString against the regex pattern
+    if (!regexPattern.test(dateString)) {
+        return false;
+    }
+
+    // If the regex matches, further validate if it is a valid UTC date
+    const date = new Date(dateString);
+    return date.toISOString() === dateString;
+}
+
+function encodeRef(val: EntityReference) {
+    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 {
+    let parsedFilterVal: any = val;
+    if (isDate(val)) {
+        try {
+            parsedFilterVal = new Date(val);
+        } catch (e) {
+            // ignore
+        }
+    }
+    if (typeof parsedFilterVal === "string") {
+        try {
+            parsedFilterVal = JSON.parse(parsedFilterVal, (key, value) => {
+                if (typeof value === "string" && value.startsWith("ref::")) {
+                    return decodeRef(value.substring(5));
+                }
+                return value;
+            });
+        } catch (e) {
+            // ignore
+        }
+    }
+
+    if (typeof parsedFilterVal === "string" && parsedFilterVal.startsWith("ref::")) {
+        return decodeRef(parsedFilterVal.substring(5));
+    }
+    return parsedFilterVal;
+}

package/src/components/common/useDataSourceTableController.tsx

@@ -4,18 +4,19 @@ import { useLocation } from "react-router-dom";
 import { useDataSource, useFireCMSContext, useNavigationController } from "../../hooks";
 import { useDataOrder } from "../../hooks/data/useDataOrder";
 import {
+    DataType,
     Entity,
     EntityCollection,
-    EntityReference,
     EntityTableController,
     FilterValues,
     FireCMSContext,
     SelectedCellProps,
-    User,
-    WhereFilterOp
+    User
 } from "../../types";
 import { useDebouncedData } from "./useDebouncedData";
 import { ScrollRestorationController } from "./useScrollRestoration";
+import { isDataTypeFilterable } from "../../util";
+import { encodeFilterAndSort, parseFilterAndSort } from "./table_url_params";
 
 const DEFAULT_PAGE_SIZE = 50;
 
@@ -24,6 +25,12 @@ export type DataSourceTableControllerProps<M extends Record<string, any> = any>
      * Full path where the data of this table is located
      */
     fullPath: string;
+    /**
+     * `fullPath` split at its real segment boundaries. Passed through to the datasource so
+     * a parent entity id containing "/" stays unambiguous. Defaults to splitting
+     * `fullPath`, which is correct for any backend whose ids cannot contain "/".
+     */
+    pathSegments?: string[];
     /**
      * The collection that is represented by this config.
      */
@@ -68,6 +75,7 @@ export type DataSourceTableControllerProps<M extends Record<string, any> = any>
 export function useDataSourceTableController<M extends Record<string, any> = any, USER extends User = User>(
     {
         fullPath,
+        pathSegments,
         collection,
         scrollRestoration,
         entitiesDisplayedFirst,
@@ -87,19 +95,20 @@ export function useDataSourceTableController<M extends Record<string, any> = any
     const navigation = useNavigationController();
     const dataSource = useDataSource(collection);
     const resolvedPath = useMemo(() => navigation.resolveIdsFrom(fullPath), [fullPath, navigation.resolveIdsFrom]);
+    // Passed through as-is; never derived from `resolvedPath` (see useEntityFetch).
+    const resolvedPathSegments = pathSegments;
 
     const forceFilter = forceFilterFromProps ?? forceFilterFromCollection;
     const paginationEnabled = collection.pagination === undefined || Boolean(collection.pagination);
     const pageSize = typeof collection.pagination === "number" ? collection.pagination : DEFAULT_PAGE_SIZE;
 
-    const [searchString, setSearchString] = React.useState<string | undefined>();
-
     const checkFilterCombination = useCallback((filterValues: FilterValues<any>,
         sortBy?: [string, "asc" | "desc"]) => {
         if (!dataSource.isFilterCombinationValid)
             return true;
         return dataSource.isFilterCombinationValid({
             path: resolvedPath,
+            pathSegments: resolvedPathSegments,
             collection,
             filterValues,
             sortBy
@@ -134,10 +143,49 @@ export function useDataSourceTableController<M extends Record<string, any> = any
     const {
         filterValues: initialFilterUrl,
         sortBy: initialSortUrl,
+        searchString: initialSearchUrl
     } = parseFilterAndSort(location.search);
 
-    const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? (updateUrl ? initialFilterUrl : undefined) ?? initialFilter ?? undefined);
+    const availableFilterKeys = collection.allowedFilters ?? Object.keys(collection.properties);
+    const forcedFilterKeys = collection.forceFilter ? Object.keys(collection.forceFilter) : [];
+
+    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);
+    // Like the filters and the sort, the text search term is only restored from the URL when
+    // this controller owns the URL. Controllers rendered inside a dialog (e.g. a reference
+    // selection dialog) get `updateUrl: false` and must not inherit the state of the
+    // collection behind them. See https://github.com/firecmsco/firecms/issues/702
+    const [searchString, setSearchString] = React.useState<string | undefined>(updateUrl ? initialSearchUrl : undefined);
 
     useUpdateUrl(filterValues, sortBy, searchString, updateUrl);
 
@@ -168,7 +216,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,15 +226,20 @@ 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(() => {
 
         setDataLoading(true);
 
         const onEntitiesUpdate = async (entities: Entity<M>[]) => {
+            // See useEntityFetch: entities carry the segments they were loaded with, so a
+            // reference or a delete derived from a table row stays resolvable.
+            if (resolvedPathSegments) {
+                entities = entities.map(e => e.pathSegments ? e : { ...e, pathSegments: resolvedPathSegments });
+            }
             if (collection.callbacks?.onFetch) {
                 try {
                     entities = await Promise.all(
@@ -217,32 +270,45 @@ export function useDataSourceTableController<M extends Record<string, any> = any
             setDataLoadingError(error);
         };
 
-        if (dataSource.listenCollection) {
-            return dataSource.listenCollection<M>({
-                path: resolvedPath,
-                collection,
-                onUpdate: onEntitiesUpdate,
-                onError,
-                searchString,
-                filter: filterValues,
-                limit: itemCount,
-                startAfter: undefined,
-                orderBy: sortByProperty,
-                order: currentSort
-            });
-        } else {
-            dataSource.fetchCollection<M>({
-                path: resolvedPath,
-                collection,
-                searchString,
-                filter: filterValues,
-                limit: itemCount,
-                startAfter: undefined,
-                orderBy: sortByProperty,
-                order: currentSort
-            })
-                .then(onEntitiesUpdate)
-                .catch(onError);
+        // Data sources may throw synchronously, e.g. when a text search is requested before
+        // the text search backend of the collection has been initialised. That can happen
+        // when the search term is restored from the URL instead of typed in the search bar,
+        // so it is reported as a data loading error rather than being left to blow up the
+        // whole view from inside this effect.
+        try {
+            if (dataSource.listenCollection) {
+                return dataSource.listenCollection<M>({
+                    path: resolvedPath,
+                    pathSegments: resolvedPathSegments,
+                    collection,
+                    onUpdate: onEntitiesUpdate,
+                    onError,
+                    searchString,
+                    filter: filterValues,
+                    limit: itemCount,
+                    startAfter: undefined,
+                    orderBy: sortByProperty,
+                    order: currentSort
+                });
+            } else {
+                dataSource.fetchCollection<M>({
+                    path: resolvedPath,
+                    pathSegments: resolvedPathSegments,
+                    collection,
+                    searchString,
+                    filter: filterValues,
+                    limit: itemCount,
+                    startAfter: undefined,
+                    orderBy: sortByProperty,
+                    order: currentSort
+                })
+                    .then(onEntitiesUpdate)
+                    .catch(onError);
+                return () => {
+                };
+            }
+        } catch (e: any) {
+            onError(e instanceof Error ? e : new Error(String(e)));
             return () => {
             };
         }
@@ -268,6 +334,8 @@ export function useDataSourceTableController<M extends Record<string, any> = any
         dataLoadingError,
         filterValues,
         setFilterValues: updateFilterValues,
+        allowedFilters: allowedFilterKeys,
+        forcedFilters: forcedFilterKeys,
         sortBy,
         setSortBy,
         searchString,
@@ -294,9 +362,7 @@ function useUpdateUrl<M extends Record<string, any> = any>(
 
     useEffect(() => {
         if (updateUrl) {
-            const newUrl = encodeFilterAndSort(filterValues, sortBy);
-            const search = searchString ? `&search=${encodeURIComponent(searchString)}` : "";
-            const state = `${newUrl}${search}`;
+            const state = encodeFilterAndSort(filterValues, sortBy, searchString);
             const hash = window.location.hash;
             if (state === "")
                 window.history.replaceState({}, "", `${window.location.pathname}${hash}`);
@@ -305,124 +371,3 @@ function useUpdateUrl<M extends Record<string, any> = any>(
         }
     }, [filterValues, sortBy, searchString, updateUrl]);
 }
-
-function encodeFilterAndSort(filterValues?: FilterValues<string>, sortBy?: [string, "asc" | "desc"] | undefined) {
-    const entries: Record<string, string> = {};
-    if (sortBy) {
-        entries["__sort"] = encodeURIComponent(sortBy[0]);
-        entries["__sort_order"] = encodeURIComponent(sortBy[1]);
-    }
-    if (filterValues) {
-        Object.entries(filterValues).forEach(([key, value]) => {
-            if (value) {
-                const [op, val] = value;
-                let encodedValue: any = val;
-                try {
-                    if (typeof val === "object") {
-                        if (val instanceof Date) {
-                            encodedValue = val.toISOString();
-                        } else if (Array.isArray(val)) {
-                            encodedValue = JSON.stringify(val, (key, value) => {
-                                if (value instanceof EntityReference) {
-                                    return encodeRef(value);
-                                }
-                                return value;
-                            });
-                        } else if (val instanceof EntityReference) {
-                            encodedValue = encodeRef(val);
-                        }
-                    } else if (typeof val === "string") {
-                        // JSON.stringify wraps the string in quotes (e.g. "4" → '"4"')
-                        // so that decodeString's JSON.parse restores the string type,
-                        // not a number. Without this, "4" round-trips as the number 4.
-                        encodedValue = JSON.stringify(val);
-                    }
-                } catch (e) {
-                    encodedValue = val;
-                }
-                if (encodedValue !== undefined) {
-                    entries[encodeURIComponent(`${key}_op`)] = encodeURIComponent(op);
-                    entries[encodeURIComponent(`${key}_value`)] = encodedValue ? encodeURIComponent(encodedValue.toString()) : "null";
-                }
-            }
-        });
-    }
-    if (!Object.keys(entries).length) {
-        return "";
-    }
-    return Object.entries(entries).map(([key, value]) => `${key}=${value}`).join("&");
-}
-
-function parseFilterAndSort<M>(search: string): {
-    filterValues: FilterValues<string> | undefined,
-    sortBy?: [Extract<keyof M, string>, "asc" | "desc"]
-} {
-    const entries = new URLSearchParams(search);
-    const filterValues: FilterValues<string> = {};
-    let sortBy: [string, "asc" | "desc"] | undefined = undefined;
-    entries.forEach((value, key) => {
-        if (key === "__sort") {
-            sortBy = [decodeURIComponent(value), entries.get("__sort_order") as "asc" | "desc"];
-        } else if (key.endsWith("_op")) {
-            const field = key.replace("_op", "");
-            const filterOp = decodeURIComponent(value) as WhereFilterOp;
-            const filterValStr = entries.get(`${field}_value`);
-            if (filterValStr !== null) {
-                filterValues[field] = [filterOp, decodeString(filterValStr)];
-            }
-        }
-    });
-
-    return {
-        filterValues: Object.keys(filterValues).length ? filterValues : undefined,
-        sortBy
-    }
-}
-
-function isDate(dateString: string): boolean {
-    // Define a regex pattern that matches the exact date format: 2025-01-07T23:00:00.000Z
-    const regexPattern = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/;
-
-    // Test the dateString against the regex pattern
-    if (!regexPattern.test(dateString)) {
-        return false;
-    }
-
-    // If the regex matches, further validate if it is a valid UTC date
-    const date = new Date(dateString);
-    return date.toISOString() === dateString;
-}
-
-function encodeRef(val: EntityReference) {
-    return `ref::${val.path}/${val.id}`;
-}
-
-function decodeString(val: string): EntityReference | Date | string {
-    let parsedFilterVal: any = val;
-    if (isDate(val)) {
-        try {
-            parsedFilterVal = new Date(val);
-        } catch (e) {
-            // ignore
-        }
-    }
-    if (typeof parsedFilterVal === "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 value;
-            });
-        } catch (e) {
-            // ignore
-        }
-    }
-
-    if (typeof parsedFilterVal === "string" && parsedFilterVal.startsWith("ref::")) {
-        const [path, id] = parsedFilterVal.substring(5).split("/");
-        return new EntityReference(id, path);
-    }
-    return parsedFilterVal;
-}

package/src/components/common/useTableSearchHelper.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { EntityCollection } from "../../types";
 import { useCustomizationController, useDataSource, useFireCMSContext } from "../../hooks";
@@ -7,12 +7,19 @@ export interface UseTableSearchHelperParams<M extends Record<string, any>> {
     collection: EntityCollection<M>;
     fullPath: string;
     parentCollectionIds?: string[];
+    /**
+     * Search term that is already being applied without the user having gone through the
+     * search bar, e.g. one restored from the URL query params. When set, text search is
+     * initialised automatically instead of waiting for a click on the search bar.
+     */
+    initialSearchString?: string;
 }
 
 export function useTableSearchHelper<M extends Record<string, any>>({
                                                                         collection,
                                                                         fullPath,
-                                                                        parentCollectionIds
+                                                                        parentCollectionIds,
+                                                                        initialSearchString
                                                                     }: UseTableSearchHelperParams<M>) {
 
     const context = useFireCMSContext();
@@ -21,6 +28,7 @@ export function useTableSearchHelper<M extends Record<string, any>>({
 
     const [textSearchLoading, setTextSearchLoading] = useState<boolean>(false);
     const [textSearchInitialised, setTextSearchInitialised] = useState<boolean>(false);
+    const autoInitialisedRef = useRef<boolean>(false);
 
     let onTextSearchClick: (() => void) | undefined;
     let textSearchEnabled = Boolean(collection.textSearchEnabled);
@@ -79,6 +87,17 @@ export function useTableSearchHelper<M extends Record<string, any>>({
                 }
         })
     }
+
+    // Only ever runs once, and only when a search term was restored from outside the search
+    // bar: otherwise the search bar would show a term the user can neither edit nor clear,
+    // because it stays read only until text search is initialised.
+    const shouldAutoInitialise = Boolean(initialSearchString) && textSearchEnabled && !textSearchInitialised && Boolean(onTextSearchClick);
+    useEffect(() => {
+        if (autoInitialisedRef.current || !shouldAutoInitialise) return;
+        autoInitialisedRef.current = true;
+        onTextSearchClick?.();
+    }, [shouldAutoInitialise]);
+
     return {
         textSearchLoading,
         textSearchInitialised,

package/src/contexts/SnackbarProvider.tsx

@@ -1,12 +1,25 @@
 "use client";
 
-import React, { PropsWithChildren } from "react";
+import React, { PropsWithChildren, useEffect, useState } from "react";
 import { SnackbarProvider as NotistackSnackbarProvider } from "notistack";
 
 export const SnackbarProvider: React.FC<PropsWithChildren<{}>> = ({ children }) => {
 
+    // Notistack renders the snackbars inline, right where this provider sits in the
+    // tree, unless it is given a `domRoot`. Dialogs and side dialogs, on the other
+    // hand, are portalled to the body, so any ancestor of this provider that creates
+    // a stacking context (a transform, a filter, an `isolate`, a positioned element
+    // with a z-index...) traps the snackbars underneath them. Portalling the
+    // snackbars to the body as well puts them in the same stacking context as the
+    // dialogs, where their z-index actually wins.
+    const [domRoot, setDomRoot] = useState<HTMLElement | undefined>(undefined);
+    useEffect(() => {
+        setDomRoot(document.body);
+    }, []);
+
     return (
         <NotistackSnackbarProvider maxSnack={3}
+                                   domRoot={domRoot}
                                    autoHideDuration={3500}>
             {children}
         </NotistackSnackbarProvider>