@firecms/core 3.0.0-canary.9 → 3.0.0-canary.90

package/src/preview/components/ImagePreview.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useMemo, useState } from "react";
+import React, { CSSProperties, useMemo } from "react";
 
 import { getThumbnailMeasure } from "../util";
 import { PreviewSize } from "../PropertyPreviewProps";
@@ -20,8 +20,6 @@ export function ImagePreview({
                                  url
                              }: ImagePreviewProps) {
 
-    const [onHover, setOnHover] = useState(false);
-
     const imageSize = useMemo(() => getThumbnailMeasure(size), [size]);
 
     if (size === "tiny") {
@@ -47,60 +45,50 @@ export function ImagePreview({
 
     return (
         <div
-            className="relative flex items-center justify-center max-w-full max-h-full"
+            className="relative flex items-center justify-center max-w-full max-h-full group"
             style={{
                 width: imageSize,
                 height: imageSize
             }}
-            key={"image_preview_" + url}
-            onMouseEnter={() => setOnHover(true)}
-            onMouseMove={() => setOnHover(true)}
-            onMouseLeave={() => setOnHover(false)}>
+            key={"image_preview_" + url}>
 
             <img src={url}
                  className={"rounded-md"}
                  style={imageStyle}/>
 
-            {onHover && <>
 
-                {navigator && <Tooltip title="Copy url to clipboard">
-                    <div
-                        className="rounded-full absolute bottom-[-4px] right-8">
-                        <IconButton
-                            variant={"filled"}
-                            size={"small"}
-                            onClick={(e) => {
-                                e.stopPropagation();
-                                e.preventDefault();
-                                return navigator.clipboard.writeText(url);
-                            }}>
-                            <ContentCopyIcon className={"text-gray-500"}
-                                             size={"small"}/>
-                        </IconButton>
-                    </div>
+            <div className={"flex flex-row gap-2 absolute bottom-[-4px] right-[-4px] invisible group-hover:visible"}>
+                {navigator && <Tooltip title="Copy url to clipboard" side={"bottom"}>
+                    <IconButton
+                        variant={"filled"}
+                        size={"small"}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            return navigator.clipboard.writeText(url);
+                        }}>
+                        <ContentCopyIcon className={"text-gray-700 dark:text-gray-300"}
+                                         size={"small"}/>
+                    </IconButton>
                 </Tooltip>}
 
-                <Tooltip title="Open image in new tab">
+                <Tooltip title="Open image in new tab" side={"bottom"}>
                     <IconButton
+                        className="invisible group-hover:visible"
                         variant={"filled"}
                         component={"a" as React.ElementType}
-                        style={{
-                            position: "absolute",
-                            bottom: -4,
-                            right: -4
-                        }}
                         href={url}
                         rel="noopener noreferrer"
                         target="_blank"
                         size={"small"}
                         onClick={(e: any) => e.stopPropagation()}
                     >
-                        <OpenInNewIcon className={"text-gray-500"}
+                        <OpenInNewIcon className={"text-gray-700 dark:text-gray-300"}
                                        size={"small"}/>
                     </IconButton>
                 </Tooltip>
-            </>
-            }
+            </div>
+
         </div>
     );
 }

package/src/preview/components/ReferencePreview.tsx

@@ -1,16 +1,10 @@
 import * as React from "react";
 
 import { Entity, EntityCollection, EntityReference } from "../../types";
-import {
-    useCustomizationController,
-    useEntityFetch,
-    useNavigationController,
-    useSideEntityController
-} from "../../hooks";
+import { useCustomizationController, useEntityFetch, useNavigationController } from "../../hooks";
 import { PreviewSize } from "../PropertyPreviewProps";
-import { IconButton, KeyboardTabIcon, Skeleton, Tooltip } from "@firecms/ui";
+import { Skeleton } from "@firecms/ui";
 import { ErrorView } from "../../components";
-import { useAnalyticsController } from "../../hooks/useAnalyticsController";
 import { EntityPreview, EntityPreviewContainer } from "../../components/EntityPreview";
 
 export type ReferencePreviewProps = {
@@ -20,7 +14,8 @@ export type ReferencePreviewProps = {
     previewProperties?: string[];
     onClick?: (e: React.SyntheticEvent) => void;
     hover?: boolean;
-    allowEntityNavigation?: boolean;
+    includeEntityLink?: boolean;
+    includeId?: boolean;
 };
 
 /**
@@ -46,25 +41,27 @@ function areEqual(prevProps: ReferencePreviewProps, nextProps: ReferencePreviewP
         prevProps.hover === nextProps.hover &&
         prevProps.reference?.id === nextProps.reference?.id &&
         prevProps.reference?.path === nextProps.reference?.path &&
-        prevProps.allowEntityNavigation === nextProps.allowEntityNavigation
+        prevProps.includeEntityLink === nextProps.includeEntityLink &&
+        prevProps.onClick === nextProps.onClick
         ;
 }
 
-function ReferencePreviewInternal<M extends Record<string, any>>({
-                                                                     disabled,
-                                                                     reference,
-                                                                     previewProperties,
-                                                                     size,
-                                                                     hover,
-                                                                     onClick,
-                                                                     allowEntityNavigation = true
-                                                                 }: ReferencePreviewProps) {
+function ReferencePreviewInternal({
+                                      disabled,
+                                      reference,
+                                      previewProperties,
+                                      size,
+                                      hover,
+                                      onClick,
+                                      includeEntityLink = true,
+                                      includeId = true
+                                  }: ReferencePreviewProps) {
 
     const customizationController = useCustomizationController();
 
     const navigationController = useNavigationController();
 
-    const collection = navigationController.getCollection<EntityCollection<M>>(reference.path);
+    const collection = navigationController.getCollection(reference.path);
     if (!collection) {
         if (customizationController.components?.missingReference) {
             return <customizationController.components.missingReference path={reference.path}/>;
@@ -79,7 +76,8 @@ function ReferencePreviewInternal<M extends Record<string, any>>({
         previewProperties={previewProperties}
         size={size}
         disabled={disabled}
-        allowEntityNavigation={allowEntityNavigation}
+        includeEntityLink={includeEntityLink}
+        includeId={includeId}
         onClick={onClick}
         hover={hover}/>
 }
@@ -90,7 +88,8 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({
                                                                            previewProperties,
                                                                            size,
                                                                            disabled,
-                                                                           allowEntityNavigation,
+                                                                           includeEntityLink,
+                                                                           includeId,
                                                                            onClick,
                                                                            hover
                                                                        }: ReferencePreviewProps & {
@@ -158,7 +157,8 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({
                           entity={usedEntity}
                           collection={collection}
                           onClick={onClick}
-                          includeEntityNavigation={allowEntityNavigation}
+                          includeEntityLink={includeEntityLink}
+                          includeId={includeId}
                           hover={hover}/>;
 
 }

package/src/preview/components/StorageThumbnail.tsx

@@ -11,6 +11,7 @@ type StorageThumbnailProps = {
     storagePathOrDownloadUrl: string;
     storeUrl: boolean;
     size: PreviewSize;
+    interactive?: boolean;
 };
 
 /**
@@ -21,13 +22,15 @@ export const StorageThumbnail = React.memo<StorageThumbnailProps>(StorageThumbna
 function areEqual(prevProps: StorageThumbnailProps, nextProps: StorageThumbnailProps) {
     return prevProps.size === nextProps.size &&
         prevProps.storagePathOrDownloadUrl === nextProps.storagePathOrDownloadUrl &&
-        prevProps.storeUrl === nextProps.storeUrl;
+        prevProps.storeUrl === nextProps.storeUrl&&
+        prevProps.interactive === nextProps.interactive;
 }
 
 const URL_CACHE: Record<string, DownloadConfig> = {};
 
 export function StorageThumbnailInternal({
                                              storeUrl,
+                                             interactive,
                                              storagePathOrDownloadUrl,
                                              size
                                          }: StorageThumbnailProps) {
@@ -68,6 +71,7 @@ export function StorageThumbnailInternal({
     return downloadConfig?.url
         ? <UrlComponentPreview previewType={previewType}
                                url={downloadConfig.url}
+                               interactive={interactive}
                                size={size}
                                hint={storagePathOrDownloadUrl}/>
         : renderSkeletonImageThumbnail(size);

package/src/preview/components/UrlComponentPreview.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { useMemo } from "react";
 
 import { ImagePreview } from "./ImagePreview";
 import { getThumbnailMeasure } from "../util";
 import { PreviewType } from "../../types";
 import { PreviewSize } from "../PropertyPreviewProps";
-import { DescriptionIcon, OpenInNewIcon, Tooltip, Typography } from "@firecms/ui";
+import { cls, DescriptionIcon, OpenInNewIcon, Tooltip, Typography } from "@firecms/ui";
 import { EmptyValue } from "./EmptyValue";
 
 /**
@@ -14,12 +14,15 @@ export function UrlComponentPreview({
                                         url,
                                         previewType,
                                         size,
-                                        hint
+                                        hint,
+                                        interactive = true
                                     }: {
     url: string,
     previewType?: PreviewType,
     size: PreviewSize,
-    hint?: string
+    hint?: string,
+    // for video controls
+    interactive?: boolean
 }): React.ReactElement {
 
     if (!previewType) {
@@ -43,17 +46,13 @@ export function UrlComponentPreview({
                              size={size}/>;
     } else if (previewType === "audio") {
         return <audio controls
+                      className={"max-w-100%"}
                       src={url}>
             Your browser does not support the
             <code>audio</code> element.
         </audio>;
     } else if (previewType === "video") {
-        return <video
-            className={`max-w-${size === "small" ? "sm" : "md"}`}
-            controls
-        >
-            <source src={url}/>
-        </video>;
+        return <VideoPreview size={size} src={url} interactive={interactive}/>;
     } else {
         return (
             <a
@@ -66,7 +65,7 @@ export function UrlComponentPreview({
                     width: getThumbnailMeasure(size),
                     height: getThumbnailMeasure(size)
                 }}>
-                <DescriptionIcon className="flex-grow"/>
+                <DescriptionIcon className="text-gray-700 dark:text-gray-300"/>
                 {hint &&
                     <Tooltip title={hint}>
                         <Typography
@@ -77,3 +76,37 @@ export function UrlComponentPreview({
         );
     }
 }
+
+function VideoPreview({
+                          size,
+                          src,
+                          interactive
+                      }: { size: PreviewSize, src: string, interactive: boolean }) {
+
+    const imageSize = useMemo(() => {
+        if (size === "tiny")
+            return "140px";
+        else if (size === "small")
+            return "240px";
+        else if (size === "medium")
+            return "100%";
+        else throw new Error("Invalid size");
+    }, [size]);
+
+    const videoProps = {
+        controls: interactive
+    };
+    return <video
+        style={{
+            position: "relative",
+            objectFit: "cover",
+            width: imageSize,
+            minWidth: "140px",
+            // height: imageSize,
+            maxHeight: "100%"
+        }}
+        {...videoProps}
+        className={cls("max-w-100% rounded", { "pointer-events-none": !interactive })}>
+        <source src={src}/>
+    </video>;
+}

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -20,7 +20,6 @@ export function ArrayOfMapsPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
         fields: customizationController.propertyConfigs
     });
 

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -18,7 +18,6 @@ export function ArrayOfReferencesPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
         fields: customizationController.propertyConfigs
     });
 
@@ -43,6 +42,8 @@ export function ArrayOfReferencesPreview({
                                 previewProperties={ofProperty.previewProperties}
                                 size={childSize}
                                 reference={reference}
+                                includeId={ofProperty.includeId}
+                                includeEntityLink={ofProperty.includeEntityLink}
                             />
                         </div>;
                     }

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -23,7 +23,6 @@ export function ArrayOfStorageComponentsPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
         fields: customizationController.propertyConfigs
     });
 

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

@@ -21,7 +21,6 @@ export function ArrayOfStringsPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
         fields: customizationController.propertyConfigs
     });
 

package/src/preview/property_previews/ArrayOneOfPreview.tsx

@@ -4,7 +4,7 @@ import { ResolvedProperty } from "../../types";
 import { useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
-import { cn, defaultBorderMixin } from "@firecms/ui";
+import { cls, defaultBorderMixin } from "@firecms/ui";
 import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "../../util/common";
 import { ErrorBoundary } from "../../components";
 
@@ -23,7 +23,6 @@ export function ArrayOneOfPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
         fields: customizationController.propertyConfigs
     });
 
@@ -50,7 +49,7 @@ export function ArrayOneOfPreview({
                 values.map((value, index) =>
                     <React.Fragment
                         key={"preview_array_" + value + "_" + index}>
-                        <div className={cn(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
+                        <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
                             <ErrorBoundary>
                                 {value && <PropertyPreview
                                     propertyKey={propertyKey}

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -5,7 +5,7 @@ import { ResolvedProperty } from "../../types";
 import { useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
-import { cn, defaultBorderMixin } from "@firecms/ui";
+import { cls, defaultBorderMixin } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
 
 /**
@@ -23,7 +23,6 @@ export function ArrayPropertyPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
         fields: customizationController.propertyConfigs
     });
 
@@ -49,7 +48,7 @@ export function ArrayPropertyPreview({
                         return of
                             ? <React.Fragment
                                 key={"preview_array_" + index}>
-                                <div className={cn(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
+                                <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
                                     <ErrorBoundary>
                                         <PropertyPreview
                                             propertyKey={propertyKey}

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { ResolvedMapProperty } from "../../types";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
-import { cn, defaultBorderMixin, Typography } from "@firecms/ui";
+import { cls, defaultBorderMixin, Typography } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
 import { EmptyValue } from "../components/EmptyValue";
 
@@ -61,7 +61,7 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
                     return (
                         <div
                             key={`map_preview_table_${key}}`}
-                            className={cn(defaultBorderMixin, "last:border-b-0 border-b")}>
+                            className={cls(defaultBorderMixin, "last:border-b-0 border-b")}>
                             <div
                                 className={"flex flex-row pt-0.5 pb-0.5 gap-2"}>
                                 <div
@@ -87,7 +87,7 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
                             </div>
 
                             {(childProperty.dataType === "map" || childProperty === "array") &&
-                                <div className={cn(defaultBorderMixin, "border-l pl-4 ml-2 my-2")}>
+                                <div className={cls(defaultBorderMixin, "border-l pl-4 ml-2 my-2")}>
                                     <PropertyPreview
                                         propertyKey={key}
                                         value={(value)[key]}
@@ -113,7 +113,7 @@ export function KeyValuePreview({ value }: { value: any }) {
             Object.entries(value).map(([key, childValue]) => (
                 <div
                     key={`map_preview_table_${key}}`}
-                    className={cn(defaultBorderMixin, "last:border-b-0 border-b")}>
+                    className={cls(defaultBorderMixin, "last:border-b-0 border-b")}>
                     <div
                         className={"flex flex-row pt-0.5 pb-0.5 gap-2"}>
                         <div
@@ -135,7 +135,7 @@ export function KeyValuePreview({ value }: { value: any }) {
                         </div>
                     </div>
                     {typeof childValue === "object" &&
-                        <div className={cn(defaultBorderMixin, "border-l pl-4")}>
+                        <div className={cls(defaultBorderMixin, "border-l pl-4")}>
                             <KeyValuePreview value={childValue}/>
                         </div>
                     }

package/src/preview/property_previews/StringPropertyPreview.tsx

@@ -6,7 +6,7 @@ import { PreviewType } from "../../types";
 import { UrlComponentPreview } from "../components/UrlComponentPreview";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 import { ErrorBoundary } from "../../components";
-import { Chip, cn, getColorSchemeForSeed } from "@firecms/ui";
+import { Chip, cls, getColorSchemeForSeed } from "@firecms/ui";
 
 /**
  * @group Preview components
@@ -45,7 +45,7 @@ export function StringPropertyPreview({
         if (!value) return <></>;
         const lines = value.split("\n");
         return value && value.includes("\n")
-            ? <div className={cn("overflow-x-scroll", size === "tiny" ? "text-sm" : "")}>
+            ? <div className={cls("overflow-x-scroll", size === "tiny" ? "text-sm" : "")}>
                 {lines.map((str, index) =>
                     <React.Fragment key={`string_preview_${index}`}>
                         <span>{str}</span>

package/src/types/auth.tsx

@@ -1,5 +1,7 @@
 import { User } from "./user";
 import { Role } from "./roles";
+import { DataSourceDelegate } from "./datasource";
+import { StorageSource } from "./storage";
 
 /**
  * Controller for retrieving the logged user or performing auth related operations.
@@ -7,7 +9,7 @@ import { Role } from "./roles";
  * to do it as the result of a hook.
  * @group Hooks and utilities
  */
-export type AuthController<UserType extends User = User, ExtraData extends any = any> = {
+export type AuthController<UserType extends User = any, ExtraData = any> = {
 
     /**
      * The user currently logged in
@@ -36,7 +38,7 @@ export type AuthController<UserType extends User = User, ExtraData extends any =
     /**
      * Sign out
      */
-    signOut: () => void;
+    signOut: () => Promise<void>;
 
     /**
      * Error initializing the authentication
@@ -62,4 +64,35 @@ export type AuthController<UserType extends User = User, ExtraData extends any =
 
     setExtra: (extra: ExtraData) => void;
 
+    // setUser?: (user: UserType | null) => void;
+
+    // setRoles?: (roles: Role[]) => void;
 };
+
+/**
+ * Implement this function to allow access to specific users.
+ * @group Hooks and utilities
+ */
+export type Authenticator<UserType extends User = User, Controller extends AuthController<UserType> = AuthController<UserType>> = (props: {
+
+    /**
+     * Logged-in user or null
+     */
+    user: UserType | null;
+
+    /**
+     * AuthController
+     */
+    authController: Controller;
+
+    /**
+     * Connector to your database, e.g. your Firestore database
+     */
+    dataSourceDelegate: DataSourceDelegate;
+
+    /**
+     * Used storage implementation
+     */
+    storageSource: StorageSource;
+
+}) => boolean | Promise<boolean>;

package/src/types/collections.ts

@@ -17,7 +17,7 @@ import { EntityOverrides } from "./entity_overrides";
  *
  * @group Models
  */
-export interface EntityCollection<M extends Record<string, any> = any, UserType extends User = User> {
+export interface EntityCollection<M extends Record<string, any> = any, UserType extends User = any> {
 
     /**
      * You can set an alias that will be used internally instead of the `path`.
@@ -82,7 +82,7 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * as the title in entity related views and references.
      * If not specified, the first property simple text property will be used.
      */
-    titleProperty?: keyof M,
+    titleProperty?: keyof M;
 
     /**
      * Can this collection be edited by the end user.
@@ -107,8 +107,12 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      *       `subcollection:`. e.g. `subcollection:orders`.
      *     - If you are using a collection group, you will also have an
      *       additional `collectionGroupParent` column.
+     * You can use this prop to hide some properties from the table view.
+     * Note that if you set this prop, other ways to hide fields, like
+     * `hidden` in the property definition,will be ignored.
+     * `propertiesOrder` has precedence over `hidden`.
      */
-    propertiesOrder?: Extract<keyof M, string>[];
+    propertiesOrder?: (Extract<keyof M, string> | `subcollection:${string}`)[];
 
     /**
      * If enabled, content is loaded in batches. If `false` all entities in the
@@ -147,7 +151,7 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * is being created, updated or deleted.
      * Useful for adding your own logic or blocking the execution of the operation.
      */
-    callbacks?: EntityCallbacks<M>;
+    callbacks?: EntityCallbacks<M, UserType>;
 
     /**
      * Builder for rendering additional components such as buttons in the
@@ -290,7 +294,16 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * are writing custom code
      */
     ownerId?: string;
+
+    /**
+     * Overrides for the entity view, like the data source or the storage source.
+     */
     overrides?: EntityOverrides;
+
+    /**
+     * Width of the side dialog (in pixels) when opening an entity in this collection.
+     */
+    sideDialogWidth?: number | string;
 }
 
 /**
@@ -349,14 +362,13 @@ export interface CollectionActionsProps<M extends Record<string, any> = any, Use
 /**
  * Use this controller to retrieve the selected entities or modify them in
  * an {@link EntityCollection}
- * If you want to pass a `SelectionController` to
  * @group Models
  */
 export type SelectionController<M extends Record<string, any> = any> = {
     selectedEntities: Entity<M>[];
     setSelectedEntities: Dispatch<SetStateAction<Entity<M>[]>>;
     isEntitySelected: (entity: Entity<M>) => boolean;
-    toggleEntitySelection: (entity: Entity<M>) => void;
+    toggleEntitySelection: (entity: Entity<M>, newSelectedState?: boolean) => void;
 }
 
 /**
@@ -451,7 +463,10 @@ export interface AdditionalFieldDelegate<M extends Record<string, any> = any,
      * view.
      * @param entity
      */
-    value?: (props: { entity: Entity<M>, context: FireCMSContext }) => string | number | Promise<string | number> | undefined;
+    value?: (props: {
+        entity: Entity<M>,
+        context: FireCMSContext<any>
+    }) => string | number | Promise<string | number> | undefined;
 }
 
 /**
@@ -461,8 +476,22 @@ export interface AdditionalFieldDelegate<M extends Record<string, any> = any,
  */
 export type EntityCustomView<M extends Record<string, any> = any> =
     {
+        /**
+         * Key of this custom view.
+         */
         key: string,
+        /**
+         * Name of this custom view.
+         */
         name: string,
+        /**
+         * If set to true, the actions of the entity will be included in the
+         * bottom of the panel (save buttons, delete buttons, etc.)
+         */
+        includeActions?: boolean;
+        /**
+         * Builder for rendering the custom view
+         */
         Builder?: React.ComponentType<EntityCustomViewParams<M>>;
     }
 
@@ -523,7 +552,7 @@ export type EntityTableController<M extends Record<string, any> = any> = {
     filterValues?: FilterValues<Extract<keyof M, string>>;
     setFilterValues?: (filterValues: FilterValues<Extract<keyof M, string>>) => void;
     sortBy?: [Extract<keyof M, string>, "asc" | "desc"];
-    setSortBy?: (sortBy: [Extract<keyof M, string>, "asc" | "desc"]) => void;
+    setSortBy?: (sortBy?: [Extract<keyof M, string>, "asc" | "desc"]) => void;
     searchString?: string;
     setSearchString?: (searchString?: string) => void;
     clearFilter?: () => void;