@jetbrains/ring-ui 4.1.1 → 4.1.2

package/dist/_helpers/select__filter.js

@@ -0,0 +1,76 @@
+import { _ as _defineProperty, a as _extends } from './_rollupPluginBabelHelpers.js';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Input from '../input/input.js';
+import sniffr from '../global/sniffer.js';
+import { ActiveItemContext } from '../list/list.js';
+
+var modules_b607bec2 = {"unit":"8px","filterWithTags":"filterWithTags_rui_7e99","filterWrapper":"filterWrapper_rui_7e99","filterWithTagsFocused":"filterWithTagsFocused_rui_7e99","filter":"filter_rui_7e99","filterIcon":"filterIcon_rui_7e99","bottomLine":"bottomLine_rui_7e99","message":"message_rui_7e99","selectAll":"selectAll_rui_7e99"};
+
+function noop() {}
+
+class SelectFilter extends Component {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "inputRef", el => {
+      this.input = el;
+      this.props.inputRef(el);
+    });
+  }
+
+  componentWillUnmount() {
+    this.blur();
+  }
+
+  focus() {
+    const {
+      input
+    } = this;
+
+    if (input && input !== document.activeElement) {
+      sniffr.browser.name === 'firefox' ? input.select() : input.focus();
+    }
+  }
+
+  blur() {
+    if (this.input && this.input === document.activeElement) {
+      this.input.blur();
+    }
+  }
+
+  render() {
+    const {
+      className,
+      listId,
+      ...restProps
+    } = this.props;
+    const classes = classNames(modules_b607bec2.filter, className);
+    return /*#__PURE__*/React.createElement(ActiveItemContext.ValueContext.Consumer, null, activeItemId => /*#__PURE__*/React.createElement(Input, _extends({}, restProps, {
+      "aria-owns": listId,
+      "aria-activedescendant": activeItemId,
+      autoComplete: "off",
+      autoFocus: true,
+      borderless: true,
+      inputRef: this.inputRef,
+      className: classes
+    })));
+  }
+
+}
+
+_defineProperty(SelectFilter, "propTypes", {
+  placeholder: PropTypes.string,
+  className: PropTypes.string,
+  inputRef: PropTypes.func,
+  listId: PropTypes.string,
+  activeItemId: PropTypes.string
+});
+
+_defineProperty(SelectFilter, "defaultProps", {
+  placeholder: 'Filter items',
+  inputRef: noop
+});
+
+export { SelectFilter as S, modules_b607bec2 as m };

package/dist/_helpers/services-link.js

