@firecms/core 3.0.1 → 3.1.0-canary.7d91b7c

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -34,7 +34,7 @@ export type FilterFormFieldProps<CustomProps> = {
 };
 
 type VirtualTableHeaderProps<M extends Record<string, any>> = {
-    resizeHandleRef: RefObject<HTMLDivElement>;
+    resizeHandleRef: RefObject<HTMLDivElement | null>;
     columnIndex: number;
     isResizingIndex: number;
     column: VirtualTableColumn<any>;
@@ -45,22 +45,26 @@ type VirtualTableHeaderProps<M extends Record<string, any>> = {
     onClickResizeColumn?: (columnIndex: number, column: VirtualTableColumn) => void;
     createFilterField?: (props: FilterFormFieldProps<any>) => React.ReactNode;
     AdditionalHeaderWidget?: (props: { onHover: boolean }) => React.ReactNode;
+    isDragging?: boolean;
+    isDraggable?: boolean;
 };
 
 export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
     function VirtualTableHeader<M extends Record<string, any>>({
-                                                                   resizeHandleRef,
-                                                                   columnIndex,
-                                                                   isResizingIndex,
-                                                                   sort,
-                                                                   onColumnSort,
-                                                                   onFilterUpdate,
-                                                                   filter,
-                                                                   column,
-                                                                   onClickResizeColumn,
-                                                                   createFilterField,
-                                                                   AdditionalHeaderWidget
-                                                               }: VirtualTableHeaderProps<M>) {
+        resizeHandleRef,
+        columnIndex,
+        isResizingIndex,
+        sort,
+        onColumnSort,
+        onFilterUpdate,
+        filter,
+        column,
+        onClickResizeColumn,
+        createFilterField,
+        AdditionalHeaderWidget,
+        isDragging,
+        isDraggable
+    }: VirtualTableHeaderProps<M>) {
 
         const [onHover, setOnHover] = useState(false);
 
@@ -85,14 +89,16 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
         return (
             <ErrorBoundary>
                 <div
-                    className={cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center bg-surface-50 dark:bg-surface-900",
+                    className={cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center",
+                        isDragging
+                            ? "bg-primary-bg dark:bg-primary-bg-dark"
+                            : "bg-surface-50 dark:bg-surface-900",
                         "text-text-secondary hover:text-text-primary dark:text-text-secondary-dark dark:hover:text-text-primary-dark",
-                        "hover:bg-surface-100 dark:hover:bg-surface-800 hover:bg-opacity-50 dark:hover:bg-opacity-50",
-                        column.frozen ? "sticky left-0 z-10" : "relative z-0"
+                        !isDragging && "hover:bg-surface-100 dark:hover:bg-surface-800 hover:bg-opacity-50 hover:bg-surface-100/50 dark:hover:bg-opacity-50 dark:hover:bg-surface-800/50",
+                        column.frozen ? "sticky left-0 z-10" : "relative z-0",
+                        isDraggable && "cursor-grab"
                     )}
                     style={{
-                        // transition: "color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-                        // fontSize: "0.750rem",
                         left: column.frozen ? 0 : undefined,
                         minWidth: column.width,
                         maxWidth: column.width
@@ -123,11 +129,11 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                     <>
 
                         {AdditionalHeaderWidget &&
-                            <AdditionalHeaderWidget onHover={onHover || openFilter}/>}
+                            <AdditionalHeaderWidget onHover={onHover || openFilter} />}
 
                         {column.sortable && (sort || hovered || openFilter) &&
                             <Badge color="secondary"
-                                   invisible={!sort}>
+                                invisible={!sort}>
                                 <IconButton
                                     size={"small"}
                                     className={onHover || openFilter ? "bg-white dark:bg-surface-950" : undefined}
@@ -136,11 +142,11 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                     }}
                                 >
                                     {!sort &&
-                                        <ArrowUpwardIcon/>}
+                                        <ArrowUpwardIcon />}
                                     {sort === "asc" &&
-                                        <ArrowUpwardIcon/>}
+                                        <ArrowUpwardIcon />}
                                     {sort === "desc" &&
-                                        <ArrowUpwardIcon className={"rotate-180"}/>}
+                                        <ArrowUpwardIcon className={"rotate-180"} />}
                                 </IconButton>
                             </Badge>
                         }
