@commercetools-frontend/react-notifications 21.2.0 → 21.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/commercetools-frontend-react-notifications.cjs.dev.js +8 -2
  2. package/dist/commercetools-frontend-react-notifications.cjs.prod.js +8 -2
  3. package/dist/commercetools-frontend-react-notifications.esm.js +8 -2
  4. package/package.json +22 -20
package/dist/commercetools-frontend-react-notifications.cjs.dev.js CHANGED
@@ -18,6 +18,8 @@ var reactIntl = require('react-intl');
18
18
  var icons = require('@commercetools-uikit/icons');
19
19
  var IconButton = require('@commercetools-uikit/icon-button');
20
20
  var constants = require('@commercetools-frontend/constants');
21
+ var utils = require('@commercetools-uikit/utils');
22
+ var hooks = require('@commercetools-uikit/hooks');
21
23
  var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
22
24
  var omitBy = require('lodash/omitBy');
23
25
  var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
@@ -60,7 +62,7 @@ var _sliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_sliceInstanc
60
62
  var isNumber__default = /*#__PURE__*/_interopDefault(isNumber);
61
63
 
62
64
  // NOTE: This string will be replaced on build time with the package version.
63
- var version = "21.2.0";
65
+ var version = "21.3.4";
64
66
 
65
67
  var Context = /*#__PURE__*/react.createContext(function () {
66
68
  return null;
@@ -155,6 +157,7 @@ var getStylesForNotification = function getStylesForNotification(props) {
155
157
  function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
156
158
 
157
159
  function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
160
+ var sequentialId = utils.createSequentialId('notification-');
158
161
 
159
162
  var NotificationIcon = function NotificationIcon(props) {
160
163
  if (props.type === constants.NOTIFICATION_KINDS_SIDE.error) return jsxRuntime.jsx(icons.ErrorIcon, {
@@ -182,10 +185,14 @@ var defaultProps$1 = {
182
185
 
183
186
  var Notification = function Notification(props) {
184
187
  var intl = reactIntl.useIntl();
188
+ var id = hooks.useFieldId(undefined, sequentialId);
185
189
  return jsxRuntime.jsxs("div", _objectSpread$4(_objectSpread$4({
190
+ role: "alertdialog",
191
+ "aria-describedby": id,
186
192
  css: getStylesForNotification(props)
187
193
  }, filterDataAttributes(props)), {}, {
188
194
  children: [jsxRuntime.jsx("div", {
195
+ id: id,
189
196
  css: getStylesForContent(props),
190
197
  children: props.children
191
198
  }), props.onCloseClick ? jsxRuntime.jsx("div", {
@@ -838,7 +845,6 @@ var Notifier = function Notifier(props) {
838
845
  var showNotification = actionsGlobal.useShowNotification();
839
846
  react.useEffect(function () {
840
847
  var notification = showNotification({
841
- id: 0,
842
848
  domain: props.domain,
843
849
  kind: props.kind,
844
850
  text: props.text
package/dist/commercetools-frontend-react-notifications.cjs.prod.js CHANGED
@@ -18,6 +18,8 @@ var reactIntl = require('react-intl');
18
18
  var icons = require('@commercetools-uikit/icons');
19
19
  var IconButton = require('@commercetools-uikit/icon-button');
20
20
  var constants = require('@commercetools-frontend/constants');
21
+ var utils = require('@commercetools-uikit/utils');
22
+ var hooks = require('@commercetools-uikit/hooks');
21
23
  var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
22
24
  var omitBy = require('lodash/omitBy');
23
25
  var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
@@ -60,7 +62,7 @@ var _sliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_sliceInstanc
60
62
  var isNumber__default = /*#__PURE__*/_interopDefault(isNumber);
61
63
 
62
64
  // NOTE: This string will be replaced on build time with the package version.
63
- var version = "21.2.0";
65
+ var version = "21.3.4";
64
66
 
65
67
  var Context = /*#__PURE__*/react.createContext(function () {
66
68
  return null;
@@ -152,6 +154,7 @@ var getStylesForNotification = function getStylesForNotification(props) {
152
154
  function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
153
155
 
154
156
  function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
157
+ var sequentialId = utils.createSequentialId('notification-');
155
158
 
156
159
  var NotificationIcon = function NotificationIcon(props) {
157
160
  if (props.type === constants.NOTIFICATION_KINDS_SIDE.error) return jsxRuntime.jsx(icons.ErrorIcon, {
@@ -176,10 +179,14 @@ var defaultProps$1 = {
176
179
 
177
180
  var Notification = function Notification(props) {
178
181
  var intl = reactIntl.useIntl();
182
+ var id = hooks.useFieldId(undefined, sequentialId);
179
183
  return jsxRuntime.jsxs("div", _objectSpread$4(_objectSpread$4({
184
+ role: "alertdialog",
185
+ "aria-describedby": id,
180
186
  css: getStylesForNotification(props)
181
187
  }, filterDataAttributes(props)), {}, {
182
188
  children: [jsxRuntime.jsx("div", {
189
+ id: id,
183
190
  css: getStylesForContent(props),
184
191
  children: props.children
185
192
  }), props.onCloseClick ? jsxRuntime.jsx("div", {
@@ -809,7 +816,6 @@ var Notifier = function Notifier(props) {
809
816
  var showNotification = actionsGlobal.useShowNotification();
810
817
  react.useEffect(function () {
811
818
  var notification = showNotification({
812
- id: 0,
813
819
  domain: props.domain,
814
820
  kind: props.kind,
815
821
  text: props.text
package/dist/commercetools-frontend-react-notifications.esm.js CHANGED
@@ -14,6 +14,8 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
14
14
  import { CloseBoldIcon, ErrorIcon, InfoIcon, WarningIcon, CheckBoldIcon } from '@commercetools-uikit/icons';
15
15
  import IconButton from '@commercetools-uikit/icon-button';
16
16
  import { NOTIFICATION_DOMAINS, NOTIFICATION_KINDS_SIDE, NOTIFICATION_KINDS_GLOBAL, NOTIFICATION_KINDS_PAGE } from '@commercetools-frontend/constants';
17
+ import { createSequentialId } from '@commercetools-uikit/utils';
18
+ import { useFieldId } from '@commercetools-uikit/hooks';
17
19
  import _startsWithInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/starts-with';
18
20
  import omitBy from 'lodash/omitBy';
19
21
  import _taggedTemplateLiteral from '@babel/runtime-corejs3/helpers/esm/taggedTemplateLiteral';
@@ -34,7 +36,7 @@ import isNumber from 'lodash/isNumber';
34
36
  import { useShowNotification } from '@commercetools-frontend/actions-global';
35
37
 
36
38
  // NOTE: This string will be replaced on build time with the package version.
37
- var version = "21.2.0";
39
+ var version = "21.3.4";
38
40
 
39
41
  var Context = /*#__PURE__*/createContext(function () {
40
42
  return null;
@@ -129,6 +131,7 @@ var getStylesForNotification = function getStylesForNotification(props) {
129
131
  function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
130
132
 
131
133
  function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$4(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$4(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
134
+ var sequentialId = createSequentialId('notification-');
132
135
 
133
136
  var NotificationIcon = function NotificationIcon(props) {
134
137
  if (props.type === NOTIFICATION_KINDS_SIDE.error) return jsx(ErrorIcon, {
@@ -156,10 +159,14 @@ var defaultProps$1 = {
156
159
 
157
160
  var Notification = function Notification(props) {
158
161
  var intl = useIntl();
162
+ var id = useFieldId(undefined, sequentialId);
159
163
  return jsxs("div", _objectSpread$4(_objectSpread$4({
164
+ role: "alertdialog",
165
+ "aria-describedby": id,
160
166
  css: getStylesForNotification(props)
161
167
  }, filterDataAttributes(props)), {}, {
162
168
  children: [jsx("div", {
169
+ id: id,
163
170
  css: getStylesForContent(props),
164
171
  children: props.children
165
172
  }), props.onCloseClick ? jsx("div", {
@@ -812,7 +819,6 @@ var Notifier = function Notifier(props) {
812
819
  var showNotification = useShowNotification();
813
820
  useEffect(function () {
814
821
  var notification = showNotification({
815
- id: 0,
816
822
  domain: props.domain,
817
823
  kind: props.kind,
818
824
  text: props.text
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@commercetools-frontend/react-notifications",
3
- "version": "21.2.0",
3
+ "version": "21.3.4",
4
4
  "description": "React bindings for @commercetools-frontend/notifications",
5
5
  "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
6
6
  "repository": {
@@ -18,38 +18,40 @@
18
18
  "module": "dist/commercetools-frontend-react-notifications.esm.js",
19
19
  "files": ["dist", "package.json", "LICENSE", "README.md"],
20
20
  "dependencies": {
21
- "@babel/runtime": "^7.16.7",
22
- "@babel/runtime-corejs3": "^7.16.8",
23
- "@commercetools-frontend/actions-global": "21.0.0",
24
- "@commercetools-frontend/constants": "21.0.0",
25
- "@commercetools-frontend/notifications": "21.0.0",
26
- "@commercetools-frontend/sentry": "21.0.0",
21
+ "@babel/runtime": "^7.17.9",
22
+ "@babel/runtime-corejs3": "^7.17.9",
23
+ "@commercetools-frontend/actions-global": "21.3.4",
24
+ "@commercetools-frontend/constants": "21.3.4",
25
+ "@commercetools-frontend/notifications": "21.3.4",
26
+ "@commercetools-frontend/sentry": "21.3.4",
27
27
  "@commercetools-uikit/design-system": "^14.0.0",
28
- "@commercetools-uikit/icon-button": "^14.0.1",
28
+ "@commercetools-uikit/hooks": "^14.0.3",
29
+ "@commercetools-uikit/icon-button": "^14.0.6",
29
30
  "@commercetools-uikit/icons": "^14.0.1",
30
- "@commercetools-uikit/spacings": "^14.0.1",
31
- "@emotion/react": "11.7.1",
32
- "@emotion/styled": "11.6.0",
31
+ "@commercetools-uikit/spacings": "^14.0.6",
32
+ "@commercetools-uikit/utils": "^14.0.1",
33
+ "@emotion/react": "11.9.0",
34
+ "@emotion/styled": "11.8.1",
33
35
  "@types/history": "4.7.11",
34
- "@types/lodash": "^4.14.178",
35
- "@types/prop-types": "^15.7.4",
36
- "@types/react": "^17.0.38",
37
- "@types/react-dom": "^17.0.11",
38
- "@types/react-redux": "^7.1.22",
36
+ "@types/lodash": "^4.14.181",
37
+ "@types/prop-types": "^15.7.5",
38
+ "@types/react": "^17.0.44",
39
+ "@types/react-dom": "^17.0.15",
40
+ "@types/react-redux": "^7.1.23",
39
41
  "@types/react-router": "^5.1.18",
40
42
  "@types/react-router-dom": "^5.3.3",
41
43
  "lodash": "4.17.21",
42
- "moment": "^2.29.1",
44
+ "moment": "^2.29.2",
43
45
  "moment-timezone": "^0.5.34",
44
46
  "prop-types": "15.8.1",
45
47
  "reselect": "4.1.5"
46
48
  },
47
49
  "devDependencies": {
48
- "@testing-library/react": "12.1.2",
50
+ "@testing-library/react": "12.1.5",
49
51
  "react": "17.0.2",
50
52
  "react-dom": "17.0.2",
51
- "react-intl": "5.24.3",
52
- "react-redux": "7.2.6",
53
+ "react-intl": "5.24.8",
54
+ "react-redux": "7.2.8",
53
55
  "react-router-dom": "5.3.0"
54
56
  },
55
57
  "peerDependencies": {