@firecms/core 3.0.0-canary.120 → 3.0.0-canary.121

package/dist/types/storage.d.ts

@@ -87,4 +87,79 @@ export interface StorageSource {
      * @param bucket
      */
     getFile: (path: string, bucket?: string) => Promise<File | null>;
+    /**
+     * Delete a file.
+     * @param path
+     * @param bucket
+     */
+    deleteFile: (path: string, bucket?: string) => Promise<void>;
+    /**
+     * List the contents of a path.
+     * @param path
+     * @param options
+     */
+    list: (path: string, options?: {
+        bucket?: string;
+        maxResults?: number;
+        pageToken?: string;
+    }) => Promise<StorageListResult>;
+}
+/**
+ * Result returned by list().
+ * @public
+ */
+export declare interface StorageListResult {
+    /**
+     * References to prefixes (sub-folders). You can call list() on them to
+     * get its contents.
+     *
+     * Folders are implicit based on '/' in the object paths.
+     * For example, if a bucket has two objects '/a/b/1' and '/a/b/2', list('/a')
+     * will return '/a/b' as a prefix.
+     */
+    prefixes: StorageReference[];
+    /**
+     * Objects in this directory.
+     * You can call getMetadata() and getDownloadUrl() on them.
+     */
+    items: StorageReference[];
+    /**
+     * If set, there might be more results for this list. Use this token to resume the list.
+     */
+    nextPageToken?: string;
+}
+/**
+ * Represents a reference to a Google Cloud Storage object. Developers can
+ * upload, download, and delete objects, as well as get/set object metadata.
+ * @public
+ */
+export declare interface StorageReference {
+    /**
+     * Returns a gs:// URL for this object in the form
+     *   `gs://<bucket>/<path>/<to>/<object>`
+     * @returns The gs:// URL.
+     */
+    toString(): string;
+    /**
+     * A reference to the root of this object's bucket.
+     */
+    root: StorageReference;
+    /**
+     * The name of the bucket containing this reference's object.
+     */
+    bucket: string;
+    /**
+     * The full path of this object.
+     */
+    fullPath: string;
+    /**
+     * The short name of this object, which is the last component of the full path.
+     * For example, if fullPath is 'full/path/image.png', name is 'image.png'.
+     */
+    name: string;
+    /**
+     * A reference pointing to the parent location of this reference, or null if
+     * this reference is the root.
+     */
+    parent: StorageReference | null;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-canary.120",
+    "version": "3.0.0-canary.121",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -46,9 +46,9 @@
         "./package.json": "./package.json"
     },
     "dependencies": {
-        "@firecms/editor": "^3.0.0-canary.120",
-        "@firecms/formex": "^3.0.0-canary.120",
-        "@firecms/ui": "^3.0.0-canary.120",
+        "@firecms/editor": "^3.0.0-canary.121",
+        "@firecms/formex": "^3.0.0-canary.121",
+        "@firecms/ui": "^3.0.0-canary.121",
         "@hello-pangea/dnd": "^16.6.0",
         "@radix-ui/react-portal": "^1.1.1",
         "clsx": "^2.1.1",
@@ -100,7 +100,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "aa817730cb582b5724774a50ac8a512bf0643ef3",
+    "gitHead": "b24af22a548699c954b226b60e55001473654948",
     "publishConfig": {
         "access": "public"
     },

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

@@ -45,22 +45,21 @@ const TableCellInner = ({
                             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
-            }}
+        <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
+             }}
         >
             {children}
         </div>
@@ -156,8 +155,9 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
         }, [ref, onSelect, selected, disabled]);
 
         const onFocus = useCallback((event: React.SyntheticEvent<HTMLDivElement>) => {
-            onSelectCallback();
             event.stopPropagation();
+            event.preventDefault();
+            onSelectCallback();
         }, [onSelectCallback]);
 
         const isOverflowing = useMemo(() => {
@@ -203,11 +203,9 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                 }}
                 tabIndex={selected || disabled ? undefined : 0}
                 onFocus={onFocus}
