@firecms/ui 3.0.0-alpha.63 → 3.0.0-alpha.65

package/dist/util/useDebounceValue.d.ts

@@ -0,0 +1 @@
+export declare function useDebounceValue<T>(value: T, delay?: number): T;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/ui",
     "type": "module",
-    "version": "3.0.0-alpha.63",
+    "version": "3.0.0-alpha.65",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -116,7 +116,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "5605d67318bec83aeae289a2a8a989db32894e7c",
+    "gitHead": "36de2bb0fb9e1baa20262d3c520830389e688f91",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Button.tsx

@@ -45,8 +45,8 @@ export function Button<P extends React.ElementType>({
     const sizeClasses = cn(
         {
             "py-1 px-2": size === "small",
-            "py-2 px-3.5": size === "medium",
-            "py-3 px-4": size === "large"
+            "py-2 px-4": size === "medium",
+            "py-2.5 px-5": size === "large"
         }
     );
 

package/src/components/SearchBar.tsx

@@ -1,39 +1,49 @@
-import React, { useCallback, useDeferredValue, useState } from "react";
+import React, { useCallback, useState } from "react";
 
 import { defaultBorderMixin, focusedMixin } from "../styles";
-import { IconButton } from "./index";
+import { CircularProgress, IconButton } from "./index";
 import { ClearIcon, SearchIcon } from "../icons";
 import { cn } from "../util";
+import { useDebounceValue } from "../util/useDebounceValue";
 
 interface SearchBarProps {
-    onTextSearch: (searchString?: string) => void;
+    onClick?: () => void;
+    onTextSearch?: (searchString?: string) => void;
     placeholder?: string;
     expandable?: boolean;
     large?: boolean;
     innerClassName?: string;
     className?: string;
     autoFocus?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    inputRef?: React.Ref<HTMLInputElement>;
 }
 
 export function SearchBar({
+                              onClick,
                               onTextSearch,
                               placeholder = "Search",
                               expandable = false,
                               large = false,
                               innerClassName,
                               className,
-                              autoFocus
+                              autoFocus,
+                              disabled,
+                              loading,
+                              inputRef
                           }: SearchBarProps) {
 
     const [searchText, setSearchText] = useState<string>("");
     const [active, setActive] = useState<boolean>(false);
 
-    const deferredValues = useDeferredValue(searchText);
+    const deferredValues = useDebounceValue(searchText, 200);
 
     /**
      * Debounce on Search text update
      */
     React.useEffect(() => {
+        if (!onTextSearch) return;
         if (deferredValues) {
             onTextSearch(deferredValues);
         } else {
@@ -42,31 +52,39 @@ export function SearchBar({
     }, [deferredValues]);
 
     const clearText = useCallback(() => {
+        if (!onTextSearch) return;
         setSearchText("");
         onTextSearch(undefined);
     }, []);
 
     return (
-        <div className={cn("relative",
-            large ? "h-14" : "h-[42px]",
-            "bg-gray-50 dark:bg-gray-800 transition duration-150 ease-in-out border",
-            defaultBorderMixin,
-            "rounded",
-            className)}>
+        <div
+            onClick={onClick}
+            className={cn("relative",
+                large ? "h-14" : "h-[42px]",
+                "bg-gray-50 dark:bg-gray-800 transition duration-150 ease-in-out border",
+                defaultBorderMixin,
+                "rounded",
+                className)}>
             <div
                 className="absolute p-0 px-4 h-full absolute pointer-events-none flex items-center justify-center top-0">
-                <SearchIcon className={"text-gray-500"}/>
+                {loading ? <CircularProgress size={"small"}/> : <SearchIcon className={"text-gray-500"}/>}
             </div>
             <input
-                placeholder={placeholder}
                 value={searchText}
-                onChange={(event) => {
-                    setSearchText(event.target.value);
-                }}
+                ref={inputRef}
+                onClick={onClick}
+                placeholder={placeholder}
+                onChange={onTextSearch
+                    ? (event) => {
+                        setSearchText(event.target.value);
+                    }
+                    : undefined}
                 autoFocus={autoFocus}
                 onFocus={() => setActive(true)}
                 onBlur={() => setActive(false)}
                 className={cn(
+                    (disabled || loading) && "pointer-events-none",
                     "relative flex items-center rounded transition-all bg-transparent outline-none appearance-none border-none",
                     "pl-12 h-full text-current ",
                     expandable ? (active ? "w-[220px]" : "w-[180px]") : "",
@@ -77,7 +95,6 @@ export function SearchBar({
             {searchText
                 ? <IconButton
                     className={`${large ? "mr-2 top-1" : "mr-1 top-0"} absolute right-0 z-10`}
-                    // size={"small"}
                     onClick={clearText}>
                     <ClearIcon size={"small"}/>
                 </IconButton>

package/src/util/useDebounceValue.tsx

@@ -0,0 +1,18 @@
+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;
+}