@firecms/ui 3.1.0-canary.1df3b2c → 3.1.0-canary.501d471

package/src/components/Tabs.tsx

@@ -1,34 +1,137 @@
-import React 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({
-                         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,
+    mode = "primary"
+}: 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 <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"
+                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",
+                    mode === "primary" && "mr-1 bg-surface-50 dark:bg-surface-900 border",
+                    mode === "primary" && defaultBorderMixin,
+                    mode === "secondary" && "mr-1"
+                )}
+            >
+                <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(
+                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}
+            </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",
+                    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 = {
@@ -40,23 +143,36 @@ export type TabProps = {
 };
 
 export function Tab({
-                        value,
-                        className,
-                        innerClassName,
-                        children,
-                        disabled
-                    }: TabProps) {
+    value,
+    className,
+    innerClassName,
+    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,
-                                      className,
-                                      innerClassName)}>
+        disabled={disabled}
+        className={cls(
+            mode === "secondary" ? secondaryClasses : primaryClasses,
+            className,
+            innerClassName)}>
         {children}
     </TabsPrimitive.Trigger>;
 }

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