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

DNB Eufemia Design System UI Library

"use client";

import _includesInstanceProperty from "core-js-pure/stable/instance/includes.js";
import { useCallback, useContext, useMemo } from 'react';
import Checkbox from "../checkbox/Checkbox.js";
import Flex from "../flex/Flex.js";
import { FilterContext, FilterItemContext } from "./FilterContext.js";
import FilterItem from "./FilterItem.js";
import { jsx as _jsx } from "react/jsx-runtime";
function FilterSelection({
  label,
  filterKey,
  defaultOpen,
  data: options
}) {
  const context = useContext(FilterContext);
  if (!context) {
    throw new Error('Filter.Selection must be used inside a Filter.Root.');
  }
  const {
    state,
    setFilter,
    removeFilter
  } = context;
  const itemContext = useContext(FilterItemContext);
  const prefix = `${filterKey}/`;
  const currentValue = useMemo(() => {
    return Object.keys(state.filters).filter(key => key.startsWith(prefix)).map(key => key.slice(prefix.length));
  }, [state.filters, prefix]);
  const handleChange = useCallback((optionValue, checked) => {
    const key = `${prefix}${optionValue}`;
    if (checked) {
      var _option$label;
      const option = options.find(opt => opt.value === optionValue);
      setFilter(key, {
        value: optionValue,
        label: (_option$label = option?.label) !== null && _option$label !== void 0 ? _option$label : optionValue,
        categoryLabel: label
      });
    } else {
      if (itemContext) {
        setFilter(key, undefined);
      } else {
        removeFilter(key);
      }
    }
  }, [itemContext, setFilter, removeFilter, prefix, label, options]);
  return _jsx(FilterItem, {
    label: label,
    filterKey: filterKey,
    defaultOpen: defaultOpen,
    children: _jsx(Flex.Vertical, {
      gap: "small",
      children: options.map(option => _jsx(Checkbox, {
        label: option.label,
        checked: _includesInstanceProperty(currentValue).call(currentValue, option.value),
        onChange: ({
          checked
        }) => handleChange(option.value, checked)
      }, option.value))
    })
  });
}
export default FilterSelection;
//# sourceMappingURL=FilterSelection.js.map