@ntragas/pouncejstest/dist/esm/components/utils/ControlledAlert/ControlledAlert.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import { useId } from '@reach/auto-id';
import Box from '../../Box';
import Flex from '../../Flex';
import IconButton from '../../IconButton';
import Icon from '../../Icon';
import useAlertStyles from './useAlertStyles';

/** An ControlledAlert component is simply a container for text that should capture the user's attention */
var ControlledAlert = /*#__PURE__*/React.forwardRef(function ControlledAlert(_ref, ref) {
  var title = _ref.title,
      open = _ref.open,
      onClose = _ref.onClose,
      description = _ref.description,
      _ref$variant = _ref.variant,
      variant = _ref$variant === void 0 ? 'default' : _ref$variant,
      discardable = _ref.discardable,
      _ref$actions = _ref.actions,
      actions = _ref$actions === void 0 ? null : _ref$actions,
      rest = _objectWithoutPropertiesLoose(_ref, ["title", "open", "onClose", "description", "variant", "discardable", "actions"]);

  var _useAlertStyles = useAlertStyles({
    variant
  }),
      backgroundColor = _useAlertStyles.backgroundColor,
      icon = _useAlertStyles.icon;

  var id = useId();

  if (!open) {
    return null;
  }

  return /*#__PURE__*/React.createElement(Box, _extends({
    ref: ref,
    p: 4,
    borderRadius: "large",
    role: "dialog",
    "aria-labelledby": id + "-title",
    "aria-describedby": id + "-description",
    backgroundColor: backgroundColor
  }, rest), title && /*#__PURE__*/React.createElement(Flex, {
    as: "header",
    align: "center",
    fontSize: "large"
  }, /*#__PURE__*/React.createElement(Icon, {
    type: icon,
    mr: 2,
    size: "large"
  }), /*#__PURE__*/React.createElement(Box, {
    as: "h4",
    fontWeight: description ? 'bold' : 'normal',
    flexGrow: 1,
    mr: "auto",
    id: id + "-title"
  }, title), discardable && /*#__PURE__*/React.createElement(Box, {
    my: -3,
    mr: -3,
    ml: 3
  }, /*#__PURE__*/React.createElement(IconButton, {
    "aria-label": "Discard",
    variant: "unstyled",
    icon: "close",
    onClick: onClose
  }))), description && /*#__PURE__*/React.createElement(Box, {
    as: "p",
    fontStyle: "italic",
    mt: title ? 3 : 0,
    fontSize: "medium"
  }, description), actions && /*#__PURE__*/React.createElement(Flex, {
    mt: 6,
    justify: "flex-end",
    as: "footer"
  }, typeof actions === 'function' ? actions({
    close
  }) : actions));
});
export default /*#__PURE__*/React.memo(ControlledAlert);