@@ -0,0 +1,40 @@
+import { _ as _defineProperty, a as _extends } from './_rollupPluginBabelHelpers.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Link from '../link/link.js';
+
+var modules_74a7bf8b = {"unit":"8px","services":"services_rui_5879","active":"active_rui_5879","item":"item_rui_5879","itemLogo":"itemLogo_rui_5879","activeItem":"activeItem_rui_5879 item_rui_5879 active_rui_5879","line":"line_rui_5879","itemStacked":"itemStacked_rui_5879","activeItemStacked":"activeItemStacked_rui_5879 itemStacked_rui_5879 active_rui_5879"};
+
+class ServicesLink extends PureComponent {
+  render() {
+    const {
+      service,
+      ...props
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Link, _extends({
+      target: "_self",
+      href: service.homeUrl
+    }, props), WrapText => service.iconUrl ? [/*#__PURE__*/React.createElement("span", {
+      key: "icon",
+      className: modules_74a7bf8b.itemLogo,
+      style: {
+        backgroundImage: `url(${service.iconUrl})`
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      key: "text"
+    }, /*#__PURE__*/React.createElement(WrapText, null, service.name))] : /*#__PURE__*/React.createElement(WrapText, null, service.name));
+  }
+
+}
+
+_defineProperty(ServicesLink, "propTypes", {
+  isActive: PropTypes.bool,
+  service: PropTypes.shape({
+    applicationName: PropTypes.string,
+    iconUrl: PropTypes.string,
+    homeUrl: PropTypes.string,
+    name: PropTypes.string
+  })
+});
+
+export { ServicesLink as S, modules_74a7bf8b as m };

package/dist/_helpers/sidebar.js

@@ -0,0 +1,125 @@
+import { _ as _defineProperty, a as _extends } from './_rollupPluginBabelHelpers.js';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Waypoint } from 'react-waypoint';
+
+var modules_b8a9dd4f = {"unit":"8px","extra-small-screen-media":"(max-width:639px)","small-screen-media":"(min-width:640px) and (max-width:959px)","sidebarWidth":"240px","contentLayout":"contentLayout_rui_6771","contentLayoutContent":"contentLayoutContent_rui_6771","sidebarContainer":"sidebarContainer_rui_6771","sidebarContainerRight":"sidebarContainerRight_rui_6771","sidebar":"sidebar_rui_6771","sidebarRight":"sidebarRight_rui_6771","sidebarFixedTop":"sidebarFixedTop_rui_6771","sidebarFixedBottom":"sidebarFixedBottom_rui_6771","bottomMarker":"bottomMarker_rui_6771","contentLayoutResponsive":"contentLayoutResponsive_rui_6771"};
+
+const ABOVE = 'above';
+const INSIDE = 'inside';
+class Sidebar extends Component {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      topIsOutside: true,
+      bottomIsOutside: true
+    });
+
+    _defineProperty(this, "handleTopWaypoint", _ref => {
+      let {
+        currentPosition
+      } = _ref;
+      this.setState({
+        topIsOutside: currentPosition === ABOVE
+      });
+    });
+
+    _defineProperty(this, "handleBottomWaypoint", _ref2 => {
+      let {
+        currentPosition,
+        waypointTop
+      } = _ref2;
+      this.setState({
+        sidebarVisibleHeight: waypointTop,
+        bottomIsOutside: currentPosition !== INSIDE
+      });
+    });
+
+    _defineProperty(this, "sidebarRef", node => {
+      this.sidebarNode = node;
+    });
+  }
+
+  shouldUseFixation() {
+    const {
+      contentNode
+    } = this.props;
+    const {
+      sidebarNode
+    } = this;
+
+    if (!contentNode || !sidebarNode) {
+      return false;
+    }
+
+    return contentNode.offsetHeight >= sidebarNode.offsetHeight;
+  }
+
+  shouldFixateBottom() {
+    const {
+      topIsOutside,
+      bottomIsOutside
+    } = this.state;
+    return !bottomIsOutside && topIsOutside && this.shouldUseFixation();
+  }
+
+  render() {
+    const {
+      right,
+      children,
+      className,
+      containerClassName,
+      fixedClassName,
+      contentNode,
+      ...restProps
+    } = this.props;
+    const {
+      topIsOutside,
+      bottomIsOutside,
+      sidebarVisibleHeight
+    } = this.state;
+    const shouldFixateTop = bottomIsOutside && topIsOutside && this.shouldUseFixation();
+    const shouldFixateBottom = this.shouldFixateBottom();
+    const containerClasses = classNames(modules_b8a9dd4f.sidebarContainer, containerClassName, {
+      [modules_b8a9dd4f.sidebarContainerRight]: right
+    });
+    const classes = classNames(modules_b8a9dd4f.sidebar, className, {
+      [modules_b8a9dd4f.sidebarRight]: right,
+      [modules_b8a9dd4f.sidebarFixedTop]: shouldFixateTop,
+      [modules_b8a9dd4f.sidebarFixedBottom]: shouldFixateBottom,
+      [fixedClassName]: shouldFixateTop || shouldFixateBottom
+    });
+    const style = {
+      maxHeight: shouldFixateBottom && sidebarVisibleHeight ? `${sidebarVisibleHeight}px` : null
+    };
+    return /*#__PURE__*/React.createElement("aside", {
+      className: containerClasses,
+      ref: this.sidebarRef
+    }, /*#__PURE__*/React.createElement(Waypoint, {
+      onEnter: this.handleTopWaypoint,
+      onLeave: this.handleTopWaypoint
+    }), /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+      style: style,
+      className: classes
+    }), children), /*#__PURE__*/React.createElement("div", {
+      className: modules_b8a9dd4f.bottomMarker
+    }, /*#__PURE__*/React.createElement(Waypoint, {
+      onEnter: this.handleBottomWaypoint,
+      onLeave: this.handleBottomWaypoint
+    })));
+  }
+
+}
+
+_defineProperty(Sidebar, "propTypes", {
+  right: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  containerClassName: PropTypes.string,
+  fixedClassName: PropTypes.string,
+  contentNode: PropTypes.object
+});
+
+export { Sidebar as S, modules_b8a9dd4f as m };

