@firecms/ui 3.0.0-canary.153 → 3.0.0-canary.155

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@firecms/ui",
   "type": "module",
-  "version": "3.0.0-canary.153",
+  "version": "3.0.0-canary.155",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
   },
   "author": "FireCMS",
   "license": "MIT",
-  "repository": "git@github.com:FireCMSco/firecms.git",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/firecmsco/firecms.git",
+    "directory": "packages/ui"
+  },
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -91,7 +95,9 @@
     "@types/react-dom": "^18.3.1",
     "@types/react-measure": "^2.0.12",
     "@vitejs/plugin-react": "^4.3.3",
+    "babel-plugin-react-compiler": "beta",
     "cross-env": "^7.0.3",
+    "eslint-plugin-react-compiler": "beta",
     "firebase": "^10.14.1",
     "jest": "^29.7.0",
     "npm-run-all": "^4.1.5",
@@ -108,7 +114,7 @@
     "index.css",
     "tailwind.config.js"
   ],
-  "gitHead": "373e77fdfca9d30631a08d14f14b3638f6ad56e5",
+  "gitHead": "c9b71679d709242ff3a47ec56a0ecf980ec76564",
   "publishConfig": {
     "access": "public"
   }

package/src/components/Avatar.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { useState } from "react";
 import { cls } from "../util";
 

package/src/components/BooleanSwitch.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { cls } from "../util";
 

package/src/components/Button.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { cls } from "../util";
 

package/src/components/CenteredView.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { Container } from "./Container";
 import { cls } from "../util";

package/src/components/Container.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { ForwardRefRenderFunction } from "react";
 import { cls } from "../util";
 

package/src/components/DateTimeField.tsx

@@ -180,7 +180,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                 <div className="flex items-center m-2">
                     <ErrorIcon size={"medium"} color={"error"}/>
                     <div className="pl-2">
-                        <Typography variant={"body2"} className="font-large">
+                        <Typography variant={"body2"}>
                             Invalid date value for this field
                         </Typography>
                         <Typography variant={"body2"}>

package/src/components/DialogContent.tsx

