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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _clsx = require("clsx");
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _FilterContext = require("./FilterContext.js");
var _Tag = _interopRequireDefault(require("../tag/Tag.js"));
var _HeightAnimation = _interopRequireDefault(require("../height-animation/HeightAnimation.js"));
var _Accordion = _interopRequireDefault(require("../accordion/Accordion.js"));
var _Button = _interopRequireDefault(require("../button/Button.js"));
var _ScrollView = _interopRequireDefault(require("../../fragments/scroll-view/ScrollView.js"));
var _Flex = _interopRequireDefault(require("../flex/Flex.js"));
var _index = require("../../icons/index.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function FilterActiveFilters({
  label,
  showCategoryLabel,
  collapsibleThreshold,
  onRemove,
  className
}) {
  const sharedContext = (0, _react.useContext)(_Context.default);
  const {
    activeFiltersLabel,
    activeFiltersCountLabel,
    clearAllLabel
  } = sharedContext.getTranslation({}).Filter;
  const resolvedLabel = label !== null && label !== void 0 ? label : activeFiltersLabel;
  const context = (0, _react.useContext)(_FilterContext.FilterContext);
  const accordionId = (0, _react.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 = (0, _jsxRuntime.jsx)(_Tag.default.Group, {
    label: resolvedLabel,
    children: entries.map(([filterKey, filterValue]) => {
      const tagLabel = showCategoryLabel && filterValue.categoryLabel ? `${filterValue.categoryLabel}: ${filterValue.label}` : filterValue.label;
      return (0, _jsxRuntime.jsx)(_Tag.default, {
        variant: "removable",
        onClick: () => handleRemove(filterKey),
        children: tagLabel
      }, filterKey);
    })
  });
  return (0, _jsxRuntime.jsx)(_HeightAnimation.default, {
    children: hasEntries && (0, _jsxRuntime.jsx)("div", {
      className: (0, _clsx.clsx)('dnb-filter__active-filters', className),
      children: isCollapsible ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [(0, _jsxRuntime.jsxs)(_Flex.default.Horizontal, {
          className: "dnb-filter__active-filters__header",
          justify: "space-between",
          align: "center",
          children: [(0, _jsxRuntime.jsx)(_Accordion.default, {
            variant: "tertiary",
            title: activeFiltersCountLabel.replace('%s', String(entries.length)),
            id: accordionId,
            iconPosition: "right"
          }), (0, _jsxRuntime.jsx)(_Button.default, {
            variant: "tertiary",
            icon: _index.close,
            onClick: handleClearAll,
            children: clearAllLabel
          })]
        }), (0, _jsxRuntime.jsx)(_Accordion.default.Content, {
          id: accordionId,
          children: (0, _jsxRuntime.jsx)(_ScrollView.default, {
            className: "dnb-filter__active-filters__scroll",
            children: tags
          })
        })]
      }) : (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [(0, _jsxRuntime.jsxs)(_Flex.default.Horizontal, {
          className: "dnb-filter__active-filters__header",
          justify: "space-between",
          align: "center",
          children: [(0, _jsxRuntime.jsx)("span", {
            className: "dnb-filter__active-filters__label",
            "aria-hidden": true,
            children: resolvedLabel
          }), (0, _jsxRuntime.jsx)(_Button.default, {
            variant: "tertiary",
            icon: _index.close,
            onClick: handleClearAll,
            children: clearAllLabel
          })]
        }), tags]
      })
    })
  });
}
var _default = exports.default = FilterActiveFilters;
//# sourceMappingURL=FilterActiveFilters.js.map