@firecms/core 3.0.0-canary.29 → 3.0.0-canary.290

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-surface-50 dark:bg-surface-900")}>
             {columns.map((c, columnIndex) => {
                 const column = columns[columnIndex];
 

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -31,11 +31,6 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     cellRenderer: React.ComponentType<CellRendererParams<T>>;
 
-    /**
-     * If enabled, content is loaded in batch
-     */
-    paginationEnabled?: boolean;
-
     /**
      * Set this callback if you want to support some combinations
      * of filter combinations only.
@@ -50,6 +45,11 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     onEndReached?: () => void;
 
+    /**
+     * Offset in pixels where the onEndReached callback is triggered
+     */
+    endOffset?: number;
+
     /**
      * When the pagination should be reset. E.g. the filters or sorting
      * has been reset.
@@ -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
@@ -82,6 +82,16 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     onFilterUpdate?: (filter?: VirtualTableFilterValues<any> | undefined) => void;
 
+    /**
+     * Callback when the table is scrolled
+     * @param props
+     */
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward",
+        scrollOffset: number,
+        scrollUpdateWasRequested: boolean
+    }) => void;
+
     /**
      * Default sort applied to this collection
      */
@@ -131,6 +141,11 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     className?: string;
 
+    /**
+     * Style applied to the table
+     */
+    style?: React.CSSProperties;
+
     /**
      * Component rendered at the end of the table, after scroll
      */
@@ -142,9 +157,14 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     AddColumnComponent?: React.ComponentType;
 
+    /**
+     * Initial scroll position
+     */
+    initialScroll?: number;
+
 }
 
