@shopgate/pwa-ui-material 7.30.0-alpha.10 → 7.30.0-alpha.12

package/SnackBar/index.js

@@ -1,39 +1,42 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { config } from 'react-spring';
 import { Spring } from 'react-spring/renderprops.cjs';
 import Ellipsis from '@shopgate/pwa-common/components/Ellipsis';
 import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultToast = {};
 
 /**
  * The SnackBar component.
  */
-class SnackBar extends Component {
+let SnackBar = /*#__PURE__*/function (_Component) {
   /**
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
-    this.timer = null;
-    this.handleAction = () => {
-      clearTimeout(this.timer);
-      this.props.toasts[0].action();
-      this.hide();
+  function SnackBar(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    _this.timer = null;
+    _this.handleAction = () => {
+      clearTimeout(_this.timer);
+      _this.props.toasts[0].action();
+      _this.hide();
     };
-    this.handleEntered = () => {
-      this.timer = setTimeout(this.hide, this.props.toasts[0].duration || 2500);
+    _this.handleEntered = () => {
+      _this.timer = setTimeout(_this.hide, _this.props.toasts[0].duration || 2500);
     };
-    this.handleRest = () => {
-      if (this.state.visible) {
-        this.handleEntered();
+    _this.handleRest = () => {
+      if (_this.state.visible) {
+        _this.handleEntered();
         return;
       }
-      this.props.removeToast();
+      _this.props.removeToast();
     };
-    this.hide = () => {
-      this.setState({
+    _this.hide = () => {
+      _this.setState({
         visible: false
       });
     };
@@ -43,7 +46,7 @@ class SnackBar extends Component {
      * @param {string} actionLabel The snack bar action label.
      * @return {number}
      */
-    this.calcRows = (message, actionLabel) => {
+    _this.calcRows = (message, actionLabel) => {
       /**
        * Calculates the amount of rows for a passed text.
        * @param {string} text The input text.
@@ -57,15 +60,18 @@ class SnackBar extends Component {
        */
       return calc(`${message}${actionLabel.repeat(calc(message))}`);
     };
-    this.state = {
+    _this.state = {
       visible: true
     };
+    return _this;
   }
 
   /**
    * @param {Object} nextProps The next component props.
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  _inheritsLoose(SnackBar, _Component);
+  var _proto = SnackBar.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     const hasToast = nextProps.toasts.length > 0;
     this.setState({
       visible: hasToast
@@ -76,29 +82,14 @@ class SnackBar extends Component {
    * @param {Object} nextProps The next component props.
    * @param {Object} nextState The next component state.
    * @returns {boolean}
-   */
-  shouldComponentUpdate(nextProps, nextState) {
+   */;
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
     return this.state.visible !== nextState.visible;
-  }
-  /**
-   * Returns the first snack from the state.
-   * @returns {Object}
-   */
-  get snack() {
-    const {
-      __
-    } = this.context.i18n();
-    const snack = this.props.toasts.length ? this.props.toasts[0] : defaultToast;
-    return {
-      ...snack,
-      message: __(snack.message || '', snack.messageParams || {}),
-      actionLabel: __(snack.actionLabel || '')
-    };
-  }
+  };
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       visible
     } = this.state;
@@ -118,47 +109,74 @@ class SnackBar extends Component {
     // Calculate the required amount of rows and the height of the snack bar.
     const rows = this.calcRows(message, actionLabel);
     const snackBarHeight = 40 + rows * 20;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsx("div", {
       className: `${styles.container} ui-material__snack-bar`,
       style: {
         '--snack-bar-height': `${snackBarHeight}px`
-      }
-    }, /*#__PURE__*/React.createElement(Spring, {
-      from: {
-        top: snackBarHeight
-      },
-      to: {
-        top: 0
       },
-      config: config.stiff,
-      reverse: !visible,
-      force: true,
-      onRest: this.handleRest
-    }, props =>
-    /*#__PURE__*/
-    // eslint-disable-next-line max-len
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    React.createElement("div", {
-      className: styles.wrapper,
-      style: props,
-      "data-footer-inset-update-ignore": "true",
-      onClick: this.hide
-    }, /*#__PURE__*/React.createElement("div", _extends({
-      className: styles.box
-    }, boxProps), /*#__PURE__*/React.createElement(Ellipsis, {
-      rows: rows
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.label,
-      "aria-live": "assertive",
-      role: "status"
-    }, message)), action && actionLabel && /*#__PURE__*/React.createElement("button", {
-      className: styles.button,
-      onClick: this.handleAction,
-      type: "button",
-      "aria-hidden": true
-    }, actionLabel)))));
-  }
-}
+      children: /*#__PURE__*/_jsx(Spring, {
+        from: {
+          top: snackBarHeight
+        },
+        to: {
+          top: 0
+        },
+        config: config.stiff,
+        reverse: !visible,
+        force: true,
+        onRest: this.handleRest,
+        children: props =>
+        /*#__PURE__*/
+        // eslint-disable-next-line max-len
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+        _jsx("div", {
+          className: styles.wrapper,
+          style: props,
+          "data-footer-inset-update-ignore": "true",
+          onClick: this.hide,
+          children: /*#__PURE__*/_jsxs("div", {
+            className: styles.box,
+            ...boxProps,
+            children: [/*#__PURE__*/_jsx(Ellipsis, {
+              rows: rows,
+              children: /*#__PURE__*/_jsx("span", {
+                className: styles.label,
+                "aria-live": "assertive",
+                role: "status",
+                children: message
+              })
+            }), action && actionLabel && /*#__PURE__*/_jsx("button", {
+              className: styles.button,
+              onClick: this.handleAction,
+              type: "button",
+              "aria-hidden": true,
+              children: actionLabel
+            })]
+          })
+        })
+      })
+    });
+  };
+  return _createClass(SnackBar, [{
+    key: "snack",
+    get:
+    /**
+     * Returns the first snack from the state.
+     * @returns {Object}
+     */
+    function () {
+      const {
+        __
+      } = this.context.i18n();
+      const snack = this.props.toasts.length ? this.props.toasts[0] : defaultToast;
+      return {
+        ...snack,
+        message: __(snack.message || '', snack.messageParams || {}),
+        actionLabel: __(snack.actionLabel || '')
+      };
+    }
+  }]);
+}(Component);
 SnackBar.defaultProps = {
   toasts: null
 };

