@firecms/ui 3.1.0-canary.24c8270 → 3.1.0-canary.501d471

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/ui",
   "type": "module",
-  "version": "3.1.0-canary.24c8270",
+  "version": "3.1.0-canary.501d471",
   "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": "fa98925bad34308ed66e7ea68adcc07eb38184ae",
+  "gitHead": "ed0d4e02d670aff9297a710a1d45a1095a1cbaea",
   "publishConfig": {
     "access": "public"
   }

package/src/components/BooleanSwitchWithLabel.tsx

@@ -18,6 +18,7 @@ export type BooleanSwitchWithLabelProps = BooleanSwitchProps & {
     fullWidth?: boolean,
     className?: string,
     inputClassName?: string,
+    switchAdornment?: React.ReactNode,
 };
 
 /**
@@ -37,6 +38,7 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
                                                                           className,
                                                                           fullWidth = true,
                                                                           inputClassName,
+                                                                          switchAdornment,
                                                                           ...props
                                                                       }: BooleanSwitchWithLabelProps) {
 
@@ -100,6 +102,8 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
                 {...props}
             />
 
+            {switchAdornment}
+
             <div className={cls(
                 "flex-grow",
                 position === "end" ? "mr-4" : "ml-4",

package/src/components/Button.tsx

@@ -28,6 +28,7 @@ const ButtonInner = React.memo(React.forwardRef<
        fullWidth = false,
        component: Component,
        color = "neutral",
+       loading,
        ...props
    }: ButtonProps<any>, ref) => {
 
@@ -63,7 +64,7 @@ const ButtonInner = React.memo(React.forwardRef<
         "text-text-disabled dark:text-text-disabled-dark": disabled,
         "border border-transparent opacity-50": variant === "text" && disabled,
         "border border-surface-500 opacity-50": variant === "outlined" && disabled,
-        "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40 bg-surface-300/40 dark:bg-surface-500/40": variant === "filled" && disabled,
+        "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-70 bg-surface-300/70 dark:bg-surface-500/70": variant === "filled" && disabled,
     });
 
     const sizeClasses = cls(

package/src/components/Chip.tsx

@@ -29,7 +29,7 @@ const sizeClassNames = {
 /**
  * @group Preview components
  */
