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

package/src/components/HomePage/HomePageDnD.tsx

@@ -29,7 +29,7 @@ import { CSS } from "@dnd-kit/utilities";
 
 import { NavigationCardBinding } from "./NavigationCardBinding";
 import { NavigationEntry } from "../../types";
-import { cls } from "@firecms/ui";
+import { cls, defaultBorderMixin } from "@firecms/ui";
 
 const animateLayoutChanges: AnimateLayoutChanges = (args) =>
     defaultAnimateLayoutChanges({
@@ -65,9 +65,9 @@ const cloneItemsForDnd = (items: { name: string; entries: NavigationEntry[] }[])
 
 /* ─────────────────────────────────────────────────────────── */
 export function SortableNavigationCard({
-                                           entry,
-                                           onClick
-                                       }: {
+    entry,
+    onClick
+}: {
     entry: NavigationEntry;
     onClick?: () => void;
 }) {
@@ -92,17 +92,17 @@ export function SortableNavigationCard({
 
     return (
         <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
-            <NavigationCardBinding {...entry} onClick={onClick}/>
+            <NavigationCardBinding {...entry} onClick={onClick} />
         </div>
     );
 }
 
 export function NavigationGroupDroppable({
-                                             id,
-                                             itemIds,
-                                             children,
-                                             isPotentialCardDropTarget = false
-                                         }: {
+    id,
+    itemIds,
+    children,
+    isPotentialCardDropTarget = false
+}: {
     id: UniqueIdentifier;
     itemIds: UniqueIdentifier[];
     children: React.ReactNode;
@@ -128,10 +128,10 @@ export function NavigationGroupDroppable({
 }
 
 export function SortableNavigationGroup({
-                                            groupName,
-                                            children,
-                                            disabled
-                                        }: {
+    groupName,
+    children,
+    disabled
+}: {
     groupName: string;
     children: React.ReactNode;
     disabled?: boolean;
@@ -164,21 +164,21 @@ export function SortableNavigationGroup({
 }
 
 export function useHomePageDnd({
-                                   items,
-                                   setItems,
-                                   disabled,
-                                   onCardMovedBetweenGroups,
-                                   onGroupMoved,
-                                   onNewGroupDrop,
-                                   onPersist
-                               }: {
+    items,
+    setItems,
+    disabled,
+    onCardMovedBetweenGroups,
+    onGroupMoved,
+    onNewGroupDrop,
+    onPersist
+}: {
     items: { name: string; entries: NavigationEntry[] }[];
     setItems: (
         newItemsOrUpdater:
             | { name: string; entries: NavigationEntry[] }[]
             | ((
-            currentItems: { name: string; entries: NavigationEntry[] }[]
-        ) => { name: string; entries: NavigationEntry[] }[])
+                currentItems: { name: string; entries: NavigationEntry[] }[]
+            ) => { name: string; entries: NavigationEntry[] }[])
     ) => void;
     disabled: boolean;
     onCardMovedBetweenGroups?: (card: NavigationEntry) => void;
@@ -344,9 +344,9 @@ export function useHomePageDnd({
     };
 
     const handleDragOver = ({
-                                active,
-                                over
-                            }: { active: Active; over: any }) => {
+        active,
+        over
+    }: { active: Active; over: any }) => {
         if (disabled || !over) return;
 
         const activeIdNow = active.id;
@@ -395,9 +395,9 @@ export function useHomePageDnd({
     };
 
     const handleDragEnd = ({
-                               active,
-                               over
-                           }: { active: Active; over: any }) => {
+        active,
+        over
+    }: { active: Active; over: any }) => {
         if (disabled || !over) {
             resetDragState();
             return;
@@ -505,10 +505,10 @@ export function useHomePageDnd({
                         }
                     }
                 } else if (overCont && activeCont !== overCont) {
-                    // Card moved between different groups - use CLEAN pre-drag state
+                    // Card moved between different groups - use CLEAN pre-drag state for the MOVE
+                    // but use current dndItems for the POSITION
                     const finalState = cloneItemsForDnd(sourceState);
 
-                    // Find target container from clean state too
                     const finalOverId = lastOverId.current || overIdNow;
                     const cleanOverCont = findContainerInState(finalOverId as string, sourceState) || overCont;
 
@@ -524,17 +524,32 @@ export function useHomePageDnd({
                             // Remove from source
                             const [moved] = src.entries.splice(idxInSrc, 1);
 
-                            // Calculate insertion position in target
+                            // Calculate insertion position using CURRENT dndItems (visual state after handleDragOver)
+                            // because that's where the user visually dropped it
+                            const currentTgt = dndItems.find((g) => g.name === cleanOverCont);
                             const overIsContainer = finalOverId === cleanOverCont;
+
                             if (overIsContainer) {
                                 tgt.entries.push(moved);
-                            } else {
-                                const overIdx = tgt.entries.findIndex((e) => e.url === finalOverId);
-                                if (overIdx !== -1) {
-                                    tgt.entries.splice(overIdx, 0, moved);
+                            } else if (currentTgt) {
+                                // Find position in current visual state
+                                const currentOverIdx = currentTgt.entries.findIndex((e) => e.url === finalOverId);
+                                if (currentOverIdx !== -1) {
+                                    // Find the card at that position in currentTgt, get its URL
+                                    // Then find that same card in tgt (pre-drag state) and insert before it
+                                    const cardAtPosition = currentTgt.entries[currentOverIdx];
+                                    const tgtOverIdx = tgt.entries.findIndex((e) => e.url === cardAtPosition.url);
+                                    if (tgtOverIdx !== -1) {
+                                        tgt.entries.splice(tgtOverIdx, 0, moved);
+                                    } else {
+                                        // Card might have been the dragged one in current state, just push
+                                        tgt.entries.push(moved);
+                                    }
                                 } else {
                                     tgt.entries.push(moved);
                                 }
+                            } else {
+                                tgt.entries.push(moved);
                             }
 
                             // Remove empty source group if needed
@@ -648,9 +663,9 @@ export function useHomePageDnd({
 }
 
 export function NewGroupDropZone({
-                                     disabled,
-                                     setIsHovering
-                                 }: {
+    disabled,
+    setIsHovering
+}: {
     disabled: boolean;
     setIsHovering: (v: boolean) => void;
 }) {
@@ -690,7 +705,7 @@ export function NewGroupDropZone({
                 "fixed right-8 top-1/2 -translate-y-1/2 w-[200px] h-[120px] border border-dashed rounded-lg flex items-center justify-center transition-all",
                 isOver
                     ? "bg-surface-accent-100 dark:bg-surface-accent-800 border-surface-300 dark:border-surface-600"
-                    : "bg-surface-50 dark:bg-surface-900 border-surface-200 dark:border-surface-700"
+                    : "bg-surface-50 dark:bg-surface-900 " + defaultBorderMixin
             )}>
             <div className="text-center p-4">
                 <span className="block font-medium text-sm">

package/src/components/HomePage/NavigationCard.tsx

@@ -12,18 +12,19 @@ export type NavigationCardProps = {
 
 // Wrap the component with React.memo
 export const NavigationCard = React.memo(function NavigationCard({
-                                   name,
-                                   description,
-                                   icon,
-                                   actions,
-                                   onClick,
-                                   shrink
-                               }: NavigationCardProps) {
+    name,
+    description,
+    icon,
+    actions,
+    onClick,
+    shrink
+}: NavigationCardProps) {
 
     return (
         <Card
             className={cls(
-                "h-full p-4 cursor-pointer min-h-[230px] transition-all duration-200 ease-in-out",
+                "h-full px-4 py-3 cursor-pointer min-h-[160px] transition-all duration-200 ease-in-out",
+                "hover:-translate-y-0.5 hover:shadow-md hover:shadow-primary/5",
                 shrink && "w-full max-w-full min-h-0 scale-75"
             )}
             onClick={() => {
@@ -36,12 +37,12 @@ export const NavigationCard = React.memo(function NavigationCard({
                     className="flex-grow w-full">
 
                     <div
-                        className="h-10 flex items-center w-full justify-between text-surface-300 dark:text-surface-600">
+                        className="h-8 flex items-center w-full justify-between text-surface-300 dark:text-surface-600">
 
                         {icon}
 
                         <div
-                            className="flex items-center gap-1"
+                            className="flex items-center gap-0.5"
                             onClick={(event: React.MouseEvent) => {
                                 event.preventDefault();
                                 event.stopPropagation();
@@ -53,22 +54,23 @@ export const NavigationCard = React.memo(function NavigationCard({
 
                     </div>
 
-                    <Typography gutterBottom variant="h5"
-                                component="h2">
+                    <Typography gutterBottom variant="subtitle1"
+                        className="font-medium mt-1"
+                        component="h2">
                         {name}
                     </Typography>
 
-                    {description && <Typography variant="body2"
-                                                color="secondary"
-                                                component="div">
-                        <Markdown source={description} size={"small"}/>
+                    {description && <Typography variant="caption"
+                        color="secondary"
+                        component="div">
+                        <Markdown source={description} size={"small"} />
                     </Typography>}
                 </div>
 
                 <div style={{ alignSelf: "flex-end" }}>
 
-                    <div className={"p-4"}>
-                        <ArrowForwardIcon className="text-primary"/>
+                    <div className={"p-2"}>
+                        <ArrowForwardIcon className="text-primary" size={"small"} />
                     </div>
                 </div>
 

package/src/components/HomePage/NavigationGroup.tsx

@@ -2,16 +2,16 @@ import React, { PropsWithChildren, useState } from "react";
 import { cls, EditIcon, IconButton, Typography, ExpandablePanel } from "@firecms/ui";
 
 export function NavigationGroup({
-                                    children,
-                                    group,
-                                    minimised,
-                                    isPreview,
-                                    isPotentialCardDropTarget,
-                                    onEditGroup,
-                                    dndDisabled,
-                                    collapsed,
-                                    onToggleCollapsed
-                                }: PropsWithChildren<{
+    children,
+    group,
+    minimised,
+    isPreview,
+    isPotentialCardDropTarget,
+    onEditGroup,
+    dndDisabled,
+    collapsed,
+    onToggleCollapsed
+}: PropsWithChildren<{
     group: string | undefined,
     minimised?: boolean,
     isPreview?: boolean,
@@ -52,7 +52,7 @@ export function NavigationGroup({
                     }}
                     className={cls("ml-2 ", isHovered ? "opacity-100" : "opacity-0", "transition-opacity duration-100")}
                 >
-                    <EditIcon size="smallest"/>
+                    <EditIcon size="smallest" />
                 </IconButton>
             )}
         </div>
@@ -70,7 +70,7 @@ export function NavigationGroup({
                     <div
                         className={cls(
                             "flex items-center justify-between w-full",
-                          "p-4 py-2"
+                            "p-4 py-2"
                         )}
                         onMouseEnter={() => setIsHovered(true)}
                         onMouseLeave={() => setIsHovered(false)}
@@ -94,9 +94,10 @@ export function NavigationGroup({
                     className={cls("mt-6")}
                     titleClassName={cls(
                         "min-h-0 p-0 border-none",
-                        "rounded-t flex items-center justify-between w-full",
+                        "rounded flex items-center justify-between w-full",
                         "hover:bg-transparent",
-                        "cursor-pointer select-none"
+                        "cursor-pointer select-none",
+                        collapsed && "bg-surface-100 dark:bg-surface-800/50"
                     )}
                     innerClassName={cls("mt-4", !minimised ? "pt-0" : "")}
                     title={
@@ -111,7 +112,7 @@ export function NavigationGroup({
                 >
                     {minimised ? (
                         <div className={cls("mt-4 p-8 bg-surface-accent-200 dark:bg-surface-accent-800 rounded-lg")}
-                             style={{ minHeight: "50px" }}>
+                            style={{ minHeight: "50px" }}>
                         </div>
                     ) : (
                         <div className={cls("mt-4", !minimised ? "pt-0" : "")}>
@@ -138,7 +139,7 @@ export function NavigationGroup({
                     {!collapsed && (
                         minimised ? (
                             <div className={cls("mt-4 p-8 bg-surface-accent-200 dark:bg-surface-accent-800 rounded-lg")}
-                                 style={{ minHeight: "50px" }}>
+                                style={{ minHeight: "50px" }}>
                             </div>
                         ) : (
                             <div className={cls("mt-4", !minimised ? "pt-0" : "")}>

package/src/components/HomePage/RenameGroupDialog.tsx

@@ -108,12 +108,10 @@ export function RenameGroupDialog({
             </DialogContent>
             <DialogActions>
                 <Button onClick={onClose}
-                        color={"primary"}
                         variant="text">
                     Cancel
                 </Button>
                 <Button onClick={handleSave}
-                        color={"primary"}
                         disabled={!!error || !name.trim()}>
                     Save
                 </Button>

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -9,10 +9,10 @@ export type SmallNavigationCardProps = {
 };
 
 export function SmallNavigationCard({
-                                 name,
-                                 url,
-                                 icon,
-                             }: SmallNavigationCardProps) {
+    name,
+    url,
+    icon,
+}: SmallNavigationCardProps) {
 
     return (
         <>
@@ -28,17 +28,18 @@ export function SmallNavigationCard({
                 <div className="flex flex-row items-center flex-grow gap-2 ">
                     {icon}
 
-                    <Typography gutterBottom variant="h5"
-                                component="h2"
-                                className="mb-0 ml-4">
+                    <Typography gutterBottom variant="subtitle1"
+                        component="h2"
+                        className="mb-0 ml-3 font-medium">
                         {name}
                     </Typography>
                 </div>
 
-                <div className={"p-4"}>
-                    <ArrowForwardIcon color="primary"/>
+                <div className={"p-2"}>
+                    <ArrowForwardIcon color="primary" size={"small"} />
                 </div>
             </Link>
 
         </>);
 }
+

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -326,7 +326,6 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                     </Typography>}
                 <Button
                     onClick={onDone}
-                    color="primary"
                     variant="filled">
                     Done
                 </Button>
@@ -363,24 +362,18 @@ function ReferenceDialogActions({
         onClick && (largeLayout
             ? <Button
                 onClick={onClick}
-                startIcon={<AddIcon/>}
-                variant="outlined"
-                color="primary">
+                startIcon={<AddIcon/>}>
                 Add {collection.singularName ?? collection.name}
             </Button>
             : <Button
-                onClick={onClick}
-                variant="outlined"
-                color="primary"
-            >
+                onClick={onClick}>
                 <AddIcon/>
             </Button>);
 
     return (
         <>
             <Button onClick={onClear}
-                    variant={"text"}
-                    color="primary">
+                    variant={"text"}>
                 Clear
             </Button>
             {addButton}

package/src/components/ReferenceWidget.tsx

@@ -136,16 +136,14 @@ export function ReferenceWidget<M extends Record<string, any>>({
         "min-w-80 flex flex-col gap-4",
         "relative transition-colors duration-200 ease-in rounded font-medium",
         disabled ? "bg-opacity-50" : "hover:bg-opacity-75",
-        "text-opacity-50 dark:text-white dark:text-opacity-50",
+        "text-opacity-50 text-text-primary/50 dark:text-white dark:text-opacity-50 dark:text-white/50",
         className
     )}
     >
 
         {child}
         {!value && <div className="justify-center text-left">
-            <Button variant="outlined"
-                    color="primary"
-                    disabled={disabled}
+            <Button disabled={disabled}
                     onClick={onEntryClick}>
                 Edit {name}
             </Button>

package/src/components/SelectableTable/SelectableTable.tsx

@@ -93,6 +93,11 @@ export type SelectableTableProps<M extends Record<string, any>> = {
     endAdornment?: React.ReactNode;
 
     AddColumnComponent?: React.ComponentType;
+
+    /**
+     * Callback when columns are reordered via drag-and-drop
+     */
+    onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
 }
 
 /**
@@ -120,41 +125,42 @@ export type SelectableTableProps<M extends Record<string, any>> = {
  * @group Components
  */
 export const SelectableTable = function SelectableTable<M extends Record<string, any>>
-({
-     onValueChange,
-     cellRenderer,
-     onEntityClick,
-     onColumnResize,
-     hoverRow = true,
-     size = "m",
-     inlineEditing = false,
-     tableController:
-         {
-             data,
-             dataLoading,
-             noMoreToLoad,
-             dataLoadingError,
-             filterValues,
-             setFilterValues,
-             sortBy,
-             setSortBy,
-             itemCount,
-             setItemCount,
-             pageSize = 50,
-             paginationEnabled,
-             checkFilterCombination,
-             setPopupCell
-         },
-     filterable = true,
-     onScroll,
-     initialScroll,
-     emptyComponent,
-     columns,
-     forceFilter,
-     highlightedRow,
-     endAdornment,
-     AddColumnComponent
- }: SelectableTableProps<M>) {
+    ({
+        onValueChange,
+        cellRenderer,
+        onEntityClick,
+        onColumnResize,
+        hoverRow = true,
+        size = "m",
+        inlineEditing = false,
+        tableController:
+        {
+            data,
+            dataLoading,
+            noMoreToLoad,
+            dataLoadingError,
+            filterValues,
+            setFilterValues,
+            sortBy,
+            setSortBy,
+            itemCount,
+            setItemCount,
+            pageSize = 50,
+            paginationEnabled,
+            checkFilterCombination,
+            setPopupCell
+        },
+        filterable = true,
+        onScroll,
+        initialScroll,
+        emptyComponent,
+        columns,
+        forceFilter,
+        highlightedRow,
+        endAdornment,
+        AddColumnComponent,
+     onColumnsOrderChange
+    }: SelectableTableProps<M>) {
 
     const ref = useRef<HTMLDivElement>(null);
 
@@ -224,7 +230,7 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
         <SelectableTableContext.Provider
             value={contextValue}>
             <div className="h-full w-full flex flex-col bg-white dark:bg-surface-950"
-                 ref={ref}>
+                ref={ref}>
 
                 <VirtualTable
                     data={data}
@@ -247,12 +253,13 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
                     checkFilterCombination={checkFilterCombination}
                     createFilterField={filterable ? createFilterField : undefined}
                     rowClassName={useCallback((entity: Entity<M>) => {
-                        return highlightedRow?.(entity) ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "";
+                        return highlightedRow?.(entity) ? "bg-surface-100 bg-opacity-75 bg-surface-100/75 dark:bg-surface-800 dark:bg-opacity-75 dark:bg-surface-800/75" : "";
                     }, [highlightedRow])}
                     className="flex-grow"
                     emptyComponent={emptyComponent}
                     endAdornment={endAdornment}
                     AddColumnComponent={AddColumnComponent}
+                    onColumnsOrderChange={onColumnsOrderChange}
                 />
 
             </div>
@@ -262,13 +269,13 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
 };
 
 function createFilterField({
-                               id,
-                               filterValue,
-                               setFilterValue,
-                               column,
-                               hidden,
-                               setHidden
-                           }: FilterFormFieldProps<{
+    id,
+    filterValue,
+    setFilterValue,
+    column,
+    hidden,
+    setHidden
+}: FilterFormFieldProps<{
     resolvedProperty: ResolvedProperty,
     disabled: boolean,
 }>): React.ReactNode {
@@ -286,40 +293,41 @@ function createFilterField({
     }
     if (baseProperty.dataType === "reference") {
         return <ReferenceFilterField value={filterValue}
-                                     setValue={setFilterValue}
-                                     name={id as string}
-                                     isArray={isArray}
-                                     path={baseProperty.path}
-                                     title={resolvedProperty?.name}
-                                     includeId={baseProperty.includeId}
-                                     previewProperties={baseProperty?.previewProperties}
-                                     hidden={hidden}
-                                     setHidden={setHidden}/>;
+            setValue={setFilterValue}
+            name={id as string}
+            isArray={isArray}
+            path={baseProperty.path}
+            title={resolvedProperty?.name}
+            includeId={baseProperty.includeId}
+            previewProperties={baseProperty?.previewProperties}
+            hidden={hidden}
+            setHidden={setHidden} />;
     } else if (baseProperty.dataType === "number" || baseProperty.dataType === "string") {
         const name = baseProperty.name;
         const enumValues = baseProperty.enumValues ? enumToObjectEntries(baseProperty.enumValues) : undefined;
         return <StringNumberFilterField value={filterValue}
-                                        setValue={setFilterValue}
-                                        name={id as string}
-                                        dataType={baseProperty.dataType}
-                                        isArray={isArray}
-                                        enumValues={enumValues}
-                                        title={name}/>;
+            setValue={setFilterValue}
+            name={id as string}
+            dataType={baseProperty.dataType}
+            isArray={isArray}
+            enumValues={enumValues}
+            title={name} />;
     } else if (baseProperty.dataType === "boolean") {
         const name = baseProperty.name;
         return <BooleanFilterField value={filterValue}
-                                   setValue={setFilterValue}
-                                   name={id as string}
-                                   title={name}/>;
+            setValue={setFilterValue}
+            name={id as string}
+            title={name} />;
 
     } else if (baseProperty.dataType === "date") {
         const title = baseProperty.name;
         return <DateTimeFilterField value={filterValue}
-                                    setValue={setFilterValue}
-                                    name={id as string}
-                                    mode={baseProperty.mode}
-                                    isArray={isArray}
-                                    title={title}/>;
+            setValue={setFilterValue}
+            name={id as string}
+            mode={baseProperty.mode}
+            isArray={isArray}
+            timezone={baseProperty.timezone}
+            title={title} />;
     }
 
     return (