package/icons/ShareIcon.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Icon from '@shopgate/pwa-common/components/Icon';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
@@ -8,7 +7,9 @@ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
  * @param {Object} props The icon component properties.
  * @returns {JSX}
  */
-const ShareIcon = props => /*#__PURE__*/React.createElement(Icon, _extends({
-  content: themeConfig.icons.share
-}, props));
+import { jsx as _jsx } from "react/jsx-runtime";
+const ShareIcon = props => /*#__PURE__*/_jsx(Icon, {
+  content: themeConfig.icons.share,
+  ...props
+});
 export default ShareIcon;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@shopgate/pwa-ui-material",
-  "version": "7.30.0-alpha.10",
+  "version": "7.30.0-alpha.12",
   "description": "Shopgate's material design UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@shopgate/pwa-common": "7.30.0-alpha.10",
-    "react": "~16.14.0",
-    "react-dom": "~16.14.0",
+    "@shopgate/pwa-common": "7.30.0-alpha.12",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "redux": "^4.2.1"
   },
   "dependencies": {
@@ -17,9 +17,9 @@
     "prop-types": "~15.8.1",
     "react-spring": "^8.0.27",
     "react-transition-group": "^3.0.0",
-    "react-use": "~13.12.2"
+    "react-use": "^17.6.0"
   },
   "peerDependencies": {
-    "react": "~16.14.0"
+    "react": "^16.0.0 || ^17.0.0"
   }
 }