@rebasepro/ui 0.17.3 → 0.18.0

package/src/components/Dialog.tsx

@@ -1,159 +0,0 @@
-"use client";
-import React, { useEffect, useState } from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { paperMixin } from "../styles";
-import { cls } from "../util";
-import { PortalContainerProvider, usePortalContainer } from "../hooks/PortalContainerContext";
-
-export type DialogProps = {
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    children: React.ReactNode;
-    className?: string;
-    containerClassName?: string;
-    fullWidth?: boolean;
-    fullHeight?: boolean;
-    fullScreen?: boolean;
-    scrollable?: boolean;
-    maxWidth?: keyof typeof widthClasses;
-    modal?: boolean;
-    onOpenAutoFocus?: (e: Event) => void;
-    onEscapeKeyDown?: (e: KeyboardEvent) => void;
-    onPointerDownOutside?: (e: Event) => void;
-    onInteractOutside?: (e: Event) => void;
-    /**
-     * If `true`, the dialog will not focus the first focusable element when opened.
-     */
-    disableInitialFocus?: boolean;
-    portalContainer?: HTMLElement | null;
-    "aria-describedby"?: string;
-};
-
-const widthClasses = {
-    xs: "max-w-xs w-xs",
-    sm: "max-w-sm w-sm",
-    md: "max-w-md w-md",
-    lg: "max-w-lg w-lg",
-    xl: "max-w-xl w-xl",
-    "2xl": "max-w-2xl w-2xl",
-    "3xl": "max-w-3xl w-3xl",
-    "4xl": "max-w-4xl w-4xl",
-    "5xl": "max-w-5xl w-5xl",
-    "6xl": "max-w-6xl w-6xl",
-    "7xl": "max-w-7xl w-7xl",
-    full: "max-w-full w-full"
-};
-
-export const Dialog = ({
-                           open,
-                           onOpenChange,
-                           children,
-                           className,
-                           containerClassName,
-                           fullWidth = true,
-                           fullHeight,
-                           fullScreen,
-                           scrollable = true,
-                           maxWidth = "lg",
-                           modal = true,
-                           onOpenAutoFocus,
-                           onEscapeKeyDown,
-                           onPointerDownOutside,
-                           onInteractOutside,
-                           disableInitialFocus = true,
-                           portalContainer,
-                           "aria-describedby": ariaDescribedby
-                       }: DialogProps) => {
-    const [displayed, setDisplayed] = useState(false);
-    // Where popups rendered *inside* this dialog get portaled to. A modal
-    // dialog locks scrolling everywhere but its own content, so a popup
-    // portaled to `document.body` renders fine and then refuses to scroll:
-    // `react-remove-scroll` cancels every wheel event outside the lock.
-    // Handing descendants this host keeps them inside it.
-    const [popupHost, setPopupHost] = useState<HTMLDivElement | null>(null);
-
-    // Get the portal container from context
-    const contextContainer = usePortalContainer();
-
-    // Prioritize manual prop, fallback to context container
-    const finalContainer = (portalContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;
-
-    useEffect(() => {
-        if (!open) {
-            const timeout = setTimeout(() => {
-                setDisplayed(false);
-            }, 100);
-            return () => clearTimeout(timeout);
-        } else {
-            setDisplayed(true);
-            return () => {
-            };
-        }
-    }, [open]);
-
-    return (
-        <DialogPrimitive.Root open={displayed || open}
-                              modal={modal}
-                              onOpenChange={onOpenChange}>
-            <DialogPrimitive.Portal container={finalContainer}>
-
-                <div className={cls("fixed inset-0 z-50", containerClassName)}>
-
-                    <DialogPrimitive.Overlay
-                        className={cls("fixed inset-0 transition-opacity ease-in-out duration-200 bg-black/50 dark:bg-black/60 backdrop-blur-sm",
-                            displayed && open ? "opacity-100" : "opacity-0",
-                            "z-50 fixed top-0 left-0 w-full h-full flex justify-center items-center"
-                        )}
-                        style={{
-                            pointerEvents: displayed ? "auto" : "none"
-                        }}
-                    />
-
-                    <DialogPrimitive.Content
-                        onEscapeKeyDown={onEscapeKeyDown}
-                        onOpenAutoFocus={(e) => {
-                            if (disableInitialFocus) {
-                                e.preventDefault();
-                            }
-                            onOpenAutoFocus?.(e);
-                        }}
-                        onPointerDownOutside={onPointerDownOutside}
-                        onInteractOutside={onInteractOutside}
-                        aria-describedby={ariaDescribedby}
-                        className={cls("relative h-full outline-none flex justify-center items-center z-60 opacity-100 transition-all duration-200 ease-in-out")}
-                    >
-                        <div
-                            className={cls(paperMixin,
-                                "rounded-2xl",
-                                "z-60",
-                                "relative",
-                                "overflow-hidden",
-                                "outline-none focus:outline-none",
-                                fullWidth && !fullScreen ? "w-11/12" : undefined,
-                                fullHeight && !fullScreen ? "h-full" : undefined,
-                                "text-text-primary dark:text-text-primary-dark",
-                                "justify-center items-center",
-                                fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-lg",
-                                "ease-in-out duration-200",
-                                scrollable && "overflow-y-auto",
-                                displayed && open ? "opacity-100 scale-100" : "opacity-0 scale-[0.97]",
-                                maxWidth && !fullScreen ? widthClasses[maxWidth] : undefined,
-                                className
-                            )}>
-                            <PortalContainerProvider container={popupHost}>
-                                {children}
-                            </PortalContainerProvider>
-                        </div>
-
-                        {/* Sized to nothing so it changes no layout, but positioned and
-                            stacked above the paper so popups portaled here are not
-                            painted behind it. */}
-                        <div ref={setPopupHost} className={"relative z-70 w-0 h-0"}/>
-
-                    </DialogPrimitive.Content>
-                </div>
-
-            </DialogPrimitive.Portal>
-        </DialogPrimitive.Root>
-    );
-};

package/src/components/DialogActions.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import { defaultBorderMixin } from "../styles";
-import { cls } from "../util";
-
-export function DialogActions({
-                                  children,
-                                  position = "sticky",
-                                  translucent = true,
-                                  className
-                              }: {
-    children: React.ReactNode,
-    position?: "sticky" | "absolute",
-    translucent?: boolean,
-    className?: string
-}) {
-
-    return <div
-        className={cls(
-            defaultBorderMixin,
-            // `shrink-0`: as a flex child at the foot of a column this bar must
-            // keep its height instead of being squeezed by the content above it.
-            "pt-2 pb-4 px-4 border-t flex flex-row items-center justify-end shrink-0 bottom-0 right-0 left-0 text-right z-2 gap-2",
-            position,
-            "bg-white bg-opacity-60 bg-white/60 dark:bg-surface-800 dark:bg-opacity-60 dark:bg-surface-800/60",
-            translucent ? "backdrop-blur-sm" : "",
-            className)}>
-        {children}
-    </div>;
-}

package/src/components/DialogContent.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { cls } from "../util";
-
-export function DialogContent({
-                                  children,
-                                  className,
-                                  fullHeight,
-                                  includeMargin = true
-                              }: {
-    children: React.ReactNode,
-    includeMargin?: boolean,
-    fullHeight?: boolean,
-    className?: string
-}) {
-
-    if (fullHeight)
-        return <div className={"flex-grow flex flex-col h-full relative"}>
-            {children}
-        </div>;
-
-    return <div
-        className={cls("flex-grow",
-            { "my-8 mx-8": includeMargin },
-            className)}>
-        {children}
-    </div>;
-}

package/src/components/DialogTitle.tsx

@@ -1,41 +0,0 @@
-"use client";
-
-import React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
-import { Typography, TypographyProps, TypographyVariant } from "./Typography";
-import { cls } from "../util";
-
-export type DialogContentProps = TypographyProps & {
-    children: React.ReactNode,
-    hidden?: boolean,
-    className?: string,
-    includeMargin?: boolean,
-    variant?: TypographyVariant
-};
-
-export function DialogTitle({
-                                children,
-                                hidden,
-                                className,
-                                variant = "subtitle2",
-                                gutterBottom = true,
-                                includeMargin = true,
-                                ...props
-                            }: DialogContentProps) {
-
-    const title = <DialogPrimitive.Title asChild>
-        <Typography variant={variant}
-                    className={cls({ "mt-8 mx-8": includeMargin }, className)}
-                    gutterBottom={gutterBottom}
-                    {...props}>
-            {children}
-        </Typography>
-    </DialogPrimitive.Title>;
-
-    if (hidden) {
-        return <VisuallyHidden.Root>{title}</VisuallyHidden.Root>
-    }
-
-    return title;
-}

package/src/components/ErrorBoundary.tsx

@@ -1,236 +0,0 @@
-
-import React, { ErrorInfo, PropsWithChildren } from "react";
-
-import { AlertCircleIcon, ShieldAlertIcon, RefreshCwIcon, ArrowLeftIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import { iconSize } from "../icons/Icon";
-import { Typography } from "./Typography";
-import { Button } from "./Button";
-import { cls } from "../util";
-import { isChunkLoadError } from "../util/lazy_chunk";
-
-/**
- * The one error a user can fix themselves. A deploy replaces the hashed chunk
- * files, so a tab opened before it cannot load any lazy view it has not already
- * fetched — with the browser's raw message ("Failed to fetch dynamically
- * imported module: …") this reads as a broken build rather than a stale tab.
- */
-const CHUNK_ERROR_DESCRIPTION =
-    "This app was updated while the tab was open, so part of it could not be loaded. Reload to continue.";
-
-/**
- * Checks whether the error message relates to missing permissions or
- * authorization failures. Used to show a friendlier message in fullPage mode.
- */
-function isPermissionError(error: Error | null): boolean {
-    if (!error) return false;
-    const msg = error.message?.toLowerCase() ?? "";
-    const code = (error as { code?: string }).code?.toLowerCase() ?? "";
-    return msg.includes("permission")
-        || msg.includes("insufficient")
-        || msg.includes("unauthorized")
-        || msg.includes("forbidden")
-        || msg.includes("access denied")
-        || code === "permission_denied"
-        || code === "insufficient_permissions"
-        || (error as { status?: number }).status === 403;
-}
-
-export interface ErrorBoundaryProps {
-    /**
-     * When true, renders a full-page centered error screen instead of the
-     * compact inline error. Intended for wrapping top-level app roots or
-     * major route sections.
-     */
-    fullPage?: boolean;
-    /**
-     * Optional callback invoked when the user clicks "Try again". If provided,
-     * the boundary resets its error state and calls this handler. If omitted,
-     * the "Try again" button resets the boundary state, re-mounting children.
-     */
-    onReset?: () => void;
-}
-
-interface ErrorBoundaryState {
-    error: Error | null;
-    showDetails: boolean;
-}
-
-export class ErrorBoundary extends React.Component<PropsWithChildren<ErrorBoundaryProps>, ErrorBoundaryState> {
-    constructor(props: PropsWithChildren<ErrorBoundaryProps>) {
-        super(props);
-        this.state = { error: null,
-showDetails: false };
-    }
-
-    static getDerivedStateFromError(error: Error) {
-        return { error };
-    }
-
-    componentDidCatch(error: Error, _errorInfo: ErrorInfo) {
-        console.error(error);
-    }
-
-    private handleReset = () => {
-        this.setState({ error: null,
-showDetails: false });
-        this.props.onReset?.();
-    };
-
-    private handleReload = () => {
-        window.location.reload();
-    };
-
-    private toggleDetails = () => {
-        this.setState(prev => ({ showDetails: !prev.showDetails }));
-    };
-
-    render() {
-        if (this.state.error) {
-            if (this.props.fullPage) {
-                return this.renderFullPage();
-            }
-            return this.renderInline();
-        }
-
-        return this.props.children;
-    }
-
-    private renderInline() {
-        const isStaleChunk = isChunkLoadError(this.state.error);
-        return (
-            <div className="flex flex-col m-2 items-start">
-                <div className="flex items-center m-2">
-                    {isStaleChunk
-                        ? <RefreshCwIcon className={"text-text-secondary dark:text-text-secondary-dark"}
-                                         size={iconSize.small}/>
-                        : <AlertCircleIcon className={"text-red-500 dark:text-red-400"} size={iconSize.small}/>}
-                    <div className="ml-4">{isStaleChunk ? "New version available" : "Error"}</div>
-                </div>
-                <Typography variant={"caption"}>
-                    {isStaleChunk
-                        ? CHUNK_ERROR_DESCRIPTION
-                        : this.state.error?.message ?? "See the error in the console"}
-                </Typography>
-                {isStaleChunk && <Button variant="outlined"
-                                         color="neutral"
-                                         size="small"
-                                         className="mt-3 ml-2"
-                                         onClick={this.handleReload}>
-                    <RefreshCwIcon size={16}/>
-                    Reload
-                </Button>}
-            </div>
-        );
-    }
-
-    private renderFullPage() {
-        const { error, showDetails } = this.state;
-        const isPermission = isPermissionError(error);
-        // Neither a fault nor a denial: the app is fine, this tab is behind it.
-        const isStaleChunk = !isPermission && isChunkLoadError(error);
-
-        const Icon = isPermission ? ShieldAlertIcon : isStaleChunk ? RefreshCwIcon : AlertCircleIcon;
-        const title = isPermission
-            ? "Access denied"
-            : isStaleChunk
-                ? "New version available"
-                : "Something went wrong";
-        const description = isPermission
-            ? "You don't have permission to access this resource. Please check your account permissions or contact your administrator."
-            : isStaleChunk
-                ? CHUNK_ERROR_DESCRIPTION
-                : "An unexpected error occurred. You can try reloading the page or going back.";
-
-        return (
-            <div className={cls(
-                "flex items-center justify-center min-h-[400px] h-full w-full",
-                "bg-surface-50 dark:bg-surface-950"
-            )}>
-                <div className="flex flex-col items-center max-w-md px-6 py-10 text-center">
-                    <div className={cls(
-                        "flex items-center justify-center w-14 h-14 rounded-xl mb-6",
-                        isPermission
-                            ? "bg-amber-100 dark:bg-amber-900/30"
-                            : isStaleChunk
-                                ? "bg-surface-100 dark:bg-surface-800"
-                                : "bg-red-100 dark:bg-red-900/30"
-                    )}>
-                        <Icon
-                            size={28}
-                            className={isPermission
-                                ? "text-amber-600 dark:text-amber-400"
-                                : isStaleChunk
-                                    ? "text-text-secondary dark:text-text-secondary-dark"
-                                    : "text-red-500 dark:text-red-400"}
-                        />
-                    </div>
-
-                    <Typography variant={"h6"}
-                                className="text-text-primary dark:text-text-primary-dark mb-2">
-                        {title}
-                    </Typography>
-
-                    <Typography variant={"body2"}
-                                className="text-text-secondary dark:text-text-secondary-dark mb-8">
-                        {description}
-                    </Typography>
-
-                    <div className="flex gap-3">
-                        {/* React caches a `lazy()` rejection: re-mounting the
-                            children re-throws without re-running the import, so
-                            "Try again" cannot recover a missing chunk. */}
-                        {!isStaleChunk && <Button
-                            variant="outlined"
-                            color="neutral"
-                            size="medium"
-                            onClick={this.handleReset}
-                        >
-                            <ArrowLeftIcon size={16}/>
-                            Try again
-                        </Button>}
-                        <Button
-                            variant="filled"
-                            color="primary"
-                            size="medium"
-                            onClick={this.handleReload}
-                        >
-                            <RefreshCwIcon size={16}/>
-                            Reload page
-                        </Button>
-                    </div>
-
-                    {/* For a stale chunk the message *is* the description
-                        above; repeating it under a disclosure adds nothing. */}
-                    {!isStaleChunk && error?.message && (
-                        <div className="mt-8 w-full">
-                            <button
-                                onClick={this.toggleDetails}
-                                className={cls(
-                                    "flex items-center gap-1 mx-auto text-xs",
-                                    "text-text-disabled dark:text-text-disabled-dark",
-                                    "hover:text-text-secondary dark:hover:text-text-secondary-dark",
-                                    "transition-colors cursor-pointer bg-transparent border-none p-0"
-                                )}
-                            >
-                                Technical details
-                                {showDetails
-                                    ? <ChevronUpIcon size={14}/>
-                                    : <ChevronDownIcon size={14}/>}
-                            </button>
-                            {showDetails && (
-                                <div className={cls(
-                                    "mt-3 p-3 rounded-lg text-left text-xs",
-                                    "bg-surface-100 dark:bg-surface-800/50",
-                                    "text-text-secondary dark:text-text-secondary-dark",
-                                    "font-mono break-all"
-                                )}>
-                                    {error.message}
-                                </div>
-                            )}
-                        </div>
-                    )}
-                </div>
-            </div>
-        );
-    }
-}

package/src/components/ExpandablePanel.tsx

@@ -1,130 +0,0 @@
-
-"use client";
-import React, { PropsWithChildren, useEffect, useState } from "react";
-
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { defaultBorderMixin, fieldBackgroundMixin } from "../styles";
-import { ChevronDownIcon } from "lucide-react";
-import { cls } from "../util";
-import { useInjectStyles } from "../hooks";
-
-export function ExpandablePanel({
-                                    title,
-                                    children,
-                                    invisible = false,
-                                    expanded,
-                                    onExpandedChange,
-                                    initiallyExpanded = true,
-                                    titleClassName,
-                                    asField,
-                                    className,
-                                    innerClassName
-                                }: PropsWithChildren<{
-    title: React.ReactNode,
-    invisible?: boolean,
-    initiallyExpanded?: boolean;
-    expanded?: boolean;
-    onExpandedChange?: (expanded: boolean) => void,
-    titleClassName?: string,
-    asField?: boolean,
-    className?: string,
-    innerClassName?: string
-}>) {
-
-    useInjectStyles("ExpandablePanel", `
-.CollapsibleContent {
-  overflow: hidden;
-}
-.CollapsibleContent[data-state='open'] {
-  animation: slideDown 220ms ease-out
-}
-.CollapsibleContent[data-state='closed'] {
-  animation: slideUp 220ms ease-out;
-}
-
-@keyframes slideDown {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--radix-collapsible-content-height);
-  }
-}
-
-@keyframes slideUp {
-  from {
-    height: var(--radix-collapsible-content-height);
-  }
-  to {
-    height: 0;
-  }
-}`);
-
-    const [open, setOpen] = useState(expanded !== undefined ? expanded : initiallyExpanded);
-    const [allowOverflow, setAllowOverflow] = useState(open);
-
-    useEffect(() => {
-        if (open) {
-            setTimeout(() => {
-                setAllowOverflow(true);
-            }, 220);
-        } else {
-            setAllowOverflow(false);
-        }
-    }, [open]);
-
-    useEffect(() => {
-        if (expanded !== undefined)
-            setOpen(expanded);
-    }, [expanded]);
-
-    return (<>
-            <Collapsible.Root
-                className={cls(
-                    !invisible && defaultBorderMixin + " border",
-                    "rounded-lg",
-                    "w-full",
-                    className
-                )}
-                open={open}
-                onOpenChange={(updatedOpen: boolean) => {
-                    onExpandedChange?.(updatedOpen);
-                    setOpen(updatedOpen);
-                }}>
-
-                <Collapsible.Trigger asChild>
-                    <div
-                        className={cls(
-                            "rounded-t-lg flex items-center justify-between w-full min-h-[52px]",
-                            "hover:bg-surface-accent-200 hover:bg-opacity-40 hover:bg-surface-accent-200/40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40 dark:hover:bg-surface-800/40 active:bg-surface-accent-300/50 dark:active:bg-surface-700/50",
-                            invisible ? "border-b px-2" : "p-4",
-                            open ? "py-6" : "py-4",
-                            "transition-all duration-200",
-                            invisible && defaultBorderMixin,
-                            asField && fieldBackgroundMixin,
-                            titleClassName,
-                            "cursor-pointer"
-                        )}
-                        role="button"
-                        tabIndex={0}
-                        aria-expanded={open}
-                    >
-                        {title}
-                        <ChevronDownIcon className={cls("transition", open ? "rotate-180" : "")}/>
-                    </div>
-                </Collapsible.Trigger>
-
-                <Collapsible.Content
-                    className={cls("CollapsibleContent")}
-                    style={{
-                        overflow: allowOverflow ? "visible" : "hidden"
-                    }}
-                >
-                    <div className={innerClassName}>
-                        {children}
-                    </div>
-                </Collapsible.Content>
-            </Collapsible.Root>
-        </>
-    )
-}