@seekora-ai/ui-sdk-react 0.2.22 → 0.2.23

package/dist/src/index.js

@@ -3114,6 +3114,201 @@ const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsP
             resolvedShowPageInfo && (React.createElement("li", { style: { marginLeft: theme.spacing.small } }, pageInfoElement)))));
 };
 
+/**
+ * CustomSelect — lightweight, accessible custom dropdown replacement for native <select>.
+ *
+ * CSS Variables (apply on a parent element to customize):
+ * --seekora-select-bg           — background color (default: #fff)
+ * --seekora-select-color        — text color (default: inherit)
+ * --seekora-select-border       — border color (default: rgba(128,128,128,0.3))
+ * --seekora-select-hover-bg     — option hover background (default: #f3f4f6)
+ * --seekora-select-active-bg    — selected option background (default: #eff6ff)
+ * --seekora-select-active-color — selected option text color (default: inherit)
+ * --seekora-select-radius       — border radius (default: 6px)
+ * --seekora-select-font-size    — font size (default: 0.875rem)
+ */
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+const CustomSelect = ({ value, onChange, options, placeholder = 'Select...', className, style, theme: customTheme, 'aria-label': ariaLabel, disabled = false, }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [activeIndex, setActiveIndex] = React.useState(-1);
+    const containerRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const instanceId = React.useId();
+    const t = customTheme || {};
+    const selectedOption = options.find((o) => o.value === value);
+    const displayLabel = selectedOption?.label ?? placeholder;
+    // Close on click outside
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleMouseDown = (e) => {
+            if (containerRef.current && !containerRef.current.contains(e.target)) {
+                setIsOpen(false);
+                setActiveIndex(-1);
+            }
+        };
+        document.addEventListener('mousedown', handleMouseDown);
+        return () => document.removeEventListener('mousedown', handleMouseDown);
+    }, [isOpen]);
+    // Scroll active item into view
+    React.useEffect(() => {
+        if (!isOpen || activeIndex < 0 || !menuRef.current)
+            return;
+        const item = menuRef.current.children[activeIndex];
+        item?.scrollIntoView?.({ block: 'nearest' });
+    }, [activeIndex, isOpen]);
+    const toggle = React.useCallback(() => {
+        if (disabled)
+            return;
+        setIsOpen((prev) => {
+            if (!prev) {
+                // Opening — highlight current selection
+                const idx = options.findIndex((o) => o.value === value);
+                setActiveIndex(idx >= 0 ? idx : 0);
+            }
+            return !prev;
+        });
+    }, [disabled, options, value]);
+    const selectOption = React.useCallback((opt) => {
+        if (opt.disabled)
+            return;
+        onChange(opt.value);
+        setIsOpen(false);
+        setActiveIndex(-1);
+    }, [onChange]);
+    // Find next non-disabled index in given direction
+    const findNextEnabled = (from, dir) => {
+        let idx = from;
+        for (let i = 0; i < options.length; i++) {
+            idx += dir;
+            if (idx < 0)
+                idx = options.length - 1;
+            if (idx >= options.length)
+                idx = 0;
+            if (!options[idx].disabled)
+                return idx;
+        }
+        return from;
+    };
+    const handleKeyDown = React.useCallback((e) => {
+        if (disabled)
+            return;
+        if (!isOpen) {
+            if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {
+                e.preventDefault();
+                toggle();
+            }
+            return;
+        }
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                setActiveIndex((prev) => findNextEnabled(prev, 1));
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setActiveIndex((prev) => findNextEnabled(prev, -1));
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (activeIndex >= 0 && !options[activeIndex].disabled) {
+                    selectOption(options[activeIndex]);
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                setIsOpen(false);
+                setActiveIndex(-1);
+                break;
+            case 'Home':
+                e.preventDefault();
+                setActiveIndex(findNextEnabled(-1, 1));
+                break;
+            case 'End':
+                e.preventDefault();
+                setActiveIndex(findNextEnabled(options.length, -1));
+                break;
+            case 'Tab':
+                setIsOpen(false);
+                setActiveIndex(-1);
+                break;
+        }
+    }, [disabled, isOpen, activeIndex, options, toggle, selectOption]);
+    const menuId = `seekora-select-menu-${instanceId}`;
+    return (React.createElement("div", { ref: containerRef, className: clsx('seekora-select', className), style: { position: 'relative', display: 'inline-block', ...style }, onKeyDown: handleKeyDown },
+        React.createElement("button", { type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel, "aria-activedescendant": isOpen && activeIndex >= 0
+                ? `${menuId}-opt-${activeIndex}`
+                : undefined, disabled: disabled, onClick: toggle, className: clsx('seekora-select__trigger', t.trigger), style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: 8,
+                width: '100%',
+                padding: '8px 12px',
+                fontSize: 'var(--seekora-select-font-size, 0.875rem)',
+                lineHeight: 1.4,
+                border: '1px solid var(--seekora-select-border, rgba(128,128,128,0.3))',
+                borderRadius: 'var(--seekora-select-radius, 6px)',
+                backgroundColor: 'var(--seekora-select-bg, #fff)',
+                color: 'var(--seekora-select-color, inherit)',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                outline: 'none',
+                textAlign: 'left',
+                fontFamily: 'inherit',
+                opacity: disabled ? 0.5 : 1,
+            } },
+            React.createElement("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, displayLabel),
+            React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: {
+                    flexShrink: 0,
+                    transition: 'transform 0.15s ease',
+                    transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                } },
+                React.createElement("path", { d: "M2.5 4.5L6 8L9.5 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))),
+        isOpen && (React.createElement("div", { ref: menuRef, id: menuId, role: "listbox", className: clsx('seekora-select__menu', t.menu), style: {
+                position: 'absolute',
+                top: '100%',
+                left: 0,
+                right: 0,
+                zIndex: 9999,
+                marginTop: 4,
+                padding: '4px 0',
+                border: '1px solid var(--seekora-select-border, rgba(128,128,128,0.3))',
+                borderRadius: 'var(--seekora-select-radius, 6px)',
+                backgroundColor: 'var(--seekora-select-bg, #fff)',
+                boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+                maxHeight: 220,
+                overflowY: 'auto',
+            } }, options.map((opt, idx) => {
+            const isSelected = opt.value === value;
+            const isHighlighted = idx === activeIndex;
+            return (React.createElement("div", { key: opt.value, id: `${menuId}-opt-${idx}`, role: "option", "aria-selected": isSelected, "aria-disabled": opt.disabled || undefined, className: clsx('seekora-select__option', t.option, isSelected && 'seekora-select__option--selected', isHighlighted && (t.optionActive || 'seekora-select__option--highlighted'), opt.disabled && (t.optionDisabled || 'seekora-select__option--disabled')), onMouseEnter: () => !opt.disabled && setActiveIndex(idx), onMouseDown: (e) => {
+                    e.preventDefault(); // Prevent blur
+                    if (!opt.disabled)
+                        selectOption(opt);
+                }, style: {
+                    padding: '6px 12px',
+                    fontSize: 'var(--seekora-select-font-size, 0.875rem)',
+                    cursor: opt.disabled ? 'not-allowed' : 'pointer',
+                    backgroundColor: isHighlighted
+                        ? 'var(--seekora-select-hover-bg, #f3f4f6)'
+                        : isSelected
+                            ? 'var(--seekora-select-active-bg, #eff6ff)'
+                            : 'transparent',
+                    color: opt.disabled
+                        ? 'rgba(128,128,128,0.5)'
+                        : isSelected
+                            ? 'var(--seekora-select-active-color, inherit)'
+                            : 'var(--seekora-select-color, inherit)',
+                    fontWeight: isSelected ? 500 : 400,
+                    opacity: opt.disabled ? 0.5 : 1,
+                    transition: 'background-color 0.1s ease',
+                } }, opt.label));
+        })))));
+};
+
 /**
  * SortBy Component
  *
@@ -3217,18 +3412,14 @@ const SortBy = ({ options, value: valueProp, defaultValue, onSortChange, renderS
         }
         return (React.createElement("div", { className: clsx(sortByTheme.container, className), style: { ...cssVarStyle, ...style } },
             labelElement,
-            React.createElement("select", { value: value, onChange: handleChange, className: clsx(sortByTheme.select), style: {
-                    padding,
-                    paddingRight: theme.spacing.medium,
-                    fontSize,
-                    border: '1px solid var(--seekora-sort-border)',
-                    borderRadius,
-                    backgroundColor: 'var(--seekora-sort-bg)',
-                    color: 'var(--seekora-sort-color)',
-                    cursor: 'pointer',
-                    outline: 'none',
+            React.createElement(CustomSelect, { value: value, onChange: applyValue, options: options, placeholder: placeholder, "aria-label": label || 'Sort results', className: clsx(sortByTheme.select), style: {
                     width: '100%',
-                }, "aria-label": label || 'Sort results' }, options.map((option) => (React.createElement("option", { key: option.value, value: option.value, className: sortByTheme.option }, option.label))))));
+                    '--seekora-select-font-size': fontSize,
+                    '--seekora-select-border': 'var(--seekora-sort-border)',
+                    '--seekora-select-radius': borderRadius,
+                    '--seekora-select-bg': 'var(--seekora-sort-bg)',
+                    '--seekora-select-color': 'var(--seekora-sort-color)',
+                } })));
     }
     // ------ Button group variant -------------------------------------------
     if (variant === 'button-group') {
@@ -3678,7 +3869,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, }) => {
+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 { theme } = useSearchContext();
     const { results: stateResults, refinements, addRefinement, removeRefinement } = useSearchState();
     const facetsTheme = customTheme || {};
@@ -3755,7 +3946,10 @@ const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, rende
         });
         return extracted;
     };
-    const facets = extractFacets();
+    const rawFacetList = extractFacets();
+    const facets = hideEmptyFacets
+        ? rawFacetList.filter(f => f.items.length > 0 || f.stats != null)
+        : rawFacetList;
     // -------------------------------------------------------------------
     // Handlers
     // -------------------------------------------------------------------
@@ -3792,17 +3986,21 @@ const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, rende
         }));
     };
     /** For collapsible variant — determine if a facet group is open. */
+    const isFieldDefaultCollapsed = (field) => {
+        if (defaultCollapsedFields?.includes(field))
+            return true;
+        return defaultCollapsed;
+    };
     const isFacetGroupOpen = (field) => {
         if (field in expandedFacets) {
             return expandedFacets[field];
         }
-        // Default based on defaultCollapsed prop
-        return !defaultCollapsed;
+        return !isFieldDefaultCollapsed(field);
     };
     const toggleCollapsible = (field) => {
         setExpandedFacets((prev) => ({
             ...prev,
-            [field]: !(prev[field] ?? !defaultCollapsed),
+            [field]: !(prev[field] ?? !isFieldDefaultCollapsed(field)),
         }));
     };
     const getSearchTerm = (field) => searchTerms[field] || '';
@@ -5439,19 +5637,28 @@ const HitsPerPage = ({ items, onHitsPerPageChange, renderSelect, className, styl
                 fontSize: theme.typography.fontSize.medium,
                 color: theme.colors.text,
             } }, label)),
