@firecms/ui 3.1.0 → 3.2.0-canary.44dc65b

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/ui",
   "type": "module",
-  "version": "3.1.0",
+  "version": "3.2.0-canary.44dc65b",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -114,7 +114,7 @@
     "index.css",
     "tailwind.config.js"
   ],
-  "gitHead": "40f8d9860cb2649c0a195ecebd1a92ccb37f33a6",
+  "gitHead": "af4cd57871ac430b4ffac0295c40b9cd3cee24ff",
   "publishConfig": {
     "access": "public"
   }

package/src/components/DateTimeField.tsx

@@ -51,7 +51,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
     const [focused, setFocused] = useState(false);
     const [internalValue, setInternalValue] = useState<string>("");
     const [isTyping, setIsTyping] = useState(false);
-    const invalidValue = value !== undefined && value !== null && !(value instanceof Date);
+    const invalidValue = value !== undefined && value !== null && (!(value instanceof Date) || isNaN((value as Date).getTime()));
 
     useInjectStyles("DateTimeField", inputStyles);
 
@@ -84,7 +84,12 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
         };
 
         const formatter = new Intl.DateTimeFormat("en-CA", options);
-        const parts = formatter.formatToParts(dateValue);
+        let parts: Intl.DateTimeFormatPart[];
+        try {
+            parts = formatter.formatToParts(dateValue);
+        } catch {
+            return "";
+        }
 
         const getPart = (type: string) => parts.find(p => p.type === type)?.value ?? "";
 

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>;
 }