@rebasepro/ui 0.17.3 → 0.18.0

package/src/components/VirtualTable/fields/VirtualTableSwitch.tsx

@@ -1,28 +0,0 @@
-import React, { useEffect } from "react";
-import { BooleanSwitch } from "../../BooleanSwitch";
-
-export function VirtualTableSwitch(props: {
-    error?: Error;
-    internalValue?: boolean;
-    focused: boolean;
-    disabled: boolean;
-    updateValue: (newValue: (boolean | null)) => void;
-}) {
-    const { internalValue, updateValue, focused } = props;
-    const ref = React.useRef<HTMLButtonElement>(null);
-
-    useEffect(() => {
-        if (ref.current && focused) {
-            ref.current.focus({ preventScroll: true });
-        }
-    }, [focused, ref]);
-
-    return (
-        <BooleanSwitch
-            ref={ref}
-            size={"small"}
-            value={Boolean(internalValue)}
-            onValueChange={updateValue}
-        />
-    );
-}

package/src/components/VirtualTable/index.tsx

@@ -1,10 +0,0 @@
-export { VirtualTable } from "./VirtualTable";
-export * from "./VirtualTableProps";
-export type { FilterFormFieldProps } from "./VirtualTableHeader";
-export * from "./selection/SelectionStore";
-export * from "./selection/SelectionContext";
-export * from "./fields/VirtualTableInput";
-export * from "./fields/VirtualTableNumberInput";
-export * from "./fields/VirtualTableSwitch";
-export * from "./fields/VirtualTableDateField";
-export * from "./fields/VirtualTableSelect";

package/src/components/VirtualTable/selection/SelectionContext.tsx

@@ -1,36 +0,0 @@
-import React, { createContext, useContext } from "react";
-import { VirtualTableSelectionStore, SelectedCell } from "./SelectionStore";
-
-export interface VirtualTableSelectionContextProps<T extends SelectedCell = SelectedCell> {
-    selectionStore: VirtualTableSelectionStore<T>;
-    select: (cell: T | undefined) => void;
-}
-
-const SelectionContext = createContext<VirtualTableSelectionContextProps<any> | null>(null);
-
-export const VirtualTableSelectionProvider = <T extends SelectedCell = SelectedCell>({
-    store,
-    children
-}: {
-    store: VirtualTableSelectionStore<T>;
-    children: React.ReactNode;
-}) => {
-    const value = React.useMemo(() => ({
-        selectionStore: store,
-        select: store.select
-    }), [store]);
-
-    return (
-        <SelectionContext.Provider value={value}>
-            {children}
-        </SelectionContext.Provider>
-    );
-};
-
-export const useVirtualTableSelection = <T extends SelectedCell = SelectedCell>() => {
-    const context = useContext(SelectionContext);
-    if (!context) {
-        throw new Error("useVirtualTableSelection must be used within a VirtualTableSelectionProvider");
-    }
-    return context as VirtualTableSelectionContextProps<T>;
-};

package/src/components/VirtualTable/selection/SelectionStore.ts

@@ -1,54 +0,0 @@
-import { useSyncExternalStore, useCallback, useRef } from "react";
-
-export interface SelectedCell {
-    columnKey: string;
-    id: string | number;
-    cellRect?: DOMRect;
-    width?: number;
-    height?: number;
-}
-
-export function createVirtualTableSelectionStore<T extends SelectedCell = SelectedCell>() {
-    let selectedCell: T | undefined = undefined;
-    const listeners = new Set<() => void>();
-
-    function getEntity(): T | undefined {
-        return selectedCell;
-    }
-
-    function subscribe(listener: () => void): () => void {
-        listeners.add(listener);
-        return () => listeners.delete(listener);
-    }
-
-    function select(cell: T | undefined) {
-        selectedCell = cell;
-        listeners.forEach(l => l());
-    }
-
-    return {
-        getEntity,
-        subscribe,
-        select
-    };
-}
-
-export type VirtualTableSelectionStore<T extends SelectedCell = SelectedCell> = ReturnType<typeof createVirtualTableSelectionStore<T>>;
-
-export function useVirtualTableCellSelected<T extends SelectedCell = SelectedCell>(
-    store: VirtualTableSelectionStore<T>,
-    columnKey: string,
-    id: string | number
-): boolean {
-    const selectorRef = useRef({ columnKey, id });
-    selectorRef.current = { columnKey, id };
-
-    const getEntity = useCallback(() => {
-        const cell = store.getEntity();
-        if (!cell) return false;
-        const s = selectorRef.current;
-        return cell.columnKey === s.columnKey && cell.id === s.id;
-    }, [store]);
-
-    return useSyncExternalStore(store.subscribe, getEntity, getEntity);
-}

