@rebasepro/ui 0.2.5 → 0.4.0

package/dist/components/Card.d.ts

@@ -1,9 +1,8 @@
 import React from "react";
-type CardProps = {
+declare const Card: React.ForwardRefExoticComponent<{
     children: React.ReactNode;
     style?: React.CSSProperties;
     onClick?: (e?: React.MouseEvent) => void;
     className?: string;
-};
-declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export { Card };

package/dist/components/FilterChip.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export interface FilterChipProps {
+export interface FilterChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     /**
      * The text label displayed on the chip.
      */
@@ -8,10 +8,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.
      */
@@ -21,10 +17,6 @@ export interface FilterChipProps {
      * @default "medium"
      */
     size?: "small" | "medium";
-    /**
-     * Additional class names.
-     */
-    className?: string;
     /**
      * Whether the chip is disabled.
      */
@@ -39,4 +31,4 @@ export interface FilterChipProps {
  *
  * @group Interactive components
  */
-export declare function FilterChip({ children, active, onClick, icon, size, className, disabled }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
+export declare const FilterChip: React.ForwardRefExoticComponent<FilterChipProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/VirtualTable/VirtualTableProps.d.ts

@@ -224,6 +224,12 @@ export type OnVirtualTableColumnResizeParams = {
     key: string;
     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
@@ -233,11 +239,11 @@ 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
  * strings `<`, `<=`, `==`, `>=`, `>`, `array-contains`, `in`, and `array-contains-any`.
  * @see Table
  * @group Models
  */
-export type VirtualTableWhereFilterOp = "<" | "<=" | "==" | "!=" | ">=" | ">" | "array-contains" | "in" | "not-in" | "array-contains-any";
+export type VirtualTableWhereFilterOp = WhereFilterOp;

package/dist/index.es.js

@@ -4,7 +4,7 @@ import { c } from "react-compiler-runtime";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import * as React from "react";
-import React__default, { createContext, useContext, useEffect, useRef, useState, Children, forwardRef, useLayoutEffect, useId, useDeferredValue, useMemo, createRef, useCallback } from "react";
+import React__default, { createContext, useContext, useEffect, useRef, useState, Children, forwardRef, useLayoutEffect, useId, useCallback, useMemo, createRef } from "react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { AlertCircleIcon, ShieldAlertIcon, ArrowLeftIcon, RefreshCwIcon, ChevronUpIcon, ChevronDownIcon, MinusIcon, CheckIcon, CalendarIcon, XIcon, ChevronRightIcon, SearchIcon, ChevronLeftIcon, ArrowUpIcon, FilterIcon } from "lucide-react";
 import { AlertCircleIcon as AlertCircleIcon2, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownToLineIcon, ArrowLeftIcon as ArrowLeftIcon2, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightToLineIcon, ArrowUpToLineIcon, BoldIcon, BookOpenIcon, CalendarIcon as CalendarIcon2, CheckCircleIcon, CheckIcon as CheckIcon2, CheckSquareIcon, ChevronDownIcon as ChevronDownIcon2, ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon as ChevronRightIcon2, ChevronUpIcon as ChevronUpIcon2, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleIcon, CircleUserIcon, CodeIcon, ColumnsIcon, CopyIcon, DatabaseIcon, DownloadIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FilterIcon as FilterIcon2, FilterXIcon, FlagIcon, FolderIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GlobeIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, ImageIcon, ImageOffIcon, InfoIcon, ItalicIcon, KanbanIcon, KeyIcon, KeyRoundIcon, LanguagesIcon, LayoutGridIcon, LinkIcon, ListIcon, ListOrderedIcon, LoaderIcon, LogOutIcon, MailIcon, Maximize2Icon, MenuIcon, MinusCircleIcon, MinusIcon as MinusIcon2, MoonIcon, MoreVerticalIcon, Music2Icon, PanelLeftIcon, PauseIcon, PencilIcon, PhoneIcon, PlayIcon, PlusIcon, QuoteIcon, RefreshCcwIcon, RefreshCwIcon as RefreshCwIcon2, RepeatIcon, Rows3Icon, SaveIcon, SearchIcon as SearchIcon2, SendIcon, SettingsIcon, ShieldIcon, ShoppingCartIcon, SlidersHorizontalIcon, SquareIcon, StarIcon, StrikethroughIcon, SunIcon, SunMoonIcon, TableIcon, TagIcon, TerminalIcon, TextIcon, Trash2Icon, TypeIcon, UnderlineIcon, UndoIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, VideoIcon, VoteIcon, Wand2Icon, XCircleIcon, XIcon as XIcon2, icons } from "lucide-react";
@@ -3178,49 +3178,80 @@ const sizeClasses = {
   small: "px-2 py-0.5 text-xs",
   medium: "px-2.5 py-1 text-xs"
 };
-function FilterChip(t0) {
-  const $ = c(11);
-  const {
-    children,
-    active: t1,
-    onClick,
-    icon,
-    size: t2,
-    className,
-    disabled: t3
-  } = t0;
+const FilterChip = React__default.forwardRef(function FilterChip2(t0, ref) {
+  const $ = c(22);
+  let children;
+  let className;
+  let icon;
+  let onClick;
+  let rest;
+  let t1;
+  let t2;
+  let t3;
+  if ($[0] !== t0) {
+    ({
+      children,
+      active: t1,
+      onClick,
+      icon,
+      size: t2,
+      className,
+      disabled: t3,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = icon;
+    $[4] = onClick;
+    $[5] = rest;
+    $[6] = t1;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    children = $[1];
+    className = $[2];
+    icon = $[3];
+    onClick = $[4];
+    rest = $[5];
+    t1 = $[6];
+    t2 = $[7];
+    t3 = $[8];
+  }
   const active = t1 === void 0 ? false : t1;
   const size = t2 === void 0 ? "medium" : t2;
   const disabled = t3 === void 0 ? false : t3;
   const t4 = sizeClasses[size];
   let t5;
-  if ($[0] !== active || $[1] !== className || $[2] !== disabled || $[3] !== t4) {
+  if ($[9] !== active || $[10] !== className || $[11] !== disabled || $[12] !== t4) {
     t5 = cls("inline-flex items-center gap-1 rounded-full", "font-medium whitespace-nowrap select-none shrink-0", "transition-all duration-150", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", t4, active ? "bg-primary/12 text-primary dark:bg-primary/20 dark:text-primary shadow-[inset_0_0_0_1.5px_var(--color-primary)]" : cls("bg-surface-accent-100 text-text-secondary dark:bg-surface-accent-800 dark:text-text-secondary-dark", !disabled && "cursor-pointer hover:bg-surface-accent-200 dark:hover:bg-surface-accent-700"), disabled && "opacity-50 cursor-not-allowed", className);
-    $[0] = active;
-    $[1] = className;
-    $[2] = disabled;
-    $[3] = t4;
-    $[4] = t5;
+    $[9] = active;
+    $[10] = className;
+    $[11] = disabled;
+    $[12] = t4;
+    $[13] = t5;
   } else {
-    t5 = $[4];
+    t5 = $[13];
   }
   let t6;
-  if ($[5] !== children || $[6] !== disabled || $[7] !== icon || $[8] !== onClick || $[9] !== t5) {
-    t6 = /* @__PURE__ */ jsxs("button", { type: "button", onClick, disabled, className: t5, children: [
+  if ($[14] !== children || $[15] !== disabled || $[16] !== icon || $[17] !== onClick || $[18] !== ref || $[19] !== rest || $[20] !== t5) {
+    t6 = /* @__PURE__ */ jsxs("button", { ref, type: "button", onClick, disabled, className: t5, ...rest, children: [
       icon,
       children
     ] });
-    $[5] = children;
-    $[6] = disabled;
-    $[7] = icon;
-    $[8] = onClick;
-    $[9] = t5;
-    $[10] = t6;
+    $[14] = children;
+    $[15] = disabled;
+    $[16] = icon;
+    $[17] = onClick;
+    $[18] = ref;
+    $[19] = rest;
+    $[20] = t5;
+    $[21] = t6;
   } else {
-    t6 = $[10];
+    t6 = $[21];
   }
   return t6;
-}
+});
 const colorClasses = {
   info: "bg-sky-200 dark:bg-teal-900",
   warn: "bg-orange-200 dark:bg-yellow-950"
@@ -7549,73 +7580,59 @@ const Badge = React__default.forwardRef((t0, ref) => {
 });
 Badge.displayName = "Badge";
 function DebouncedTextField(props) {
-  const $ = c(13);
-  const previousEventRef = React__default.useRef(void 0);
-  const [internalValue, setInternalValue] = React__default.useState(props.value);
-  const deferredValue = useDeferredValue(internalValue);
-  let t0;
-  let t1;
-  if ($[0] !== props.value) {
-    t0 = () => {
-      setInternalValue(props.value);
+  const [internalValue, setInternalValue] = useState(props.value ?? "");
+  const lastSentValueRef = useRef(props.value ?? "");
+  const timerRef = useRef(void 0);
+  useEffect(() => {
+    const externalValue = props.value ?? "";
+    if (externalValue !== lastSentValueRef.current) {
+      setInternalValue(externalValue);
+      lastSentValueRef.current = externalValue;
+    }
+  }, [props.value]);
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
     };
-    t1 = [props.value];
-    $[0] = props.value;
-    $[1] = t0;
-    $[2] = t1;
-  } else {
-    t0 = $[1];
-    t1 = $[2];
-  }
-  useEffect(t0, t1);
-  let t2;
-  if ($[3] !== deferredValue || $[4] !== props) {
-    t2 = () => {
-      const emptyInitialValue = !props.value;
-      if (emptyInitialValue && !deferredValue) {
-        return;
-      }
-      if (deferredValue !== props.value && previousEventRef.current && props.onChange) {
-        props.onChange(previousEventRef.current);
+  }, []);
+  const flushChange = useCallback((value, event) => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = void 0;
+    }
+    if (value !== props.value && props.onChange) {
+      lastSentValueRef.current = value;
+      const e = {
+        ...event,
+        target: {
+          ...event?.target,
+          value,
+          name: props.name
+        }
+      };
+      props.onChange(e);
+    }
+  }, [props.value, props.onChange, props.name]);
+  const internalOnChange = useCallback((event_0) => {
+    const newValue = event_0.target.value;
+    setInternalValue(newValue);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    const eventCopy = {
+      ...event_0,
+      target: {
+        ...event_0?.target,
+        name: event_0?.target?.name
       }
     };
-    $[3] = deferredValue;
-    $[4] = props;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  let t3;
-  if ($[6] !== deferredValue || $[7] !== props.value) {
-    t3 = [deferredValue, props.value];
-    $[6] = deferredValue;
-    $[7] = props.value;
-    $[8] = t3;
-  } else {
-    t3 = $[8];
-  }
-  useEffect(t2, t3);
-  let t4;
-  if ($[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t4 = (event) => {
-      previousEventRef.current = event;
-      setInternalValue(event.target.value);
-    };
-    $[9] = t4;
-  } else {
-    t4 = $[9];
-  }
-  const internalOnChange = t4;
-  let t5;
-  if ($[10] !== internalValue || $[11] !== props) {
-    t5 = /* @__PURE__ */ jsx(TextField, { ...props, onChange: internalOnChange, value: internalValue });
-    $[10] = internalValue;
-    $[11] = props;
-    $[12] = t5;
-  } else {
-    t5 = $[12];
-  }
-  return t5;
+    timerRef.current = setTimeout(() => {
+      flushChange(newValue, eventCopy);
+    }, 150);
+  }, [flushChange]);
+  const internalOnBlur = useCallback((event_1) => {
+    flushChange(internalValue, event_1);
+    props.onBlur?.(event_1);
+  }, [internalValue, flushChange, props.onBlur]);
+  return /* @__PURE__ */ jsx(TextField, { ...props, onChange: internalOnChange, onBlur: internalOnBlur, value: internalValue });
 }
 const styles = `
 @keyframes shimmer {
@@ -8335,7 +8352,8 @@ const VirtualTableHeaderRow = ({
     height: headerHeight
   }, children: [
     columns.map((column_0, columnIndex) => {
-      const filterForThisProperty = column_0 && filter && filter[column_0.key] ? filter[column_0.key] : void 0;
+      const columnFilter = column_0 && filter && filter[column_0.key] ? filter[column_0.key] : void 0;
+      const filterForThisProperty = columnFilter ? Array.isArray(columnFilter[0]) ? columnFilter[0] : columnFilter : void 0;
       const isDraggable = !column_0.frozen && !!onColumnsOrderChange;
       const isDragging = draggingColumnId === column_0.key;
       return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(SortableColumnHeader, { column: column_0, columnIndex, columnRefs, isResizing, onFilterUpdate, filter: filterForThisProperty, sortByProperty, currentSort, onColumnSort, onClickResizeColumn, createFilterField, isDragging, isDraggable }) }, "header_" + column_0.key);