connectCurrentRefinements

import { connectCurrentRefinements } from 'instantsearch.js/es/connectors';

const customCurrentRefinements = connectCurrentRefinements(
  (renderOptions, isFirstRender) => {
    const { items, refine, widgetParams } = renderOptions;
    const { container } = widgetParams;
    
    container.innerHTML = `
      <ul>
        ${items.map(item => `
          <li>
            <strong>${item.label}:</strong>
            ${item.refinements.map(refinement => `
              <span>
                ${refinement.label}
                <button data-attribute="${refinement.attribute}" data-value="${refinement.value}">
                  ✕
                </button>
              </span>
            `).join('')}
          </li>
        `).join('')}
      </ul>
    `;
    
    container.querySelectorAll('button').forEach(button => {
      button.addEventListener('click', (e) => {
        const refinement = items
          .flatMap(item => item.refinements)
          .find(r => r.value === e.target.dataset.value);
        if (refinement) {
          refine(refinement);
        }
      });
    });
  }
);

search.addWidgets([
  customCurrentRefinements({
    container: document.querySelector('#current-refinements'),
  }),
]);