@firecms/ui 3.2.0 → 3.3.0-canary.451aa49

package/src/components/Skeleton.tsx

@@ -14,8 +14,8 @@ export function Skeleton({
                          }: SkeletonProps) {
     return <span
         style={{
-            width: width ? `${width}px` : "100%",
-            height: height ? `${height}px` : "12px"
+            width: width !== undefined ? `${width}px` : undefined,
+            height: height !== undefined ? `${height}px` : undefined
         }}
         className={
         cls(
@@ -23,6 +23,8 @@ export function Skeleton({
             "bg-surface-accent-200 dark:bg-surface-accent-800 rounded-md",
             "animate-pulse",
             "max-w-full max-h-full",
+            width === undefined ? "w-full" : "",
+            height === undefined ? "h-3" : "",
             className)
     }/>;
 }

package/src/components/Tabs.tsx

@@ -1,16 +1,24 @@
-import React, { useRef, useState, useEffect } from "react";
+import React, { createContext, useContext, 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";
 
+type TabsMode = "primary" | "secondary";
+const TabsModeContext = createContext<TabsMode>("primary");
+
 export type TabsProps = {
     value: string,
     children: React.ReactNode,
     innerClassName?: string,
     className?: string,
-    onValueChange: (value: string) => void
+    onValueChange: (value: string) => void,
+    /**
+     * "primary" renders the default pill-style tabs.
+     * "secondary" renders underline-style tabs suitable for inner/nested panels.
+     */
+    mode?: TabsMode
 };
 
 export function Tabs({
@@ -18,7 +26,8 @@ export function Tabs({
     onValueChange,
     className,
     innerClassName,
-    children
+    children,
+    mode = "primary"
 }: TabsProps) {
     const scrollContainerRef = useRef<HTMLDivElement>(null);
     const [showLeftScroll, setShowLeftScroll] = useState(false);
@@ -67,7 +76,8 @@ export function Tabs({
         }
     };
 
-    return <TabsPrimitive.Root value={value} onValueChange={onValueChange} className={cls("flex flex-row items-center min-w-0", className)}>
+    return <TabsModeContext.Provider value={mode}>
+        <TabsPrimitive.Root value={value} onValueChange={onValueChange} className={cls("flex flex-row items-center min-w-0", className)}>
         {isScrollable && (
             <button
                 type="button"
@@ -78,7 +88,9 @@ export function Tabs({
                     "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
+                    mode === "primary" && "mr-1 bg-surface-50 dark:bg-surface-900 border",
+                    mode === "primary" && defaultBorderMixin,
+                    mode === "secondary" && "mr-1"
                 )}
             >
                 <ChevronLeftIcon size="small" />
@@ -91,10 +103,10 @@ export function Tabs({
             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",
+                mode === "primary" && "border",
+                mode === "primary" && defaultBorderMixin,
+                mode === "primary" && "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",
+                mode === "secondary" && "gap-1 inline-flex h-9 items-center text-surface-500 dark:text-surface-400",
                 innerClassName)
             }>
                 {children}
@@ -110,13 +122,16 @@ export function Tabs({
                     "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
+                    mode === "primary" && "ml-1 bg-surface-50 dark:bg-surface-900 border",
+                    mode === "primary" && defaultBorderMixin,
+                    mode === "secondary" && "ml-1"
                 )}
             >
                 <ChevronRightIcon size="small" />
             </button>
         )}
     </TabsPrimitive.Root>
+    </TabsModeContext.Provider>
 }
 
 export type TabProps = {
@@ -134,15 +149,28 @@ export function Tab({
     children,
     disabled
 }: TabProps) {
+    const mode = useContext(TabsModeContext);
+
+    const primaryClasses = 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",
+    );
+
+    const secondaryClasses = cls(
+        "inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium transition-all",
+        "border-b-2 border-transparent -mb-px",
+        "focus-visible:outline-none",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "hover:text-surface-700 dark:hover:text-surface-300",
+        "data-[state=active]:border-b-primary data-[state=active]:text-primary dark:data-[state=active]:border-b-primary dark:data-[state=active]:text-primary-dark",
+    );
+
     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,
+            mode === "secondary" ? secondaryClasses : primaryClasses,
             className,
             innerClassName)}>
         {children}

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

@@ -22,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",
@@ -39,8 +39,9 @@ export const Tooltip = ({
                             asChild = false,
                             container,
                             className,
-                            style
-                        }: TooltipProps) => {
+                            style,
+                            ...props
+                        }, ref) => {
 
     useInjectStyles("Tooltip", styles);
 
@@ -58,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>;
@@ -83,7 +84,7 @@ export const Tooltip = ({
             </TooltipPrimitive.Root>
         </TooltipPrimitive.Provider>
     );
-};
+});
 
 const styles = `
 

package/src/components/index.tsx

@@ -30,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";

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

package/src/icons/components/DatabaseIcon.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Icon, IconProps } from "../Icon";
+/**
+ * @group Icons
+ */
+export const DatabaseIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"database"} ref={ref}/>
+});
+
+DatabaseIcon.displayName = "DatabaseIcon";

package/src/icons/index.ts

@@ -3,6 +3,7 @@ export * from "./cool_icon_keys";
 export * from "./Icon";
 export * from "./GitHubIcon";
 export * from "./HandleIcon";
+export * from "./FirestoreIcon";
 export * from "./components/_10kIcon";
 export * from "./components/_10mpIcon";
 export * from "./components/_11mpIcon";
@@ -522,6 +523,7 @@ export * from "./components/DataThresholdingIcon";
 export * from "./components/DataUsageIcon";
 export * from "./components/DatasetIcon";
 export * from "./components/DatasetLinkedIcon";
+export * from "./components/DatabaseIcon";
 export * from "./components/DateRangeIcon";
 export * from "./components/DeblurIcon";
 export * from "./components/DeckIcon";