@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.js";
import { downcastRef } from '../../util/typing';
import Card from './Card';
import CardContent from './CardContent';
import CardHeader from './CardHeader';
import CardTitle from './CardTitle';
import CardActions from './CardActions';
/**
 * @typedef {import('../../types').CompositeProps} CompositeProps
 * @typedef {import('preact').JSX.HTMLAttributes<HTMLElement>} HTMLAttributes
 * @typedef {import('../../types').IconComponent} IconComponent
 *
 * @typedef PanelProps
 * @prop {import('preact').ComponentChildren} [buttons] - content to render as
 *   actions for the panel
 * @prop {IconComponent} [icon] - Name of optional icon to render in header
 * @prop {() => void} [onClose] - handler for closing the panel; if provided,
 *   will render a close button that invokes this onClick
 * @prop {string} title

 */

/**
 * Render a composed set of Card components in a panel-like interface
 *
 * @param {CompositeProps & PanelProps & Omit<HTMLAttributes, 'icon'|'size'|'width'>} props
 */

import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function Panel({
  children,
  elementRef,
  buttons,
  icon: Icon,
  onClose,
  title,
  ...htmlAttributes
}) {
  return _jsxDEV(Card, { ...htmlAttributes,
    elementRef: downcastRef(elementRef),
    "data-composite-component": "Panel",
    children: [_jsxDEV(CardHeader, {
      onClose: onClose,
      children: [Icon && _jsxDEV(Icon, {
        className: "w-em h-em"
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 47,
        columnNumber: 18
      }, this), _jsxDEV(CardTitle, {
        children: title
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 48,
        columnNumber: 9
      }, this)]
    }, void 0, true, {
      fileName: _jsxFileName,
      lineNumber: 46,
      columnNumber: 7
    }, this), _jsxDEV(CardContent, {
      children: [children, buttons && _jsxDEV(CardActions, {
        children: buttons
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 52,
        columnNumber: 21
      }, this)]
    }, void 0, true, {
      fileName: _jsxFileName,
      lineNumber: 50,
      columnNumber: 7
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 41,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=Panel.js.map