@firecms/core 3.0.0-canary.240 → 3.0.0-canary.242

package/dist/types/firecms.d.ts

@@ -113,7 +113,8 @@ export type FireCMSProps<USER extends User> = {
     userConfigPersistence?: UserConfigurationPersistence;
     /**
      * Use plugins to modify the behaviour of the CMS.
-     * Currently, in ALPHA, and likely subject to change.
+     * DEPRECATED: use the `plugins` prop in the `useBuildNavigationController` instead.
+     * This prop will work as a fallback for the `plugins` prop in the `useBuildNavigationController`.
      */
     plugins?: FireCMSPlugin<any, any, any>[];
     /**

package/dist/types/navigation.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { EntityCollection } from "./collections";
 import { EntityReference } from "./entities";
+import { FireCMSPlugin } from "./plugins";
 /**
  * Controller that includes the resolved navigation and utility methods and
  * attributes.
@@ -127,6 +128,10 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      * @param {NavigateOptions} [options] - Optional configuration settings for navigation, such as replace behavior or state data.
      */
     navigate: (to: string, options?: NavigateOptions) => void;
+    /**
+     * Plugin system allowing to extend the CMS functionality.
+     */
+    plugins?: FireCMSPlugin<any, any, any>[];
 };
 export interface NavigateOptions {
     replace?: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.240",
+  "version": "3.0.0-canary.242",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -50,9 +50,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/editor": "^3.0.0-canary.240",
-    "@firecms/formex": "^3.0.0-canary.240",
-    "@firecms/ui": "^3.0.0-canary.240",
+    "@firecms/editor": "^3.0.0-canary.242",
+    "@firecms/formex": "^3.0.0-canary.242",
+    "@firecms/ui": "^3.0.0-canary.242",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.3",
     "clsx": "^2.1.1",
@@ -105,7 +105,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "b5b46f7dfb9547324c71d839fff7d52bb3ef54ae",
+  "gitHead": "61c5737585c7126aadfb189c4f0c113943d001b0",
   "publishConfig": {
     "access": "public"
   },

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -749,6 +749,7 @@ export const EntityCollectionView = React.memo(
             equal(a.defaultSize, b.defaultSize) &&
             equal(a.initialFilter, b.initialFilter) &&
             equal(a.initialSort, b.initialSort) &&
+            equal(a.includeJsonView, b.includeJsonView) &&
             equal(a.textSearchEnabled, b.textSearchEnabled) &&
             equal(a.additionalFields, b.additionalFields) &&
             equal(a.sideDialogWidth, b.sideDialogWidth) &&

package/src/components/VirtualTable/VirtualTable.tsx

@@ -131,7 +131,8 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         // Set initial scroll position
         useEffect(() => {
             if (tableRef.current && initialScroll) {
-                tableRef.current.scrollTo(0, initialScroll);
+                const { scrollLeft } = tableRef.current;
+                tableRef.current.scrollTo(scrollLeft, initialScroll);
             }
         }, [tableRef, initialScroll]);
 

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

@@ -66,7 +66,6 @@ export function VirtualTableInput(props: {
                 width: "100%",
                 color: "unset",
                 fontWeight: "unset",
-                lineHeight: 1.7142857,
                 fontSize: "unset",
                 fontFamily: "unset",
                 background: "unset",

package/src/core/FireCMS.tsx

@@ -44,7 +44,7 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         authController,
         storageSource,
         dataSourceDelegate,
-        plugins,
+        plugins: pluginsProp,
         onAnalyticsEvent,
         propertyConfigs,
         entityViews,
@@ -53,6 +53,12 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         apiKey
     } = props;
 
+    if (pluginsProp) {
+        console.warn("The `plugins` prop is deprecated in the FireCMS component. You should pass your plugins to `useBuildNavigationController` instead.");
+    }
+
+    const plugins = navigationController.plugins ?? pluginsProp;
+
     const sideDialogsController = useBuildSideDialogsController();
     const sideEntityController = useBuildSideEntityController(navigationController, sideDialogsController, authController);
 

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -141,7 +141,7 @@ export function MarkdownEditorFieldBinding({
                 icon={getIconForProperty(property, "small")}
                 required={property.validation?.required}
                 title={property.name}
-                className={"h-6 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
             <div
                 className={cls("rounded-md", fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin)}>
                 {editor}

package/src/form/field_bindings/MultiSelectFieldBinding.tsx

@@ -84,7 +84,7 @@ export function MultiSelectFieldBinding({
             <MultiSelect
                 className={"w-full mt-2"}
                 size={size}
-                value={validValue ? value.map((v) => v.toString()) : []}
+                value={validValue ? value.map((v) => v?.toString()) : []}
                 disabled={disabled}
                 modalPopover={true}
                 label={<LabelWithIconAndTooltip
@@ -92,7 +92,7 @@ export function MultiSelectFieldBinding({
                     icon={getIconForProperty(property, "small")}
                     required={property.validation?.required}
                     title={property.name}
-                    className={"h-6 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
                 onValueChange={(updatedValue: string[]) => {
                     let newValue: EnumType[] | null;
                     if (of && (of as ResolvedProperty)?.dataType === "number") {

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -39,7 +39,7 @@ export function ReadOnlyFieldBinding({
                 icon={getIconForProperty(property, "small")}
                 required={property.validation?.required}
                 title={property.name}
-                className={"h-6 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
             }
 
             <div

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -90,7 +90,7 @@ function ReferenceFieldBindingInternal({
                 icon={getIconForProperty(property, "small")}
                 required={property.validation?.required}
                 title={property.name}
-                className={"h-6 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             {!collection && <ErrorView
                 error={"The specified collection does not exist. Check console"}/>}

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -62,13 +62,14 @@ export function SelectFieldBinding<T extends EnumType>({
                             icon={getIconForProperty(property, "small")}
                             required={property.validation?.required}
                             title={property.name}
-                            className={"h-6 text-text-secondary dark:text-text-secondary-dark ml-3.5 my-0"}
+                            className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5 my-0"}
                         />
                     </PropertyIdCopyTooltip>}
                 endAdornment={
                     property.clearable && !disabled && <IconButton
+                        size="small"
                         onClick={handleClearClick}>
-                        <CloseIcon/>
+                        <CloseIcon size={"small"}/>
                     </IconButton>
                 }
                 onValueChange={(updatedValue: string) => {

package/src/hooks/useBuildNavigationController.tsx

@@ -413,6 +413,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         getParentCollectionIds,
         convertIdsToPaths,
         navigate,
+        plugins
     };
 }
 

package/src/preview/components/ImagePreview.tsx

@@ -62,7 +62,7 @@ export function ImagePreview({
                     title="Copy url to clipboard" side={"bottom"}>
                     <IconButton
                         variant={"filled"}
-                        size={"small"}
+                        size={"smallest"}
                         onClick={(e) => {
                             e.stopPropagation();
                             e.preventDefault();
@@ -81,7 +81,7 @@ export function ImagePreview({
                         href={url}
                         rel="noopener noreferrer"
                         target="_blank"
-                        size={"small"}
+                        size={"smallest"}
                         onClick={(e: any) => e.stopPropagation()}
                     >
                         <OpenInNewIcon className={"text-surface-700 dark:text-surface-300"}

package/src/preview/property_previews/StringPropertyPreview.tsx

@@ -45,7 +45,7 @@ export function StringPropertyPreview({
         if (!value) return <></>;
         const lines = value.split("\n");
         return value && value.includes("\n")
-            ? <div className={cls("overflow-x-scroll", size === "small" ? "text-sm" : "")}>
+            ? <div className={cls("overflow-x-scroll overflow-hidden", size === "small" ? "text-sm" : "")}>
                 {lines.map((str, index) =>
                     <React.Fragment key={`string_preview_${index}`}>
                         <span>{str}</span>

package/src/types/firecms.tsx

@@ -128,7 +128,8 @@ export type FireCMSProps<USER extends User> = {
 
     /**
      * Use plugins to modify the behaviour of the CMS.
-     * Currently, in ALPHA, and likely subject to change.
+     * DEPRECATED: use the `plugins` prop in the `useBuildNavigationController` instead.
+     * This prop will work as a fallback for the `plugins` prop in the `useBuildNavigationController`.
      */
     plugins?: FireCMSPlugin<any, any, any>[];
 

package/src/types/navigation.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { EntityCollection } from "./collections";
 import { EntityReference } from "./entities";
+import { FireCMSPlugin } from "./plugins";
 
 /**
  * Controller that includes the resolved navigation and utility methods and
@@ -152,6 +153,11 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      */
     navigate: (to: string, options?: NavigateOptions) => void;
 
+    /**
+     * Plugin system allowing to extend the CMS functionality.
+     */
+    plugins?: FireCMSPlugin<any, any, any>[];
+
 }
 
 export interface NavigateOptions {