@dnb/eufemia/cjs/components/filter/FilterPanel.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 _Button = _interopRequireDefault(require("../button/Button.js"));
var _HeightAnimation = _interopRequireDefault(require("../height-animation/HeightAnimation.js"));
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _FilterContext = require("./FilterContext.js");
var _index = require("../../icons/index.js");
var _Hr2 = _interopRequireDefault(require("../../elements/Hr.js"));
var _jsxRuntime = require("react/jsx-runtime");
var _Hr;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function FilterPanel({
  className,
  children
}) {
  const context = (0, _react.useContext)(_FilterContext.FilterContext);
  const sharedContext = (0, _react.useContext)(_Context.default);
  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 = (0, _react.useCallback)(() => {
    if (isManual) {
      revertFilters();
    }
    setPanelOpen(false);
    panelButtonRef.current?.focus();
  }, [isManual, revertFilters, setPanelOpen, panelButtonRef]);
  const handleApply = (0, _react.useCallback)(() => {
    commitFilters();
    setPanelOpen(false);
    panelButtonRef.current?.focus();
  }, [commitFilters, setPanelOpen, panelButtonRef]);
  const panelDivRef = (0, _react.useRef)(null);
  const itemContextValue = (0, _react.useMemo)(() => ({
    panelRef: panelDivRef
  }), []);
  return (0, _jsxRuntime.jsx)(_HeightAnimation.default, {
    open: panelOpen,
    children: (0, _jsxRuntime.jsx)(_FilterContext.FilterItemContext, {
      value: itemContextValue,
      children: (0, _jsxRuntime.jsxs)("div", {
        ref: panelDivRef,
        className: (0, _clsx.clsx)('dnb-filter__panel', className),
        children: [children, _Hr || (_Hr = (0, _jsxRuntime.jsx)(_Hr2.default, {
          className: "dnb-filter__hr",
          space: 0
        })), isManual ? (0, _jsxRuntime.jsxs)("div", {
          className: "dnb-filter__panel-actions",
          children: [(0, _jsxRuntime.jsx)(_Button.default, {
            variant: "primary",
            onClick: handleApply,
            children: applyFilterLabel
          }), (0, _jsxRuntime.jsx)(_Button.default, {
            variant: "tertiary",
            icon: false,
            onClick: handleClose,
            children: cancelFilterLabel
          })]
        }) : (0, _jsxRuntime.jsx)(_Button.default, {
          variant: "tertiary",
          icon: _index.close,
          iconPosition: "left",
          onClick: handleClose,
          className: "dnb-filter__panel-close",
          children: hideFilterLabel
        })]
      })
    })
  });
}
var _default = exports.default = FilterPanel;
//# sourceMappingURL=FilterPanel.js.map