package/dist/_helpers/table.js

@@ -0,0 +1,3 @@
+var modules_1db4bbca = {"unit":"8px","height":"32px","compensate":"2px","compensated":"30px","top":"-3px","row":"row_rui_3e32","dragHandle":"dragHandle_rui_3e32","tableWrapper":"tableWrapper_rui_3e32","table":"table_rui_3e32","userSelectNone":"userSelectNone_rui_3e32","headerCell":"headerCell_rui_3e32 fontSmallerLower_rui_750f fontSmaller_rui_750f fontLower_rui_750f font_rui_750f","headerCellSorted":"headerCellSorted_rui_3e32","headerCellSortable":"headerCellSortable_rui_3e32","sorter":"sorter_rui_3e32","sortedUp":"sortedUp_rui_3e32","icon":"icon_rui_3e32","caption":"caption_rui_3e32","tableHead":"tableHead_rui_3e32","subHeaderFixed":"subHeaderFixed_rui_3e32","subHeader":"subHeader_rui_3e32","disabledHover":"disabledHover_rui_3e32","rowSelected":"rowSelected_rui_3e32","rowFocused":"rowFocused_rui_3e32","cell":"cell_rui_3e32 ellipsis_rui_750f","loadingOverlay":"loadingOverlay_rui_3e32","cellUnlimited":"cellUnlimited_rui_3e32","cellRight":"cellRight_rui_3e32","metaColumn":"metaColumn_rui_3e32","headerMetaColumn":"headerMetaColumn_rui_3e32","visibleDragHandle":"visibleDragHandle_rui_3e32","rowCollapseExpandButton":"rowCollapseExpandButton_rui_3e32","draggingRow":"draggingRow_rui_3e32","tableMessage":"tableMessage_rui_3e32"};
+
+export { modules_1db4bbca as m };

package/dist/_helpers/tabs.js

@@ -0,0 +1,3 @@
+var modules_02138f4a = {"unit":"8px","line-shadow":"inset 0 -1px 0 0","selected-line-shadow":"inset 0 -3px 0 0","tabs":"tabs_rui_cbfd font_rui_750f","titles":"titles_rui_cbfd","light":"light_rui_cbfd","dark":"dark_rui_cbfd","title":"title_rui_cbfd font_rui_750f","selected":"selected_rui_cbfd","collapsed":"collapsed_rui_cbfd","titleLegacy":"titleLegacy_rui_cbfd","visible":"visible_rui_cbfd","container":"container_rui_cbfd","hidden":"hidden_rui_cbfd","hiddenBold":"hiddenBold_rui_cbfd","hiddenRegular":"hiddenRegular_rui_cbfd","tabCounter":"tabCounter_rui_cbfd","autoCollapseContainer":"autoCollapseContainer_rui_cbfd","autoCollapse":"autoCollapse_rui_cbfd","rendered":"rendered_rui_cbfd","adjusted":"adjusted_rui_cbfd","measure":"measure_rui_cbfd","morePopup":"morePopup_rui_cbfd","chevron":"chevron_rui_cbfd","morePopupBeforeEnd":"morePopupBeforeEnd_rui_cbfd"};
+
+export { modules_02138f4a as m };

package/dist/_helpers/title.js

