@firecms/ui 3.1.0-canary.1df3b2c → 3.1.0-canary.24c8270

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/ui",
   "type": "module",
-  "version": "3.1.0-canary.1df3b2c",
+  "version": "3.1.0-canary.24c8270",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -80,8 +80,8 @@
     "tailwind-merge": "^2.6.0"
   },
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react": ">=18.3.1 || >=19.0.0",
+    "react-dom": ">=18.3.1 || >=19.0.0"
   },
   "devDependencies": {
     "@jest/globals": "^30.2.0",
@@ -91,8 +91,8 @@
     "@types/jest": "^29.5.14",
     "@types/node": "^20.19.17",
     "@types/object-hash": "^3.0.6",
-    "@types/react": "^18.3.24",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.3",
+    "@types/react-dom": "^19.2.3",
     "@types/react-measure": "^2.0.12",
     "@vitejs/plugin-react": "^4.7.0",
     "babel-plugin-react-compiler": "^19.0.0-beta-af1b7da-20250417",
@@ -114,7 +114,7 @@
     "index.css",
     "tailwind.config.js"
   ],
-  "gitHead": "5074584b15be0d0507a4dadc148f03d82e9fe495",
+  "gitHead": "fa98925bad34308ed66e7ea68adcc07eb38184ae",
   "publishConfig": {
     "access": "public"
   }

package/src/components/DebouncedTextField.tsx

@@ -4,7 +4,7 @@ import { TextField, TextFieldProps } from "./index";
 
 export function DebouncedTextField<T extends string | number>(props: TextFieldProps<T>) {
 
-    const previousEventRef = React.useRef<ChangeEvent<any>>();
+    const previousEventRef = React.useRef<ChangeEvent<any>>(undefined);
     const [internalValue, setInternalValue] = React.useState(props.value);
 
     const deferredValue = useDeferredValue(internalValue);
@@ -28,6 +28,6 @@ export function DebouncedTextField<T extends string | number>(props: TextFieldPr
     }, []);
 
     return <TextField {...props}
-                      onChange={internalOnChange}
-                      value={internalValue}/>
+        onChange={internalOnChange}
+        value={internalValue} />
 }

package/src/components/MultiSelect.tsx

