@seekora-ai/ui-sdk-react 0.2.13 → 0.2.14

package/dist/components/Facets.js

@@ -1,21 +1,80 @@
 /**
  * Facets Component
  *
- * Displays facet filters for search results
+ * Displays facet filters for search results with multiple display variants,
+ * client-side search, count badges, and color swatch support.
  */
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { useSearchContext } from './SearchProvider';
 import { useSearchState } from '../hooks/useSearchState';
 import { log } from '@seekora-ai/ui-sdk-core';
 import { clsx } from 'clsx';
-export const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, renderFacet, renderFacetItem, maxItems = 10, showMore = true, className, style, theme: customTheme, }) => {
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/** Generate a deterministic colour from a string (used as fallback for color-swatch). */
+function stringToColor(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        hash |= 0; // Convert to 32-bit int
+    }
+    const h = Math.abs(hash) % 360;
+    return `hsl(${h}, 65%, 55%)`;
+}
+/** Return swatch pixel size from the size prop. */
+function swatchSize(size) {
+    switch (size) {
+        case 'small':
+            return 24;
+        case 'large':
+            return 40;
+        case 'medium':
+        default:
+            return 32;
+    }
+}
+// ---------------------------------------------------------------------------
+// Chevron SVG icon for collapsible variant
+// ---------------------------------------------------------------------------
+const ChevronIcon = ({ expanded, color = 'currentColor', size = 16, }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
+        transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
+        transition: 'transform 200ms ease',
+        flexShrink: 0,
+    }, "aria-hidden": "true" },
+    React.createElement("path", { d: "M4 6L8 10L12 6", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+// ---------------------------------------------------------------------------
+// Checkmark SVG for selected color swatches
+// ---------------------------------------------------------------------------
+const CheckmarkIcon = ({ size = 16 }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
+    React.createElement("path", { d: "M3.5 8.5L6.5 11.5L12.5 4.5", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
+// ---------------------------------------------------------------------------
+// CSS variable defaults
+// ---------------------------------------------------------------------------
+const CSS_VAR_DEFAULTS = {
+    '--seekora-facet-bg': '#ffffff',
+    '--seekora-facet-border': '#dee2e6',
+    '--seekora-facet-active-bg': '#f0f7ff',
+    '--seekora-facet-swatch-size': '32px',
+    '--seekora-facet-count-bg': '#e9ecef',
+    '--seekora-facet-count-color': '#495057',
+};
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export 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', }) => {
     const { theme } = useSearchContext();
     const { results: stateResults, refinements, addRefinement, removeRefinement } = useSearchState();
     const facetsTheme = customTheme || {};
+    // expandedFacets is used for "Show more/less" in checkbox/color-swatch variants
+    // AND for collapse/expand in collapsible variant.
     const [expandedFacets, setExpandedFacets] = useState({});
+    const [searchTerms, setSearchTerms] = useState({});
     // Use results from prop if provided, otherwise from state manager
     const results = resultsProp || stateResults;
+    // -------------------------------------------------------------------
     // Extract facets from results
+    // -------------------------------------------------------------------
     const extractFacets = () => {
         if (facetsProp)
             return facetsProp;
@@ -62,6 +121,9 @@ export const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange
         return extracted;
     };
     const facets = extractFacets();
+    // -------------------------------------------------------------------
+    // Handlers
+    // -------------------------------------------------------------------
     const handleFacetToggle = (field, value, selected) => {
         const newSelected = !selected;
         log.verbose('Facets: Facet toggled', { field, value, selected: newSelected });
@@ -94,67 +156,225 @@ export const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange
             [field]: !prev[field],
         }));
     };
+    /** For collapsible variant — determine if a facet group is open. */
+    const isFacetGroupOpen = (field) => {
+        if (field in expandedFacets) {
+            return expandedFacets[field];
+        }
+        // Default based on defaultCollapsed prop
+        return !defaultCollapsed;
+    };
+    const toggleCollapsible = (field) => {
+        setExpandedFacets((prev) => ({
+            ...prev,
+            [field]: !(prev[field] ?? !defaultCollapsed),
+        }));
+    };
+    const getSearchTerm = (field) => searchTerms[field] || '';
+    const setSearchTerm = (field, term) => {
+        setSearchTerms((prev) => ({ ...prev, [field]: term }));
+    };
+    /** Filter facet items by search term. */
+    const filterItems = (items, field) => {
+        if (!searchable)
+            return items;
+        const term = getSearchTerm(field).toLowerCase();
+        if (!term)
+            return items;
+        return items.filter((item) => item.value.toLowerCase().includes(term));
+    };
+    // -------------------------------------------------------------------
+    // Size helpers
+    // -------------------------------------------------------------------
+    const sizeScale = useMemo(() => {
+        switch (size) {
+            case 'small':
+                return { font: theme.typography.fontSize.small, padding: '0.25rem', gap: '0.25rem' };
+            case 'large':
+                return { font: theme.typography.fontSize.large, padding: '0.75rem', gap: '0.75rem' };
+            case 'medium':
+            default:
+                return { font: theme.typography.fontSize.medium, padding: theme.spacing.small, gap: theme.spacing.small };
+        }
+    }, [size, theme]);
+    // -------------------------------------------------------------------
+    // Count badge renderer
+    // -------------------------------------------------------------------
+    const renderCountBadge = (count) => {
+        if (!showCounts)
+            return null;
+        return (React.createElement("span", { className: clsx(facetsTheme.countBadge), style: {
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                minWidth: '1.5em',
+                padding: '0.1em 0.5em',
+                marginLeft: sizeScale.gap,
+                fontSize: theme.typography.fontSize.small,
+                fontWeight: theme.typography.fontWeight?.medium ?? 500,
+                lineHeight: 1,
+                color: 'var(--seekora-facet-count-color, #495057)',
+                backgroundColor: 'var(--seekora-facet-count-bg, #e9ecef)',
+                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.full,
+                flexShrink: 0,
+            } }, count));
+    };
+    // -------------------------------------------------------------------
+    // Search input renderer
+    // -------------------------------------------------------------------
+    const renderSearchInput = (facet) => {
+        if (!searchable)
+            return null;
+        return (React.createElement("input", { type: "text", value: getSearchTerm(facet.field), onChange: (e) => setSearchTerm(facet.field, e.target.value), placeholder: `Search ${facet.label || facet.field}...`, className: clsx(facetsTheme.searchInput), "aria-label": `Search within ${facet.label || facet.field}`, style: {
+                width: '100%',
+                boxSizing: 'border-box',
+                padding: sizeScale.padding,
+                marginBottom: sizeScale.gap,
+                fontSize: theme.typography.fontSize.small,
+                border: `1px solid var(--seekora-facet-border, ${theme.colors.border})`,
+                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.small,
+                outline: 'none',
+                color: theme.colors.text,
+                backgroundColor: 'var(--seekora-facet-bg, transparent)',
+            } }));
+    };
+    // -------------------------------------------------------------------
+    // Checkbox variant item renderer (original behaviour, preserved)
+    // -------------------------------------------------------------------
     const defaultRenderFacetItem = (item, facet, index) => {
         const isExpanded = expandedFacets[facet.field] || index < maxItems;
         if (!isExpanded && index >= maxItems) {
             return null;
         }
-        return (React.createElement("div", { key: `${facet.field}-${item.value}`, className: clsx(facetsTheme.facetItem, (refinements.some(r => r.field === facet.field && r.value === item.value) || item.selected) && facetsTheme.facetItemActive), onClick: () => handleFacetToggle(facet.field, item.value, item.selected || false), style: {
+        const isChecked = refinements.some(r => r.field === facet.field && r.value === item.value) || item.selected || false;
+        return (React.createElement("div", { key: `${facet.field}-${item.value}`, className: clsx(facetsTheme.facetItem, isChecked && facetsTheme.facetItemActive), role: "option", "aria-selected": isChecked, "aria-checked": isChecked, tabIndex: -1, onClick: () => handleFacetToggle(facet.field, item.value, item.selected || false), style: {
                 display: 'flex',
                 alignItems: 'center',
-                padding: theme.spacing.small,
+                padding: sizeScale.padding,
                 cursor: 'pointer',
                 borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
-                marginBottom: theme.spacing.small,
-                backgroundColor: (refinements.some(r => r.field === facet.field && r.value === item.value) || item.selected) ? theme.colors.hover : 'transparent',
+                marginBottom: sizeScale.gap,
+                backgroundColor: isChecked
+                    ? 'var(--seekora-facet-active-bg, ' + theme.colors.hover + ')'
+                    : 'transparent',
                 transition: 'background-color 0.2s ease',
             } },
             React.createElement("input", { type: "checkbox", checked: refinements.some(r => r.field === facet.field && r.value === item.value) || item.selected || false, onChange: () => handleFacetToggle(facet.field, item.value, item.selected || false), className: facetsTheme.checkbox, style: {
-                    marginRight: theme.spacing.small,
+                    marginRight: sizeScale.gap,
                     cursor: 'pointer',
                 }, "aria-label": `Filter by ${item.value}` }),
             React.createElement("span", { className: facetsTheme.facetItemLabel, style: {
                     flex: 1,
-                    fontSize: theme.typography.fontSize.medium,
+                    fontSize: sizeScale.font,
                     color: theme.colors.text,
                 } }, item.value),
-            React.createElement("span", { className: facetsTheme.facetItemCount, style: {
-                    fontSize: theme.typography.fontSize.small,
-                    color: theme.colors.textSecondary || theme.colors.text,
-                    opacity: 0.7,
-                    marginLeft: theme.spacing.small,
-                } },
-                "(",
-                item.count,
-                ")")));
+            renderCountBadge(item.count)));
     };
-    const defaultRenderFacet = (facet, index) => {
-        const isExpanded = expandedFacets[facet.field] || false;
-        const visibleItems = isExpanded ? facet.items : facet.items.slice(0, maxItems);
-        const hasMore = facet.items.length > maxItems;
-        return (React.createElement("div", { key: facet.field, className: facetsTheme.facet, style: {
-                marginBottom: theme.spacing.large,
-                padding: theme.spacing.medium,
-                backgroundColor: theme.colors.background,
-                border: `1px solid ${theme.colors.border}`,
-                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+    // -------------------------------------------------------------------
+    // Color swatch variant item renderer
+    // -------------------------------------------------------------------
+    const renderColorSwatchItem = (item, facet, index) => {
+        const isExpanded = expandedFacets[facet.field] || index < maxItems;
+        if (!isExpanded && index >= maxItems) {
+            return null;
+        }
+        const isChecked = refinements.some(r => r.field === facet.field && r.value === item.value) || item.selected || false;
+        const color = colorMap?.[item.value] ?? stringToColor(item.value);
+        const pxSize = swatchSize(size);
+        return (React.createElement("div", { key: `${facet.field}-${item.value}`, className: clsx(facetsTheme.facetItem, isChecked && facetsTheme.facetItemActive), role: "option", "aria-selected": isChecked, "aria-checked": isChecked, tabIndex: -1, onClick: () => handleFacetToggle(facet.field, item.value, item.selected || false), title: `${item.value}${showCounts ? ` (${item.count})` : ''}`, style: {
+                display: 'inline-flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                cursor: 'pointer',
+                margin: sizeScale.gap,
             } },
-            React.createElement("h3", { className: facetsTheme.facetTitle, style: {
-                    fontSize: theme.typography.fontSize.large,
-                    fontWeight: 'bold',
-                    margin: 0,
-                    marginBottom: theme.spacing.medium,
+            React.createElement("div", { className: clsx(facetsTheme.colorSwatch, isChecked && facetsTheme.colorSwatchSelected), style: {
+                    width: `var(--seekora-facet-swatch-size, ${pxSize}px)`,
+                    height: `var(--seekora-facet-swatch-size, ${pxSize}px)`,
+                    borderRadius: '50%',
+                    backgroundColor: color,
+                    border: isChecked
+                        ? `3px solid ${theme.colors.primary}`
+                        : `2px solid var(--seekora-facet-border, ${theme.colors.border})`,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    transition: 'border 0.2s ease, box-shadow 0.2s ease',
+                    boxShadow: isChecked ? `0 0 0 2px ${theme.colors.primary}33` : 'none',
+                    position: 'relative',
+                } }, isChecked && (React.createElement("span", { className: clsx(facetsTheme.colorSwatchInner), style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                } },
+                React.createElement(CheckmarkIcon, { size: Math.round(pxSize * 0.5) })))),
+            React.createElement("span", { className: facetsTheme.facetItemLabel, style: {
+                    fontSize: theme.typography.fontSize.small,
                     color: theme.colors.text,
-                } }, facet.label || facet.field),
-            React.createElement("div", { className: facetsTheme.facetList }, visibleItems.map((item, itemIndex) => {
-                const actualIndex = isExpanded ? itemIndex : itemIndex;
-                return renderFacetItem
-                    ? renderFacetItem(item, facet, actualIndex)
-                    : defaultRenderFacetItem(item, facet, actualIndex);
-            })),
+                    marginTop: '0.25rem',
+                    textAlign: 'center',
+                    maxWidth: `${pxSize + 16}px`,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                } }, item.value),
+            showCounts && (React.createElement("span", { className: clsx(facetsTheme.countBadge), style: {
+                    fontSize: theme.typography.fontSize.small,
+                    color: 'var(--seekora-facet-count-color, ' + (theme.colors.textSecondary || theme.colors.text) + ')',
+                    lineHeight: 1,
+                    marginTop: '0.125rem',
+                } }, item.count))));
+    };
+    // -------------------------------------------------------------------
+    // Item renderer dispatcher
+    // -------------------------------------------------------------------
+    const renderItem = (item, facet, index) => {
+        if (renderFacetItem) {
+            return renderFacetItem(item, facet, index);
+        }
+        switch (variant) {
+            case 'color-swatch':
+                return renderColorSwatchItem(item, facet, index);
+            case 'collapsible':
+            case 'checkbox':
+            default:
+                return defaultRenderFacetItem(item, facet, index);
+        }
+    };
+    // -------------------------------------------------------------------
+    // Keyboard handler (shared across variants)
+    // -------------------------------------------------------------------
+    const handleListKeyDown = (e, visibleItems, facet) => {
+        const currentEl = e.currentTarget.querySelector('[aria-selected="true"]');
+        const allItems = Array.from(e.currentTarget.querySelectorAll('[role="option"]'));
+        const currentIdx = currentEl ? allItems.indexOf(currentEl) : -1;
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            const next = Math.min(currentIdx + 1, allItems.length - 1);
+            allItems[next]?.focus();
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            const prev = Math.max(currentIdx - 1, 0);
+            allItems[prev]?.focus();
+        }
+        else if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            if (currentIdx >= 0 && currentIdx < visibleItems.length) {
+                handleFacetToggle(facet.field, visibleItems[currentIdx].value, visibleItems[currentIdx].selected || false);
+            }
+        }
+    };
+    // -------------------------------------------------------------------
+    // Show more / less buttons (shared)
+    // -------------------------------------------------------------------
+    const renderShowMoreLess = (facet, filteredItems) => {
+        const isExpanded = expandedFacets[facet.field] || false;
+        const hasMore = filteredItems.length > maxItems;
+        return (React.createElement(React.Fragment, null,
             showMore && hasMore && !isExpanded && (React.createElement("button", { type: "button", onClick: () => toggleFacetExpansion(facet.field), style: {
-                    marginTop: theme.spacing.small,
-                    padding: theme.spacing.small,
+                    marginTop: sizeScale.gap,
+                    padding: sizeScale.padding,
                     border: 'none',
                     backgroundColor: 'transparent',
                     color: theme.colors.primary,
@@ -163,11 +383,11 @@ export const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange
                     textDecoration: 'underline',
                 } },
                 "Show more (",
-                facet.items.length - maxItems,
+                filteredItems.length - maxItems,
                 " more)")),
             isExpanded && hasMore && (React.createElement("button", { type: "button", onClick: () => toggleFacetExpansion(facet.field), style: {
-                    marginTop: theme.spacing.small,
-                    padding: theme.spacing.small,
+                    marginTop: sizeScale.gap,
+                    padding: sizeScale.padding,
                     border: 'none',
                     backgroundColor: 'transparent',
                     color: theme.colors.primary,
@@ -176,6 +396,152 @@ export const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange
                     textDecoration: 'underline',
                 } }, "Show less"))));
     };
+    // -------------------------------------------------------------------
+    // Default facet group renderer — Checkbox variant
+    // -------------------------------------------------------------------
+    const renderCheckboxFacet = (facet, _index) => {
+        const filteredItems = filterItems(facet.items, facet.field);
+        const isExpanded = expandedFacets[facet.field] || false;
+        const visibleItems = isExpanded ? filteredItems : filteredItems.slice(0, maxItems);
+        return (React.createElement("div", { key: facet.field, className: facetsTheme.facet, style: {
+                marginBottom: theme.spacing.large,
+                padding: theme.spacing.medium,
+                backgroundColor: 'var(--seekora-facet-bg, ' + theme.colors.background + ')',
+                border: `1px solid var(--seekora-facet-border, ${theme.colors.border})`,
+                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+            } },
+            React.createElement("h3", { className: facetsTheme.facetTitle, style: {
+                    fontSize: theme.typography.fontSize.large,
+                    fontWeight: 'bold',
+                    margin: 0,
+                    marginBottom: theme.spacing.medium,
+                    color: theme.colors.text,
+                } }, facet.label || facet.field),
+            renderSearchInput(facet),
+            React.createElement("div", { className: facetsTheme.facetList, role: "listbox", "aria-label": `${facet.label || facet.field} filters`, tabIndex: 0, onKeyDown: (e) => handleListKeyDown(e, visibleItems, facet) }, visibleItems.map((item, itemIndex) => renderItem(item, facet, itemIndex))),
+            renderShowMoreLess(facet, filteredItems)));
+    };
+    // -------------------------------------------------------------------
+    // Color-swatch facet group renderer
+    // -------------------------------------------------------------------
+    const renderColorSwatchFacet = (facet, _index) => {
+        const filteredItems = filterItems(facet.items, facet.field);
+        const isExpanded = expandedFacets[facet.field] || false;
+        const visibleItems = isExpanded ? filteredItems : filteredItems.slice(0, maxItems);
+        return (React.createElement("div", { key: facet.field, className: facetsTheme.facet, style: {
+                marginBottom: theme.spacing.large,
+                padding: theme.spacing.medium,
+                backgroundColor: 'var(--seekora-facet-bg, ' + theme.colors.background + ')',
+                border: `1px solid var(--seekora-facet-border, ${theme.colors.border})`,
+                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+            } },
+            React.createElement("h3", { className: facetsTheme.facetTitle, style: {
+                    fontSize: theme.typography.fontSize.large,
+                    fontWeight: 'bold',
+                    margin: 0,
+                    marginBottom: theme.spacing.medium,
+                    color: theme.colors.text,
+                } }, facet.label || facet.field),
+            renderSearchInput(facet),
+            React.createElement("div", { className: facetsTheme.facetList, role: "listbox", "aria-label": `${facet.label || facet.field} filters`, tabIndex: 0, onKeyDown: (e) => handleListKeyDown(e, visibleItems, facet), style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: sizeScale.gap,
+                } }, visibleItems.map((item, itemIndex) => renderItem(item, facet, itemIndex))),
+            renderShowMoreLess(facet, filteredItems)));
+    };
+    // -------------------------------------------------------------------
+    // Collapsible facet group renderer
+    // -------------------------------------------------------------------
+    const renderCollapsibleFacet = (facet, _index) => {
+        const isOpen = isFacetGroupOpen(facet.field);
+        const filteredItems = filterItems(facet.items, facet.field);
+        const isItemsExpanded = expandedFacets[facet.field] || false;
+        // Note: For collapsible, the expandedFacets state controls the collapse/expand
+        // of the group itself. We use a separate concept for Show more/less within items.
+        // To avoid collision, Show more/less for collapsible uses the same expandedFacets
+        // key prefixed with `_items_`.
+        const isShowMoreExpanded = expandedFacets[`_items_${facet.field}`] || false;
+        const visibleItems = isShowMoreExpanded ? filteredItems : filteredItems.slice(0, maxItems);
+        const hasMore = filteredItems.length > maxItems;
+        return (React.createElement("div", { key: facet.field, className: facetsTheme.facet, style: {
+                marginBottom: theme.spacing.large,
+                backgroundColor: 'var(--seekora-facet-bg, ' + theme.colors.background + ')',
+                border: `1px solid var(--seekora-facet-border, ${theme.colors.border})`,
+                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+                overflow: 'hidden',
+            } },
+            React.createElement("button", { type: "button", className: clsx(facetsTheme.collapsibleHeader), onClick: () => toggleCollapsible(facet.field), "aria-expanded": isOpen, "aria-controls": `facet-group-${facet.field}`, style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    width: '100%',
+                    padding: theme.spacing.medium,
+                    border: 'none',
+                    backgroundColor: 'transparent',
+                    cursor: 'pointer',
+                    textAlign: 'left',
+                } },
+                React.createElement("span", { className: facetsTheme.facetTitle, style: {
+                        fontSize: theme.typography.fontSize.large,
+                        fontWeight: 'bold',
+                        color: theme.colors.text,
+                        flex: 1,
+                    } }, facet.label || facet.field),
+                React.createElement("span", { className: clsx(facetsTheme.collapsibleIcon) },
+                    React.createElement(ChevronIcon, { expanded: isOpen, color: theme.colors.textSecondary || theme.colors.text }))),
+            isOpen && (React.createElement("div", { id: `facet-group-${facet.field}`, style: {
+                    padding: `0 ${theme.spacing.medium} ${theme.spacing.medium}`,
+                } },
+                renderSearchInput(facet),
+                React.createElement("div", { className: facetsTheme.facetList, role: "listbox", "aria-label": `${facet.label || facet.field} filters`, tabIndex: 0, onKeyDown: (e) => handleListKeyDown(e, visibleItems, facet) }, visibleItems.map((item, itemIndex) => renderItem(item, facet, itemIndex))),
+                showMore && hasMore && !isShowMoreExpanded && (React.createElement("button", { type: "button", onClick: () => setExpandedFacets((prev) => ({
+                        ...prev,
+                        [`_items_${facet.field}`]: true,
+                    })), style: {
+                        marginTop: sizeScale.gap,
+                        padding: sizeScale.padding,
+                        border: 'none',
+                        backgroundColor: 'transparent',
+                        color: theme.colors.primary,
+                        cursor: 'pointer',
+                        fontSize: theme.typography.fontSize.small,
+                        textDecoration: 'underline',
+                    } },
+                    "Show more (",
+                    filteredItems.length - maxItems,
+                    " more)")),
+                isShowMoreExpanded && hasMore && (React.createElement("button", { type: "button", onClick: () => setExpandedFacets((prev) => ({
+                        ...prev,
+                        [`_items_${facet.field}`]: false,
+                    })), style: {
+                        marginTop: sizeScale.gap,
+                        padding: sizeScale.padding,
+                        border: 'none',
+                        backgroundColor: 'transparent',
+                        color: theme.colors.primary,
+                        cursor: 'pointer',
+                        fontSize: theme.typography.fontSize.small,
+                        textDecoration: 'underline',
+                    } }, "Show less"))))));
+    };
+    // -------------------------------------------------------------------
+    // Default facet renderer dispatcher
+    // -------------------------------------------------------------------
+    const defaultRenderFacet = (facet, index) => {
+        switch (variant) {
+            case 'color-swatch':
+                return renderColorSwatchFacet(facet, index);
+            case 'collapsible':
+                return renderCollapsibleFacet(facet, index);
+            case 'checkbox':
+            default:
+                return renderCheckboxFacet(facet, index);
+        }
+    };
+    // -------------------------------------------------------------------
+    // Empty state
+    // -------------------------------------------------------------------
     if (facets.length === 0) {
         log.verbose('Facets: No facets to display', {
             hasResults: !!results,
@@ -187,7 +553,13 @@ export const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange
         }
         return null;
     }
-    return (React.createElement("div", { className: clsx(facetsTheme.container, className), style: style }, facets.map((facet, index) => {
+    // -------------------------------------------------------------------
+    // Render
+    // -------------------------------------------------------------------
+    return (React.createElement("div", { className: clsx(facetsTheme.container, className), style: {
+            ...CSS_VAR_DEFAULTS,
+            ...style,
+        } }, facets.map((facet, index) => {
         return renderFacet
             ? renderFacet(facet, index)
             : defaultRenderFacet(facet, index);

package/dist/components/HierarchicalMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HierarchicalMenu.d.ts","sourceRoot":"","sources":["../../src/components/HierarchicalMenu.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,oBAAoB,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,yGAAyG;IACzG,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5E,wCAAwC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,WAAW,CAAC;IACxC,oDAAoD;IACpD,KAAK,CAAC,EAAE,oBAAoB,EAAE,CAAC;CAChC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA2P5D,CAAC"}
+{"version":3,"file":"HierarchicalMenu.d.ts","sourceRoot":"","sources":["../../src/components/HierarchicalMenu.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAiD,MAAM,OAAO,CAAC;AAKtE,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,oBAAoB,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,yGAAyG;IACzG,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5E,wCAAwC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,WAAW,CAAC;IACxC,oDAAoD;IACpD,KAAK,CAAC,EAAE,oBAAoB,EAAE,CAAC;CAChC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAoW5D,CAAC"}