@@ -0,0 +1,99 @@
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import focusSensorHOC from '../global/focus-sensor-hoc.js';
+import Checkbox from '../checkbox/checkbox.js';
+import getUID from '../global/get-uid.js';
+
+var modules_09d014b4 = {"unit":"8px","height":"32px","compensate":"2px","dataListWrapper":"dataListWrapper_rui_dd45","dataList":"dataList_rui_dd45","itemContent":"itemContent_rui_dd45","title":"title_rui_dd45","titleSelected":"titleSelected_rui_dd45","titleFocused":"titleFocused_rui_dd45","showMore":"showMore_rui_dd45","boxes":"boxes_rui_dd45","checkboxBox":"checkboxBox_rui_dd45","collapseButton":"collapseButton_rui_dd45","collapseIcon":"collapseIcon_rui_dd45","loadingOverlay":"loadingOverlay_rui_dd45","showMoreLoader":"showMoreLoader_rui_dd45"};
+
+class Title extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "id", getUID('data-list-title'));
+
+    _defineProperty(this, "onCheckboxFocus", () => {
+      this.props.onFocusRestore();
+    });
+
+    _defineProperty(this, "onCheckboxChange", () => {
+      this.toggleSelection();
+    });
+  }
+
+  toggleSelection() {
+    const {
+      selectable,
+      selected,
+      onSelect
+    } = this.props;
+
+    if (selectable) {
+      onSelect(!selected);
+    }
+  }
+
+  render() {
+    const {
+      className,
+      title,
+      offset,
+      showFocus,
+      innerRef,
+      selectable,
+      selected,
+      collapserExpander
+    } = this.props;
+    const classes = classNames(className, {
+      [modules_09d014b4.title]: true,
+      [modules_09d014b4.titleFocused]: showFocus,
+      [modules_09d014b4.titleSelected]: selected
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      id: this.id,
+      className: classes,
+      style: {
+        paddingLeft: offset
+      },
+      ref: innerRef
+    }, /*#__PURE__*/React.createElement("div", {
+      className: modules_09d014b4.boxes
+    }, selectable && /*#__PURE__*/React.createElement("div", {
+      className: modules_09d014b4.checkboxBox
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      "aria-labelledby": this.id,
+      className: showFocus ? 'ring-checkbox_focus' : '',
+      checked: selected,
+      onFocus: this.onCheckboxFocus,
+      onChange: this.onCheckboxChange,
+      tabIndex: "-1"
+    })), collapserExpander), title);
+  }
+
+}
+
+_defineProperty(Title, "propTypes", {
+  className: PropTypes.string,
+  title: PropTypes.node,
+  offset: PropTypes.number,
+  selectable: PropTypes.bool,
+  selected: PropTypes.bool,
+  onSelect: PropTypes.func,
+  showFocus: PropTypes.bool,
+  collapserExpander: PropTypes.node,
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
+  // focusSensorHOC
+  onFocusRestore: PropTypes.func
+});
+
+_defineProperty(Title, "defaultProps", {
+  selectable: false,
+  selected: false,
+  showFocus: false
+});
+
+var Title$1 = focusSensorHOC(Title);
+
+export { Title$1 as T, modules_09d014b4 as m };

package/dist/alert/alert.js

