@commercetools-frontend/react-notifications 22.3.0 → 22.3.1

package/dist/commercetools-frontend-react-notifications.cjs.prod.js

@@ -16,9 +16,7 @@ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/obje
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var reactIntl = require('react-intl');
 var constants = require('@commercetools-frontend/constants');
-var designSystem = require('@commercetools-uikit/design-system');
 var hooks = require('@commercetools-uikit/hooks');
-var IconButton = require('@commercetools-uikit/icon-button');
 var icons = require('@commercetools-uikit/icons');
 var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
 var utils = require('@commercetools-uikit/utils');
@@ -26,6 +24,7 @@ var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable
 var omitBy = require('lodash/omitBy');
 var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
 var react$1 = require('@emotion/react');
+var designSystem = require('@commercetools-uikit/design-system');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var _valuesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/values');
@@ -51,7 +50,6 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
-var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
 var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
 var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
 var omitBy__default = /*#__PURE__*/_interopDefault(omitBy);
@@ -64,7 +62,7 @@ var _sliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_sliceInstanc
 var isNumber__default = /*#__PURE__*/_interopDefault(isNumber);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "22.3.0";
+var version = "22.3.1";
 
 const Context = /*#__PURE__*/react.createContext(() => null);
 function NotificationProviderForCustomComponent(props) {
@@ -121,10 +119,10 @@ const getBorderColor = notificationKind => {
 const showNotificationAnimation = react$1.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    max-height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    overflow: hidden;\n  }\n  100% {\n    max-height: 200px;\n  }\n"])));
 const showNotificationSideAnimation = react$1.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    transform: translateX(50px);\n  }\n  100% {\n    transform: translateX(0);\n  }\n"])));
 const getStylesForNotificationIcon = props => /*#__PURE__*/react$1.css("display:flex;align-items:center;justify-content:center;position:absolute;left:0;top:0;width:48px;height:100%;color:", designSystem.designTokens.colorSurface, ";border-radius:3px 0 0 3px;background:", getColorByType(props.type), ";" + ("" ), "" );