-        React.createElement("select", { value: value, onChange: handleChange, className: hitsPerPageTheme.select, style: {
-                padding: theme.spacing.small,
-                paddingRight: theme.spacing.medium,
-                fontSize: theme.typography.fontSize.medium,
-                border: `1px solid ${theme.colors.border}`,
-                borderRadius: typeof theme.borderRadius === 'string'
+        React.createElement(CustomSelect, { value: String(value), onChange: (val) => {
+                const newValue = parseInt(val, 10);
+                setInternalValue(newValue);
+                if (syncWithState) {
+                    stateManager.setItemsPerPage(newValue, false);
+                    setPage(1, true);
+                }
+                if (onHitsPerPageChange) {
+                    onHitsPerPageChange(newValue);
+                }
+            }, options: items.map((item) => ({
+                value: String(item.value),
+                label: item.label,
+            })), "aria-label": "Results per page", className: hitsPerPageTheme.select, style: {
+                '--seekora-select-font-size': theme.typography.fontSize.medium,
+                '--seekora-select-border': theme.colors.border,
+                '--seekora-select-radius': typeof theme.borderRadius === 'string'
                     ? theme.borderRadius
                     : theme.borderRadius.medium,
-                backgroundColor: theme.colors.background,
-                color: theme.colors.text,
-                cursor: 'pointer',
-                outline: 'none',
-            }, "aria-label": "Results per page" }, items.map((item) => (React.createElement("option", { key: item.value, value: item.value, className: hitsPerPageTheme.option }, item.label))))));
+                '--seekora-select-bg': theme.colors.background,
+                '--seekora-select-color': theme.colors.text,
+            } })));
 };
 
 /**
@@ -9720,13 +9927,30 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
         objectFit: 'cover',
         display: 'block',
     };
+    // Compute the indicator rectangle (what portion of the image the zoom panel shows).
+    // indW / containerW = 1 / zoomLevel (the panel shows 1/zoomLevel of the image width).
+    // indH is derived from the zoom panel's aspect ratio so it's consistent with what the
+    // panel actually renders — no need for the image's natural dimensions.
+    const getIndicatorRect = React.useCallback(() => {
+        if (!containerRef.current)
+            return { indL: 0, indT: 0, indW: 0, indH: 0 };
+        const rect = containerRef.current.getBoundingClientRect();
+        const indW = rect.width / zoomLevel;
+        const indH = (zoomPanelSize.height / zoomPanelSize.width) * rect.width / zoomLevel;
+        const indL = Math.max(0, Math.min(rect.width - indW, cursorPos.x - indW / 2));
+        const indT = Math.max(0, Math.min(rect.height - indH, cursorPos.y - indH / 2));
+        return { indL, indT, indW, indH };
+    }, [cursorPos, zoomLevel, zoomPanelSize]);
     // Calculate zoom panel background position (Amazon-style)
     const getZoomPanelStyle = () => {
         if (!containerRef.current || !imageLoaded)
             return { display: 'none' };
         const rect = containerRef.current.getBoundingClientRect();
-        const bgPosX = (cursorPos.x / rect.width) * 100;
-        const bgPosY = (cursorPos.y / rect.height) * 100;
+        const { indL, indT, indW, indH } = getIndicatorRect();
+        // bgPos is derived from the clamped indicator position, not the raw cursor.
+        // At indL=0 → bgPosX=0% (show left), at indL=containerW-indW → bgPosX=100% (show right).
+        const bgPosX = (rect.width - indW) > 0 ? (indL / (rect.width - indW)) * 100 : 0;
+        const bgPosY = (rect.height - indH) > 0 ? (indT / (rect.height - indH)) * 100 : 0;
         // Calculate available space in all directions
         const viewportWidth = window.innerWidth;
         const viewportHeight = window.innerHeight;
@@ -9854,19 +10078,22 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
                 } }, "\uD83D\uDD0D")),
             supportsLens && isHovering && imageLoaded && (React.createElement("div", { style: getLensStyle() },
                 React.createElement("img", { src: src, alt: "", style: getLensImageStyle() }))),
-            supportsHover && isHovering && imageLoaded && containerRef.current && (React.createElement("div", { style: {
-                    position: 'absolute',
-                    left: cursorPos.x - 75,
-                    top: cursorPos.y - 75,
-                    width: 150,
-                    height: 150,
-                    border: 'var(--seekora-hover-area-border, 2px solid rgba(0,0,0,0.3))',
-                    backgroundColor: 'var(--seekora-hover-area-bg, rgba(255,255,255,0.1))',
-                    pointerEvents: 'none',
-                    zIndex: 50,
-                } })),
-            supportsHover && isHovering && imageLoaded && (React.createElement("div", { style: getZoomPanelStyle() }))),
-        isLightboxOpen && (React.createElement("div", { className: "seekora-image-zoom-lightbox", style: {
+            supportsHover && isHovering && imageLoaded && containerRef.current && (() => {
+                const { indL, indT, indW, indH } = getIndicatorRect();
+                return (React.createElement("div", { style: {
+                        position: 'absolute',
+                        left: indL,
+                        top: indT,
+                        width: indW,
+                        height: indH,
+                        border: 'var(--seekora-hover-area-border, 2px solid rgba(0,0,0,0.3))',
+                        backgroundColor: 'var(--seekora-hover-area-bg, rgba(255,255,255,0.1))',
+                        pointerEvents: 'none',
+                        zIndex: 50,
+                    } }));
+            })()),
+        supportsHover && isHovering && imageLoaded && typeof document !== 'undefined' && reactDom.createPortal(React.createElement("div", { style: getZoomPanelStyle() }), document.body),
+        isLightboxOpen && typeof document !== 'undefined' && reactDom.createPortal(React.createElement("div", { className: "seekora-image-zoom-lightbox", style: {
                 position: 'fixed',
                 top: 0,
                 left: 0,
@@ -10021,7 +10248,7 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
                     backgroundColor: 'var(--seekora-lightbox-instructions-bg, rgba(0,0,0,0.5))',
                     padding: '8px 16px',
                     borderRadius: 12,
-                } }, hasMultipleImages ? 'Use arrow keys or click thumbnails to navigate • ESC to close' : 'Click outside or press ESC to close')))));
+                } }, hasMultipleImages ? 'Use arrow keys or click thumbnails to navigate • ESC to close' : 'Click outside or press ESC to close')), document.body)));
 }
 
 /**
@@ -11852,30 +12079,22 @@ function VariantSelector({ options, variants, selections, onSelectionChange, opt
                 } },
                 option.name,
                 selected && (React.createElement("span", { style: { fontWeight: 400, marginLeft: 6, color: 'var(--seekora-text-secondary, inherit)' } }, selected))),
-            mode === 'dropdown' ? (React.createElement("select", { className: "seekora-variant-dropdown", value: selected ?? '', onChange: (e) => {
-                    e.stopPropagation();
-                    onSelectionChange(option.name, e.target.value);
-                }, onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), style: {
-                    padding: '8px 12px',
-                    fontSize: '0.875rem',
-                    borderRadius: 6,
-                    border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
-                    backgroundColor: 'var(--seekora-bg-surface, transparent)',
-                    color: 'var(--seekora-text-primary, inherit)',
-                    cursor: 'pointer',
-                    minWidth: 120,
-                } },
-                React.createElement("option", { value: "" },
-                    "Select ",
-                    option.name),
-                option.values.map((value) => {
-                    const available = showAvailability
-                        ? getAvailability(option.name, value, options, variants, selections)
-                        : true;
-                    return (React.createElement("option", { key: value, value: value, disabled: !available },
-                        value,
-                        !available ? ' (Unavailable)' : ''));
-                }))) : (React.createElement("div", { className: "seekora-variant-buttons", style: { display: 'flex', flexWrap: 'wrap', gap: 8 } }, option.values.map((value) => {
+            mode === 'dropdown' ? (React.createElement("div", { onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation() },
+                React.createElement(CustomSelect, { className: "seekora-variant-dropdown", value: selected ?? '', onChange: (val) => onSelectionChange(option.name, val), placeholder: `Select ${option.name}`, "aria-label": `Select ${option.name}`, options: option.values.map((val) => {
+                        const available = showAvailability
+                            ? getAvailability(option.name, val, options, variants, selections)
+                            : true;
+                        return {
+                            value: val,
+                            label: available ? val : `${val} (Unavailable)`,
+                            disabled: !available,
+                        };
+                    }), style: {
+                        minWidth: 120,
+                        '--seekora-select-border': 'var(--seekora-border-color, rgba(128,128,128,0.2))',
+                        '--seekora-select-bg': 'var(--seekora-bg-surface, transparent)',
+                        '--seekora-select-color': 'var(--seekora-text-primary, inherit)',
+                    } }))) : (React.createElement("div", { className: "seekora-variant-buttons", style: { display: 'flex', flexWrap: 'wrap', gap: 8 } }, option.values.map((value) => {
                 const isActive = selected === value;
                 const available = showAvailability
                     ? getAvailability(option.name, value, options, variants, selections)
@@ -18647,6 +18866,7 @@ exports.Breadcrumb = Breadcrumb;
 exports.CategoriesTabs = CategoriesTabs;
 exports.ClearRefinements = ClearRefinements;
 exports.CurrentRefinements = CurrentRefinements;
+exports.CustomSelect = CustomSelect;
 exports.DocSearch = DocSearch;
 exports.DocSearchButton = DocSearchButton;
 exports.DropdownPanel = DropdownPanel;