@@ -0,0 +1,260 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import exceptionIcon from '@jetbrains/icons/exception';
+import checkmarkIcon from '@jetbrains/icons/checkmark';
+import warningIcon from '@jetbrains/icons/warning';
+import closeIcon from '@jetbrains/icons/close';
+import Icon from '../icon/icon.js';
+import LoaderInline from '../loader-inline/loader-inline.js';
+import { getRect } from '../global/dom.js';
+import joinDataTestAttributes from '../global/data-tests.js';
+export { default as Container } from './container.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../global/memoize.js';
+import '../global/theme.js';
+import '../_helpers/inject-styles.js';
+import '../global/conic-gradient.js';
+import 'conic-gradient';
+import '../global/supports-css.js';
+import '../global/inject-styles.js';
+import '../global/radial-gradient-mask.js';
+import '../global/get-uid.js';
+import 'react-dom';
+
+var modules_e02b3280 = {"unit":"8px","animation-duration":".3s","animation-easing":"ease-out","alert":"alert_rui_9b21","alertInline":"alertInline_rui_9b21","error":"error_rui_9b21","icon":"icon_rui_9b21","caption":"caption_rui_9b21","link":"link_rui_9b21","withCloseButton":"withCloseButton_rui_9b21","badge":"badge_rui_9b21","loader":"loader_rui_9b21","close":"close_rui_9b21","animationOpen":"animationOpen_rui_9b21","show":"show_rui_9b21","animationClosing":"animationClosing_rui_9b21","animationShaking":"animationShaking_rui_9b21","shaking":"shaking_rui_9b21"};
+
+const ANIMATION_TIME = 500;
+/**
+ * @name Alert
+ */
+
+/**
+ * List of available alert types.
+ * @enum {string}
+ */
+
+const Type = {
+  ERROR: 'error',
+  MESSAGE: 'message',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  LOADING: 'loading'
+};
+/**
+ * Lookup table of alert type to icon modifier.
+ * @type {Object.<Type, string>}
+ */
+
+const TypeToIcon = {
+  [Type.ERROR]: exceptionIcon,
+  [Type.SUCCESS]: checkmarkIcon,
+  [Type.WARNING]: warningIcon
+};
+/**
+ * Lookup table of alert type to icon color.
+ * @type {Object.<Type, Icon.Color>}
+ */
+
+const TypeToIconColor = {
+  [Type.ERROR]: Icon.Color.RED,
+  [Type.SUCCESS]: Icon.Color.GREEN,
+  [Type.WARNING]: Icon.Color.WHITE
+};
+/**
+ * @constructor
+ * @name Alert
+ * @extends {ReactComponent}
+ */
+
+/**
+ * **Alert** is a component for displaying contextual notifications. If you want to display a stack of notifications, use **Alerts** instead.
+ */
+
+class Alert extends PureComponent {
+  constructor() {
+    var _this;
+
+    super(...arguments);
+    _this = this;
+
+    _defineProperty(this, "state", {
+      height: null
+    });
+
+    _defineProperty(this, "closeRequest", function () {
+      _this.startCloseAnimation();
+
+      return _this.props.onCloseRequest(...arguments);
+    });
+
+    _defineProperty(this, "startCloseAnimation", () => {
+      const height = getRect(this.node).height;
+      this.setState({
+        height
+      });
+    });
+
+    _defineProperty(this, "_handleCaptionsLinksClick", evt => {
+      if (evt.target.matches('a')) {
+        this.closeRequest(evt);
+      }
+    });
+
+    _defineProperty(this, "storeAlertRef", node => {
+      this.node = node;
+    });
+  }
+
+  componentDidMount() {
+    if (this.props.timeout > 0) {
+      this.hideTimeout = setTimeout(this.closeRequest, this.props.timeout);
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.props.isClosing) {
+      this._close();
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.hideTimeout);
+  }
+
+  _close() {
+    this.startCloseAnimation();
+    setTimeout(() => {
+      this.props.onClose();
+    }, ANIMATION_TIME);
+  }
+  /**
+   * @param {SyntheticEvent} evt
+   * @private
+   */
+
+
+  /**
+   * @private
+   */
+  _getCaption() {
+    return /*#__PURE__*/React.createElement("span", {
+      className: classNames(modules_e02b3280.caption, this.props.captionClassName, {
+        [modules_e02b3280.withCloseButton]: this.props.closeable
+      }),
+      onClick: this._handleCaptionsLinksClick // We only process clicks on `a` elements, see above
+      ,
+      role: "presentation"
+    }, this.props.children);
+  }
+  /**
+   * @private
+   * @return {XML|string}
+   */
+
+
+  _getIcon() {
+    const glyph = TypeToIcon[this.props.type];
+
+    if (glyph) {
+      return /*#__PURE__*/React.createElement(Icon, {
+        glyph: glyph,
+        className: modules_e02b3280.icon,
+        color: TypeToIconColor[this.props.type] || Icon.Color.DEFAULT
+      });
+    } else if (this.props.type === Type.LOADING) {
+      return /*#__PURE__*/React.createElement(LoaderInline, {
+        className: modules_e02b3280.loader,
+        theme: LoaderInline.Theme.DARK
+      });
+    }
+
+    return '';
+  }
+
+  render() {
+    const {
+      type,
+      inline,
+      isClosing,
+      isShaking,
+      closeButtonClassName,
+      showWithAnimation,
+      className,
+      'data-test': dataTest
+    } = this.props;
+    const classes = classNames(className, {
+      [modules_e02b3280.alert]: true,
+      [modules_e02b3280.animationOpen]: showWithAnimation,
+      [modules_e02b3280.error]: type === 'error',
+      [modules_e02b3280.alertInline]: inline,
+      [modules_e02b3280.animationClosing]: isClosing,
+      [modules_e02b3280.animationShaking]: isShaking
+    });
+    const style = this.state.height ? {
+      marginBottom: -this.state.height
+    } : null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes,
+      "data-test": joinDataTestAttributes('alert', dataTest),
+      "data-test-type": type,
+      style: style,
+      ref: this.storeAlertRef
+    }, this._getIcon(), this._getCaption(), this.props.closeable ? /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: classNames(modules_e02b3280.close, closeButtonClassName),
+      "data-test": "alert-close",
+      "aria-label": "close alert",
+      onClick: this.closeRequest
+    }, /*#__PURE__*/React.createElement(Icon, {
+      glyph: closeIcon
+    })) : '');
+  }
+
+}
+
+_defineProperty(Alert, "propTypes", {
+  timeout: PropTypes.number,
+
+  /**
+   * Fires when alert starts closing if timeout is out or user clicks "Close" button
+   */
+  onCloseRequest: PropTypes.func,
+  onClose: PropTypes.func,
+  isShaking: PropTypes.bool,
+  isClosing: PropTypes.bool,
+
+  /**
+   * Whether an alert is rendered inside an **Alerts** container
+   * or standalone.
+   */
+  inline: PropTypes.bool,
+  showWithAnimation: PropTypes.bool,
+  closeable: PropTypes.bool,
+  type: PropTypes.oneOf(Object.values(Type)),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  captionClassName: PropTypes.string,
+  closeButtonClassName: PropTypes.string,
+  'data-test': PropTypes.string
+});
+
+_defineProperty(Alert, "defaultProps", {
+  closeable: true,
+  showWithAnimation: true,
+  type: Type.MESSAGE,
+  inline: true,
+  isClosing: false,
+  isShaking: false,
+  timeout: 0,
+  onClose: () => {},
+  onCloseRequest: () => {}
+});
+
+_defineProperty(Alert, "Type", Type);
+
+export { ANIMATION_TIME, Alert as default };