@@ -4,9 +4,11 @@ import { cls } from "../util";
 export function DialogContent({
                                   children,
                                   className,
-                                  fullHeight
+                                  fullHeight,
+                                  includeMargin = true
                               }: {
     children: React.ReactNode,
+    includeMargin?: boolean,
     fullHeight?: boolean,
     className?: string
 }) {
@@ -17,7 +19,9 @@ export function DialogContent({
         </div>;
 
     return <div
-        className={cls("my-6 mx-6 h-full flex-grow", className)}>
+        className={cls("h-full flex-grow",
+            { "my-6 mx-6": includeMargin },
+            className)}>
         {children}
     </div>;
 }

package/src/components/DialogTitle.tsx

@@ -8,6 +8,7 @@ export type DialogContentProps = TypographyProps & {
     children: React.ReactNode,
     hidden?: boolean,
     className?: string,
+    includeMargin?: boolean,
     variant?: TypographyVariant
 };
 
@@ -16,12 +17,15 @@ export function DialogTitle({
                                 hidden,
                                 className,
                                 variant = "subtitle2",
+                                gutterBottom = true,
+                                includeMargin = true,
                                 ...props
                             }: DialogContentProps) {
 
     const title = <DialogPrimitive.Title asChild>
         <Typography variant={variant}
-                    className={cls("mt-8 mb-6 mx-6", className)}
+                    className={cls({ "mt-8 mx-6": includeMargin }, className)}
+                    gutterBottom={gutterBottom}
                     {...props}>
             {children}
         </Typography>

package/src/components/IconButton.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { cls } from "../util";
 
@@ -61,6 +62,5 @@ const IconButtonInner = <C extends React.ElementType = "button">({
         </Component>
     );
 };
-// React.ForwardRefRenderFunction<HTMLButtonElement, IconButtonProps<C>>
 
 export const IconButton = React.forwardRef(IconButtonInner as React.ForwardRefRenderFunction<HTMLButtonElement, IconButtonProps<any>>) as React.ComponentType<IconButtonProps<any>>;

package/src/components/InputLabel.tsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { cls } from "../util";
 import { defaultBorderMixin } from "../styles";

package/src/components/Label.tsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { cls } from "../util";

package/src/components/Menu.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { focusedDisabled, paperMixin } from "../styles";

package/src/components/RadioGroup.tsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react"
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
 import { cls } from "../util";

package/src/components/Select.tsx

@@ -16,6 +16,7 @@ import { SelectInputLabel } from "./common/SelectInputLabel";
 export type SelectProps = {
     open?: boolean,
     name?: string,
+    fullWidth?: boolean,
     id?: string,
     onOpenChange?: (open: boolean) => void,
     value?: string,
@@ -41,6 +42,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                                                                    inputRef,
                                                                    open,
                                                                    name,
+                                                                   fullWidth = false,
                                                                    id,
                                                                    onOpenChange,
                                                                    value,
@@ -105,14 +107,18 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                 {
                     "min-h-[28px]": size === "small",
                     "min-h-[42px]": size === "medium",
-                    "min-h-[64px]": size === "large"
+                    "min-h-[64px]": size === "large",
+                    "w-fit": !fullWidth,
+                    "w-full": fullWidth
                 }
             )}>
                 <SelectPrimitive.Trigger
                     ref={inputRef}
                     id={id}
-                    className={cls(
-                        "w-full h-full",
+                    asChild
+                >
+                    <div className={cls(
+                        "h-full",
                         padding ? {
                             "px-4": size === "large",
                             "px-3": size === "medium",
@@ -127,65 +133,66 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                         {
                             "min-h-[28px]": size === "small",
                             "min-h-[42px]": size === "medium",
-                            "min-h-[64px]": size === "large"
+                            "min-h-[64px]": size === "large",
+                            "w-full": fullWidth,
+                            "w-fit": !fullWidth
                         },
                         inputClassName
                     )}>
+                        <div
+                            ref={ref}
+                            className={cls(
+                                "flex-grow max-w-full flex flex-row gap-2 items-center",
+                                "overflow-visible",
+                                {
+                                    "min-h-[28px]": size === "small",
+                                    "min-h-[42px]": size === "medium",
+                                    "min-h-[64px]": size === "large"
+                                }
+                            )}>
+                            <SelectPrimitive.Value
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                }}
+                                placeholder={placeholder}
+                                className={"w-full"}>
+                                {hasValue && value && renderValue ? renderValue(value) : placeholder}
+                                {/*{hasValue && !renderValue && value}*/}
+                                {hasValue && !renderValue && (() => {
 
-                    <div
-                        ref={ref}
-                        className={cls(
-                            "flex-grow w-full max-w-full flex flex-row gap-2 items-center",
-                            "overflow-visible",
-                            {
-                                "min-h-[28px]": size === "small",
-                                "min-h-[42px]": size === "medium",
-                                "min-h-[64px]": size === "large"
-                            }
-                        )}
-                    >
-                        <SelectPrimitive.Value
-                            onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                            }}
-                            placeholder={placeholder}
-                            className={"w-full"}>
-                            {hasValue && value && renderValue ? renderValue(value) : placeholder}
-                            {/*{hasValue && !renderValue && value}*/}
-                            {hasValue && !renderValue && (() => {
+                                    // @ts-ignore
+                                    const childrenProps: SelectItemProps[] = Children.map(children, (child) => {
+                                        if (React.isValidElement(child)) {
+                                            return child.props;
+                                        }
+                                    }).filter(Boolean);
 
-                                // @ts-ignore
-                                const childrenProps: SelectItemProps[] = Children.map(children, (child) => {
-                                    if (React.isValidElement(child)) {
-                                        return child.props;
-                                    }
-                                }).filter(Boolean);
+                                    const option = childrenProps.find((o) => o.value === value);
+                                    return option?.children;
+                                })()}
 
-                                const option = childrenProps.find((o) => o.value === value);
-                                return option?.children;
-                            })()}
+                            </SelectPrimitive.Value>
+                        </div>
 
-                        </SelectPrimitive.Value>
+                        {endAdornment && (
+                            <div
+                                className={cls("h-full flex items-center")}
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                }}>
+                                {endAdornment}
+                            </div>
+                        )}
+                        <SelectPrimitive.Icon asChild>
+                            <ExpandMoreIcon size={"medium"}
+                                            className={cls("transition", open ? "rotate-180" : "", {
+                                                "px-2": size === "large",
+                                                "px-1": size === "medium" || size === "small",
+                                            })}/>
+                        </SelectPrimitive.Icon>
                     </div>
-
-                    {endAdornment && (
-                        <div
-                            className={cls("h-full flex items-center")}
-                            onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                            }}>
-                            {endAdornment}
-                        </div>
-                    )}
-                    <SelectPrimitive.Icon asChild>
-                        <ExpandMoreIcon size={"medium"}
-                                        className={cls("transition", open ? "rotate-180" : "", {
-                                            "px-2": size === "large",
-                                            "px-1": size === "medium" || size === "small",
-                                        })}/>
-                    </SelectPrimitive.Icon>
                 </SelectPrimitive.Trigger>
 
             </div>

package/src/components/Slider.tsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { cls } from "../util";
 import * as SliderPrimitive from "@radix-ui/react-slider";

package/src/components/Tabs.tsx

@@ -53,8 +53,6 @@ export function Tab({
                                           : cls("text-surface-accent-700 dark:text-surface-accent-300",
                                               "data-[state=active]:text-surface-accent-900 data-[state=active]:dark:text-white",
                                               "hover:text-surface-accent-800 dark:hover:text-surface-accent-200"),
-                                      // disabled ? "text-surface-accent-400 dark:text-surface-accent-500" : "data-[state=active]:text-primary",
-                                      // "data-[state=active]:bg-surface-accent-50 data-[state=active]:dark:bg-surface-accent-800",
                                       className)}>
         <div className={cls("uppercase inline-block p-2 px-4 m-2 rounded",
             "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800",