@rebasepro/ui 0.2.5 → 0.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/ui",
   "type": "module",
-  "version": "0.2.5",
+  "version": "0.4.0",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -71,8 +71,7 @@
     "react-dropzone": "^14.4.1",
     "react-use-measure": "^2.1.7",
     "react-window": "^1.8.11",
-    "tailwind-merge": "^2.6.1",
-    "@rebasepro/types": "0.2.5"
+    "tailwind-merge": "^2.6.1"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

package/src/components/Card.tsx

@@ -8,7 +8,7 @@ type CardProps = {
     style?: React.CSSProperties;
     onClick?: (e?: React.MouseEvent) => void;
     className?: string;
-};
+} & React.HTMLAttributes<HTMLDivElement>;
 
 const Card = React.forwardRef<HTMLDivElement, CardProps>(({
     children,

package/src/components/DebouncedTextField.tsx

@@ -1,33 +1,74 @@
 "use client";
-import React, { ChangeEvent, useCallback, useDeferredValue, useEffect } from "react";
+import React, { ChangeEvent, useCallback, useEffect, useRef, useState } from "react";
 import { TextField, TextFieldProps } from "./index";
 
 export function DebouncedTextField<T extends string | number>(props: TextFieldProps<T>) {
 
-    const previousEventRef = React.useRef<ChangeEvent<any>>(undefined);
-    const [internalValue, setInternalValue] = React.useState(props.value);
-
-    const deferredValue = useDeferredValue(internalValue);
+    const [internalValue, setInternalValue] = useState<T | string>(props.value ?? "");
+    const lastSentValueRef = useRef<T | string>(props.value ?? "");
+    const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
+    // Sync state with props.value when it changes externally
     useEffect(() => {
-        setInternalValue(props.value);
+        const externalValue = props.value ?? "";
+        if (externalValue !== lastSentValueRef.current) {
+            setInternalValue(externalValue);
+            lastSentValueRef.current = externalValue;
+        }
     }, [props.value]);
 
+    // Cleanup timer on unmount
     useEffect(() => {
-        const emptyInitialValue = !props.value;
-        if (emptyInitialValue && !deferredValue)
-            return;
-        if (deferredValue !== props.value && previousEventRef.current && props.onChange) {
-            props.onChange(previousEventRef.current);
+        return () => {
+            if (timerRef.current) clearTimeout(timerRef.current);
+        };
+    }, []);
+
+    const flushChange = useCallback((value: T | string, event?: ChangeEvent<any>) => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = undefined;
+        }
+        if (value !== props.value && props.onChange) {
+            lastSentValueRef.current = value;
+            const e = {
+                ...event,
+                target: {
+                    ...event?.target,
+                    value: value,
+                    name: props.name
+                }
+            };
+            props.onChange(e as any);
         }
-    }, [deferredValue, props.value]);
+    }, [props.value, props.onChange, props.name]);
 
     const internalOnChange = useCallback((event: ChangeEvent<any>) => {
-        previousEventRef.current = event;
-        setInternalValue(event.target.value);
-    }, []);
+        const newValue = event.target.value;
+        setInternalValue(newValue);
+
+        if (timerRef.current) clearTimeout(timerRef.current);
+
+        const eventCopy = {
+            ...event,
+            target: {
+                ...event?.target,
+                name: event?.target?.name
+            }
+        };
+
+        timerRef.current = setTimeout(() => {
+            flushChange(newValue, eventCopy as any);
+        }, 150);
+    }, [flushChange]);
+
+    const internalOnBlur = useCallback((event: React.FocusEvent<any>) => {
+        flushChange(internalValue, event as any);
+        props.onBlur?.(event);
+    }, [internalValue, flushChange, props.onBlur]);
 
     return <TextField {...props}
         onChange={internalOnChange}
-        value={internalValue}/>
+        onBlur={internalOnBlur}
+        value={internalValue as T}/>
 }

package/src/components/FilterChip.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { cls } from "../util";
 
