@firecms/core 3.0.1 → 3.1.0-canary.24c8270

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -49,6 +49,13 @@ export interface PropertyTableCellProps<T extends CMSType> {
     path: string;
     disabled: boolean;
     enablePopupIcon?: boolean;
+    // Sortable props for dnd-kit integration
+    sortableNodeRef?: (node: HTMLElement | null) => void;
+    sortableStyle?: React.CSSProperties;
+    sortableAttributes?: Record<string, any>;
+    isDragging?: boolean;
+    isDraggable?: boolean;
+    frozen?: boolean;
 }
 
 function isStorageProperty(property: ResolvedProperty) {
@@ -69,19 +76,25 @@ function isStorageProperty(property: ResolvedProperty) {
 
 export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
     function PropertyTableCell<T extends CMSType, M extends Record<string, any>>({
-                                                                                     propertyKey,
-                                                                                     customFieldValidator,
-                                                                                     value,
-                                                                                     property,
-                                                                                     align,
-                                                                                     width,
-                                                                                     height,
-                                                                                     path,
-                                                                                     entity,
-                                                                                     readonly,
-                                                                                     disabled: disabledProp,
-                                                                                     enablePopupIcon = true
-                                                                                 }: PropertyTableCellProps<T>) {
+        propertyKey,
+        customFieldValidator,
+        value,
+        property,
+        align,
+        width,
+        height,
+        path,
+        entity,
+        readonly,
+        disabled: disabledProp,
+        enablePopupIcon = true,
+        sortableNodeRef,
+        sortableStyle,
+        sortableAttributes,
+        isDragging,
+        isDraggable,
+        frozen
+    }: PropertyTableCellProps<T>) {
 
         const {
             onValueChange,
@@ -240,7 +253,13 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 align={align ?? "left"}
                 fullHeight={false}
                 disabledTooltip={disabledTooltip ?? (readOnlyProperty ? "Read only" : undefined)}
-                disabled={true}>
+                disabled={true}
+                sortableNodeRef={sortableNodeRef}
+                sortableStyle={sortableStyle}
+                sortableAttributes={sortableAttributes}
+                isDragging={isDragging}
+                isDraggable={isDraggable}
+                frozen={frozen}>
                 <PropertyPreview
                     width={width}
                     height={getRowHeight(size)}
@@ -261,32 +280,32 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 const referenceValue = internalValue ? new EntityReference(internalValue, path) : undefined;
                 innerComponent =
                     <TableReferenceField name={propertyKey as string}
-                                         internalValue={referenceValue}
-                                         updateValue={(v) => updateValue(v ? (v as EntityReference).id : null)}
-                                         disabled={disabled}
-                                         size={size}
-                                         path={path}
-                                         multiselect={false}
-                                         previewProperties={referenceProperty.previewProperties}
-                                         includeId={referenceProperty.includeId}
-                                         includeEntityLink={referenceProperty.includeEntityLink}
-                                         title={stringProperty.name}
-                                         forceFilter={referenceProperty.forceFilter}
+                        internalValue={referenceValue}
+                        updateValue={(v) => updateValue(v ? (v as EntityReference).id : null)}
+                        disabled={disabled}
+                        size={size}
+                        path={path}
+                        multiselect={false}
+                        previewProperties={referenceProperty.previewProperties}
+                        includeId={referenceProperty.includeId}
+                        includeEntityLink={referenceProperty.includeEntityLink}
+                        title={stringProperty.name}
+                        forceFilter={referenceProperty.forceFilter}
                     />;
                 allowScroll = false;
             } else if (isAStorageProperty) {
                 innerComponent = <TableStorageUpload error={validationError ?? error}
-                                                     disabled={disabled}
-                                                     focused={selected}
-                                                     selected={selected}
-                                                     openPopup={setPopupCell ? openPopup : undefined}
-                                                     property={property as ResolvedStringProperty | ResolvedArrayProperty<string[]>}
-                                                     entity={entity}
-                                                     path={path}
-                                                     value={internalValue}
-                                                     previewSize={getPreviewSizeFrom(size)}
-                                                     updateValue={updateValue}
-                                                     propertyKey={propertyKey as string}
+                    disabled={disabled}
+                    focused={selected}
+                    selected={selected}
+                    openPopup={setPopupCell ? openPopup : undefined}
+                    property={property as ResolvedStringProperty | ResolvedArrayProperty<string[]>}
+                    entity={entity}
+                    path={path}
+                    value={internalValue}
+                    previewSize={getPreviewSizeFrom(size)}
+                    updateValue={updateValue}
+                    propertyKey={propertyKey as string}
                 />;
                 includeActions = false;
                 showExpandIcon = true;
@@ -296,15 +315,15 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 const numberProperty = property as ResolvedNumberProperty;
                 if (numberProperty.enumValues) {
                     innerComponent = <VirtualTableSelect name={propertyKey as string}
-                                                         multiple={false}
-                                                         disabled={disabled}
-                                                         focused={selected}
-                                                         valueType={"number"}
-                                                         small={getPreviewSizeFrom(size) !== "medium"}
-                                                         enumValues={numberProperty.enumValues}
-                                                         error={validationError ?? error}
-                                                         internalValue={internalValue as string | number}
-                                                         updateValue={updateValue}
+                        multiple={false}
+                        disabled={disabled}
+                        focused={selected}
+                        valueType={"number"}
+                        small={getPreviewSizeFrom(size) !== "medium"}
+                        enumValues={numberProperty.enumValues}
+                        error={validationError ?? error}
+                        internalValue={internalValue as string | number}
+                        updateValue={updateValue}
                     />;
                     fullHeight = true;
                 } else {
@@ -322,54 +341,55 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 const stringProperty = property as ResolvedStringProperty;
                 if (stringProperty.enumValues) {
                     innerComponent = <VirtualTableSelect name={propertyKey as string}
-                                                         multiple={false}
-                                                         focused={selected}
-                                                         disabled={disabled}
-                                                         valueType={"string"}
-                                                         small={getPreviewSizeFrom(size) !== "medium"}
-                                                         enumValues={stringProperty.enumValues}
-                                                         error={validationError ?? error}
-                                                         internalValue={internalValue as string | number}
-                                                         updateValue={updateValue}
+                        multiple={false}
+                        focused={selected}
+                        disabled={disabled}
+                        valueType={"string"}
+                        small={getPreviewSizeFrom(size) !== "medium"}
+                        enumValues={stringProperty.enumValues}
+                        error={validationError ?? error}
+                        internalValue={internalValue as string | number}
+                        updateValue={updateValue}
                     />;
                     fullHeight = true;
                 } else if (stringProperty.userSelect) {
                     innerComponent = <VirtualTableUserSelect name={propertyKey as string}
-                                                             multiple={false}
-                                                             focused={selected}
-                                                             disabled={disabled}
-                                                             small={getPreviewSizeFrom(size) !== "medium"}
-                                                             error={validationError ?? error}
-                                                             internalValue={internalValue as string}
-                                                             updateValue={updateValue}
+                        multiple={false}
+                        focused={selected}
+                        disabled={disabled}
+                        small={getPreviewSizeFrom(size) !== "medium"}
+                        error={validationError ?? error}
+                        internalValue={internalValue as string}
+                        updateValue={updateValue}
                     />;
                     fullHeight = true;
                 } else if (stringProperty.markdown || !stringProperty.storage || !stringProperty.reference) {
                     const multiline = Boolean(stringProperty.multiline) || Boolean(stringProperty.markdown);
                     innerComponent = <VirtualTableInput error={validationError ?? error}
-                                                        disabled={disabled}
-                                                        multiline={multiline}
-                                                        focused={selected}
-                                                        value={internalValue as string}
-                                                        updateValue={updateValue}
+                        disabled={disabled}
+                        multiline={multiline}
+                        focused={selected}
+                        value={internalValue as string}
+                        updateValue={updateValue}
                     />;
                     allowScroll = true;
                 }
             } else if (property.dataType === "boolean") {
                 innerComponent = <VirtualTableSwitch error={validationError ?? error}
-                                                     disabled={disabled}
-                                                     focused={selected}
-                                                     internalValue={internalValue as boolean}
-                                                     updateValue={updateValue}
+                    disabled={disabled}
+                    focused={selected}
+                    internalValue={internalValue as boolean}
+                    updateValue={updateValue}
                 />;
             } else if (property.dataType === "date") {
                 innerComponent = <VirtualTableDateField name={propertyKey as string}
-                                                        error={validationError ?? error}
-                                                        disabled={disabled}
-                                                        mode={property.mode}
-                                                        focused={selected}
-                                                        internalValue={internalValue as Date}
-                                                        updateValue={updateValue}
+                    error={validationError ?? error}
+                    disabled={disabled}
+                    mode={property.mode}
+                    timezone={property.timezone}
+                    focused={selected}
+                    internalValue={internalValue as Date}
+                    updateValue={updateValue}
                 />;
                 fullHeight = true;
                 hideOverflow = false;
@@ -378,17 +398,17 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 if (typeof property.path === "string") {
                     innerComponent =
                         <TableReferenceField name={propertyKey as string}
-                                             internalValue={internalValue as EntityReference}
-                                             updateValue={updateValue}
-                                             disabled={disabled}
-                                             size={size}
-                                             path={property.path}
-                                             multiselect={false}
-                                             previewProperties={property.previewProperties}
-                                             includeId={property.includeId}
-                                             includeEntityLink={property.includeEntityLink}
-                                             title={property.name}
-                                             forceFilter={property.forceFilter}
+                            internalValue={internalValue as EntityReference}
+                            updateValue={updateValue}
+                            disabled={disabled}
+                            size={size}
+                            path={property.path}
+                            multiselect={false}
+                            previewProperties={property.previewProperties}
+                            includeId={property.includeId}
+                            includeEntityLink={property.includeEntityLink}
+                            title={property.name}
+                            forceFilter={property.forceFilter}
                         />;
                 }
                 allowScroll = false;
@@ -403,15 +423,15 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                         if (selected && arrayProperty.of.enumValues) {
                             innerComponent =
                                 <VirtualTableSelect name={propertyKey as string}
-                                                    multiple={true}
-                                                    disabled={disabled}
-                                                    focused={selected}
-                                                    small={getPreviewSizeFrom(size) !== "medium"}
-                                                    valueType={arrayProperty.of.dataType}
-                                                    enumValues={arrayProperty.of.enumValues}
-                                                    error={validationError ?? error}
-                                                    internalValue={internalValue as string | number}
-                                                    updateValue={updateValue}
+                                    multiple={true}
+                                    disabled={disabled}
+                                    focused={selected}
+                                    small={getPreviewSizeFrom(size) !== "medium"}
+                                    valueType={arrayProperty.of.dataType}
+                                    enumValues={arrayProperty.of.enumValues}
+                                    error={validationError ?? error}
+                                    internalValue={internalValue as string | number}
+                                    updateValue={updateValue}
                                 />;
                             allowScroll = true;
                             fullHeight = true;
@@ -447,11 +467,11 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
             showExpandIcon = enablePopupIcon && selected && !innerComponent && !disabled && !readOnlyProperty;
             innerComponent = (
                 <PropertyPreview width={width}
-                                 height={height}
-                                 propertyKey={propertyKey as string}
-                                 value={internalValue}
-                                 property={property}
-                                 size={getPreviewSizeFrom(size)}
+                    height={height}
+                    propertyKey={propertyKey as string}
+                    value={internalValue}
+                    property={property}
+                    size={getPreviewSizeFrom(size)}
                 />
             );
         }
@@ -474,12 +494,18 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 showExpandIcon={showExpandIcon}
                 value={internalValue}
                 hideOverflow={hideOverflow}
+                sortableNodeRef={sortableNodeRef}
+                sortableStyle={sortableStyle}
+                sortableAttributes={sortableAttributes}
+                isDragging={isDragging}
+                isDraggable={isDraggable}
+                frozen={frozen}
                 actions={includeActions && <EntityTableCellActions
                     showError={showError}
                     disabled={disabled}
                     showExpandIcon={showExpandIcon}
                     selected={selected}
-                    openPopup={!disabled ? openPopup : undefined}/>}
+                    openPopup={!disabled ? openPopup : undefined} />}
             >
 
                 {innerComponent}
@@ -498,6 +524,9 @@ function areEqual(prevProps: PropertyTableCellProps<any>, nextProps: PropertyTab
         equal(prevProps.property, nextProps.property) &&
         equal(prevProps.value, nextProps.value) &&
         equal(prevProps.entity.id, nextProps.entity.id) &&
-        equal(prevProps.entity.values, nextProps.entity.values)
+        equal(prevProps.entity.values, nextProps.entity.values) &&
+        prevProps.isDragging === nextProps.isDragging &&
+        prevProps.isDraggable === nextProps.isDraggable &&
+        prevProps.frozen === nextProps.frozen
         ;
 }

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

@@ -1,42 +1,37 @@
 import React, { useEffect } from "react";
 
 import {
-    Button,
     CircularProgress,
     cls,
     defaultBorderMixin,
-    FilterListOffIcon,
-    SearchBar,
-    Select,
-    SelectItem,
-    Tooltip
+    SearchBar
 } from "@firecms/ui";
-import { CollectionSize } from "../../../types";
 import { useLargeLayout } from "../../../hooks";
 
 interface CollectionTableToolbarProps {
-    size: CollectionSize;
     loading: boolean;
     actionsStart?: React.ReactNode;
     actions?: React.ReactNode;
+    /**
+     * View mode toggle button, positioned left of the search bar.
+     */
+    viewModeToggle?: React.ReactNode;
     title?: React.ReactNode,
     onTextSearchClick?: () => void;
     onTextSearch?: (searchString?: string) => void;
-    onSizeChanged: (size: CollectionSize) => void;
     textSearchLoading?: boolean;
 }
 
 export function CollectionTableToolbar({
-                                           actions,
-                                           actionsStart,
-                                           loading,
-                                           onSizeChanged,
-                                           onTextSearch,
-                                           onTextSearchClick,
-                                           size,
-                                           textSearchLoading,
-                                           title
-                                       }: CollectionTableToolbarProps) {
+    actions,
+    actionsStart,
+    loading,
+    onTextSearch,
+    onTextSearchClick,
+    textSearchLoading,
+    title,
+    viewModeToggle
+}: CollectionTableToolbarProps) {
 
     const searchInputRef = React.useRef<HTMLInputElement>(null);
     const largeLayout = useLargeLayout();
@@ -51,36 +46,18 @@ export function CollectionTableToolbar({
     }, [textSearchLoading]);
 
 
-    const sizeSelect = (
-        <Tooltip title={"Table row size"} side={"right"} sideOffset={4}>
-            <Select
-                value={size as string}
-                className="w-16 ml-2"
-                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={cls(defaultBorderMixin, "no-scrollbar min-h-[56px] overflow-x-auto px-2 md:px-4 bg-surface-50 dark:bg-surface-900 border-b flex flex-row justify-between items-center w-full")}>
+            className={cls(defaultBorderMixin, "no-scrollbar min-h-[52px] overflow-x-auto px-2 md:px-4 bg-surface-50 dark:bg-surface-900 border-b flex flex-row justify-between items-center w-full")}>
 
             <div className="flex items-center gap-1 md:mr-4 mr-2">
 
+                {viewModeToggle}
+
                 {title && <div className={"hidden lg:block"}>
                     {title}
                 </div>}
 
-                {sizeSelect}
-
                 {actionsStart}
 
             </div>
@@ -89,18 +66,19 @@ export function CollectionTableToolbar({
 
                 {largeLayout && <div className="w-[22px] mr-4">
                     {loading &&
-                        <CircularProgress size={"smallest"}/>}
+                        <CircularProgress size={"smallest"} />}
                 </div>}
 
                 {(onTextSearch || onTextSearchClick) &&
                     <SearchBar
                         key={"search-bar"}
+                        size={"small"}
                         inputRef={searchInputRef}
                         loading={textSearchLoading}
                         disabled={Boolean(onTextSearchClick)}
                         onClick={onTextSearchClick}
                         onTextSearch={onTextSearchClick ? undefined : onTextSearch}
-                        expandable={true}/>}
+                        expandable={true} />}
 
                 {actions}
 

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

@@ -28,6 +28,13 @@ interface EntityTableCellProps {
     selected?: boolean;
     hideOverflow?: boolean;
     onSelect?: (cellRect: DOMRect | undefined) => void;
+    // Sortable props for dnd-kit integration
+    sortableNodeRef?: (node: HTMLElement | null) => void;
+    sortableStyle?: React.CSSProperties;
+    sortableAttributes?: Record<string, any>;
+    isDragging?: boolean;
+    isDraggable?: boolean;
+    frozen?: boolean;
 }
 
 type TableCellInnerProps = {
@@ -39,28 +46,28 @@ type TableCellInnerProps = {
 }
 
 const TableCellInner = ({
-                            justifyContent,
-                            scrollable,
-                            faded,
-                            fullHeight,
-                            children
-                        }: TableCellInnerProps) => {
+    justifyContent,
+    scrollable,
+    faded,
+    fullHeight,
+    children
+}: TableCellInnerProps) => {
     return (
         <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
-             }}
+            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>
@@ -69,23 +76,29 @@ const TableCellInner = ({
 
 export const EntityTableCell = React.memo<EntityTableCellProps>(
     function EntityTableCell({
-                                 children,
-                                 actions,
-                                 size,
-                                 selected,
-                                 disabled,
-                                 disabledTooltip,
-                                 saved,
-                                 error,
-                                 align,
-                                 allowScroll,
-                                 removePadding,
-                                 fullHeight,
-                                 onSelect,
-                                 width,
-                                 hideOverflow = true,
-                                 showExpandIcon = true
-                             }: EntityTableCellProps) {
+        children,
+        actions,
+        size,
+        selected,
+        disabled,
+        disabledTooltip,
+        saved,
+        error,
+        align,
+        allowScroll,
+        removePadding,
+        fullHeight,
+        onSelect,
+        width,
+        hideOverflow = true,
+        showExpandIcon = true,
+        sortableNodeRef,
+        sortableStyle,
+        sortableAttributes,
+        isDragging,
+        isDraggable,
+        frozen
+    }: EntityTableCellProps) {
 
         const [measureRef, bounds] = useMeasure();
         const ref = useRef<HTMLDivElement>(null);
@@ -188,9 +201,9 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
             <div
                 className={cls(
                     "transition-colors duration-100 ease-in-out",
-                    `flex relative h-full rounded-md p-${p} border border-4  border-opacity-75`,
+                    `flex relative h-full rounded-md p-${p} border border-4 border-opacity-75`,
                     onHover && !disabled ? "bg-surface-50 dark:bg-surface-900" : "",
-                    saved ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "",
+                    saved ? "bg-surface-100/75 dark:bg-surface-800/75" : "",
                     hideOverflow ? "overflow-hidden" : "",
                     isSelected ? "bg-surface-50 dark:bg-surface-900" : "",
                     borderClass
@@ -220,12 +233,12 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                         faded={faded}>
 
                         {!fullHeight && <div ref={measureRef}
-                                             style={{
-                                                 display: "flex",
-                                                 width: "100%",
-                                                 justifyContent,
-                                                 height: fullHeight ? "100%" : undefined
-                                             }}>
+                            style={{
+                                display: "flex",
+                                width: "100%",
+                                justifyContent,
+                                height: fullHeight ? "100%" : undefined
+                            }}>
                             {children}
                         </div>}
 
@@ -237,22 +250,47 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                 {disabled && onHover && disabledTooltip &&
                     <div className="absolute top-1 right-1 text-xs">
                         <Tooltip title={disabledTooltip}>
-                            <DoNotDisturbOnIcon size={"smallest"} color={"disabled"} className={"text-surface-500"}/>
+                            <DoNotDisturbOnIcon size={"smallest"} color={"disabled"} className={"text-text-disabled"} />
                         </Tooltip>
                     </div>}
 
             </div>
         </>;
-        if (showError) {
-            return (
+
+        // Wrap with sortable outer div when sortable props are provided
+        // Remove tabIndex from attributes to avoid capturing focus before cell content
+        const { tabIndex: _tabIndex, ...sortableAttrsWithoutTabIndex } = sortableAttributes ?? {};
+        const sortableContent = sortableNodeRef ? (
+            <div
+                ref={sortableNodeRef}
+                style={sortableStyle}
+                className={cls(
+                    "flex-shrink-0",
+                    frozen && "sticky left-0 z-10 bg-white dark:bg-surface-950"
+                )}
+                {...sortableAttrsWithoutTabIndex}
+            >
+                {showError ? (
+                    <ErrorTooltip
+                        className={"flex h-full w-full"}
+                        align={"start"}
+                        title={error?.message ?? "Error"}>
+                        {result}
+                    </ErrorTooltip>
+                ) : result}
+            </div>
+        ) : (
+            showError ? (
                 <ErrorTooltip
+                    className={"flex h-full w-full"}
                     align={"start"}
                     title={error?.message ?? "Error"}>
                     {result}
                 </ErrorTooltip>
-            );
-        }
-        return result;
+            ) : result
+        );
+
+        return sortableContent;
     }, (a, b) => {
         return a.error === b.error &&
             a.value === b.value &&
@@ -266,5 +304,8 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
             a.showExpandIcon === b.showExpandIcon &&
             a.removePadding === b.removePadding &&
             a.fullHeight === b.fullHeight &&
-            a.selected === b.selected;
+            a.selected === b.selected &&
+            a.isDragging === b.isDragging &&
+            a.isDraggable === b.isDraggable &&
+            a.frozen === b.frozen;
     }) as React.FunctionComponent<EntityTableCellProps>;