package/src/components/VirtualTable/types.tsx

@@ -1,47 +0,0 @@
-import React from "react";
-import {
-    CellRendererParams,
-    OnRowClickParams,
-    OnVirtualTableColumnResizeParams,
-    VirtualTableColumn,
-    VirtualTableFilterValues,
-    VirtualTableWhereFilterOp
-} from "./VirtualTableProps";
-import { FilterFormFieldProps } from "./VirtualTableHeader";
-
-export type VirtualTableRowProps<T extends Record<string, unknown>> = {
-    style: React.CSSProperties,
-    rowHeight: number,
-    rowData: T;
-    rowIndex: number;
-    onRowClick?: (props: OnRowClickParams<Record<string, unknown>>) => void;
-    children: React.ReactNode[];
-    columns: VirtualTableColumn[];
-    hoverRow?: boolean;
-    rowClassName?: (rowData: T) => string | undefined;
-};
-
-export type VirtualTableContextProps<T> = {
-    data?: T[];
-    rowHeight?: number,
-    headerHeight?: number,
-    columns: VirtualTableColumn[];
-    cellRenderer: React.ComponentType<CellRendererParams<T>>;
-    /** Each sorted column's direction and its rank in the sort, keyed by column. */
-    sortIndex: Map<string, { direction: "asc" | "desc"; position: number }>;
-    filter?: VirtualTableFilterValues<string>;
-    onRowClick?: (props: OnRowClickParams<Record<string, unknown>>) => void;
-    onColumnSort: (key: string, additive?: boolean) => void;
-    onColumnResize: (params: OnVirtualTableColumnResizeParams) => void;
-    onColumnResizeEnd: (params: OnVirtualTableColumnResizeParams) => void;
-    onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, unknown]) => void;
-    customView?: React.ReactNode,
-    hoverRow: boolean;
-    createFilterField?: (props: FilterFormFieldProps<unknown>) => React.ReactNode;
-    rowClassName?: (rowData: T) => string | undefined;
-    endAdornment?: React.ReactNode;
-    AddColumnComponent?: React.ComponentType;
-    onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
-    draggingColumnId?: string | null;
-    extraData?: unknown;
-};

package/src/components/common/SelectInputLabel.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import { cls } from "../../util";
-
-/**
- * The label above a Select or MultiSelect.
- *
- * It used `text-surface-accent-500` — a SURFACE scale, borrowed for type. The
- * label above a TextField has always used `text-text-secondary`, and the two are
- * the same role, so a form mixing the components showed two different label
- * colours: `#64748b` blue-grey over a Select, `#757575` neutral over a TextField.
- * Measured side by side on /debug/ui, which is where it is most obvious, because
- * the reference puts them in adjacent columns.
- *
- * The text tokens are also the tuned ones: `--color-surface-500` was moved to
- * #797979 precisely so muted type clears AA on both grounds. The slate scale
- * carries no such guarantee — it is for surfaces.
- */
-export function SelectInputLabel({ children, error }: { children: React.ReactNode, error?: boolean }) {
-    return <div className={cls("text-sm font-medium ml-3.5 mb-1",
-        error ? "text-red-600 dark:text-red-500" : "text-text-secondary dark:text-text-secondary-dark")}>
-        {children}
-    </div>;
-}

package/src/components/index.tsx

