@dnb/eufemia/components/filter/FilterMultiSelection.js

DNB Eufemia Design System UI Library

"use client";

import { useCallback, useContext, useMemo, useRef } from 'react';
import MultiSelection from "../../extensions/forms/Field/MultiSelection/MultiSelection.js";
import { FilterContext } from "./FilterContext.js";
import FilterItem from "./FilterItem.js";
import { jsx as _jsx } from "react/jsx-runtime";
function FilterMultiSelection({
  label,
  filterKey,
  defaultOpen,
  data
}) {
  const context = useContext(FilterContext);
  if (!context) {
    throw new Error('Filter.MultiSelection must be used inside a Filter.Root.');
  }
  const {
    state,
    replaceFilters
  } = context;
  const filtersRef = useRef(state.filters);
  filtersRef.current = state.filters;
  const prefix = `${filterKey}/`;
  const currentValue = useMemo(() => {
    const values = Object.keys(state.filters).filter(key => key.startsWith(prefix)).map(key => key.slice(prefix.length));
    return values.length > 0 ? values : undefined;
  }, [state.filters, prefix]);
  const handleChange = useCallback(value => {
    const nextValues = Array.from(new Set((value !== null && value !== void 0 ? value : []).map(v => String(v))));
    const currentFilters = {
      ...filtersRef.current
    };
    for (const key of Object.keys(currentFilters)) {
      if (key.startsWith(prefix)) {
        delete currentFilters[key];
      }
    }
    for (const v of nextValues) {
      const key = `${prefix}${v}`;
      const item = data.find(d => String(d.value) === v);
      currentFilters[key] = {
        value: v,
        label: item ? String(item.title) : v,
        categoryLabel: label
      };
    }
    replaceFilters(currentFilters);
  }, [replaceFilters, prefix, label, data]);
  return _jsx(FilterItem, {
    label: label,
    filterKey: filterKey,
    defaultOpen: defaultOpen,
    children: _jsx(MultiSelection, {
      label: label,
      labelSrOnly: true,
      data: data,
      value: currentValue,
      onChange: handleChange,
      variant: "inline",
      showSearchField: true
    })
  });
}
export default FilterMultiSelection;
//# sourceMappingURL=FilterMultiSelection.js.map