-export type CellRendererParams<T extends any = any> = {
+export type CellRendererParams<T = any> = {
     column: VirtualTableColumn;
     columns: VirtualTableColumn[];
     columnIndex: number;
@@ -158,7 +178,7 @@ export type CellRendererParams<T extends any = any> = {
  * @see Table
  * @group Components
  */
-export interface VirtualTableColumn<CustomProps extends any = any> {
+export interface VirtualTableColumn<CustomProps = any> {
 
     /**
      * Data key for the cell value, could be "a.b.c"
@@ -232,12 +252,6 @@ export type OnVirtualTableColumnResizeParams = {
     column: VirtualTableColumn
 };
 
-/**
- * @see Table
- * @group Components
- */
-export type VirtualTableSize = "xs" | "s" | "m" | "l" | "xl";
-
 /**
  * @see Table
  * @group Components

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,8 +28,8 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
 
         return (
             <div
-                className={cn(
-                    "flex min-w-full text-sm border-b border-gray-200 dark:border-gray-800 border-opacity-40 dark:border-opacity-40",
+                className={cls(
+                    "flex min-w-full text-sm border-b border-surface-200 dark:border-surface-800 border-opacity-40 dark:border-opacity-40",
                     rowClassName ? rowClassName(rowData) : "",
                     {
                         "hover:bg-opacity-95": hoverRow,
@@ -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/fields/VirtualTableDateField.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { DateTimeField } from "@firecms/ui";
+import { cls, DateTimeField, focusedDisabled } from "@firecms/ui";
 import { useCustomizationController } from "../../../hooks";
 
 export function VirtualTableDateField(props: {
@@ -25,11 +25,11 @@ export function VirtualTableDateField(props: {
     return (
         <DateTimeField
             value={internalValue ?? undefined}
-            onChange={(dateValue) => updateValue(dateValue)}
-            size={"medium"}
+            onChange={(dateValue) => updateValue(dateValue ?? null)}
+            size={"large"}
             invisible={true}
-            className={"w-full h-full"}
-            inputClassName={"w-full h-full"}
+            inputClassName={cls("w-full h-full", focusedDisabled)}
+            className={cls("w-full h-full", focusedDisabled)}
             mode={mode}
             locale={locale}
         />

package/src/components/VirtualTable/fields/VirtualTableInput.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 
 import { useDebouncedCallback } from "../../../util";
-import { TextareaAutosize } from "@firecms/ui";
+import { focusedDisabled, TextareaAutosize } from "@firecms/ui";
 
 export function VirtualTableInput(props: {
     error: Error | undefined;
@@ -58,6 +58,7 @@ export function VirtualTableInput(props: {
 
     return (
         <TextareaAutosize
+            className={focusedDisabled}
             ref={ref}
             style={{
                 padding: 0,
@@ -65,7 +66,6 @@ export function VirtualTableInput(props: {
                 width: "100%",
                 color: "unset",
                 fontWeight: "unset",
-                lineHeight: "unset",
                 fontSize: "unset",
                 fontFamily: "unset",
                 background: "unset",

package/src/components/VirtualTable/fields/VirtualTableNumberInput.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useDebouncedCallback } from "../../../util";
+import { cls, focusedDisabled } from "@firecms/ui";
 
 export function VirtualTableNumberInput(props: {
     error: Error | undefined;
@@ -65,7 +66,7 @@ export function VirtualTableNumberInput(props: {
     return (
         <input
             ref={ref}
-            className="w-full text-right p-0 m-0 bg-transparent border-none resize-none outline-none font-normal leading-normal text-unset"
+            className={cls("w-full text-right p-0 m-0 bg-transparent border-none resize-none outline-none font-normal leading-normal text-unset", focusedDisabled)}
             style={{
                 textAlign: align
             }}

package/src/components/VirtualTable/fields/VirtualTableSelect.tsx

@@ -1,5 +1,5 @@
 import { EnumValueConfig } from "../../../types";
-import { ArrayEnumPreview, EnumValuesChip } from "../../../preview";
+import { EnumValuesChip } from "../../../preview";
 import React, { useCallback, useEffect } from "react";
 import { MultiSelect, MultiSelectItem, Select, SelectItem } from "@firecms/ui";
 
@@ -18,9 +18,7 @@ export function VirtualTableSelect(props: {
 }) {
 
     const {
-        name,
         enumValues,
-        error,
         internalValue,
         disabled,
         small,
@@ -41,6 +39,7 @@ export function VirtualTableSelect(props: {
     }, [focused, ref]);
 
     const onChange = useCallback((updatedValue: string | string[]) => {
+        console.trace("onChange");
         if (valueType === "number") {
             if (multiple) {
                 const newValue = (updatedValue as string[]).map((v) => parseFloat(v));
@@ -58,37 +57,27 @@ export function VirtualTableSelect(props: {
         }
     }, [multiple, updateValue, valueType]);
 
-    const renderValue = (enumKey: string | number, index: number) => {
-        if (multiple && Array.isArray(enumKey)) {
-            return <ArrayEnumPreview
-                key={`${enumKey}-${index}`}
-                value={enumKey}
-                name={name}
-                enumValues={enumValues}
-                size={small ? "small" : "medium"}/>;
-        } else {
-            return <EnumValuesChip
-                key={`${enumKey}-${index}`}
-                enumKey={enumKey}
-                enumValues={enumValues}
-                size={small ? "small" : "medium"}/>;
-        }
+    const renderValue = (enumKey?: string | number) => {
+        return <EnumValuesChip
+            key={`${enumKey}`}
+            enumKey={String(enumKey)}
+            enumValues={enumValues}
+            size={small ? "small" : "medium"}/>;
     };
+
     return (
         multiple
             ? <MultiSelect
                 inputRef={ref}
-                containerClassName="w-full h-full"
                 className="w-full h-full p-0 bg-transparent"
                 position={"item-aligned"}
                 disabled={disabled}
-                padding={false}
-                includeFocusOutline={false}
+                includeClear={false}
+                useChips={false}
                 value={validValue
                     ? ((internalValue as any[]).map(v => v.toString()))
                     : ([])}
-                onMultiValueChange={onChange}
-                renderValue={renderValue}>
+                onValueChange={onChange}>
                 {enumValues?.map((enumConfig) => (
                     <MultiSelectItem
                         key={enumConfig.id}
@@ -102,17 +91,16 @@ export function VirtualTableSelect(props: {
             </MultiSelect>
             : <Select
                 inputRef={ref}
+                size={"large"}
+                fullWidth={true}
                 className="w-full h-full p-0 bg-transparent"
                 position={"item-aligned"}
                 disabled={disabled}
-                multiple={multiple}
                 padding={false}
-                includeFocusOutline={false}
                 value={validValue
-                    ? (multiple ? (internalValue as any[]).map(v => v.toString()) : internalValue?.toString())
-                    : (multiple ? [] : "")}
+                    ? internalValue?.toString()
+                    : ""}
                 onValueChange={onChange}
-                onMultiValueChange={onChange}
                 renderValue={renderValue}>
                 {enumValues?.map((enumConfig) => (
                     <SelectItem

package/src/components/VirtualTable/fields/VirtualTableUserSelect.tsx

@@ -0,0 +1,99 @@
+import React, { useCallback, useEffect } from "react";
+import { MultiSelect, MultiSelectItem, Select, SelectItem } from "@firecms/ui";
+import { useInternalUserManagementController } from "../../../hooks";
+import { UserDisplay } from "../../UserDisplay";
+
+export function VirtualTableUserSelect(props: {
+    name: string;
+    error: Error | undefined;
+    multiple: boolean;
+    disabled: boolean;
+    small: boolean;
+    internalValue: string | string[] | undefined;
+    updateValue: (newValue: (string | string[] | null)) => void;
+    focused: boolean;
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}) {
+
+    const {
+        internalValue,
+        disabled,
+        small,
+        focused,
+        updateValue,
+        multiple
+    } = props;
+
+    const { users, getUser } = useInternalUserManagementController();
+
+    const validValue = (Array.isArray(internalValue) && multiple) ||
+        (!Array.isArray(internalValue) && !multiple);
+
+    const ref = React.useRef<HTMLButtonElement>(null);
+    useEffect(() => {
+        if (ref.current && focused) {
+            ref.current?.focus({ preventScroll: true });
+        }
+    }, [focused, ref]);
+
+    const onChange = useCallback((updatedValue: string | string[]) => {
+        if (!updatedValue) {
+            updateValue(null);
+        } else {
+            updateValue(updatedValue);
+        }
+    }, [updateValue]);
+
+    const renderValue = (userId: string) => {
+        const user = getUser(userId);
+        return <UserDisplay user={user}  />;
+    };
+
+    return (
+        multiple
+            ? <MultiSelect
+                inputRef={ref}
+                className="w-full h-full p-0 bg-transparent"
+                position={"item-aligned"}
+                disabled={disabled}
+                includeClear={false}
+                useChips={false}
+                value={validValue
+                    ? (internalValue as string[])
+                    : ([])}
+                onValueChange={onChange}>
+                {users?.map((user) => (
+                    <MultiSelectItem
+                        key={user.uid}
+                        value={user.uid}>
+                        <UserDisplay
+                            user={user} />
+                    </MultiSelectItem>
+                ))}
+            </MultiSelect>
+            : <Select
+                inputRef={ref}
+                size={"large"}
+                fullWidth={true}
+                className="w-full h-full p-0 bg-transparent"
+                position={"item-aligned"}
+                disabled={disabled}
+                padding={false}
+                value={validValue
+                    ? internalValue as string
+                    : ""}
+                onValueChange={onChange}
+                renderValue={renderValue}>
+                {users?.map((user) => (
+                    <SelectItem
+                        key={user.uid}
+                        value={user.uid}>
+                        <UserDisplay
+                            user={user}/>
+                    </SelectItem>
+                ))}
+            </Select>
+
+    );
+}
+

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,95 +1,112 @@
-import { EntityAction } from "../../../types";
-import { ArchiveIcon, DeleteIcon, FileCopyIcon, KeyboardTabIcon, OpenInNewIcon } from "@firecms/ui";
-import { DeleteEntityDialog } from "../../DeleteEntityDialog";
+import { DeleteIcon, EditIcon, FileCopyIcon } from "@firecms/ui";
+import { EntityAction } from "../../types";
+import { DeleteEntityDialog } from "../DeleteEntityDialog";
+import { addRecentId } from "../EntityCollectionView/utils";
+import { navigateToEntity, resolveDefaultSelectedView } from "../../util";
 
 export const editEntityAction: EntityAction = {
-    icon: <KeyboardTabIcon/>,
+    icon: <EditIcon size={"small"}/>,
+    key: "edit",
     name: "Edit",
     collapsed: false,
+    isEnabled: ({ entity }) => Boolean(entity),
     onClick({
                 entity,
                 collection,
                 fullPath,
+                fullIdPath,
                 context,
                 highlightEntity,
                 unhighlightEntity,
+                openEntityMode
             }): Promise<void> {
+
+        if (!entity) {
+            throw new Error("INTERNAL: editEntityAction: Entity is undefined");
+        }
+
         highlightEntity?.(entity);
+
         context.analyticsController?.onAnalyticsEvent?.("entity_click", {
             path: entity.path,
             entityId: entity.id
         });
-        const path = collection?.collectionGroup ? entity.path : (fullPath ?? entity.path);
-        context.sideEntityController.open({
+
+        if (collection) {
+            addRecentId(collection.id, entity.id);
+        }
+
+        const path = collection?.collectionGroup ? entity.path : (fullPath ?? collection?.path ?? entity.path);
+        const newFullIdPath = collection?.collectionGroup ? collection.id : (fullIdPath ?? collection?.id ?? entity.path);
+        const defaultSelectedView = resolveDefaultSelectedView(
+            collection ? collection.defaultSelectedView : undefined,
+            {
+                status: "existing",
+                entityId: entity.id,
+            }
+        );
+        navigateToEntity({
+            openEntityMode,
+            collection,
             entityId: entity.id,
             path,
-            collection,
-            updateUrl: true,
+            fullIdPath: newFullIdPath,
+            sideEntityController: context.sideEntityController,
             onClose: () => unhighlightEntity?.(entity),
+            navigation: context.navigation,
+            selectedTab: defaultSelectedView
         });
+
         return Promise.resolve(undefined);
     }
 }
 
 export const copyEntityAction: EntityAction = {
-    icon: <FileCopyIcon/>,
+    icon: <FileCopyIcon size={"small"}/>,
     name: "Copy",
+    key: "copy",
+    isEnabled: ({ entity }) => Boolean(entity),
     onClick({
                 entity,
                 collection,
                 context,
+                fullPath,
                 highlightEntity,
                 unhighlightEntity,
+                openEntityMode
             }): Promise<void> {
+        if (!entity) {
+            throw new Error("INTERNAL: copyEntityAction: Entity is undefined");
+        }
         highlightEntity?.(entity);
         context.analyticsController?.onAnalyticsEvent?.("copy_entity_click", {
             path: entity.path,
             entityId: entity.id
         });
-        context.sideEntityController.open({
+
+        const path = collection?.collectionGroup ? collection.path : (fullPath ?? collection?.path ?? entity.path);
+        const fullIdPath = collection?.collectionGroup ? collection.id : (fullPath ?? collection?.id ?? entity.path);
+        navigateToEntity({
+            openEntityMode,
+            collection,
             entityId: entity.id,
-            path: entity.path,
+            path,
+            fullIdPath,
             copy: true,
-            collection,
-            updateUrl: true,
+            sideEntityController: context.sideEntityController,
             onClose: () => unhighlightEntity?.(entity),
+            navigation: context.navigation
         });
-        return Promise.resolve(undefined);
-    }
-}
 
-export const archiveEntityAction: EntityAction = {
-    icon: <ArchiveIcon/>,
-    name: "Archive",
-    onClick({
-                entity,
-                collection,
-                context: {
-                    dataSource,
-                }
-            }): Promise<void> {
-        // Add your code here
-        return Promise.resolve(undefined);
-    }
-}
-
-export const openWebsiteAction: EntityAction = {
-    icon: <OpenInNewIcon/>,
-    name: "See in website",
-    onClick({
-                entity,
-                collection,
-                context,
-            }): Promise<void> {
-        // open a new tab
-        window.open(`https://example.com/${entity.id}`, "_blank");
         return Promise.resolve(undefined);
     }
 }
 
 export const deleteEntityAction: EntityAction = {
-    icon: <DeleteIcon/>,
+    icon: <DeleteIcon size={"small"}/>,
     name: "Delete",
+    key: "delete",
+    isEnabled: ({ entity }) => Boolean(entity),
     onClick({
                 entity,
                 fullPath,
@@ -97,8 +114,11 @@ export const deleteEntityAction: EntityAction = {
                 context,
                 selectionController,
                 onCollectionChange,
-                sideEntityController
+                navigateBack
             }): Promise<void> {
+        if (!entity) {
+            throw new Error("INTERNAL: deleteEntityAction: Entity is undefined");
+        }
         const { closeDialog } = context.dialogsController.open({
             key: "delete_entity_dialog_" + entity.id,
             Component: ({ open }) => {
@@ -116,7 +136,7 @@ export const deleteEntityAction: EntityAction = {
                         });
                         selectionController?.setSelectedEntities(selectionController.selectedEntities.filter(e => e.id !== entity.id));
                         onCollectionChange?.();
-                        sideEntityController?.close();
+                        navigateBack?.();
                     }}
                     onClose={closeDialog}/>;
             }

package/src/components/common/index.ts

@@ -1,5 +1,6 @@
 export * from "./types";
 export * from "./useDebouncedData";
 export * from "./useColumnsIds";
-export * from "./useDataSourceEntityCollectionTableController";
+export * from "./useDataSourceTableController";
 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) => void
-    fullPath: string
-    context: FireCMSContext
+    setError: (e: Error | undefined) => void
 }
 
 /**