@@ -1,62 +0,0 @@
-// ./common/SelectInputLabel is internal — Select and MultiSelect render it for
-// a string `label`. Pass a ReactNode `label` to override it.
-export * from "./Autocomplete";
-export * from "./Alert";
-export * from "./Avatar";
-export * from "./BooleanSwitch";
-export * from "./BooleanSwitchWithLabel";
-export * from "./Button";
-export * from "./Card";
-export * from "./CenteredView";
-export * from "./Container";
-export * from "./Collapse";
-export * from "./CircularProgress";
-export * from "./CircularProgressCenter";
-export * from "./ErrorBoundary";
-export * from "./Checkbox";
-export * from "./Chip";
-export * from "./ColorPicker";
-export * from "./DateTimeField";
-export * from "./Dialog";
-export * from "./DialogActions";
-export * from "./DialogContent";
-export * from "./DialogTitle";
-export * from "./ExpandablePanel";
-export * from "./FileUpload";
-export * from "./FilterChip";
-export * from "./IconButton";
-export * from "./InputLabel";
-export * from "./InfoLabel";
-export * from "./Label";
-export * from "./LoadingButton";
-export * from "./Markdown";
-export * from "./Menu";
-export * from "./Menubar";
-export * from "./MultiSelect";
-export * from "./Paper";
-export * from "./RadioGroup";
-export * from "./ResizablePanels";
-export * from "./SearchBar";
-export * from "./Select";
-export * from "./Separator";
-export * from "./Slider";
-export * from "./Sheet";
-export * from "./TextareaAutosize";
-export * from "./TextField";
-export * from "./Tooltip";
-export * from "./Typography";
-export * from "./Tabs";
-export * from "./Table";
-export * from "./Popover";
-export * from "./Badge";
-export * from "./DebouncedTextField";
-export * from "./Skeleton";
-export * from "./ToggleButtonGroup";
-export * from "./VirtualTable";
-
-// Re-exported Radix primitives — consume these from @rebasepro/ui instead of
-// adding direct @radix-ui/* deps to every sub-package.
-import * as Portal from "@radix-ui/react-portal";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-export { Portal, PopoverPrimitive };
-export { Slot } from "@radix-ui/react-slot";

package/src/hooks/PortalContainerContext.tsx

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

package/src/hooks/index.ts

@@ -1,7 +0,0 @@
-export * from "./useInjectStyles";
-export * from "./useOutsideAlerter";
-export * from "./useDebouncedCallback";
-export * from "./useDebounceCallback";
-export * from "./useDebounceValue";
-
-export * from "./PortalContainerContext";

package/src/hooks/useDebounceCallback.tsx

@@ -1,21 +0,0 @@
-import { useCallback, useRef } from "react";
-
-
-export function useDebounceCallback<T extends (...args: any[]) => unknown>(
-    callback?: T,
-    delay?: number
-): T {
-    const timeoutRef = useRef<number | null>(null);
-
-    const debouncedCallback = useCallback((...args: Parameters<T>) => {
-        if (timeoutRef.current !== null) {
-            clearTimeout(timeoutRef.current);
-        }
-
-        timeoutRef.current = window.setTimeout(() => {
-            callback?.(...args);
-        }, delay ?? 200);
-    }, [callback, delay]);
-
-    return debouncedCallback as T;
-}

package/src/hooks/useDebounceValue.tsx

@@ -1,20 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-export function useDebounceValue<T>(value: T, delay = 300): T {
-    // State and setters for debounced value
-    const [debouncedValue, setDebouncedValue] = useState(value);
-    useEffect(
-        () => {
-            const handler = setTimeout(() => {
-                setDebouncedValue(value);
-            }, delay);
-            return () => {
-                clearTimeout(handler);
-            };
-        },
-        [value, delay] // Only re-call effect if value or delay changes
-    );
-    return debouncedValue;
-}

package/src/hooks/useDebouncedCallback.ts

@@ -1,39 +0,0 @@
-import React from "react";
-
-export function useDebouncedCallback<T>(value: T, callback: () => void, immediate: boolean, timeoutMs = 300) {
-
-    const pendingUpdate = React.useRef(false);
-
-    const callbackRef = React.useRef(callback);
-    React.useEffect(() => {
-        callbackRef.current = callback;
-    }, [callback]);
-
-    const performUpdate = React.useCallback(() => {
-        callbackRef.current();
-        pendingUpdate.current = false;
-    }, []);
-
-    const handlerRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-
-    React.useEffect(
-        () => {
-            if (immediate) {
-                clearTimeout(handlerRef.current);
-                if (pendingUpdate.current) {
-                    performUpdate();
-                }
-                return;
-            }
-
-            pendingUpdate.current = true;
-            clearTimeout(handlerRef.current);
-            handlerRef.current = setTimeout(performUpdate, timeoutMs);
-            return () => {
-                if (immediate)
-                    performUpdate();
-            };
-        },
-        [immediate, value, performUpdate, timeoutMs]
-    );
-}

