Completely replaced MultiSelect

Multiple UI fixes

examples/example_cloud/src/App.tsx

@@ -5,7 +5,7 @@ import appConfig from "./index";
 function App(): React.ReactElement {
     return <FireCMSCloudApp
         // backendApiHost={"http://127.0.0.1:5001/firecms-dev-2da42/europe-west3/api"}
-        backendApiHost={"https://api-kdoe6pj3qq-ey.a.run.app"}
+        // backendApiHost={"https://api-kdoe6pj3qq-ey.a.run.app"}
         projectId={"firecms-demo-27150"}
         appConfig={appConfig}
     />;

examples/example_cloud/src/index.css

@@ -1,3 +1,5 @@
+@import "@firecms/ui/index.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

examples/example_pro/src/FirestoreApp/ExampleCMSView.tsx

@@ -17,8 +17,8 @@ import {
     Chip,
     GitHubIcon,
     IconButton,
-    NewMultiSelect,
-    NewMultiSelectItem,
+    MultiSelect,
+    MultiSelectItem,
     Paper,
     Sheet,
     Tooltip,
@@ -137,19 +137,18 @@ export function ExampleCMSView() {
                     </div>
 
                     <div className="w-full">
-                        <NewMultiSelect
+                        <MultiSelect
                             className={"w-full"}
                             value={selectedFrameworks}
                             onValueChange={setSelectedFrameworks}
                             placeholder="Select frameworks"
-                            maxCount={3}
                         >
                             {frameworksList.map((framework) => (
-                                <NewMultiSelectItem value={framework.value}>
+                                <MultiSelectItem value={framework.value}>
                                     {framework.label}
-                                </NewMultiSelectItem>
+                                </MultiSelectItem>
                             ))}
-                        </NewMultiSelect>
+                        </MultiSelect>
                         <div className="mt-4">
                             <h2 className="text-xl font-semibold">Selected Frameworks:</h2>
                             <ul className="list-disc list-inside">

examples/example_pro/src/medmot/custom_views/InvoicesExport.tsx

@@ -5,7 +5,7 @@ import {
     Checkbox,
     CircularProgress,
     DateTimeField,
-    Label,
+    Label, MultiSelect, MultiSelectItem,
     Paper,
     RadioGroup, RadioGroupItem,
     Select,
@@ -95,7 +95,7 @@ export function InvoicesExport() {
             if (!company || !companyTokenBatches) return [];
             return await loadInvoicesForCompany(company, companyTokenBatches);
         })).then((subscriptionsWithUsers: SubscriptionWithUser[][]) => {
-            let res = subscriptionsWithUsers.flat();
+            const res = subscriptionsWithUsers.flat();
             setSubscriptions(res);
         }).finally(() => {
             setLoading(false);
@@ -122,7 +122,7 @@ export function InvoicesExport() {
     };
 
     const doDownload = () => {
-        let csv = getCSV(subscriptions, selectedSubscriptions, format, includeExcelStringFormat);
+        const csv = getCSV(subscriptions, selectedSubscriptions, format, includeExcelStringFormat);
         console.log({ csv });
         downloadBlob(csv, "invoices.csv", "text/csv;charset=utf-8");
     };
@@ -464,26 +464,26 @@ function CompaniesTokenBatchSelect({
 
     return (
         <>
-            <Select
+            <MultiSelect
                 multiple={true}
                 disabled={loading || companyTokenBatches.length === 0}
                 label="Company batch"
                 name="company_token_batch"
                 value={(selectedTokenBatches ?? []).map(tb => tb.id)}
-                onMultiValueChange={(value) => {
+                onValueChange={(value) => {
                     const tokenBatches = value.map((id) => companyTokenBatches.find((company) => company.id === id)).filter(Boolean) as CompanyTokenBatch[];
                     setSelectedTokenBatches(tokenBatches);
                 }}
             >
                 {companyTokenBatches && companyTokenBatches.map((c) => (
-                    <SelectItem
+                    <MultiSelectItem
                         key={`select-${c.id}`}
                         value={c.id}
                     >
                         {c.name}
-                    </SelectItem>
+                    </MultiSelectItem>
                 ))}
-            </Select>
+            </MultiSelect>
             <Button size={"small"} variant={"outlined"} disabled={loading || !selectedCompany} onClick={() => {
                 setSelectedTokenBatches(companyTokenBatches ?? []);
             }}>Select all batches</Button>
@@ -592,7 +592,7 @@ function entryToCSVRow(entry: any[]) {
         .map((v: string | undefined) => {
             if (v === null || v === undefined) return "";
             const isString = typeof v === "string";
-            let parsed: string = String(v);
+            const  parsed: string = String(v);
             return "\"" + parsed.replaceAll("\"", "\"\"") + "\"";
         })
         .join(";") + "\r\n";
@@ -746,7 +746,7 @@ const headCells = [
 ];
 
 function getCSV(data: SubscriptionWithUser[], selectedSubscriptions: number[], format: "140A" | "standard", includeExcelStringFormat: boolean) {
-    let selectedData = data.filter(invoiceWithUser => selectedSubscriptions.includes(parseInt(invoiceWithUser.subscription_id)));
+    const selectedData = data.filter(invoiceWithUser => selectedSubscriptions.includes(parseInt(invoiceWithUser.subscription_id)));
     const BOM = "\uFEFF";
     if (format === "140A") {
         const downloadData = selectedData.flatMap((invoiceWithUser) => create140AEntriesFrom(invoiceWithUser));

packages/collection_editor/src/ui/collection_editor/properties/StoragePropertyField.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 import {
     Button,
-    Checkbox,
     DebouncedTextField,
     ExpandablePanel,
     FileUploadIcon,
     MultiSelect,
-    MultiSelectItem, NewMultiSelect, NewMultiSelectItem,
+    MultiSelectItem,
     Typography
 } from "@firecms/ui";
 
@@ -88,7 +87,7 @@ export function StoragePropertyField({
 
                         <div className={"col-span-12"}>
 
-                            <NewMultiSelect
+                            <MultiSelect
                                 className={"w-full"}
                                 placeholder={"All file types allowed"}
                                 disabled={disabled}
@@ -104,7 +103,7 @@ export function StoragePropertyField({
                                 }}>
 
                                 {Object.entries(fileTypes).map(([value, label]) => (
-                                    <NewMultiSelectItem key={value} value={value} className={"flex items-center gap-2"}>
+                                    <MultiSelectItem key={value} value={value} className={"flex items-center gap-2"}>
                                         {/*<Checkbox*/}
                                         {/*    checked={allFileTypesSelected || fileTypesValue.indexOf(value) > -1}/>*/}
                                         <div className={"flex-grow"}>
@@ -119,10 +118,10 @@ export function StoragePropertyField({
                                                 }}>
                                             Only
                                         </Button>
-                                    </NewMultiSelectItem>
+                                    </MultiSelectItem>
                                 ))}
 
-                            </NewMultiSelect>
+                            </MultiSelect>
                         </div>
 
                         <div className={"col-span-12"}>

packages/firecms_cloud/src/FireCMSCloudApp.tsx

@@ -120,11 +120,14 @@ export function FireCMSCloudApp({
         fromUrl: backendApiHost + "/config"
     });
 
+    console.log("backendFirebaseApp", backendFirebaseApp);
     const fireCMSBackend = useBuildFireCMSBackend({
         backendApiHost,
         backendFirebaseApp
     });
 
+
+    console.log("fireCMSBackend", fireCMSBackend);
     let component;
 
     if (backendConfigLoading || !backendFirebaseApp) {

packages/firecms_cloud/src/hooks/useBuildFireCMSBackend.tsx

@@ -47,7 +47,7 @@ export function useBuildFireCMSBackend({
 
     const firestoreRef = useRef<Firestore>();
 
-    const updateFirebaseUser = useCallback(async (firebaseUser: FirebaseUser | null) => {
+    const updateFirebaseUser = useCallback( (firebaseUser: FirebaseUser | null) => {
         onUserChange?.(firebaseUser);
         setLoggedUser(firebaseUser);
     }, []);

packages/firecms_cloud/src/hooks/useBuildProjectConfig.tsx

@@ -70,7 +70,8 @@ export function useBuildProjectConfig({
     const [primaryColor, setPrimaryColor] = useState<string | undefined>(DEFAULT_PRIMARY_COLOR);
     const [secondaryColor, setSecondaryColor] = useState<string | undefined>(DEFAULT_SECONDARY_COLOR);
 
-    const configPath = projectId ? `projects/${projectId}` : undefined;
+    const projectPath = `projects/${projectId}`;
+    const configPath = projectId ? projectPath : undefined;
 
     const [clientProjectName, setClientProjectName] = useState<string | undefined>();
     const [subscriptionPlan, setSubscriptionPlan] = useState<ProjectSubscriptionPlan>();
@@ -169,11 +170,12 @@ export function useBuildProjectConfig({
         }
 
         const firestore = getFirestore(backendFirebaseApp);
-        return onSnapshot(doc(firestore, "projects", projectId),
+        return onSnapshot(doc(firestore, projectPath),
             {
                 next: (snapshot) => {
-
-                    console.debug("Project config snapshot:", snapshot.data());
+                    console.debug("Project config snapshot:", {
+                        data: snapshot.data()
+                    });
                     setClientProjectName(snapshot.get("name"));
                     const plan = snapshot.get("subscription_plan") ?? "free";
                     setSubscriptionPlan(plan); // TODO: remove default value

packages/firecms_core/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"

packages/firecms_core/src/components/VirtualTable/fields/VirtualTableSelect.tsx

@@ -1,7 +1,7 @@
 import { EnumValueConfig } from "../../../types";
 import { EnumValuesChip } from "../../../preview";
 import React, { useCallback, useEffect } from "react";
-import { NewMultiSelect, NewMultiSelectItem, Select, SelectItem } from "@firecms/ui";
+import { MultiSelect, MultiSelectItem, Select, SelectItem } from "@firecms/ui";
 
 export function VirtualTableSelect(props: {
     name: string;
@@ -67,7 +67,7 @@ export function VirtualTableSelect(props: {
 
     return (
         multiple
-            ? <NewMultiSelect
+            ? <MultiSelect
                 inputRef={ref}
                 className="w-full h-full p-0 bg-transparent"
                 position={"item-aligned"}
@@ -79,16 +79,16 @@ export function VirtualTableSelect(props: {
                     : ([])}
                 onValueChange={onChange}>
                 {enumValues?.map((enumConfig) => (
-                    <NewMultiSelectItem
+                    <MultiSelectItem
                         key={enumConfig.id}
                         value={String(enumConfig.id)}>
                         <EnumValuesChip
                             enumKey={enumConfig.id}
                             enumValues={enumValues}
                             size={small ? "small" : "medium"}/>
-                    </NewMultiSelectItem>
+                    </MultiSelectItem>
                 ))}
-            </NewMultiSelect>
+            </MultiSelect>
             : <Select
                 inputRef={ref}
                 className="w-full h-full p-0 bg-transparent"