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

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

@@ -10,11 +10,11 @@ interface BooleanFieldProps {
 }
 
 export function BooleanFilterField({
-                                       name,
-                                       title,
-                                       value,
-                                       setValue
-                                   }: BooleanFieldProps) {
+    name,
+    title,
+    value,
+    setValue
+}: BooleanFieldProps) {
 
     function updateFilter(val?: boolean) {
         if (val !== undefined) {
@@ -32,8 +32,9 @@ export function BooleanFilterField({
     const valueSet = !!value;
 
     return (
-        <div className="w-[300px]">
+        <div className="w-full">
             <BooleanSwitchWithLabel
+                size={"medium"}
                 value={valueSetToTrue}
                 allowIndeterminate={true}
                 onValueChange={(v: boolean | null) => updateFilter(v === null ? undefined : v)}

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { VirtualTableWhereFilterOp } from "../../VirtualTable";
-import { Checkbox, DateTimeField, Label, Select, SelectItem } from "@firecms/ui";
+import { DateTimeField, Select, SelectItem } from "@firecms/ui";
 import { useCustomizationController } from "../../../hooks";
 
 interface DateTimeFilterFieldProps {
@@ -10,9 +10,10 @@ interface DateTimeFilterFieldProps {
     setValue: (value?: [op: VirtualTableWhereFilterOp, newValue: any]) => void;
     isArray?: boolean;
     title?: string;
+    timezone?: string;
 }
 
-const operationLabels: Record<VirtualTableWhereFilterOp, string> = {
+const operationLabels: Record<VirtualTableWhereFilterOp | "is-null", string> = {
     "==": "==",
     "!=": "!=",
     ">": ">",
@@ -22,30 +23,42 @@ const operationLabels: Record<VirtualTableWhereFilterOp, string> = {
     "not-in": "not in",
     in: "in",
     "array-contains": "Contains",
-    "array-contains-any": "Any"
+    "array-contains-any": "Any",
+    "is-null": "Is null"
 };
 
 const multipleSelectOperations = ["array-contains-any", "in"];
 
 export function DateTimeFilterField({
-                                        name,
-                                        isArray,
-                                        mode,
-                                        value,
-                                        setValue,
-                                        title
-                                    }: DateTimeFilterFieldProps) {
+    name,
+    isArray,
+    mode,
+    value,
+    setValue,
+    title,
+    timezone
+}: DateTimeFilterFieldProps) {
 
     const { locale } = useCustomizationController();
-    const possibleOperations: (keyof typeof operationLabels) [] = isArray
+    const possibleOperations: (keyof typeof operationLabels)[] = isArray
         ? ["array-contains"]
-        : ["==", "!=", ">", "<", ">=", "<="];
+        : ["==", "!=", ">", "<", ">=", "<=", "is-null"];
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
-    const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
+    const [operation, setOperation] = useState<VirtualTableWhereFilterOp | "is-null">(fieldOperation === "==" && fieldValue === null ? "is-null" : fieldOperation);
     const [internalValue, setInternalValue] = useState<Date | null | undefined>(fieldValue);
 
-    function updateFilter(op: VirtualTableWhereFilterOp, val: Date | undefined | null) {
+    const isNullOperation = operation === "is-null";
+
+    function updateFilter(op: VirtualTableWhereFilterOp | "is-null", val: Date | undefined | null) {
+        // Handle "is null" operation
+        if (op === "is-null") {
+            setOperation(op);
+            setInternalValue(null);
+            setValue(["==", null]);
+            return;
+        }
+
         let newValue: Date | null | undefined = val;
         const prevOpIsArray = multipleSelectOperations.includes(operation);
         const newOpIsArray = multipleSelectOperations.includes(op);
@@ -73,15 +86,15 @@ export function DateTimeFilterField({
 
     return (
 
-        <div className="flex w-[440px]">
-            <div className="w-[80px]">
+        <div className="flex w-full">
+            <div className="w-[100px]">
                 <Select value={operation}
-                        size={"large"}
-                        fullWidth={true}
-                        onValueChange={(value) => {
-                            updateFilter(value as VirtualTableWhereFilterOp, internalValue);
-                        }}
-                        renderValue={(op) => operationLabels[op as VirtualTableWhereFilterOp]}>
+                    size={"medium"}
+                    fullWidth={true}
+                    onValueChange={(value) => {
+                        updateFilter(value as VirtualTableWhereFilterOp | "is-null", internalValue);
+                    }}
+                    renderValue={(op) => operationLabels[op as keyof typeof operationLabels]}>
                     {possibleOperations.map((op) => (
                         <SelectItem key={op} value={op}>
                             {operationLabels[op]}
@@ -94,31 +107,17 @@ export function DateTimeFilterField({
 
                 <DateTimeField
                     mode={mode}
-                    size={"large"}
+                    size={"medium"}
                     locale={locale}
-                    disabled={internalValue === null}
-                    value={internalValue ?? undefined}
+                    timezone={timezone}
+                    disabled={isNullOperation}
+                    value={isNullOperation ? undefined : (internalValue ?? undefined)}
                     onChange={(dateValue: Date | null) => {
                         updateFilter(operation, dateValue === null ? undefined : dateValue);
                     }}
                     clearable={true}
                 />
 
-                <Label
-                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-surface-100 dark:[&:has(:checked)]:bg-surface-800"
-                    htmlFor="null-filter"
-                >
-                    <Checkbox id="null-filter"
-                              checked={internalValue === null}
-                              size={"small"}
-                              onCheckedChange={(checked) => {
-                                  if (internalValue !== null)
-                                      updateFilter(operation, null);
-                                  else updateFilter(operation, undefined);
-                              }}/>
-                    Filter for null values
-                </Label>
-
             </div>
 
         </div>

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

@@ -35,16 +35,16 @@ const operationLabels = {
 const multipleSelectOperations = ["array-contains-any", "in", "not-in"];
 
 export function ReferenceFilterField({
-                                         value,
-                                         setValue,
-                                         isArray,
-                                         path,
-                                         includeId = true,
-                                         previewProperties,
-                                         setHidden
-                                     }: ReferenceFilterFieldProps) {
-
-    const possibleOperations: (keyof typeof operationLabels) [] = isArray
+    value,
+    setValue,
+    isArray,
+    path,
+    includeId = true,
+    previewProperties,
+    setHidden
+}: ReferenceFilterFieldProps) {
+
+    const possibleOperations: (keyof typeof operationLabels)[] = isArray
         ? ["array-contains"]
         : ["==", "!=", ">", "<", ">=", "<="];
 
@@ -110,16 +110,16 @@ export function ReferenceFilterField({
     const multiple = multipleSelectOperations.includes(operation);
 
     const referenceDialogController = useReferenceDialog({
-            multiselect: multiple,
-            path,
-            collection,
-            onSingleEntitySelected,
-            onMultipleEntitiesSelected,
-            selectedEntityIds,
-            onClose: () => {
-                setHidden(false);
-            }
+        multiselect: multiple,
+        path,
+        collection,
+        onSingleEntitySelected,
+        onMultipleEntitiesSelected,
+        selectedEntityIds,
+        onClose: () => {
+            setHidden(false);
         }
+    }
     );
 
     const doOpenDialog = () => {
@@ -144,15 +144,15 @@ export function ReferenceFilterField({
 
     return (
 
-        <div className="flex w-[480px] flex-row">
-            <div className="w-[140px]">
+        <div className="flex w-full flex-row">
+            <div className="w-[100px]">
                 <Select value={operation}
-                        size={"large"}
-                        fullWidth={true}
-                        onValueChange={(value) => {
-                            updateFilter(value as VirtualTableWhereFilterOp, internalValue);
-                        }}
-                        renderValue={(op) => operationLabels[op as VirtualTableWhereFilterOp]}>
+                    size={"medium"}
+                    fullWidth={true}
+                    onValueChange={(value) => {
+                        updateFilter(value as VirtualTableWhereFilterOp, internalValue);
+                    }}
+                    renderValue={(op) => operationLabels[op as VirtualTableWhereFilterOp]}>
                     {possibleOperations.map((op) => (
                         <SelectItem key={op} value={op}>
                             {operationLabels[op]}
@@ -161,7 +161,7 @@ export function ReferenceFilterField({
                 </Select>
             </div>
 
-            <div className="flex-grow ml-2 h-full gap-2 flex flex-col w-[340px]">
+            <div className="flex-grow ml-2 h-full gap-2 flex flex-col">
 
                 {internalValue && Array.isArray(internalValue) && <div>
                     {internalValue.map((ref, index) => buildEntry(ref))}
@@ -173,9 +173,9 @@ export function ReferenceFilterField({
 
                 {(!internalValue || (Array.isArray(internalValue) && internalValue.length === 0)) &&
                     <Button onClick={doOpenDialog}
-                            variant={"outlined"}
-                            size={"large"}
-                            className="h-full w-full">
+
+                        size={"medium"}
+                        className="h-full w-full">
                         {multiple ? "Select references" : "Select reference"}
                     </Button>
                 }
@@ -185,13 +185,13 @@ export function ReferenceFilterField({
                     htmlFor="null-filter"
                 >
                     <Checkbox id="null-filter"
-                              checked={internalValue === null}
-                              size={"small"}
-                              onCheckedChange={(checked) => {
-                                  if (internalValue !== null)
-                                      updateFilter(operation, null);
-                                  else updateFilter(operation, undefined);
-                              }}/>
+                        checked={internalValue === null}
+                        size={"small"}
+                        onCheckedChange={(checked) => {
+                            if (internalValue !== null)
+                                updateFilter(operation, null);
+                            else updateFilter(operation, undefined);
+                        }} />
                     Filter for null values
                 </Label>}
 

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

@@ -2,10 +2,8 @@ import React, { useState } from "react";
 import { EnumValuesChip } from "../../../preview";
 import { VirtualTableWhereFilterOp } from "../../VirtualTable";
 import {
-    Checkbox,
     CloseIcon,
     IconButton,
-    Label,
     MultiSelect,
     MultiSelectItem,
     Select,
@@ -34,24 +32,25 @@ const operationLabels = {
     in: "In",
     "not-in": "Not in",
     "array-contains": "Contains",
-    "array-contains-any": "Any"
+    "array-contains-any": "Any",
+    "is-null": "Is null"
 };
 
 const multipleSelectOperations = ["array-contains-any", "in", "not-in"];
 
 export function StringNumberFilterField({
-                                            name,
-                                            value,
-                                            setValue,
-                                            dataType,
-                                            isArray,
-                                            enumValues,
-                                            title
-                                        }: StringNumberFilterFieldProps) {
-
-    const possibleOperations: (keyof typeof operationLabels) [] = isArray
+    name,
+    value,
+    setValue,
+    dataType,
+    isArray,
+    enumValues,
+    title
+}: StringNumberFilterFieldProps) {
+
+    const possibleOperations: (keyof typeof operationLabels)[] = isArray
         ? ["array-contains"]
-        : ["==", "!=", ">", "<", ">=", "<="];
+        : ["==", "!=", ">", "<", ">=", "<=", "is-null"];
 
     if (enumValues)
         isArray
@@ -59,10 +58,20 @@ export function StringNumberFilterField({
             : possibleOperations.push("in", "not-in");
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
-    const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
+    const [operation, setOperation] = useState<VirtualTableWhereFilterOp | "is-null">(fieldOperation === "==" && fieldValue === null ? "is-null" : fieldOperation);
     const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | null | undefined>(fieldValue);
 
-    function updateFilter(op: VirtualTableWhereFilterOp, val: string | number | string[] | number[] | null | undefined) {
+    const isNullOperation = operation === "is-null";
+
+    function updateFilter(op: VirtualTableWhereFilterOp | "is-null", val: string | number | string[] | number[] | null | undefined) {
+        // Handle "is null" operation
+        if (op === "is-null") {
+            setOperation(op);
+            setInternalValue(null);
+            setValue(["==", null]);
+            return;
+        }
+
         let newValue = val;
         const prevOpIsArray = multipleSelectOperations.includes(operation);
         const newOpIsArray = multipleSelectOperations.includes(op);
@@ -95,15 +104,16 @@ export function StringNumberFilterField({
 
     return (
 
-        <div className="flex w-[440px]">
-            <div className={"w-[80px]"}>
+        <div className="flex w-full">
+            <div className={"w-[100px]"}>
                 <Select value={operation}
-                        fullWidth={true}
-                        position={"item-aligned"}
-                        onValueChange={(value) => {
-                            updateFilter(value as VirtualTableWhereFilterOp, internalValue);
-                        }}
-                        renderValue={(op) => operationLabels[op as VirtualTableWhereFilterOp]}>
+                    size={"medium"}
+                    fullWidth={true}
+                    position={"item-aligned"}
+                    onValueChange={(value) => {
+                        updateFilter(value as VirtualTableWhereFilterOp | "is-null", internalValue);
+                    }}
+                    renderValue={(op) => operationLabels[op as keyof typeof operationLabels]}>
                     {possibleOperations.map((op) => (
                         <SelectItem key={op} value={op}>
                             {operationLabels[op]}
@@ -115,8 +125,11 @@ export function StringNumberFilterField({
             <div className="flex-grow ml-2 flex flex-col gap-2">
 
                 {!enumValues && <TextField
+                    size={"medium"}
                     type={dataType === "number" ? "number" : undefined}
                     value={internalValue !== undefined && internalValue != null ? String(internalValue) : ""}
+                    disabled={isNullOperation}
+                    placeholder={isNullOperation ? "null" : undefined}
                     onChange={(evt) => {
                         const val = dataType === "number"
                             ? parseFloat(evt.target.value)
@@ -125,14 +138,16 @@ export function StringNumberFilterField({
                     }}
                     endAdornment={internalValue !== undefined && internalValue != null && <IconButton
                         onClick={(e) => updateFilter(operation, undefined)}>
-                        <CloseIcon/>
+                        <CloseIcon />
                     </IconButton>}
                 />}
 
                 {enumValues && !multiple &&
                     <Select
+                        size={"medium"}
                         position={"item-aligned"}
                         fullWidth={true}
+                        disabled={isNullOperation}
                         value={typeof internalValue === "string" ? internalValue : ""}
                         onValueChange={(value) => {
                             if (value !== "")
@@ -140,7 +155,7 @@ export function StringNumberFilterField({
                         }}
                         endAdornment={internalValue && <IconButton
                             onClick={(e) => updateFilter(operation, undefined)}>
-                            <CloseIcon/>
+                            <CloseIcon />
                         </IconButton>}
                         renderValue={(enumKey) => {
                             if (enumKey === null)
@@ -152,15 +167,15 @@ export function StringNumberFilterField({
                                 key={`select_value_${name}_${enumKey}`}
                                 enumKey={enumKey}
                                 enumValues={enumValues}
-                                size={"small"}/>;
+                                size={"small"} />;
                         }}>
                         {enumValues.map((enumConfig) => (
                             <SelectItem key={`select_item_${name}_${enumConfig.id}`}
-                                        value={String(enumConfig.id)}>
+                                value={String(enumConfig.id)}>
                                 <EnumValuesChip
                                     enumKey={String(enumConfig.id)}
                                     enumValues={enumValues}
-                                    size={"small"}/>
+                                    size={"small"} />
                             </SelectItem>
                         ))}
                     </Select>
@@ -168,8 +183,10 @@ export function StringNumberFilterField({
 
                 {enumValues && multiple &&
                     <MultiSelect
+                        size={"medium"}
                         position={"item-aligned"}
                         value={Array.isArray(internalValue) ? internalValue.map(e => String(e)) : []}
+                        disabled={isNullOperation}
                         onValueChange={(value) => {
                             updateFilter(operation, dataType === "number" ? value.map(v => parseInt(v)) : value)
                         }}
@@ -177,47 +194,21 @@ export function StringNumberFilterField({
                         endAdornment={internalValue && <IconButton
                             className="absolute right-2 top-3"
                             onClick={(e) => updateFilter(operation, undefined)}>
-                            <CloseIcon/>
+                            <CloseIcon />
                         </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)}>
+                                value={String(enumConfig.id)}>
                                 <EnumValuesChip
                                     enumKey={String(enumConfig.id)}
                                     enumValues={enumValues}
-                                    size={"small"}/>
+                                    size={"small"} />
                             </MultiSelectItem>
                         ))}
                     </MultiSelect>
                 }
 
-                {!isArray && <Label
-                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-surface-100 dark:[&:has(:checked)]:bg-surface-800"
-                    htmlFor="null-filter"
-                >
-                    <Checkbox id="null-filter"
-                              checked={internalValue === null}
-                              size={"small"}
-                              onCheckedChange={(checked) => {
-                                  if (internalValue !== null)
-                                      updateFilter(operation, null);
-                                  else updateFilter(operation, undefined);
-                              }}/>
-                    Filter for null values
-                </Label>}
-
             </div>
 
         </div>

package/src/components/UnsavedChangesDialog.tsx

@@ -35,10 +35,8 @@ export function UnsavedChangesDialog({
             </DialogContent>
             <DialogActions>
                 <Button variant="text"
-                        color={"primary"}
                         onClick={handleCancel} autoFocus> Cancel </Button>
                 <Button
-                    color={"primary"}
                     onClick={handleOk}> Ok </Button>
             </DialogActions>
         </Dialog>

package/src/components/UserDisplay.tsx

@@ -6,17 +6,17 @@ import { EmptyValue } from "../preview";
  * Component to render a single user with name and email
  */
 export function UserDisplay({
-                                user,
-                            }: { user: User | null }) {
+    user,
+}: { user: User | null }) {
     if (!user) {
-        return <EmptyValue/>;
+        return <EmptyValue />;
     }
 
     const avatarSizeClass = "w-6 h-6";
 
     return (
         <div className={cls(
-            "inline-flex items-center gap-4 px-2 py-1 rounded-xl",
+            "inline-flex items-center gap-4 px-2 py-1 rounded-xl text-left",
             "bg-surface-accent-100 dark:bg-surface-accent-800",
             "border",
             defaultBorderMixin