@firecms/core 3.0.0-canary.13 → 3.0.0-canary.131

package/src/components/ArrayContainer.tsx

@@ -7,7 +7,8 @@ import {
     AddIcon,
     Button,
     ContentCopyIcon,
-    fieldBackgroundHoverMixin, HandleIcon,
+    fieldBackgroundHoverMixin,
+    HandleIcon,
     IconButton,
     Menu,
     MenuItem,
@@ -26,7 +27,8 @@ interface ArrayContainerProps<T> {
     onInternalIdAdded?: (id: number) => void;
     includeAddButton?: boolean;
     newDefaultEntry: T;
-    onValueChange: (value: T[]) => void
+    onValueChange: (value: T[]) => void,
+    className?: string;
 }
 
 const buildIdsMap = (value: any[]) =>
@@ -52,7 +54,8 @@ export function ArrayContainer<T>({
                                       onInternalIdAdded,
                                       includeAddButton,
                                       newDefaultEntry,
-                                      onValueChange
+                                      onValueChange,
+                                      className
                                   }: ArrayContainerProps<T>) {
 
     const hasValue = value && Array.isArray(value) && value.length > 0;
@@ -153,6 +156,7 @@ export function ArrayContainer<T>({
             >
                 {(droppableProvided, droppableSnapshot) => (
                     <div
+                        className={className}
                         {...droppableProvided.droppableProps}
                         ref={droppableProvided.innerRef}>
                         {hasValue && internalIds.map((internalId: number, index: number) => {
@@ -235,12 +239,13 @@ export function ArrayContainerItem({
         {...provided.draggableProps}
         style={provided.draggableProps.style}
         className={`${
-            (isDragging || onHover) ? fieldBackgroundHoverMixin : ""
+            (isDragging || onHover) ? "hover:bg-slate-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20" : ""
         } mb-1 rounded-md opacity-100`}
     >
         <div
             className="flex items-start">
-            <div className="flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark">
+            <div
+                className="flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark">
                 {buildEntry(index, internalId)}
             </div>
             <ArrayItemOptions direction={size === "small" ? "row" : "column"}
@@ -253,7 +258,6 @@ export function ArrayContainerItem({
     </div>;
 }
 
-
 export function ArrayItemOptions({
                                      direction,
                                      disabled,
@@ -275,7 +279,7 @@ export function ArrayItemOptions({
     const iconRef = React.useRef<HTMLDivElement>(null);
     useOutsideAlerter(iconRef, () => setMenuOpen(false));
 
-    return <div className={`pl-2 pt-1 pb-4 flex ${direction === "row" ? "flex-row-reverse" : "flex-col"} items-center`}
+    return <div className={`pl-2 pt-1 pb-1 flex ${direction === "row" ? "flex-row-reverse" : "flex-col"} items-center`}
                 ref={iconRef}
                 {...provided.dragHandleProps}>
         <Tooltip
@@ -283,11 +287,13 @@ export function ArrayItemOptions({
             open={menuOpen ? false : undefined}
             side={direction === "column" ? "left" : undefined}
             title="Drag to move. Click for more options">
-
             <IconButton
                 size="small"
                 disabled={disabled}
-                onClick={() => setMenuOpen(true)}
+                onClick={(e) => {
+                    e.preventDefault();
+                    setMenuOpen(true);
+                }}
                 onDragStart={(e: any) => {
                     setMenuOpen(false);
                 }}
@@ -298,7 +304,7 @@ export function ArrayItemOptions({
             <Menu
                 portalContainer={iconRef.current}
                 open={menuOpen}
-                trigger={<div/>}>
+                trigger={<div tabIndex={-1}/>}>
 
                 <MenuItem dense onClick={(e) => {
                     setMenuOpen(false);
@@ -316,7 +322,6 @@ export function ArrayItemOptions({
                 </MenuItem>
 
             </Menu>
-
         </Tooltip>
 
     </div>;

package/src/components/CircularProgressCenter.tsx

@@ -5,7 +5,7 @@ import { CircularProgress, CircularProgressProps, Typography } from "@firecms/ui
  *
  * @param text
  * @param props
- * @constructor
+
  * @ignore
  */
 export function CircularProgressCenter({ text, ...props }: CircularProgressProps & {

package/src/components/ClearFilterSortButton.tsx

@@ -0,0 +1,41 @@
+import { Button, FilterListOffIcon } from "@firecms/ui";
+import { EntityTableController } from "../types";
+
+export function ClearFilterSortButton({
+                                          tableController,
+                                          enabled
+                                      }: {
+    enabled: boolean;
+    tableController: EntityTableController
+}) {
+    if (!enabled) {
+        return null;
+    }
+
+    const filterIsSet = !!tableController.filterValues && Object.keys(tableController.filterValues).length > 0;
+    const sortIsSet = !!tableController.sortBy && tableController.sortBy.length > 0;
+
+    if ((filterIsSet || sortIsSet) && (tableController.clearFilter || tableController.setSortBy)) {
+        let label;
+        if (filterIsSet && sortIsSet) {
+            label = "Clear filter and sort";
+        } else if (filterIsSet) {
+            label = "Clear filter";
+        } else {
+            label = "Clear sort";
+        }
+        return <Button
+            variant={"outlined"}
+            className="h-fit-content"
+            aria-label="filter clear"
+            onClick={() => {
+                tableController.clearFilter?.();
+                tableController.setSortBy?.(undefined);
+            }}
+            size={"small"}>
+            <FilterListOffIcon/>
+            {label}
+        </Button>
+    }
+    return null;
+}

package/src/components/{DeleteConfirmationDialog.tsx → ConfirmationDialog.tsx}

@@ -2,7 +2,7 @@ import React from "react";
 
 import { Button, Dialog, DialogActions, DialogContent, LoadingButton, Typography } from "@firecms/ui";
 
-export function DeleteConfirmationDialog({
+export function ConfirmationDialog({
                                              open,
                                              onAccept,
                                              onCancel,

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -1,7 +1,7 @@
 import React, { MouseEvent, useCallback } from "react";
 
 import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../types";
-import { Checkbox, cn, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip } from "@firecms/ui";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
 
 /**
@@ -14,7 +14,6 @@ import { useFireCMSContext, useLargeLayout } from "../../hooks";
  * @param size
  * @param toggleEntitySelection
  * @param hideId
- * @constructor
  *
  * @group Collection components
  */
@@ -56,12 +55,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     const context = useFireCMSContext();
 
     const onCheckedChange = useCallback((checked: boolean) => {
-        selectionController?.toggleEntitySelection(entity);
-    }, [entity, selectionController?.toggleEntitySelection]);
-
-    const onClick = useCallback((event: MouseEvent) => {
-        event.stopPropagation();
-        selectionController?.toggleEntitySelection(entity);
+        selectionController?.toggleEntitySelection(entity, checked);
     }, [entity, selectionController?.toggleEntitySelection]);
 
     const hasActions = actions.length > 0;
@@ -71,8 +65,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     const uncollapsedActions = actions.filter(a => a.collapsed === false);
     return (
         <div
-            onClick={onClick}
-            className={cn(
+            className={cls(
                 "h-full flex items-center justify-center flex-col bg-gray-50 dark:bg-gray-900 bg-opacity-90 dark:bg-opacity-90 z-10",
                 frozen ? "sticky left-0" : ""
             )}
@@ -87,7 +80,9 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                 <div className="w-34 flex justify-center">
 
                     {uncollapsedActions.map((action, index) => (
-                        <Tooltip key={index} title={action.name}>
+                        <Tooltip key={index}
+                                 title={action.name}
+                                 asChild={true}>
                             <IconButton
                                 onClick={(event: MouseEvent) => {
                                     event.stopPropagation();
@@ -149,16 +144,14 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                 </div>}
 
             {!hideId && size !== "xs" && (
-                <div className="w-[138px] text-center overflow-hidden truncate">
+                <div
+                    className="w-[138px] text-center overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2"
+                    onClick={(event) => {
+                        event.stopPropagation();
+                    }}>
 
                     {entity
-                        ? <Typography
-                            onClick={(event) => {
-                                event.stopPropagation();
-                            }}
-                            className={"font-mono select-all"}
-                            variant={"caption"}
-                            color={"secondary"}> {entity.id} </Typography>
+                        ? entity.id
                         : <Skeleton/>
                     }
                 </div>

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -5,7 +5,6 @@ import { ErrorBoundary } from "../ErrorBoundary";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
 import { CellRendererParams, VirtualTableColumn } from "../VirtualTable";
 import { getValueInPath } from "../../util";
-import { getRowHeight } from "../VirtualTable/common";
 import { EntityCollectionRowActions } from "./EntityCollectionRowActions";
 import { CollectionTableToolbar } from "./internal/CollectionTableToolbar";
 import { EntityCollectionTableProps } from "./EntityCollectionTableProps";
@@ -15,7 +14,8 @@ import { renderSkeletonText } from "../../preview";
 import { propertiesToColumns } from "./column_utils";
 import { ErrorView } from "../ErrorView";
 import { SelectableTable } from "../SelectableTable/SelectableTable";
-
+import { cls } from "@firecms/ui";
+import { getRowHeight } from "../common/table_height";
 
 /**
  * This component is in charge of rendering a collection table with a high
@@ -43,6 +43,8 @@ import { SelectableTable } from "../SelectableTable/SelectableTable";
  */
 export const EntityCollectionTable = function EntityCollectionTable<M extends Record<string, any>, UserType extends User>
 ({
+     className,
+     style,
      forceFilter,
      actionsStart,
      actions,
@@ -73,13 +75,13 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
      emptyComponent,
      getIdColumnWidth,
      onTextSearchClick,
-     textSearchLoading
+     textSearchLoading,
+     enablePopupIcon
  }: EntityCollectionTableProps<M>) {
 
     const ref = useRef<HTMLDivElement>(null);
 
     const largeLayout = useLargeLayout();
-    const disabledFilterChange = Boolean(forceFilter);
     const selectedEntities = (selectionController?.selectedEntities?.length > 0 ? selectionController?.selectedEntities : highlightedEntities)?.filter(Boolean);
 
     const context: FireCMSContext<UserType> = useFireCMSContext();
@@ -88,8 +90,6 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
     const selectedEntityIds = selectedEntities?.map(e => e.id);
 
-    const filterIsSet = !!tableController.filterValues && Object.keys(tableController.filterValues).length > 0;
-
     const updateSize = useCallback((size: CollectionSize) => {
         if (onSizeChanged)
             onSizeChanged(size);
@@ -120,10 +120,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
         const propertyKey = column.key;
 
         let disabled = column.custom?.disabled;
-        const propertyValue = entity.values ? getValueInPath(entity.values, propertyKey) : undefined;
         const property = getPropertyFor?.({
             propertyKey,
-            propertyValue,
             entity
         }) ?? column.custom.resolvedProperty;
         if (!property?.disabled) {
@@ -150,6 +148,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                         height={getRowHeight(size)}
                         entity={entity}
                         disabled={disabled}
+                        enablePopupIcon={enablePopupIcon}
                         path={entity.path}/>
                     : renderSkeletonText()
                 }
@@ -179,7 +178,10 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
         const child = Builder
             ? <Builder entity={entity} context={context}/>
-            : <>{additionalField.value?.({ entity, context })}</>;
+            : <>{additionalField.value?.({
+                entity,
+                context
+            })}</>;
 
         return (
             <EntityTableCell
@@ -207,7 +209,6 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
             properties,
             sortable,
             forceFilter,
-            disabledFilter: disabledFilterChange,
             AdditionalHeaderWidget
         });
 
@@ -237,13 +238,15 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
     const columns: VirtualTableColumn[] = [
         idColumn,
-        ...displayedColumnIds
-            .map((p) => {
-                return collectionColumns.find(c => c.key === p.key);
-            }).filter(Boolean) as VirtualTableColumn[]
+        ...(displayedColumnIds
+            ? displayedColumnIds
+                .map((p) => {
+                    return collectionColumns.find(c => c.key === p.key);
+                }).filter(Boolean)
+            : collectionColumns) as VirtualTableColumn[]
     ];
 
-    const cellRenderer = (props: CellRendererParams<any>) => {
+    const cellRenderer = useCallback((props: CellRendererParams<any>) => {
         const column = props.column;
         const columns = props.columns;
         const columnKey = column.key;
@@ -283,20 +286,18 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                 <ErrorView error={e}/>
             </EntityTableCell>;
         }
-    }
+    }, [tableRowActionsBuilder, additionalCellRenderer, propertyCellRenderer, size]);
 
     return (
 
         <div ref={ref}
-             className="h-full w-full flex flex-col bg-white dark:bg-gray-950">
+             style={style}
+             className={cls("h-full w-full flex flex-col bg-white dark:bg-gray-950", className)}>
 
             <CollectionTableToolbar
-                forceFilter={disabledFilterChange}
-                filterIsSet={filterIsSet}
                 onTextSearch={textSearchEnabled ? onTextSearch : undefined}
                 textSearchLoading={textSearchLoading}
                 onTextSearchClick={textSearchEnabled ? onTextSearchClick : undefined}
-                clearFilter={tableController.clearFilter}
                 size={size}
                 onSizeChanged={updateSize}
                 title={title}

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import {
     AdditionalFieldDelegate,
     CollectionSize,
-    Entity, EntityCollection,
+    Entity,
     EntityTableController,
     FilterValues,
     ResolvedProperties,
@@ -12,13 +12,16 @@ import {
 } from "../../types";
 import { OnCellValueChange, OnColumnResizeParams, UniqueFieldValidator } from "../common/types";
 
-
 /**
  * @group Collection components
  */
 export type EntityCollectionTableProps<M extends Record<string, any>,
     UserType extends User = User> = {
 
+    className?: string;
+
+    style?: React.CSSProperties;
+
     /**
      * Display these entities as selected
      */
@@ -92,7 +95,7 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
      */
     tableController: EntityTableController<M>;
 
-    displayedColumnIds: PropertyColumnConfig[];
+    displayedColumnIds?: PropertyColumnConfig[];
 
     forceFilter?: FilterValues<Extract<keyof M, string>>;
 
@@ -131,15 +134,16 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
     onTextSearchClick?: () => void;
 
     textSearchLoading?: boolean;
-}
+
+    enablePopupIcon: boolean;
+};
 
 export type GetPropertyForProps<M extends Record<string, any>> = {
     propertyKey: string,
-    propertyValue: any,
     entity: Entity<M>
 };
 
 export type PropertyColumnConfig = {
     key: string,
-    disabled: boolean,
+    disabled?: boolean,
 };

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -24,14 +24,13 @@ import { getPreviewSizeFrom } from "../../preview/util";
 import { isReadOnly } from "../../util";
 
 import { CustomFieldValidator, mapPropertyToYup } from "../../form/validation";
-import { useFireCMSContext } from "../../hooks";
 
 import { EntityTableCell } from "./internal/EntityTableCell";
 import { EntityTableCellActions } from "./internal/EntityTableCellActions";
 
-import { getRowHeight } from "../VirtualTable/common";
 import { useSelectableTableController } from "../SelectableTable/SelectableTableContext";
 import { useClearRestoreValue } from "../../form/useClearRestoreValue";
+import { getRowHeight } from "../common/table_height";
 
 export interface PropertyTableCellProps<T extends CMSType> {
     propertyKey: string;
@@ -46,9 +45,12 @@ export interface PropertyTableCellProps<T extends CMSType> {
     entity: Entity<any>;
     path: string;
     disabled: boolean;
+    enablePopupIcon?: boolean;
 }
 
 function isStorageProperty(property: ResolvedProperty) {
+    if (property.dataType === "string" && property.markdown)
+        return false;
     if (property.dataType === "string" && (property as ResolvedStringProperty).storage)
         return true;
     if (property.dataType === "array") {
@@ -74,11 +76,10 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                                                                      path,
                                                                                      entity,
                                                                                      readonly,
-                                                                                     disabled: disabledProp
+                                                                                     disabled: disabledProp,
+                                                                                     enablePopupIcon = true
                                                                                  }: PropertyTableCellProps<T>) {
 
-        const context = useFireCMSContext();
-
         const {
             onValueChange,
             size,
@@ -95,6 +96,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
         const internalValueRef = useRef(value);
 
         const [error, setError] = useState<Error | undefined>();
+        const [validationError, setValidationError] = useState<Error | undefined>();
         const [saved, setSaved] = useState<boolean>(false);
 
         const onValueUpdated = useCallback(() => {
@@ -120,7 +122,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
         useEffect(
             () => {
                 if (!equal(value, internalValueRef.current)) {
-                    setError(undefined);
+                    setValidationError(undefined);
                     setInternalValue(value);
                     internalValueRef.current = value;
                     onValueUpdated();
@@ -136,32 +138,34 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
             validation
                 .validate(value)
                 .then(() => {
-                    setError(undefined);
+                    setValidationError(undefined);
                     internalValueRef.current = value;
                     if (onValueChange) {
-                        onValueChange({
-                            value,
-                            propertyKey,
-                            setError,
-                            onValueUpdated,
-                            entity,
-                            fullPath: path,
-                            context
-                        });
+                        try {
+                            onValueChange({
+                                value,
+                                propertyKey,
+                                setError,
+                                onValueUpdated,
+                                data: entity,
+                            });
+                        } catch (e: any) {
+                            console.error("onValueChange error", e);
+                            setError(e);
+                        }
+
                     }
                 })
                 .catch((e) => {
-                    setError(e);
+                    setValidationError(e);
                 });
         };
 
         useEffect(() => {
             validation
                 .validate(internalValue)
-                .then(() => setError(undefined))
-                .catch((e) => {
-                    setError(e);
-                });
+                .then(() => setValidationError(undefined))
+                .catch(setValidationError);
         }, [internalValue, validation, propertyKey, property, entity]);
 
         const updateValue = (newValue: any | null) => {
@@ -237,7 +241,6 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                     height={getRowHeight(size)}
                     propertyKey={propertyKey}
                     property={property}
-                    // entity={entity}
                     value={internalValue}
                     size={getPreviewSizeFrom(size)}
                 />
@@ -247,7 +250,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
         if (!customField && (!customPreview || selected)) {
             const isAStorageProperty = isStorageProperty(property);
             if (isAStorageProperty) {
-                innerComponent = <TableStorageUpload error={error}
+                innerComponent = <TableStorageUpload error={validationError ?? error}
                                                      disabled={disabled}
                                                      focused={selected}
                                                      selected={selected}
@@ -274,7 +277,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                                          valueType={"number"}
                                                          small={getPreviewSizeFrom(size) !== "medium"}
                                                          enumValues={numberProperty.enumValues}
-                                                         error={error}
+                                                         error={validationError ?? error}
                                                          internalValue={internalValue as string | number}
                                                          updateValue={updateValue}
                     />;
@@ -282,7 +285,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 } else {
                     innerComponent = <VirtualTableNumberInput
                         align={align}
-                        error={error}
+                        error={validationError ?? error}
                         focused={selected}
                         disabled={disabled}
                         value={internalValue as number}
@@ -300,14 +303,14 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                                          valueType={"string"}
                                                          small={getPreviewSizeFrom(size) !== "medium"}
                                                          enumValues={stringProperty.enumValues}
-                                                         error={error}
+                                                         error={validationError ?? error}
                                                          internalValue={internalValue as string | number}
                                                          updateValue={updateValue}
                     />;
                     fullHeight = true;
-                } else if (!stringProperty.storage) {
+                } else if (stringProperty.markdown || !stringProperty.storage) {
                     const multiline = Boolean(stringProperty.multiline) || Boolean(stringProperty.markdown);
-                    innerComponent = <VirtualTableInput error={error}
+                    innerComponent = <VirtualTableInput error={validationError ?? error}
                                                         disabled={disabled}
                                                         multiline={multiline}
                                                         focused={selected}
@@ -317,7 +320,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                     allowScroll = true;
                 }
             } else if (property.dataType === "boolean") {
-                innerComponent = <VirtualTableSwitch error={error}
+                innerComponent = <VirtualTableSwitch error={validationError ?? error}
                                                      disabled={disabled}
                                                      focused={selected}
                                                      internalValue={internalValue as boolean}
@@ -325,7 +328,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 />;
             } else if (property.dataType === "date") {
                 innerComponent = <VirtualTableDateField name={propertyKey as string}
-                                                        error={error}
+                                                        error={validationError ?? error}
                                                         disabled={disabled}
                                                         mode={property.mode}
                                                         focused={selected}
@@ -346,6 +349,8 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                              path={property.path}
                                              multiselect={false}
                                              previewProperties={property.previewProperties}
+                                             includeId={property.includeId}
+                                             includeEntityLink={property.includeEntityLink}
                                              title={property.name}
                                              forceFilter={property.forceFilter}
                         />;
@@ -368,7 +373,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                                     small={getPreviewSizeFrom(size) !== "medium"}
                                                     valueType={arrayProperty.of.dataType}
                                                     enumValues={arrayProperty.of.enumValues}
-                                                    error={error}
+                                                    error={validationError ?? error}
                                                     internalValue={internalValue as string | number}
                                                     updateValue={updateValue}
                                 />;
@@ -390,6 +395,8 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                     previewProperties={arrayProperty.of.previewProperties}
                                     title={arrayProperty.name}
                                     forceFilter={arrayProperty.of.forceFilter}
+                                    includeId={arrayProperty.of.includeId}
+                                    includeEntityLink={arrayProperty.of.includeEntityLink}
                                 />;
                         }
                         allowScroll = false;
@@ -401,11 +408,10 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
 
         if (!innerComponent) {
             allowScroll = false;
-            showExpandIcon = selected && !innerComponent && !disabled && !readOnlyProperty;
+            showExpandIcon = enablePopupIcon && selected && !innerComponent && !disabled && !readOnlyProperty;
             innerComponent = (
-                <PropertyPreview                                  width={width}
+                <PropertyPreview width={width}
                                  height={height}
-                    // entity={entity}
                                  propertyKey={propertyKey as string}
                                  value={internalValue}
                                  property={property}
@@ -426,7 +432,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 removePadding={removePadding}
                 fullHeight={fullHeight}
                 saved={saved}
-                error={error}
+                error={validationError ?? error}
                 align={align}
                 allowScroll={allowScroll}
                 showExpandIcon={showExpandIcon}