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

DNB Eufemia Design System UI Library

"use client";

import { useContext, useId } from 'react';
import { clsx } from 'clsx';
import SharedContext from "../../shared/Context.js";
import { FilterContext } from "./FilterContext.js";
import Tag from "../tag/Tag.js";
import HeightAnimation from "../height-animation/HeightAnimation.js";
import Accordion from "../accordion/Accordion.js";
import Button from "../button/Button.js";
import ScrollView from "../../fragments/scroll-view/ScrollView.js";
import Flex from "../flex/Flex.js";
import { close } from "../../icons/index.js";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
function FilterActiveFilters({
  label,
  showCategoryLabel,
  collapsibleThreshold,
  onRemove,
  className
}) {
  const sharedContext = useContext(SharedContext);
  const {
    activeFiltersLabel,
    activeFiltersCountLabel,
    clearAllLabel
  } = sharedContext.getTranslation({}).Filter;
  const resolvedLabel = label !== null && label !== void 0 ? label : activeFiltersLabel;
  const context = useContext(FilterContext);
  const accordionId = useId();
  if (!context) {
    throw new Error('Filter.ActiveFilters must be used inside a Filter.Root.');
  }
  const entries = Object.entries(context.behavior === 'manual' ? context.appliedState.filters : context.state.filters);
  const hasEntries = entries.length > 0;
  const isCollapsible = collapsibleThreshold != null && entries.length > collapsibleThreshold;
  const handleRemove = filterKey => {
    if (context.behavior === 'manual') {
      context.removeAppliedFilter(filterKey);
    } else {
      context.removeFilter(filterKey);
    }
    onRemove?.(filterKey);
  };
  const handleClearAll = () => {
    context.clearFilters();
    context.setPanelOpen(false);
    context.panelButtonRef.current?.focus();
  };
  const tags = _jsx(Tag.Group, {
    label: resolvedLabel,
    children: entries.map(([filterKey, filterValue]) => {
      const tagLabel = showCategoryLabel && filterValue.categoryLabel ? `${filterValue.categoryLabel}: ${filterValue.label}` : filterValue.label;
      return _jsx(Tag, {
        variant: "removable",
        onClick: () => handleRemove(filterKey),
        children: tagLabel
      }, filterKey);
    })
  });
  return _jsx(HeightAnimation, {
    children: hasEntries && _jsx("div", {
      className: clsx('dnb-filter__active-filters', className),
      children: isCollapsible ? _jsxs(_Fragment, {
        children: [_jsxs(Flex.Horizontal, {
          className: "dnb-filter__active-filters__header",
          justify: "space-between",
          align: "center",
          children: [_jsx(Accordion, {
            variant: "tertiary",
            title: activeFiltersCountLabel.replace('%s', String(entries.length)),
            id: accordionId,
            iconPosition: "right"
          }), _jsx(Button, {
            variant: "tertiary",
            icon: close,
            onClick: handleClearAll,
            children: clearAllLabel
          })]
        }), _jsx(Accordion.Content, {
          id: accordionId,
          children: _jsx(ScrollView, {
            className: "dnb-filter__active-filters__scroll",
            children: tags
          })
        })]
      }) : _jsxs(_Fragment, {
        children: [_jsxs(Flex.Horizontal, {
          className: "dnb-filter__active-filters__header",
          justify: "space-between",
          align: "center",
          children: [_jsx("span", {
            className: "dnb-filter__active-filters__label",
            "aria-hidden": true,
            children: resolvedLabel
          }), _jsx(Button, {
            variant: "tertiary",
            icon: close,
            onClick: handleClearAll,
            children: clearAllLabel
          })]
        }), tags]
      })
    })
  });
}
export default FilterActiveFilters;
//# sourceMappingURL=FilterActiveFilters.js.map