In InstantSearch.js, the hidden parameter of the panel widget is a function that is called on each render to determine if the panel should be hidden based on the render options. If the function returnstrue, the CSS classnoRefinementRootis applied and the wrapper is hidden.
For example, the panel and its contained widgets (ie: a refinementList) could be hidden if no hits are returned:
panel({
hidden(options) {
return options.results.nbHits === 0;
},
});
Although the InstantSearch.js panel widget's hidden parameter behavior is not currently available in the React InstantSearch <Panel> widget, you can create a custom panel using the connectCurrentRefinementsconnector to retrieve the current refinements for the attribute present in the panel.
You could also potentially take some inspiration from the<ExpandablePanel>widget of the Ecommerce UI Template.
Alternately, for React InstantSearch Hooks, you could take a look at this custom widget<FacetDropdown> which is implementing a similar behavior.
Please note that these customizations are out-of-scope for Support.