@firecms/core 3.0.0-beta.6 → 3.0.0-beta.7

package/src/components/VirtualTable/VirtualTable.tsx

@@ -15,12 +15,11 @@ import {
     VirtualTableWhereFilterOp
 } from "./VirtualTableProps";
 
-import { getRowHeight } from "./common";
 import { VirtualTableContextProps } from "./types";
 import { VirtualTableHeaderRow } from "./VirtualTableHeaderRow";
 import { VirtualTableRow } from "./VirtualTableRow";
 import { VirtualTableCell } from "./VirtualTableCell";
-import { AssignmentIcon, CenteredView, cn, Typography } from "@firecms/ui";
+import { AssignmentIcon, CenteredView, cls, Typography } from "@firecms/ui";
 
 const VirtualListContext = createContext<VirtualTableContextProps<any>>({} as any);
 VirtualListContext.displayName = "VirtualListContext";
@@ -92,7 +91,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              data,
                                                              onResetPagination,
                                                              onEndReached,
-                                                             size = "m",
+                                                             rowHeight = 54,
                                                              columns: columnsProp,
                                                              onRowClick,
                                                              onColumnResize,
@@ -187,7 +186,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                 onSortByUpdate(undefined);
         }, [onSortByUpdate]);
 
-        const maxScroll = Math.max((data?.length ?? 0) * getRowHeight(size) - bounds.height, 0);
+        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 + 600) {
                 endReachCallbackThreshold.current = scrollOffset;
@@ -253,7 +252,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
 
         const virtualListController = {
             data,
-            size,
+            rowHeight: rowHeight,
             cellRenderer,
             columns,
             currentSort,
@@ -276,19 +275,19 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         return (
             <div
                 ref={measureRef}
-                className={cn("h-full w-full", className)}>
+                className={cls("h-full w-full", className)}>
                 <VirtualListContext.Provider
                     value={virtualListController}>
 
                     <MemoizedList
                         outerRef={tableRef}
-                        key={size}
+                        key={rowHeight}
                         width={bounds.width}
                         height={bounds.height}
                         itemCount={(data?.length ?? 0) + (endAdornment ? 1 : 0)}
                         onScroll={onScroll}
                         includeAddColumn={Boolean(AddColumnComponent)}
-                        itemSize={getRowHeight(size)}/>
+                        itemSize={rowHeight}/>
 
                 </VirtualListContext.Provider>
             </div>
@@ -328,7 +327,7 @@ function MemoizedList({
                   onRowClick,
                   data,
                   columns,
-                  size = "m",
+                  rowHeight = 54,
                   cellRenderer,
                   hoverRow,
                   rowClassName,
@@ -361,7 +360,7 @@ function MemoizedList({
                             ...style,
                             top: `calc(${style.top}px + 48px)`
                         }}
-                        size={size}>
+                        rowHeight={rowHeight}>
 
                         {columns.map((column: VirtualTableColumn, columnIndex: number) => {
                             const cellData = rowData && rowData[column.key];
@@ -404,7 +403,7 @@ const SafeLinkRenderer: React.FC<{
     const urlRegex = /https?:\/\/[^\s]+/g;
     const htmlContent = text.replace(urlRegex, (url) => {
         // For each URL found, replace it with an HTML <a> tag
-        return `<a href="${url}" target="_blank">Link</a><br/>`;
+        return `<a href="${url}" class="underline" target="_blank">Link</a><br/>`;
     });
 
     return (

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -7,7 +7,7 @@ import {
     ArrowUpwardIcon,
     Badge,
     Button,
-    cn,
+    cls,
     defaultBorderMixin,
     FilterListIcon,
     IconButton,
@@ -85,7 +85,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
         return (
             <ErrorBoundary>
                 <div
-                    className={cn("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center bg-gray-50 dark:bg-gray-900",
+                    className={cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center bg-gray-50 dark:bg-gray-900",
                         "text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 ",
                         "hover:bg-gray-100 dark:hover:bg-gray-800 hover:bg-opacity-50 dark:hover:bg-opacity-50",
                         column.frozen ? "sticky left-0 z-10" : "relative z-0"
@@ -179,7 +179,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
 
                     {column.resizable && <div
                         ref={resizeHandleRef}
-                        className={cn(
+                        className={cls(
                             "absolute h-full w-[6px] top-0 right-0 cursor-col-resize",
                             hovered && "bg-gray-300 dark:bg-gray-700"
                         )}
@@ -240,7 +240,7 @@ function FilterForm<M>({
               }}
               className={"text-gray-900 dark:text-white"}>
             <div
-                className={cn(defaultBorderMixin, "py-4 px-6 text-xs font-semibold uppercase border-b")}>
+                className={cls(defaultBorderMixin, "py-4 px-6 text-xs font-semibold uppercase border-b")}>
                 {column.title ?? id}
             </div>
             {filterField && <div className="m-4">

package/src/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -4,7 +4,7 @@ import { VirtualTableColumn, VirtualTableWhereFilterOp } from "./VirtualTablePro
 import { ErrorBoundary } from "../ErrorBoundary";
 import { VirtualTableHeader } from "./VirtualTableHeader";
 import { VirtualTableContextProps } from "./types";
-import { cn, defaultBorderMixin } from "@firecms/ui";
+import { cls, defaultBorderMixin } from "@firecms/ui";
 
 export const VirtualTableHeaderRow = ({
                                           columns,
@@ -100,7 +100,7 @@ export const VirtualTableHeaderRow = ({
 
     return (
         <div
-            className={cn(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 h-12 border-b bg-gray-50 dark:bg-gray-900")}>
+            className={cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 h-12 border-b bg-gray-50 dark:bg-gray-900")}>
             {columns.map((c, columnIndex) => {
                 const column = columns[columnIndex];
 

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -69,7 +69,7 @@ export interface VirtualTableProps<T extends Record<string, any>> {
     /**
      * Size of the table
      */
-    size?: VirtualTableSize,
+    rowHeight?: number,
 
     /**
      * In case this table should have some filters set by default
@@ -232,11 +232,6 @@ export type OnVirtualTableColumnResizeParams = {
     column: VirtualTableColumn
 };
 
-/**
- * @see Table
- * @group Components
- */
-export type VirtualTableSize = "xs" | "s" | "m" | "l" | "xl";
 
 /**
  * @see Table

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -2,9 +2,8 @@ import React, { useCallback } from "react";
 
 import equal from "react-fast-compare"
 
-import { getRowHeight } from "./common";
 import { VirtualTableRowProps } from "./types";
-import { cn } from "@firecms/ui";
+import { cls } from "@firecms/ui";
 
 export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
     function VirtualTableRow<T>({
@@ -12,7 +11,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
                                     rowIndex,
                                     children,
                                     onRowClick,
-                                    size,
+                                    rowHeight,
                                     style,
                                     hoverRow,
                                     rowClassName
@@ -29,7 +28,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
 
         return (
             <div
-                className={cn(
+                className={cls(
                     "flex min-w-full text-sm border-b border-gray-200 dark:border-gray-800 border-opacity-40 dark:border-opacity-40",
                     rowClassName ? rowClassName(rowData) : "",
                     {
@@ -40,7 +39,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
                 onClick={onClick}
                 style={{
                     ...(style),
-                    height: getRowHeight(size),
+                    height: rowHeight,
                     width: "fit-content"
                 }}
             >

package/src/components/VirtualTable/types.tsx

@@ -5,14 +5,13 @@ import {
     OnVirtualTableColumnResizeParams,
     VirtualTableColumn,
     VirtualTableFilterValues,
-    VirtualTableSize,
     VirtualTableWhereFilterOp
 } from "./VirtualTableProps";
 import { FilterFormFieldProps } from "./VirtualTableHeader";
 
 export type VirtualTableRowProps<T> = {
     style: any,
-    size: VirtualTableSize,
+    rowHeight: number,
     rowData: T;
     rowIndex: number;
     onRowClick?: (props: OnRowClickParams<any>) => void;
@@ -24,7 +23,7 @@ export type VirtualTableRowProps<T> = {
 
 export type VirtualTableContextProps<T extends any> = {
     data?: T[];
-    size?: VirtualTableSize,
+    rowHeight?: number,
     columns: VirtualTableColumn[];
     cellRenderer: React.ComponentType<CellRendererParams<T>>;
     currentSort: "asc" | "desc" | undefined;

package/src/components/{EntityCollectionTable/internal → common}/default_entity_actions.tsx

@@ -1,6 +1,6 @@
-import { EntityAction } from "../../../types";
 import { ArchiveIcon, DeleteIcon, FileCopyIcon, KeyboardTabIcon, OpenInNewIcon } from "@firecms/ui";
-import { DeleteEntityDialog } from "../../DeleteEntityDialog";
+import { EntityAction } from "../../types";
+import { DeleteEntityDialog } from "../DeleteEntityDialog";
 
 export const editEntityAction: EntityAction = {
     icon: <KeyboardTabIcon/>,

package/src/components/common/index.ts

@@ -3,3 +3,4 @@ export * from "./useDebouncedData";
 export * from "./useColumnsIds";
 export * from "./useDataSourceEntityCollectionTableController";
 export * from "./useTableSearchHelper";
+export * from "./default_entity_actions";

package/src/components/{VirtualTable/common.tsx → common/table_height.tsx}

@@ -1,6 +1,9 @@
-import { VirtualTableSize } from "./VirtualTableProps";
+/**
+ * @group Components
+ */
+export type TableSize = "xs" | "s" | "m" | "l" | "xl";
 
-export function getRowHeight(size: VirtualTableSize): number {
+export function getRowHeight(size: TableSize): number {
     switch (size) {
         case "xl":
             return 400;

package/src/components/common/types.tsx

@@ -1,4 +1,4 @@
-import { CollectionSize, Entity, FireCMSContext, ResolvedProperty, SelectedCellProps } from "../../types";
+import { CollectionSize, ResolvedProperty, SelectedCellProps } from "../../types";
 
 export type EntityCollectionTableController<M extends Record<string, any>> = {
 
@@ -31,14 +31,12 @@ export type EntityCollectionTableController<M extends Record<string, any>> = {
  * Props passed in a callback when the content of a cell in a table has been edited
  * @group Collection components
  */
-export interface OnCellValueChangeParams<T = any, M extends Record<string, any> = any> {
+export interface OnCellValueChangeParams<T = any, D = any> {
     value: T,
     propertyKey: string,
-    entity: Entity<M>,
+    data?: D,
     onValueUpdated: () => void
     setError: (e: Error | undefined) => void
-    fullPath: string
-    context: FireCMSContext
 }
 
 /**

package/src/components/common/useColumnsIds.tsx

@@ -7,8 +7,16 @@ const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
 
 export function useColumnIds<M extends Record<string, any>>(collection: ResolvedEntityCollection<M>, includeSubcollections: boolean): PropertyColumnConfig[] {
     return useMemo(() => {
-        if (collection.propertiesOrder)
-            return hideAndExpandKeys(collection, collection.propertiesOrder);
+        if (collection.propertiesOrder) {
+            const propertyColumnConfigs = hideAndExpandKeys(collection, collection.propertiesOrder);
+            if (collection.collectionGroup) {
+                propertyColumnConfigs.push({
+                    key: COLLECTION_GROUP_PARENT_ID,
+                    disabled: true
+                });
+            }
+            return propertyColumnConfigs;
+        }
         return getDefaultColumnKeys(collection, includeSubcollections);
     }, [collection, includeSubcollections]);
 }

package/src/components/common/useDataSourceEntityCollectionTableController.tsx

@@ -12,6 +12,7 @@ import {
     User
 } from "../../types";
 import { useDebouncedData } from "./useDebouncedData";
+import equal from "react-fast-compare"
 
 const DEFAULT_PAGE_SIZE = 50;
 
@@ -31,6 +32,10 @@ export type DataSourceEntityCollectionTableControllerProps<M extends Record<stri
     entitiesDisplayedFirst?: Entity<M>[];
 
     lastDeleteTimestamp?: number;
+
+    /**
+     * Force filter to be applied to the table.
+     */
     forceFilter?: FilterValues<string>;
 }
 
@@ -83,6 +88,12 @@ export function useDataSourceEntityCollectionTableController<M extends Record<st
         return initialSort;
     }, [initialSort, forceFilter]);
 
+    useEffect(() => {
+        if (!equal(forceFilter, filterValues)) {
+            setFilterValues(forceFilter)
+        }
+    }, [forceFilter]);
+
     const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? initialFilter ?? undefined);
     const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string>, "asc" | "desc"] | undefined>(initialSortInternal);
 

package/src/components/index.tsx

@@ -13,6 +13,7 @@ export * from "./common";
 
 export * from "./HomePage";
 export * from "./SelectableTable/SelectableTable";
+export * from "./SelectableTable/SelectableTableContext";
 export * from "./EntityCollectionView/EntityCollectionView";
 export * from "./EntityCollectionView/EntityCollectionViewActions";
 export * from "./EntityCollectionView/useSelectionController";

package/src/core/Drawer.tsx

@@ -2,31 +2,37 @@ import React, { useCallback } from "react";
 
 import { useLargeLayout, useNavigationController } from "../hooks";
 
-import { NavLink, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { CMSAnalyticsEvent, TopNavigationEntry, TopNavigationResult } from "../types";
 import { IconForView } from "../util";
-import { cn, IconButton, Menu, MenuItem, MoreVertIcon, Tooltip, Typography } from "@firecms/ui";
+import { cls, IconButton, Menu, MenuItem, MoreVertIcon, Tooltip, Typography } from "@firecms/ui";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
+import { useDrawer } from "./Scaffold";
+import { DrawerNavigationItem } from "./DrawerNavigationItem";
 
 /**
  * Props used in case you need to override the default drawer
  * @group Core
  */
-export type DrawerProps<T = {}> = T & {
+export type DrawerProps = {
     hovered: boolean,
     drawerOpen: boolean,
-    closeDrawer: () => any,
+    openDrawer: () => void,
+    closeDrawer: () => void,
+    autoOpenDrawer?: boolean
 }
 
 /**
  * Default drawer used in the CMS
  * @group Core
  */
-export function Drawer({
-                           hovered,
-                           drawerOpen,
-                           closeDrawer
-                       }: DrawerProps) {
+export function Drawer() {
+
+    const {
+        hovered,
+        drawerOpen,
+        closeDrawer,
+    } = useDrawer();
 
     const analyticsController = useAnalyticsController();
     const navigation = useNavigationController();
@@ -108,7 +114,7 @@ export function Drawer({
                             <MoreVertIcon/>
                         </Tooltip>
                         {drawerOpen && <div
-                            className={cn(
+                            className={cls(
                                 drawerOpen ? "opacity-100" : "opacity-0 hidden",
                                 "mx-4 font-inherit text-inherit"
                             )}>
@@ -131,61 +137,3 @@ export function Drawer({
         </>
     );
 }
-
-export function DrawerNavigationItem({
-                                         name,
-                                         icon,
-                                         drawerOpen,
-                                         tooltipsOpen,
-                                         url,
-                                         onClick
-                                     }: {
-    icon: React.ReactElement,
-    name: string,
-    tooltipsOpen: boolean,
-    drawerOpen: boolean,
-    url: string,
-    onClick?: () => void,
-}) {
-
-    const iconWrap = <div
-        className={"text-gray-600 dark:text-gray-500"}>
-        {icon}
-    </div>;
-
-    const listItem = <NavLink
-        onClick={onClick}
-        style={{
-            width: !drawerOpen ? "72px" : "280px",
-            transition: drawerOpen ? "width 150ms ease-in" : undefined
-        }}
-        className={({ isActive }: any) => cn("rounded-r-xl truncate",
-            "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-900 hover:dark:text-white",
-            "flex flex-row items-center mr-8",
-            // "transition-all ease-in-out delay-100 duration-300",
-            // drawerOpen ? "w-full" : "w-18",
-            drawerOpen ? "pl-8 h-12" : "pl-6 h-11",
-            "font-medium text-sm",
-            isActive ? "bg-slate-200 bg-opacity-75 dark:bg-gray-800" : ""
-        )}
-        to={url}
-    >
-
-        {iconWrap}
-
-        <div
-            className={cn(
-                drawerOpen ? "opacity-100" : "opacity-0 hidden",
-                "ml-4 font-inherit text-inherit"
-            )}>
-            {name.toUpperCase()}
-        </div>
-    </NavLink>;
-
-    return <Tooltip
-        open={drawerOpen ? false : tooltipsOpen}
-        side="right"
-        title={name}>
-        {listItem}
-    </Tooltip>;
-}

package/src/core/DrawerNavigationItem.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+
+import { NavLink } from "react-router-dom";
+import { cls, Tooltip } from "@firecms/ui";
+
+export function DrawerNavigationItem({
+                                         name,
+                                         icon,
+                                         drawerOpen,
+                                         tooltipsOpen,
+                                         url,
+                                         onClick
+                                     }: {
+    icon: React.ReactElement,
+    name: string,
+    tooltipsOpen: boolean,
+    drawerOpen: boolean,
+    url: string,
+    onClick?: () => void,
+}) {
+
+    const iconWrap = <div
+        className={"text-gray-600 dark:text-gray-500"}>
+        {icon}
+    </div>;
+
+    const listItem = <NavLink
+        onClick={onClick}
+        style={{
+            width: !drawerOpen ? "72px" : "280px",
+            transition: drawerOpen ? "width 150ms ease-in" : undefined
+        }}
+        className={({ isActive }: any) => cls("rounded-r-lg truncate",
+            "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-900 hover:dark:text-white",
+            "flex flex-row items-center mr-8",
+            // "transition-all ease-in-out delay-100 duration-300",
+            // drawerOpen ? "w-full" : "w-18",
+            drawerOpen ? "pl-8 h-12" : "pl-6 h-11",
+            "font-medium text-sm",
+            isActive ? "bg-slate-200 bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-30" : ""
+        )}
+        to={url}
+    >
+
+        {iconWrap}
+
+        <div
+            className={cls(
+                drawerOpen ? "opacity-100" : "opacity-0 hidden",
+                "ml-4 font-inherit text-inherit"
+            )}>
+            {name.toUpperCase()}
+        </div>
+    </NavLink>;
+
+    return <Tooltip
+        open={drawerOpen ? false : tooltipsOpen}
+        side="right"
+        title={name}>
+        {listItem}
+    </Tooltip>;
+}

package/src/core/EntityEditView.tsx

@@ -29,9 +29,8 @@ import {
     useSnackbarController
 } from "../hooks";
 import { EntityForm } from "../form";
-import { CircularProgress, CloseIcon, cn, defaultBorderMixin, IconButton, Tab, Tabs, Typography } from "@firecms/ui";
+import { CircularProgress, CloseIcon, cls, defaultBorderMixin, IconButton, Tab, Tabs, Typography } from "@firecms/ui";
 import { EntityFormSaveParams } from "../form/EntityForm";
-import { FORM_CONTAINER_WIDTH } from "../internal/common";
 import { useSideDialogContext } from "./index";
 
 const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
@@ -91,8 +90,7 @@ export function EntityEditView<M extends Record<string, any>, UserType extends U
 
     // const largeLayout = useLargeLayout();
     // const largeLayoutTabSelected = useRef(!largeLayout);
-
-    const resolvedFormWidth: string = typeof formWidth === "number" ? `${formWidth}px` : formWidth ?? FORM_CONTAINER_WIDTH;
+    // const resolvedFormWidth: string = typeof formWidth === "number" ? `${formWidth}px` : formWidth ?? FORM_CONTAINER_WIDTH;
 
     const dataSource = useDataSource(collection);
     const sideDialogContext = useSideDialogContext();
@@ -195,6 +193,7 @@ export function EntityEditView<M extends Record<string, any>, UserType extends U
             onUpdate({ entity: updatedEntity });
 
         if (closeAfterSave) {
+            console.log("Closing side dialog")
             sideDialogContext.setBlocked(false);
             sideDialogContext.close(true);
             onClose?.();
@@ -238,7 +237,7 @@ export function EntityEditView<M extends Record<string, any>, UserType extends U
         closeAfterSave: boolean,
     }) => {
         setSaving(true);
-        saveEntityWithCallbacks({
+        return saveEntityWithCallbacks({
             path,
             entityId,
             values,
@@ -269,7 +268,7 @@ export function EntityEditView<M extends Record<string, any>, UserType extends U
         if (autoSave) {
             setValuesToBeSaved(values);
         } else {
-            saveEntity({
+            return saveEntity({
                 collection,
                 path,
                 entityId,
@@ -298,7 +297,7 @@ export function EntityEditView<M extends Record<string, any>, UserType extends U
                     return null;
                 }
                 return <div
-                    className={cn(defaultBorderMixin,
+                    className={cls(defaultBorderMixin,
                         "relative flex-grow w-full h-full overflow-auto ")}
                     key={`custom_view_${customView.key}`}
                     role="tabpanel">
@@ -482,7 +481,7 @@ export function EntityEditView<M extends Record<string, any>, UserType extends U
                 <>
 
                     <div
-                        className={cn(defaultBorderMixin, "no-scrollbar border-b pl-2 pr-2 pt-1 flex items-end overflow-scroll bg-gray-50 dark:bg-gray-950")}>
+                        className={cls(defaultBorderMixin, "no-scrollbar border-b pl-2 pr-2 pt-1 flex items-end overflow-scroll bg-gray-50 dark:bg-gray-950")}>
 
                         <div
                             className="pb-1 self-center">

package/src/core/EntitySidePanel.tsx

@@ -33,7 +33,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         if (!props) return undefined;
         let usedCollection = props.collection;
 
-        const registryCollection = navigationController.getCollection(props.path, props.entityId);
+        const registryCollection = navigationController.getCollection(props.path);
         if (registryCollection) {
             usedCollection = registryCollection;
         }