@pingux/astro 1.27.0-alpha.25 → 1.27.0-alpha.26

package/lib/cjs/components/MenuItem/MenuItem.js

@@ -0,0 +1,195 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _utils = require("@react-aria/utils");
+
+var _menu = require("@react-aria/menu");
+
+var _interactions = require("@react-aria/interactions");
+
+var _MenuContext = require("../../context/MenuContext");
+
+var _hooks = require("../../hooks");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _isIterable = require("../../utils/devUtils/props/isIterable");
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["isSeparator", "isPressed", "data-id"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * Menu Item component intended to be used within Menu or PopupMenu.
+ * This component is not intented to be used outside of Menu or independently.
+ * Utilizes [React Aria](https://react-spectrum.adobe.com/react-aria/useMenu.html)
+ */
+var MenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var item = props.item,
+      propIsDisabled = props.isDisabled,
+      isFocusVisible = props.isFocusVisible,
+      isNotFocusedOnHover = props.isNotFocusedOnHover,
+      className = props.className,
+      onAction = props.onAction,
+      state = props.state;
+
+  var _useMenuContext = (0, _MenuContext.useMenuContext)(),
+      onClose = _useMenuContext.onClose,
+      closeOnSelect = _useMenuContext.closeOnSelect;
+
+  var key = item.key,
+      rendered = item.rendered,
+      itemProps = item.props;
+  var isSeparator = itemProps.isSeparator,
+      propIsPressed = itemProps.isPressed,
+      dataId = itemProps['data-id'],
+      others = (0, _objectWithoutProperties2["default"])(itemProps, _excluded);
+  var isDisabled = propIsDisabled || state.disabledKeys.has(key);
+  var isSelected = state.selectionManager.isSelected(key);
+  var menuItemRef = (0, _react.useRef)();
+  (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
+  /* istanbul ignore next */
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return menuItemRef.current;
+  });
+
+  var _useMenuItem = (0, _menu.useMenuItem)({
+    key: item.key,
+    'aria-label': item['aria-label'],
+    isDisabled: isDisabled,
+    onAction: onAction,
+    isSelected: isSelected,
+    onClose: onClose,
+    closeOnSelect: closeOnSelect
+  }, state, menuItemRef),
+      menuItemProps = _useMenuItem.menuItemProps;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isFocused = _useState2[0],
+      setFocused = _useState2[1];
+
+  var _usePress = (0, _interactions.usePress)({
+    ref: menuItemRef,
+    isDisabled: isDisabled,
+    isPressed: propIsPressed
+  }),
+      pressProps = _usePress.pressProps,
+      isPressed = _usePress.isPressed;
+
+  var _useFocus = (0, _interactions.useFocus)({
+    onFocusChange: setFocused
+  }),
+      focusProps = _useFocus.focusProps;
+
+  var _useHover = (0, _interactions.useHover)({
+    isDisabled: isDisabled
+  }),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+    isFocused: isFocused || isHovered && !isFocusVisible,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    isPressed: isPressed
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  if (isNotFocusedOnHover) {
+    delete menuItemProps.onPointerEnter;
+    delete menuItemProps.onPointerLeave;
+  }
+
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    as: "li",
+    className: classNames,
+    ref: menuItemRef,
+    variant: isSeparator ? 'menuItem.separator' : 'menuItem.item',
+    "data-id": dataId
+  }, (0, _utils.mergeProps)(pressProps, hoverProps, focusProps, menuItemProps, others)), rendered);
+});
+MenuItem.displayName = 'MenuItem';
+MenuItem.propTypes = {
+  /** Whether the item is disabled. */
+  isDisabled: _propTypes["default"].bool,
+
+  /** Whether the menu item is selected. */
+  isSelected: _propTypes["default"].bool,
+
+  /** Whether the menu item is currently pressed. */
+  isPressed: _propTypes["default"].bool,
+
+  /**
+   * Whether the containing menu has keyboard focus.
+   * Used to determine when to present hover vs focus styling.
+   */
+  isFocusVisible: _propTypes["default"].bool,
+
+  /**
+   * Whether menu item should receive focus state on hover.
+   */
+  isNotFocusedOnHover: _propTypes["default"].bool,
+
+  /** A screen reader only label for the menu item. */
+  'aria-label': _propTypes["default"].string,
+
+  /** Handler that is called when the menu should close after selecting an item. */
+  onClose: _propTypes["default"].func,
+
+  /** Handler that is called when the user activates the item. */
+  onAction: _propTypes["default"].func,
+  item: _propTypes["default"].shape({
+    'aria-label': _propTypes["default"].string,
+    key: _propTypes["default"].string,
+    props: _propTypes["default"].shape({
+      'data-id': _propTypes["default"].string,
+      isSeparator: _propTypes["default"].bool,
+      isPressed: _propTypes["default"].bool
+    }),
+    rendered: _propTypes["default"].node,
+    isDisabled: _propTypes["default"].bool
+  }),
+  state: _propTypes["default"].shape({
+    disabledKeys: _isIterable.isIterableProp,
+    selectionManager: _propTypes["default"].shape({
+      isSelected: _propTypes["default"].func
+    })
+  })
+};
+MenuItem.defaultProps = {
+  isDisabled: false,
+  isPressed: false
+};
+var _default = MenuItem;
+exports["default"] = _default;