-const getStylesForCloseIcon = props => /*#__PURE__*/react$1.css("display:flex;justify-content:center;", props.isNewTheme ? '& svg { width: 16px; height: 16px; }' : '', " ", props.isNewTheme && props.domain !== constants.NOTIFICATION_DOMAINS.SIDE ? '& svg { fill: ' + designSystem.designTokens.colorSurface + '; }' : '', ";" + ("" ), "" );
+const getStylesForCloseIcon = props => /*#__PURE__*/react$1.css("display:flex;justify-content:center;& svg{width:16px;height:16px;}", props.domain !== constants.NOTIFICATION_DOMAINS.SIDE ? '& svg { fill: ' + designSystem.designTokens.colorSurface + '; }' : '', ";" + ("" ), "" );
 const getStylesForContent = props => {
   const fontColor = props.domain === constants.NOTIFICATION_DOMAINS.SIDE ? designSystem.designTokens.colorSolid : designSystem.designTokens.colorSurface;
-  return /*#__PURE__*/react$1.css("flex-basis:100%;flex-grow:1;padding:0 ", props.isNewTheme ? designSystem.designTokens.spacingM : designSystem.designTokens.spacingS, ";margin:0;font-size:", props.domain === constants.NOTIFICATION_DOMAINS.SIDE ? props.isNewTheme ? '1rem' : '0.929rem' : 'inherit', ";color:", fontColor, ";p{color:", fontColor, ";}ul{padding:0;margin:0;list-style:none;}" + ("" ), "" );
+  return /*#__PURE__*/react$1.css("flex-basis:100%;flex-grow:1;padding:", "0 ".concat(designSystem.designTokens.spacingM), ";margin:0;font-size:", props.domain === constants.NOTIFICATION_DOMAINS.SIDE ? '1rem' : 'inherit', ";color:", fontColor, ";p{color:", fontColor, ";}ul{padding:0;margin:0;list-style:none;}" + ("" ), "" );
 };
 const getStylesForNotification = props => {
   const baseStyles = /*#__PURE__*/react$1.css("position:relative;display:flex;align-items:center;padding:", designSystem.designTokens.spacingM, ";color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" );
@@ -136,7 +134,7 @@ const getStylesForNotification = props => {
       return pageStyles;
     case constants.NOTIFICATION_DOMAINS.SIDE:
       {
-        const sideStyles = /*#__PURE__*/react$1.css(baseStyles, ";animation:", showNotificationAnimation, " 0.3s forwards;padding:", designSystem.designTokens.spacingM, " ", designSystem.designTokens.spacingM, " ", designSystem.designTokens.spacingM, " 50px!important;text-align:left;background:", designSystem.designTokens.colorSurface, ";border:1px solid ", props.isNewTheme ? getBorderColor(props.type) : getColorByType(props.type), ";box-shadow:", props.isNewTheme ? '0px 2px 5px 0px rgba(0, 0, 0, 0.15)' : '0 1px 2px rgba(0, 0, 0, 0.24)', ";border-radius:", designSystem.designTokens.borderRadius6, ";word-break:break-word;hyphens:auto;" + ("" ), "" );
+        const sideStyles = /*#__PURE__*/react$1.css(baseStyles, ";animation:", showNotificationAnimation, " 0.3s forwards;padding:", designSystem.designTokens.spacingM, " ", designSystem.designTokens.spacingM, " ", designSystem.designTokens.spacingM, " 50px!important;text-align:left;background:", designSystem.designTokens.colorSurface, ";border:1px solid ", getBorderColor(props.type), ";box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.15);border-radius:", designSystem.designTokens.borderRadius6, ";word-break:break-word;hyphens:auto;" + ("" ), "" );
         if (props.fixed) return sideStyles;
         return /*#__PURE__*/react$1.css(sideStyles, ";animation:", showNotificationSideAnimation, " 0.3s forwards;position:relative;z-index:10000;margin-top:", designSystem.designTokens.spacingL, "!important;right:", designSystem.designTokens.spacingXl, ";float:right;clear:both;max-width:50%;" + ("" ), "" );
       }
@@ -155,9 +153,7 @@ const NotificationIcon = props => {
     });
   }
   if (props.type === constants.NOTIFICATION_KINDS_SIDE.info) {
-    return props.isNewTheme ? jsxRuntime.jsx(icons.InformationIcon, {
-      color: props.color
-    }) : jsxRuntime.jsx(icons.InfoIcon, {
+    return jsxRuntime.jsx(icons.InformationIcon, {
       color: props.color
     });
   }
@@ -178,28 +174,18 @@ const defaultProps$1 = {
 const Notification = props => {
   const intl = reactIntl.useIntl();
   const id = hooks.useFieldId(undefined, sequentialId);
-  const _useTheme = designSystem.useTheme(),
-    isNewTheme = _useTheme.isNewTheme,
-    themedValue = _useTheme.themedValue;
-  const Button = themedValue(IconButton__default["default"], SecondaryIconButton__default["default"]);
   return jsxRuntime.jsxs("div", _objectSpread$4(_objectSpread$4({
     role: "alertdialog",
     "aria-describedby": id,
-    css: getStylesForNotification(_objectSpread$4(_objectSpread$4({}, props), {}, {
-      isNewTheme
-    }))
+    css: getStylesForNotification(props)
   }, filterDataAttributes(props)), {}, {
     children: [jsxRuntime.jsx("div", {
       id: id,
-      css: getStylesForContent(_objectSpread$4(_objectSpread$4({}, props), {}, {
-        isNewTheme
-      })),
+      css: getStylesForContent(props),
       children: props.children
     }), props.onCloseClick ? jsxRuntime.jsx("div", {
-      css: getStylesForCloseIcon(_objectSpread$4(_objectSpread$4({}, props), {}, {
-        isNewTheme
-      })),
-      children: jsxRuntime.jsx(Button, {
+      css: getStylesForCloseIcon(props),
+      children: jsxRuntime.jsx(SecondaryIconButton__default["default"], {
         label: intl.formatMessage(messages.hideNotification),
         onClick: props.onCloseClick,
         icon: jsxRuntime.jsx(icons.CloseBoldIcon, {}),
@@ -209,8 +195,7 @@ const Notification = props => {
       css: getStylesForNotificationIcon(props),
       children: jsxRuntime.jsx(NotificationIcon, {
         type: props.type,
-        color: "surface",
-        isNewTheme: isNewTheme
+        color: "surface"
       })
     }) : null]
   }));
@@ -363,17 +348,27 @@ var apiErrorMessages = reactIntl.defineMessages({
 function ownKeys$3(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; }
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context6 = ownKeys$3(Object(source), !0)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context7 = ownKeys$3(Object(source))).call(_context7, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const regexInvalidOperationRequiredAttribute = /Required attribute '(.*)' cannot be removed/;
+
+// `error` fields for REST errors
+// `error.extensions` fields for GraphQL errors
 // The values passed to the Intl message must be a map of scalar values.
 // Some of the message values are already mapped in the `getSpecialFormattedMessageByErrorCode`
 // function. Here we map other possible error properties that can be
 // used in the message.
 const mapErrorFieldsToMessageValues = error => {
-  if (error.field) return {
-    field: error.field
-  };
-  if (error.referencedBy) return {
-    referencedBy: error.referencedBy
-  };
+  var _error$extensions, _error$extensions2;
+  const errorField = ((_error$extensions = error.extensions) === null || _error$extensions === void 0 ? void 0 : _error$extensions.field) || error.field;
+  if (errorField) {
+    return {
+      field: errorField
+    };
+  }
+  const errorReferencedBy = ((_error$extensions2 = error.extensions) === null || _error$extensions2 === void 0 ? void 0 : _error$extensions2.referencedBy) || error.referencedBy;
+  if (errorReferencedBy) {
+    return {
+      referencedBy: errorReferencedBy
+    };
+  }
   return {};
 };
 
@@ -427,8 +422,8 @@ const ApiErrorMessage = props => {
 ApiErrorMessage.propTypes = {};
 ApiErrorMessage.displayName = 'ApiErrorMessage';
 function getSpecialFormattedMessageByErrorCode(error, intl) {
-  var _error$extensions$cod, _error$extensions, _context3, _context4, _context5;
-  const extensionErrorCode = (_error$extensions$cod = (_error$extensions = error.extensions) === null || _error$extensions === void 0 ? void 0 : _error$extensions.code) !== null && _error$extensions$cod !== void 0 ? _error$extensions$cod : error.code;
+  var _error$extensions$cod, _error$extensions3, _context3, _context4, _context5;
+  const extensionErrorCode = (_error$extensions$cod = (_error$extensions3 = error.extensions) === null || _error$extensions3 === void 0 ? void 0 : _error$extensions3.code) !== null && _error$extensions$cod !== void 0 ? _error$extensions$cod : error.code;
   if (error.errorByExtension) {
     let extensionMessage;
     if (error.localizedMessage) {
@@ -441,9 +436,9 @@ function getSpecialFormattedMessageByErrorCode(error, intl) {
   // TODO: this is a temporary solution until we have proper pages about 403
   if (extensionErrorCode === 'insufficient_scope') return intl.formatMessage(apiErrorMessages.Forbidden);
   if (extensionErrorCode === 'DuplicateField') {
-    var _error$extensions2, _error$extensions3;
-    const errorField = ((_error$extensions2 = error.extensions) === null || _error$extensions2 === void 0 ? void 0 : _error$extensions2.field) || error.field;
-    const errorDuplicateValue = ((_error$extensions3 = error.extensions) === null || _error$extensions3 === void 0 ? void 0 : _error$extensions3.duplicateValue) || error.duplicateValue;
+    var _error$extensions4, _error$extensions5;
+    const errorField = ((_error$extensions4 = error.extensions) === null || _error$extensions4 === void 0 ? void 0 : _error$extensions4.field) || error.field;
+    const errorDuplicateValue = ((_error$extensions5 = error.extensions) === null || _error$extensions5 === void 0 ? void 0 : _error$extensions5.duplicateValue) || error.duplicateValue;
     if (errorField === 'slug') {
       return intl.formatMessage(apiErrorMessages.DuplicateSlug, {
         slugValue: errorDuplicateValue