@firecms/ui 3.0.0-canary.107 → 3.0.0-canary.109

package/dist/styles.d.ts

@@ -4,7 +4,7 @@ export declare const focusedClasses = "z-30 outline-none ring-2 ring-primary rin
 export declare const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-800 dark:bg-opacity-60";
 export declare const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0";
 export declare const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-50 dark:bg-opacity-90";
-export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-60";
+export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-40";
 export declare const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
 export declare const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-80 border-gray-100";
 export declare const cardMixin = "bg-white border border-gray-100 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 m-1 -p-1";

package/package.json

@@ -1,109 +1,111 @@
 {
-    "name": "@firecms/ui",
-    "type": "module",
-    "version": "3.0.0-canary.107",
-    "description": "Awesome Firebase/Firestore-based headless open-source CMS",
-    "funding": {
-        "url": "https://github.com/sponsors/firecmsco"
+  "name": "@firecms/ui",
+  "type": "module",
+  "version": "3.0.0-canary.109",
+  "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",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "source": "src/index.ts",
+  "engines": {
+    "node": ">=14"
+  },
+  "keywords": [
+    "firebase",
+    "cms",
+    "admin",
+    "admin panel",
+    "firebase panel",
+    "firestore",
+    "headless",
+    "headless cms",
+    "content manager"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
     },
-    "author": "FireCMS",
-    "license": "MIT",
-    "repository": "git@github.com:FireCMSco/firecms.git",
-    "main": "./dist/index.umd.js",
-    "module": "./dist/index.es.js",
-    "types": "./dist/index.d.ts",
-    "source": "src/index.ts",
-    "engines": {
-        "node": ">=14"
-    },
-    "keywords": [
-        "firebase",
-        "cms",
-        "admin",
-        "admin panel",
-        "firebase panel",
-        "firestore",
-        "headless",
-        "headless cms",
-        "content manager"
-    ],
-    "exports": {
-        ".": {
-            "import": "./dist/index.es.js",
-            "require": "./dist/index.umd.js",
-            "types": "./dist/index.d.ts"
-        },
-        "./package.json": "./package.json",
-        "./tailwind.config.js": "./tailwind.config.js"
-    },
-    "scripts": {
-        "watch": "vite build --watch",
-        "build": "vite build && tsc --emitDeclarationOnly",
-        "prepublishOnly": "run-s build",
-        "createTag": "PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags",
-        "test:lint": "eslint \"src/**\" --quiet",
-        "test": "jest",
-        "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",
-        "generateIcons": "ts-node --esm src/scripts/generateIcons.ts"
-    },
-    "dependencies": {
-        "@radix-ui/react-checkbox": "^1.1.1",
-        "@radix-ui/react-collapsible": "^1.1.0",
-        "@radix-ui/react-dialog": "^1.1.1",
-        "@radix-ui/react-dropdown-menu": "^2.1.1",
-        "@radix-ui/react-label": "^2.1.0",
-        "@radix-ui/react-menubar": "^1.1.1",
-        "@radix-ui/react-popover": "^1.1.1",
-        "@radix-ui/react-portal": "^1.1.1",
-        "@radix-ui/react-radio-group": "^1.2.0",
-        "@radix-ui/react-scroll-area": "^1.1.0",
-        "@radix-ui/react-select": "^2.1.1",
-        "@radix-ui/react-separator": "^1.1.0",
-        "@radix-ui/react-switch": "^1.1.0",
-        "@radix-ui/react-tabs": "^1.1.0",
-        "@radix-ui/react-tooltip": "^1.1.2",
-        "clsx": "^2.1.1",
-        "cmdk": "^0.2.1",
-        "date-fns": "^3.6.0",
-        "material-icons": "latest",
-        "react-datepicker": "^7.3.0",
-        "react-dropzone": "^14.2.3",
-        "react-fast-compare": "^3.2.2",
-        "tailwind-merge": "^2.4.0"
-    },
-    "peerDependencies": {
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1"
-    },
-    "devDependencies": {
-        "@jest/globals": "^29.7.0",
-        "@testing-library/jest-dom": "^6.4.6",
-        "@testing-library/react": "^15.0.7",
-        "@testing-library/user-event": "^14.5.2",
-        "@types/jest": "^29.5.12",
-        "@types/node": "^20.14.12",
-        "@types/object-hash": "^3.0.6",
-        "@types/react": "^18.3.3",
-        "@types/react-dom": "^18.3.0",
-        "@types/react-measure": "^2.0.12",
-        "@vitejs/plugin-react": "^4.3.1",
-        "cross-env": "^7.0.3",
-        "firebase": "^10.12.4",
-        "jest": "^29.7.0",
-        "npm-run-all": "^4.1.5",
-        "ts-jest": "^29.2.3",
-        "ts-node": "^10.9.2",
-        "tsd": "^0.31.1",
-        "typescript": "^5.5.4",
-        "vite": "^5.3.4"
-    },
-    "files": [
-        "dist",
-        "src",
-        "tailwind.config.js"
-    ],
-    "gitHead": "07f66833d1cc898c000b92029a8c33992a1dea55",
-    "publishConfig": {
-        "access": "public"
-    }
+    "./package.json": "./package.json",
+    "./tailwind.config.js": "./tailwind.config.js",
+    "./index.css": "./dist/index.css"
+  },
+  "scripts": {
+    "watch": "vite build --watch",
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "prepublishOnly": "run-s build",
+    "createTag": "PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags",
+    "test:lint": "eslint \"src/**\" --quiet",
+    "test": "jest",
+    "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",
+    "generateIcons": "ts-node --esm src/scripts/generateIcons.ts"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-collapsible": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.1",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-portal": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
+    "clsx": "^2.1.1",
+    "cmdk": "^0.2.1",
+    "date-fns": "^3.6.0",
+    "material-icons": "latest",
+    "react-datepicker": "^7.3.0",
+    "react-dropzone": "^14.2.3",
+    "react-fast-compare": "^3.2.2",
+    "tailwind-merge": "^2.4.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@jest/globals": "^29.7.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.14.12",
+    "@types/object-hash": "^3.0.6",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-measure": "^2.0.12",
+    "@vitejs/plugin-react": "^4.3.1",
+    "cross-env": "^7.0.3",
+    "firebase": "^10.12.4",
+    "jest": "^29.7.0",
+    "npm-run-all": "^4.1.5",
+    "ts-jest": "^29.2.3",
+    "ts-node": "^10.9.2",
+    "tsd": "^0.31.1",
+    "typescript": "^5.5.4",
+    "vite": "^5.3.4",
+    "vite-plugin-static-copy": "^1.0.6"
+  },
+  "files": [
+    "dist",
+    "src",
+    "tailwind.config.js"
+  ],
+  "gitHead": "ad45014069302bfff4dfc61065f1d193742ac0ca",
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/src/components/Chip.tsx

@@ -44,7 +44,7 @@ export function Chip({
     const usedColorScheme = typeof colorScheme === "string" ? getColorSchemeForKey(colorScheme) : colorScheme;
     return (
         <div
-            className={cls("rounded-lg w-fit h-fit font-regular inline-flex gap-1",
+            className={cls("rounded-lg w-max h-fit font-regular inline-flex gap-1",
                 "text-ellipsis",
                 onClick ? "cursor-pointer hover:bg-slate-300 hover:dark:bg-slate-700" : "",
                 sizeClassNames[size],

package/src/components/InputLabel.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { cls } from "../util";
 import { Label } from "./Label";
+import { defaultBorderMixin } from "../styles";
 
 export type InputLabelProps = {
     children?: React.ReactNode;
@@ -28,10 +29,11 @@ export const InputLabel = React.forwardRef<HTMLLabelElement, InputLabelProps>(fu
         }, className);
 
     return (
-        <Label
+        <label
+            className={cls("text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+                defaultBorderMixin, computedClassName)}
             data-shrink={shrink}
             ref={ref}
-            className={computedClassName}
             {...other}
         />
     );

package/src/components/Menu.tsx

@@ -14,30 +14,36 @@ export type MenuProps = {
     portalContainer?: HTMLElement | null;
 }
 
-export function Menu({
-                         children,
-                         trigger,
-                         open,
-                         defaultOpen,
-                         onOpenChange,
-                         portalContainer
-                     }: MenuProps) {
-    return (
-        <DropdownMenu.Root
-            open={open}
-            defaultOpen={defaultOpen}
-            onOpenChange={onOpenChange}>
-            <DropdownMenu.Trigger asChild>
-                {trigger}
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Portal container={portalContainer}>
-                <DropdownMenu.Content className={cls(paperMixin, "shadow py-2 z-30")}>
-                    {children}
-                </DropdownMenu.Content>
-            </DropdownMenu.Portal>
-        </DropdownMenu.Root>
-    );
-}
+const Menu = React.forwardRef<
+    React.ElementRef<typeof DropdownMenu.Trigger>,
+    MenuProps
+>(({
+       children,
+       trigger,
+       open,
+       defaultOpen,
+       onOpenChange,
+       portalContainer
+   }, ref) => (
+    <DropdownMenu.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}>
+        <DropdownMenu.Trigger
+            ref={ref}
+            asChild>
+            {trigger}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Portal container={portalContainer}>
+            <DropdownMenu.Content className={cls(paperMixin, "shadow py-2 z-30")}>
+                {children}
+            </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+))
+Menu.displayName = "Menu"
+
+export { Menu }
 
 export type MenuItemProps = {
     children: React.ReactNode;

package/src/components/Select.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect } from "react";
-
+import React, { ChangeEvent, forwardRef, useCallback, useEffect, useState } from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import {
     fieldBackgroundDisabledMixin,
@@ -20,7 +19,7 @@ export type SelectProps = {
     value?: string | string[],
     className?: string,
     inputClassName?: string,
-    onChange?: React.EventHandler<React.ChangeEvent<HTMLSelectElement>>,
+    onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>,
     onValueChange?: (updatedValue: string) => void,
     onMultiValueChange?: (updatedValue: string[]) => void,
     placeholder?: React.ReactNode,
@@ -40,41 +39,42 @@ export type SelectProps = {
     children?: React.ReactNode
 };
 
-export function Select({
-                           inputRef,
-                           open,
-                           name,
-                           id,
-                           onOpenChange,
-                           value,
-                           onChange,
-                           onValueChange,
-                           onMultiValueChange,
-                           className,
-                           inputClassName,
-                           placeholder,
-                           renderValue,
-                           renderValues,
-                           label,
-                           size = "medium",
-                           includeFocusOutline = true,
-                           error,
-                           disabled,
-                           padding = true,
-                           position = "item-aligned",
-                           endAdornment,
-                           multiple,
-                           invisible,
-                           children,
-                           ...props
-                       }: SelectProps) {
+export const Select = forwardRef<HTMLDivElement, SelectProps>(({
+                                                                      inputRef,
+                                                                      open,
+                                                                      name,
+                                                                      id,
+                                                                      onOpenChange,
+                                                                      value,
+                                                                      onChange,
+                                                                      onValueChange,
+                                                                      onMultiValueChange,
+                                                                      className,
+                                                                      inputClassName,
+                                                                      placeholder,
+                                                                      renderValue,
+                                                                      renderValues,
+                                                                      label,
+                                                                      size = "medium",
+                                                                      includeFocusOutline = true,
+                                                                      error,
+                                                                      disabled,
+                                                                      padding = true,
+                                                                      position = "item-aligned",
+                                                                      endAdornment,
+                                                                      multiple,
+                                                                      invisible,
+                                                                      children,
+                                                                      ...props
+                                                                  }, ref) => {
+
+    const [openInternal, setOpenInternal] = useState(false);
 
-    const [openInternal, setOpenInternal] = React.useState(false);
     useEffect(() => {
         setOpenInternal(open ?? false);
     }, [open]);
 
-    const onValueChangeInternal = React.useCallback((newValue: string) => {
+    const onValueChangeInternal = useCallback((newValue: string) => {
         if (multiple) {
             if (Array.isArray(value) && value.includes(newValue)) {
                 onMultiValueChange?.(value.filter(v => v !== newValue));
@@ -90,12 +90,13 @@ export function Select({
                     name,
                     value: newValue
                 }
-            } as React.ChangeEvent<HTMLSelectElement>;
+            } as ChangeEvent<HTMLSelectElement>;
             onChange(event);
         }
     }, [multiple, onChange, value, onMultiValueChange, onValueChange]);
 
     const hasValue = Array.isArray(value) ? value.length > 0 : value != null;
+
     return (
         <SelectPrimitive.Root
             name={name}
@@ -108,19 +109,18 @@ export function Select({
                 onOpenChange?.(open);
                 setOpenInternal(open);
             }}
-            {...props}>
-
+            {...props}
+        >
             {typeof label === "string" ? <SelectInputLabel error={error}>{label}</SelectInputLabel> : label}
-
-            <div
-                className={cls(
-                    size === "small" ? "min-h-[42px]" : "min-h-[64px]",
-                    "select-none rounded-md text-sm",
-                    invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
-                    disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
-                    "relative flex items-center",
-                    className)}>
-
+            <div className={cls(
+                size === "small" ? "min-h-[42px]" : "min-h-[64px]",
+                "select-none rounded-md text-sm",
+                invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
+                disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+                "relative flex items-center",
+                className
+            )}
+            >
                 <SelectPrimitive.Trigger
                     ref={inputRef}
                     id={id}
@@ -136,63 +136,52 @@ export function Select({
                         "relative flex items-center",
                         includeFocusOutline ? focusedMixin : "",
                         inputClassName
-                    )}>
-
-                    <div className={cls(
-                        "flex-grow w-full max-w-full flex flex-row gap-2 items-center",
-                        "overflow-visible",
-                        size === "small" ? "h-[42px]" : "h-[64px]"
-                    )}>
+                    )}
+                >
+                    <div
+                        ref={ref}
+                        className={cls(
+                            "flex-grow w-full max-w-full flex flex-row gap-2 items-center",
+                            "overflow-visible",
+                            size === "small" ? "h-[42px]" : "h-[64px]"
+                        )}
+                    >
                         <SelectPrimitive.Value placeholder={placeholder} className={"w-full"}>
-                            {renderValue &&
-                                (hasValue && Array.isArray(value)
-                                    ? value.map((v, i) => (
-                                        <div key={v} className={"flex items-center gap-1 max-w-full"}>
-                                            {renderValue ? renderValue(v, i) : v}
-                                        </div>))
-                                    : (typeof value === "string" ? (renderValue ? renderValue(value, 0) : value) : placeholder))}
-
-                                {renderValues && (!hasValue || Array.isArray(value))
-                                    ? renderValues(value as string[] ?? [])
-                                    : null}
-
-                             {!renderValue && !renderValues && hasValue}
-
+                            {renderValue && (hasValue && Array.isArray(value) ? value.map((v, i) => (
+                                <div key={v} className={"flex items-center gap-1 max-w-full"}>
+                                    {renderValue ? renderValue(v, i) : v}
+                                </div>
+                            )) : (typeof value === "string" ? (renderValue ? renderValue(value, 0) : value) : placeholder))}
+                            {renderValues && (!hasValue || Array.isArray(value)) ? renderValues(value as string[] ?? []) : null}
+                            {!renderValue && !renderValues && hasValue}
                         </SelectPrimitive.Value>
                     </div>
-
-                    <SelectPrimitive.Icon className={cls(
-                        "px-2 h-full flex items-center",
-                    )}>
-                        <ExpandMoreIcon size={"small"}
-                                        className={cls("transition", open ? "rotate-180" : "")}/>
+                    <SelectPrimitive.Icon className={cls("px-2 h-full flex items-center")}>
+                        <ExpandMoreIcon size={"small"} className={cls("transition", open ? "rotate-180" : "")}/>
                     </SelectPrimitive.Icon>
-
                 </SelectPrimitive.Trigger>
-
-                {endAdornment && <div className={cls("absolute h-full flex items-center",
-                    size === "small" ? "right-10" : "right-14")}
-                                      onClick={(e) => e.stopPropagation()}>
-                    {endAdornment}
-                </div>}
-
+                {endAdornment && (
+                    <div
+                        className={cls("absolute h-full flex items-center", size === "small" ? "right-10" : "right-14")}
+                        onClick={(e) => e.stopPropagation()}>
+                        {endAdornment}
+                    </div>
+                )}
             </div>
             <SelectPrimitive.Portal>
-                <SelectPrimitive.Content
-                    position={position}
-                    className="z-50 relative overflow-hidden border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-800 p-2 rounded-lg shadow-lg">
-                    <SelectPrimitive.Viewport
-                        className={"p-1"}
-                        style={{
-                            maxHeight: "var(--radix-select-content-available-height)"
-                        }}>
+                <SelectPrimitive.Content position={position}
+                                         className="z-50 relative overflow-hidden border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-800 p-2 rounded-lg shadow-lg">
+                    <SelectPrimitive.Viewport className={"p-1"}
+                                              style={{ maxHeight: "var(--radix-select-content-available-height)" }}>
                         {children}
                     </SelectPrimitive.Viewport>
                 </SelectPrimitive.Content>
             </SelectPrimitive.Portal>
         </SelectPrimitive.Root>
     );
-}
+});
+
+Select.displayName = "Select";
 
 export type SelectItemProps = {
     value: string,

package/src/components/TextField.tsx

@@ -159,7 +159,7 @@ export function TextField<T extends string | number>({
             {label && (
                 <InputLabel
                     className={cls(
-                        "pointer-events-none absolute",
+                        "absolute",
                         size === "medium" ? "top-1" : "-top-1",
                         !error ? (focused ? "text-primary dark:text-primary" : "text-text-secondary dark:text-text-secondary-dark") : "text-red-500 dark:text-red-600",
                         disabled ? "opacity-50" : "")}

package/src/components/Tooltip.tsx

@@ -13,10 +13,11 @@ export type TooltipProps = {
     sideOffset?: number,
     title?: string | React.ReactNode,
     delayDuration?: number;
-    className?: string,
+    asChild?: boolean;
     tooltipClassName?: string,
     tooltipStyle?: React.CSSProperties;
     children: React.ReactNode,
+    className?: string,
     style?: React.CSSProperties;
 };
 
@@ -29,11 +30,12 @@ export const Tooltip = ({
                             align,
                             onOpenChange,
                             title,
-                            className,
-                            style,
                             tooltipClassName,
                             tooltipStyle,
-                            children
+                            children,
+                            asChild = false,
+                            className,
+                            style
                         }: TooltipProps) => {
 
     useInjectStyles("Tooltip", styles);
@@ -41,14 +43,20 @@ export const Tooltip = ({
     if (!title)
         return <>{children}</>;
 
+    const trigger = asChild
+        ? <TooltipPrimitive.Trigger asChild={true}>
+            {children}
+        </TooltipPrimitive.Trigger>
+        : <TooltipPrimitive.Trigger asChild={true}>
+            <div style={style} className={className}>
+                {children}
+            </div>
+        </TooltipPrimitive.Trigger>;
+
     return (
         <TooltipPrimitive.Provider delayDuration={delayDuration}>
             <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>
-                <TooltipPrimitive.Trigger asChild>
-                    <div className={className} style={style}>
-                        {children}
-                    </div>
-                </TooltipPrimitive.Trigger>
+                {trigger}
                 <TooltipPrimitive.Portal>
                     <TooltipPrimitive.Content
                         className={cls("TooltipContent",