@firecms/core 3.0.0-canary.21 → 3.0.0-canary.211

package/src/components/HomePage/FavouritesView.tsx

@@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom";
 import { useNavigationController } from "../../hooks";
 import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
 import { TopNavigationEntry } from "../../types";
-import { Chip, Collapse, StarBorderIcon, StarIcon } from "@firecms/ui";
+import { Chip, Collapse, StarIcon } from "@firecms/ui";
 
 function NavigationChip({ entry }: { entry: TopNavigationEntry }) {
 
@@ -29,16 +29,11 @@ function NavigationChip({ entry }: { entry: TopNavigationEntry }) {
     return <Chip
         key={entry.path}
         onClick={() => navigate(entry.url)}
-        icon={
-            favourite
-                ? <StarIcon
-                    onClick={onIconClick}
-                    size={18}
-                    className={"text-secondary"}/>
-                : <StarBorderIcon
-                    onClick={onIconClick}
-                    size={18}
-                    className={"text-gray-400 dark:text-gray-500"}/>}>
+        icon={<StarIcon
+            onClick={onIconClick}
+            size={18}
+            className={favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500"}/>
+        }>
         {entry.name}
     </Chip>;
 }

package/src/components/HomePage/NavigationCard.tsx

@@ -1,4 +1,4 @@
-import { ArrowForwardIcon, Card, cn, Markdown, Typography, } from "@firecms/ui";
+import { ArrowForwardIcon, Card, cls, Markdown, Typography, } from "@firecms/ui";
 
 export type NavigationCardProps = {
     name: string,
@@ -17,7 +17,7 @@ export function NavigationCard({
                                }: NavigationCardProps) {
 
     return (<Card
-        className={cn("h-full p-4 cursor-pointer min-h-[230px]")}
+        className={cls("h-full p-4 cursor-pointer min-h-[230px]")}
         onClick={() => {
             onClick?.();
         }}>
@@ -27,7 +27,7 @@ export function NavigationCard({
                 className="flex-grow w-full">
 
                 <div
-                    className="h-10 flex items-center w-full justify-between text-gray-300 dark:text-gray-600">
+                    className="h-10 flex items-center w-full justify-between text-surface-300 dark:text-surface-600">
 
                     {icon}
 

package/src/components/HomePage/NavigationCardBinding.tsx

@@ -4,7 +4,7 @@ import { useCustomizationController, useFireCMSContext } from "../../hooks";
 import { PluginHomePageActionsProps, TopNavigationEntry } from "../../types";
 import { IconForView } from "../../util";
 import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
-import { IconButton, StarBorderIcon, StarIcon } from "@firecms/ui";
+import { IconButton, StarIcon } from "@firecms/ui";
 import { NavigationCard } from "./NavigationCard";
 import { SmallNavigationCard } from "./SmallNavigationCard";
 
@@ -19,7 +19,7 @@ import { SmallNavigationCard } from "./SmallNavigationCard";
  * @param name
  * @param description
  * @param onClick
- * @constructor
+
  */
 export function NavigationCardBinding({
                                           path,
@@ -60,14 +60,9 @@ export function NavigationCardBinding({
                         );
                     }
                 }}>
-                {
-                    favourite
-                        ? <StarIcon
-                            size={18}
-                            className={"text-secondary"}/>
-                        : <StarBorderIcon
-                            size={18}
-                            className={"text-gray-400 dark:text-gray-500"}/>}
+                <StarIcon
+                    size={18}
+                    className={favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500"}/>
             </IconButton>
         ]
         : [];

package/src/components/HomePage/NavigationGroup.tsx

@@ -12,8 +12,8 @@ export function NavigationGroup({
     return (
         <ExpandablePanel
             invisible={true}
-            titleClassName={"font-medium text-sm text-gray-600 dark:text-gray-400"}
-            className={"py-4"}
+            titleClassName={"font-medium text-sm text-surface-600 dark:text-surface-400"}
+            innerClassName={"py-4"}
             initiallyExpanded={!(userConfigurationPersistence?.collapsedGroups ?? []).includes(group ?? "ungrouped")}
             onExpandedChange={expanded => {
                 if (userConfigurationPersistence) {

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -1,6 +1,6 @@
-import { ArrowForwardIcon, cardClickableMixin, cardMixin, cn, focusedMixin, Typography, } from "@firecms/ui";
+import { ArrowForwardIcon, cardClickableMixin, cardMixin, cls, Typography, } from "@firecms/ui";
 
-import { Link as ReactLink } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 export type SmallNavigationCardProps = {
     name: string,
@@ -17,11 +17,10 @@ export function SmallNavigationCard({
     return (
         <>
 
-            <ReactLink
+            <Link
                 tabIndex={0}
-                className={cn(cardMixin,
+                className={cls(cardMixin,
                     cardClickableMixin,
-                    focusedMixin,
                     "cursor-pointer flex flex-row items-center px-4 py-2 text-inherit dark:text-inherit visited:text-inherit visited:dark:text-inherit hover:text-inherit hover:dark:text-inherit ")}
                 to={url}
             >
@@ -39,7 +38,7 @@ export function SmallNavigationCard({
                 <div className={"p-4"}>
                     <ArrowForwardIcon color="primary"/>
                 </div>
-            </ReactLink>
+            </Link>
 
         </>);
 }

package/src/components/NotFoundPage.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link as ReactLink } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { Button, Typography } from "@firecms/ui";
 
 export function NotFoundPage() {
@@ -17,7 +17,7 @@ export function NotFoundPage() {
                 </Typography>
                 <Button
                     variant={"text"}
-                    component={ReactLink}
+                    component={Link}
                     to={"/"}>Back to home</Button>
             </div>
         </div>

package/src/components/PropertyConfigBadge.tsx

@@ -2,15 +2,21 @@ import { getIconForWidget } from "../util";
 import { PropertyConfig } from "../types";
 import { getDefaultFieldConfig } from "../core";
 
-export function PropertyConfigBadge({ propertyConfig }: { propertyConfig: PropertyConfig | undefined }): React.ReactNode {
-    const classes = "h-8 w-8 p-1 rounded-full shadow text-white";
+export function PropertyConfigBadge({
+                                        propertyConfig,
+                                        disabled
+                                    }: {
+    propertyConfig: PropertyConfig | undefined,
+    disabled?: boolean
+}): React.ReactNode {
+    const classes = "h-8 w-8 p-1 rounded-full shadow text-white " + (disabled ? "bg-surface-400 dark:bg-surface-600" : "");
 
     const defaultPropertyConfig = typeof propertyConfig?.property === "object" ? getDefaultFieldConfig(propertyConfig.property) : undefined;
 
     return <div
         className={classes}
         style={{
-            background: propertyConfig?.color ?? defaultPropertyConfig?.color ?? "#888"
+            background: !disabled ? (propertyConfig?.color ?? defaultPropertyConfig?.color ?? "#888") : undefined
         }}>
         {propertyConfig?.Icon ? getIconForWidget(propertyConfig, "medium") : getIconForWidget(defaultPropertyConfig, "medium")}
     </div>

package/src/components/PropertyIdCopyTooltip.tsx

@@ -0,0 +1,47 @@
+import { ContentCopyIcon, IconButton, Tooltip, Typography } from "@firecms/ui";
+import { useCallback, useState } from "react";
+
+export function PropertyIdCopyTooltip({
+                                          propertyKey,
+                                          className,
+                                          children,
+                                      }: {
+    propertyKey: string,
+    className?: string,
+    children: React.ReactNode
+}) {
+    return <Tooltip title={<PropertyIdCopyTooltipContent propertyKey={propertyKey}/>}
+                    delayDuration={800}
+                    side={"top"}
+                    align={"start"}
+                    sideOffset={8}
+                    className={className}>
+            {children}
+    </Tooltip>
+
+}
+
+export function PropertyIdCopyTooltipContent({ propertyKey }: { propertyKey: string }) {
+
+    const [copied, setCopied] = useState(false);
+
+    return (
+        <div className={"flex flex-row gap-2 items-center justify-center text-white"}>
+            <div>
+                <Typography variant={"caption"} className={"min-w-20 text-surface-accent-400"}
+                            color={"disabled"}>{copied ? "Copied" : "Property ID"}</Typography>
+                <Typography variant={"caption"} className={"text-white"}><code>{propertyKey}</code></Typography>
+            </div>
+            <IconButton size={"small"}>
+                <ContentCopyIcon size={"smallest"}
+                                 className={"text-white"}
+                                 onClick={useCallback(() => {
+                                     navigator.clipboard.writeText(propertyKey);
+                                     setCopied(true);
+                                     setTimeout(() => setCopied(false), 2000);
+                                 }, [propertyKey])}
+                />
+            </IconButton>
+        </div>
+    );
+}

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

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

package/src/components/ReferenceWidget.tsx

@@ -4,7 +4,7 @@ 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,
@@ -27,6 +27,8 @@ export type ReferenceWidgetProps<M extends Record<string, any>> = {
     forceFilter?: FilterValues<string>;
     size: PreviewSize;
     className?: string;
+    includeId?: boolean;
+    includeEntityLink?: boolean;
 };
 
 /**
@@ -43,7 +45,9 @@ export function ReferenceWidget<M extends Record<string, any>>({
                                                                    previewProperties,
                                                                    forceFilter,
                                                                    size,
-                                                                   className
+                                                                   className,
+                                                                   includeId,
+                                                                   includeEntityLink
                                                                }: ReferenceWidgetProps<M>) {
 
     const navigationController = useNavigationController();
@@ -52,16 +56,15 @@ export function ReferenceWidget<M extends Record<string, any>>({
         return navigationController.getCollection(path);
     }, [path, navigationController.getCollection]);
 
-    // if (!collection) {
-    //     throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
-    // }
-
     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,7 +116,9 @@ 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?.isEntityReference && value?.isEntityReference()) {
@@ -119,10 +127,12 @@ export function ReferenceWidget<M extends Record<string, any>>({
             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/SelectableTable/SelectableTable.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useRef } from "react";
-import equal from "react-fast-compare";
 import {
     CollectionSize,
     Entity,
@@ -10,7 +9,7 @@ import {
 } from "../../types";
 import { CellRendererParams, VirtualTable, VirtualTableColumn } from "../VirtualTable";
 import { enumToObjectEntries } from "../../util";
-import { OnCellValueChange, OnColumnResizeParams } from "../common/types";
+import { OnCellValueChange, OnColumnResizeParams } from "../common";
 import { FilterFormFieldProps } from "../VirtualTable/VirtualTableHeader";
 import { ReferenceFilterField } from "./filters/ReferenceFilterField";
 import { StringNumberFilterField } from "./filters/StringNumberFilterField";
@@ -18,6 +17,7 @@ import { BooleanFilterField } from "./filters/BooleanFilterField";
 import { DateTimeFilterField } from "./filters/DateTimeFilterField";
 import { useOutsideAlerter } from "@firecms/ui";
 import { SelectableTableContext } from "./SelectableTableContext";
+import { getRowHeight } from "../common/table_height";
 
 export type SelectableTableProps<M extends Record<string, any>> = {
 
@@ -59,7 +59,7 @@ export type SelectableTableProps<M extends Record<string, any>> = {
 
     /**
      * Controller holding the logic for the table
-     * {@link useDataSourceEntityCollectionTableController}
+     * {@link useDataSourceTableController}
      * {@link EntityTableController}
      */
     tableController: EntityTableController<M>;
@@ -76,6 +76,18 @@ export type SelectableTableProps<M extends Record<string, any>> = {
 
     size?: CollectionSize;
 
+    initialScroll?: number;
+
+    /**
+     * Callback when the table is scrolled
+     * @param props
+     */
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward",
+        scrollOffset: number,
+        scrollUpdateWasRequested: boolean
+    }) => void;
+
     emptyComponent?: React.ReactNode;
 
     endAdornment?: React.ReactNode;
@@ -100,7 +112,7 @@ export type SelectableTableProps<M extends Record<string, any>> = {
  *
  * The data displayed in the table is managed by a {@link EntityTableController}.
  * You can build the default, bound to a path in the datasource, by using the hook
- * {@link useDataSourceEntityCollectionTableController}
+ * {@link useDataSourceTableController}
  *
  * @see EntityCollectionTableProps
  * @see EntityCollectionView
@@ -115,7 +127,7 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
          onEntityClick,
          onColumnResize,
          hoverRow = true,
-         size,
+         size = "m",
          inlineEditing = false,
          tableController:
              {
@@ -127,8 +139,6 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
                  setFilterValues,
                  sortBy,
                  setSortBy,
-                 setSearchString,
-                 clearFilter,
                  itemCount,
                  setItemCount,
                  pageSize = 50,
@@ -137,6 +147,8 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
                  setPopupCell
              },
          filterable = true,
+         onScroll,
+         initialScroll,
          emptyComponent,
          columns,
          forceFilter,
@@ -211,7 +223,7 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
                     selectedCell,
                 }}
             >
-                <div className="h-full w-full flex flex-col bg-white dark:bg-gray-950"
+                <div className="h-full w-full flex flex-col bg-white dark:bg-surface-950"
                      ref={ref}>
 
                     <VirtualTable
@@ -222,19 +234,20 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
                         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}
+                        initialScroll={initialScroll}
+                        onScroll={onScroll}
                         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" : "";
+                            return highlightedRow?.(entity) ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "";
                         }, [highlightedRow])}
                         className="flex-grow"
                         emptyComponent={emptyComponent}
@@ -247,7 +260,8 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
         );
 
     },
-    equal
+    () => false,
+    // equal
 );
 
 function createFilterField({
@@ -280,6 +294,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/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>
-    )
-        ;
+    );
 }