@seekora-ai/ui-sdk-react 0.2.25 → 0.2.26

package/dist/src/index.js

@@ -2711,11 +2711,8 @@ function getCurrentBreakpoint(width) {
  * Hook to get current breakpoint
  */
 function useBreakpoint() {
-    const [breakpoint, setBreakpoint] = React.useState(() => {
-        if (typeof window === 'undefined')
-            return 'lg';
-        return getCurrentBreakpoint(window.innerWidth);
-    });
+    // Always start with 'lg' to avoid hydration mismatch between server and client
+    const [breakpoint, setBreakpoint] = React.useState('lg');
     React.useEffect(() => {
         const handleResize = () => {
             setBreakpoint(getCurrentBreakpoint(window.innerWidth));
@@ -2730,11 +2727,8 @@ function useBreakpoint() {
  * Hook to check if current viewport matches breakpoint
  */
 function useMediaQuery(query) {
-    const [matches, setMatches] = React.useState(() => {
-        if (typeof window === 'undefined')
-            return false;
-        return window.matchMedia(query).matches;
-    });
+    // Always start with false to avoid hydration mismatch between server and client
+    const [matches, setMatches] = React.useState(false);
     React.useEffect(() => {
         const mediaQuery = window.matchMedia(query);
         const handleChange = () => setMatches(mediaQuery.matches);
@@ -3530,15 +3524,22 @@ const useFilters = (options) => {
     const [error, setError] = React.useState(null);
     const mountedRef = React.useRef(true);
     const autoFetch = options?.autoFetch !== false;
+    // Track whether we've completed the first fetch (to avoid skeleton flash on refetches)
+    const hasDataRef = React.useRef(false);
     // Extract non-autoFetch options to pass to fetchFilters
     const fetchFilters = React.useCallback(async () => {
-        setLoading(true);
+        // Only show loading spinner on the very first fetch; subsequent refetches
+        // keep previous data visible to avoid skeleton/flash on facet changes.
+        if (!hasDataRef.current) {
+            setLoading(true);
+        }
         setError(null);
         try {
             const { autoFetch: _, ...filterOptions } = options || {};
             const response = await stateManager.fetchFilters(filterOptions);
             if (mountedRef.current) {
                 setFilters(response?.filters || []);
+                hasDataRef.current = true;
                 setLoading(false);
             }
         }
@@ -3549,14 +3550,18 @@ const useFilters = (options) => {
             }
         }
     }, [stateManager, options?.facetBy, options?.maxFacetValues, options?.disjunctiveFacets?.join(',')]);
-    // Track query + refinements to only refetch when they actually change
-    const prevKeyRef = React.useRef('');
+    // Track query to only refetch filters when query actually changes.
+    // Sentinel ensures the first subscribe callback always triggers a fetch.
+    const prevKeyRef = React.useRef(null);
     // Refetch when query or refinements change (not on every state update)
     React.useEffect(() => {
         if (!autoFetch)
             return;
         const unsubscribe = stateManager.subscribe((state) => {
-            const key = `${state.query}|${state.refinements.map(r => `${r.field}:${r.value}`).sort().join(',')}`;
+            // Only track query changes — refinements are NOT passed to the Filters API
+            // (facets are generated from search query only, not narrowed by active filters).
+            // This prevents redundant filters refetches on every facet toggle.
+            const key = state.query;
             if (key === prevKeyRef.current)
                 return;
             prevKeyRef.current = key;
@@ -3906,7 +3911,7 @@ const CSS_VAR_DEFAULTS = {
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, renderFacet, renderFacetItem, maxItems = 10, showMore = true, className, style, theme: customTheme, variant = 'checkbox', searchable = false, showCounts = true, colorMap, defaultCollapsed = false, size = 'medium', facetRanges, useFiltersApi = false, disjunctiveFacets, hideEmptyFacets = true, defaultCollapsedFields, }) => {
+const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, renderFacet, renderFacetItem, maxItems = 10, showMore = true, className, style, theme: customTheme, variant = 'checkbox', searchable = false, showCounts = true, colorMap, defaultCollapsed = false, size = 'medium', facetRanges, useFiltersApi = false, disjunctiveFacets, hideEmptyFacets = true, defaultCollapsedFields, onFacetsAvailable, }) => {
     const { theme } = useSearchContext();
     const { results: stateResults, refinements, addRefinement, removeRefinement } = useSearchState();
     const facetsTheme = customTheme || {};
@@ -3984,9 +3989,22 @@ const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, rende
         return extracted;
     };
     const rawFacetList = extractFacets();
+    const hasStats = (stats) => stats != null && (stats.min != null || stats.max != null);
     const facets = hideEmptyFacets
-        ? rawFacetList.filter(f => f.items.length > 0 || f.stats != null)
+        ? rawFacetList.filter(f => f.items.length > 0 || hasStats(f.stats))
         : rawFacetList;
+    // Notify parent about facet availability
+    const facetCount = facets.length;
+    const prevFacetAvailableRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!onFacetsAvailable)
+            return;
+        const available = facetCount > 0;
+        if (prevFacetAvailableRef.current !== available) {
+            prevFacetAvailableRef.current = available;
+            onFacetsAvailable(available);
+        }
+    }, [facetCount, onFacetsAvailable]);
     // -------------------------------------------------------------------
     // Handlers
     // -------------------------------------------------------------------