package/lib/cjs/components/MenuItem/MenuItem.test.js

@@ -0,0 +1,221 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var testId = 'testId';
+var defaultMenuItems = [{
+  key: 'MenuItem 1',
+  children: 'MenuItem 1',
+  'data-id': 'menuItem1'
+}, {
+  key: 'MenuItem 2',
+  children: 'MenuItem 2',
+  'data-id': 'menuItem2'
+}, {
+  key: 'MenuItem 3',
+  children: 'MenuItem 3',
+  'data-id': 'menuItem3'
+}];
+var defaultProps = {
+  'data-testid': testId,
+  defaultSelectedKey: defaultMenuItems[0].key,
+  'aria-label': 'testLabel'
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$items = _ref.items,
+      items = _ref$items === void 0 ? defaultMenuItems : _ref$items,
+      _ref$renderFn = _ref.renderFn,
+      renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
+
+  return renderFn((0, _react2.jsx)(_index.Menu, (0, _extends2["default"])({}, defaultProps, props), (0, _map["default"])(items).call(items, function (li) {
+    return (0, _react2.jsx)(_index.Item, (0, _extends2["default"])({
+      key: li.key
+    }, li, {
+      sx: {
+        backgroundColor: 'orange'
+      }
+    }));
+  })));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent);
+test('renders menu with menu items', function () {
+  getComponent();
+
+  var menu = _testWrapper.screen.getByRole('menu');
+
+  var menuItems = _testWrapper.screen.getAllByRole('menuitem');
+
+  expect(menu).toBeInTheDocument();
+  expect(menuItems).toHaveLength(menuItems.length);
+  (0, _forEach["default"])(menuItems).call(menuItems, function (item) {
+    return expect(item).toBeInTheDocument();
+  });
+});
+test('applies focus when tabbed to', function () {
+  getComponent();
+  var itemText = defaultMenuItems[0].children;
+
+  var menuItem = _testWrapper.screen.getByText(itemText);
+
+  expect(menuItem).not.toHaveFocus();
+  expect(menuItem).not.toHaveClass('is-focused');
+
+  _userEvent["default"].tab();
+
+  expect(menuItem).toHaveFocus();
+  expect(menuItem).toHaveClass('is-focused');
+});
+test('can arrow through menuItems', function () {
+  getComponent();
+  var itemText1 = defaultMenuItems[0].children;
+  var itemText2 = defaultMenuItems[1].children;
+
+  var menuItem1 = _testWrapper.screen.getByText(itemText1);
+
+  var menuItem2 = _testWrapper.screen.getByText(itemText2);
+
+  expect(menuItem1).not.toHaveFocus();
+  expect(menuItem1).not.toHaveClass('is-focused');
+
+  _userEvent["default"].tab();
+
+  expect(menuItem1).toHaveFocus();
+  expect(menuItem1).toHaveClass('is-focused');
+
+  _testWrapper.fireEvent.keyDown(menuItem1, {
+    key: 'ArrowDown',
+    code: 'ArrowDown'
+  });
+
+  expect(menuItem2).toHaveFocus();
+  expect(menuItem2).toHaveClass('is-focused');
+});
+test('hovering menuItems applies focus class and removes focus style on unhover with "isNotFocusedOnHover"', function () {
+  getComponent({
+    isNotFocusedOnHover: true
+  });
+  var itemText1 = defaultMenuItems[0].children;
+
+  var menuItem1 = _testWrapper.screen.getByText(itemText1);
+
+  expect(menuItem1).not.toHaveClass('is-focused');
+
+  _userEvent["default"].hover(menuItem1);
+
+  expect(menuItem1).toHaveClass('is-focused');
+
+  _userEvent["default"].unhover(menuItem1);
+
+  expect(menuItem1).not.toHaveClass('is-focused');
+});
+test('hovering menuItems applies focus class and leaves focus style on unhover', function () {
+  getComponent();
+  var itemText1 = defaultMenuItems[0].children;
+  var itemText2 = defaultMenuItems[1].children;
+
+  var menuItem1 = _testWrapper.screen.getByText(itemText1);
+
+  var menuItem2 = _testWrapper.screen.getByText(itemText2);
+
+  expect(menuItem1).not.toHaveClass('is-focused');
+  expect(menuItem2).not.toHaveClass('is-focused');
+
+  _userEvent["default"].hover(menuItem1);
+
+  expect(menuItem1).toHaveClass('is-focused');
+
+  _userEvent["default"].hover(menuItem2);
+
+  expect(menuItem2).toHaveClass('is-focused');
+
+  _userEvent["default"].unhover(menuItem2);
+
+  expect(menuItem2).toHaveClass('is-focused');
+});
+test('disables item with isDisabled applied, does not disable without prop', function () {
+  getComponent({
+    disabledKeys: [defaultMenuItems[0].key]
+  });
+  var disbaledItemText = defaultMenuItems[0].children;
+
+  var disabledMenuItem = _testWrapper.screen.getByText(disbaledItemText);
+
+  expect(disabledMenuItem).toHaveClass('is-disabled');
+  var menuItemText = defaultMenuItems[1].children;
+
+  var menuItem = _testWrapper.screen.getByText(menuItemText);
+
+  expect(menuItem).not.toHaveClass('is-disabled');
+});
+test('should change styles according to isPressed prop', function () {
+  var customItems = (0, _from["default"])(defaultMenuItems);
+  customItems[0].isPressed = true;
+  getComponent({}, {
+    items: customItems
+  });
+
+  var pressedItem = _testWrapper.screen.getAllByRole('menuitem')[0];
+
+  var regularItem = _testWrapper.screen.getAllByRole('menuitem')[1];
+
+  expect(pressedItem).toHaveClass('is-pressed');
+  expect(regularItem).not.toHaveClass('is-pressed');
+});
+test('applies selected styling with isSelected prop, does not add class without prop', function () {
+  getComponent({
+    selectionMode: 'single',
+    defaultSelectedKeys: [defaultMenuItems[0].key]
+  });
+  var selectedItemText = defaultMenuItems[0].children;
+
+  var selectedMenuItem = _testWrapper.screen.getByText(selectedItemText);
+
+  expect(selectedMenuItem).toHaveClass('is-selected');
+  var menuItemText = defaultMenuItems[1].children;
+
+  var menuItem = _testWrapper.screen.getByText(menuItemText);
+
+  expect(menuItem).not.toHaveClass('is-selected');
+});
+test('Item accepts a data-id and the data-id can be found in the DOM', function () {
+  getComponent();
+
+  var menuItems = _testWrapper.screen.queryAllByRole('menuitem');
+
+  expect(menuItems).toHaveLength(defaultMenuItems.length);
+  expect(menuItems[0]).toHaveAttribute('data-id', defaultMenuItems[0]['data-id']);
+});
+test('custom props are passed into menuItem', function () {
+  getComponent();
+  var itemText1 = defaultMenuItems[0].children;
+
+  var menuItem1 = _testWrapper.screen.getByText(itemText1);
+
+  expect(menuItem1).toHaveStyleRule('background-color', 'orange');
+});