-export interface FilterChipProps {
+export interface FilterChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     /**
      * The text label displayed on the chip.
      */
@@ -10,10 +10,6 @@ export interface FilterChipProps {
      * Whether the chip is currently in an active/selected state.
      */
     active?: boolean;
-    /**
-     * Callback when the chip is clicked.
-     */
-    onClick?: () => void;
     /**
      * Optional icon rendered before the label.
      */
@@ -23,10 +19,6 @@ export interface FilterChipProps {
      * @default "medium"
      */
     size?: "small" | "medium";
-    /**
-     * Additional class names.
-     */
-    className?: string;
     /**
      * Whether the chip is disabled.
      */
@@ -47,17 +39,19 @@ const sizeClasses = {
  *
  * @group Interactive components
  */
-export function FilterChip({
+export const FilterChip = React.forwardRef<HTMLButtonElement, FilterChipProps>(function FilterChip({
     children,
     active = false,
     onClick,
     icon,
     size = "medium",
     className,
-    disabled = false
-}: FilterChipProps) {
+    disabled = false,
+    ...rest
+}: FilterChipProps, ref) {
     return (
         <button
+            ref={ref}
             type="button"
             onClick={onClick}
             disabled={disabled}
@@ -76,9 +70,10 @@ export function FilterChip({
                 disabled && "opacity-50 cursor-not-allowed",
                 className
             )}
+            {...rest}
         >
             {icon}
             {children}
         </button>
     );
-}
+});

package/src/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -212,9 +212,10 @@ export const VirtualTableHeaderRow = ({
                 className={cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 border-b bg-surface-50 dark:bg-surface-900")}
                 style={{ height: headerHeight }}>
                 {columns.map((column, columnIndex) => {
+                    const columnFilter = column && filter && filter[column.key] ? filter[column.key] : undefined;
                     const filterForThisProperty: [VirtualTableWhereFilterOp, unknown] | undefined =
-                        column && filter && filter[column.key]
-                            ? filter[column.key]
+                        columnFilter
+                            ? (Array.isArray(columnFilter[0]) ? (columnFilter as [VirtualTableWhereFilterOp, unknown][])[0] : (columnFilter as [VirtualTableWhereFilterOp, unknown]))
                             : undefined;
 
                     const isDraggable = !column.frozen && !!onColumnsOrderChange;

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -274,6 +274,25 @@ export type OnVirtualTableColumnResizeParams = {
     column: VirtualTableColumn
 };
 
+/**
+ * @see Table
+ * @group Components
+ */
+export type WhereFilterOp =
+    | "<"
+    | "<="
+    | "=="
+    | "!="
+    | ">="
+    | ">"
+    | "array-contains"
+    | "in"
+    | "not-in"
+    | "array-contains-any";
+
+export type FilterValues<Key extends string> =
+    Partial<Record<Key, [WhereFilterOp, unknown] | [WhereFilterOp, unknown][]>>;
+
 /**
  * @see Table
  * @group Components
@@ -284,7 +303,7 @@ export type VirtualTableSort = "asc" | "desc" | undefined;
  * @see Table
  * @group Components
  */
-export type VirtualTableFilterValues<Key extends string> = Partial<Record<Key, [VirtualTableWhereFilterOp, unknown]>>;
+export type VirtualTableFilterValues<Key extends string> = FilterValues<Key>;
 
 /**
  * Filter conditions in a `Query.where()` clause are specified using the
@@ -292,14 +311,4 @@ export type VirtualTableFilterValues<Key extends string> = Partial<Record<Key, [
  * @see Table
  * @group Models
  */
-export type VirtualTableWhereFilterOp =
-    | "<"
-    | "<="
-    | "=="
-    | "!="
-    | ">="
-    | ">"
-    | "array-contains"
-    | "in"
-    | "not-in"
-    | "array-contains-any";
+export type VirtualTableWhereFilterOp = WhereFilterOp;