@@ -148,7 +154,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
 
                     {column.filter && createFilterField && <div>
                         <Badge color="secondary"
-                               invisible={!filter}>
+                            invisible={!filter}>
 
                             <Popover
                                 open={openFilter}
@@ -160,16 +166,16 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                         className={onHover || openFilter ? "bg-white dark:bg-surface-950" : undefined}
                                         size={"small"}
                                         onClick={handleSettingsClick}>
-                                        <FilterListIcon size={"small"}/>
+                                        <FilterListIcon size={"small"} />
                                     </IconButton>}
                             >
                                 <FilterForm column={column}
-                                            filter={filter}
-                                            onHover={onHover}
-                                            onFilterUpdate={update}
-                                            createFilterField={createFilterField}
-                                            hidden={hidden}
-                                            setHidden={setHidden}/>
+                                    filter={filter}
+                                    onHover={onHover}
+                                    onFilterUpdate={update}
+                                    createFilterField={createFilterField}
+                                    hidden={hidden}
+                                    setHidden={setHidden} />
 
                             </Popover>
 
@@ -179,11 +185,17 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
 
                     {column.resizable && <div
                         ref={resizeHandleRef}
+                        data-no-dnd="true"
                         className={cls(
                             "absolute h-full w-[6px] top-0 right-0 cursor-col-resize",
                             hovered && "bg-surface-300 dark:bg-surface-700"
                         )}
-                        onMouseDown={onClickResizeColumn ? () => onClickResizeColumn(columnIndex, column) : undefined}
+                        onPointerDown={(e) => {
+                            e.stopPropagation();
+                            if (onClickResizeColumn) {
+                                onClickResizeColumn(columnIndex, column);
+                            }
+                        }}
                     />}
                 </div>
 
