react-redux-toastr - npm Package Compare versions

Comparing version 7.5.1 to 7.5.2

CHANGELOG.md

@@ -0,1 +1,4 @@
+# v7.5.2
+[#245] Fix W3C validation errors
+
 # v7.4.10
@@ -2,0 +5,0 @@ Allow latest react-redux as peer dependency

lib/actions.js

@@ -17,6 +17,6 @@ "use strict";
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function add(toastr) {
-  if (_config.default.preventDuplicates && (0, _utils.preventDuplication)(_reducer.toastrsCache, toastr)) {
+  if (_config["default"].preventDuplicates && (0, _utils.preventDuplication)(_reducer.toastrsCache, toastr)) {
     return {
@@ -23,0 +23,0 @@ type: _constants.ADD_TOASTR,

lib/Button.js

@@ -6,10 +6,10 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var Button = function Button(props) {
-  return _react.default.createElement("button", {
+  return _react["default"].createElement("button", {
     type: "button",
@@ -26,2 +26,2 @@ onClick: function onClick() {
 var _default = Button;
-exports.default = _default;
+exports["default"] = _default;

lib/config.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var toastr = {
@@ -15,2 +15,2 @@ maxAnimationDelay: 6000,
 var _default = toastr;
-exports.default = _default;
+exports["default"] = _default;

lib/constants.js

@@ -21,5 +21,5 @@ "use strict";
 var TRANSITIONS = {
-  in: ['bounceIn', 'bounceInDown', 'fadeIn'],
+  "in": ['bounceIn', 'bounceInDown', 'fadeIn'],
   out: ['bounceOut', 'bounceOutUp', 'fadeOut']
 };
 exports.TRANSITIONS = TRANSITIONS;

lib/Icon.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -15,3 +15,3 @@ var _react = _interopRequireDefault(require("react"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -57,4 +57,4 @@ function _typeof(obj) { 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); }
       };
-      return _react.default.createElement("svg", {
-        className: (0, _classnames.default)(this.props.className, 'toastr-icon'),
+      return _react["default"].createElement("svg", {
+        className: (0, _classnames["default"])(this.props.className, 'toastr-icon'),
         xmlns: "http://www.w3.org/2000/svg",
@@ -64,3 +64,3 @@ preserveAspectRatio: "xMidYMid meet",
         style: styles
-      }, (0, _icons.default)(this.props.name));
+      }, (0, _icons["default"])(this.props.name));
     }
@@ -70,5 +70,5 @@ }]);
   return Icon;
-}(_react.default.Component);
+}(_react["default"].Component);
 
-exports.default = Icon;
+exports["default"] = Icon;
 
@@ -75,0 +75,0 @@ _defineProperty(Icon, "displayName", 'ReduxToastrIcon');

lib/icons.js

@@ -6,7 +6,7 @@ "use strict";
 });
-exports.default = _default;
+exports["default"] = _default;
 
 var _react = _interopRequireDefault(require("react"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -16,3 +16,3 @@ function _default(name) {
     case 'success':
-      return _react.default.createElement("g", null, _react.default.createElement("path", {
+      return _react["default"].createElement("g", null, _react["default"].createElement("path", {
         d: "M27 4l-15 15-7-7-5 5 12 12 20-20z"
@@ -22,7 +22,7 @@ }));
     case 'info':
-      return _react.default.createElement("g", null, _react.default.createElement("path", {
+      return _react["default"].createElement("g", null, _react["default"].createElement("path", {
         d: "M14 9.5c0-0.825 0.675-1.5 1.5-1.5h1c0.825 0 1.5 0.675 1.5 1.5v1c0 0.825-0.675 1.5-1.5 1.5h-1c-0.825 0-1.5-0.675-1.5-1.5v-1z"
-      }), _react.default.createElement("path", {
+      }), _react["default"].createElement("path", {
         d: "M20 24h-8v-2h2v-6h-2v-2h6v8h2z"
-      }), _react.default.createElement("path", {
+      }), _react["default"].createElement("path", {
         d: "M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13z"
@@ -32,7 +32,7 @@ }));
     case 'warning':
-      return _react.default.createElement("g", null, _react.default.createElement("path", {
+      return _react["default"].createElement("g", null, _react["default"].createElement("path", {
         d: "M16 2.899l13.409 26.726h-26.819l13.409-26.726zM16 0c-0.69 0-1.379 0.465-1.903 1.395l-13.659 27.222c-1.046 1.86-0.156 3.383 1.978 3.383h27.166c2.134 0 3.025-1.522 1.978-3.383h0l-13.659-27.222c-0.523-0.93-1.213-1.395-1.903-1.395v0z"
-      }), _react.default.createElement("path", {
+      }), _react["default"].createElement("path", {
         d: "M18 26c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"
-      }), _react.default.createElement("path", {
+      }), _react["default"].createElement("path", {
         d: "M16 22c-1.105 0-2-0.895-2-2v-6c0-1.105 0.895-2 2-2s2 0.895 2 2v6c0 1.105-0.895 2-2 2z"
@@ -42,3 +42,3 @@ }));
     case 'error':
-      return _react.default.createElement("g", null, _react.default.createElement("path", {
+      return _react["default"].createElement("g", null, _react["default"].createElement("path", {
         d: "M12,0C5.373,0,0,5.373,0,12s5.373,12,12,12s12-5.373,12-12S18.627,0,12,0z M12,19.66 c-0.938,0-1.58-0.723-1.58-1.66c0-0.964,0.669-1.66,1.58-1.66c0.963,0,1.58,0.696,1.58,1.66C13.58,18.938,12.963,19.66,12,19.66z M12.622,13.321c-0.239,0.815-0.992,0.829-1.243,0c-0.289-0.956-1.316-4.585-1.316-6.942c0-3.11,3.891-3.125,3.891,0 C13.953,8.75,12.871,12.473,12.622,13.321z"
@@ -45,0 +45,0 @@ }));

lib/index.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.toastr = exports.reducer = exports.actions = exports.default = void 0;
+exports.toastr = exports.reducer = exports.actions = exports["default"] = void 0;
 
@@ -17,13 +17,15 @@ var _ReduxToastr = _interopRequireDefault(require("./ReduxToastr"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _default = _ReduxToastr.default;
-exports.default = _default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = _ReduxToastr["default"];
+exports["default"] = _default;
 var actions = ReduxToastrActions;
 exports.actions = actions;
-var reducer = _reducer.default;
+var reducer = _reducer["default"];
 exports.reducer = reducer;
 var toastr = _toastrEmitter.toastrEmitter;
 exports.toastr = toastr;

lib/ProgressBar.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -13,3 +13,3 @@ var _react = _interopRequireDefault(require("react"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -86,5 +86,5 @@ function _typeof(obj) { 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); }
       var percent = this.state.percent;
-      return _react.default.createElement("div", {
+      return _react["default"].createElement("div", {
         className: "rrt-progress-container"
-      }, _react.default.createElement("div", {
+      }, _react["default"].createElement("div", {
         className: "rrt-progressbar",
@@ -99,5 +99,5 @@ style: {
   return ProgressBar;
-}(_react.default.Component);
+}(_react["default"].Component);
 
-exports.default = ProgressBar;
+exports["default"] = ProgressBar;
 
@@ -107,3 +107,3 @@ _defineProperty(ProgressBar, "displayName", 'ProgressBar');
 _defineProperty(ProgressBar, "propTypes", {
-  duration: _propTypes.default.number.isRequired
+  duration: _propTypes["default"].number.isRequired
 });

lib/reducer.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = exports.toastrsCache = void 0;
+exports["default"] = exports.toastrsCache = void 0;
 
@@ -17,3 +17,3 @@ var _utils = require("./utils.js");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -28,4 +28,6 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -49,8 +51,12 @@
     id: (0, _utils.guid)(),
-    position: _config.default.position
+    position: _config["default"].position
   }, toastr);
 
+  if (!newToastr.a11yId && toastr && toastr.hasOwnProperty('id') && !toastr.hasOwnProperty('a11yId')) {
+    newToastr.a11yId = toastr.id;
+  }
+
   var newState = {};
 
-  if (!_config.default.newestOnTop) {
+  if (!_config["default"].newestOnTop) {
     newState = _objectSpread({}, state, {
@@ -108,2 +114,2 @@ toastrs: [].concat(_toConsumableArray(state.toastrs), [newToastr])
 
-exports.default = _default;
+exports["default"] = _default;

lib/ReduxToastr.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = exports.ReduxToastr = void 0;
+exports["default"] = exports.ReduxToastr = void 0;
 
@@ -29,6 +29,8 @@ var _react = _interopRequireDefault(require("react"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 function _typeof(obj) { 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); }
@@ -38,4 +40,6 @@
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -139,5 +143,5 @@
 
-          return _react.default.createElement("span", {
+          return _react["default"].createElement("div", {
             key: item.id
-          }, _react.default.createElement(_ToastrBox.default, _extends({
+          }, _react["default"].createElement(_ToastrBox["default"], _extends({
             inMemory: _this2.toastrFired,
@@ -148,3 +152,3 @@ addToMemory: function addToMemory() {
             item: mergedItem
-          }, _this2.props)), item.options && item.options.attention && _react.default.createElement("div", {
+          }, _this2.props)), item.options && item.options.attention && _react["default"].createElement("div", {
             onClick: function onClick() {
@@ -172,4 +176,4 @@ if (typeof item.options.onAttentionClick === 'function') {
       } : {};
-      return _react.default.createElement("span", null, this.toastrPositions.map(function (position) {
-        return _react.default.createElement("div", {
+      return _react["default"].createElement("div", null, this.toastrPositions.map(function (position) {
+        return _react["default"].createElement("div", {
           key: position,
@@ -187,6 +191,6 @@ className: position,
           toastr = _this$props2.toastr;
-      return _react.default.createElement("span", {
-        className: (0, _classnames.default)('redux-toastr', className),
+      return _react["default"].createElement("div", {
+        className: (0, _classnames["default"])('redux-toastr', className),
         "aria-live": "assertive"
-      }, toastr.confirm && _react.default.createElement(_ToastrConfirm.default, _extends({
+      }, toastr.confirm && _react["default"].createElement(_ToastrConfirm["default"], _extends({
         confirm: toastr.confirm
@@ -198,3 +202,3 @@ }, this.props)), this._renderToastrs());
   return ReduxToastr;
-}(_react.default.Component);
+}(_react["default"].Component);
 
@@ -206,12 +210,12 @@ exports.ReduxToastr = ReduxToastr;
 _defineProperty(ReduxToastr, "propTypes", {
-  toastr: _propTypes.default.object,
-  position: _propTypes.default.string,
-  newestOnTop: _propTypes.default.bool,
-  timeOut: _propTypes.default.number,
-  confirmOptions: _propTypes.default.object,
-  progressBar: _propTypes.default.bool,
-  transitionIn: _propTypes.default.oneOf(_constants.TRANSITIONS.in),
-  transitionOut: _propTypes.default.oneOf(_constants.TRANSITIONS.out),
-  preventDuplicates: _propTypes.default.bool,
-  closeOnToastrClick: _propTypes.default.bool
+  toastr: _propTypes["default"].object,
+  position: _propTypes["default"].string,
+  newestOnTop: _propTypes["default"].bool,
+  timeOut: _propTypes["default"].number,
+  confirmOptions: _propTypes["default"].object,
+  progressBar: _propTypes["default"].bool,
+  transitionIn: _propTypes["default"].oneOf(_constants.TRANSITIONS["in"]),
+  transitionOut: _propTypes["default"].oneOf(_constants.TRANSITIONS.out),
+  preventDuplicates: _propTypes["default"].bool,
+  closeOnToastrClick: _propTypes["default"].bool
 });
@@ -224,3 +228,3 @@
   progressBar: false,
-  transitionIn: _constants.TRANSITIONS.in[0],
+  transitionIn: _constants.TRANSITIONS["in"][0],
   transitionOut: _constants.TRANSITIONS.out[0],
@@ -241,2 +245,2 @@ preventDuplicates: false,
 
-exports.default = _default;
+exports["default"] = _default;

lib/ToastrBox.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -21,6 +21,8 @@ var _react = _interopRequireWildcard(require("react"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+
 function _typeof(obj) { 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); }
@@ -149,3 +151,3 @@
 
-    _this.id = Math.floor(Math.random() * 9999);
+    _this.id = props.item.a11yId || Math.floor(Math.random() * 9999);
     _this.state = {
@@ -223,3 +225,3 @@ progressBar: null
       if ((0, _react.isValidElement)(options.component)) {
-        return _react.default.cloneElement(options.component, {
+        return _react["default"].cloneElement(options.component, {
           remove: removeCurrentToastrFunc
@@ -229,3 +231,3 @@ });
 
-      return _react.default.createElement(options.component, {
+      return _react["default"].createElement(options.component, {
         remove: removeCurrentToastrFunc
@@ -242,7 +244,7 @@ });
       if ((0, _react.isValidElement)(options.icon)) {
-        return _react.default.cloneElement(options.icon);
+        return _react["default"].cloneElement(options.icon);
       }
 
       var iconName = type === 'light' ? options.icon : type;
-      return _react.default.createElement(_Icon.default, {
+      return _react["default"].createElement(_Icon["default"], {
         name: iconName
@@ -256,5 +258,13 @@ });
 
-      return _react.default.createElement("button", {
-        tabIndex: "0",
-        type: "button",
+      var closeButtonAttributes = {
+        tabIndex: 0,
+        role: 'button',
+        onKeyPress: this.handlePressEnterOrSpaceKeyCloseButton
+      };
+
+      if (this.isToastrClickable) {
+        closeButtonAttributes = {};
+      }
+
+      return _react["default"].createElement("div", _extends({
         className: "close-toastr toastr-control",
@@ -266,3 +276,3 @@ "aria-label": "toast",
         }
-      }, "\u2715");
+      }, closeButtonAttributes), _react["default"].createElement("span", null, "\u2715"));
     }
@@ -277,22 +287,30 @@ }, {
           title = _this$props$item3.title;
-      return _react.default.createElement("div", null, _react.default.createElement("div", {
+      var ariaAttributes = {};
+
+      if (title) {
+        ariaAttributes['aria-labelledby'] = "dialogTitle-".concat(this.id);
+      }
+
+      if (message) {
+        ariaAttributes['aria-describedby'] = "dialogDesc-".concat(this.id);
+      }
+
+      return _react["default"].createElement("div", null, _react["default"].createElement("div", {
         className: "rrt-left-container"
-      }, _react.default.createElement("div", {
+      }, _react["default"].createElement("div", {
         className: "rrt-holder"
-      }, this.renderIcon())), options.status && type === 'light' && _react.default.createElement("div", {
-        className: (0, _classnames.default)('toastr-status', options.status)
-      }), _react.default.createElement("div", {
+      }, this.renderIcon())), options.status && type === 'light' && _react["default"].createElement("div", {
+        className: (0, _classnames["default"])('toastr-status', options.status)
+      }), _react["default"].createElement("div", _extends({
         className: "rrt-middle-container",
-        role: "alertdialog",
-        "aria-labelledby": "dialogTitle-".concat(this.id),
-        "aria-describedby": "dialogDesc-".concat(this.id)
-      }, title && _react.default.createElement("div", {
+        role: "alertdialog"
+      }, ariaAttributes), title && _react["default"].createElement("div", {
         id: "dialogTitle-".concat(this.id),
         className: "rrt-title"
-      }, title), message && _react.default.createElement("div", {
+      }, title), message && _react["default"].createElement("div", {
         id: "dialogDesc-".concat(this.id),
         className: "rrt-text"
-      }, message), options.component && this.renderSubComponent()), _react.default.createElement("div", {
+      }, message), options.component && this.renderSubComponent()), _react["default"].createElement("div", {
         className: "rrt-right-container"
-      }, options.showCloseButton && this.renderCloseButton()), this.state.progressBar ? _react.default.createElement(_ProgressBar.default, this.state.progressBar) : null);
+      }, options.showCloseButton && this.renderCloseButton()), this.state.progressBar ? _react["default"].createElement(_ProgressBar["default"], this.state.progressBar) : null);
     }
@@ -306,5 +324,5 @@ }, {
           options = _this$props$item4.options;
-      return _react.default.createElement("div", null, _react.default.createElement("div", {
+      return _react["default"].createElement("div", null, _react["default"].createElement("div", {
         className: "rrt-title"
-      }, title, this.renderCloseButton()), _react.default.createElement("div", {
+      }, title, this.renderCloseButton()), _react["default"].createElement("div", {
         className: "rrt-text"
@@ -415,9 +433,5 @@ }, message, options.component && this.renderSubComponent()));
           type = _this$props$item5.type;
-      var onToastrClick = options.onToastrClick,
-          closeOnToastrClick = options.closeOnToastrClick;
-      var hasOnToastrClick = !!onToastrClick;
-      var doesCloseOnToastrClick = closeOnToastrClick;
       var toastrClickAttributes = {};
 
-      if (hasOnToastrClick || doesCloseOnToastrClick) {
+      if (this.isToastrClickable) {
         toastrClickAttributes.role = 'button';
@@ -429,7 +443,7 @@ toastrClickAttributes.tabIndex = 0;
 
-      return _react.default.createElement("div", _extends({
+      return _react["default"].createElement("div", _extends({
         ref: function ref(_ref2) {
           return _this5.toastrBoxElement = _ref2;
         },
-        className: (0, _classnames.default)('toastr', 'animated', 'rrt-' + type, options.className),
+        className: (0, _classnames["default"])('toastr', 'animated', 'rrt-' + type, options.className),
         onMouseEnter: this.mouseEnter,
@@ -439,8 +453,17 @@ onMouseLeave: this.mouseLeave
     }
+  }, {
+    key: "isToastrClickable",
+    get: function get() {
+      var _this$props$item$opti3 = this.props.item.options,
+          onToastrClick = _this$props$item$opti3.onToastrClick,
+          closeOnToastrClick = _this$props$item$opti3.closeOnToastrClick;
+      var hasOnToastrClick = !!onToastrClick;
+      return hasOnToastrClick || closeOnToastrClick;
+    }
   }]);
 
   return ToastrBox;
-}(_react.default.Component);
+}(_react["default"].Component);
 
-exports.default = ToastrBox;
+exports["default"] = ToastrBox;
 
@@ -450,8 +473,8 @@ _defineProperty(ToastrBox, "displayName", 'ToastrBox');
 _defineProperty(ToastrBox, "propTypes", {
-  item: _propTypes.default.shape({
-    options: _propTypes.default.shape({
-      transitionIn: _propTypes.default.string,
-      transitionOut: _propTypes.default.string
+  item: _propTypes["default"].shape({
+    options: _propTypes["default"].shape({
+      transitionIn: _propTypes["default"].string,
+      transitionOut: _propTypes["default"].string
     })
   })
 });

lib/ToastrConfirm.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -17,3 +17,3 @@ var _react = _interopRequireDefault(require("react"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -245,3 +245,3 @@ function _typeof(obj) { 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); }
       options.id && (wrapperProps.id = options.id);
-      return _react.default.createElement("div", _extends({
+      return _react["default"].createElement("div", _extends({
         className: "rrt-confirm-holder",
@@ -255,3 +255,3 @@ tabIndex: "-1",
         role: "alert"
-      }, wrapperProps), _react.default.createElement("div", {
+      }, wrapperProps), _react["default"].createElement("div", {
         className: "rrt-confirm animated",
@@ -263,8 +263,8 @@ ref: function ref(_ref) {
         "aria-describedby": "dialogDesc-".concat(this.id)
-      }, message && _react.default.createElement("div", {
+      }, message && _react["default"].createElement("div", {
         className: "rrt-message",
         id: "dialogDesc-".concat(this.id)
-      }, message), options.component && _react.default.createElement(options.component, null), _react.default.createElement("div", {
+      }, message), options.component && _react["default"].createElement(options.component, null), _react["default"].createElement("div", {
         className: "rrt-buttons-holder"
-      }, !this.containsOkButton(options.buttons) && _react.default.createElement(_Button.default, {
+      }, !this.containsOkButton(options.buttons) && _react["default"].createElement(_Button["default"], {
         tabIndex: "0",
@@ -278,3 +278,3 @@ innerRef: function innerRef(ref) {
         }
-      }, this.okText), !this.disableCancel && !this.containsCancelButton(options.buttons) && _react.default.createElement(_Button.default, {
+      }, this.okText), !this.disableCancel && !this.containsCancelButton(options.buttons) && _react["default"].createElement(_Button["default"], {
         tabIndex: "0",
@@ -297,3 +297,3 @@ innerRef: function innerRef(ref) {
 
-        return _react.default.createElement(_Button.default, {
+        return _react["default"].createElement(_Button["default"], {
           tabIndex: "0",
@@ -304,3 +304,3 @@ className: className,
         }, text);
-      }))), _react.default.createElement("div", {
+      }))), _react["default"].createElement("div", {
         className: "shadow"
@@ -312,5 +312,5 @@ }));
   return ToastrConfirm;
-}(_react.default.Component);
+}(_react["default"].Component);
 
-exports.default = ToastrConfirm;
+exports["default"] = ToastrConfirm;
 
@@ -320,8 +320,8 @@ _defineProperty(ToastrConfirm, "displayName", 'ToastrConfirm');
 _defineProperty(ToastrConfirm, "propTypes", {
-  confirm: _propTypes.default.shape({
-    options: _propTypes.default.shape({
-      transitionIn: _propTypes.default.string,
-      transitionOut: _propTypes.default.string
+  confirm: _propTypes["default"].shape({
+    options: _propTypes["default"].shape({
+      transitionIn: _propTypes["default"].string,
+      transitionOut: _propTypes["default"].string
     })
   })
 });

lib/toastrEmitter.js

@@ -12,5 +12,5 @@ "use strict";
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var emitter = new _eventemitter.default();
+var emitter = new _eventemitter["default"]();
 
@@ -17,0 +17,0 @@ var addToToastr = function addToToastr(type, array) {

lib/utils.js

@@ -19,3 +19,3 @@ "use strict";
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -98,3 +98,3 @@ function _typeof(obj) { 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); }
   obj.type = type;
-  obj.position = _config.default.position;
+  obj.position = _config["default"].position;
   obj.options = array.filter(function (item) {
@@ -155,3 +155,3 @@ return _typeof(item) == 'object';
     node.dispatchEvent(e);
-  }, _config.default.maxAnimationDelay);
+  }, _config["default"].maxAnimationDelay);
 
@@ -184,5 +184,5 @@ var runOnce = function runOnce(e) {
 function updateConfig(obj) {
-  Object.keys(_config.default).forEach(function (key) {
+  Object.keys(_config["default"]).forEach(function (key) {
     if (obj.hasOwnProperty(key)) {
-      _config.default[key] = obj[key];
+      _config["default"][key] = obj[key];
     }
@@ -189,0 +189,0 @@ });

package.json

 {
   "name": "react-redux-toastr",
-  "version": "7.5.1",
+  "version": "7.5.2",
   "description": "react-redux-toastr is a React toastr message implemented with Redux",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/reducer.js

@@ -33,2 +33,6 @@ import {createReducer, guid}  from './utils.js';
 
+    if (!newToastr.a11yId && toastr && toastr.hasOwnProperty('id') && !toastr.hasOwnProperty('a11yId')) {
+      newToastr.a11yId = toastr.id;
+    }
+
     let newState = {};
@@ -35,0 +39,0 @@ if (!config.newestOnTop) {

src/ReduxToastr.js

@@ -100,3 +100,3 @@ import React from 'react';
           return (
-            <span key={item.id}>
+            <div key={item.id}>
               <ToastrBox
@@ -119,3 +119,3 @@ inMemory={this.toastrFired}
               }
-            </span>
+            </div>
           );
@@ -131,3 +131,3 @@ });
     return (
-      <span>
+      <div>
         {this.toastrPositions.map(position => {
@@ -140,3 +140,3 @@ return (
         })}
-      </span>
+      </div>
     );
@@ -148,3 +148,3 @@ }
     return (
-      <span className={cn('redux-toastr', className)} aria-live="assertive">
+      <div className={cn('redux-toastr', className)} aria-live="assertive">
         {toastr.confirm &&
@@ -157,3 +157,3 @@ <ToastrConfirm
         {this._renderToastrs()}
-      </span>
+      </div>
     );
@@ -160,0 +160,0 @@ }

src/ToastrBox.js

@@ -37,3 +37,3 @@ import React, {isValidElement} from 'react'; //  eslint-disable-line no-unused-vars
     // an identifier to facilitate aria labelling for a11y for multiple instances of the component family in the DOM
-    this.id = Math.floor(Math.random() * 9999);
+    this.id = props.item.a11yId || Math.floor(Math.random() * 9999);
 
@@ -96,2 +96,9 @@ this.state = {progressBar: null};
 
+  get isToastrClickable() {
+    const {onToastrClick, closeOnToastrClick} = this.props.item.options;
+    const hasOnToastrClick = !!onToastrClick;
+
+    return hasOnToastrClick || closeOnToastrClick;
+  }
+
   handlePressEnterOrSpaceKeyToastr = (e) => {
@@ -201,6 +208,12 @@ if (e.key === ' ' || e.key === 'enter') {
   renderCloseButton() {
+    let closeButtonAttributes = {
+      tabIndex: 0,
+      role: 'button',
+      onKeyPress: this.handlePressEnterOrSpaceKeyCloseButton
+    };
+    if (this.isToastrClickable) {
+      closeButtonAttributes = {};
+    }
     return (
-      <button
-        tabIndex="0"
-        type="button"
+      <div
         className="close-toastr toastr-control"
@@ -210,5 +223,6 @@ aria-label="toast"
         ref={ref => this.closeButton = ref}
+        {...closeButtonAttributes}
       >
-        &#x2715;
-      </button>
+        <span>&#x2715;</span>
+      </div>
     );
@@ -225,2 +239,12 @@ }
 
+    const ariaAttributes = {};
+
+    if (title) {
+      ariaAttributes['aria-labelledby'] = `dialogTitle-${this.id}`;
+    }
+
+    if (message) {
+      ariaAttributes['aria-describedby'] = `dialogDesc-${this.id}`;
+    }
+
     return (
@@ -234,3 +258,3 @@ <div>
         {options.status && type === 'light' && <div className={classnames('toastr-status', options.status)}/>}
-        <div className="rrt-middle-container" role="alertdialog" aria-labelledby={`dialogTitle-${this.id}`} aria-describedby={`dialogDesc-${this.id}`}>
+        <div className="rrt-middle-container" role="alertdialog" {...ariaAttributes}>
           {title && <div id={`dialogTitle-${this.id}`} className="rrt-title">{title}</div>}
@@ -351,8 +375,4 @@ {message && <div id={`dialogDesc-${this.id}`} className="rrt-text">{message}</div>}
 
-    const {onToastrClick, closeOnToastrClick} = options;
-    const hasOnToastrClick = !!onToastrClick;
-    const doesCloseOnToastrClick = closeOnToastrClick;
-
     let toastrClickAttributes = {};
-    if (hasOnToastrClick || doesCloseOnToastrClick) {
+    if (this.isToastrClickable) {
       toastrClickAttributes.role = 'button';
@@ -359,0 +379,0 @@ toastrClickAttributes.tabIndex = 0;

No alert changes

Improved metrics

Total package byte prevSize

154011

increased by1.33%

Lines of code

2544

increased by1.72%

No dependency changes