@seekora-ai/ui-sdk-react 0.2.24 → 0.2.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ClearRefinements.d.ts.map +1 -1
- package/dist/components/ClearRefinements.js +7 -6
- package/dist/components/CurrentRefinements.d.ts.map +1 -1
- package/dist/components/CurrentRefinements.js +32 -30
- package/dist/components/Facets.d.ts +2 -0
- package/dist/components/Facets.d.ts.map +1 -1
- package/dist/components/Facets.js +16 -3
- package/dist/components/SearchLayout.js +1 -1
- package/dist/hooks/useFilters.d.ts.map +1 -1
- package/dist/hooks/useFilters.js +23 -3
- package/dist/index.umd.js +1 -1
- package/dist/src/index.d.ts +2 -0
- package/dist/src/index.esm.js +99 -53
- package/dist/src/index.esm.js.map +1 -1
- package/dist/src/index.js +99 -53
- package/dist/src/index.js.map +1 -1
- package/dist/utils/responsive.d.ts.map +1 -1
- package/dist/utils/responsive.js +4 -10
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClearRefinements.d.ts","sourceRoot":"","sources":["../../src/components/ClearRefinements.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,qBAAqB;IACpC,sDAAsD;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,sCAAsC;IACtC,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6BAA6B;IAC7B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,QAAQ,EAAE,OAAO,CAAC;QAClB,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,QAAQ,EAAE,OAAO,CAAC;KACnB,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,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,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,
|
|
1
|
+
{"version":3,"file":"ClearRefinements.d.ts","sourceRoot":"","sources":["../../src/components/ClearRefinements.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,qBAAqB;IACpC,sDAAsD;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,sCAAsC;IACtC,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6BAA6B;IAC7B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,QAAQ,EAAE,OAAO,CAAC;QAClB,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,QAAQ,EAAE,OAAO,CAAC;KACnB,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,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,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA0G5D,CAAC"}
|
|
@@ -67,14 +67,15 @@ export const ClearRefinements = ({ clearsQuery = false, resetLabel = 'Clear all
|
|
|
67
67
|
padding: `${theme.spacing.small} ${theme.spacing.medium}`,
|
|
68
68
|
fontSize: theme.typography.fontSize.medium,
|
|
69
69
|
fontWeight: theme.typography.fontWeight?.medium || 500,
|
|
70
|
-
backgroundColor:
|
|
71
|
-
color:
|
|
70
|
+
backgroundColor: theme.colors.primary,
|
|
71
|
+
color: '#ffffff',
|
|
72
72
|
border: 'none',
|
|
73
73
|
borderRadius: typeof theme.borderRadius === 'string'
|
|
74
74
|
? theme.borderRadius
|
|
75
75
|
: theme.borderRadius.medium,
|
|
76
|
-
cursor: canClear ? 'pointer' : '
|
|
77
|
-
opacity: canClear ? 1 : 0
|
|
78
|
-
|
|
79
|
-
|
|
76
|
+
cursor: canClear ? 'pointer' : 'default',
|
|
77
|
+
opacity: canClear ? 1 : 0,
|
|
78
|
+
pointerEvents: canClear ? 'auto' : 'none',
|
|
79
|
+
transition: 'none',
|
|
80
|
+
}, "aria-label": resetLabel }, resetLabel)));
|
|
80
81
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CurrentRefinements.d.ts","sourceRoot":"","sources":["../../src/components/CurrentRefinements.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA+C,MAAM,OAAO,CAAC;AAWpE,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,2CAA2C;AAC3C,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,WAAW,CAAC;AAEpF,uCAAuC;AACvC,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,UAAU,GAAG,SAAS,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,0EAA0E;IAC1E,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9E,8BAA8B;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yCAAyC;IACzC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,0CAA0C;IAC1C,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACxC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,uBAAuB,CAAC;CACjC;AA0FD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,
|
|
1
|
+
{"version":3,"file":"CurrentRefinements.d.ts","sourceRoot":"","sources":["../../src/components/CurrentRefinements.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA+C,MAAM,OAAO,CAAC;AAWpE,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,2CAA2C;AAC3C,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,WAAW,CAAC;AAEpF,uCAAuC;AACvC,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,UAAU,GAAG,SAAS,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,0EAA0E;IAC1E,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9E,8BAA8B;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yCAAyC;IACzC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,0CAA0C;IAC1C,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACxC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,uBAAuB,CAAC;CACjC;AA0FD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA2ShE,CAAC"}
|
|
@@ -235,9 +235,6 @@ export const CurrentRefinements = ({ refinements: refinementsProp, onRefinementC
|
|
|
235
235
|
opacity: 0.6,
|
|
236
236
|
}, "aria-label": `Clear ${refinement.label || refinement.field}: ${refinement.value}`, onMouseEnter: e => (e.currentTarget.style.opacity = '1'), onMouseLeave: e => (e.currentTarget.style.opacity = '0.6') }, renderCloseIcon ? renderCloseIcon() : defaultCloseIcon())));
|
|
237
237
|
};
|
|
238
|
-
if (refinements.length === 0) {
|
|
239
|
-
return null;
|
|
240
|
-
}
|
|
241
238
|
// Group refinements by field for grouped layout
|
|
242
239
|
const groupedRefinements = layout === 'grouped'
|
|
243
240
|
? refinements.reduce((acc, r) => {
|
|
@@ -249,13 +246,17 @@ export const CurrentRefinements = ({ refinements: refinementsProp, onRefinementC
|
|
|
249
246
|
: null;
|
|
250
247
|
const containerStyles = {
|
|
251
248
|
...style,
|
|
249
|
+
// When a custom list theme is provided, make the container transparent to layout
|
|
250
|
+
// so the list div becomes the direct layout child (enables overflow scroll from parent)
|
|
251
|
+
...(refinementsTheme.list && !style?.display ? { display: 'contents' } : {}),
|
|
252
252
|
};
|
|
253
253
|
const listStyles = {
|
|
254
254
|
display: 'flex',
|
|
255
|
-
flexWrap: layout === 'vertical' ? 'nowrap' : 'wrap',
|
|
256
255
|
flexDirection: layout === 'vertical' ? 'column' : 'row',
|
|
257
256
|
alignItems: layout === 'vertical' ? 'flex-start' : 'center',
|
|
258
|
-
marginBottom: showClearAll ? theme.spacing.medium : 0,
|
|
257
|
+
marginBottom: showClearAll && refinements.length > 0 ? theme.spacing.medium : 0,
|
|
258
|
+
// Only apply flex-wrap if no custom list theme is provided (let theme classes control wrapping)
|
|
259
|
+
...(!refinementsTheme.list ? { flexWrap: layout === 'vertical' ? 'nowrap' : 'wrap' } : {}),
|
|
259
260
|
};
|
|
260
261
|
return (React.createElement("div", { className: clsx(refinementsTheme.container, className), style: containerStyles },
|
|
261
262
|
React.createElement("style", null, `
|
|
@@ -264,32 +265,33 @@ export const CurrentRefinements = ({ refinements: refinementsProp, onRefinementC
|
|
|
264
265
|
to { opacity: 1; transform: scale(1); }
|
|
265
266
|
}
|
|
266
267
|
`),
|
|
267
|
-
|
|
268
|
-
React.createElement("div", { className: refinementsTheme.
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
268
|
+
refinements.length > 0 && (React.createElement(React.Fragment, null,
|
|
269
|
+
layout === 'grouped' && groupedRefinements ? (Object.entries(groupedRefinements).map(([field, items]) => (React.createElement("div", { key: field, className: refinementsTheme.group, style: { marginBottom: theme.spacing.medium } },
|
|
270
|
+
React.createElement("div", { className: refinementsTheme.groupLabel, style: {
|
|
271
|
+
fontSize: theme.typography.fontSize.small,
|
|
272
|
+
fontWeight: 600,
|
|
273
|
+
color: theme.colors.text,
|
|
274
|
+
marginBottom: theme.spacing.small,
|
|
275
|
+
textTransform: 'capitalize',
|
|
276
|
+
} }, items[0]?.label || field),
|
|
277
|
+
React.createElement("div", { role: "list", style: listStyles }, items.map((refinement, index) => {
|
|
278
|
+
return renderRefinement
|
|
279
|
+
? renderRefinement(refinement, index)
|
|
280
|
+
: defaultRenderRefinement(refinement, index);
|
|
281
|
+
})))))) : (React.createElement("div", { role: "list", className: refinementsTheme.list, style: listStyles }, refinements.map((refinement, index) => {
|
|
276
282
|
return renderRefinement
|
|
277
283
|
? renderRefinement(refinement, index)
|
|
278
284
|
: defaultRenderRefinement(refinement, index);
|
|
279
|
-
})))
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
fontSize: theme.typography.fontSize.small,
|
|
292
|
-
textDecoration: 'underline',
|
|
293
|
-
transition: `background-color ${TRANSITIONS.fast}`,
|
|
294
|
-
} }, "Clear all filters"))));
|
|
285
|
+
}))),
|
|
286
|
+
showClearAll && refinements.length > 1 && (React.createElement("button", { type: "button", onClick: handleClearAll, className: refinementsTheme.clearAllButton, style: {
|
|
287
|
+
padding: `${theme.spacing.small} ${theme.spacing.medium}`,
|
|
288
|
+
border: `1px solid ${theme.colors.border}`,
|
|
289
|
+
borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
|
|
290
|
+
backgroundColor: theme.colors.background,
|
|
291
|
+
color: theme.colors.text,
|
|
292
|
+
cursor: 'pointer',
|
|
293
|
+
fontSize: theme.typography.fontSize.small,
|
|
294
|
+
textDecoration: 'underline',
|
|
295
|
+
transition: `background-color ${TRANSITIONS.fast}`,
|
|
296
|
+
} }, "Clear all filters"))))));
|
|
295
297
|
};
|
|
@@ -111,6 +111,8 @@ export interface FacetsProps {
|
|
|
111
111
|
hideEmptyFacets?: boolean;
|
|
112
112
|
/** Fields that should start collapsed (collapsible variant only). Overrides defaultCollapsed for listed fields. */
|
|
113
113
|
defaultCollapsedFields?: string[];
|
|
114
|
+
/** Callback fired when facet availability changes. Receives true when facets are available, false when empty. */
|
|
115
|
+
onFacetsAvailable?: (available: boolean) => void;
|
|
114
116
|
}
|
|
115
117
|
export declare const Facets: React.FC<FacetsProps>;
|
|
116
118
|
//# sourceMappingURL=Facets.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Facets.d.ts","sourceRoot":"","sources":["../../src/components/Facets.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"Facets.d.ts","sourceRoot":"","sources":["../../src/components/Facets.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Displays facet filters for search results with multiple display variants,
|
|
5
5
|
* client-side search, count badges, and color swatch support.
|
|
6
6
|
*/
|
|
7
|
-
import React, { useState, useMemo } from 'react';
|
|
7
|
+
import React, { useState, useMemo, useRef, useEffect } from 'react';
|
|
8
8
|
import { useSearchContext } from './SearchProvider';
|
|
9
9
|
import { useSearchState } from '../hooks/useSearchState';
|
|
10
10
|
import { useFilters } from '../hooks/useFilters';
|
|
@@ -66,7 +66,7 @@ const CSS_VAR_DEFAULTS = {
|
|
|
66
66
|
// ---------------------------------------------------------------------------
|
|
67
67
|
// Component
|
|
68
68
|
// ---------------------------------------------------------------------------
|
|
69
|
-
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', facetRanges, useFiltersApi = false, disjunctiveFacets, hideEmptyFacets = true, defaultCollapsedFields, }) => {
|
|
69
|
+
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', facetRanges, useFiltersApi = false, disjunctiveFacets, hideEmptyFacets = true, defaultCollapsedFields, onFacetsAvailable, }) => {
|
|
70
70
|
const { theme } = useSearchContext();
|
|
71
71
|
const { results: stateResults, refinements, addRefinement, removeRefinement } = useSearchState();
|
|
72
72
|
const facetsTheme = customTheme || {};
|
|
@@ -144,9 +144,22 @@ export const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange
|
|
|
144
144
|
return extracted;
|
|
145
145
|
};
|
|
146
146
|
const rawFacetList = extractFacets();
|
|
147
|
+
const hasStats = (stats) => stats != null && (stats.min != null || stats.max != null);
|
|
147
148
|
const facets = hideEmptyFacets
|
|
148
|
-
? rawFacetList.filter(f => f.items.length > 0 || f.stats
|
|
149
|
+
? rawFacetList.filter(f => f.items.length > 0 || hasStats(f.stats))
|
|
149
150
|
: rawFacetList;
|
|
151
|
+
// Notify parent about facet availability
|
|
152
|
+
const facetCount = facets.length;
|
|
153
|
+
const prevFacetAvailableRef = useRef(null);
|
|
154
|
+
useEffect(() => {
|
|
155
|
+
if (!onFacetsAvailable)
|
|
156
|
+
return;
|
|
157
|
+
const available = facetCount > 0;
|
|
158
|
+
if (prevFacetAvailableRef.current !== available) {
|
|
159
|
+
prevFacetAvailableRef.current = available;
|
|
160
|
+
onFacetsAvailable(available);
|
|
161
|
+
}
|
|
162
|
+
}, [facetCount, onFacetsAvailable]);
|
|
150
163
|
// -------------------------------------------------------------------
|
|
151
164
|
// Handlers
|
|
152
165
|
// -------------------------------------------------------------------
|
|
@@ -37,7 +37,7 @@ export const SearchLayout = ({ sidebar, children, header, footer, sidebarWidth =
|
|
|
37
37
|
padding: responsivePadding,
|
|
38
38
|
backgroundColor: theme.colors.background,
|
|
39
39
|
color: theme.colors.text,
|
|
40
|
-
overflow:
|
|
40
|
+
overflow: 'visible',
|
|
41
41
|
} },
|
|
42
42
|
sidebar && (!isMobile || showSidebarOnMobile) && (React.createElement("aside", { className: layoutTheme.sidebar, style: {
|
|
43
43
|
width: isMobile ? '100%' : sidebarWidth,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFilters.d.ts","sourceRoot":"","sources":["../../src/hooks/useFilters.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EACX,qBAAqB,EACrB,yBAAyB,EAC1B,MAAM,wBAAwB,CAAC;AAIhC,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,gGAAgG;IAChG,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,qDAAqD;IACrD,MAAM,EAAE,qBAAqB,GAAG,IAAI,CAAC;IACrC,4CAA4C;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,wCAAwC;IACxC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,kEAAkE;IAClE,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,yBAAyB,CAAC,CAAC;IAC5F,+BAA+B;IAC/B,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,GAAI,UAAU,iBAAiB,KAAG,
|
|
1
|
+
{"version":3,"file":"useFilters.d.ts","sourceRoot":"","sources":["../../src/hooks/useFilters.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EACX,qBAAqB,EACrB,yBAAyB,EAC1B,MAAM,wBAAwB,CAAC;AAIhC,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,gGAAgG;IAChG,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,qDAAqD;IACrD,MAAM,EAAE,qBAAqB,GAAG,IAAI,CAAC;IACrC,4CAA4C;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,wCAAwC;IACxC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,kEAAkE;IAClE,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,yBAAyB,CAAC,CAAC;IAC5F,+BAA+B;IAC/B,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,GAAI,UAAU,iBAAiB,KAAG,gBA2FxD,CAAC"}
|
package/dist/hooks/useFilters.js
CHANGED
|
@@ -14,15 +14,22 @@ export const useFilters = (options) => {
|
|
|
14
14
|
const [error, setError] = useState(null);
|
|
15
15
|
const mountedRef = useRef(true);
|
|
16
16
|
const autoFetch = options?.autoFetch !== false;
|
|
17
|
+
// Track whether we've completed the first fetch (to avoid skeleton flash on refetches)
|
|
18
|
+
const hasDataRef = useRef(false);
|
|
17
19
|
// Extract non-autoFetch options to pass to fetchFilters
|
|
18
20
|
const fetchFilters = useCallback(async () => {
|
|
19
|
-
|
|
21
|
+
// Only show loading spinner on the very first fetch; subsequent refetches
|
|
22
|
+
// keep previous data visible to avoid skeleton/flash on facet changes.
|
|
23
|
+
if (!hasDataRef.current) {
|
|
24
|
+
setLoading(true);
|
|
25
|
+
}
|
|
20
26
|
setError(null);
|
|
21
27
|
try {
|
|
22
28
|
const { autoFetch: _, ...filterOptions } = options || {};
|
|
23
29
|
const response = await stateManager.fetchFilters(filterOptions);
|
|
24
30
|
if (mountedRef.current) {
|
|
25
31
|
setFilters(response?.filters || []);
|
|
32
|
+
hasDataRef.current = true;
|
|
26
33
|
setLoading(false);
|
|
27
34
|
}
|
|
28
35
|
}
|
|
@@ -33,13 +40,26 @@ export const useFilters = (options) => {
|
|
|
33
40
|
}
|
|
34
41
|
}
|
|
35
42
|
}, [stateManager, options?.facetBy, options?.maxFacetValues, options?.disjunctiveFacets?.join(',')]);
|
|
36
|
-
//
|
|
43
|
+
// Track query to only refetch filters when query actually changes.
|
|
44
|
+
// Sentinel ensures the first subscribe callback always triggers a fetch.
|
|
45
|
+
const prevKeyRef = useRef(null);
|
|
46
|
+
// Refetch when query or refinements change (not on every state update)
|
|
37
47
|
useEffect(() => {
|
|
38
48
|
if (!autoFetch)
|
|
39
49
|
return;
|
|
40
|
-
const unsubscribe = stateManager.subscribe((
|
|
50
|
+
const unsubscribe = stateManager.subscribe((state) => {
|
|
51
|
+
// Only track query changes — refinements are NOT passed to the Filters API
|
|
52
|
+
// (facets are generated from search query only, not narrowed by active filters).
|
|
53
|
+
// This prevents redundant filters refetches on every facet toggle.
|
|
54
|
+
const key = state.query;
|
|
55
|
+
if (key === prevKeyRef.current)
|
|
56
|
+
return;
|
|
57
|
+
prevKeyRef.current = key;
|
|
41
58
|
fetchFilters();
|
|
42
59
|
});
|
|
60
|
+
// subscribe() immediately invokes the listener with current state,
|
|
61
|
+
// which handles the initial fetch (prevKeyRef starts as '' so key
|
|
62
|
+
// will differ). No explicit fetchFilters() call needed here.
|
|
43
63
|
return unsubscribe;
|
|
44
64
|
}, [stateManager, autoFetch, fetchFilters]);
|
|
45
65
|
// Fetch schema once on mount
|