@@ -192,14 +204,14 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
     }, equal) as React.FunctionComponent<VirtualTableHeaderProps<any>>;
 
 function FilterForm<M>({
-                           column,
-                           onFilterUpdate,
-                           filter,
-                           onHover,
-                           createFilterField,
-                           hidden,
-                           setHidden
-                       }: FilterFormProps<M>) {
+    column,
+    onFilterUpdate,
+    filter,
+    onHover,
+    createFilterField,
+    hidden,
+    setHidden
+}: FilterFormProps<M>) {
 
     const id = column.key;
 
@@ -233,17 +245,17 @@ function FilterForm<M>({
     if (!filterField) return null;
     return (
         <form noValidate={true}
-              onSubmit={(e) => {
-                  e.stopPropagation();
-                  e.preventDefault();
-                  submit();
-              }}
-              className={"text-surface-900 dark:text-white"}>
+            onSubmit={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                submit();
+            }}
+            className={"text-surface-900 dark:text-white"}>
             <div
                 className={cls(defaultBorderMixin, "py-4 px-6 typography-label border-b")}>
                 {column.title ?? id}
             </div>
-            {filterField && <div className="m-4">
+            {filterField && <div className="m-4 w-[400px]">
                 {filterField}
             </div>}
             <div className="flex justify-end m-4">
@@ -251,13 +263,10 @@ function FilterForm<M>({
                     className="mr-4"
                     disabled={!filterIsSet}
                     variant={"text"}
-                    color="primary"
                     type="reset"
                     aria-label="filter clear"
                     onClick={reset}>Clear</Button>
                 <Button
-                    variant="outlined"
-                    color="primary"
                     type="submit">Filter</Button>
             </div>
         </form>

package/src/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -1,25 +1,132 @@
-import React, { createRef, useCallback, useEffect, useState } from "react";
+import React, { createRef, useCallback, useEffect, useMemo, useState } from "react";
 
 import { VirtualTableColumn, VirtualTableWhereFilterOp } from "./VirtualTableProps";
 import { ErrorBoundary } from "../ErrorBoundary";
 import { VirtualTableHeader } from "./VirtualTableHeader";
 import { VirtualTableContextProps } from "./types";
 import { cls, defaultBorderMixin } from "@firecms/ui";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+// Sortable column header wrapper
+const SortableColumnHeader = ({
+    column,
+    columnIndex,
+    columnRefs,
+    isResizing,
+    onFilterUpdate,
+    filter,
+    sortByProperty,
+    currentSort,
+    onColumnSort,
+    onClickResizeColumn,
+    createFilterField,
+    isDragging,
+    isDraggable
+}: {
+    column: VirtualTableColumn;
+    columnIndex: number;
+    columnRefs: React.RefObject<HTMLDivElement | null>[];
+    isResizing: number;
+    onFilterUpdate: any;
+    filter: [VirtualTableWhereFilterOp, any] | undefined;
+    sortByProperty: string | undefined;
+    currentSort: "asc" | "desc" | undefined;
+    onColumnSort: any;
+    onClickResizeColumn: (index: number) => void;
+    createFilterField: any;
+    isDragging: boolean;
+    isDraggable: boolean;
+}) => {
+    const [isPressing, setIsPressing] = useState(false);
+
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+    } = useSortable({
+        id: column.key,
+        disabled: !isDraggable || column.frozen
+    });
+
+    const style = {
+        // Only use translate, ignore any scale transforms
+        transform: transform ? `translateX(${transform.x}px)` : undefined,
+        // Don't transition the dragged item - only other items should animate
+        transition: isDragging ? undefined : transition,
+        minWidth: column.width,
+        maxWidth: column.width,
+        width: column.width,
+    };
+
+    // Combine our press handlers with dnd-kit listeners
+    const combinedListeners = isDraggable ? {
+        ...listeners,
+        onPointerDown: (e: React.PointerEvent) => {
+            setIsPressing(true);
+            listeners?.onPointerDown?.(e);
+        },
+        onPointerUp: () => setIsPressing(false),
+        onPointerCancel: () => setIsPressing(false),
+    } : {};
+
+    // Reset pressing state when drag ends
+    React.useEffect(() => {
+        if (!isDragging) {
+            setIsPressing(false);
+        }
+    }, [isDragging]);
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={style}
+            className={cls(
+                "flex-shrink-0 h-full",
+                column.frozen && "sticky left-0 z-10"
+            )}
+            {...attributes}
+            {...combinedListeners}
+        >
+            <VirtualTableHeader
+                resizeHandleRef={columnRefs[columnIndex]}
+                columnIndex={columnIndex}
+                isResizingIndex={isResizing}
+                onFilterUpdate={onFilterUpdate}
+                filter={filter}
+                sort={sortByProperty === column.key ? currentSort : undefined}
+                onColumnSort={onColumnSort}
+                onClickResizeColumn={onClickResizeColumn}
+                column={column}
+                createFilterField={createFilterField}
+                AdditionalHeaderWidget={column.AdditionalHeaderWidget}
+                isDragging={isDragging || isPressing}
+                isDraggable={isDraggable} />
+        </div>
+    );
+};
 
 export const VirtualTableHeaderRow = ({
-                                          columns,
-                                          currentSort,
-                                          onColumnSort,
-                                          onFilterUpdate,
-                                          sortByProperty,
-                                          filter,
-                                          onColumnResize,
-                                          onColumnResizeEnd,
-                                          createFilterField,
-                                          AddColumnComponent
-                                      }: VirtualTableContextProps<any>) => {
-
-    const columnRefs = columns.map(() => createRef<HTMLDivElement>());
+    columns,
+    currentSort,
+    onColumnSort,
+    onFilterUpdate,
+    sortByProperty,
+    filter,
+    onColumnResize,
+    onColumnResizeEnd,
+    createFilterField,
+    AddColumnComponent,
+    onColumnsOrderChange,
+    data,
+    cellRenderer: CellRenderer,
+    rowHeight = 54,
+    draggingColumnId
+}: VirtualTableContextProps<any>) => {
+
+    const columnRefs = useMemo(() => columns.map(() => createRef<HTMLDivElement>()), [columns.length]);
     const [isResizing, setIsResizing] = useState(-1);
 
     const adjustWidthColumn = useCallback((index: number, width: number, end: boolean) => {
@@ -99,33 +206,42 @@ export const VirtualTableHeaderRow = ({
     }, [setCursorDocument]);
 
     return (
-        <div
-            className={cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 h-12 border-b bg-surface-50 dark:bg-surface-900")}>
-            {columns.map((c, columnIndex) => {
-                const column = columns[columnIndex];
-
-                const filterForThisProperty: [VirtualTableWhereFilterOp, any] | undefined =
-                    column && filter && filter[column.key]
-                        ? filter[column.key]
-                        : undefined;
-                return <ErrorBoundary key={"header_" + column.key}>
-                    <VirtualTableHeader
-                        resizeHandleRef={columnRefs[columnIndex]}
-                        columnIndex={columnIndex}
-                        isResizingIndex={isResizing}
-                        onFilterUpdate={onFilterUpdate}
-                        filter={filterForThisProperty}
-                        sort={sortByProperty === column.key ? currentSort : undefined}
-                        onColumnSort={onColumnSort}
-                        onClickResizeColumn={onClickResizeColumn}
-                        column={column}
-                        createFilterField={createFilterField}
-                        AdditionalHeaderWidget={column.AdditionalHeaderWidget}/>
-                </ErrorBoundary>;
-            })}
-
-            {AddColumnComponent && <AddColumnComponent/>}
-
-        </div>
+        <>
+            <div
+                className={cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 h-12 border-b bg-surface-50 dark:bg-surface-900")}>
+                {columns.map((column, columnIndex) => {
+                    const filterForThisProperty: [VirtualTableWhereFilterOp, any] | undefined =
+                        column && filter && filter[column.key]
+                            ? filter[column.key]
+                            : undefined;
+
+                    const isDraggable = !column.frozen && !!onColumnsOrderChange;
+                    const isDragging = draggingColumnId === column.key;
+
+                    return (
+                        <ErrorBoundary key={"header_" + column.key}>
+                            <SortableColumnHeader
+                                column={column}
+                                columnIndex={columnIndex}
+                                columnRefs={columnRefs}
+                                isResizing={isResizing}
+                                onFilterUpdate={onFilterUpdate}
+                                filter={filterForThisProperty}
+                                sortByProperty={sortByProperty}
+                                currentSort={currentSort}
+                                onColumnSort={onColumnSort}
+                                onClickResizeColumn={onClickResizeColumn}
+                                createFilterField={createFilterField}
+                                isDragging={isDragging}
+                                isDraggable={isDraggable}
+                            />
+                        </ErrorBoundary>
+                    );
+                })}
+
+                {AddColumnComponent && <AddColumnComponent />}
+
+            </div>
+        </>
     );
 };

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -38,7 +38,7 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      * @param sortBy
      */
     checkFilterCombination?: (filterValues: VirtualTableFilterValues<Extract<keyof T, string>>,
-                              sortBy?: [string, "asc" | "desc"]) => boolean;
+        sortBy?: [string, "asc" | "desc"]) => boolean;
 
     /**
      * A callback function when scrolling the table to near the end
@@ -162,6 +162,12 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     initialScroll?: number;
 
+    /**
+     * Callback when columns are reordered via drag-and-drop.
+     * @param columns The new column order
+     */
+    onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
+
 }
 
 export type CellRendererParams<T = any> = {
@@ -172,6 +178,13 @@ export type CellRendererParams<T = any> = {
     rowIndex: number;
     width: number;
     isScrolling?: 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;
 };
 
 /**

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -29,7 +29,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
         return (
             <div
                 className={cls(
-                    "flex min-w-full text-sm border-b border-surface-200 dark:border-surface-800 border-opacity-40 dark:border-opacity-40",
+                    "flex min-w-full text-sm border-b border-surface-200 dark:border-surface-800 border-opacity-40 border-surface-200/40 dark:border-opacity-40 dark:border-surface-800/40",
                     rowClassName ? rowClassName(rowData) : "",
                     {
                         "hover:bg-opacity-95": hoverRow,

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

@@ -6,6 +6,7 @@ export function VirtualTableDateField(props: {
     name: string;
     error: Error | undefined;
     mode?: "date" | "date_time";
+    timezone?: string;
     internalValue: Date | undefined | null;
     updateValue: (newValue: (Date | null)) => void;
     focused: boolean;
@@ -18,6 +19,7 @@ export function VirtualTableDateField(props: {
         disabled,
         error,
         mode,
+        timezone,
         internalValue,
         updateValue
     } = props;
@@ -31,6 +33,7 @@ export function VirtualTableDateField(props: {
             inputClassName={cls("w-full h-full", focusedDisabled)}
             className={cls("w-full h-full", focusedDisabled)}
             mode={mode}
+            timezone={timezone}
             locale={locale}
         />
     );

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

@@ -62,14 +62,24 @@ export function VirtualTableSelect(props: {
             key={`${enumKey}`}
             enumKey={String(enumKey)}
             enumValues={enumValues}
-            size={small ? "small" : "medium"}/>;
+            size={small ? "small" : "medium"} />;
     };
 
+    // When the dropdown closes (including on escape), restore focus to the trigger
+    const handleOpenChange = useCallback((open: boolean) => {
+        if (!open && ref.current) {
+            // Use setTimeout to ensure focus is restored after Radix finishes its cleanup
+            setTimeout(() => {
+                ref.current?.focus({ preventScroll: true });
+            }, 0);
+        }
+    }, []);
+
     return (
         multiple
             ? <MultiSelect
                 inputRef={ref}
-                className="w-full h-full p-0 bg-transparent"
+                className="w-full h-full p-0 bg-transparent outline-none"
                 position={"item-aligned"}
                 disabled={disabled}
                 includeClear={false}
@@ -77,7 +87,8 @@ export function VirtualTableSelect(props: {
                 value={validValue
                     ? ((internalValue as any[]).map(v => v.toString()))
                     : ([])}
-                onValueChange={onChange}>
+                onValueChange={onChange}
+                onOpenChange={handleOpenChange}>
                 {enumValues?.map((enumConfig) => (
                     <MultiSelectItem
                         key={enumConfig.id}
@@ -85,7 +96,7 @@ export function VirtualTableSelect(props: {
                         <EnumValuesChip
                             enumKey={enumConfig.id}
                             enumValues={enumValues}
-                            size={small ? "small" : "medium"}/>
+                            size={small ? "small" : "medium"} />
                     </MultiSelectItem>
                 ))}
             </MultiSelect>
@@ -93,7 +104,8 @@ export function VirtualTableSelect(props: {
                 inputRef={ref}
                 size={"large"}
                 fullWidth={true}
-                className="w-full h-full p-0 bg-transparent"
+                className="w-full h-full p-0 bg-transparent outline-none [&_button]:ring-0 [&_button]:ring-offset-0"
+                inputClassName="ring-0 ring-offset-0 focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-offset-0"
                 position={"item-aligned"}
                 disabled={disabled}
                 padding={false}
@@ -101,6 +113,7 @@ export function VirtualTableSelect(props: {
                     ? internalValue?.toString()
                     : ""}
                 onValueChange={onChange}
+                onOpenChange={handleOpenChange}
                 renderValue={renderValue}>
                 {enumValues?.map((enumConfig) => (
                     <SelectItem
@@ -109,7 +122,7 @@ export function VirtualTableSelect(props: {
                         <EnumValuesChip
                             enumKey={enumConfig.id}
                             enumValues={enumValues}
-                            size={small ? "small" : "medium"}/>
+                            size={small ? "small" : "medium"} />
                     </SelectItem>
                 ))}
             </Select>

package/src/components/VirtualTable/types.tsx

@@ -40,4 +40,6 @@ export type VirtualTableContextProps<T extends any> = {
     rowClassName?: (rowData: T) => string | undefined;
     endAdornment?: React.ReactNode;
     AddColumnComponent?: React.ComponentType;
+    onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
+    draggingColumnId?: string | null;
 };