package/dist/alert/container.js

@@ -0,0 +1,48 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent, Children, cloneElement } from 'react';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+var modules_fc8df42d = {"unit":"8px","alert":"alert_rui_9b21","alertContainer":"alertContainer_rui_3f27","alertInContainer":"alertInContainer_rui_3f27 alert_rui_9b21"};
+
+/**
+ * @name Alert Container
+ * @description Displays a stack of alerts on top of the page.
+ * @extends {PureComponent}
+ */
+
+class Alerts extends PureComponent {
+  render() {
+    const {
+      children,
+      className,
+      ...restProps
+    } = this.props;
+    const classes = classNames(modules_fc8df42d.alertContainer, className);
+    const show = Children.count(children) > 0;
+
+    if (!show) {
+      return null;
+    }
+
+    return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({
+      "data-test": "alert-container",
+      className: classes,
+      "aria-live": "polite"
+    }, restProps), Children.map(children, child => {
+      const alertClassNames = classNames(modules_fc8df42d.alertInContainer, child.props.className);
+      return /*#__PURE__*/cloneElement(child, {
+        className: alertClassNames
+      });
+    })), document.body);
+  }
+
+}
+
+_defineProperty(Alerts, "propTypes", {
+  children: PropTypes.node,
+  className: PropTypes.string
+});
+
+export { Alerts as default };