@hypothesis/frontend-shared/lib/components/layout/Panel.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/layout/Panel.tsx";
import classNames from 'classnames';
import { downcastRef } from '../../util/typing';
import Scroll from '../data/Scroll';
import Card from './Card';
import CardActions from './CardActions';
import CardContent from './CardContent';
import CardHeader from './CardHeader';
import CardTitle from './CardTitle';
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "preact/jsx-dev-runtime";
/**
 * Render a composed set of Card components in a panel-like interface.
 *
 * If the total height of the Panel exceeds any height constraints set on the
 * Panel's immediate parent element, content (`children`) will scroll. The
 * header and any buttons will not scroll.
 */
export default function Panel({
  children,
  elementRef,
  buttons,
  fullWidthHeader = false,
  icon: Icon,
  onClose,
  paddingSize = 'md',
  scrollable = false,
  title,
  ...htmlAttributes
}) {
  // These classes are set on the content container hierarchy in this component
  // to ensure that the overall height is constrained to height rules set on
  // parent elements. This allows for control over scrolling content,
  // specifically.
  const heightConstraintClasses = 'flex flex-col min-h-0 h-full';
  const panelContent = paddingSize === 'none' ? children : _jsxDEV(CardContent, {
    classes: heightConstraintClasses,
    "data-testid": "panel-content-wrapper",
    size: paddingSize,
    children: children
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 81,
    columnNumber: 7
  }, this);
  return _jsxDEV(Card, {
    "data-composite-component": "Panel",
    ...htmlAttributes,
    classes: heightConstraintClasses,
    elementRef: downcastRef(elementRef),
    children: [_jsxDEV(CardHeader, {
      onClose: onClose,
      fullWidth: scrollable || fullWidthHeader,
      children: [Icon && _jsxDEV(Icon, {
        className: "w-em h-em"
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 97,
        columnNumber: 18
      }, this), _jsxDEV(CardTitle, {
        children: title
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 98,
        columnNumber: 9
      }, this)]
    }, void 0, true, {
      fileName: _jsxFileName,
      lineNumber: 96,
      columnNumber: 7
    }, this), scrollable ? _jsxDEV(Scroll, {
      classes: classNames({
        // When no buttons are provided (which means this is the last children),
        // inherit the bottom border radius from Card.
        'rounded-b-[inherit]': !buttons
      }),
      children: panelContent
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 101,
      columnNumber: 9
    }, this) : _jsxDEV(_Fragment, {
      children: panelContent
    }, void 0, false), buttons && _jsxDEV(CardContent, {
      "data-testid": "panel-buttons",
      children: _jsxDEV(CardActions, {
        children: buttons
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 115,
        columnNumber: 11
      }, this)
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 114,
      columnNumber: 9
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 90,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=Panel.js.map