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

package/dist/src/index.d.ts

@@ -485,6 +485,8 @@ interface FacetsProps {
     hideEmptyFacets?: boolean;
     /** Fields that should start collapsed (collapsible variant only). Overrides defaultCollapsed for listed fields. */
     defaultCollapsedFields?: string[];
+    /** Callback fired when facet availability changes. Receives true when facets are available, false when empty. */
+    onFacetsAvailable?: (available: boolean) => void;
 }
 declare const Facets: React__default.FC<FacetsProps>;
 
@@ -2185,6 +2187,8 @@ interface ProductDisplayConfig {
     showImage?: boolean;
     /** Image aspect ratio */
     imageAspectRatio?: '1:1' | '4:3' | '3:4' | '16:9' | 'auto';
+    /** Image object-fit: 'cover' crops to fill (default), 'contain' fits entire image */
+    imageObjectFit?: 'cover' | 'contain';
     /** Show price */
     showPrice?: boolean;
     /** Show compare/original price */

package/dist/src/index.esm.js

@@ -2709,11 +2709,8 @@ function getCurrentBreakpoint(width) {
  * Hook to get current breakpoint
  */
 function useBreakpoint() {
-    const [breakpoint, setBreakpoint] = 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] = useState('lg');
     useEffect(() => {
         const handleResize = () => {
             setBreakpoint(getCurrentBreakpoint(window.innerWidth));
@@ -2728,11 +2725,8 @@ function useBreakpoint() {
  * Hook to check if current viewport matches breakpoint
  */
 function useMediaQuery(query) {
-    const [matches, setMatches] = 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] = useState(false);
     useEffect(() => {
         const mediaQuery = window.matchMedia(query);
         const handleChange = () => setMatches(mediaQuery.matches);
@@ -3528,15 +3522,22 @@ const useFilters = (options) => {
     const [error, setError] = useState(null);
     const mountedRef = useRef(true);
     const autoFetch = options?.autoFetch !== false;
+    // Track whether we've completed the first fetch (to avoid skeleton flash on refetches)
+    const hasDataRef = useRef(false);
     // Extract non-autoFetch options to pass to fetchFilters
     const fetchFilters = 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);
             }
         }
@@ -3547,14 +3548,18 @@ const useFilters = (options) => {
             }
         }
     }, [stateManager, options?.facetBy, options?.maxFacetValues, options?.disjunctiveFacets?.join(',')]);
-    // Track query + refinements to only refetch when they actually change
-    const prevKeyRef = useRef('');
+    // Track query to only refetch filters when query actually changes.
+    // Sentinel ensures the first subscribe callback always triggers a fetch.
+    const prevKeyRef = useRef(null);
     // Refetch when query or refinements change (not on every state update)
     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;
@@ -3904,7 +3909,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 || {};
@@ -3982,9 +3987,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 = useRef(null);
+    useEffect(() => {
+        if (!onFacetsAvailable)
+            return;
+        const available = facetCount > 0;
+        if (prevFacetAvailableRef.current !== available) {
+            prevFacetAvailableRef.current = available;
+            onFacetsAvailable(available);
+        }
+    }, [facetCount, onFacetsAvailable]);
     // -------------------------------------------------------------------
     // Handlers
     // -------------------------------------------------------------------
@@ -10327,7 +10345,7 @@ function ImageDisplay({ images, variant = 'single', alt = '', className, style,
     if (variant === 'hover') {
         const showSecond = safeImages.length > 1 && hovering;
         const src = showSecond ? safeImages[1] : safeImages[0];
-        const hoverImgStyle = style?.aspectRatio ? { ...imgBaseStyle, aspectRatio: style.aspectRatio } : imgBaseStyle;
+        const hoverImgStyle = style?.aspectRatio || style?.objectFit ? { ...imgBaseStyle, ...(style.aspectRatio ? { aspectRatio: style.aspectRatio } : {}), ...(style.objectFit ? { objectFit: style.objectFit } : {}) } : imgBaseStyle;
         if (enableZoom) {
             return (React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-hover', className), style: { position: 'relative', ...style }, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false) },
                 React.createElement(ImageZoom, { src: src, alt: alt, mode: zoomMode, zoomLevel: zoomLevel, images: safeImages, currentIndex: showSecond ? 1 : 0, className: "seekora-img-hover-img", style: hoverImgStyle })));
@@ -10346,7 +10364,7 @@ function ImageDisplay({ images, variant = 'single', alt = '', className, style,
                 return next;
             });
         };
-        const carouselImgStyle = style?.aspectRatio ? { ...imgBaseStyle, aspectRatio: style.aspectRatio } : imgBaseStyle;
+        const carouselImgStyle = style?.aspectRatio || style?.objectFit ? { ...imgBaseStyle, ...(style.aspectRatio ? { aspectRatio: style.aspectRatio } : {}), ...(style.objectFit ? { objectFit: style.objectFit } : {}) } : imgBaseStyle;
         const mainImage = enableZoom ? (React.createElement(ImageZoom, { src: current, alt: alt, mode: zoomMode, zoomLevel: zoomLevel, images: safeImages, currentIndex: index, className: "seekora-img-carousel-main", style: carouselImgStyle })) : (React.createElement("img", { src: current, alt: alt, className: "seekora-img-carousel-main", style: carouselImgStyle, loading: "lazy" }));
         return (React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-carousel', className), style: { position: 'relative', ...style } },
             mainImage,
@@ -10378,7 +10396,7 @@ function ImageDisplay({ images, variant = 'single', alt = '', className, style,
                     } })))))))));
     }
     if (variant === 'thumbStrip' || variant === 'thumbList') {
-        const thumbMainStyle = style?.aspectRatio ? { ...imgBaseStyle, aspectRatio: style.aspectRatio } : imgBaseStyle;
+        const thumbMainStyle = style?.aspectRatio || style?.objectFit ? { ...imgBaseStyle, ...(style.aspectRatio ? { aspectRatio: style.aspectRatio } : {}), ...(style.objectFit ? { objectFit: style.objectFit } : {}) } : imgBaseStyle;
         const mainImage = enableZoom ? (React.createElement(ImageZoom, { src: current, alt: alt, mode: zoomMode, zoomLevel: zoomLevel, images: safeImages, currentIndex: index, className: "seekora-img-thumb-main", style: thumbMainStyle })) : (React.createElement("img", { src: current, alt: alt, className: "seekora-img-thumb-main", style: thumbMainStyle, loading: "lazy" }));
         return (React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-thumbstrip', className), style: { display: 'flex', flexDirection: 'column', gap: responsiveGap, ...style } },
             mainImage,
@@ -11561,15 +11579,15 @@ const imgPlaceholderStyle = {
     borderRadius: BORDER_RADIUS$1.sm,
     backgroundColor: 'var(--seekora-bg-secondary, rgba(0,0,0,0.04))',
 };
-function ImageBlock({ images, title, imageVariant, aspectRatio, enableZoom, zoomMode, zoomLevel }) {
+function ImageBlock({ images, title, imageVariant, aspectRatio, objectFit, enableZoom, zoomMode, zoomLevel }) {
     const ar = aspectRatio
         ? (aspectRatio.includes(':') ? aspectRatio.replace(':', '/') : aspectRatio)
         : '1';
     if (images.length > 0) {
         return (React.createElement("div", { className: "seekora-product-card__image", style: { position: 'relative', overflow: 'hidden', borderRadius: BORDER_RADIUS$1.sm } },
-            React.createElement(ImageDisplay, { images: images, variant: images.length > 1 ? imageVariant : 'single', alt: title, className: "seekora-suggestions-product-card-image", style: { aspectRatio: ar }, enableZoom: enableZoom, zoomMode: zoomMode, zoomLevel: zoomLevel })));
+            React.createElement(ImageDisplay, { images: images, variant: images.length > 1 ? imageVariant : 'single', alt: title, className: "seekora-suggestions-product-card-image", style: { aspectRatio: ar, ...(objectFit ? { objectFit } : {}) }, enableZoom: enableZoom, zoomMode: zoomMode, zoomLevel: zoomLevel })));
     }
-    return React.createElement("div", { className: "seekora-product-card__image seekora-suggestions-product-card-placeholder", style: { ...imgPlaceholderStyle, aspectRatio: ar }, "aria-hidden": true });
+    return React.createElement("div", { className: "seekora-product-card__image seekora-suggestions-product-card-placeholder", style: { ...imgPlaceholderStyle, aspectRatio: ar, ...(objectFit ? { objectFit } : {}) }, "aria-hidden": true });
 }
 /** minimal: image, title, price (current default behavior) */
 function MinimalLayout({ images, title, price, product, imageVariant, displayConfig, enableImageZoom, imageZoomMode, imageZoomLevel }) {
@@ -11577,7 +11595,7 @@ function MinimalLayout({ images, title, price, product, imageVariant, displayCon
     const titleFontSize = isMobile ? '0.9375rem' : '0.875rem'; // Slightly larger on mobile
     const priceFontSize = isMobile ? '0.9375rem' : '0.875rem';
     return (React.createElement(React.Fragment, null,
-        React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: displayConfig.imageAspectRatio, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
+        React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: displayConfig.imageAspectRatio, objectFit: displayConfig.imageObjectFit, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
         React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: titleFontSize, fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' } }, title),
         price != null && !Number.isNaN(price) && (React.createElement("span", { className: "seekora-product-card__price seekora-suggestions-product-card-price", style: { fontSize: priceFontSize, color: 'inherit', opacity: 0.6 } },
             product.currency ?? '$',
@@ -11595,7 +11613,7 @@ function StandardLayout({ images, title, price, comparePrice, brand, badges, opt
     const isOverlayPosition = actionButtonsPosition?.startsWith('overlay');
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { style: { position: 'relative' } },
-            React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: cfg.imageAspectRatio, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
+            React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: cfg.imageAspectRatio, objectFit: cfg.imageObjectFit, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
             cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left", maxBadges: 2 })),
             actionButtons && actionButtons.length > 0 && isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" }))),
         React.createElement("div", { className: "seekora-product-card__body", style: { display: 'flex', flexDirection: 'column', gap: bodyGap } },
@@ -11614,7 +11632,7 @@ function DetailedLayout({ images, title, price, comparePrice, brand, badges, pri
     const isOverlayPosition = actionButtonsPosition?.startsWith('overlay');
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { style: { position: 'relative' } },
-            React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: cfg.imageAspectRatio, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
+            React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: cfg.imageAspectRatio, objectFit: cfg.imageObjectFit, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
             cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left" })),
             actionButtons && actionButtons.length > 0 && isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" }))),
         React.createElement("div", { className: "seekora-product-card__body", style: { display: 'flex', flexDirection: 'column', gap: 4 } },