-                // onClick={onClick}
                 onMouseEnter={setOnHoverTrue}
                 onMouseMove={setOnHoverTrue}
                 onMouseLeave={setOnHoverFalse}
-                // contain={scrollable ? "content" : "size"}
             >
 
                 <ErrorBoundary>
@@ -237,7 +235,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
 
                 {disabled && onHover && disabledTooltip &&
                     <div className="absolute top-1 right-1 text-xs">
-                        <Tooltip title={disabledTooltip} >
+                        <Tooltip title={disabledTooltip}>
                             <RemoveCircleIcon size={"smallest"} color={"disabled"} className={"text-gray-500"}/>
                         </Tooltip>
                     </div>}

package/src/components/SelectableTable/filters/StringNumberFilterField.tsx

@@ -1,7 +1,17 @@
 import React, { useState } from "react";
 import { EnumValuesChip } from "../../../preview";
 import { VirtualTableWhereFilterOp } from "../../VirtualTable";
-import { Checkbox, ClearIcon, IconButton, Label, Select, SelectItem, TextField } from "@firecms/ui";
+import {
+    Checkbox,
+    ClearIcon,
+    IconButton,
+    Label,
+    MultiSelect,
+    MultiSelectItem,
+    Select,
+    SelectItem,
+    TextField
+} from "@firecms/ui";
 import { EnumValueConfig } from "../../../types";
 
 interface StringNumberFilterFieldProps {
@@ -82,6 +92,8 @@ export function StringNumberFilterField({
     }
 
     const multiple = multipleSelectOperations.includes(operation);
+
+    console.log("internalValue", { internalValue });
     return (
 
         <div className="flex w-[440px]">
@@ -117,17 +129,14 @@ export function StringNumberFilterField({
                     </IconButton>}
                 />}
 
-                {enumValues &&
+                {enumValues && !multiple &&
                     <Select
                         position={"item-aligned"}
-                        value={internalValue !== undefined
-                            ? (Array.isArray(internalValue) ? internalValue.map(e => String(e)) : String(internalValue))
-                            : isArray ? [] : ""}
+                        value={typeof internalValue === "string" ? internalValue : ""}
                         onValueChange={(value) => {
                             if (value !== "")
                                 updateFilter(operation, dataType === "number" ? parseInt(value as string) : value as string)
                         }}
-                        multiple={multiple}
                         endAdornment={internalValue && <IconButton
                             className="absolute right-2 top-3"
                             onClick={(e) => updateFilter(operation, undefined)}>
@@ -136,6 +145,8 @@ export function StringNumberFilterField({
                         renderValue={(enumKey) => {
                             if (enumKey === null)
                                 return "Filter for null values";
+                            if (enumKey === undefined)
+                                return null;
 
                             return <EnumValuesChip
                                 key={`select_value_${name}_${enumKey}`}
@@ -144,7 +155,7 @@ export function StringNumberFilterField({
                                 size={"small"}/>;
                         }}>
                         {enumValues.map((enumConfig) => (
-                            <SelectItem key={`select_value_${name}_${enumConfig.id}`}
+                            <SelectItem key={`select_item_${name}_${enumConfig.id}`}
                                         value={String(enumConfig.id)}>
                                 <EnumValuesChip
                                     enumKey={String(enumConfig.id)}
@@ -155,6 +166,43 @@ export function StringNumberFilterField({
                     </Select>
                 }
 
+                {enumValues && multiple &&
+                    <MultiSelect
+                        position={"item-aligned"}
+                        value={Array.isArray(internalValue) ? internalValue.map(e => String(e)) : []}
+                        onValueChange={(value) => {
+                            updateFilter(operation, dataType === "number" ? value.map(v => parseInt(v)) : value)
+                        }}
+                        multiple={multiple}
+                        endAdornment={internalValue && <IconButton
+                            className="absolute right-2 top-3"
+                            onClick={(e) => updateFilter(operation, undefined)}>
+                            <ClearIcon/>
+                        </IconButton>}
+                        // renderValues={(enumKeys) => {
+                        //     console.log("renderValues", enumKeys);
+                        //     if (enumKeys === null)
+                        //         return "Filter for null values";
+                        //
+                        //     return enumKeys.map(key => <EnumValuesChip
+                        //         key={`select_value_${name}_${enumKeys}`}
+                        //         enumKey={key}
+                        //         enumValues={enumValues}
+                        //         size={"small"}/>);
+                        // }}
+                    >
+                        {enumValues.map((enumConfig) => (
+                            <MultiSelectItem key={`select_value_${name}_${enumConfig.id}`}
+                                             value={String(enumConfig.id)}>
+                                <EnumValuesChip
+                                    enumKey={String(enumConfig.id)}
+                                    enumValues={enumValues}
+                                    size={"small"}/>
+                            </MultiSelectItem>
+                        ))}
+                    </MultiSelect>
+                }
+
                 {!isArray && <Label
                     className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
                     htmlFor="null-filter"

package/src/components/VirtualTable/VirtualTableCell.tsx

@@ -30,14 +30,6 @@ export const VirtualTableCell = React.memo<VirtualTableCellProps<any>>(
                 width: props.column.width
             } as CellRendererParams<T>
         );
-        // return props.rowData && <props.cellRenderer
-        //     rowData={props.rowData}
-        //     rowIndex={props.rowIndex}
-        //     isScrolling={false}
-        //     column={props.column}
-        //     columns={props.columns}
-        //     columnIndex={props.columnIndex}
-        //     width={props.column.width}/>
     },
     (a, b) => {
         return equal(a.rowData, b.rowData) &&

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

@@ -1,5 +1,5 @@
 import { EnumValueConfig } from "../../../types";
-import { ArrayEnumPreview, EnumValuesChip } from "../../../preview";
+import { EnumValuesChip } from "../../../preview";
 import React, { useCallback, useEffect } from "react";
 import { MultiSelect, MultiSelectItem, Select, SelectItem } from "@firecms/ui";
 
@@ -18,9 +18,7 @@ export function VirtualTableSelect(props: {
 }) {
 
     const {
-        name,
         enumValues,
-        error,
         internalValue,
         disabled,
         small,
@@ -41,6 +39,7 @@ export function VirtualTableSelect(props: {
     }, [focused, ref]);
 
     const onChange = useCallback((updatedValue: string | string[]) => {
+        console.trace("onChange");
         if (valueType === "number") {
             if (multiple) {
                 const newValue = (updatedValue as string[]).map((v) => parseFloat(v));
@@ -58,35 +57,27 @@ export function VirtualTableSelect(props: {
         }
     }, [multiple, updateValue, valueType]);
 
-    const renderValue = (enumKey: string | number, index: number) => {
-        if (multiple && Array.isArray(enumKey)) {
-            return <ArrayEnumPreview
-                key={`${enumKey}-${index}`}
-                value={enumKey}
-                name={name}
-                enumValues={enumValues}
-                size={small ? "small" : "medium"}/>;
-        } else {
-            return <EnumValuesChip
-                key={`${enumKey}-${index}`}
-                enumKey={enumKey}
-                enumValues={enumValues}
-                size={small ? "small" : "medium"}/>;
-        }
+    const renderValue = (enumKey?: string | number) => {
+        return <EnumValuesChip
+            key={`${enumKey}`}
+            enumKey={String(enumKey)}
+            enumValues={enumValues}
+            size={small ? "small" : "medium"}/>;
     };
+
     return (
         multiple
             ? <MultiSelect
                 inputRef={ref}
-                containerClassName="w-full h-full"
                 className="w-full h-full p-0 bg-transparent"
                 position={"item-aligned"}
                 disabled={disabled}
+                includeClear={false}
+                useChips={false}
                 value={validValue
                     ? ((internalValue as any[]).map(v => v.toString()))
                     : ([])}
-                onMultiValueChange={onChange}
-                renderValue={renderValue}>
+                onValueChange={onChange}>
                 {enumValues?.map((enumConfig) => (
                     <MultiSelectItem
                         key={enumConfig.id}
@@ -103,14 +94,11 @@ export function VirtualTableSelect(props: {
                 className="w-full h-full p-0 bg-transparent"
                 position={"item-aligned"}
                 disabled={disabled}
-                multiple={multiple}
                 padding={false}
-                includeFocusOutline={false}
                 value={validValue
-                    ? (multiple ? (internalValue as any[]).map(v => v.toString()) : internalValue?.toString())
-                    : (multiple ? [] : "")}
+                    ? internalValue?.toString()
+                    : ""}
                 onValueChange={onChange}
-                onMultiValueChange={onChange}
                 renderValue={renderValue}>
                 {enumValues?.map((enumConfig) => (
                     <SelectItem

package/src/core/field_configs.tsx

@@ -9,7 +9,7 @@ import {
     KeyValueFieldBinding,
     MapFieldBinding,
     MarkdownEditorFieldBinding,
-    MultiSelectBinding,
+    MultiSelectFieldBinding,
     ReferenceFieldBinding,
     RepeatFieldBinding,
     SelectFieldBinding,
@@ -139,7 +139,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
                 dataType: "string",
                 enumValues: [],
             },
-            Field: MultiSelectBinding
+            Field: MultiSelectFieldBinding
         }
     },
     number_input: {
@@ -177,7 +177,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
                 dataType: "number",
                 enumValues: [],
             },
-            Field: MultiSelectBinding
+            Field: MultiSelectFieldBinding
         }
     },
     file_upload: {

package/src/form/field_bindings/{MultiSelectBinding.tsx → MultiSelectFieldBinding.tsx}

@@ -14,18 +14,18 @@ import { useClearRestoreValue } from "../useClearRestoreValue";
  * and tables to the specified properties.
  * @group Form fields
  */
-export function MultiSelectBinding({
-                                       propertyKey,
-                                       value,
-                                       setValue,
-                                       error,
-                                       showError,
-                                       disabled,
-                                       property,
-                                       includeDescription,
-                                       size = "medium",
-                                       autoFocus
-                                   }: FieldProps<EnumType[], any, any>) {
+export function MultiSelectFieldBinding({
+                                            propertyKey,
+                                            value,
+                                            setValue,
+                                            error,
+                                            showError,
+                                            disabled,
+                                            property,
+                                            includeDescription,
+                                            size = "medium",
+                                            autoFocus
+                                        }: FieldProps<EnumType[], any, any>) {
 
     const of: ResolvedProperty<any> | ResolvedProperty<any>[] = property.of;
     if (!of) {
@@ -80,19 +80,20 @@ export function MultiSelectBinding({
     }, [enumValues, setValue, value]);
 
     return (
-        <div className="mt-0.5 ml-0.5  mt-2">
+        <>
             <MultiSelect
+                className={"w-full mt-2"}
                 size={size === "medium" ? "medium" : "small"}
                 value={validValue ? value.map((v) => v.toString()) : []}
                 disabled={disabled}
+                modalPopover={true}
                 label={<LabelWithIconAndTooltip
                     propertyKey={propertyKey}
                     icon={getIconForProperty(property, "small")}
                     required={property.validation?.required}
                     title={property.name}
                     className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
-                renderValue={useCallback((v: string) => renderValue(v, false), [renderValue])}
-                onMultiValueChange={(updatedValue: string[]) => {
+                onValueChange={(updatedValue: string[]) => {
                     let newValue: EnumType[] | null;
                     if (of && (of as ResolvedProperty)?.dataType === "number") {
                         newValue = updatedValue ? (updatedValue as string[]).map((e) => parseFloat(e)) : [];
@@ -113,6 +114,6 @@ export function MultiSelectBinding({
                              disabled={disabled}
                              property={property}/>
 
-        </div>
+        </>
     );
 }

package/src/form/index.tsx

@@ -1,5 +1,5 @@
 import { SelectFieldBinding } from "./field_bindings/SelectFieldBinding";
-import { MultiSelectBinding } from "./field_bindings/MultiSelectBinding";
+import { MultiSelectFieldBinding } from "./field_bindings/MultiSelectFieldBinding";
 import { ArrayOfReferencesFieldBinding } from "./field_bindings/ArrayOfReferencesFieldBinding";
 import { StorageUploadFieldBinding } from "./field_bindings/StorageUploadFieldBinding";
 import { TextFieldBinding } from "./field_bindings/TextFieldBinding";
@@ -17,7 +17,7 @@ import { ArrayCustomShapedFieldBinding } from "./field_bindings/ArrayCustomShape
 export {
     ArrayCustomShapedFieldBinding,
     RepeatFieldBinding,
-    MultiSelectBinding,
+    MultiSelectFieldBinding,
     ArrayOfReferencesFieldBinding,
     BlockFieldBinding,
     DateTimeFieldBinding,

package/src/internal/useBuildDataSource.ts

@@ -204,15 +204,6 @@ export function useBuildDataSource({
             const collection = collectionProp ?? navigationController.getCollection(path);
             const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
 
-            console.log("useBuildDatasource save", {
-                path,
-                entityId,
-                values,
-                collectionProp,
-                collection,
-                status
-            });
-
             const resolvedCollection = collection
                 ? resolveCollection<M>({
                     collection,
@@ -267,7 +258,10 @@ export function useBuildDataSource({
             }: DeleteEntityProps<M>
         ): Promise<void> => {
             const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
-            return usedDelegate.deleteEntity({ entity, collection });
+            return usedDelegate.deleteEntity({
+                entity,
+                collection
+            });
         }, [delegate.deleteEntity]),
 
         /**

package/src/types/storage.ts

@@ -102,4 +102,86 @@ export interface StorageSource {
      * @param bucket
      */
     getFile: (path: string, bucket?: string) => Promise<File | null>;
+
+    /**
+     * Delete a file.
+     * @param path
+     * @param bucket
+     */
+    deleteFile: (path: string, bucket?: string) => Promise<void>;
+
+    /**
+     * List the contents of a path.
+     * @param path
+     * @param options
+     */
+    list: (path: string, options?: {
+        bucket?: string,
+        maxResults?: number,
+        pageToken?: string
+    }) => Promise<StorageListResult>;
+
+}
+
+/**
+ * Result returned by list().
+ * @public
+ */
+export declare interface StorageListResult {
+    /**
+     * References to prefixes (sub-folders). You can call list() on them to
+     * get its contents.
+     *
+     * Folders are implicit based on '/' in the object paths.
+     * For example, if a bucket has two objects '/a/b/1' and '/a/b/2', list('/a')
+     * will return '/a/b' as a prefix.
+     */
+    prefixes: StorageReference[];
+    /**
+     * Objects in this directory.
+     * You can call getMetadata() and getDownloadUrl() on them.
+     */
+    items: StorageReference[];
+    /**
+     * If set, there might be more results for this list. Use this token to resume the list.
+     */
+    nextPageToken?: string;
+}
+
+/**
+ * Represents a reference to a Google Cloud Storage object. Developers can
+ * upload, download, and delete objects, as well as get/set object metadata.
+ * @public
+ */
+export declare interface StorageReference {
+    /**
+     * Returns a gs:// URL for this object in the form
+     *   `gs://<bucket>/<path>/<to>/<object>`
+     * @returns The gs:// URL.
+     */
+    toString(): string;
+
+    /**
+     * A reference to the root of this object's bucket.
+     */
+    root: StorageReference;
+    /**
+     * The name of the bucket containing this reference's object.
+     */
+    bucket: string;
+    /**
+     * The full path of this object.
+     */
+    fullPath: string;
+    /**
+     * The short name of this object, which is the last component of the full path.
+     * For example, if fullPath is 'full/path/image.png', name is 'image.png'.
+     */
+    name: string;
+
+    /**
+     * A reference pointing to the parent location of this reference, or null if
+     * this reference is the root.
+     */
+    parent: StorageReference | null;
 }