@firecms/core 3.0.0-rc.3 → 3.0.0-tw4.1

package/dist/types/fields.d.ts

@@ -67,6 +67,10 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
      * Is this field part of an array
      */
     partOfArray?: boolean;
+    /**
+     * Is this field part of a block
+     */
+    partOfBlock?: boolean;
     /**
      * Display the child properties directly, without being wrapped in an
      * extendable panel. Note that this will also hide the title of this property.
@@ -178,6 +182,10 @@ export interface PropertyFieldBindingProps<T extends CMSType, M extends Record<s
      * Is this field part of an array
      */
     partOfArray?: boolean;
+    /**
+     * Is this field part of a block
+     */
+    partOfBlock?: boolean;
     /**
      * Display the child properties directly, without being wrapped in an
      * extendable panel. Note that this will also hide the title of this property.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-rc.3",
+  "version": "3.0.0-tw4.1",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,10 +53,10 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/editor": "^3.0.0-rc.3",
-    "@firecms/formex": "^3.0.0-rc.3",
-    "@firecms/ui": "^3.0.0-rc.3",
-    "@radix-ui/react-portal": "^1.1.9",
+    "@firecms/editor": "^3.0.0-tw4.1",
+    "@firecms/formex": "^3.0.0-tw4.1",
+    "@firecms/ui": "^3.0.0-tw4.1",
+    "@radix-ui/react-portal": "^1.1.10",
     "clsx": "^2.1.1",
     "compressorjs": "^1.2.1",
     "date-fns": "^3.6.0",
@@ -71,7 +71,7 @@
     "react-transition-group": "^4.4.5",
     "react-use-measure": "^2.1.7",
     "react-window": "^1.8.11",
-    "vite-plugin-static-copy": "3.1.2",
+    "vite-plugin-static-copy": "3.1.4",
     "yup": "^0.32.11"
   },
   "peerDependencies": {
@@ -81,7 +81,7 @@
     "react-router-dom": "^6.28.0"
   },
   "devDependencies": {
-    "@jest/globals": "^30.1.2",
+    "@jest/globals": "^30.2.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
@@ -93,22 +93,22 @@
     "@vitejs/plugin-react": "^4.7.0",
     "babel-plugin-react-compiler": "^19.0.0-beta-af1b7da-20250417",
     "cross-env": "^7.0.3",
-    "eslint-plugin-react-compiler": "^19.0.0-beta-af1b7da-20250417",
+    "eslint-plugin-react-compiler": "^19.1.0-rc.2",
     "jest": "^29.7.0",
     "npm-run-all": "^4.1.5",
-    "react-router": "^6.30.1",
-    "react-router-dom": "^6.30.1",
-    "ts-jest": "^29.4.3",
+    "react-router": "^6.30.2",
+    "react-router-dom": "^6.30.2",
+    "ts-jest": "^29.4.5",
     "ts-node": "^10.9.2",
     "tsd": "^0.31.2",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.6"
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4"
   },
   "files": [
     "dist",
     "src"
   ],
-  "gitHead": "213f4c106eb3e6639eb1ad23c7d94282ef54d444",
+  "gitHead": "a054392bdc44c6eae1b0265aee488d5995610f96",
   "publishConfig": {
     "access": "public"
   },

package/src/app/Scaffold.tsx

@@ -228,7 +228,7 @@ function DrawerWrapper(props: {
                    open={props.open}
                    onOpenChange={props.setDrawerOpen}
                    title={"Navigation drawer"}
-                   overlayClassName={"bg-white bg-opacity-80"}
+                   overlayClassName={"bg-white bg-opacity-80 bg-white/80"}
             >
                 {innerDrawer}
             </Sheet>

package/src/components/ArrayContainer.tsx

@@ -186,7 +186,7 @@ export function ArrayContainerItem({
         <div
             ref={nodeRef}
             style={style}
-            className={`relative ${!isDragging ? "hover\\:bg-surface-accent-50 dark\\:hover\\:bg-surface-800 dark\\:hover\\:bg-opacity-20" : ""} rounded-md opacity-100`}
+            className={`relative ${!isDragging ? "hover\\:bg-surface-accent-50 dark\\:hover\\:bg-surface-800 dark\\:hover\\:bg-opacity-20 dark\\:hover\\:bg-surface-800/20" : ""} rounded-md opacity-100`}
         >
             <div className="flex items-start">
                 <div className="flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark">

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -75,7 +75,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     return (
         <div
             className={cls(
-                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 dark:bg-opacity-90 z-10",
+                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 bg-surface-50/90 dark:bg-opacity-90 dark:bg-surface-900/90 z-10",
                 frozen ? "sticky left-0" : ""
             )}
             onClick={useCallback((event: any) => {

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

@@ -188,9 +188,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
@@ -237,7 +237,7 @@ 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>}
 

package/src/components/ReferenceWidget.tsx

@@ -136,7 +136,7 @@ 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
     )}
     >

package/src/components/SelectableTable/SelectableTable.tsx

@@ -247,7 +247,7 @@ 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}
@@ -327,15 +327,3 @@ function createFilterField({
     );
 }
 
-function filterableProperty(property: ResolvedProperty, partOfArray = false): boolean {
-    if (partOfArray) {
-        return ["string", "number", "date", "reference"].includes(property.dataType);
-    }
-    if (property.dataType === "array") {
-        if (property.of)
-            return filterableProperty(property.of, true);
-        else
-            return false;
-    }
-    return ["string", "number", "boolean", "date", "reference", "array"].includes(property.dataType);
-}

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -87,7 +87,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                 <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",
                         "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",
+                        "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"
                     )}
                     style={{

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/core/DefaultDrawer.tsx

@@ -85,7 +85,7 @@ export function DefaultDrawer({
 
                     {groupsWithoutAdmin.map((group) => (
                         <div
-                            className={"bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 my-4 rounded-lg ml-3 mr-1"}
+                            className={"bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 dark:bg-surface-800/30 bg-surface-50 dark:bg-surface-800/30  my-4 rounded-lg ml-3 mr-1"}
                             key={`drawer_group_${group}`}>
                             {buildGroupHeader(group)}
                             {Object.values(navigationEntries)

package/src/core/DrawerNavigationItem.tsx

@@ -34,13 +34,13 @@ export function DrawerNavigationItem({
                 transition: drawerOpen ? "width 150ms ease-in" : undefined
             }}
             className={({ isActive }: any) => cls("rounded-lg truncate",
-                "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white",
+                "hover:bg-surface-accent-300 hover:bg-opacity-75 hover:bg-surface-accent-300/75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 dark:hover:bg-surface-accent-800/75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white hover:bg-surface-accent-300/75 dark:hover:bg-surface-accent-800/75",
                 "flex flex-row items-center mr-8",
                 // "transition-all ease-in-out delay-100 duration-300",
                 // drawerOpen ? "w-full" : "w-18",
                 drawerOpen ? "pl-4 h-10" : "pl-4 h-9",
                 "font-semibold text-xs",
-                isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50" : ""
+                isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50 bg-surface-accent-200/60 dark:bg-surface-800/50" : ""
             )}
             to={url}
         >
@@ -49,8 +49,9 @@ export function DrawerNavigationItem({
 
             <div
                 className={cls(
+                    "text-text-primary dark:text-surface-200",
                     drawerOpen ? "opacity-100" : "opacity-0 hidden",
-                    "ml-4 font-inherit text-inherit"
+                    "ml-4 font-inherit"
                 )}>
                 {name.toUpperCase()}
             </div>

package/src/form/EntityForm.tsx

@@ -857,7 +857,7 @@ export function EntityForm<M extends Record<string, any>>({
                                 />}
 
                             {formex.dirty
-                                ? <Tooltip title={"There are local unsaved changes"}>
+                                ? <Tooltip title={"This form has been modified"}>
                                     <Chip size={"small"} className={"py-1"} colorScheme={"orangeDarker"}>
                                         <EditIcon size={"smallest"}/>
                                     </Chip>

package/src/form/PropertyFieldBinding.tsx

@@ -83,6 +83,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
      underlyingValueHasChanged,
      disabled: disabledProp,
      partOfArray,
+     partOfBlock,
      minimalistView,
      autoFocus,
      index,
@@ -93,10 +94,6 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
     const authController = useAuthController();
     const customizationController = useCustomizationController();
 
-    if(propertyKey === "created_by"){
-        console.log("Rendering field for created_by", {propertyKey, property, context});
-    }
-
     return (
         <Field
             key={propertyKey}
@@ -168,6 +165,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                     context,
                     disabled,
                     partOfArray,
+                    partOfBlock,
                     minimalistView,
                     autoFocus,
                     size,
@@ -199,6 +197,7 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
          includeDescription,
          underlyingValueHasChanged,
          partOfArray,
+         partOfBlock,
          minimalistView,
          autoFocus,
          context,
@@ -261,6 +260,7 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
         disabled: disabled ?? false,
         underlyingValueHasChanged: underlyingValueHasChanged ?? false,
         partOfArray: partOfArray ?? false,
+        partOfBlock: partOfBlock ?? false,
         minimalistView: minimalistView ?? false,
         autoFocus: autoFocus ?? false,
         customProps: customFieldProps,

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -200,6 +200,7 @@ function BlockEntry({
             context,
             autoFocus,
             partOfArray: false,
+            partOfBlock: true,
             minimalistView: true,
             onPropertyChange: storeProps,
         }

package/src/preview/components/EmptyValue.tsx

@@ -6,5 +6,5 @@ import React from "react";
 export function EmptyValue() {
 
     return <div
-        className="rounded-full bg-surface-200 bg-opacity-30 dark:bg-opacity-20 w-5 h-2 inline-block"/>;
+        className="rounded-full bg-surface-200 bg-opacity-30 bg-surface-200/30 dark:bg-opacity-20 dark:bg-surface-200/20 w-5 h-2 inline-block"/>;
 }

package/src/types/fields.tsx

@@ -81,6 +81,11 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
      */
     partOfArray?: boolean;
 
+    /**
+     * Is this field part of a block
+     */
+    partOfBlock?: boolean;
+
     /**
      * Display the child properties directly, without being wrapped in an
      * extendable panel. Note that this will also hide the title of this property.
@@ -220,6 +225,11 @@ export interface PropertyFieldBindingProps<T extends CMSType, M extends Record<s
      */
     partOfArray?: boolean;
 
+    /**
+     * Is this field part of a block
+     */
+    partOfBlock?: boolean;
+
     /**
      * Display the child properties directly, without being wrapped in an
      * extendable panel. Note that this will also hide the title of this property.