@rebasepro/ui 0.17.3 → 0.18.1

package/src/components/TextField.tsx

@@ -1,270 +0,0 @@
-"use client";
-import React, { ForwardedRef, forwardRef, useEffect, useId, useRef } from "react";
-
-import {
-    fieldBackgroundDisabledMixin,
-    fieldBackgroundHoverMixin,
-    fieldBackgroundInvisibleMixin,
-    fieldBackgroundMixin,
-    focusedInvisibleMixin
-} from "../styles";
-import { InputLabel } from "./InputLabel";
-import { cls } from "../util";
-
-export type InputType =
-    | "text"
-    | "number"
-    | "phone"
-    | "email"
-    | "password"
-    | "search"
-    | "url"
-    | "date"
-    | "time"
-    | "datetime-local"
-    | "month"
-    | "week"
-    | "color";
-
-export type TextFieldProps<T extends string | number> = {
-    type?: InputType;
-    value?: T;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    label?: React.ReactNode;
-    multiline?: boolean;
-    disabled?: boolean;
-    invisible?: boolean;
-    error?: boolean;
-    endAdornment?: React.ReactNode;
-    autoFocus?: boolean;
-    placeholder?: string;
-    size?: "smallest" | "small" | "medium" | "large";
-    className?: string;
-    style?: React.CSSProperties;
-    inputClassName?: string;
-    inputStyle?: React.CSSProperties;
-    inputRef?: React.ForwardedRef<any>;
-    /**
-     * Maximum number of rows to display.
-     */
-    maxRows?: number | string;
-    /**
-     * Minimum number of rows to display.
-     * @default 1
-     */
-    minRows?: number | string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value">;
-
-export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | number>>(
-    <T extends string | number>(
-        {
-            value,
-            onChange,
-            label,
-            type = "text",
-            multiline = false,
-            invisible,
-            maxRows,
-            minRows,
-            disabled,
-            error,
-            endAdornment,
-            autoFocus,
-            placeholder,
-            size = "large",
-            className,
-            style,
-            inputClassName,
-            inputStyle,
-            inputRef: inputRefProp,
-            ...inputProps
-        }: TextFieldProps<T>,
-        ref: ForwardedRef<HTMLDivElement>
-    ) => {
-
-        const fallbackRef = useRef(null);
-        const inputRef = inputRefProp ?? fallbackRef;
-        const autoId = useId();
-        const inputId = inputProps.id ?? autoId;
-        const labelId = `${inputId}-label`;
-
-        const [focused, setFocused] = React.useState(false);
-        const hasValue = value !== undefined && value !== null && value !== "";
-
-        useEffect(() => {
-            const element = inputRef && "current" in inputRef ? inputRef.current : null;
-            if (element && document.activeElement === element) {
-                setFocused(true);
-            }
-        }, []);
-
-        useEffect(() => {
-            if (type !== "number") return;
-            const handleWheel = (event: any) => {
-                if (event.target instanceof HTMLElement) event.target.blur();
-            };
-
-            const element = "current" in inputRef ? inputRef.current : inputRef;
-
-            element?.addEventListener("wheel", handleWheel);
-
-            return () => {
-                element?.removeEventListener("wheel", handleWheel);
-            };
-        }, [inputRef, type]);
-
-        const input = multiline ? (
-            <textarea
-                {...(inputProps as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
-                ref={inputRef}
-                id={inputId}
-                // Falls back to the caller's own value rather than to `undefined`:
-                // this sits after the spread, so hardcoding `undefined` silently
-                // erased an `aria-labelledby` a consumer had passed, and the
-                // unlabelled field it was meant to name stayed unnamed.
-                aria-labelledby={label ? labelId : inputProps["aria-labelledby"]}
-                aria-invalid={error || undefined}
-                aria-disabled={disabled || undefined}
-                placeholder={focused || hasValue || !label ? placeholder : undefined}
-                autoFocus={autoFocus}
-                rows={typeof minRows === "string" ? parseInt(minRows) : (minRows ?? 3)}
-                value={value ?? ""}
-                onChange={onChange}
-                onFocus={() => setFocused(true)}
-                onBlur={() => setFocused(false)}
-                style={inputStyle}
-                className={cls(
-                    invisible ? focusedInvisibleMixin : "",
-                    "rounded-lg resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3",
-                    label ? "pt-8 pb-2" : "py-2",
-                    disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500",
-                    inputClassName
-                )}
-            />
-        ) : (
-            <input
-                {...inputProps}
-                ref={inputRef}
-                id={inputId}
-                // See the textarea branch: preserve a caller-supplied
-                // `aria-labelledby` instead of overwriting it with `undefined`.
-                aria-labelledby={label ? labelId : inputProps["aria-labelledby"]}
-                aria-invalid={error || undefined}
-                aria-disabled={disabled || undefined}
-                disabled={disabled}
-                style={inputStyle}
-                className={cls(
-                    "w-full outline-none bg-transparent leading-normal px-3",
-                    "rounded-lg",
-                    "focused:text-text-primary focused:dark:text-text-primary-dark",
-                    invisible ? focusedInvisibleMixin : "",
-                    disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
-                    {
-                        "min-h-[28px]": size === "smallest",
-                        "min-h-[32px]": size === "small",
-                        "min-h-[40px]": size === "medium",
-                        "min-h-[48px]": size === "large"
-                    },
-                    /* A shrunk label occupies roughly the first 16px of the
-                       box (`top-[-1px]`, translated down 2px, ~15px tall at
-                       scale-75). `pt-4` put the value's first line at exactly
-                       16px, so label and content shared a row: a labelled
-                       `small` field with a placeholder rendered "Name" on top
-                       of "e.g. Analytics Pipeline". `large` was never affected
-                       — it reserves `pt-8`. */
-                    label
-                        // Labelled fields sit exactly 16px above the unlabelled
-                        // scale (44/48/56/64 against 28/32/40/48). smallest,
-                        // small and medium all used to share `pt-5 pb-1.5`, so
-                        // they rendered at an identical 50px and `size` looked
-                        // inert whenever a label was present.
-                        ? { smallest: "pt-4 pb-1", small: "pt-5 pb-1", medium: "pt-6 pb-2", large: "pt-8 pb-2" }[size]
-                        : size === "smallest"
-                            ? "py-0.5"
-                            : size === "small"
-                                ? "py-1"
-                                : "py-2",
-                    endAdornment ? "pr-12" : "pr-3",
-                    disabled &&
-                    "outline-none opacity-65 dark:opacity-60 text-surface-accent-800 dark:text-white",
-                    inputClassName
-                )}
-                placeholder={focused || hasValue || !label ? placeholder : undefined}
-                autoFocus={autoFocus}
-                onFocus={() => setFocused(true)}
-                onBlur={() => setFocused(false)}
-                type={type}
-                value={type === "number" && Number.isNaN(value) ? "" : value ?? ""}
-                onChange={onChange}
-            />
-        );
-
-        return (
-            <div
-                ref={ref}
-                className={cls(
-                    "rounded-lg relative max-w-full",
-                    invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
-                    disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
-                    error ? "border border-red-500 dark:border-red-600" : "",
-                    {
-                        "min-h-[28px]": size === "smallest",
-                        "min-h-[32px]": size === "small",
-                        "min-h-[40px]": size === "medium",
-                        "min-h-[48px]": size === "large"
-                    },
-                    className
-                )}
-                style={style}
-            >
-                {label && (
-                    <InputLabel
-                        id={labelId}
-                        htmlFor={inputId}
-                        className={cls(
-                            "pointer-events-none absolute",
-                            size === "large" ? "top-1" : "top-[-1px]",
-                            !error
-                                ? focused
-                                    ? "text-primary dark:text-primary"
-                                    : "text-text-secondary dark:text-text-secondary-dark"
-                                : "text-red-500 dark:text-red-600",
-                            // A disabled field's LABEL is the one part that must
-                            // stay readable — it is what tells you which field
-                            // you cannot edit. `opacity-50` halved the alpha of
-                            // an already-muted #737373, landing near 2.2:1 over
-                            // the field fill; the label was effectively gone.
-                            //
-                            // The value below it keeps its own `opacity-50`,
-                            // which is the correct signal: the CONTENT is
-                            // inactive. Naming the field is not content.
-                            disabled ? "text-text-disabled dark:text-text-disabled-dark" : ""
-                        )}
-                        shrink={hasValue || focused}
-                    >
-                        {label}
-                    </InputLabel>
-                )}
-
-                {input}
-
-                {endAdornment && (
-                    <div
-                        className={cls(
-                            "flex flex-row justify-center items-center absolute h-full right-0 top-0",
-                            {
-                                "mr-4": size === "large",
-                                "mr-3": size === "medium",
-                                "mr-2": size === "small" || size === "smallest"
-                            }
-                        )}
-                    >
-                        {endAdornment}
-                    </div>
-                )}
-            </div>
-        );
-    }
-);
-
-TextField.displayName = "TextField";

package/src/components/TextareaAutosize.tsx

@@ -1,368 +0,0 @@
-"use client";
-import * as React from "react";
-import { useLayoutEffect } from "react";
-import * as ReactDOM from "react-dom";
-import { cls, debounce } from "../util";
-
-type State = {
-    outerHeightStyle: number;
-    overflow?: boolean | undefined;
-};
-
-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>
-) {
-    const {
-        onChange,
-        onScroll,
-        onResize,
-        maxRows,
-        minRows = 1,
-        style,
-        value,
-        onFocus,
-        onBlur,
-        sizeRef,
-        ignoreBoxSizing,
-        ...other
-    } = props;
-
-    const { current: isControlled } = React.useRef(value != null);
-    const inputRef = React.useRef<HTMLInputElement>(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);
-
-        // If input's width is shrunk and it's not visible, don't sync height.
-        if (computedStyle.width === "0px") {
-            return {
-                outerHeightStyle: 0
-            };
-        }
-
-        const sizeReferenceElement = sizeRef?.current ?? shadowRef.current!;
-        const inputShallow = shadowRef.current!;
-
-        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 += " ";
-        }
-
-        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);
-
-        // The height of the inner content
-        const innerHeight = sizeReferenceElement.scrollHeight;
-
-        // Measure height of a textarea with a single row
-        inputShallow.value = "x";
-        const singleRowHeight = sizeReferenceElement.scrollHeight;
-
-        // The height of the outer content
-        let outerHeight = innerHeight;
-
-        if (minRows) {
-            outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
-        }
-        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;
-
-        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")
-                );
-            }
-        }
-        return prevState;
-    }, []);
-
-    const syncHeight = React.useCallback(() => {
-        const newState = getUpdatedState();
-
-        if (isEmpty(newState)) {
-            return;
-        }
-        if (onResize) {
-            onResize(newState);
-        }
-
-        setState((prevState) => {
-            return updateState(prevState, newState);
-        });
-    }, [getUpdatedState, onResize, updateState]);
-
-    const syncHeightWithFlushSync = React.useCallback(() => {
-        const newState = getUpdatedState();
-
-        if (isEmpty(newState)) {
-            return;
-        }
-
-        // 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]);
-
-    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();
-            }
-        });
-        let resizeObserver: ResizeObserver;
-
-        const input = inputRef.current!;
-        const containerWindow = window;
-        if (typeof window === "undefined") {
-            return;
-        }
-
-        containerWindow.addEventListener("resize", handleResize);
-
-        if (typeof ResizeObserver !== "undefined") {
-            resizeObserver = new ResizeObserver(handleResize);
-            resizeObserver.observe(input);
-        }
-
-        return () => {
-            handleResize.clear();
-            containerWindow.removeEventListener("resize", handleResize);
-            if (resizeObserver) {
-                resizeObserver.disconnect();
-            }
-        };
-    }, [syncHeightWithFlushSync]);
-
-    useLayoutEffect(() => {
-        syncHeight();
-    });
-
-    React.useEffect(() => {
-        renders.current = 0;
-    }, [value]);
-
-    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 as React.Ref<HTMLTextAreaElement>}
-                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>
-    );
-}) as React.FC<TextareaAutosizeProps & { ref?: React.ForwardedRef<Element> }>;
-
-export type TextareaAutosizeProps = Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "onResize"> & {
-
-    className?: string;
-
-    shadowClassName?: string;
-
-    /**
-     * Maximum number of rows to display.
-     */
-    maxRows?: number | string;
-    /**
-     * Minimum number of rows to display.
-     * @default 1
-     */
-    minRows?: number | string;
-    /**
-     * @ignore
-     */
-    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    /**
-     * @ignore
-     */
-    placeholder?: string;
-    /**
-     * @ignore
-     */
-    style?: object;
-    /**
-     * @ignore
-     */
-    value?: string[] | number | string;
-
-    sizeRef?: React.RefObject<HTMLDivElement>;
-
-    onScroll?: (event: React.UIEvent<HTMLTextAreaElement>) => void;
-
-    onResize?: (state: State) => void;
-
-    autoFocus?: boolean;
-
-    ignoreBoxSizing?: boolean;
-}
-
-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;
-        }
-
-        return (instance) => {
-            refs.forEach((ref) => {
-                setRef(ref, instance);
-            });
-        };
-
-    }, refs);
-}
-
-function setRef<T>(
-    ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined,
-    value: T | null
-): void {
-    if (typeof ref === "function") {
-        ref(value);
-    } else if (ref) {
-        ref.current = value;
-    }
-}

package/src/components/ToggleButtonGroup.tsx

@@ -1,69 +0,0 @@
-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 role="group" aria-label="Toggle options" className={cls("inline-flex flex-row bg-surface-100 dark:bg-surface-900 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}
-                    aria-pressed={value === option.value}
-                    aria-disabled={option.disabled || undefined}
-                    className={cls(
-                        "flex flex-row items-center justify-center gap-2 py-3 px-4 rounded-md transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
-                        value === option.value
-                            ? "bg-white dark:bg-surface-700 text-primary dark:text-primary-300 shadow-sm"
-                            : "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-200 dark:hover:bg-surface-800",
-                        option.disabled && "opacity-50 cursor-not-allowed"
-                    )}
-                >
-                    {option.icon}
-                    <span className="text-sm font-medium">{option.label}</span>
-                </button>
-            ))}
-        </div>
-    );
-}