package/src/hooks/useInjectStyles.tsx

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

package/src/hooks/useOutsideAlerter.tsx

@@ -1,46 +0,0 @@
-"use client";
-
-import { RefObject, useEffect } from "react";
-
-/**
- * Hook that alerts clicks outside the passed ref
- */
-export function useOutsideAlerter(ref: RefObject<HTMLElement | null>, onOutsideClick: () => void, active = true): void {
-    useEffect(() => {
-        if (!active)
-            return;
-
-        /**
-         * Alert if clicked on outside of element
-         */
-        function handleClickOutside(event: Event) {
-            if (isInPresentationLayer(event.target as Node)) {
-                return;
-            }
-
-            if (ref.current && !ref.current.contains(event.target as Node)) {
-                onOutsideClick();
-            }
-        }
-
-        // Bind the event listener
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            // Unbind the event listener on clean up
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [ref, active, onOutsideClick]);
-}
-
-/**
- * Check if any parent of the node is a presentation node
- * @param node
- */
-function isInPresentationLayer(node: Node | null): boolean {
-    if (node instanceof HTMLElement) {
-        if (node.getAttribute("role") === "presentation")
-            return true;
-        return isInPresentationLayer(node.parentNode);
-    }
-    return false;
-}

package/src/icons/GitHubIcon.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-
-import { colorClassesMapping, IconProps, iconSize } from "./Icon";
-import { cls } from "../util";
-
-export function GitHubIcon({ size = 24, color, className, onClick, style }: IconProps) {
-    // `size` is `IconSize | number` — resolve the keyword, or an SVG attribute
-    // of width="small" is emitted and the icon renders at its intrinsic size.
-    const px = typeof size === "number" ? size : iconSize[size];
-    return <svg xmlns="http://www.w3.org/2000/svg"
-                className={cls(color ? colorClassesMapping[color] : "", className)}
-                onClick={onClick}
-                style={style}
-                fill={"currentColor"}
-                width={px}
-                height={px}
-                viewBox="0 0 24 24">
-        <path
-            d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-    </svg>;
-}

package/src/icons/HandleIcon.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-
-import { colorClassesMapping, IconProps, iconSize } from "./Icon";
-import { cls } from "../util";
-
-export function HandleIcon({ size = 24, color, className, onClick, style }: IconProps) {
-    const px = typeof size === "number" ? size : iconSize[size];
-    return <svg xmlns="http://www.w3.org/2000/svg"
-                className={cls(color ? colorClassesMapping[color] : "", className)}
-                onClick={onClick}
-                style={style}
-                width={px}
-                height={px}
-                viewBox="0 0 100 100"
-                fill="none">
-        <circle cx="28" cy="50" r="9" fill={"currentColor"}/>
-        <circle cx="28" cy="21" r="9" fill={"currentColor"}/>
-        <circle cx="71" cy="21" r="9" fill={"currentColor"}/>
-        <circle cx="71" cy="50" r="9" fill={"currentColor"}/>
-        <circle cx="71" cy="78" r="9" fill={"currentColor"}/>
-        <circle cx="28" cy="78" r="9" fill={"currentColor"}/>
-    </svg>;
-}

package/src/icons/Icon.tsx

@@ -1,33 +0,0 @@
-"use client";
-
-export type IconColor = "inherit" | "primary" | "secondary" | "disabled" | "error" | "success" | "warning";
-export type IconSize = "smallest" | "small" | "medium" | "large";
-
-/**
- * Standardized icon size map in px.
- * Use with direct Lucide imports: `<Database size={iconSize.small} />`
- */
-export const iconSize = {
-    smallest: 16,
-    small: 20,
-    medium: 24,
-    large: 28
-} as const satisfies Record<IconSize, number>;
-
-export type IconProps = {
-    size?: IconSize | number,
-    color?: IconColor,
-    className?: string,
-    onClick?: (e: React.SyntheticEvent) => void,
-    style?: React.CSSProperties,
-}
-
-export const colorClassesMapping: Record<IconColor, string> = {
-    inherit: "",
-    primary: "text-primary",
-    success: "text-green-500",
-    warning: "text-yellow-500",
-    secondary: "text-secondary",
-    disabled: "text-text-disabled dark:text-text-disabled-dark",
-    error: "text-red-500"
-}