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

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireDefault(require("react"));

var _autoId = require("@reach/auto-id");

var _Box = _interopRequireDefault(require("../../Box"));

var _Flex = _interopRequireDefault(require("../../Flex"));

var _IconButton = _interopRequireDefault(require("../../IconButton"));

var _Icon = _interopRequireDefault(require("../../Icon"));

var _useAlertStyles2 = _interopRequireDefault(require("./useAlertStyles"));

/** An ControlledAlert component is simply a container for text that should capture the user's attention */
var ControlledAlert = /*#__PURE__*/_react.default.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 = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["title", "open", "onClose", "description", "variant", "discardable", "actions"]);

  var _useAlertStyles = (0, _useAlertStyles2.default)({
    variant
  }),
      backgroundColor = _useAlertStyles.backgroundColor,
      icon = _useAlertStyles.icon;

  var id = (0, _autoId.useId)();

  if (!open) {
    return null;
  }

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

var _default = /*#__PURE__*/_react.default.memo(ControlledAlert);

exports.default = _default;