diff --git a/src/components/CurrentRefinements/CurrentRefinements.tsx b/src/components/CurrentRefinements/CurrentRefinements.tsx
index a06586a727..e0472fc408 100644
--- a/src/components/CurrentRefinements/CurrentRefinements.tsx
+++ b/src/components/CurrentRefinements/CurrentRefinements.tsx
@@ -1,6 +1,7 @@
/** @jsx h */
import { h } from 'preact';
+import cx from 'classnames';
import { isSpecialClick, capitalize } from '../../lib/utils';
import type {
CurrentRefinementsConnectorParamsItem,
@@ -15,6 +16,7 @@ export type CurrentRefinementsComponentCSSClasses =
export type CurrentRefinementsProps = {
items: CurrentRefinementsConnectorParamsItem[];
cssClasses: CurrentRefinementsComponentCSSClasses;
+ canRefine: boolean;
};
const createItemKey = ({
@@ -37,8 +39,16 @@ const handleClick = (callback: () => void) => (event: any) => {
callback();
};
-const CurrentRefinements = ({ items, cssClasses }: CurrentRefinementsProps) => (
-
+const CurrentRefinements = ({
+ items,
+ cssClasses,
+ canRefine,
+}: CurrentRefinementsProps) => (
+
{items.map((item, index) => (
- {
const cssClasses = {
root: 'root',
+ noRefinementRoot: 'noRefinementRoot',
list: 'list',
item: 'item',
label: 'label',
@@ -21,6 +22,7 @@ describe('CurrentRefinements', () => {
it('renders', () => {
const props = {
cssClasses,
+ canRefine: true,
items: [
{
indexName: 'indexName',
@@ -122,10 +124,25 @@ describe('CurrentRefinements', () => {
expect(container).toMatchSnapshot();
});
+ it('renders without items', () => {
+ const props = {
+ cssClasses,
+ canRefine: false,
+ items: [],
+ };
+
+ const { container } = render();
+ const root = container.querySelector('.root')!;
+
+ expect(root.classList).toContain('noRefinementRoot');
+ expect(container).toMatchSnapshot();
+ });
+
describe('options.refinements', () => {
it('can be used with a facet', () => {
const props = {
cssClasses,
+ canRefine: true,
items: [
{
indexName: 'indexName',
@@ -152,6 +169,7 @@ describe('CurrentRefinements', () => {
it('can be used with an exclude', () => {
const props = {
cssClasses,
+ canRefine: true,
items: [
{
indexName: 'indexName',
@@ -179,6 +197,7 @@ describe('CurrentRefinements', () => {
it('can be used with a disjunctive facet', () => {
const props = {
cssClasses,
+ canRefine: true,
items: [
{
indexName: 'indexName',
@@ -205,6 +224,7 @@ describe('CurrentRefinements', () => {
it('can be used with a hierarchical facet', () => {
const props = {
cssClasses,
+ canRefine: true,
items: [
{
indexName: 'indexName',
@@ -231,6 +251,7 @@ describe('CurrentRefinements', () => {
it('can be used with numeric filters', () => {
const props = {
cssClasses,
+ canRefine: true,
items: [
{
indexName: 'indexName',
@@ -288,6 +309,7 @@ describe('CurrentRefinements', () => {
it('can be used with a tag', () => {
const props = {
cssClasses,
+ canRefine: true,
items: [
{
indexName: 'indexName',
@@ -314,6 +336,7 @@ describe('CurrentRefinements', () => {
it('can be used with a query', () => {
const props = {
cssClasses,
+ canRefine: true,
items: [
{
indexName: 'indexName',
diff --git a/src/components/CurrentRefinements/__tests__/__snapshots__/CurrentRefinements-test.tsx.snap b/src/components/CurrentRefinements/__tests__/__snapshots__/CurrentRefinements-test.tsx.snap
index 1c4aaa512d..56b0e65e21 100644
--- a/src/components/CurrentRefinements/__tests__/__snapshots__/CurrentRefinements-test.tsx.snap
+++ b/src/components/CurrentRefinements/__tests__/__snapshots__/CurrentRefinements-test.tsx.snap
@@ -479,3 +479,15 @@ exports[`CurrentRefinements renders 1`] = `
`;
+
+exports[`CurrentRefinements renders without items 1`] = `
+
+`;
diff --git a/src/widgets/current-refinements/__tests__/__snapshots__/current-refinements-test.ts.snap b/src/widgets/current-refinements/__tests__/__snapshots__/current-refinements-test.ts.snap
index 3f5762ba3d..0fdb5d304e 100644
--- a/src/widgets/current-refinements/__tests__/__snapshots__/current-refinements-test.ts.snap
+++ b/src/widgets/current-refinements/__tests__/__snapshots__/current-refinements-test.ts.snap
@@ -2,6 +2,7 @@
exports[`currentRefinements() render() DOM output renders correctly 1`] = `
{
+ "canRefine": true,
"cssClasses": {
"category": "ais-CurrentRefinements-category category",
"categoryLabel": "ais-CurrentRefinements-categoryLabel categoryLabel",
@@ -9,6 +10,7 @@ exports[`currentRefinements() render() DOM output renders correctly 1`] = `
"item": "ais-CurrentRefinements-item item",
"label": "ais-CurrentRefinements-label label",
"list": "ais-CurrentRefinements-list list",
+ "noRefinementRoot": "ais-CurrentRefinements--noRefinement",
"root": "ais-CurrentRefinements root",
},
"items": [
@@ -144,6 +146,7 @@ exports[`currentRefinements() render() DOM output renders correctly 1`] = `
exports[`currentRefinements() render() options.container should render with a HTMLElement container 1`] = `
{
+ "canRefine": false,
"cssClasses": {
"category": "ais-CurrentRefinements-category",
"categoryLabel": "ais-CurrentRefinements-categoryLabel",
@@ -151,6 +154,7 @@ exports[`currentRefinements() render() options.container should render with a HT
"item": "ais-CurrentRefinements-item",
"label": "ais-CurrentRefinements-label",
"list": "ais-CurrentRefinements-list",
+ "noRefinementRoot": "ais-CurrentRefinements--noRefinement",
"root": "ais-CurrentRefinements",
},
"items": [],
@@ -159,6 +163,7 @@ exports[`currentRefinements() render() options.container should render with a HT
exports[`currentRefinements() render() should render twice 1`] = `
{
+ "canRefine": true,
"cssClasses": {
"category": "ais-CurrentRefinements-category",
"categoryLabel": "ais-CurrentRefinements-categoryLabel",
@@ -166,6 +171,7 @@ exports[`currentRefinements() render() should render twice 2`] = `
{
+ "canRefine": true,
"cssClasses": {
"category": "ais-CurrentRefinements-category",
"categoryLabel": "ais-CurrentRefinements-categoryLabel",
@@ -198,6 +205,7 @@ exports[`currentRefinements() render() should render twice
-> = ({ items, widgetParams }, isFirstRender) => {
+> = ({ items, widgetParams, canRefine }, isFirstRender) => {
if (isFirstRender) {
return;
}
@@ -84,7 +89,11 @@ const renderer: Renderer<
};
render(
- ,
+ ,
container
);
};
@@ -112,8 +121,12 @@ const currentRefinements: CurrentRefinementsWidget =
}
const containerNode = getContainerNode(container);
- const cssClasses = {
+ const cssClasses: CurrentRefinementsCSSClasses = {
root: cx(suit(), userCssClasses.root),
+ noRefinementRoot: cx(
+ suit({ modifierName: 'noRefinement' }),
+ userCssClasses.noRefinementRoot
+ ),
list: cx(suit({ descendantName: 'list' }), userCssClasses.list),
item: cx(suit({ descendantName: 'item' }), userCssClasses.item),
label: cx(suit({ descendantName: 'label' }), userCssClasses.label),