@rebasepro/ui 0.3.0 → 0.5.0

package/dist/index.umd.js

@@ -873,9 +873,10 @@
       "min-h-[64px]": size === "large"
     }, size === "small" || size === "smallest" ? "pl-2" : "pl-4", size === "small" || size === "smallest" ? "pr-4" : "pr-6", position === "end" ? "flex-row-reverse" : "flex-row", fullWidth ? "w-full" : "", className), onClick: disabled ? void 0 : (e) => {
       if (props.allowIndeterminate) {
-        if (value === null || value === void 0) onValueChange?.(true);
-        else if (value) onValueChange?.(false);
-        else onValueChange?.(null);
+        const onChange = onValueChange;
+        if (value === null || value === void 0) onChange?.(true);
+        else if (value) onChange?.(false);
+        else onChange?.(null);
       } else {
         onValueChange?.(!value);
       }
@@ -989,15 +990,15 @@
           "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40 bg-surface-300/40 dark:bg-surface-500/40": t25
         });
         const sizeClasses2 = cls({
-          "py-0.5 px-1.5": size === "small",
-          "py-1.5 px-3": size === "medium",
-          "py-2 px-4": size === "large",
-          "py-2.5 px-5": size === "xl",
-          "py-3 px-6": size === "2xl"
+          "py-1 px-2": size === "small",
+          "py-2 px-4": size === "medium",
+          "py-2.5 px-5": size === "large",
+          "py-3 px-6": size === "xl",
+          "py-4 px-10": size === "2xl"
         });
         const iconColorClass = (color === "neutral" || color === "text") && !disabled ? "[&>svg]:text-surface-accent-500 dark:[&>svg]:text-surface-accent-300" : "";
         if (Component) {
-          t30 = /* @__PURE__ */ jsxRuntime.jsxs(Component, { ref, onClick: props.onClick, className: cls(startIcon ? "pl-3" : "", "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-1.5 px-3 focus:outline-none transition-all ease-in-out duration-150 gap-1.5 active:scale-[0.98]", buttonClasses2, sizeClasses2, iconColorClass, className), ...props, children: [
+          t30 = /* @__PURE__ */ jsxRuntime.jsxs(Component, { ref, onClick: props.onClick, className: cls(startIcon ? "pl-3" : "", "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-all ease-in-out duration-150 gap-2 active:scale-[0.98]", buttonClasses2, sizeClasses2, iconColorClass, className), ...props, children: [
             startIcon,
             children
           ] });
@@ -1006,7 +1007,7 @@
         t26 = ref;
         t27 = props.type ?? "button";
         t28 = props.onClick;
-        t29 = cls(startIcon ? "pl-3" : "", "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-1.5 px-3 focus:outline-none transition-all ease-in-out duration-150 gap-1.5 active:scale-[0.98]", buttonClasses2, sizeClasses2, iconColorClass, className);
+        t29 = cls(startIcon ? "pl-3" : "", "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-all ease-in-out duration-150 gap-2 active:scale-[0.98]", buttonClasses2, sizeClasses2, iconColorClass, className);
       }
       $[11] = Component;
       $[12] = children;
@@ -2151,10 +2152,10 @@
   const baseClasses = "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
   const colorClasses$1 = "text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-300";
   const sizeClasses$1 = {
-    medium: "w-9 !h-9 min-w-9 min-h-9",
-    small: "w-7 !h-7 min-w-7 min-h-7",
-    smallest: "w-5 !h-5 min-w-5 min-h-5",
-    large: "w-10 !h-10 min-w-10 min-h-10"
+    medium: "w-10 !h-10 min-w-10 min-h-10",
+    small: "w-8 !h-8 min-w-8 min-h-8",
+    smallest: "w-6 !h-6 min-w-6 min-h-6",
+    large: "w-12 !h-12 min-w-12 min-h-12"
   };
   const shapeClasses = {
     circular: "rounded-full",
@@ -3182,49 +3183,80 @@
     small: "px-2 py-0.5 text-xs",
     medium: "px-2.5 py-1 text-xs"
   };
-  function FilterChip(t0) {
-    const $ = reactCompilerRuntime.c(11);
-    const {
-      children,
-      active: t1,
-      onClick,
-      icon,
-      size: t2,
-      className,
-      disabled: t3
-    } = t0;
+  const FilterChip = React.forwardRef(function FilterChip2(t0, ref) {
+    const $ = reactCompilerRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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"
@@ -7005,7 +7037,7 @@
     } else {
       t10 = $[12];
     }
-    const t11 = variant === "standard" && "inline-flex h-10 items-center justify-start rounded-md bg-surface-50 p-1 text-surface-600 dark:bg-surface-900 dark:text-surface-400 gap-2 border";
+    const t11 = variant === "standard" && "inline-flex h-9 items-center justify-start rounded-md bg-surface-50 p-1 text-surface-600 dark:bg-surface-900 dark:text-surface-400 gap-2 border";
     const t12 = variant === "standard" && defaultBorderMixin;
     const t13 = variant === "boxy" && "flex items-center h-full";
     const t14 = variant === "pill" && "flex items-center gap-0.5";
@@ -7079,7 +7111,7 @@
     const {
       variant
     } = React.useContext(TabsContext);
-    const t1 = variant === "standard" && "rounded-sm px-3 py-1.5 data-[state=active]:bg-white data-[state=active]:text-surface-900 data-[state=active]:shadow-sm dark:data-[state=active]:bg-surface-900 dark:data-[state=active]:text-surface-50";
+    const t1 = variant === "standard" && "rounded-sm px-3 py-1 data-[state=active]:bg-white data-[state=active]:text-surface-900 data-[state=active]:shadow-sm dark:data-[state=active]:bg-surface-900 dark:data-[state=active]:text-surface-50";
     let t2;
     if ($[0] !== className || $[1] !== innerClassName || $[2] !== t1 || $[3] !== variant) {
       t2 = cls("inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-white transition-all", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", t1, variant === "boxy" && cls("flex-shrink-0 flex items-center gap-1.5 px-3.5 h-9 border-r border-surface-200 dark:border-surface-800 cursor-pointer text-[12px] font-medium transition-colors group relative box-border overflow-hidden", "border-b-2 border-b-transparent", "data-[state=active]:bg-surface-50 dark:data-[state=active]:bg-surface-900", "data-[state=active]:text-text-primary dark:data-[state=active]:text-text-primary-dark", "data-[state=active]:border-b-primary", "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-100 dark:hover:bg-surface-800"), variant === "pill" && cls("px-2 py-0.5 rounded text-[10px] font-medium transition-colors", "data-[state=active]:bg-primary/10 data-[state=active]:text-primary dark:data-[state=active]:bg-primary/20 dark:data-[state=active]:text-blue-400", "text-text-disabled dark:text-text-disabled-dark hover:text-text-secondary dark:hover:text-text-secondary-dark"), className, variant === "standard" && innerClassName);
@@ -7553,73 +7585,59 @@
   });
   Badge.displayName = "Badge";
   function DebouncedTextField(props) {
-    const $ = reactCompilerRuntime.c(13);
-    const previousEventRef = React.useRef(void 0);
-    const [internalValue, setInternalValue] = React.useState(props.value);
-    const deferredValue = React.useDeferredValue(internalValue);
-    let t0;
-    let t1;
-    if ($[0] !== props.value) {
-      t0 = () => {
-        setInternalValue(props.value);
+    const [internalValue, setInternalValue] = React.useState(props.value ?? "");
+    const lastSentValueRef = React.useRef(props.value ?? "");
+    const timerRef = React.useRef(void 0);
+    React.useEffect(() => {
+      const externalValue = props.value ?? "";
+      if (externalValue !== lastSentValueRef.current) {
+        setInternalValue(externalValue);
+        lastSentValueRef.current = externalValue;
+      }
+    }, [props.value]);
+    React.useEffect(() => {
+      return () => {
+        if (timerRef.current) clearTimeout(timerRef.current);
       };
-      t1 = [props.value];
-      $[0] = props.value;
-      $[1] = t0;
-      $[2] = t1;
-    } else {
-      t0 = $[1];
-      t1 = $[2];
-    }
-    React.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 = React.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 = React.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];
-    }
-    React.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__ */ jsxRuntime.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 = React.useCallback((event_1) => {
+      flushChange(internalValue, event_1);
+      props.onBlur?.(event_1);
+    }, [internalValue, flushChange, props.onBlur]);
+    return /* @__PURE__ */ jsxRuntime.jsx(TextField, { ...props, onChange: internalOnChange, onBlur: internalOnBlur, value: internalValue });
   }
   const styles = `
 @keyframes shimmer {
@@ -8339,7 +8357,8 @@
       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__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(SortableColumnHeader, { column: column_0, columnIndex, columnRefs, isResizing, onFilterUpdate, filter: filterForThisProperty, sortByProperty, currentSort, onColumnSort, onClickResizeColumn, createFilterField, isDragging, isDraggable }) }, "header_" + column_0.key);