@@ -55,7 +55,7 @@ interface MultiSelectProps<T extends MultiSelectValue = string> {
     multiple?: boolean,
     includeSelectAll?: boolean,
     includeClear?: boolean,
-    inputRef?: React.RefObject<HTMLButtonElement>,
+    inputRef?: React.RefObject<HTMLButtonElement | null>,
     padding?: boolean,
     invisible?: boolean,
     children: React.ReactNode;
@@ -118,20 +118,18 @@ export const MultiSelect = React.forwardRef<
 
         const allValues = React.useMemo(() => children
             ?
-            // @ts-ignore
             Children.map(children, (child) => {
-                if (React.isValidElement(child)) {
+                if (React.isValidElement<MultiSelectItemProps>(child)) {
                     return child.props.value;
                 }
                 return null;
-            }).filter(Boolean) as any[]
+            })?.filter(Boolean) ?? []
             : [], [children]);
 
         const optionsMap = React.useMemo(() => {
             const map = new Map<string, React.ReactNode>();
             Children.forEach(children, (child) => {
-                if (React.isValidElement(child)) {
-                    // @ts-ignore
+                if (React.isValidElement<MultiSelectItemProps>(child)) {
                     map.set(String(child.props.value), child.props.children);
                 }
             });

package/src/components/Select.tsx

@@ -36,7 +36,7 @@ export type SelectProps<T extends SelectValue = string> = {
     error?: boolean,
     position?: "item-aligned" | "popper",
     endAdornment?: React.ReactNode,
-    inputRef?: React.RefObject<HTMLButtonElement>,
+    inputRef?: React.RefObject<HTMLButtonElement | null>,
     padding?: boolean,
     invisible?: boolean,
     children?: React.ReactNode;
@@ -45,33 +45,33 @@ export type SelectProps<T extends SelectValue = string> = {
 };
 
 export const Select = forwardRef<HTMLDivElement, SelectProps>(({
-                                                                   inputRef,
-                                                                   open,
-                                                                   name,
-                                                                   fullWidth = false,
-                                                                   id,
-                                                                   onOpenChange,
-                                                                   value,
-                                                                   onChange,
-                                                                   onValueChange,
-                                                                   className,
-                                                                   inputClassName,
-                                                                   viewportClassName,
-                                                                   placeholder,
-                                                                   renderValue,
-                                                                   label,
-                                                                   size = "large",
-                                                                   error,
-                                                                   disabled,
-                                                                   padding = true,
-                                                                   position = "item-aligned",
-                                                                   endAdornment,
-                                                                   invisible,
-                                                                   children,
-                                                                   dataType = "string",
-                                                                   portalContainer: manualContainer, // Rename to avoid confusion
-                                                                   ...props
-                                                               }, ref) => {
+    inputRef,
+    open,
+    name,
+    fullWidth = false,
+    id,
+    onOpenChange,
+    value,
+    onChange,
+    onValueChange,
+    className,
+    inputClassName,
+    viewportClassName,
+    placeholder,
+    renderValue,
+    label,
+    size = "large",
+    error,
+    disabled,
+    padding = true,
+    position = "item-aligned",
+    endAdornment,
+    invisible,
+    children,
+    dataType = "string",
+    portalContainer: manualContainer, // Rename to avoid confusion
+    ...props
+}, ref) => {
 
     const [openInternal, setOpenInternal] = useState(open ?? false);
 
@@ -115,7 +115,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
         // Find the child that matches the current value to display its content
         let found: React.ReactNode = null;
         Children.forEach(children, (child) => {
-            if (React.isValidElement(child) && String((child.props as any).value) === String(value)) {
+            if (React.isValidElement<SelectItemProps>(child) && String(child.props.value) === String(value)) {
                 found = child.props.children;
             }
         });
@@ -192,30 +192,30 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                                 "min-h-[64px]": size === "large"
                             }
                         )}>
-                            <SelectPrimitive.Value
-                                onClick={(e) => {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                }}
-                                placeholder={placeholder}
-                                className={"w-full"}>
+                        <SelectPrimitive.Value
+                            onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                            }}
+                            placeholder={placeholder}
+                            className={"w-full"}>
 
-                                {hasValue && value !== undefined && renderValue
-                                    ? renderValue(value)
-                                    : (displayChildren || placeholder)
-                                }
+                            {hasValue && value !== undefined && renderValue
+                                ? renderValue(value)
+                                : (displayChildren || placeholder)
+                            }
 
-                            </SelectPrimitive.Value>
-                        </div>
+                        </SelectPrimitive.Value>
+                    </div>
 
-                        <SelectPrimitive.Icon asChild>
-                            <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
-                                                   className={cls("transition", open ? "rotate-180" : "", {
-                                                       "px-2": size === "large",
-                                                       "px-1": size === "medium" || size === "small",
-                                                   })}/>
-                        </SelectPrimitive.Icon>
-                 </SelectPrimitive.Trigger>
+                    <SelectPrimitive.Icon asChild>
+                        <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
+                            className={cls("transition", open ? "rotate-180" : "", {
+                                "px-2": size === "large",
+                                "px-1": size === "medium" || size === "small",
+                            })} />
+                    </SelectPrimitive.Icon>
+                </SelectPrimitive.Trigger>
 
                 {endAdornment && (
                     <div
@@ -232,9 +232,9 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
             {/* Pass the calculated finalContainer */}
             <SelectPrimitive.Portal container={finalContainer}>
                 <SelectPrimitive.Content position={position}
-                                         className={cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin)}>
+                    className={cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin)}>
                     <SelectPrimitive.Viewport className={cls("p-1", viewportClassName)}
-                                              style={{ maxHeight: "var(--radix-select-content-available-height)" }}>
+                        style={{ maxHeight: "var(--radix-select-content-available-height)" }}>
                         {children}
                     </SelectPrimitive.Viewport>
                 </SelectPrimitive.Content>
@@ -254,11 +254,11 @@ export type SelectItemProps<T extends SelectValue = string> = {
 };
 
 export const SelectItem = React.memo(function SelectItem<T extends SelectValue = string>({
-                                                               value,
-                                                               children,
-                                                               disabled,
-                                                               className
-                                                           }: SelectItemProps<T>) {
+    value,
+    children,
+    disabled,
+    className
+}: SelectItemProps<T>) {
     // Convert value to string for Radix UI
     const stringValue = String(value);
 
@@ -280,7 +280,7 @@ export const SelectItem = React.memo(function SelectItem<T extends SelectValue =
         <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
         <div
             className="absolute left-1 data-[state=checked]:block hidden">
-            <CheckIcon size={16}/>
+            <CheckIcon size={16} />
         </div>
     </SelectPrimitive.Item>;
 });
@@ -292,10 +292,10 @@ export type SelectGroupProps = {
 };
 
 export const SelectGroup = React.memo(function SelectGroup({
-                                label,
-                                children,
-                                className
-                            }: SelectGroupProps) {
+    label,
+    children,
+    className
+}: SelectGroupProps) {
     return <>
         <SelectPrimitive.Group
             className={cls(

package/src/components/Tabs.tsx

@@ -1,7 +1,9 @@
-import React from "react";
+import React, { useRef, useState, useEffect } from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cls } from "../util";
 import { defaultBorderMixin } from "../styles";
+import { IconButton } from "./IconButton";
+import { ChevronLeftIcon, ChevronRightIcon } from "../icons";
 
 export type TabsProps = {
     value: string,
@@ -12,22 +14,108 @@ export type TabsProps = {
 };
 
 export function Tabs({
-                         value,
-                         onValueChange,
-                         className,
-                         innerClassName,
-                         children
-                     }: TabsProps) {
-    return <TabsPrimitive.Root value={value} onValueChange={onValueChange} className={className}>
-        <TabsPrimitive.List className={cls(
-            "border",
-            defaultBorderMixin,
-            "gap-2",
-            "inline-flex h-10 items-center justify-center rounded-md bg-surface-50 p-1 text-surface-600 dark:bg-surface-900 dark:text-surface-400",
-            innerClassName)
-        }>
-            {children}
-        </TabsPrimitive.List>
+    value,
+    onValueChange,
+    className,
+    innerClassName,
+    children
+}: TabsProps) {
+    const scrollContainerRef = useRef<HTMLDivElement>(null);
+    const [showLeftScroll, setShowLeftScroll] = useState(false);
+    const [showRightScroll, setShowRightScroll] = useState(false);
+    const [isScrollable, setIsScrollable] = useState(false);
+
+    const checkScroll = () => {
+        if (scrollContainerRef.current) {
+            const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
+            setShowLeftScroll(scrollLeft > 0);
+            setShowRightScroll(Math.ceil(scrollLeft + clientWidth) < scrollWidth);
+            setIsScrollable(scrollWidth > clientWidth);
+        }
+    };
+
+    useEffect(() => {
+        checkScroll();
+        window.addEventListener("resize", checkScroll);
+
+        let observer: ResizeObserver;
+        if (scrollContainerRef.current) {
+            observer = new ResizeObserver(checkScroll);
+            observer.observe(scrollContainerRef.current);
+            if (scrollContainerRef.current.firstElementChild) {
+                observer.observe(scrollContainerRef.current.firstElementChild);
+            }
+        }
+
+        return () => {
+            window.removeEventListener("resize", checkScroll);
+            observer?.disconnect();
+        };
+    }, [children]);
+
+    const scroll = (direction: "left" | "right") => {
+        if (scrollContainerRef.current) {
+            const container = scrollContainerRef.current;
+            const scrollAmount = Math.max(container.clientWidth / 2, 200);
+            const targetScroll = container.scrollLeft + (direction === "left" ? -scrollAmount : scrollAmount);
+
+            container.scrollTo({
+                left: targetScroll,
+                behavior: "smooth"
+            });
+            // checkScroll will be called by onScroll event
+        }
+    };
+
+    return <TabsPrimitive.Root value={value} onValueChange={onValueChange} className={cls("flex flex-row items-center min-w-0", className)}>
+        {isScrollable && (
+            <button
+                type="button"
+                disabled={!showLeftScroll}
+                onClick={() => scroll("left")}
+                className={cls(
+                    "flex-shrink-0 z-10 flex items-center justify-center rounded-md px-0.5 py-1.5 transition-all h-10 w-6",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400",
+                    "disabled:pointer-events-none disabled:opacity-0",
+                    "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800",
+                    "mr-1 bg-surface-50 dark:bg-surface-900 border", defaultBorderMixin
+                )}
+            >
+                <ChevronLeftIcon size="small" />
+            </button>
+        )}
+        <div
+            ref={scrollContainerRef}
+            className="flex-1 overflow-x-auto no-scrollbar min-w-0"
+            onScroll={checkScroll}
+            style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
+        >
+            <TabsPrimitive.List className={cls(
+                "border",
+                defaultBorderMixin,
+                "gap-2",
+                "inline-flex h-10 items-center justify-center rounded-md bg-surface-50 p-1 text-surface-600 dark:bg-surface-900 dark:text-surface-400",
+                innerClassName)
+            }>
+                {children}
+            </TabsPrimitive.List>
+        </div>
+        {isScrollable && (
+            <button
+                type="button"
+                disabled={!showRightScroll}
+                onClick={() => scroll("right")}
+                className={cls(
+                    "flex-shrink-0 z-10 flex items-center justify-center rounded-md px-0.5 py-1.5 transition-all h-10 w-6",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400",
+                    "disabled:pointer-events-none disabled:opacity-0",
+                    "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800",
+                    "ml-1 bg-surface-50 dark:bg-surface-900 border", defaultBorderMixin
+                )}
+            >
+                <ChevronRightIcon size="small" />
+            </button>
+        )}
     </TabsPrimitive.Root>
 }
 
@@ -40,23 +128,23 @@ export type TabProps = {
 };
 
 export function Tab({
-                        value,
-                        className,
-                        innerClassName,
-                        children,
-                        disabled
-                    }: TabProps) {
+    value,
+    className,
+    innerClassName,
+    children,
+    disabled
+}: TabProps) {
     return <TabsPrimitive.Trigger value={value}
-                                  disabled={disabled}
-                                  className={cls(
-                                      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all",
-                                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2",
-                                      "disabled:pointer-events-none disabled:opacity-50",
-                                      "data-[state=active]:bg-white data-[state=active]:text-surface-900 dark:data-[state=active]:bg-surface-950 dark:data-[state=active]:text-surface-50",
-                                      // "data-[state=active]:border",
-                                      // defaultBorderMixin,
-                                      className,
-                                      innerClassName)}>
+        disabled={disabled}
+        className={cls(
+            "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2",
+            "disabled:pointer-events-none disabled:opacity-50",
+            "data-[state=active]:bg-white data-[state=active]:text-surface-900 dark:data-[state=active]:bg-surface-950 dark:data-[state=active]:text-surface-50",
+            // "data-[state=active]:border",
+            // defaultBorderMixin,
+            className,
+            innerClassName)}>
         {children}
     </TabsPrimitive.Trigger>;
 }

package/src/hooks/useOutsideAlerter.tsx

@@ -5,7 +5,7 @@ import { RefObject, useEffect } from "react";
 /**
  * Hook that alerts clicks outside the passed ref
  */
-export function useOutsideAlerter(ref: RefObject<HTMLElement>, onOutsideClick: () => void, active = true): void {
+export function useOutsideAlerter(ref: RefObject<HTMLElement | null>, onOutsideClick: () => void, active = true): void {
     useEffect(() => {
         if (!active)
             return;