@firecms/core 3.0.0 → 3.1.0-canary.02232f4

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

@@ -1,43 +1,39 @@
 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";
+import { useLargeLayout, useTranslation } 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 { t } = useTranslation();
     const searchInputRef = React.useRef<HTMLInputElement>(null);
     const largeLayout = useLargeLayout();
 
@@ -51,36 +47,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 +67,20 @@ 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}/>}
+                        placeholder={t("search")}
+                        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>;

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

@@ -28,7 +28,7 @@ export function EntityTableCellActions({
         }
     }, []);
 
-    const iconRef = useRef<HTMLButtonElement>();
+    const iconRef = useRef<HTMLButtonElement>(undefined);
     useEffect(() => {
         if (iconRef.current && selected) {
             iconRef.current.focus({ preventScroll: true });

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

@@ -20,7 +20,7 @@ import { useWindowSize } from "./useWindowSize";
 import { getPropertyInPath, isReadOnly, resolveCollection } from "../../../../util";
 import { Button, CloseIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
 import { PropertyFieldBinding, yupToFormErrors } from "../../../../form";
-import { useAuthController, useCustomizationController, useDataSource, useFireCMSContext } from "../../../../hooks";
+import { useAuthController, useCustomizationController, useDataSource, useFireCMSContext, useTranslation } from "../../../../hooks";
 import { OnCellValueChangeParams } from "../../../common";
 
 interface PopupFormFieldProps<M extends Record<string, any>> {
@@ -108,6 +108,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
     const fireCMSContext = useFireCMSContext();
     const authController = useAuthController();
     const customizationController = useCustomizationController();
+    const { t } = useTranslation();
 
     const [savingError, setSavingError] = React.useState<any>();
     const [popupLocation, setPopupLocation] = useState<{
@@ -345,7 +346,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
                         type="submit"
                         disabled={disabled}
                     >
-                        Save
+                        {t("save")}
                     </Button>
                 </DialogActions>
 

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

@@ -1,20 +1,20 @@
 import React, { useCallback, useEffect } from "react";
 
 interface DraggableProps {
-    containerRef: React.RefObject<HTMLDivElement>,
-    innerRef: React.RefObject<HTMLDivElement>,
+    containerRef: React.RefObject<HTMLDivElement | null>,
+    innerRef: React.RefObject<HTMLDivElement | null>,
     x?: number;
     y?: number;
     onMove: (params: { x: number, y: number }) => void,
 }
 
 export function useDraggable({
-                                 containerRef,
-                                 innerRef,
-                                 x,
-                                 y,
-                                 onMove
-                             }: DraggableProps) {
+    containerRef,
+    innerRef,
+    x,
+    y,
+    onMove
+}: DraggableProps) {
 
     let relX = 0;
     let relY = 0;
@@ -62,9 +62,9 @@ export function useDraggable({
         if (event.target.localName === "input" || !listeningRef.current)
             return;
         onMove({
-                x: event.screenX - relX,
-                y: event.screenY - relY
-            }
+            x: event.screenX - relX,
+            y: event.screenY - relY
+        }
         );
         event.stopPropagation();
     };