-export function Chip({
+export const Chip = React.forwardRef<HTMLDivElement, ChipProps>(function Chip({
                          children,
                          colorScheme,
                          error,
@@ -39,11 +39,12 @@ export function Chip({
                          size = "large",
                          className,
                          style
-                     }: ChipProps) {
+                     }: ChipProps, ref) {
 
     const usedColorScheme = typeof colorScheme === "string" ? getColorSchemeForKey(colorScheme) : colorScheme;
     return (
         <div
+            ref={ref}
             className={cls("rounded-lg max-w-full w-max h-fit font-regular inline-flex gap-1",
                 "text-ellipsis",
                 "items-center",
@@ -67,4 +68,4 @@ export function Chip({
             {icon}
         </div>
     );
-}
+});

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/MultiSelect.tsx

@@ -90,6 +90,7 @@ export const MultiSelect = React.forwardRef<
             open,
             onOpenChange,
             portalContainer,
+            endAdornment,
         },
         ref
     ) => {
@@ -269,7 +270,7 @@ export const MultiSelect = React.forwardRef<
                                         })}
                                     </div>
                                     <div className="flex items-center justify-between">
-                                        {includeClear && <CloseIcon
+                                        {includeClear && !endAdornment && <CloseIcon
                                             className={"ml-4"}
                                             size={"small"}
                                             onClick={(event) => {
@@ -277,6 +278,14 @@ export const MultiSelect = React.forwardRef<
                                                 handleClear();
                                             }}
                                         />}
+                                        {endAdornment && (
+                                            <div className="ml-4 flex items-center" onClick={(e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                            }}>
+                                                {endAdornment}
+                                            </div>
+                                        )}
                                         <div className={cls("px-2 h-full flex items-center")}>
                                             <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
                                                 className={cls("transition", isPopoverOpen ? "rotate-180" : "")} />
@@ -288,9 +297,19 @@ export const MultiSelect = React.forwardRef<
                                     <span className="text-sm">
                                         {placeholder}
                                     </span>
-                                    <div className={cls("px-2 h-full flex items-center")}>
-                                        <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
-                                            className={cls("transition", isPopoverOpen ? "rotate-180" : "")} />
+                                    <div className="flex items-center justify-between">
+                                        {endAdornment && (
+                                            <div className="ml-4 flex items-center" onClick={(e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                            }}>
+                                                {endAdornment}
+                                            </div>
+                                        )}
+                                        <div className={cls("px-2 h-full flex items-center")}>
+                                            <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
+                                                className={cls("transition", isPopoverOpen ? "rotate-180" : "")} />
+                                        </div>
                                     </div>
                                 </div>
                             )}

package/src/components/ResizablePanels.tsx

@@ -0,0 +1,181 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { cls } from "../util";
+
+export type ResizablePanelsProps = {
+    firstPanel: React.ReactNode;
+    secondPanel: React.ReactNode;
+    /** Whether the first panel is visible (e.g. Sidebar) */
+    showFirstPanel?: boolean;
+    /** Whether the second panel is visible (e.g. Results) */
+    showSecondPanel?: boolean;
+    /** 0-100 representing the width/height of the first panel */
+    panelSizePercent: number;
+    onPanelSizeChange: (sizePercent: number) => void;
+    minPanelSizePx?: number;
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+};
+
+export function ResizablePanels({
+    firstPanel,
+    secondPanel,
+    showFirstPanel = true,
+    showSecondPanel = true,
+    panelSizePercent,
+    onPanelSizeChange,
+    minPanelSizePx = 200,
+    orientation = 'horizontal',
+    className
+}: ResizablePanelsProps) {
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const isResizingRef = useRef(false);
+
+    // For local layout tracking without triggering React rerenders during drag
+    const firstPanelRef = useRef<HTMLDivElement>(null);
+    const startPosRef = useRef(0);
+    const startSizeRef = useRef(0);
+
+    const [isResizing, setIsResizing] = useState(false);
+    const isHorizontal = orientation === 'horizontal';
+
+    const handleResizeStart = useCallback((e: React.MouseEvent) => {
+        if (!showFirstPanel || !showSecondPanel) return;
+
+        e.preventDefault();
+        isResizingRef.current = true;
+        setIsResizing(true);
+
+        startPosRef.current = isHorizontal ? e.clientX : e.clientY;
+
+        if (firstPanelRef.current) {
+            const rect = firstPanelRef.current.getBoundingClientRect();
+            startSizeRef.current = isHorizontal ? rect.width : rect.height;
+        }
+
+        document.body.style.cursor = isHorizontal ? 'col-resize' : 'row-resize';
+        document.body.style.userSelect = 'none';
+    }, [isHorizontal, showFirstPanel, showSecondPanel]);
+
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            if (!isResizingRef.current || !containerRef.current) return;
+
+            const currentPos = isHorizontal ? e.clientX : e.clientY;
+            const delta = currentPos - startPosRef.current; // Dragging right/down increases first panel size
+
+            let newSize = startSizeRef.current + delta;
+
+            const containerRect = containerRef.current.getBoundingClientRect();
+            const containerTotal = isHorizontal ? containerRect.width : containerRect.height;
+
+            // Limit the maximum size to prevent pushing the second panel offscreen
+            const maxSize = containerTotal - minPanelSizePx;
+
+            newSize = Math.max(minPanelSizePx, Math.min(newSize, maxSize));
+
+            // Directly update the DOM for performance while dragging
+            if (firstPanelRef.current) {
+                if (isHorizontal) {
+                    firstPanelRef.current.style.width = `${newSize}px`;
+                } else {
+                    firstPanelRef.current.style.height = `${newSize}px`;
+                }
+            }
+        };
+
+        const handleMouseUp = () => {
+            if (isResizingRef.current && containerRef.current && firstPanelRef.current) {
+                isResizingRef.current = false;
+                setIsResizing(false);
+                document.body.style.cursor = "";
+                document.body.style.userSelect = "";
+
+                // Calculate the final percentage and notify parent
+                const containerRect = containerRef.current.getBoundingClientRect();
+                const firstPanelRect = firstPanelRef.current.getBoundingClientRect();
+
+                const containerSize = isHorizontal ? containerRect.width : containerRect.height;
+                const finalSize = isHorizontal ? firstPanelRect.width : firstPanelRect.height;
+
+                if (containerSize > 0) {
+                    const newPercent = (finalSize / containerSize) * 100;
+                    onPanelSizeChange(Math.max(0, Math.min(100, newPercent)));
+                }
+            }
+        };
+
+        window.addEventListener("mousemove", handleMouseMove);
+        window.addEventListener("mouseup", handleMouseUp);
+
+        return () => {
+            window.removeEventListener("mousemove", handleMouseMove);
+            window.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [onPanelSizeChange, isHorizontal, minPanelSizePx]);
+
+    // Calculate applied size
+    const appliedBasis = !showFirstPanel ? "0%" : (showSecondPanel ? `${panelSizePercent}%` : "100%");
+
+    return (
+        <div
+            ref={containerRef}
+            className={cls(
+                "relative w-full h-full flex overflow-hidden",
+                isHorizontal ? "flex-row" : "flex-col",
+                className
+            )}
+        >
+            {/* First Panel */}
+            <div
+                ref={firstPanelRef}
+                className={cls(
+                    "relative flex-shrink-0 flex flex-col overflow-hidden",
+                    !showFirstPanel && "hidden"
+                )}
+                style={{
+                    width: isHorizontal ? appliedBasis : "100%",
+                    height: !isHorizontal ? appliedBasis : "100%",
+                    minWidth: isHorizontal && showFirstPanel && showSecondPanel ? `${minPanelSizePx}px` : undefined,
+                    minHeight: !isHorizontal && showFirstPanel && showSecondPanel ? `${minPanelSizePx}px` : undefined,
+                    maxWidth: showSecondPanel ? undefined : "100%",
+                    maxHeight: showSecondPanel ? undefined : "100%",
+                }}
+            >
+                {firstPanel}
+            </div>
+
+            {/* Divider */}
+            {showFirstPanel && showSecondPanel && (
+                <div
+                    className={cls(
+                        "relative z-10 flex flex-shrink-0 items-center justify-center",
+                        isHorizontal ? "w-px h-full cursor-col-resize" : "h-px w-full cursor-row-resize"
+                    )}
+                    onMouseDown={handleResizeStart}
+                >
+                    {/* Transparent Hit Area with Pill inside */}
+                    <div className={cls(
+                        "absolute flex items-center justify-center group",
+                        isHorizontal ? "w-4 h-full cursor-col-resize top-0" : "h-4 w-full cursor-row-resize left-0"
+                    )}>
+                        <div className={cls(
+                            "bg-primary/60 dark:bg-primary rounded-full opacity-0 group-hover:opacity-100 transition-all duration-200",
+                            isHorizontal ? "w-1 h-8" : "h-1 w-8"
+                        )} />
+                    </div>
+                </div>
+            )}
+
+            {/* Second Panel */}
+            <div
+                className={cls(
+                    "flex-grow relative flex flex-col overflow-hidden min-w-0 min-h-0",
+                    !showSecondPanel && "hidden"
+                )}
+            >
+                {secondPanel}
+            </div>
+        </div>
+    );
+}