@cloudflare/component-notifications 4.1.7 → 5.0.0

package/es/Notification.js

@@ -5,7 +5,7 @@ import raf from 'raf';
 import { createComponent } from '@cloudflare/style-container';
 import { Icon } from '@cloudflare/component-icon';
 
-const getBorderColor = (type, theme) => {
+var getBorderColor = (type, theme) => {
   switch (type) {
     case 'success':
       return theme.colors.green[5];
@@ -22,7 +22,7 @@ const getBorderColor = (type, theme) => {
   }
 };
 
-const getBackgroundColor = (type, theme) => {
+var getBackgroundColor = (type, theme) => {
   switch (type) {
     case 'success':
       return theme.colors.green[isDarkMode() ? 3 : 6];
@@ -39,99 +39,109 @@ const getBackgroundColor = (type, theme) => {
   }
 };
 
-const NotificationMessage = createComponent(({
-  theme
-}) => ({
-  position: 'relative',
-  zIndex: 2,
-  color: theme.colors.white,
-  display: 'flex',
-  alignItems: 'center'
-}), 'span');
-const NotificationClose = createComponent(({
-  theme,
-  type
-}) => ({
-  position: 'absolute',
-  zIndex: 3,
-  top: 0,
-  right: 0,
-  bottom: 0,
-  width: '2.5em',
-  cursor: 'pointer',
-  '&:hover': {
-    backgroundColor: getBorderColor(type, theme)
-  },
-  '&::before': {
+var NotificationMessage = createComponent(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
+    position: 'relative',
+    zIndex: 2,
+    color: theme.colors.white,
+    display: 'flex',
+    alignItems: 'center'
+  };
+}, 'span');
+var NotificationClose = createComponent(_ref2 => {
+  var {
+    theme,
+    type
+  } = _ref2;
+  return {
     position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)'
-  }
-}), 'span');
-const NotificationContainer = createComponent(({
-  theme,
-  type
-}) => ({
-  position: 'relative',
-  padding: theme.space[2],
-  verticalAlign: 'middle',
-  '-webkit-text-stroke': '0',
-  '-webkit-font-smoothing': 'antialiased',
-  cursor: 'pointer',
-  transformOrigin: 'bottom left',
-  borderTopColor: getBorderColor(type, theme),
-  borderBottomColor: getBorderColor(type, theme),
-  borderLeftColor: getBorderColor(type, theme),
-  borderRightColor: getBorderColor(type, theme),
-  borderTopWidth: 1,
-  borderRightWidth: 1,
-  borderBottomWidth: 0,
-  borderLeftWidth: 1,
-  borderStyle: 'solid',
-  backgroundColor: getBackgroundColor(type, theme),
-  animationName: {
-    '0%': {
-      transform: 'scaleY(0)'
+    zIndex: 3,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: '2.5em',
+    cursor: 'pointer',
+    '&:hover': {
+      backgroundColor: getBorderColor(type, theme)
     },
-    '100%': {
-      transform: 'scaleY(1)'
+    '&::before': {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
     }
-  },
-  animationDuration: '200ms',
-  animationTimingFunction: 'ease-in-out',
-  '&::before': {
-    position: 'absolute',
-    top: '50%',
-    left: '0.75rem',
-    transform: 'translate(0, -50%)',
-    lineHeight: '1',
-    verticalAlign: 'middle'
-  },
-  '&:first-child': {
-    borderTopWidth: 1
-  }
-}), 'div');
-const IconWrapper = createComponent(() => ({
+  };
+}, 'span');
+var NotificationContainer = createComponent(_ref3 => {
+  var {
+    theme,
+    type
+  } = _ref3;
+  return {
+    position: 'relative',
+    padding: theme.space[2],
+    verticalAlign: 'middle',
+    '-webkit-text-stroke': '0',
+    '-webkit-font-smoothing': 'antialiased',
+    cursor: 'pointer',
+    transformOrigin: 'bottom left',
+    borderTopColor: getBorderColor(type, theme),
+    borderBottomColor: getBorderColor(type, theme),
+    borderLeftColor: getBorderColor(type, theme),
+    borderRightColor: getBorderColor(type, theme),
+    borderTopWidth: 1,
+    borderRightWidth: 1,
+    borderBottomWidth: 0,
+    borderLeftWidth: 1,
+    borderStyle: 'solid',
+    backgroundColor: getBackgroundColor(type, theme),
+    animationName: {
+      '0%': {
+        transform: 'scaleY(0)'
+      },
+      '100%': {
+        transform: 'scaleY(1)'
+      }
+    },
+    animationDuration: '200ms',
+    animationTimingFunction: 'ease-in-out',
+    '&::before': {
+      position: 'absolute',
+      top: '50%',
+      left: '0.75rem',
+      transform: 'translate(0, -50%)',
+      lineHeight: '1',
+      verticalAlign: 'middle'
+    },
+    '&:first-child': {
+      borderTopWidth: 1
+    }
+  };
+}, 'div');
+var IconWrapper = createComponent(() => ({
   paddingRight: 6,
   display: 'flex'
 }));
-const NotificationWrapper = createComponent(() => ({
+var NotificationWrapper = createComponent(() => ({
   display: 'flex'
 }));
-const CloseWrapper = createComponent(() => ({
+var CloseWrapper = createComponent(() => ({
   position: 'absolute',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%,-50%)'
 }));
-const NotificationItem = createComponent(() => ({}), ({
-  children,
-  closable,
-  handleClickClose,
-  type
-}) => {
-  let iconType;
+var NotificationItem = createComponent(() => ({}), _ref4 => {
+  var {
+    children,
+    closable,
+    handleClickClose,
+    type
+  } = _ref4;
+  var iconType;
 
   switch (type) {
     case 'success':
@@ -209,7 +219,7 @@ class Notification extends React.Component {
     }
 
     this.stopTimeout();
-    const timeoutId = setTimeout(() => this.props.onClose(), this.props.delay);
+    var timeoutId = setTimeout(() => this.props.onClose(), this.props.delay);
     this.setState({
       timeoutId
     });

package/es/NotificationGlobalContainer.js

@@ -2,25 +2,31 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { createComponent } from '@cloudflare/style-container';
 
-const styles = ({
-  theme
-}) => ({
-  position: 'fixed',
-  bottom: 0,
-  left: 0,
-  right: 0,
-  maxHeight: '25%',
-  overflow: 'auto',
-  zIndex: 1600,
-  fontSize: theme.fontSizes[3]
-});
+var styles = _ref => {
+  var {
+    theme
+  } = _ref;
+  return {
+    position: 'fixed',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    maxHeight: '25%',
+    overflow: 'auto',
+    zIndex: 1600,
+    fontSize: theme.fontSizes[3]
+  };
+};
 
-const NotificationGlobalContainer = ({
-  className,
-  children
-}) => /*#__PURE__*/React.createElement("div", {
-  className: className
-}, children);
+var NotificationGlobalContainer = _ref2 => {
+  var {
+    className,
+    children
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, children);
+};
 
 NotificationGlobalContainer.propTypes = {
   children: PropTypes.node,

package/es/NotificationList.js

@@ -2,17 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { createComponent } from '@cloudflare/style-container';
 
-const styles = () => ({
+var styles = () => ({
   marginTop: 0,
   marginBottom: 0
 });
 
-const NotificationList = ({
-  className,
-  children
-}) => /*#__PURE__*/React.createElement("div", {
-  className: className
-}, children);
+var NotificationList = _ref => {
+  var {
+    className,
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, children);
+};
 
 NotificationList.propTypes = {
   children: PropTypes.node,

package/lib/Notification.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -25,17 +25,21 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 var getBorderColor = function getBorderColor(type, theme) {
   switch (type) {
@@ -223,12 +227,14 @@ NotificationItem.propTypes = {
 var Notification = /*#__PURE__*/function (_React$Component) {
   _inherits(Notification, _React$Component);
 
+  var _super = _createSuper(Notification);
+
   function Notification(props) {
     var _this;
 
     _classCallCheck(this, Notification);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Notification).call(this, props));
+    _this = _super.call(this, props);
     _this.state = {
       persist: _this.props.persist,
       timeoutId: null

package/lib/index.js

@@ -9,16 +9,16 @@ Object.defineProperty(exports, "Notification", {
     return _Notification.default;
   }
 });
-Object.defineProperty(exports, "NotificationList", {
+Object.defineProperty(exports, "NotificationGlobalContainer", {
   enumerable: true,
   get: function get() {
-    return _NotificationList.default;
+    return _NotificationGlobalContainer.default;
   }
 });
-Object.defineProperty(exports, "NotificationGlobalContainer", {
+Object.defineProperty(exports, "NotificationList", {
   enumerable: true,
   get: function get() {
-    return _NotificationGlobalContainer.default;
+    return _NotificationList.default;
   }
 });
 

package/package.json

@@ -1,23 +1,24 @@
 {
   "name": "@cloudflare/component-notifications",
   "description": "Cloudflare Notifications Component",
-  "version": "4.1.7",
+  "version": "5.0.0",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",
   "license": "BSD-3-Clause",
   "publishConfig": {
-    "registry": "https://registry.npmjs.org/",
-    "access": "public"
+    "access": "public",
+    "main": "lib/index.js",
+    "module": "es/index.js"
   },
   "dependencies": {
-    "@cloudflare/component-icon": "^7.2.23",
+    "@cloudflare/component-icon": "^8.0.0",
     "prop-types": "^15.6.0",
     "raf": "^3.3.2"
   },
   "peerDependencies": {
     "@cloudflare/style-const": "^5.3.9",
-    "@cloudflare/style-container": "^7.8.41",
+    "@cloudflare/style-container": "^7.9.0",
     "react": "^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0"
   },
   "stratus": {
@@ -30,6 +31,5 @@
     "test": "stratus test",
     "test-coverage": "stratus test --coverage --muteErrorsFixWeNeedToSolveThis",
     "test-watch": "stratus test --watch"
-  },
-  "gitHead": "d8669b68225ffc54a1ee93e83580a2e6a57fba6b"
-}
+  }
+}