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

DNB Eufemia Design System UI Library

"use client";

var _Hr;
import { useCallback, useContext, useMemo, useRef } from 'react';
import { clsx } from 'clsx';
import Button from "../button/Button.js";
import HeightAnimation from "../height-animation/HeightAnimation.js";
import SharedContext from "../../shared/Context.js";
import { FilterContext, FilterItemContext } from "./FilterContext.js";
import { close } from "../../icons/index.js";
import Hr from "../../elements/Hr.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function FilterPanel({
  className,
  children
}) {
  const context = useContext(FilterContext);
  const sharedContext = useContext(SharedContext);
  const {
    hideFilterLabel,
    applyFilterLabel,
    cancelFilterLabel
  } = sharedContext.getTranslation({}).Filter;
  if (!context) {
    throw new Error('Filter.Panel must be used inside a Filter.Root.');
  }
  const {
    panelOpen,
    setPanelOpen,
    behavior,
    panelButtonRef,
    revertFilters,
    commitFilters
  } = context;
  const isManual = behavior === 'manual';
  const handleClose = useCallback(() => {
    if (isManual) {
      revertFilters();
    }
    setPanelOpen(false);
    panelButtonRef.current?.focus();
  }, [isManual, revertFilters, setPanelOpen, panelButtonRef]);
  const handleApply = useCallback(() => {
    commitFilters();
    setPanelOpen(false);
    panelButtonRef.current?.focus();
  }, [commitFilters, setPanelOpen, panelButtonRef]);
  const panelDivRef = useRef(null);
  const itemContextValue = useMemo(() => ({
    panelRef: panelDivRef
  }), []);
  return _jsx(HeightAnimation, {
    open: panelOpen,
    children: _jsx(FilterItemContext, {
      value: itemContextValue,
      children: _jsxs("div", {
        ref: panelDivRef,
        className: clsx('dnb-filter__panel', className),
        children: [children, _Hr || (_Hr = _jsx(Hr, {
          className: "dnb-filter__hr",
          space: 0
        })), isManual ? _jsxs("div", {
          className: "dnb-filter__panel-actions",
          children: [_jsx(Button, {
            variant: "primary",
            onClick: handleApply,
            children: applyFilterLabel
          }), _jsx(Button, {
            variant: "tertiary",
            icon: false,
            onClick: handleClose,
            children: cancelFilterLabel
          })]
        }) : _jsx(Button, {
          variant: "tertiary",
          icon: close,
          iconPosition: "left",
          onClick: handleClose,
          className: "dnb-filter__panel-close",
          children: hideFilterLabel
        })]
      })
    })
  });
}
export default FilterPanel;
//# sourceMappingURL=FilterPanel.js.map