package/lib/cjs/components/MenuItem/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _MenuItem["default"];
+  }
+});
+
+var _MenuItem = _interopRequireDefault(require("./MenuItem"));

package/lib/cjs/components/Messages/Message.js

@@ -0,0 +1,196 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.icons = exports["default"] = void 0;
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _liveAnnouncer = require("@react-aria/live-announcer");
+
+var _AlertCircleIcon = _interopRequireDefault(require("mdi-react/AlertCircleIcon"));
+
+var _CheckCircleIcon = _interopRequireDefault(require("mdi-react/CheckCircleIcon"));
+
+var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
+
+var _AlertIcon = _interopRequireDefault(require("mdi-react/AlertIcon"));
+
+var _InformationIcon = _interopRequireDefault(require("mdi-react/InformationIcon"));
+
+var _useStatusClasses4 = _interopRequireDefault(require("../../hooks/useStatusClasses"));
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["color"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var icons = {
+  "default": _InformationIcon["default"],
+  success: _CheckCircleIcon["default"],
+  error: _AlertCircleIcon["default"],
+  warning: _AlertIcon["default"]
+};
+exports.icons = icons;
+
+var CloseButton = function CloseButton(_ref) {
+  var color = _ref.color,
+      others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
+    "aria-label": "Close"
+  }, others), (0, _react2.jsx)(_Icon["default"], {
+    color: color,
+    icon: _CloseIcon["default"],
+    sx: {
+      path: {
+        fill: color
+      }
+    }
+  }));
+};
+
+CloseButton.propTypes = {
+  color: _propTypes["default"].string
+};
+var Message = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var className = props.className,
+      item = props.item,
+      onClose = props.onClose;
+  var key = item.key,
+      itemProps = item.props;
+  var children = itemProps.children,
+      _itemProps$status = itemProps.status,
+      status = _itemProps$status === void 0 ? 'default' : _itemProps$status,
+      bg = itemProps.bg,
+      color = itemProps.color,
+      _itemProps$icon = itemProps.icon,
+      icon = _itemProps$icon === void 0 ? icons[status] : _itemProps$icon,
+      _itemProps$isHidden = itemProps.isHidden,
+      isHidden = _itemProps$isHidden === void 0 ? false : _itemProps$isHidden,
+      dataId = itemProps['data-id'];
+
+  var _useStatusClasses = (0, _useStatusClasses4["default"])(className, (0, _defineProperty2["default"])({}, "is-".concat(status), true)),
+      statusClasses = _useStatusClasses.classNames;
+
+  var onCloseHandler = function onCloseHandler() {
+    if (onClose) {
+      onClose(key);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    (0, _liveAnnouncer.announce)(children, 'polite');
+  }, []);
+  var innerRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      innerHeight = _useState2[0],
+      setInnerHeight = _useState2[1];
+
+  (0, _react.useLayoutEffect)(function () {
+    setInnerHeight(innerRef.current.clientHeight);
+  }, [children]);
+
+  var _useStatusClasses3 = (0, _useStatusClasses4["default"])(className, {
+    isHidden: isHidden
+  }),
+      wrapperClasses = _useStatusClasses3.classNames;
+
+  return (0, _react2.jsx)(_Box["default"], {
+    variant: "messages.transition",
+    className: wrapperClasses,
+    sx: {
+      maxHeight: !isHidden ? innerHeight : 0
+    },
+    "data-id": dataId
+  }, (0, _react2.jsx)(_Box["default"], {
+    ref: innerRef
+  }, (0, _react2.jsx)(_Box["default"], {
+    ref: ref,
+    isRow: true,
+    variant: "messages.item",
+    className: statusClasses,
+    bg: bg
+  }, icon && (0, _react2.jsx)(_Icon["default"], {
+    icon: icon,
+    className: statusClasses,
+    color: color,
+    mr: "md"
+  }), (0, _react2.jsx)(_Text["default"], {
+    className: statusClasses,
+    color: color,
+    mr: "md"
+  }, children), (0, _react2.jsx)(CloseButton, {
+    onPress: onCloseHandler,
+    variant: "close",
+    className: statusClasses,
+    color: color
+  }))));
+});
+Message.propTypes = {
+  item: _propTypes["default"].shape({
+    key: _propTypes["default"].string,
+    props: _propTypes["default"].shape({
+      children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
+
+      /* status changes the background, text, and button color accordingly */
+      status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
+
+      /* Background color */
+      bg: _propTypes["default"].string,
+
+      /* Text color */
+      color: _propTypes["default"].string,
+
+      /* Message icon */
+      icon: _propTypes["default"].elementType,
+
+      /* Hides the message with an animated transition */
+      isHidden: _propTypes["default"].bool,
+      'data-id': _propTypes["default"].string
+    })
+  }),
+
+  /* Callback for clicking the message's close button */
+  onClose: _propTypes["default"].func
+};
+var _default = Message;
+exports["default"] = _default;