@firecms/core 3.0.0-alpha.84 → 3.0.0-beta.10

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -3,32 +3,40 @@ import React, { useEffect } from "react";
 import {
     Button,
     CircularProgress,
-    cn,
+    cls,
     defaultBorderMixin,
     FilterListOffIcon,
     SearchBar,
     Select,
-    SelectItem
+    SelectItem,
+    Tooltip
 } from "@firecms/ui";
 import { CollectionSize } from "../../../types";
 import { useLargeLayout } from "../../../hooks";
 
 interface CollectionTableToolbarProps {
     size: CollectionSize;
-    filterIsSet: boolean;
     loading: boolean;
-    forceFilter?: boolean;
     actionsStart?: React.ReactNode;
     actions?: React.ReactNode;
     title?: React.ReactNode,
     onTextSearchClick?: () => void;
     onTextSearch?: (searchString?: string) => void;
     onSizeChanged: (size: CollectionSize) => void;
-    clearFilter?: () => void;
     textSearchLoading?: boolean;
 }
 
-export function CollectionTableToolbar(props: CollectionTableToolbarProps) {
+export function CollectionTableToolbar({
+                                           actions,
+                                           actionsStart,
+                                           loading,
+                                           onSizeChanged,
+                                           onTextSearch,
+                                           onTextSearchClick,
+                                           size,
+                                           textSearchLoading,
+                                           title
+                                       }: CollectionTableToolbarProps) {
 
     const searchInputRef = React.useRef<HTMLInputElement>(null);
     const largeLayout = useLargeLayout();
@@ -36,75 +44,65 @@ export function CollectionTableToolbar(props: CollectionTableToolbarProps) {
     const searchLoading = React.useRef<boolean>(false);
 
     useEffect(() => {
-        if (searchInputRef.current && searchLoading.current && !props.textSearchLoading) {
+        if (searchInputRef.current && searchLoading.current && !textSearchLoading) {
             searchInputRef.current.focus();
         }
-        searchLoading.current = props.textSearchLoading ?? false;
-    }, [props.textSearchLoading]);
-
-    const clearFilterButton = !props.forceFilter && props.filterIsSet && props.clearFilter &&
-        <Button
-            variant={"outlined"}
-            className="h-fit-content"
-            aria-label="filter clear"
-            onClick={props.clearFilter}
-            size="small">
-            <FilterListOffIcon/>
-            Clear filter
-        </Button>;
+        searchLoading.current = textSearchLoading ?? false;
+    }, [textSearchLoading]);
+
 
     const sizeSelect = (
-        <Select
-            value={props.size as string}
-            className="w-16 h-10"
-            size={"small"}
-            onValueChange={(v) => props.onSizeChanged(v as CollectionSize)}
-            renderValue={(v) => <div className={"font-medium"}>{v.toUpperCase()}</div>}
-        >
-            {["xs", "s", "m", "l", "xl"].map((size) => (
-                <SelectItem key={size} value={size} className={"w-12 font-medium text-center"}>
-                    {size.toUpperCase()}
-                </SelectItem>
-            ))}
-        </Select>
+        <Tooltip title={"Table row size"} side={"right"} sideOffset={4}>
+            <Select
+                value={size as string}
+                className="w-16 h-10"
+                size={"small"}
+                onValueChange={(v) => onSizeChanged(v as CollectionSize)}
+                renderValue={(v) => <div className={"font-medium"}>{v.toUpperCase()}</div>}
+            >
+                {["xs", "s", "m", "l", "xl"].map((size) => (
+                    <SelectItem key={size} value={size} className={"w-12 font-medium text-center"}>
+                        {size.toUpperCase()}
+                    </SelectItem>
+                ))}
+            </Select>
+        </Tooltip>
     );
 
     return (
         <div
-            className={cn(defaultBorderMixin, "no-scrollbar min-h-[56px] overflow-x-auto px-2 md:px-4 bg-gray-50 dark:bg-gray-900 border-b flex flex-row justify-between items-center w-full")}>
+            className={cls(defaultBorderMixin, "no-scrollbar min-h-[56px] overflow-x-auto px-2 md:px-4 bg-gray-50 dark:bg-gray-900 border-b flex flex-row justify-between items-center w-full")}>
 
             <div className="flex items-center gap-2 md:mr-4 mr-2">
 
-                {props.title && <div className={"hidden lg:block"}>
-                    {props.title}
+                {title && <div className={"hidden lg:block"}>
+                    {title}
                 </div>}
 
                 {sizeSelect}
 
-                {props.actionsStart}
-
-                {clearFilterButton}
+                {actionsStart}
 
             </div>
 
             <div className="flex items-center gap-2">
 
                 {largeLayout && <div className="w-[22px]">
-                    {props.loading &&
+                    {loading &&
                         <CircularProgress size={"small"}/>}
                 </div>}
 
-                {(props.onTextSearch || props.onTextSearchClick) &&
+                {(onTextSearch || onTextSearchClick) &&
                     <SearchBar
                         key={"search-bar"}
                         inputRef={searchInputRef}
-                        loading={props.textSearchLoading}
-                        disabled={Boolean(props.onTextSearchClick)}
-                        onClick={props.onTextSearchClick}
-                        onTextSearch={props.onTextSearchClick ? undefined : props.onTextSearch}
+                        loading={textSearchLoading}
+                        disabled={Boolean(onTextSearchClick)}
+                        onClick={onTextSearchClick}
+                        onTextSearch={onTextSearchClick ? undefined : onTextSearch}
                         expandable={true}/>}
 
-                {props.actions}
+                {actions}
 
             </div>
 

package/src/components/EntityCollectionTable/internal/EntityTableCell.tsx

@@ -2,10 +2,9 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
 import useMeasure from "react-use-measure";
 
-import { VirtualTableSize } from "../../VirtualTable";
-import { getRowHeight } from "../../VirtualTable/common";
-import { cn, RemoveCircleIcon, Tooltip } from "@firecms/ui";
+import { cls, RemoveCircleIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../../components";
+import { getRowHeight, TableSize } from "../../common/table_height";
 
 interface EntityTableCellProps {
     children: React.ReactNode;
@@ -19,7 +18,7 @@ interface EntityTableCellProps {
     error?: Error;
     allowScroll?: boolean;
     align: "right" | "left" | "center";
-    size: VirtualTableSize;
+    size: TableSize;
     disabledTooltip?: string;
     width: number;
     showExpandIcon?: boolean;
@@ -46,22 +45,21 @@ const TableCellInner = ({
                             children
                         }: TableCellInnerProps) => {
     return (
-        <div
-            className={cn("flex flex-col max-h-full w-full",
-                {
-                    "items-start": faded || scrollable
-                })}
-            style={{
-                justifyContent,
-                height: fullHeight ? "100%" : undefined,
-                overflow: scrollable ? "auto" : undefined,
-                WebkitMaskImage: faded
-                    ? "linear-gradient(to bottom, black 60%, transparent 100%)"
-                    : undefined,
-                maskImage: faded
-                    ? "linear-gradient(to bottom, black 60%, transparent 100%)"
-                    : undefined
-            }}
+        <div className={cls("flex flex-col max-h-full w-full",
+            {
+                "items-start": faded || scrollable
+            })}
+             style={{
+                 justifyContent,
+                 height: fullHeight ? "100%" : undefined,
+                 overflow: scrollable ? "auto" : undefined,
+                 WebkitMaskImage: faded
+                     ? "linear-gradient(to bottom, black 60%, transparent 100%)"
+                     : undefined,
+                 maskImage: faded
+                     ? "linear-gradient(to bottom, black 60%, transparent 100%)"
+                     : undefined
+             }}
         >
             {children}
         </div>
@@ -96,7 +94,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
         const [onHover, setOnHover] = useState(false);
         const [internalSaved, setInternalSaved] = useState(saved);
 
-        const showError = !disabled && error;
+        const showError = !disabled && Boolean(error);
 
         useEffect(() => {
             if (saved) {
@@ -157,8 +155,9 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
         }, [ref, onSelect, selected, disabled]);
 
         const onFocus = useCallback((event: React.SyntheticEvent<HTMLDivElement>) => {
-            onSelectCallback();
             event.stopPropagation();
+            event.preventDefault();
+            onSelectCallback();
         }, [onSelectCallback]);
 
         const isOverflowing = useMemo(() => {
@@ -176,21 +175,26 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
         const setOnHoverTrue = useCallback(() => setOnHover(true), []);
         const setOnHoverFalse = useCallback(() => setOnHover(false), []);
 
+        const borderClass = showError
+            ? "border-red-500"
+            : internalSaved
+                ? "border-green-500"
+                : isSelected
+                    ? "border-primary"
+                    : "border-transparent";
+
         return (
             <div
-                ref={ref}
-                className={cn(
+                className={cls(
                     "transition-colors duration-100 ease-in-out",
                     `flex relative h-full rounded-md p-${p} border border-4  border-opacity-75`,
                     onHover && !disabled ? "bg-gray-50 dark:bg-gray-900" : "",
                     saved ? "bg-gray-100 bg-opacity-75 dark:bg-gray-800 dark:bg-opacity-75" : "",
-                    !isSelected && !internalSaved && !showError ? "border-transparent" : "",
                     hideOverflow ? "overflow-hidden" : "",
                     isSelected ? "bg-gray-50 dark:bg-gray-900" : "",
-                    isSelected && !internalSaved ? "border-primary" : "",
-                    internalSaved ? "border-green-500 " : "",
-                    showError ? "border-red-500" : ""
+                    borderClass
                 )}
+                ref={ref}
                 style={{
                     justifyContent,
                     alignItems: disabled || !isOverflowing ? "center" : undefined,
@@ -199,11 +203,9 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                 }}
                 tabIndex={selected || disabled ? undefined : 0}
                 onFocus={onFocus}
-                // onClick={onClick}
                 onMouseEnter={setOnHoverTrue}
                 onMouseMove={setOnHoverTrue}
                 onMouseLeave={setOnHoverFalse}
-                // contain={scrollable ? "content" : "size"}
             >
 
                 <ErrorBoundary>

package/src/components/EntityCollectionTable/internal/EntityTableCellActions.tsx

@@ -11,7 +11,14 @@ export interface EntityTableCellActionsProps {
     children?: React.ReactNode;
 }
 
-export function EntityTableCellActions({ showError, disabled, showExpandIcon, selected, openPopup, children }: EntityTableCellActionsProps) {
+export function EntityTableCellActions({
+                                           showError,
+                                           disabled,
+                                           showExpandIcon,
+                                           selected,
+                                           openPopup,
+                                           children
+                                       }: EntityTableCellActionsProps) {
 
     const ref = useRef<HTMLDivElement>(null);
     const doOpenPopup = useCallback(() => {
@@ -54,13 +61,18 @@ export function EntityTableCellActions({ showError, disabled, showExpandIcon, se
 
                 {showError && <ErrorTooltip
                     side={"left"}
-                    className={"flex items-center justify-center"}
-                    style={{ width: 32, height: 32 }}
                     title={showError.message}>
-                    <ErrorOutlineIcon
-                        size={"small"}
-                        color={"error"}
-                    />
+                    <div
+                        className={"flex items-center justify-center"}
+                        style={{
+                            width: 32,
+                            height: 32
+                        }}>
+                        <ErrorOutlineIcon
+                            size={"small"}
+                            color={"error"}
+                        />
+                    </div>
                 </ErrorTooltip>
                 }
 

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -14,19 +14,20 @@ import {
     ResolvedProperties,
     ResolvedProperty
 } from "../../../../types";
-import { Form, Formik, FormikProps } from "formik";
+import { Formex, useCreateFormex } from "@firecms/formex";
 import { useDraggable } from "./useDraggable";
 import { CustomFieldValidator, getYupEntitySchema } from "../../../../form/validation";
 import { useWindowSize } from "./useWindowSize";
 import { ElementResizeListener } from "./ElementResizeListener";
-import { ErrorView, OnCellValueChangeParams } from "../../../../components";
+import { ErrorView } from "../../../ErrorView";
 import { getPropertyInPath, isReadOnly, resolveCollection } from "../../../../util";
 import { Button, ClearIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
 import { PropertyFieldBinding } from "../../../../form";
 import { useCustomizationController, useFireCMSContext } from "../../../../hooks";
+import { OnCellValueChangeParams } from "../../../common";
 
 interface PopupFormFieldProps<M extends Record<string, any>> {
-    entity?: Entity<M>;
+    entity: Entity<M>;
     customFieldValidator?: CustomFieldValidator;
     path: string;
     tableKey: string;
@@ -40,7 +41,7 @@ interface PopupFormFieldProps<M extends Record<string, any>> {
      * Callback when the value of a cell has been edited
      * @param params
      */
-    onCellValueChange?: (params: OnCellValueChangeParams<any, M>) => Promise<void> | void;
+    onCellValueChange?: (params: OnCellValueChangeParams<any, any>) => Promise<void> | void;
 }
 
 export function PopupFormField<M extends Record<string, any>>(props: PopupFormFieldProps<M>) {
@@ -73,7 +74,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         y: number
     }>();
 
-    const entityId = entityProp?.id;
+    const entityId = entityProp.id;
     const [entity, setEntity] = useState<Entity<M> | undefined>(entityProp);
     // useEffect(() => {
     //     if (entityId && inputCollection) {
@@ -204,12 +205,10 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             return onCellValueChange({
                 value: values[propertyKey as string],
                 propertyKey: propertyKey as string,
-                entity,
+                data: entity,
                 setError: setSavingError,
                 onValueUpdated: () => {
                 },
-                fullPath: path,
-                context: fireCMSContext
             });
         }
         return Promise.resolve();
@@ -218,139 +217,142 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
     if (!entity)
         return <></>;
 
-    const form = entity && (
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const formex = useCreateFormex<M>({
+        initialValues: (entity?.values ?? {}) as EntityValues<M>,
+        validation: (values) => {
+            return validationSchema?.validate(values, { abortEarly: false })
+                .then(() => ({}))
+                .catch((e) => {
+                    const errors: Record<string, string> = {};
+                    e.inner.forEach((error: any) => {
+                        errors[error.path] = error.message;
+                    });
+                    return errors;
+                });
+        },
+        validateOnInitialRender: true,
+        onSubmit: (values, actions) => {
+            saveValue(values)
+                .then(() => onClose())
+                .finally(() => actions.setSubmitting(false));
+        }
+    });
+
+    const { values, isSubmitting, setFieldValue, handleSubmit } = formex;
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+        if (!equal(values, internalValue)) {
+            setInternalValue(values);
+        }
+    }, [values]);
+
+    if (!entity)
+        return <ErrorView
+            error={"PopupFormField misconfiguration"}/>;
+
+    if (!collection)
+        return <></>;
+
+    const disabled = isSubmitting;
+
+    const formContext: FormContext<M> = {
+        collection,
+        entityId,
+        values,
+        path,
+        setFieldValue,
+        save: saveValue,
+        formex
+    };
+
+    const property: ResolvedProperty<any> | undefined = propertyKey && getPropertyInPath(collection.properties, propertyKey as string);
+    const fieldProps: PropertyFieldBindingProps<any, M> | undefined = propertyKey && property
+        ? {
+            propertyKey: propertyKey as string,
+            disabled: isSubmitting || isReadOnly(property) || !!property.disabled,
+            property,
+            includeDescription: false,
+            underlyingValueHasChanged: false,
+            context: formContext,
+            partOfArray: false,
+            minimalistView: false,
+            autoFocus: open
+        }
+        : undefined;
+
+    let internalForm = <>
         <div
-            className={`text-gray-900 dark:text-white overflow-auto rounded rounded-md bg-white dark:bg-gray-950 ${!open ? "hidden" : ""} cursor-grab max-w-[100vw]`}>
-            <Formik
-                initialValues={(entity?.values ?? {}) as EntityValues<M>}
-                enableReinitialize={true}
-                validationSchema={validationSchema}
-                validateOnMount={true}
-                validate={(values) => console.debug("Validating", values)}
-                onSubmit={(values, actions) => {
-                    saveValue(values)
-                        .then(() => onClose())
-                        .finally(() => actions.setSubmitting(false));
-                }}
-            >
-                {({
-                      values,
-                      setFieldValue,
-                      handleSubmit,
-                      isSubmitting
-                  }: FormikProps<EntityValues<M>>) => {
-
-                    // eslint-disable-next-line react-hooks/rules-of-hooks
-                    useEffect(() => {
-                        if (!equal(values, internalValue)) {
-                            setInternalValue(values);
-                        }
-                    }, [values]);
-
-                    if (!entity)
-                        return <ErrorView
-                            error={"PopupFormField misconfiguration"}/>;
-
-                    if (!collection)
-                        return <></>;
-
-                    const disabled = isSubmitting;
-
-                    const formContext: FormContext<M> = {
-                        collection,
-                        entityId,
-                        values,
-                        path,
-                        setFieldValue,
-                        save: saveValue
-                    };
-
-                    const property: ResolvedProperty<any> | undefined = propertyKey && getPropertyInPath(collection.properties, propertyKey as string);
-                    const fieldProps: PropertyFieldBindingProps<any, M> | undefined = propertyKey && property
-                        ? {
-                            propertyKey: propertyKey as string,
-                            disabled: isSubmitting || isReadOnly(property) || !!property.disabled,
-                            property,
-                            includeDescription: false,
-                            underlyingValueHasChanged: false,
-                            context: formContext,
-                            tableMode: true,
-                            partOfArray: false,
-                            partOfBlock: false,
-                            autoFocus: open
-                        }
-                        : undefined;
-
-                    let internalForm = <>
-                        <div
-                            key={`popup_form_${tableKey}_${entityId}_${propertyKey}`}
-                            className="w-[560px] max-w-full max-h-[85vh]">
-                            <Form
-                                onSubmit={handleSubmit}
-                                noValidate>
-
-                                <div
-                                    className="mb-1 p-4 flex flex-col relative">
-                                    <div
-                                        ref={innerRef}
-                                        className="cursor-auto"
-                                        style={{ cursor: "auto !important" }}>
-                                        {fieldProps &&
-                                            <PropertyFieldBinding {...fieldProps}/>}
-                                    </div>
-                                </div>
-
-                                <DialogActions>
-                                    <Button
-                                        variant="filled"
-                                        color="primary"
-                                        type="submit"
-                                        disabled={disabled}
-                                    >
-                                        Save
-                                    </Button>
-                                </DialogActions>
-
-                            </Form>
-
-                        </div>
-                    </>;
-
-                    const plugins = customizationController.plugins;
-                    if (plugins) {
-                        // const formController: FormContext<M> = {
-                        //     values,
-                        //     setFieldValue
-                        // }
-                        plugins.forEach((plugin: FireCMSPlugin) => {
-                            if (plugin.form?.provider) {
-                                internalForm = (
-                                    <plugin.form.provider.Component
-                                        status={"existing"}
-                                        path={path}
-                                        collection={collection}
-                                        entity={entity}
-                                        context={fireCMSContext}
-                                        currentEntityId={entityId}
-                                        formContext={formContext}
-                                        {...plugin.form.provider.props}>
-                                        {internalForm}
-                                    </plugin.form.provider.Component>
-                                );
-                            }
-                        });
-                    }
-                    return internalForm;
-                }}
-            </Formik>
-
-            {savingError &&
-                <Typography color={"error"}>
-                    {savingError.message}
-                </Typography>
-            }
+            key={`popup_form_${tableKey}_${entityId}_${propertyKey}`}
+            className="w-[560px] max-w-full max-h-[85vh]">
+            <form
+                onSubmit={handleSubmit}
+                noValidate>
+
+                <div
+                    className="mb-1 p-4 flex flex-col relative">
+                    <div
+                        ref={innerRef}
+                        className="cursor-auto"
+                        style={{ cursor: "auto !important" }}>
+                        {fieldProps &&
+                            <PropertyFieldBinding {...fieldProps}/>}
+                    </div>
+                </div>
+
+                <DialogActions>
+                    <Button
+                        variant="filled"
+                        color="primary"
+                        type="submit"
+                        disabled={disabled}
+                    >
+                        Save
+                    </Button>
+                </DialogActions>
+
+            </form>
+
         </div>
-    );
+
+    </>;
+
+    const plugins = customizationController.plugins;
+    if (plugins) {
+        // const formController: FormContext<M> = {
+        //     values,
+        //     setFieldValue
+        // }
+        plugins.forEach((plugin: FireCMSPlugin) => {
+            if (plugin.form?.provider) {
+                internalForm = (
+                    <plugin.form.provider.Component
+                        status={"existing"}
+                        path={path}
+                        collection={collection}
+                        entity={entity}
+                        context={fireCMSContext}
+                        currentEntityId={entityId}
+                        formContext={formContext}
+                        {...plugin.form.provider.props}>
+                        {internalForm}
+                    </plugin.form.provider.Component>
+                );
+            }
+        });
+    }
+    const form = <div
+        className={`text-gray-900 dark:text-white overflow-auto rounded rounded-md bg-white dark:bg-gray-950 ${!open ? "hidden" : ""} cursor-grab max-w-[100vw]`}>
+
+        {internalForm}
+
+        {savingError &&
+            <Typography color={"error"}>
+                {savingError.message}
+            </Typography>
+        }
+    </div>;
 
     const draggable = (
         <div
@@ -393,9 +395,10 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
 
     return (
         <Portal.Root asChild
-                     container={container}
-        >
-            {draggable}
+                     container={container}>
+            <Formex value={formex}>
+                {draggable}
+            </Formex>
         </Portal.Root>
     );