@pantheon-systems/design-toolkit-react/dist/Filters/Filter.js

Pantheon's React Design Toolkit

import { Form } from 'informed';
import PropTypes from 'prop-types';
import { HeadingLevel } from '../lib/customPropTypes.js';
import HX from '../Headings/HX.js';
import FilterReset from './FilterReset.js';
import { jsx, jsxs } from 'react/jsx-runtime';

var Filter = function Filter(_ref) {
  var ariaControls = _ref.ariaControls,
    children = _ref.children,
    heading = _ref.heading,
    headingLevel = _ref.headingLevel,
    headingLevelStyle = _ref.headingLevelStyle,
    onChange = _ref.onChange,
    resetLabel = _ref.resetLabel;
  return /*#__PURE__*/jsx("nav", {
    "aria-controls": ariaControls,
    children: /*#__PURE__*/jsxs(Form, {
      onValueChange: onChange,
      children: [heading.length && /*#__PURE__*/jsxs("div", {
        className: "flex items-center justify-between mb-6",
        children: [/*#__PURE__*/jsx(HX, {
          className: "mb-0",
          level: headingLevel,
          levelStyle: headingLevelStyle,
          children: heading
        }), /*#__PURE__*/jsx(FilterReset, {
          onReset: onChange,
          children: resetLabel
        })]
      }), children]
    })
  });
};
Filter.defaultProps = {
  heading: '',
  headingLevel: 3,
  headingLevelStyle: 4
};
Filter.propTypes = {
  ariaControls: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired,
  heading: PropTypes.string,
  headingLevel: HeadingLevel,
  headingLevelStyle: HeadingLevel,
  onChange: PropTypes.func.isRequired,
  resetLabel: PropTypes.string.isRequired
};
var Filter$1 = Filter;

export { Filter$1 as default };
//# sourceMappingURL=Filter.js.map