@firecms/ui 3.0.1 → 3.1.0-canary.02232f4

package/src/components/TextareaAutosize.tsx

@@ -1,8 +1,7 @@
 "use client";
 import * as React from "react";
 import { useLayoutEffect } from "react";
-import * as ReactDOM from "react-dom";
-import { cls, debounce } from "../util";
+import { debounce } from "../util";
 
 type State = {
     outerHeightStyle: number;
@@ -13,33 +12,6 @@ function getStyleValue(value: string) {
     return parseInt(value, 10) || 0;
 }
 
-const styles: {
-    shadow: React.CSSProperties;
-} = {
-    shadow: {
-        // Visibility needed to hide the extra text area on iPads
-        visibility: "hidden",
-        // Remove from the content flow
-        position: "absolute",
-        // Ignore the scrollbar width
-        overflow: "hidden",
-        height: 0,
-        top: 0,
-        left: 0,
-        // Create a new layer, increase the isolation of the computed values
-        transform: "translateZ(0)"
-    }
-};
-
-function isEmpty(obj: State) {
-    return (
-        obj === undefined ||
-        obj === null ||
-        Object.keys(obj).length === 0 ||
-        (obj.outerHeightStyle === 0 && !obj.overflow)
-    );
-}
-
 export const TextareaAutosize = React.forwardRef(function TextareaAutosize(
     props: TextareaAutosizeProps,
     ref: React.ForwardedRef<Element>
@@ -60,166 +32,96 @@ export const TextareaAutosize = React.forwardRef(function TextareaAutosize(
     } = props;
 
     const { current: isControlled } = React.useRef(value != null);
-    const inputRef = React.useRef<HTMLInputElement>(null);
+    const inputRef = React.useRef<HTMLTextAreaElement>(null);
     const handleRef = useForkRef(ref, inputRef);
-    const shadowRef = React.useRef<HTMLTextAreaElement>(null);
-    const renders = React.useRef(0);
-    const [state, setState] = React.useState<State>({
-        outerHeightStyle: 0
-    });
-
-    const getUpdatedState = React.useCallback(() => {
-
-        const input = inputRef.current!;
-        if (typeof window === "undefined") {
-            return {
-                outerHeightStyle: 0
-            };
-        }
 
-        const containerWindow = window;
-        const computedStyle = containerWindow.getComputedStyle(input);
+    const syncHeight = React.useCallback(() => {
+        const el = inputRef.current;
+        if (!el || typeof window === "undefined") return;
+        if (el.offsetWidth === 0) return;
 
-        // If input's width is shrunk and it's not visible, don't sync height.
-        if (computedStyle.width === "0px") {
-            return {
-                outerHeightStyle: 0
-            };
-        }
+        const cs = window.getComputedStyle(el);
+        const paddingY =
+            getStyleValue(cs.paddingTop) + getStyleValue(cs.paddingBottom);
+        const borderY =
+            getStyleValue(cs.borderTopWidth) + getStyleValue(cs.borderBottomWidth);
+        const boxSizing = cs.boxSizing;
 
-        const sizeReferenceElement = sizeRef?.current ?? shadowRef.current!;
-        const inputShallow = shadowRef.current!;
+        // ── measure by temporarily collapsing the real element ──
+        const prevHeight = el.style.height;
+        const prevOverflow = el.style.overflowY;
+        el.style.overflowY = "hidden";
+        el.style.height = "0px";
 
-        sizeReferenceElement.style.width = computedStyle.width;
-        inputShallow.value = input.value || props.placeholder || "x";
-        if (inputShallow.value.slice(-1) === "\n") {
-            // Certain fonts which overflow the line height will cause the textarea
-            // to report a different scrollHeight depending on whether the last line
-            // is empty. Make it non-empty to avoid this issue.
-            inputShallow.value += " ";
-        }
+        // scrollHeight = content + padding (always, regardless of box-sizing)
+        const scrollH = el.scrollHeight;
 
-        const boxSizing = computedStyle.boxSizing;
-        const padding =
-            getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
-        const border =
-            getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
-        const minHeight = getStyleValue(computedStyle.minHeight);
+        // Measure single-row height for minRows / maxRows
+        const prevValue = el.value;
+        el.value = "x";
+        const singleRowScrollH = el.scrollHeight;
+        el.value = prevValue;
 
-        // The height of the inner content
-        const innerHeight = sizeReferenceElement.scrollHeight;
+        // Restore immediately — all of this happens before paint (useLayoutEffect)
+        el.style.height = prevHeight;
+        el.style.overflowY = prevOverflow;
 
-        // Measure height of a textarea with a single row
-        inputShallow.value = "x";
-        const singleRowHeight = sizeReferenceElement.scrollHeight;
+        const lineHeight = singleRowScrollH - paddingY;
 
-        // The height of the outer content
-        let outerHeight = innerHeight;
+        let targetHeight = scrollH; // includes padding
 
         if (minRows) {
-            outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
+            targetHeight = Math.max(
+                Number(minRows) * lineHeight + paddingY,
+                targetHeight
+            );
         }
-        if (maxRows) {
-            outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
-        }
-        outerHeight = Math.max(outerHeight, singleRowHeight, minHeight);
-
-        // Take the box sizing into account for applying this value as a style.
-        const outerHeightStyle = outerHeight + (!ignoreBoxSizing && boxSizing === "border-box" ? padding + border : 0);
 
-        const overflow = Math.abs(outerHeight - innerHeight) <= 1;
+        const unclampedHeight = targetHeight;
 
-        return {
-            outerHeightStyle,
-            overflow
-        };
-    }, [maxRows, minRows, props.placeholder]);
-
-    const updateState = React.useCallback((prevState: State, newState: State) => {
-        const {
-            outerHeightStyle,
-            overflow
-        } = newState;
-        // Need a large enough difference to update the height.
-        // This prevents infinite rendering loop.
-        if (
-            renders.current < 20 &&
-            ((outerHeightStyle > 0 &&
-                    Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1) ||
-                prevState.overflow !== overflow)
-        ) {
-            renders.current += 1;
-            return {
-                overflow,
-                outerHeightStyle
-            };
-        }
-        if (process.env.NODE_ENV !== "production") {
-            if (renders.current === 20) {
-                console.error(
-                    [
-                        "MUI: Too many re-renders. The layout is unstable.",
-                        "TextareaAutosize limits the number of renders to prevent an infinite loop."
-                    ].join("\n")
-                );
-            }
+        if (maxRows) {
+            targetHeight = Math.min(
+                Number(maxRows) * lineHeight + paddingY,
+                targetHeight
+            );
         }
-        return prevState;
-    }, []);
 
-    const syncHeight = React.useCallback(() => {
-        const newState = getUpdatedState();
+        // For border-box, height CSS prop = content + padding + border.
+        // scrollHeight already includes padding, so only add border.
+        const extra =
+            !ignoreBoxSizing && boxSizing === "border-box" ? borderY : 0;
+        const finalHeight = Math.ceil(targetHeight + extra);
 
-        if (isEmpty(newState)) {
-            return;
-        }
-        if (onResize) {
-            onResize(newState);
-        }
-
-        setState((prevState) => {
-            return updateState(prevState, newState);
-        });
-    }, [getUpdatedState, onResize, updateState]);
+        const shouldScroll =
+            Math.abs(unclampedHeight - targetHeight) > 1;
 
-    const syncHeightWithFlushSync = React.useCallback(() => {
-        const newState = getUpdatedState();
+        el.style.height = `${finalHeight}px`;
+        el.style.overflowY = shouldScroll ? "auto" : "hidden";
 
-        if (isEmpty(newState)) {
-            return;
+        if (onResize) {
+            onResize({ outerHeightStyle: finalHeight, overflow: !shouldScroll });
         }
+    }, [maxRows, minRows, ignoreBoxSizing, onResize]);
 
-        // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
-        // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
-        // Related issue - https://github.com/facebook/react/issues/24331
-        ReactDOM.flushSync(() => {
-            setState((prevState) => {
-                return updateState(prevState, newState);
-            });
-        });
-    }, [getUpdatedState, updateState]);
+    // ── sync on every layout ──
+    useLayoutEffect(() => {
+        syncHeight();
+    });
 
+    // ── sync on window resize / element resize ──
     React.useEffect(() => {
         const handleResize = debounce(() => {
-            renders.current = 0;
-
-            // If the TextareaAutosize component is replaced by Suspense with a fallback, the last
-            // ResizeObserver's handler that runs because of the change in the layout is trying to
-            // access a dom node that is no longer there (as the fallback component is being shown instead).
             if (inputRef.current) {
-                syncHeightWithFlushSync();
+                syncHeight();
             }
         });
-        let resizeObserver: ResizeObserver;
 
         const input = inputRef.current!;
-        const containerWindow = window;
-        if (typeof window === "undefined") {
-            return;
-        }
+        if (typeof window === "undefined") return;
 
-        containerWindow.addEventListener("resize", handleResize);
+        window.addEventListener("resize", handleResize);
 
+        let resizeObserver: ResizeObserver | undefined;
         if (typeof ResizeObserver !== "undefined") {
             resizeObserver = new ResizeObserver(handleResize);
             resizeObserver.observe(input);
@@ -227,67 +129,35 @@ export const TextareaAutosize = React.forwardRef(function TextareaAutosize(
 
         return () => {
             handleResize.clear();
-            containerWindow.removeEventListener("resize", handleResize);
-            if (resizeObserver) {
-                resizeObserver.disconnect();
-            }
+            window.removeEventListener("resize", handleResize);
+            resizeObserver?.disconnect();
         };
-    }, [syncHeightWithFlushSync]);
-
-    useLayoutEffect(() => {
-        syncHeight();
-    });
-
-    React.useEffect(() => {
-        renders.current = 0;
-    }, [value]);
+    }, [syncHeight]);
 
     const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-        renders.current = 0;
-
         if (!isControlled) {
             syncHeight();
         }
-
         if (onChange) {
             onChange(event);
         }
     };
 
     return (
-        <React.Fragment>
-            <textarea
-                value={value}
-                onChange={handleChange}
-                className={props.className}
-                ref={handleRef}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                // Apply the rows prop to get a "correct" first SSR paint
-                rows={minRows as number}
-                style={{
-                    height: state.outerHeightStyle,
-                    // Need a large enough difference to allow scrolling.
-                    // This prevents infinite rendering loop.
-                    overflow: state.overflow ? "hidden" : undefined,
-                    ...style,
-                }}
-                onScroll={onScroll}
-                {...other}
-            />
-            <textarea
-                aria-hidden
-                className={cls(props.className, props.shadowClassName)}
-                readOnly
-                ref={shadowRef}
-                tabIndex={-1}
-                style={{
-                    padding: 0,
-                    ...styles.shadow,
-                    ...style,
-                }}
-            />
-        </React.Fragment>
+        <textarea
+            value={value}
+            onChange={handleChange}
+            className={props.className}
+            ref={handleRef}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            rows={minRows as number}
+            style={{
+                ...style,
+            }}
+            onScroll={onScroll}
+            {...other}
+        />
     );
 }) as React.FC<TextareaAutosizeProps & { ref?: React.ForwardedRef<Element> }>;
 
@@ -337,11 +207,6 @@ export type TextareaAutosizeProps = Omit<React.InputHTMLAttributes<HTMLTextAreaE
 function useForkRef<Instance>(
     ...refs: Array<React.Ref<Instance> | undefined>
 ): React.RefCallback<Instance> | null {
-    /**
-     * This will create a new function if the refs passed to this hook change and are all defined.
-     * This means react will call the old forkRef with `null` and the new forkRef
-     * with the ref. Cleanup naturally emerges from this behavior.
-     */
     return React.useMemo(() => {
         if (refs.every((ref) => ref == null)) {
             return null;

package/src/components/ToggleButtonGroup.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { cls } from "../util";
+
+export type ToggleButtonOption<T extends string = string> = {
+    value: T;
+    label: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+
+export type ToggleButtonGroupProps<T extends string = string> = {
+    /**
+     * Currently selected value
+     */
+    value: T;
+    /**
+     * Callback when value changes
+     */
+    onValueChange: (value: T) => void;
+    /**
+     * Options to display
+     */
+    options: ToggleButtonOption<T>[];
+    /**
+     * Additional class names for the container
+     */
+    className?: string;
+}
+
+/**
+ * A toggle button group component for selecting one option from a set.
+ * Displays options as buttons in a horizontal row with active state styling.
+ */
+export function ToggleButtonGroup<T extends string = string>({
+    value,
+    onValueChange,
+    options,
+    className
+}: ToggleButtonGroupProps<T>) {
+    return (
+        <div className={cls("inline-flex flex-row bg-surface-100 dark:bg-surface-800 rounded-lg p-1 gap-1", className)}>
+            {options.map((option) => (
+                <button
+                    key={option.value}
+                    type="button"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        if (!option.disabled) {
+                            onValueChange(option.value);
+                        }
+                    }}
+                    disabled={option.disabled}
+                    className={cls(
+                        "flex flex-row items-center justify-center gap-2 py-3 px-4 rounded-md transition-colors",
+                        value === option.value
+                            ? "bg-white dark:bg-surface-950 text-primary dark:text-primary-300"
+                            : "text-surface-500 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700",
+                        option.disabled && "opacity-50 cursor-not-allowed"
+                    )}
+                >
+                    {option.icon}
+                    <span className="text-sm font-medium">{option.label}</span>
+                </button>
+            ))}
+        </div>
+    );
+}

package/src/components/Tooltip.tsx

@@ -4,6 +4,7 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 import { cls } from "../util";
 import { useInjectStyles } from "../hooks";
+import { usePortalContainer } from "../hooks/PortalContainerContext";
 
 export type TooltipProps = {
     open?: boolean,
@@ -21,9 +22,9 @@ export type TooltipProps = {
     className?: string,
     container?: HTMLElement,
     style?: React.CSSProperties;
-};
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "title">;
 
-export const Tooltip = ({
+export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(({
                             open,
                             defaultOpen,
                             side = "bottom",
@@ -38,11 +39,18 @@ export const Tooltip = ({
                             asChild = false,
                             container,
                             className,
-                            style
-                        }: TooltipProps) => {
+                            style,
+                            ...props
+                        }, ref) => {
 
     useInjectStyles("Tooltip", styles);
 
+    // Get the portal container from context
+    const contextContainer = usePortalContainer();
+
+    // Prioritize manual prop, fallback to context container
+    const finalContainer = (container ?? contextContainer ?? undefined) as HTMLElement | undefined;
+
     if (!title)
         return <>{children}</>;
 
@@ -51,7 +59,7 @@ export const Tooltip = ({
             {children}
         </TooltipPrimitive.Trigger>
         : <TooltipPrimitive.Trigger asChild={true}>
-            <div style={style} className={className}>
+            <div style={style} className={className} ref={ref} {...props}>
                 {children}
             </div>
         </TooltipPrimitive.Trigger>;
@@ -60,11 +68,11 @@ export const Tooltip = ({
         <TooltipPrimitive.Provider delayDuration={delayDuration}>
             <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>
                 {trigger}
-                <TooltipPrimitive.Portal container={container}>
+                <TooltipPrimitive.Portal container={finalContainer}>
                     <TooltipPrimitive.Content
                         className={cls("TooltipContent",
                             "max-w-lg leading-relaxed",
-                            "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100",
+                            "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100",
                             tooltipClassName)}
                         style={tooltipStyle}
                         sideOffset={sideOffset === undefined ? 4 : sideOffset}
@@ -76,7 +84,7 @@ export const Tooltip = ({
             </TooltipPrimitive.Root>
         </TooltipPrimitive.Provider>
     );
-};
+});
 
 const styles = `
 

package/src/components/index.tsx

@@ -11,6 +11,7 @@ export * from "./Collapse";
 export * from "./CircularProgress";
 export * from "./Checkbox";
 export * from "./Chip";
+export * from "./ColorPicker";
 export * from "./DateTimeField";
 export * from "./Dialog";
 export * from "./DialogActions";
@@ -29,7 +30,9 @@ export * from "./Menubar";
 export * from "./MultiSelect";
 export * from "./Paper";
 export * from "./RadioGroup";
+export * from "./ResizablePanels";
 export * from "./SearchBar";
+export * from "./SearchableSelect";
 export * from "./Select";
 export * from "./Separator";
 export * from "./Slider";
@@ -44,4 +47,5 @@ export * from "./Popover";
 export * from "./Badge";
 export * from "./DebouncedTextField";
 export * from "./Skeleton";
+export * from "./ToggleButtonGroup";
 

package/src/hooks/PortalContainerContext.tsx

@@ -0,0 +1,48 @@
+"use client";
+import React, { createContext, useContext } from "react";
+
+export interface PortalContainerContextType {
+    container: HTMLElement | null;
+}
+
+const PortalContainerContext = createContext<PortalContainerContextType | undefined>(undefined);
+
+export interface PortalContainerProviderProps {
+    container: HTMLElement | null;
+    children: React.ReactNode;
+}
+
+/**
+ * Provider component that sets the portal container for all descendants.
+ * This can be used at any level of the tree to specify where portals should be attached.
+ *
+ * @example
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null);
+ *
+ * <div ref={containerRef}>
+ *   <PortalContainerProvider container={containerRef.current}>
+ *     <YourComponents />
+ *   </PortalContainerProvider>
+ * </div>
+ * ```
+ */
+export function PortalContainerProvider({ container, children }: PortalContainerProviderProps) {
+    return (
+        <PortalContainerContext.Provider value={{ container }}>
+            {children}
+        </PortalContainerContext.Provider>
+    );
+}
+
+/**
+ * Hook to access the portal container from context.
+ * Returns null if no provider is found in the tree.
+ *
+ * @returns The portal container element or null
+ */
+export function usePortalContainer(): HTMLElement | null {
+    const context = useContext(PortalContainerContext);
+    return context?.container ?? null;
+}
+

package/src/hooks/index.ts

@@ -2,3 +2,4 @@ export * from "./useInjectStyles";
 export * from "./useOutsideAlerter";
 export * from "./useDebounceValue";
 export * from "./useIconStyles";
+export * from "./PortalContainerContext";

package/src/hooks/useInjectStyles.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { useEffect } from "react";
+import { usePortalContainer } from "./PortalContainerContext";
 
 /**
  * Use this hook to create a `<style>` element and inject it into the DOM.
@@ -9,13 +10,21 @@ import { useEffect } from "react";
  */
 export function useInjectStyles(key: string, styles: string) {
 
+    const portalContainer = usePortalContainer();
+
     useEffect(() => {
-        const styleElement = document.getElementById(key);
-        if (!styleElement) {
+        if (typeof document === "undefined") return;
+
+        const targetContainer: HTMLElement | null = portalContainer ?? document.head;
+
+        // Try to find an existing style element within the target container first
+        const existingStyle = (targetContainer as HTMLElement).querySelector?.(`#${key}`) as HTMLStyleElement | null;
+
+        if (!existingStyle) {
             const style = document.createElement("style");
             style.id = key;
             style.innerHTML = styles;
-            document.head.appendChild(style);
+            (targetContainer || document.head).appendChild(style);
         }
     }, []);
 

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;

package/src/icons/FirestoreIcon.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+import { IconProps } from "./Icon";
+
+const sizeMap: Record<string, number> = {
+    smallest: 16,
+    small: 20,
+    medium: 24,
+    large: 28,
+};
+
+/**
+ * Firebase Firestore flame icon (monochrome, uses currentColor).
+ * @group Icons
+ */
+export function FirestoreIcon(props: IconProps) {
+    const s = typeof props.size === "number"
+        ? props.size
+        : sizeMap[props.size ?? "medium"] ?? 24;
+
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className={props.className}
+            fill={"currentColor"}
+            width={s}
+            height={s}
+            viewBox="0 0 73 91"
+        >
+            <path
+                d="M22.575 87.933A52.16 52.16 0 0034.787 90.513c5.84.204 11.395-1.004 16.359-3.298a70.68 70.68 0 01-15.948-10.013c-2.98 4.778-7.393 8.548-12.623 10.731z"
+                opacity=".7"
+            />
+            <path
+                d="M35.2 77.205c-10.505-9.714-16.878-23.776-16.339-39.2.018-.499.045-1.001.075-1.5a39.51 39.51 0 00-5.866-.855 38.77 38.77 0 00-8.34.997A53.07 53.07 0 00.022 53.236c-.544 15.58 8.884 29.191 22.553 34.697 5.23-2.18 9.642-5.948 12.625-10.728z"
+                opacity=".6"
+            />
+            <path
+                d="M35.2 77.205a31.63 31.63 0 004.096-13.428c.452-12.985-8.278-24.155-20.36-27.273-.03.5-.058 1.002-.076 1.502-.536 15.421 5.835 29.483 16.34 39.199z"
+                opacity=".7"
+            />
+            <path
+                d="M37.944 0a73.99 73.99 0 00-15.603 21.156 72.82 72.82 0 00-3.41 15.349c12.082 3.117 20.812 14.288 20.36 27.275a31.58 31.58 0 01-4.098 13.425 70.76 70.76 0 0015.948 10.013c11.951-5.523 20.43-17.41 20.919-31.467.318-9.11-3.181-17.228-8.126-24.081C58.711 24.424 37.944 0 37.944 0z"
+            />
+        </svg>
+    );
+}